読者です 読者をやめる 読者になる 読者になる

HackerNews翻訳してみた

HackerNewsを中心に、人気の英語記事を翻訳してお届けします。記事は元記事の著者に許可をとった上で翻訳・掲載をしています。

butterflyを使ってWebブラウザ上でターミナル入力を行う

「HackerNews翻訳してみた」が POSTD (ポスト・ディー) としてリニューアルしました!この記事はここでも公開されています。


Original article: butterfly your everyday terminal in your web browser by Florian Mounier


今回は、最近ハマっているものを紹介します。最初は遊びで作り始めたのですが、今では毎日使うようになってしまいました。それがこれです。

"butterfly screen cast"

このbutterflyを使えば、Webブラウザ上でターミナル入力を行うことができます。

試してみよう

まずは試してみてください。下記の通り、インストールは簡単。

$ sudo pip install butterfly # Install butterfly
$ butterfly.server.py        # Launch the web server

終わったら、ブラウザでlocalhost:57575にアクセスするだけです。

使ってみよう

サーバサイド

systemdでスタートアップ時にサーバを起動

butterflyはバックグラウンドで稼働するサーバに依存するため、systemdの設定が必要です。次のリンクからbutterfly.serviceファイルをダウンロードして、/etc/systemd/system/もしくは同等のディレクトリに保存してください。次に、下記のコマンドを実行します。

$ sudo systemctl enable butterfly
$ sudo systemctl start butterfly

これで、常にサーバが稼働した状態となります。

rootユーザおよび複数ユーザでの実行

butterflyはターミナルユーザもしくはrootユーザで実行できるように設計されています。rootで実行した場合、権限は接続を開始したユーザ、つまりWebページを開いたユーザに移ります。ターミナルユーザはlocalhost:57575/user/で変更可能です。

リモートマシンからのアクセス

butterfly.server.py --host="0.0.0.0"を実行しホスト名に"0.0.0.0"をバインドすれば、他のユーザにターミナルへの接続権限を与えることができます。ただしアクセス時にパスワードの入力が求められるものの、セキュリティ対策は万全ではないので注意が必要です。現時点ではあくまでもテスト仕様ということで、ローカルネットワーク内の運用にとどめておいてください。

任意のシェルを実行

シェルの実行はbutterfly.server.py --shell=/bin/fishのようにオプションを使って行います。

クライアントサイド

butterflyは他のターミナルと同じように動作しますが、いくつか特徴的な機能があります。

ブラウザショートカットの使用

ターミナルにフォーカスが当たっている時はショートカットキーが効かないため(ブラウザ指定のものは除く)、例えば CTRL + L を押してもアドレスバーに移動しません。それではどうするのかというと、最初に ALT + Z を押してやります。これでbutterflyに「次の組み合わせはショートカットキーですよ」ということを教えてやるのです。つまり、アドレスバーに移動するには、最初に ALT + Z 、そして CTRL + L を押せばいいわけですね(ブラウザがCSS3フィルタをサポートしていれば、画面がセピア色に変わるはずです)。

テキストのクイック選択

私がターミナルを使っていて常々欲しいなと思っていた機能、それがこの「テキストのクイック選択」です。どういうものか、説明するより実際にやってみましょう。まず CTRL + SHIFT + up を押して選択機能をONにします。次に CTRL + SHIFT + up/down でターミナル上のテキストを選択。最後にENTERを押すと、butterflyが選択されたテキストをプロンプトに反映してくれます。

"butterfly selection"

その他の機能

  • スタイルの指定にはCSSを使っているので、全面的に編集可能です。
  • JavaScriptでブラウザ上のターミナルの振る舞いを簡単に拡張できます(クイック選択もそうやって作りました)。
  • ブラウザをベースにした"モダン"なテキストエディタが流行っているらしいので、時代にも合っていますね。

"butterfly modern editors"

不足している機能

・メモリを食うため、スクロールバックは今のところ100,000行までです。将来的には、サーバがスクロールバックをディスクに書き込むよう修正するのもいいかもしれません。 ・ターミナル内へのhtmlの埋め込みは可能ですが、ESC]99;<html>BELLコマンドでの部分的なサポートになります。ちなみに、これを活用すれば面白い機能が実現できるはずです。 ・1670万色には未対応ですが、ESC[38;2;r;g;bmを使えばかなり近いところまで持っていけるのではと思います。 ・ターミナル上でCSS/jsファイルを編集するオプションには、テーマと拡張機能のパッケージリポジトリがありません。

最後に

リポジトリはgithubにアップされています。

個人的には、とにかく実装が楽しかったです。皆さんのコメントをお待ちしています。