bubbletea - 強力な小さなTUIフレームワーク🏗

(A powerful little TUI framework 🏗)

Created at: 2020-01-11 05:04:03
Language: Go
License: MIT

タピオカティー

タピオカティーのタイトルトリートメント
最新のリリース GoDoc ビルドステータス

ターミナルアプリを構築するための楽しく、機能的でステートフルな方法。ElmArchitectureに基づくGoフレームワーク。バブルティーは、インライン、フルウィンドウ、またはその両方の組み合わせの、単純な端末アプリケーションと複雑な端末アプリケーションのいずれかに最適です。

タピオカティーの例

バブルティーは本番環境で使用されており、その過程で追加した多くの機能とパフォーマンスの最適化が含まれています。その中には、標準のフレームレートベースのレンダラー、メインレンダラーと一緒に機能する高性能のスクロール可能な領域用のレンダラー、およびマウスのサポートがあります。

開始するには、以下のチュートリアル、ドキュメント、およびいくつかの一般的なリソースを参照してください。

ところで

バブルティーの一般的なUIコンポーネントのライブラリであるバブルを必ずチェックしてください。

泡バッジ   バブルからのテキスト入力例


チュートリアル

バブルティーは、エルムアーキテクチャの機能設計パラダイムに基づいており、Goとうまく連携します。これは、アプリケーションを構築するための楽しい方法です。

ちなみに、このプログラムの注釈なしのソースコードは GitHubで入手できます。

このチュートリアルは、Goの実用的な知識があることを前提としています。

十分!それに取り掛かりましょう。

このチュートリアルでは、ショッピングリストを作成しています。

まず、パッケージを定義し、いくつかのライブラリをインポートします。私たちの唯一の外部インポートは、BubbleTeaライブラリです。これを

tea
略して呼びます。

package main

import (
    "fmt"
    "os"

    tea "github.com/charmbracelet/bubbletea"
)

バブルティープログラムは、アプリケーションの状態を説明するモデルと、そのモデルの3つの簡単な方法で構成されています。

  • Init、アプリケーションを実行するための初期コマンドを返す関数。
  • Updateは、着信イベントを処理し、それに応じてモデルを更新する関数です。
  • ビュー、モデル内のデータに基づいてUIをレンダリングする関数。

モデル

それでは、アプリケーションの状態を格納するモデルを定義することから始めましょう。どのタイプでもかまいませんが、

struct
通常は最も理にかなっています。

type model struct {
    choices  []string           // items on the to-do list
    cursor   int                // which to-do list item our cursor is pointing at
    selected map[int]struct{}   // which to-do items are selected
}

初期化

次に、アプリケーションの初期状態を定義します。この場合、初期モデルを返す関数を定義していますが、他の場所でも変数と同じように簡単に初期モデルを定義できます。

func initialModel() model {
	return model{
		// Our shopping list is a grocery list
		choices:  []string{"Buy carrots", "Buy celery", "Buy kohlrabi"},

		// A map which indicates which choices are selected. We're using
		// the  map like a mathematical set. The keys refer to the indexes
		// of the `choices` slice, above.
		selected: make(map[int]struct{}),
	}
}

次に、メソッドを定義します

Init
。初期I/Oを実行
Init
できるを返すことができます。
Cmd
今のところ、I / Oを実行する必要はないので、コマンドに対しては、
nil
「コマンドなし」に変換される、を返すだけです。

func (m model) Init() tea.Cmd {
    // Just return `nil`, which means "no I/O right now, please."
    return nil
}

更新方法

次は更新方法です。更新関数は、「何かが起こった」ときに呼び出されます。その仕事は、何が起こったのかを見て、それに応じて更新されたモデルを返すことです。それはまた、より多くのことを起こさせるためにを返すことができます

Cmd
が、今のところその部分について心配する必要はありません。

この場合、ユーザーが下矢印を押すと、

Update
の仕事は下矢印が押されたことに気づき、それに応じてカーソルを移動する(または移動しない)ことです。

「何かが起こった」という形式は、

Msg
どのタイプでもかまいません。メッセージは、キー押下、タイマーティック、サーバーからの応答など、発生したI/Oの結果です。

通常、タイプスイッチで受信したタイプを把握し

Msg
ますが、タイプアサーションを使用することもできます。

ここでは、メッセージを処理し

tea.KeyMsg
ます。メッセージは、キーが押されたときに自動的に更新機能に送信されます。

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {

    // Is it a key press?
    case tea.KeyMsg:

        // Cool, what was the actual key pressed?
        switch msg.String() {

        // These keys should exit the program.
        case "ctrl+c", "q":
            return m, tea.Quit

        // The "up" and "k" keys move the cursor up
        case "up", "k":
            if m.cursor > 0 {
                m.cursor--
            }

        // The "down" and "j" keys move the cursor down
        case "down", "j":
            if m.cursor < len(m.choices)-1 {
                m.cursor++
            }

        // The "enter" key and the spacebar (a literal space) toggle
        // the selected state for the item that the cursor is pointing at.
        case "enter", " ":
            _, ok := m.selected[m.cursor]
            if ok {
                delete(m.selected, m.cursor)
            } else {
                m.selected[m.cursor] = struct{}{}
            }
        }
    }

    // Return the updated model to the Bubble Tea runtime for processing.
    // Note that we're not returning a command.
    return m, nil
}

上記のモデルでコマンドをctrl+c返すqことに気付いたかもしれません。

tea.Quit
これは、BubbleTeaランタイムにプログラムを終了して終了するように指示する特別なコマンドです。

ビューメソッド

最後に、UIをレンダリングします。すべての方法の中で、ビューは最も単純です。現在の状態のモデルを確認し、それを使用してを返します

string
。その文字列が私たちのUIです!

ビューはアプリケーションのUI全体を記述しているため、ロジックの再描画などについて心配する必要はありません。バブルティーがお世話になります。

func (m model) View() string {
    // The header
    s := "What should we buy at the market?\n\n"

    // Iterate over our choices
    for i, choice := range m.choices {

        // Is the cursor pointing at this choice?
        cursor := " " // no cursor
        if m.cursor == i {
            cursor = ">" // cursor!
        }

        // Is this choice selected?
        checked := " " // not selected
        if _, ok := m.selected[i]; ok {
            checked = "x" // selected!
        }

        // Render the row
        s += fmt.Sprintf("%s [%s] %s\n", cursor, checked, choice)
    }

    // The footer
    s += "\nPress q to quit.\n"

    // Send the UI for rendering
    return s
}

すべて一緒に今

最後のステップは、単にプログラムを実行することです。最初のモデルをに渡し、

tea.NewProgram
それをリッピングさせます。

func main() {
    p := tea.NewProgram(initialModel())
    if err := p.Start(); err != nil {
        fmt.Printf("Alas, there's been an error: %v", err)
        os.Exit(1)
    }
}

次は何ですか?

このチュートリアルでは、インタラクティブなターミナルUIの構築の基本について説明しますが、実際にはI/Oも実行する必要があります。これについては、コマンドチュートリアルをご覧ください。とても簡単です。

利用可能なバブルティーの例もいくつかあります。もちろん、GoDocsもあります。

Delveを使用したデバッグ

バブルティーアプリはstdinとstdoutの制御を想定しているため、ヘッドレスモードでdelveを実行してから、それに接続する必要があります。

# Start the debugger
$ dlv debug --headless .
API server listening at: 127.0.0.1:34241

# Connect to it from another terminal
$ dlv connect 127.0.0.1:34241

dlv
使用されるデフォルトのポートはシステムや実行ごとに異なるため、実際には、最初の実行で接続するように指示されているアドレスに注意してください。

バブルティーで使用するライブラリ

  • バブル:テキスト入力、ビューポート、スピナーなどの一般的なバブルティーコンポーネント
  • リップグロス:端末アプリケーション用のスタイル、フォーマット、レイアウトツール
  • ハーモニカ:スムーズで自然な動きを実現する春のアニメーションライブラリ
  • Termenv:端末アプリケーション用の高度なANSIスタイリング
  • リフロー:テキストを操作するための高度なANSI対応メソッド

野生のバブルティー

制作中のいくつかのバブルティープログラムについては、以下を参照してください。

  • AT CLI:シリアルポート接続を介してATコマンドを実行するためのユーティリティ
  • Canard:RSSクライアント
  • チャームツール:チャームユーザーアカウントマネージャー
  • clidle:端末用のWordleクローン
  • fm:ターミナルベースのファイルマネージャー
  • フォーククリーナー:GitHubアカウントの古くて非アクティブなフォークをクリーンアップします
  • ギャンビット:ターミナルでチェスをする
  • gembro:マウス駆動のGeminiブラウザ
  • gh-b:ブランチを簡単に管理するためのGitHubCLI拡張機能
  • gh-dash:PRと問題のダッシュボードを表示するGitHubcli拡張機能
  • gitflow-toolkit:GitFlow送信ツール
  • グロー:マークダウンリーダー、ブラウザ、オンラインマークダウンスタッシュ
  • gocovsh:CLIからGoカバレッジレポートを探索する
  • httpit:迅速なhttp(s)ベンチマークツール
  • IDNT:バッチソフトウェアアンインストーラー
  • kboard:タイピングゲーム
  • mergestat:gitリポジトリでSQLクエリを実行します
  • mc:公式のMinIOクライアント
  • ポータル:コンピュータ間で安全に転送を送信します
  • redis-viewer:Redisデータベースを閲覧する
  • スライド:マークダウンベースのプレゼンテーションツール
  • ソフトクリーム:SSH経由でTUIを実行するコマンドラインファーストのGitサーバー
  • StormForge Optimize Controller:Kubernetesでアプリケーション構成を試すためのツール
  • STTG:スウェーデンの全国公共テレビ局SVTの文字放送クライアント
  • sttr:さまざまなテキスト変換を実行します
  • tasktimer:非常にシンプルなタスクタイマー
  • termdbms:キーボードとマウスで駆動されるデータベースブラウザ
  • ティッカー:ターミナルストックウォッチャーおよびストックポジショントラッカー
  • tran :コンピュータ間で安全にデータを転送します(ポータルに基づく)
  • tz:複数のタイムゾーンにまたがるスケジューリングの支援
  • タイパー:タイピングテスト
  • ウィッシュリスト:SSHディレクトリ

フィードバック

このチュートリアルについてのご意見をお聞かせください。お気軽にご連絡ください!

謝辞

バブルティーは、Evan CzaplickietaliaによるTheElmArchitectureのパラダイムと、TJHolowaychukによる優れたゴーティー基づいています。

ライセンス

MIT


チャームの一部。

チャームのロゴ

Charmサーマル爱開源•Charmはオープンソースが大好きです