iPad を使って疑似VScodeの画面を表示させる

使っているモノ

• iPad pro 11インチモデル（セルラー版）
• Bluetooth キーボード（iClever というメーカーのものがおしゃれです。）

使っているサービス

• VPS --> Time 4 VPS （海外のVPSプロバイダー）
  プラン：　「1コア/４GB KVM」のプラン --料金は5.99ユーロ（700円くらい）
  OS：　Ubuntu 18.04
  最低限揃えた環境：　"docker", "docker-compose" コマンドが使える環境
  Dockerで動かすサービス：　「code-server」　githubのリンク
  ※VPSのスペックはメモリ１G以上をおすすめします。使っているときのメモリ使用量が1G前後でした。

• iPad がネット接続できる環境
  セルラーモデルにsim / テザリング / お店の公衆Wifi

• クライアントのブラウザ
  Safari や Chrome など
  …Safariを使って「ホーム画面に追加」して、iPad アプリみたいにしています。

実際のドヤり方

1. まず、コーヒー（ブラックだと尚可）を頼みます。

2. おもむろに iPad を取り出しキーボードをペアリングします。（もたつかないように練習しておくと良い）

3. ブラウザから" VPSのIPアドレス:設定port "にアクセスします。（このとき、code-server がブラウザにレンダリングされるまで時間がかかるので、コーヒーを飲みましょう）

4. あとはカタカタします。私は無駄に " git clone "でクローンしまくっています。

「code-server」について

クラウドIDEと言われるサービスで、もともとは「coder」というサービス名でWEB上で提供されていたサービスです。中身はVScodeなので、普段VScodeを触っている方ならほぼ同様の使い方ができます。
※最近追加された話題の「Remote Development」拡張が今のところ使えません。

その他のクラウドIDEサービス..

• 「codeanywhere」
  無料プランもある、人気の高いサービスです。WEB画面でコードエディターを起動できることに加え、環境構築も好みのものを選択してクリックすれば自動構築してくれます。（例. php, node.js, Go などのWEB開発環境）

• 「Paiza Cloud」
  類似サービスの中で希少な日本語のサービスです。無料範囲の制限がきつく、コンテナ環境は1日しか保持できませんが、勉強会などスポット的に使うには十分な環境らしいです。

• 「Cloud9」
  元祖的な存在らしいです。AWSに買収されたことで話題になった時期がある？らしいです。AWSのリソースを使って開発環境を構築できますし、AWSのサーバーレスと連携できる機能があったり、AWS使っている人に便利な仕様です。

上記のようなサブスクリプションサービスと機能的には同等ですが、「code-server」はOSSでgithub上にソースが公開されています。
さらに Docker を使って簡単にセットアップもできるので、自分専用のクラウドIDEとして運用しやすく、なにより「 iPad 上でVScodが動いている！」と感動できます。

参考画面
..大した内容ではないですがお恥ずかしいので、黒枠を追加しています。

「code-server」の導入手順（概要）

もし細かい手順の追記などご希望ありましたら、ご意見ください。

導入については下記3つほど試しましたが、3つ目の " docker run "で始めるのが一番ラクでした。

• バイナリーをダウンロードして実行
• docker-compose.ymlを作成し、" docker-compose up "で実行
  
• " docker run" コマンドで実行　（ github の推奨）

手順

1. VPSにDockerをセットアップして " dcoker ~ "コマンドを実行できる状態にする。（Macなどのローカルではデスクトップアプリからできるようですね。）

2. github に記載の docker コマンドを実行する

$ docker run -it -p 127.0.0.1:8443:8443 -v "${PWD}:/home/coder/project" codercom/code-server --allow-http --no-auth

これで完了です。ブラウザから VPSのIPアドレス:8443 にアクセスしましょう。

コマンドのちょっとしたカスタマイズ

■ -p 127.0.0.1:8443:8443 の部分
" -p "オプションで、ホスト（VPS）上のIPアドレスとポートをしています。一番うしろの" :8443 "の部分はDockerfileで指定されているので変更しないほうが良いです。
IPアドレスは何も指定しなければローカルのIPが使われ、ポート番号は覚えやすいものに変更できます。例えば5443番ポートで表示したい場合、 -p 5443:8443 に変えます。

■ -v "${PWD}:/home/coder/project" の部分
" -v "オプションでボリューム、どこにファイルを保存するかを選択しています。この場合は、「現在のフォルダをコンテナの /home/coder/project と連動」させ、変更ファイルは現在のファルダ内に保存されていきます。
例えば「 upaldus 」というユーザーのフォルダ内に保存していきたい場合は、- v /home/upaldus/project:/home/coder/projectと変更します。

■ --allow-http --no-auth の部分
ここは code-server 自体のコマンドオプションです。
セキュリティを考えてパスワードを設定したい場合は、 --alloe-http --password 「好みのパスワード」と変更します。
またhttps設定として --cert オプションなどで対応できます。

最後に

正直、VScodeをローカルにインストールするよりも早く、利便性も高くなると思います。
現状では本家の拡張機能で対応していない部分もありますが、随時改善がされています。
何よりも、スマホやタブレットからブラウザさえあればVScodeを使えてしまうことに感動するばかりです。（ドヤッ