見出し画像

ipad で vscode 使って開発するための環境 個人的ベスト

背景

ちょっと出先でコードを書きたい、確認したいって時、ありますよね?
子供が出先で寝てしまって急に時間ができた時とか。
友人との待ち合わせで少し早くついてしまった時とか。
サウナでととのった後、休憩スペースでダラダラコード書きたい時とか。
ただそんな時のためにいつもPCを持ち運ぶわけにはいかないので、手持ちで持ち歩ける範囲でさっと開発環境にアクセスできると良いなぁと思い、色々調べた結果、
ipad mini(純正カバー付き) + mobo keyboard で、githubのcodespacesを使う
という結論に落ち着きました。
今回はその辺のまとめを書きます。

こんな感じのポータブルな開発環境がととのう!

お断り

今回開発環境って書いているものの、私はぶっちゃけC++がコンパイルできれば十分なのでそのレベルでの開発環境を意味している。
ゴリゴリのフロントエンドとかの開発はdocker周りが綺麗に整備できればうまくできるかもしれないが、testのしやすさとかは正直不明。
そもそもそこまで重い開発はipadでは厳しいと思う

ハードウェア

物理的に使っているものを記載

  • ipad mini 第6世代

  • 純正スマートカバー(これがないとipadを立たせられない、代替品があればそれでも可)

  • mobo keyboard 2(ewinのキーボードも使っていて非常に迷ったがコード書くときに右shiftキーが欲しいのでこちらに決定。ここは好み。あとJIS配列なのが助かる。あとewinより打ちやすい。)

    • https://mobo-jp.com/products/mobo-keyboard2/

    • JISとして使う場合下記もチェックhttps://www.gizmodo.jp/2022/10/ipados-161-jis-keyboard.html

    • 一応、現在のところ設定をすればcaps lockキーをctrlに変更することが可能。手順は下記。

mobo keyboard 2でcapslockをctrlに変更する手順

  • 設定 > 一般 > キーボード > Caps Lockの使用 をオフ

  •  (moboを接続した状態で)設定 > 一般 > キーボード > ハードウェアキーボード > 修飾キー > Caps Lock キー を Control に変更

ハードウェアキーボードの設定で修飾キーをタップすると上記画面になる

ソフトウェア

  • githubのアカウント / リポジトリ

    • codespacesを使うにはこれがないと始まらない

    • vscode.devでも良いが…あまり目的とマッチしない可能性が高い

    • あと自分の開発環境を.devcontainerとしてまとめておくと非常に楽

    • codespacesの説明はここでする必要はなさそうなのでリンクを参照。https://github.co.jp/features/codespaces

    • 端的にいうと、勝手にクラウドでインスタンスを立ち上げてリポジトリ用のdockerコンテナを作ってくれるサービス。最高。

    • 今なら60時間分無料!

    • 後はvscodeの設定でgithubと連携させて設定ファイルの同期をonにしておくとベネ

  • ブラウザ

    • 見やすさの観点からsafariが良い。codespacesのインスタンスのURLをホーム画面に追加しておくと全画面で使えるのでとても見やすい。(自分はその用途でのみsafariを使って他はchromeにしてる)

    • ホーム画面の追加は下記画像を参照

safariでホーム画面に追加する方法

起動のさせ方

codespacesの公式の説明を見てもらった方が良いが、参考までに画像を載せておく
起動して、放置しておくと30分くらいでインスタンスは自動停止してくれるみたいだが、せっかくの無料枠を長く使いたいなら都度Activeからstopに変更しておくとよさそう。

codespaces起動する部分

codespacesでの注意点

codespacesで立ち上げたインスタンスをブラウザのvscodeで使用している環境で、terminalを立ち上げると文字の表示がうまくいかない場合がある。
その場合は上記記事を参考にsettingを変更すること。
setting.jsonに
"terminal.integrated.gpuAcceleration": "off"
を追記すればよい。
もしそれでもフォントがおかしい場合は、自分が指定しているterminalのフォントがブラウザ版だと備わっていない可能性があるので、terminalのフォント指定のところで、自分の指定フォント以外にも「,」で続けて記載しておくと良い。

過去の試行錯誤経緯

下記は検討したけどダメだったアイデア。

  • ipadのローカルでvscode.devのインスタンスを起動する

    • iSH等のターミナルソフトを駆使して、GUIはブラウザ、サーバー自体はipad内の環境を使おうと思ったが設定回りでかなり苦戦して素人には無理だった

  • クラウドでvscode.devを起動する

    • vscode.devにはリモートの環境に接続して使える機能がある。(codespacesもこれと似た感じだが)

    • GCPやAWS、Azureにvscodeインスタンスを立てて、そこに接続して…というのも検討したが、sshトンネル系の設定等が煩雑になり管理の手間がかかるので諦めた。

  •  RDPでサーバーに入ってそこのローカルソフトとしてのvscodeを使う

    • codespacesやvscode.devではアドインの力が最大限発揮できないものがある。いっそのことipadからRDPで自分が立てたサーバーに入り、そこでvscode使えばいいやん、と思ったが、通信速度の問題やキーボードショートカットがRDPアプリに取られてしまう問題とか色々あってうまくいかなかった。ここまで苦労するならPC持ち運んだ方が良いわって結論。

まとめ

まとまりのつかないメモになってしまったが、とりあえずこれでipadでの開発環境をめぐる旅は終わりにできそうである。
というかこの機能で十分に開発できるのであればそもそもローカルの環境構築が不要なので(devcontainerとかを試行錯誤しながら作るなら最初は必要かもしれんが)chrome bookとかでも十分開発できるんじゃないかと思われる。
結果としてsaasのサービスに全乗っかりしているが、それが一番ポータブルで良いのじゃ



この記事が気に入ったらサポートをしてみませんか?