LoginSignup
27
36

More than 3 years have passed since last update.

GitPodを利用すると、iPadでIDEもjupyterも使えるから最高やんけ!

Last updated at Posted at 2019-11-10

TL;DR

GitPodを利用すると、iPadでIDEもjupyterも使えるから最高やんけ!

GitPodの特徴

GitPodは以下のような特徴があります。

  • VS codeライクなIDEを利用可能
  • chromeとfirefoxで使用可能
  • GitHubとアカウント連携して利用可能
  • publicリポジトリは無料、privateリポジトリは有料(9$/月〜)で利用可能

今回のゴールと手順

iPadのchrome上で
Pythonのプログラミング環境(IDEとjupyterlab)構築をします。
大まかな手順は以下の通りです。

  1. GitHubにリポジトリを作成し、3つのファイルを置く
  2. GitPodへアクセス
  3. jupyterlabを立ち上げる

GitHubでの準備

適当なリポジトリに以下の3つのファイルを置きます。
1ファイル目は、GitPod上で利用するdockerファイルです。

gitpod.Dockerfile
FROM python:3.7
RUN apt update -y && apt upgrade -y
RUN pip install pipenv

2ファイル目は、GitPodの設定ファイルです。
8888番ポートを開いている理由はjupyterlabを利用するためです。

gitpod.yml

image:
  file: .gitpod.Dockerfile

ports:
- port: 8080
  onOpen: open-preview
- port: 8888
  onOpen: open-browser

3ファイル目はPipfileです。
これは、pipenvで仮想環境を構築していることを想定して準備したファイルのため必須ではありません。(pipenvを利用するとローカルの環境などをそのままGitPod上でも利用できるのでオススメです。)パッケージはjupyterlabpandasなどがあればいいかなと思います。

Pipfile
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]
pandas = "*"
jupyterlab = "*"
matplotlib = "*"

[requires]
python_version = "3.7"

ここまでで、以下の3ファイル(とREADME.md)がリポジトリの直下に配置されていると思います。

github_repository
(リポジトリルート)
 |-.gitpod.Dockerfile
 |-.gitpod.yml
 |-Pipfile
 |-README.md

GitPodへアクセス

GitPodへのアクセスはGitHubリポジトリのURLにgitpod.io/#を付与するだけです。
たとえば、GitHubリポジトリのURLが以下だった場合、

https://github.com/[user_name]/[repository_name]

GitPodにアクセスするURLは次のようになります。

https://gitpod.io/#github.com/[user_name]/[repository_name]

毎回打ち込むのは大変なのでGitHubのREADME.mdなどにリンクを貼っておくと便利です。

GitPodのIDEは、初回は起動に10分程度かかりますが、2回目以降は1~2分で起動します。

jupyterlabを立ち上げる。

リポジトリに、Pipfileがあるので、以下のコマンドを叩くだけでjupyterlabを立ち上げることができます。

$ pipenv install
$ pipenv shell
([repository_name])$ jupyter lab

pipenvのshellを立ち上げて、

6B17E2BE-C039-4DC3-96F2-024DD99E64AF.png

jupyterlabも起動・ログインがiPad上で操作できます。

C4077621-FBFC-45D7-8E53-46FC77184D6A.png

iPadでGitPodを利用するTips

iPadでGitPodを利用していると、画面下に予測候補などが現れる長いバーが出てきます。(画像下部の2色になっている黒いバー)
2181F806-DBE6-4112-98C1-EE7BFC7E74E6.png

これは、iPadの「設定」→「一般/キーボード」の「入力補助」をオフにすると消えてくれます。
56400627-9BA2-4699-BE6F-16A515FD6BDF.png

03987FF9-B0F6-4D0E-A7D5-ADEA7F81EA4C.png

いつぞやのアップデートで、再び出るようになったので、
iPadの「設定」→「一般/キーボード」の「予測」もオフにしておくことをお勧めします。
(日本語を打っているとたまにしたから現れることがありますが・・・。)

おわりに

iPadで出来ることがどんどん増えてきているので、
簡単なプログラミングなら、本当にiPadだけで十分だなと思う今日この頃です。
(ちなみに、この記事もiPadで書いてます。)

参考

27
36
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
36