はじめに
これはConoHa Advent Calendar 2023 18日目の記事です。
現在私が関わっているプロジェクトでは客先に通うことになっており、それによりぼっちちゃん並の通勤時間が発生しています。その時間を有効活用するために通勤電車内でFlutterアプリのコーディングをしており、今回はその環境についてご紹介したいと思います。
この記事ではConoHa VPSにFlutterとAndroidのSDKをインストールし、AndroidスマートフォンからMoshで接続してEmacsでコーディング、ビルドできたapkをSFTPでダウンロードしてスマートフォンにインストールし動作確認するという、一連のことを行える環境を構築する方法について記述します。
なお、駆け足で解説していく都合上、詳細については適当にとかそういうかんじで済ませる箇所がありますのでご了承ください。わからない箇所がありましたら、ぐぐったりして適当になんかしてください(言ってるはしから)。
サーバーを立てる
ではさっそくConoHa上にサーバーを立てていきましょう。VPS RAM 4GB Ubuntu 22.04 64bitとかで適当に立てます。Dartのコンパイラは結構メモリを喰らうみたいなので、4GBでもギリギリだと思います。
立ち上がったらsudoができる一般ユーザーを作って公開鍵認証でSSHログインできるようにしておきます。
Flutterを入れる
https://docs.flutter.dev/get-started/install/linux を見て適当に入れます。インストールできたらflutter doctorしてみて、この段階ではとりあえずFlutterにチェックが入っていればよいです。
$ flutter doctor
テストプロジェクトを作成してウェブ版をビルドしてみて、成功したらOKでいいでしょう。
$ flutter create test_flutter
$ cd test_flutter
$ flutter build web
xrdpを入れる
この後Android SDKを入れます。が、コマンドラインから設定を完了する方法がわからなかったのでまずXデスクトップ環境を作ってAndroid Studioを入れます... たぶんCommnand-line Toolsだけで設定することもできるはずなんだけど。正直なところ敗北感はあるのでコマンドラインだけで設定できる方法をご存じの方がいらっしゃったら情報を公開していただけたら大変助かります。
$ sudo apt install xrdp
Xだけだと寂しいのでgnome-coreくらいは入れておきます。
$ sudo apt install gnome-core
デフォルトだとファイアウォールが設定されていてRDPが通らないみたいなので、ポート3389を開けます。
$ sudo ufw allow 3389
お手元のRDPクライアントで接続して、GNOMEデスクトップが表示できたらOKです。
Android Studioを入れる
https://developer.android.com/studio/install?hl=ja を見て適当に入れます。
i386のライブラリを入れる前に以下のコマンドを実行して、i386と出るか確認しておいたほうがよさそうです。
$ sudo dpkg --print-foreign-architectures
出なかったら以下のおまじないが要るっぽいです。
$ sudo dpkg --add-architecture i386
$ sudo apt update
Android Studioが起動したら、Tools > SDK ManagerからAndroid SDK Command-line Toolsを入れます。
入ったらSSHに戻って、以下のコマンドでライセンスを受諾します。
$ flutter doctor --android-licenses
もう一回flutter doctorしてFlutter + Androidの環境ができたか確認しましょう。
$ flutter doctor
さきほどのtest_flutterプロジェクトでapkがビルドできるか試します。
$ flutter build apk
ビルドが成功したら成功です(そのまんま)。やったね! apkはbuild/app/outputs/apk/releaseディレクトリに出力されています。
ここまでできたらもうxrdpは止めちゃいましょう。
$ sudo systemctl stop xrdp
$ sudo systemctl disable xrdp
$ sudo systemctl stop xrdp-sesman
$ sudo systemctl disable xrdp-sesman
スマートフォンから繋ぐ
では、このサーバーにJuiceSSHを使用してスマートフォンから繋いでみます。動く電車から繋ぐ運用になる以上、Moshを設定しておいたほうがよいでしょう。 https://gb-j.com/service/mosh/ このへんを参考になんかいいかんじに設定します。なんか繋がったぽければOKです。
ビルドしたapkをダウンロードしてくるためにSFTPも使える必要があります。ここではTermiusを設定します。適当に設定してapkが落とせたっぽければOKです。
落としたapkをFiles by Googleでインストールしてみましょう。入ったみたいだったら起動してみます。以下にその模様を示します。
動きましたね。おめでとう!
いざ通勤コーディング
では実際にJuiceSSHでConoHa VPSに接続し、通勤コーディングをやってみましょう。以下にその模様を示します。
私はEmacsを使用しています。ナウなヤングの中には”えっ、今時...”みたいなセリフが出かかって飲み込んだ方もいらっしゃるかもしれませんが、ターミナルベースのテキストエディタでIDEと同じようなこともしたいというときにEmacsを選択するのは間違いではないと考えています。おれには、これしかないんだ! (元ネタしらない)
ソフトウェアキーボードでよくコーディングできるな、みたいに思われるかもしれませんが、auto-complete、ivy、swiperくらい入れておけばあればあとは気合いと慣れでどうにでもなると思います。GboardはQWERTY、テンキーあり、記号ありに設定しています。なぜかフリックで記号入力はできないので長押しでがんばります。なので、長押し発動時間を短めに設定しておくとよいのではないかと思います。JuiceSSH側で用意している記号やモディファイア、カーソル移動のキーもうまく使ってやっていきましょう。
コンパイルやバージョン管理はeshellで行います。eshellはANSIエスケープシーケンスの対応状況的にはかなりきびしいみたいですが、まあこれくらいのことをする分にはなんとかなるでしょう。auto-completeも使用可能なので、むしろこういうシチュエーションには向いているとも言えるかもしれません。余計なお世話をしてくることもありますが...
おわりに
スマートフォンは私達の生活を劇的に変えましたが、アプリストア側の制約もあるにせよ提供されるのはコンシューマアプリばかりであり、残念ながら自由なコンピューティング環境とは言い難いようにも思います。もちろんconsumeすることに最適化されたデバイスだって世の中にあっていいわけですし、こうやってConoHa VPSなどを組み合わせることでその枠を乗り越えることもできるのであればそれで十分とも言えるでしょう。
ともあれ、この記事が退屈な通勤時間をクリエイティブな時間に変えるきっかけになりましたら幸いです!