yasudacloudの日記

札幌に住むソフトウェアエンジニア

Flutterで自作ターミナル開発④ オリジナルUI作り

こちらの続き、自作ターミナルアプリを作ろうの巻

yasuda.cloud

iOS16がリリースされたことで自宅iPhoneも最新になり、ようやくXCodeとMacOS、Iphone、iPadがそれぞれ整合性を取ることができた。iPadOSはまだBetaを入れた状態だがSDKはこのままで問題なく入るので実質最新と言える状態。

そんな中、ウォッチしていた TerminalStudio/Texterm.dart が新バージョンが出ていたので、少し間が空いてしまったけど続きをやります。

バージョンについて

まずバージョン一覧を読むとわかるようにpub.devに上がっていたのは2.6.0が最新だったのですが、メジャーバージョンが出ています。

xterm package - All Versions

私のぼんやりした記憶によると、Ver2ではFlutter3や日本語や中国語の変換には対応しておらず、viエディタのように画面いっぱい使うようなコマンド(ANSIエスケープシーケンス)を打つとUI上のエラーが出るということがありました。ただIssueやPRは結構上がっていたのでフォークしてローカル上でコードを変えて対応したりデバッグしたりしていました。

バージョン3でこのあたり直ってることを期待してバージョン3.2.7にアップデートしてみます٩( ᐛ )و

Exampleを読む

pub.devのExampleを読んで”このライブラリ使いやすそうだなー”みたいなことを判断するのはあるあるだと思いますが、GitHubのexampleにコードががっつり書いてるケースが意外と多いです。xterm.dartは下記に記載があり、ssh.dartにSSHの通信周りの実装サンプルが書かれています。

xterm.dart/example/lib at master · TerminalStudio/xterm.dart · GitHub

2系と比べると実装が結構変わりそうですが、中でもBackendがなくなったりStreamを自分で書かなくなったりするのが大きい変更だと感じます。サンプルコードはあくまで最低限の正常系処理しかないので、SSHのコネクションが切れた時とかタイムアウトとか異常系の処理も必要になります。

ひとまずVer2から3にアプデして動作確認OK。その後画面を色々手を加えたのを以下に。

UI作り

AppStoreで検索すると、よくある黒 or 白画面のターミナルが多いのでオリジナルティを出したいところです。

そこでSF映画に出てくるような近未来テイストの画面を製作中です。まだコンセプトイメージって感じです。


起動〜SSHまでの操作

枠線の動きはCanvasを使って描画しており、これはこれで記事1本書けそうなので後日まとめます。近未来っぽいUIを画像検索で調べてもちょうどいいインターフェースがなかったり実現が難しかったり案外大変です😥