本記事の概要
少し前にiPad Proのみで開発環境を整える、という記事を書いてみたのですが、この体験の素晴らしさをうまく表現できなかった悔しさから、もっとちゃんと啓蒙できる記事を書こうと再度ペンをとりました。（Apple pencil）
【各ステップ】
- ブラウザから使用できるエディタを用意
- ブラウザからエディタで記述したコードを実行できる環境を用意
- ブラウザからデプロイできるサービスを利用
- 無料のドメインを取得し、独自ドメインを使用
- 継続的な開発（CI/CD）体制を整える
【使用するサービスなど】
- エディタ …「GitHub」＋「Gitpod」
- 実行環境 …「Gitpod」
- デプロイサービス …「Heroku」
- 無料ドメイン …「Freenom」
- CI/CD環境 …「Heroku」＋「Github」
【料金】
今回使用するサービスはすべて無料枠が用意されており、趣味の範囲であれば無料で完結させることが可能です。
月100時間程度、ガッツリめに作業することを前提とした場合でも「月額1,000円以内」で環境を構築可能です。
※今回費用がかかるのは、「Gitpod」というサービスの料金です。月9$のプランなのでレートで1,000円超えてるやん！→すみません！！
1. ブラウザから使用できるエディタを用意
GitHubのサービスなので、GitHubアカウントを取得する必要があります。
GitHub -こちらの「サインアップ」から手順に従いアカウントを取得してください。
まず何も入っていない空のレポジトリを作成します。
「NEW」を選択
レポジトリ名と Private or Public を選択し、「Create Repository」押下
※ここで「Privateのレポジトリ」を使いたい場合に前述の金額（月額9$）がかかります。「Publicのレポジトリ」でもOKな場合は無料で使えます。
空のレポジトリに適当にファイルを作ります。
「create a new file」をクリックしファイル作成ページへ移動
適当に内容を記載し、「Commit a new file」を押下
作成したレポジトリから「Gitpod」というサービスを立ち上げます。
GitHubアカウントを持っていれば特に新しいアカウントを作成する必要もありません。
Gitpod をたちあげるURLを入力
上記で作成したレポジトリのページを開き、URLの先頭に「gitpod.io/#/」を追加（gitpod.io/#/https://github.com/user~~ のような形になります。）
Gitpod のサービス画面でGitHubアカウントを使ってログイン
下記の様な画面に移動するのでGitHubアカウントでログイン
前述までの手順が完了すれば、早速環境立ち上げ画面に遷移します。最初の構築には多少時間がかかりますが、数分程度です。
立ち上がった画面のイメージ
自動構築された環境（Ubuntu19.04 で一般的に使用されるプラグインもビルトイン）
プラグインのファイルを画面内にドラッグして追加したり、環境はyamlファイルをレポジトリに置くことでカスタマイズが可能です。今回はGitpodの詳細なサービス内容についての言及は避けますが、無料範囲で色々触ってみてください。
2. ブラウザからエディタで記述したコードを実行できる環境を用意
これはとても簡単で、すでにGitpodのサービスに組み込まれています。試しに 8000番ポート で動作するアプリケーションを実行してみると..
右下に「ポート開けたよ！」と表示されるので、「Open Preview」を押して確認します
今回は「node app.js」で実行（入力してsendを押すと画面に入力が表示されるだけのもの）
アプリを稼働させる環境によって、環境をいじる必要性が出てくる場合があります。WEBフレームワーク系であればほぼデフォルトの状態で実行できるかと思いますが、そのあたりは使ってみながらカスタマイズなどを行ってみてください。
3. ブラウザからデプロイできるサービスを利用
Heroku というPaasサービスを利用します。アカウントが必要になりますので、お持ちでない方はリンクから作成ください。
ダッシュボードからアプリを作成
アカウント作成後ログインすると下記のような画面が表示されるので、「Create new app」を押下
GitHub + Gitpod で作成したアプリのデプロイ
ダッシュボードの「Deploy」タブを選択し、GitHubのボタンを押下→対象のレポジトリ名を入力し認証します。
その後、「Deploy Now」？のようなボタンが表示されるので押下→デプロイが始まります。図の「Open app」をクリックすると、エディタでPreview表示したものと同じ内容が表示されるはずです。
「Heroku」については細かいルールなどもあり、レポジトリをそのまま連携させるだけではアプリが立ち上がらない場合もあります。アプリ実行のコマンドは「Procfile」などで指定するなどのルールがありますので、そのあたりもとりあえず無償範囲で試してみてください。
また、公開して確認する程度であれば無料の範囲内で済みますが、本格的なサービスを稼働させたいという場合には使用リソースに応じて有償プランを利用します。
※個人で運用する規模のサービスであれば、月額7$のプランで十分だと思います。
4. 無料のドメインを取得し、独自ドメインを使用
Freenom というサービスサイトから無料のドメインを取得できます。
ドメイン取得のイメージ画面
ただし、取得できるドメインは「.tk」や「.cf」などのあまり聞かない＝ユーザーが不安に感じるかもしれないドメインになりますので、「.com」などのメジャーなドメインを使いたい場合は素直にお名前.comなどから取得するのが良いでしょう。（最初の一年は1円！とかのキャンペーンをやっていたりするので、長期利用の予定でなければそこまでネックにならないかもしれません。）
5. 継続的な開発（CI/CD）体制を整える
Heroku の提供しているパイプラインサービスを使用します。GitHubと連携設定し、シナリオを作ります。
例. GitHub上のレポジトリの「Product」ブランチにpushした際にステージング環境を立ち上げてテストを実施→OKなら本番環境としてデプロイ。など
Herokuでの設定イメージ画面
このあたりも詳しく掘り下げると大ボリュームになりますので、何にしても一度触れてみてください。
最後に
最後の方は少し駆け足になってしまい、具体的な説明ができていませんが、上記の流れであれば、開発をブラウザだけで完結させることが可能です。
最近iPad Proの新型が発表され、どこでも通信できる軽量なコンピュータとしてすごく魅力を感じるのですが、ローカルでガッツリ作業といったことはまだまだ難しいと思います。
今回のサービスなどWEB完結型のものがどんどん出てきているので、iPadだけ持ち出してデザインやコーディングをすべて行うことも可能になってくると期待しています。みなさんの参考となりましたら幸いです！