この記事は、SmartHR Advent Calendar 2024 (シリーズ1)の7日目の記事です。

はじめに

こんにちは！SmartHRで働いている@pyayyです。

先日、何とは無しにiPad用のMagic Keyboardを買いました。

キーの打鍵感やトラックパッドの使用感等、MacBookのそれに近く気に入ってはいます。
が、特に物書きではないので長文を書く機会が少なく、このままではせっかくのキーボードを活用できず勿体なさを感じてしまいますね。

iPadをプログラミングに使いたい

物書きではありませんが、一応職業プログラマなのでiPadをプログラミングに使うことができればキーボードを活用できる気がします。
ざっと調べた感じでは、Appleが提供しているSwift Playgrounds以外にiPad単体でプログラミングをすることは難しそうでした。

Swiftも楽しそうなので別途楽しんでみようとは思いますが、私はWebエンジニアのような存在です。
もっとこう...普段の業務で扱うような、そんなプログラミングをiPad上でしてみたい気持ちがどうしてもあるのです。
なにかいい方法はないでしょうか。

vscode.dev + Remote Tunnelsを使ってみる

実はiPadや自前のデバイスでVSCodeを動かすことによって実現できます。

vscode.dev とは

↑のURLにアクセスすると分かる通り、Visual Studio Code for the Web、つまりはお馴染みのVSCodeをブラウザ上で動くようにしたものです。
ブラウザ上で動くため、SafariやChrome等のアプリで開くことで、iPadでもVSCodeが動かせるというわけです。

Remote Tunnels とは

Remote Tunnels拡張機能を利用することで、リモートマシン上で実行しているVSCode Serverにアクセスすることができます。
これにより、自宅PCの環境をほぼそのままiPadで利用できるというわけです｡

試してみた

自宅PC側の設定

アプリケーションとしてVSCodeが使える場合、GUIで設定できます。

アカウントメニューを開く
「リモートトンネルアクセスを有効にします」を選択
「このセッションに対してオンにする」or「サービスとしてインストールする」を選択
GitHub or Microsoftアカウントでログインする

GUIが利用できない場合などはCLI経由でのインストールも可能です。
詳細は公式ドキュメントを参照されたし。

iPad側の設定

vscode.devを開く
- vscode.devはデフォルトでRemote Tunnelsプラグインが使える状態になっているので特に設定は必要ありません
コマンドパレット > Remote-Tunnelsで「トンネルに接続」を選択
GitHub or Microsoftアカウントでログインすると接続可能なデバイスが表示されるので、接続したいデバイスを選択する

これだけです。あとは好きなフォルダーを開いたりして開発に勤しむだけです！

最もフィジカル（自宅のPCをサーバーとして使う）で
最もプリミティブ（複雑な設定なし、ほぼログインするだけ）で
そして最もフェティッシュ（？）な

方法ですね。そうでもないか。

ホスト（今回でいうと自宅PC）とゲスト（同iPad）がログインしているGitHub or Microsoftアカウントが同じ場合のみ接続可能です。
これらのアカウントがセキュリティの要となるため、アカウント管理には気をつけましょう。

実際に使ってみた感想

設定さえできれば後は自由に開発できるのですが、実際の使用感もお伝えできればなと思います。

Q. テザリングでも使える？

A. 使える！

iPad側の設定および実際の使用時にはテザリングを使用しました。
セルラーモデルは高いので、Wi-Fiモデルにテザリングを使います。Wi-Fiモデルは安いので。

データ使用量的には1時間あたり5~60MBくらいでしょうか。調べ物（X）だったりブラウジングしながらなので、実際の使用量はもっと少ないかもしれません。

動作的には全く問題なく、出先の作業も可能です。
VSCode Serverが起動しているPCがスリープすると接続できないので、
いくつかの対応策を実施する必要があります。

Q. 開発中のlocalhostにアクセスできる？

A. アクセスできる！

VSCodeにはPort Forwarding機能が備わっています。

Remote Tunnelsで接続中にlocalhostでサーバを立ち上げると、自動的にポート転送が実行されます。
自宅PCでNext.jsのdevサーバを立ち上げ、そこにアクセスすることもできます。

ホットリロードもちゃんと効きます。

これもRemote Tunnelsと同様、接続元と接続先でログインしているGitHub or Microsoftアカウントが同じ場合のみ接続可能です。

Q. デベロッパーツールは使える？

A. 使えない...こともない？かも。

Safariであれば拡張機能をインストールして使うこともできます。
Web Inspector のようなアプリをインストールすることで、MacのSafariに搭載されているようなウェブインスペクタを利用できます。

あと、Chromeであればchrome://inspectをアドレスバーに入力してアクセスすることで、
JavaScript Consoleを開くことができます。

コンソールへの出力を見たい程度であればこれで十分かもしれません。
普段デスクトップ版ブラウザのデベロッパーツールに慣れている場合にはちょっと慣れが必要かもしれません。

Q. 自宅PC（ホストPC）の要件は？

A. わりとなんでもよさそう。

Remote TunnelsでアクセスするPCについてはVSCode Serverが動くものであればなんでもよさそうです。
私はMac, Windows, WSL(Ubuntu)で試しましたが、それぞれ問題なく利用できました。

特にWSLに対しては、接続したWindowsPCからさらにRemote Tunnelsで接続することができました。（ワンクリック！）

もちろん、WSL上でCLIを用いてVSCode Serverを立ち上げることでも接続することができました。
あいにくLinuxPCが手元にないため検証できていませんが、LinuxPCも同様にCLIを用いたVSCode Serverの起動で接続できるようになるはずです。

AWSだったりGoogle Cloudだったりのクラウドコンピューティング環境を用意し、
そこにVSCode Serverを入れて接続することもできそうですし（ただしこの場合Codespacesの利用も検討した方がよさそう）、
最近流行り？のミニPCあたりを自宅サーバとして運用してもおもしろそうです。

Q. {任意のノートパソコン}の方がよくない？

A. ...？🤔

...😮

...😟

...😗

確かに...😔

おわりに

Magic KeyboardにEscキーがなかったり(キーバインド変更でなんとかしてます)、
MacBook等と比べるとiPadはそんなに電池持ちがよくなかったりといろいろとつらみはあるものの、
iPadでもそこそこ開発を楽しめる環境を作ることができました。
もちろん、iPad以外のデバイスでもブラウザさえ動けば今回のような環境を簡単に作ることができます。

かなりピーキーな使い方になるとは思いますが、自宅に高性能なPCがあり外出先でもその環境で開発をしたいような場合には今回の話が役立つかもしれません。
iPadはiOSのアプリが動いたりお絵描きできたりとMacや他のPCには無い特徴もあるので、活用して素敵なiPadライフを過ごしていきたいですね。

P.S. MacBookAirを買いました。