iPadでVisual Studio Codeを使うためのcode-serverのTips

先日、適当なサーバ上でcode-serverを動かせば、Webブラウザさえあれば、iPadからでもVisual Studio Codeが使えるという話を書きました。
ITエンジニアクラスタの人には結構、ウケた記事になったようです。

私もこの環境を構築してから、ちょこちょことcode-serverを使っていて、開発用の環境を内向きのネットワークからだけ見えるような形で構築して、実際に開発作業を行ったりもしてみました。

そこで、いくつかのTipsを得ることができましたので、それを書いておこうと思います。

code-serverを常時起動させたい

以前の記事では、code-serverのオフィシャルの説明どおりに作業したので、code-serverを使うユーザがUbuntu上でログインしている場合は使えるけれど、そうでない場合は使えないという問題がありました。

最後のところで、userモードでcode-serverを自動起動するようにしているからですね。

systemctl --user enable code-server

code-serverをインストールすると、/usr/lib/systems/user/code-serverというファイルができるのですが、あくまでrootではなくてユーザが起動する前提です。

セキュリティ的に、これで良いじゃないか?という考えもあると思いますが、iPadで作業したいということを考えると、都度、PromptのようなSSHアプリを立ち上げてUbuntuにログインするのもかったるいし、何かの拍子でSSH接続が切れてしまうと、それでcode-serverが落ちてしまうというも今ひとつ。

でも、このコマンドを実行すればユーザモードの自動起動でも常時起動を実現することができます。

sudo loginctl enable-linger ユーザ名

これで、どんな時でもcode-serverにアクセスできるようになりました!

iPadではSafariの「ホーム画面に追加」を使う

Safariでcode-serverにアクセスすると、画面上部にアドレスバーなどが表示されて、Visual Studio Codeで表示される領域が狭くなってしまいます。Webブラウザだから仕方ないですね。

そこで、Safariの「ホーム画面に追加」を使ってみましょう。ホーム画面にcode-serverのアイコンが表示され、直接起動できるようになるだけでなく、起動した画面はフルスクリーンでVisual Studio Codeが表示されます。

これで、本当にiPad上でVisual Studio Codeが起動しているように使えます!

iPad上ではマウスがあった方が良い

iPad上でプログラム開発をしたいというわけですから、さすがに何らかのハードウェアキーボード(Smart KeboardおよびSmart Keyboard Folio。もしくは何らかのBluetoothキーボードなど)は使っていると思います。

ハードウェアキーボードがあれば、code-serverでかなりスムースに作業が進めらますが、たまに欲しくなるのがマウスです。例えば、画面左側に表示されるエクスプローラー(ファイルツリー)なのですが、ここからファイルを削除しようとファイル名を長押ししてもコンテキストメニューは表示されません。

そこでiPad OSで使えるようになったマウスの出番です。私はSurface Arc Mouseをペアリングして使っているのですが、これで右クリックするときちんとコンテキストメニューが表示されるようになり、ファイルの操作を自由に行えます。(まぁ、ファイルの削除くらいならVisual Studio Codeのターミナル機能を使ってrmコマンドを使えば良いという話もあります…。)

今、私は第1世代のiPad ProにSmart Keyboard Folioという構成で作業していますが、第2世代iPad Proと同時に登場したMagic Keyboardは第1世代のiPad Proでも使えるようですし、トラックパッドが搭載されていますから、そのうち試してみたいと思います。(高価なのと、重過ぎるのが難点ですが…。)

デスクトップ上でもcode-serverを使うとシームレスに作業できる

ここまでiPad上でVisual Studio Codeを使うことを目的にcode-serverの導入を進めてきたのですが、もちろんMacやWindows PC上でも使用できます。Webブラウザさえあれば良いのですから。

そこで、そうしたデスクトップ環境でもローカルのVisual Studio Codeの代わりにcode-serverを使ってみることにしましょう。
Chromeでcode-serverを開けば、そのまま使えるのですが、Chromeのアドレスバーの右側に現れるボタンからアプリとしてインストールして使えば、デスクトップ環境上でもOS標準のアプリランチャー(例えばmacOSのLaunchpad)から起動でき、やはりアドレスバーなどのない広い画面で操作できるようになります。

これは、Jetson nano上で動作しているX Windowという、まぁずいぶん渋い環境なのですが、このようにChromeからアプリとしてインストールすることができます。

code-serverでは、どの環境から開いても直前で開いていたプロジェクトやファイルがそのまま再現されるので、作業をシームレスに継続することができます。

しばらくローカルのVisual Studio Codeではなく、code-serverのアプリを中心に運用してみたいと思います。

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。2018年、株式会社ビビンコを北九州市に創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。