目次
• 開発ツール

CLIツールに--webオプションを実装した理由

RedmineCLIに--webオプションを実装した理由と、VSCodeリモート開発環境でのブラウザ起動の課題と解決策について紹介します。

#CLI #ワークフロー #UI/UX #開発効率化

はじめに#

私は現在、RedmineCLIというツールを開発しています。 Redmineのチケットをターミナルから操作できるCLIツールです。

「最低限の機能から作り始める」という方針で開発を進めているため、まだ実装していない機能も多くあります。 例えば、ガントチャート表示、Wikiページの閲覧など、Webブラウザで見た方が明らかに便利な機能は後回しにしています。

しかし、ユーザーはこれらの機能も必要とします。 そこで考えたのが「CLIで完結させることにこだわらず、必要に応じてWebブラウザを活用する」というアプローチでした。

特に以下のようなケースでは、CLIの限界を痛感します。

  • 長大な差分の確認
  • グラフやチャートの表示
  • 複雑なテーブルレイアウト
  • 画像を含むコンテンツ
  • マークダウンのリッチな表現

そんな時、私たちはどうするでしょうか？

URLをコピーして、ブラウザを開いて、貼り付けて… この作業を何度も繰り返すうちに、ある考えが浮かびました。

「コマンドから直接ブラウザを開けたら便利じゃないか？」

こうして生まれたのが--webオプションです。

なぜ—webオプションが必要だったのか#

GitHub CLIから学んだこと#

実は、この発想は完全にオリジナルではありません。 GitHub CLIには既に--webオプションが存在していました。

# PRをブラウザで開く
gh pr view 123 --web

# issueをブラウザで開く
gh issue view 456 --web

このオプションの素晴らしさは、使ってみて初めて分かりました。 CLIで情報を確認し、詳細が必要な時だけブラウザに切り替える。 この流れが驚くほどスムーズなのです。

RedmineCLIでの実装決断#

RedmineCLIを開発していた時、チケットの詳細表示で悩みました。

Redmineのチケットには、以下のような情報が含まれます。

  • 説明文（Markdownやtextile形式）
  • 添付ファイル（画像、PDF、etc）
  • 関連チケットのツリー構造
  • ガントチャート
  • カスタムフィールド

これらすべてをCLIで美しく表示するのは…正直、無理がありました。

そこで決断しました。 「CLIで全部やろうとするのはやめよう。 適材適所でいこう」

VSCodeのリモート開発環境での課題#

予想外の壁#

当初、ブラウザを開く処理は簡単だと思っていました。 各OSに応じたコマンドを実行すれば良いだけだと。

しかし、VSCodeのリモート開発環境で作業していた時、大きな問題に直面しました。

どのような方法を試しても、ブラウザが開かない。

リモート環境の制約#

VSCodeのRemote-SSH、Remote-Containers、GitHub Codespacesなど、リモート開発環境では以下の問題があります。

  1. リモートマシンにはGUIがない

    • サーバー環境にはブラウザがインストールされていない
    • X11フォワーディングも設定されていない場合が多い

  2. ローカルマシンとの連携が難しい

    • リモートマシンからローカルのブラウザを起動する標準的な方法がない
    • SSHトンネリング経由でも直接的な制御は困難

  3. 開発環境の多様性

    • Docker内での開発
    • WSL2での開発
    • クラウド上のVMでの開発

これらの環境すべてに対応する必要がありました。

$BROWSER環境変数という解決策#

リモート開発環境でも動作する方法を探った結果、$BROWSER環境変数を活用することにしました。

GitHub CLIから得たヒント#

実は、この解決策にたどり着いたきっかけは、GitHub CLIの--webオプションでした。

VSCodeのリモート開発環境でgh pr view --webを実行したところ、驚いたことにローカルマシンのブラウザが起動したのです。

「え？リモート環境なのに、どうやってローカルのブラウザを開いているんだ？」

GitHub CLIのソースコードを調べてみると、$BROWSER環境変数を確認していることが分かりました。 そして、VSCodeがリモート開発環境で自動的に$BROWSER環境変数を設定していたのです。

なぜ$BROWSER環境変数が必要だったか#

この発見から、RedmineCLIでも同じアプローチを採用することにしました。 $BROWSER環境変数を尊重することで、様々な環境でブラウザを開けるようになります。

# VSCodeが自動的に設定する例
export BROWSER="/home/user/.vscode-server/bin/.../helpers/browser.sh"

CLIとWebのいいとこ取り#

実際の使用例#

RedmineCLIでの--webオプションの使い方を紹介します。

# CLIでチケット一覧を確認
redmine issue list

# 気になるチケットの詳細をCLIで確認
redmine issue view 123

# 添付ファイルがあるのでブラウザで確認
redmine issue view 123 --web

この流れが本当に快適です。

実装の教訓#

完璧主義を捨てる勇気#

最初は「CLIツールなんだから、すべてCLIで完結すべき」と考えていました。 しかし、ユーザーの利便性を最優先に考えると、その考えは間違いでした。

先人の知恵を活用する#

GitHub CLIの--webオプションは、多くのユーザーに受け入れられています。 車輪の再発明をせず、良いアイデアは積極的に取り入れるべきです。

環境の多様性を受け入れる#

リモート開発環境、コンテナ、WSL、SSH接続など、現代の開発環境は多様化しています。 $BROWSER環境変数のような柔軟な仕組みを用意することで、 様々な環境でツールが動作するようになります。

まとめ#

--webオプションは、CLIツールの限界を認め、それを超えるための現実的な解決策です。

CLIの良さ

  • 高速な操作
  • スクリプト化が容易
  • キーボードだけで完結

Webの良さ

  • リッチな表現
  • 直感的なUI
  • 視覚的な情報

この2つを組み合わせることで、より良い開発体験を提供できます。

もしあなたがCLIツールを開発しているなら、ぜひ--webオプションの実装を検討してみてください。 きっと、ユーザーから「これ便利！」という声が聞こえてくるはずです。

参考リンク#

A

Arstella Tech Team

Arstella Ltd.の技術チームです。Web開発やクラウド技術について発信しています。