IT

iPad(ブラウザ)でVSCodeを使う[coder.comの使い方]

こんにちは,しまさん(@nitkcdadon)です.

私は今まで,iPadがPCに近づくように様々なアプリをインストールして環境を用意しました.

iPad Pro(iPhone)でとりあえず入れておけば生きていけるオススメアプリ56個 [iOS]iPad Pro(iPhone)でとりあえず入れておけば生きていけるオススメアプリ56個を紹介しています.アイパッド,アイフォン,iosが対象です.ファイル管理からプログラミング,ソースコード管理,リモートデスクトップ,SSH,無音で撮れるカメラ,その他様々なアプリを紹介しています....

ですが大学に行くときはやはりMacbook Proを持ち運び,さらにiPadも持っていくためリュックが重たくなっただけでした.

なぜか考えたのですが,やはりiPad(iOS)に決め手となる「エディタ」がなかったからだと思います.

確かに「Textatic」や「GoCoEdit」もいいのですがやはりデスクトップのエディタには負けてしまいます.

私は普段Pythonを書いているのですが,「Pythonista3」はpipでインストールできるものが限られています.

いいIDEなのですがやはり何か足りないなと思っていました.

あぁPCと同じVSCodeがiPadで使えたらな…って思って生きていたらTLに凄いサービスが流れてきたので早速使うことにしました.

それがブラウザ上でVSCodeを用いることができるサービス「CODER」です.

今までのブラウザでVSCodeを動かすサービスと異なり,拡張機能をインストールできるんです!!!!!!!!!

今回はCODERを使って最低限Pythonが使えるようにしていきたいと思います.

CODERとは

CODERとはVSCodeライク(というかそのまま)なクラウドIDEサービスのひとつです.

似たようなサービスにStackBlitzなどがありますがCODERは拡張機能をインストールすることができます.

つまり,自分のPCと同様のVSCode環境を用意することができるわけです.

これはiPadで使うエディタが確定したかもしれません.

CODERの無料枠では3GBのストレージと1GBのメモリが割り当てられます(Ubuntuのコンテナ).

code-serverはオープンソース化しており,自分でサーバーを立てることも可能です.

スポンサーリンク

CODERの登録・使い方

まずはCODERに行き,アカウントを作成しましょう.

Googleアカウント,GitHubアカウント,もしくはEmailでサインアップすることができます.

CODERではSMS認証も必要です.

日本は「+81」から始まります.「Japan」なので「J」を探すとすぐ見つかります.

アカウントを作成したらログインしましょう!

他の記事ではログインするとすぐにVSCodeの画面にいっていましたが私の場合「{}」が表示されるだけだったりTerminalのみが画面に出てきたりしていました.

また,通信も「http」でしたしダメなのか…と思ってしまいました(ブラウザはChrome).

ですがURLの部分で「https://ide.coder.com/ 」としたらうまくいきました.

おぉ〜〜まさしくVSCode.

使い方はデスクトップのものと同様です.

スポンサーリンク

PythonをCODERで動かす

CODERですがUbuntu16.04LTSが使われており,PythonはPython3.5.2です.

他のpythonを入れてもいいですが無料枠で使うならとりあえずこのままにしておきます.

拡張機能をインストールする

まずはPythonを動かしやすくするため以下のプラグインを入れます.

「Shift+⌘+X」のショートカットキーで拡張機能のタブを開くか左側にある四角のアイコンを押してください.

すると検索することができますので以下のプラグインをインストールしてください.

・Python

・CodeRunner

Code Runnerの設定

Code Runnerの設定をして出力をTerminalにしたいと思います.

まずは「⌘ + , 」もしくは歯車から設定画面に移動してください.

検索部分に「json」と打ち,settings.jsonで編集を押してください.

あとは以下の行を追加するのみです.

"code-runner.clearPreviousOutput": true,
"code-runner.runInTerminal": true,

これでCode Runnerでの出力がTerminalになります.

設定の詳細は以下を参考にしてください.

CodeRunnerの出力をターミナルに出す方法[VSCode]Visual Studio Code(VSCode)の拡張機能であるCodeRunnerの出力をターミナルに出す方法について紹介しています.setting.json内でパラメータを追加してあげることで出力からTerminalに変更することができます....

bashrcを変更

先程Code Runnerを設定しました.

確かにCode Runnerはかなり便利ですがこのまま使用するとエラーが出てきます.

Code Runnerの設定を変更してもいいのですが手軽にbashrcを変更することで解決します.

Terminalはメニューの上の方に「Terminal」がありますのでそこからNew Terminalで出てきます.

vi ~/.bashrc
#最後に追加する
alias python=python3
#保存するときは「ESCを押してZZとする」

スポンサーリンク

pipのインストール

さて,Pythonも最低限使えるしpipからライブラリをインストールしよう!!と思ったのですがpipが入っていませんでした.

なのでサクッとpipをインストールしたいと思います.

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python get-pip.py

これでpipがインストールでき,ライブラリをインストールすることができるようになります.

問題点

上の画像はiPadでスクリーンショットを撮ったものです.

まず,左側のアイコンが死んでいます.

また,保存のcmd+sが使えません.

日本語の拡張機能はインストールできません.

キーボードを接続していると下の部分が見えないです(これは仕方ないかも).

ですがCODERは現在はアルファ版なんです.

今後のアップデートでこれらは解消されていくと思います.

さいごに

ということで今回はクラウドIDEであるCODERの紹介でした.

拡張機能をインストールできるというのは素晴らしいです.

現在はアルファ版ですので,今後のアップデートに期待です.

これよりもよくなってきたらお金払ってストレージやメモリ増量して本格運用していきたいと思います.

参考

ABOUT ME
しまさん
てくてくぷれいす運営者のしまさんです. 高専→大学編入してから行動的な大学生  自身の変化を求めてブログを始める グレープフルーツと本が大好物 IT系のことやブログ,高専や編入,大学生活に関することを発信中!!詳しいプロフィールはこちら≫ 投げ銭はコチラへ YouTubeはコチラへ 質問はコチラ