有意義なサイト作りのためJavaScriptを使ってます。ご了承ください。

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

 ·   ·  ☕ 3 分で読めます

ここなんかに来ているくらいの皆さんですから、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の拡張機能も一部ですが動きます。

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

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

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

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

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

参考文献

シェアはこちら:

ふらもん
書いた人:
ふらもん
ゲームクリエイター見習い。リンクは別館の制作・攻略サイト