iPadでプログラミング開発環境構築の努力と2023年個人的ベストプラクティス[Blink+VSCode+Codespaces]

はじめに

これまで３年くらいかけてiPadでwebアプリを開発する環境を整えるべく色々努力してきたのですが、
これからはPCとほぼ変わらない環境で開発できるかも知れません。

最新の個人的ベストプラクティスはQiitaの方に紹介しました。

なのでこのエントリではこれに至るまでの道のりもあわせて書こうと思います。

これまでの努力

本題に入る前にこれまでの努力をここで供養させてください🙏

JSAnywhereやpythonista3など各言語用のエディタを購入

iPadでプログラミングやるぞ！ってなってはじめにやったのは、 JSAnywhere や Pythonista3 といった特定言語用のエディタを入れての開発でした。

が、正直コーディングをお遊びレベルで触りたい人向けな感じで、webアプリを開発することはできなさそうでした。

ただPythonista3は頑張った結果Djangoは動いたので、めっちゃ頑張ればPythonでだと開発できるのかも知れません。

ちなみにPythonista3はweb開発用としては断念しましたが、スクリプトをアプリ化できるので、Git clientアプリの Working Copy と使一緒に今でも使ってたりします。
使いやすいのすで結構おすすめです。

Gitpod

次に考えたのが、「IDEをエミュレートしたwebサービスどっかにないかな」でした。
色々調べていくうちに、 Gitpod というサービスに出会います。

これがめちゃくちゃ便利で、gitpod://の後ろにリポジトリのurlを記載すればvscodeライクな画面で開発ができるというwebサービスでした。

拡張機能もvscodeのものがそのまま使えたので、しばらくはこれに居座ります。

ConohaVPS + Coder

…ごめんなさい、なんでこっちに移ったのかちゃんと思い出せないのですが、当時のGitpodにもなにか不満を覚えて（たしかvscodevimがうまく動かないとかそんなんだったと思います）、次の代替サービスを探した結果、Coderに出会います。

こちらはセルフホストができて、その場合は無料で使えるところが魅力的でした。

すでにサービス公開用のVPSをConohaでとっていたので、そこを間借りする形で建てておけば、料金を気にせずいつでも開発できたので、開発体験が上がったのも良かったですね。

その時のお話がこちらの記事です。

vpsサービスはいくつか触ってみて検討しましたが、 ConohaVPS に落ち着きました。
（後述の通り今は開発環境としては使用していませんが、アプリのデプロイ先として今も保持しています。）

操作もわかりやすくて、お値段もまぁ許容かな、といった感じです。

が、（少なくとも当時は）いくつか致命的な問題点がありました。

websocketをsafariがうまく処理できずbasic認証をかけれない
browser previewプラグインがうまく動かない
…

そんな感じで開発が辛くなってきたので、再び代替案を探し始めます。

ConohaVPS + Blink + vim

「じゃぁもうvimで開発すればよくね？」と思って、調べたのがsshターミナルアプリです。

ターミナルアプリは a-shell や iSH 、 prompt2 を経由して、 Blink を利用することに決めました。

a-shellは結構ちゃんとエミュレートしていて、phpのlaravelが動いたというびっくりアプリでした（とはいえlaravel起動中激重なので実用には至りませんでしたが）。

prompt2もしばらく使っていましたが、キー長押しでも連続して通信してくれないので、vimで下にスクロールしたい場合jを連打する必要があるのが不満点でした。

Blinkはお値段結構はりますが、mosh対応などかなりの高機能で、大満足しています。

また本物の（？）vimについては後日お話しますが、カスタマイズが結構大変かつ楽しく、結構開発に問題ないレベルまで育てることができました。

クラウド上での開発環境を整えるのは結構大変で、

エディタの準備（僕の場合はvimで決まっていましたが、プラグインの選定など）
もろもろのライブラリのインストール
ローカルを立ち上げたときにホストから確認できるよう開発環境用のサブドメインの整備
- 最低限のbasic認証とか

１年位上記の構成で個人開発を続けていました。
実際に、その環境でTimLogというアプリだったり、look-into-basketsというアプリを開発してきました。

ただ問題点も感じてきて、具体的には（お金をケチっているため）スペック不足に陥り、dockerのフリーズやvps自体のフリーズ、接続断など、なかなか開発環境として辛いものがありました。

AWS EC2 Spot Instances + Blink + neovim

そんな折見つけたのがEC2の Spot Instances というサービス。
EC2もVPSと同じくスペックを上げるにつれてお高い金額になっていきますが、Spot Instancesは使用されていないEC2キャパシティを間借りさせてもらうようなサービスで、お安い値段でハイスペックな環境を用意できます。

💡

あくまで「間借り」なので、元の持ち主が使用する場合は強制的に接続断になります。Spot Instances単体だとwebサービスを立ち上げるのは厳しいかもですが、ただの開発環境だととても使い勝手が良いです。

クラウド環境上で開発するので、Conoha VPS時代でも頑張ったところは解消できませんでしたが、より使い勝手が良くなるよう工夫をして、iPadで開発をする際はこちらの構成でこれまで行ってきました。

そして、今

さて、ここまでが僕のiPad開発環境の遍歴で、ここからが本題です。

冒頭で紹介したQiita記事の構成で開発を進めています。

Codespacesとは

Githubが以前から開発を進めていた Codespaces にまさかの無料プランが登場しました。

1コアあたり120時間/月まで無料で2coreから選択可能（つまり60時間/月まで無料）
ストレージは15GB/月まで無料

と、社会人が個人開発する分には十分無料で収まる感じで、すごい衝撃でした。マジでありがとうGithub。
（フリーランスとかだと60時間は厳しいかも。でも事業立ち上げるなら有料でもいいですよね。）

試しにiPadからchromeでCodespacesを立ち上げましたが、問題なく使えそうでした。

Blinkの大幅アップデート

そんな感じで、「これからはCodespacesで開発していくかなー」と思っていたのですが、しばらく個人開発がご無沙汰だったので久しぶりにBlinkを起動してみると

え、codeコマンドが実装されている…？

え、Blink内でVSCodeが起動する…？

え、Blink-fsの拡張機能を入れればiPad内のファイルにもアクセス可能…？

え、しかもCodespacesにも接続できる…？

ということでさらなる神アプリとなったBlinkでCodespacesを起動したのが冒頭の記事内の動画です。

細かい確認はまだですが、Next.jsはするっと起動しました。

あとCodespaces起動欄のopen in VSCodeのリンクでBlinkが起動するようになるの、とても良いはからいですよね。

.css-9x4jlj{overflow-wrap:anywhere;}iPadでプログラミング開発環境構築の努力と2023年個人的ベストプラクティス[Blink+VSCode+Codespaces]