ハクソク

世界を動かす技術を、日本語で。

TUI Studio – ビジュアルターミナルUIデザインツール

47日前原文(tui.studio)

概要

  • TUIStudioは、FigmaのようなビジュアルエディタでTUIアプリ開発を支援
  • ドラッグ＆ドロップでコンポーネント配置、リアルタイム編集に対応
  • 6つの主要フレームワークへのコードエクスポート機能（現在アルファ版）
  • 多彩なカラーテーマとレイアウトエンジンを搭載
  • Apple Silicon（M1～M4）に対応したネイティブMacアプリを提供

TUIStudio：Figma風TUIアプリ開発ビジュアルエディタ

  • TUIStudioは、ターミナルアプリ（TUI）を視覚的に設計できるエディタ
  • ドラッグ＆ドロップ操作でコンポーネントをキャンバスに配置
  • リアルタイムANSIプレビューとズーム機能で即時確認
  • 20種類以上のTUIコンポーネント（Screen, Box, Button, TextInput, Table, List, Tree, Tabs, Modal, Spinner, ProgressBarなど）を標準搭載
  • 3種類のレイアウトエンジン（Absolute, Flexbox, Grid）で柔軟なデザイン制御
  • 8つのカラーテーマ（Dracula, Nord, Solarized, Monokai, Gruvbox, Tokyo Night, Nightfox, Sonokai）をワンクリックで切替
  • マルチフレームワーク対応エクスポート（Ink, BubbleTea, Blessed, Textual, OpenTUI, Tview）予定
  • プロジェクトは.tui形式のJSONファイルで保存・共有可能
  • コマンドパレット、テーマ切替、コンポーネントツールバーなど、デザイン作業効率化機能

エクスポート機能と対応フレームワーク

  • デザイン1回で6つのフレームワークへコード生成（現在はアルファ版で未実装、今後対応予定）
    • Ink（TypeScript/React）
    • BubbleTea（Go, Elmアーキテクチャ）
    • Blessed（JavaScript, Node.js）
    • Textual（Python, モダンTUIフレームワーク）
    • OpenTUI（TypeScript）
    • Tview（Go, ウィジェットベース）

主要コンポーネント一覧（21種）

  • Screen、Box、Button、TextInput、Checkbox、Radio、Select、Toggle、Text、Spinner、ProgressBar、Table、List、Tree、Menu、Tabs、Breadcrumb、Modal、Popover、Tooltip、Spacer
  • 今後も追加予定

FAQ：よくある質問

  • TUI（Text User Interface）とは
    ターミナル上で動作する対話型アプリ（例：htop, lazygit, k9s）
    UIは文字・色・ANSIエスケープコードで構成
  • TUIStudioのメリット
    コードを書かずに視覚的にTUIを設計可能
  • セキュリティ警告の回避方法
    • macOS：Gatekeeperにより警告表示。右クリックで「開く」またはシステム設定で「このアプリケーションを開く」を選択
    • Windows：SmartScreenで警告。「詳細情報」→「実行」を選択
    • Linux：特別な制限なし。dpkgコマンドまたはダブルクリックでインストール
  • エクスポート機能の現状
    現在はアルファ版で未実装。今後6フレームワーク対応予定
  • 価格・ライセンス
    コアエディタは無料。将来的にProプラン（チーム機能、クラウド同期、優先サポート）を提供予定
  • プロジェクトファイル
    .tui形式JSONで保存。Git管理やチーム共有も簡単。アカウント不要、クラウド不要

ダウンロード・利用開始

  • Apple Silicon（M1～M4）対応Macアプリを提供
  • インストール不要、ダウンロード後すぐに利用可能
  • 公式GitHubで詳細・最新情報を公開

Hackerたちの意見

これ、意味不明だわ。ここに表示されてるUIはテキスト的なものじゃないし。キャラクターセル内でコンセプトの1:1表現があっても、GUIであることは変わらないよ。UXは実際に重要で、TUIは効果的でパワフルに作られてることが多い（lazygitがその良い例ね）。でも、マウスでクリックできるタブやボタン、チェックボックスを追加し始めると、TUIのUXを捨てて、GUIに期待されるUXを適用しちゃうから、それはTUIを装ったGUIになっちゃうんだよね。
└
TUIの一つの正当化として、SSH経由のリモートアクセスがあるね。
└
UIはテキストだけだから、テキスト的だね。現代のTUIはマウスイベントをサポートすることもある。このツールがいくつかのTUIフレームワークにエクスポートできるってことは、これらのUIが実際にTUIである証拠だよ、たとえ最も伝統的ではなくてもね。
└
テキストを使って要素を構築するなら、それはTUIだね。どんなインターフェースでも効果的でパワフルになれるし、逆にどんなインターフェースでも無力になれる。人々はTUIがかっこいいから好きだし、SSHでも使えるからね。
└
> ここで示されているUIにはテキスト的な要素は何もないよ。まあ、唯一の例外は： > キャラクターセル内の概念の1:1表現だね。TUIはテキストから作られていて、その制約やエンジン（通常はターミナル）が許す範囲内で動いてる。GUIはグラフィックスから作られていて、自分自身のピクセルパーフェクトなコントロールを持ってる。これは、これらの用語が生まれた当時に特に注目すべき違いだよ。 > TUIは一般的に効果的でパワフルに作られている いや、これは異なるアーキテクチャとその制約の結果だよ。 > でも、マウスでクリックできるタブやボタン、チェックボックスなんかを追加し始めると、TUIとマウスはGUIよりも前からあったんだ（まあ、ほぼね）。インターフェースの黎明期にはすでに40〜50年前に存在してた。今は実用的な理由でまた戻ってきてるだけなんだ。
└
BorlandのTurbo Visionフレームワークみたいなもので作られたクラシックなUIについても同じことが言える？一般的にはTUIフレームワークとして知られてるよね（ウィキペディアにもそう書いてあるし）。
└
区別は、SSHで動くか（Xやグラフィックスログインなし）またはヘッドレスマシンで動くか - TUI。グラフィックスログインが必要なら、たとえキャラクター配置を使っていても - GUIだと思う。IMHO、T/Gは表示要素のためじゃなくて、セッションの種類のためだよ。
└
lazygitはvimスタイルのキーバインディングとマウスのクリック、スクロールをサポートしてる。私は主にキーボードショートカットを使うけど、時々マウスも便利だね。でも、キーボードでナビゲートできるよく考えられた状態遷移機械は、作業するのに夢のようだってことには同意するよ。lazygitは素晴らしい。でも、これはTUIとGUIの違いではないね。
└
君のコメントは意味不明だと思う。Zellijはそのいい例だよ。キーボードだけで全部できるけど、たまにマウスを使ってタブやペインをクリックすることもある。機能が失われるわけじゃなくて、むしろ追加されるだけなのに、なんでそんなに哲学的/意味論的な議論をする必要があるの？
└
ドイツ人として言わせてもらうけど、UIUIUI
└
TUIsはキーボード中心が好きだな。マウスもプラスになることはあるけど、絶対に必要ってわけじゃない。
TUIが低解像度のGUIみたいに見えるのは本当に嫌だな。TUIの魅力は、TUI専用に作られてるってことだから、複雑さや詳細を避けて、コンパクトなテキストを重視することなんだよね。
面白いアイデアだけど、> 一度デザインすれば、選んだフレームワーク用の生産準備完了コードを生成できる。デザインに触れずにターゲットを切り替えられる。アルファ通知：コードエクスポートはまだ機能していません。現在、積極的に取り組んでいます — すぐにチェックしてね。つまり、今のところ全く使えないってこと。これでTUIを作ることはできないし、限られたものすら無理だよ。
└
レイアウトはまだデザインできるよ。それは便利だけど、彼らが計画しているほどの便利さはないね。
コード生成がまだ機能してないのに、これを持つ意味は何なの？それがこのアプリの全てのポイントなのに。
└
AI生成のウェブサイトを見せるためだよ。
TUIの盛り上がりは、ほとんどの人が使ったこともないCOBOLメインフレームアプリへのノスタルジーみたいだね。実際のUXには全く焦点を当ててない、いわば二次的なサイバーパンクのロールプレイみたいなもんだし。もしTUIがそんなに素晴らしいなら、なんでこれがTUIアプリじゃないの？
雰囲気で作られたゴミ、Readmeにもそう書いてある。なんでこれがフロントページに投票されるのか分からない。
└
ほとんどすべてのソフトウェアがAIアシスタンスを使って作られる準備をした方がいいよ。AIエージェントを使って素晴らしいものを作れるし、ゴミも作れる。君のそのイデオロギー的な反対は、思っているほど多くの開発者には共有されてないと思うよ。特定のオンラインコミュニティの影響を受けているかもしれないけど。
メインのウェブページに動画デモを載せるなら、再生/一時停止ボタンやコントロールバーをつけてほしいな。見たいところにスキップできるからさ。実際の動画はこれだよ: https://tui.studio/screenshots/video.mp4。それと、ターミナルのサイズ変更にはどう対応してるの？要素を左や右に固定するオプションはあるのかな？それとも、ターミナルウィンドウを狭くすると全部横に落ちちゃったり、最悪の場合、テキストが折り返されちゃうの？
└
右クリックして「コントロールを表示」を選べばいいよ、少なくともFirefoxではね。
最近、人生で初めてターミナルにめっちゃ時間を使ってる（開発者じゃないけど）から、楽しみでこれを作ったよ: https://github.com/dvelton/terminal-profile-studio
プロジェクトが「雰囲気コーディング」されてるって、ウェブサイトを一目見ただけでわかるのが面白いよね。どのウェブサイトもなんか同じビジュアルスタイルを持ってる気がする。これに気づいた人いる？
嫌な奴らは無視しよう。これは素晴らしいアイデアだよ、古いボーランドの雰囲気を感じる。頑張って、これからどうなるか楽しみだ！