BETA

iPadでVSCodeを使ってコーディング

投稿日:2019-12-06
最終更新:2019-12-10

現在、パソコンを修理に出しております。
「パソコンがなくてもコーディングってできないのかなあ?」と考えて、調べてみたらなんかいけそう!!
ということでさっそくBluetoothのキーボードを家電量販店で適当に買ってきまして、 やってみたところいけちゃいました笑笑

今回使うのは、code-serverというものです。
これは何かっていうと、ブラウザ上でVSCodeを使えるようにするものです。
現在はmacOSとlinuxのみ対応しているっぽいです(Windowsはそのうち対応予定らしい)。
code-serverで指定されたURL(http:localhost:8080など)にアクセスするだけで、VSCodeが使えるようになります。
これでiPadでもiPhoneでもアクセスすればコーディングできちゃいます笑

では、インストール方法とその使い方を説明していきます。

githubから圧縮ファイルをダウンロード

https://github.com/cdr/code-server
上記のGitHubレポジトリで色々なインストール方法が紹介されていますが、今回は直接圧縮されたバイナリファイルを持ってきて、それを実行する方法でいきます。

なお、自分はさくらVPS上のLinuxサーバーでやりました。
自分に合った方法でやってみてください。

まずこちらから圧縮ファイルをダウンロードします。
Macの場合は「darwin」と付いているzipファイル、linuxの場合は「linux」と付いたtar.gzファイルをダウンロードすればいいと思います。

コマンドで持ってくる場合は以下のようにします。
先にVSCodeディレクトリを作ってそこで作業するようにします。

$ mkdir VSCode  
$ cd VSCode  

$ wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz  

バイナリファイルを実行して、ブラウザ上のVSCodeにアクセス

ダウンロードできたら解凍して、できたフォルダの中にあるcode-serverバイナリファイルをコマンドラインで実行してください。
./code-server~で実行できるはずです。

$ tar xvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz  
$ cd code-server2.1692-vsc1.39.2-linux-x86_64  

$ ./code-server  
info  Server listening on  http://localhost:8080  
info  - Password is xxxxxxxxxxxxxxxxxxxx  
(略)  

これでVSCodeがブラウザで見られるようになりました!
指定されたhttp://localhost:8080にアクセスしてパスワードを入力すれば、VSCodeが使えます!!
自分のパソコンではなく、リモートのサーバー上で作業してる場合はlocalhostの部分をhttp:example.com:8080みたいにサーバーのipアドレスまたはドメイン名に置き換えればOKです。

iPadでの画面↓

split viewも使う↓

※注意
自分の場合$ ./code-serverでそのまま起動すると、rootユーザーのままVSCodeに移ってしまって、rootユーザーのrubyのバージョンが古かったりしてrubyの実行時にいろいろ問題が起きました。
現在のユーザーの設定のまま起動させるには、以下のようにsu -cでいけます。

$ su -c ./code-server  

スマホやタブレットからコーディングしてみよう!

これでコーディングできちゃいます!
拡張機能を入れたり、ターミナル上で作業したりするのも全然できました。

rubyでいうと、$ gem install bundlerでGemfileを使えるようにしたり、rubocopの拡張機能とgemを入れて自動整形とかも可能でした。
普通にパソコン上でやるのとなんら変わりなかったです!

皆さんも是非試してみてください。
なんか新鮮な感覚で楽しいですよ笑

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう