GitPodでiPad上開発環境をつくろう！【Hugo編】

ここなんかに来ているくらいの皆さんですから、GitPodのことももちろん聞いたことはあるかと思います。
もしご存知なければ絶対に覚えて帰ってください。
iPadだけで簡単な開発はできるようにしてしまう、その凄さをお伝えいたします。

GitPodって何？

簡単に言えばブラウザ上で動き、GitHubなどと連携するIDE（統合開発環境）です。
言ってしまえばそれだけなのですが、1番のポイントはブラウザ上で動くのでiPadなどでも動き、GitHubのコードを修正してコミット・プッシュできる恐ろしいツールなのです。
その上

VS Codeに似た扱いやすいUI
VS Codeの拡張機能が一部動く
ターミナルも使える
開発環境を使い捨てでき、環境がカオス化しない
しかもコードを書けば自動で開発環境セットアップができる
コラボレーション（ペアプログラミング）できる
Pull Requestのレビューもできる
多くの言語をサポート
とどめに月50時間・パブリックリポジトリの使用ならタダ。お試し自由
そして課金時のコスパもMicrosoft公式VS Onlineの3分の1（最安プラン比較）

と、とんでもない機能過多っぷりを見せます。

使い方

それでは使い方を備忘録として書いておきます。
今回はHugoで作ったブログの修正という場面で使ってみます。

GitHubのGitPodアプリインストール

まずはGitPodのアプリをGitHubにセットアップします。
これによりリポジトリの変更をGitPodが自動検出してワークスペースを準備するようになり、起動前に起動処理が終わるので起動時間が大幅に短縮されます。

使いたいリポジトリのURL先頭にコードをつけるだけ

使いたいリポジトリにアクセスし、URLの先頭にgitpod.io/#をつけましょう。こんな感じです。

https://gitpod.io/#github.com/hogehoge/hugahuga

あとはGitHubで認証するだけで使えます。簡単！

設定ファイル（.gitpod.yml）を作成

設定ファイル作成練習のため、自動でHugoコマンドをインストールしてプレビューを開く設定ファイルを作成してみます。
.gitpod.ymlファイルをプロジェクトディレクトリ直下に作り、以下のように入力してみましょう。

1
2
3
4
5
6
tasks:
  - init: brew install hugo
    command: hugo server -D
ports:
  - port: 1313
    onOpen: open-preview

これでGitPodを起動すると「Hugoコマンドをインストールし、プレビューを1313ポートで開く」というのを勝手にやってくれます。

VS Code拡張機能インストール

VS Codeの拡張機能も一部ですが動きます。

入れたい拡張機能のMarketPlaceにアクセス
Download Extensionをクリック
インストールしたファイルをGitPodの拡張機能欄にドラッグアンドドロップ

ショートカットにGitPodのURLを登録

仕上げに、iPadのホーム画面からGitPodに飛べるようにしましょう。
ショートカットアプリをインストールし、ショートカット作成。「『アクセスしたいGitPod開始URL』のWebページを表示」のアクションを入れてホーム画面に追加しましょう。
これでiPadでも開発し放題です。

まとめ…もうiPadでできないことは事実上ない

以上、走り書きですがGitPodの紹介でした。
ついにマシンパワーがいる作業でなければiPadでこなせる時代が来てしまいました。そしてパワーのあるMacは持ち運びしにくいかできないため、それを考えればiPadでできないことはもうありません。
iPad Proはタブレットとしては高価ですが、高級パソコンとしては相当コスパが良いのも魅力です。
iPad開発、馬鹿にしないでやってみましょう！（強引な勧誘）