iPadだけでCloud9開発環境を構築してみた話

初めに

iPadのOSがiOSからiPad OSに変更されiPadを取り巻く環境が大きく変わりました。特にSafariが強化されPCブラウザと遜色がないレベルになりました。

強化されたSafariがあればCloud IDEであるAWS Cloud9を使っていつでもどこへでも持ち歩ける開発環境が手に入るのではないか、日差しが差し込むカフェのオープンテラスでコーヒー片手にドヤ顔しながら開発ができるのではないかと妄想がパーンと弾けてしまったため、さっそくiPad Proを購入して開発環境を構築してみました。¹

想定読者

記事としては前提知識を要求する記事となっております。（はしょったとも言う）

• AWSでの開発経験があり、どこへでも持ち歩ける開発環境に興味がある人
• 特にCloud9を利用していて、iPadで動かしてみたい人

Cloud9って何という人は事前にAWS Cloud9について調べてください。

検証環境

今回の記事では以下の環境にて動作確認を行なっています。環境が異なれば出来ることや対処法が異なる可能性があります。ご留意ください。

• iPad Pro 11" Cellularモデル(2018)
• iPad OS 13.3
• Smart Keyboard Folio
• AWS Cloud9/EC2(t2.micro)

iPadもキーボードも上記以外に持っていないので物理キーでescがあるキーボードをお持ちの方は情報ください。お待ちしております。

環境構築結果

できた！

iPadのみでやったこと

検証環境に書いたとおりのCloud9環境を構築しLambdaとVue.jsを動かしました。作業内容はすべてiPadのみで実行しています。

作業した内容の詳細は以下の通り。

• Cloud9
  • AWS Web ConsoleからCloud9/EC2(t2.micro)のインスタンスを作成
  • EC2インスタンスのネットワーク設定の変更
• Lambda(Node.js 12.x)
  • Cloud9のUIから新規作成
  • Cloud9のUIからデプロイ
• Vue.js
  • vue-cliからのプロジェクト作成
  • webpack-dev-serverをinlineオプションとhotオプションの有効化
  • nginxのリバースプロクシを利用してBasic認証の追加²

最低限ではありますが、一通りの開発環境がiPadだけで構築できました。Node.jsに偏った検証ではありますが、設定の内容から考えてWeb系であればどういったソフトウエアの開発環境でも構築可能だと思われます。構築の途中、設定する上で問題となっったことと回避策は記事後半にて説明します。

iPadのみでやっていないこと

AWSアカウントの作成

これは元から持っていたAWSアカウントを利用したため、一からAWSアカウントを作る作業は行っていません。おそらくですが、iPadからでも問題なく新規アカウントは作れます。

Vue.jsのwebpack-dev-serverをWebインスペクタで確認する作業

WebインスペクタはiPad OSのSafariの機能として存在していないため、これだけはMac OS Xのブラウザにて確認しました。

トラブル解決編

エディタのトラブル

1. ファイル一覧がスクロールできない

Cloud9の画面は左側にファイル一覧がありますが、これをスクロールすることができません。

iPadは画面が小さいこともあり、ディレクトリ内のファイル数が多いと画面外に隠れてしまいます。そうするとスクロールしたくなるのですができません。iPadの画面上を指で動かしてスクロールしようとすると「ドラッグ ＝ ファイルの移動」になってしまいます。

不意にスクロールしようとするとファイルがどこかにドラッグして消えてしまい探し回ることになります。

解決策「カーソルキーでどうにかする」

ファイルをタップすると選択できるので、ファイルの選択からカーソルキーで移動するのが妥当です。
正直使いづらいので、個人プロジェクトの場合はディレクトリ内のファイル数を減らす整理を心がけることになるでしょう。

人と共有しているGitレポジトリを扱っている時は諦めも必要です。

2. タブが閉じられない

Cloud9はファイルやターミナルを複数のタブで開くことができますが、タブの×ボタンをタップしてもファイルを閉じることができません。

これはタップとクリックは別物と判定されているためだと思われますが、何度タップしても閉じません。位置がズレてるとか、気合が足らないとかそういうことはなく、タップでは閉じません。

解決策「Opt-Wで閉じる」

FileメニューからClose Fileを選ぶか、そのショートカットキーの「Opt-W」を使いましょう。

3. 右クリックができない ＝ ファイルの削除ができない

Cloud9でファイルを削除する場合、右クリックでメニューを開きDeleteを選ぶのが通常の手順ですが、iPadに右クリックはありません。New FileはFileメニューにあるので可能なので、作れるけど消せないという状態に陥ります。

解決策「ターミナルからrmを使う」

UIからどうこうしてファイルを消す方法は見つかりませんでした。ターミナルから rm しましょう。³

4. Safariの入力ツールバーに画面が隠されて編集箇所が見えない

Safariはハードウエアキーボードを利用しているときでも、入力補助用のツールバーを画面下部に表示します。このツールバーで編集箇所が覆い隠されてしまうことがあります。とくにターミナル操作は画面最下部にカーソルがあることが多く、覆い隠されてしまうと何もできなくなります。

解決策「全画面表示を解除する」

Safariの画面表示はツールバーやタブバーを表示した「通常表示」とツールバーやタブバーを隠した「全画面表示」があります。ツールバーの下に隠れてしまうのは「全画面表示」の場合のみなので「通常表示」に戻して利用すれば隠れません。

ただでさえ画面が狭いのにタブバーが邪魔だというときは、Cloud9のウインドウにはタブ1つのみで使うとよいでしょう。

5. テキストの選択範囲と表示がずれる

テキストを選択してコピーしたときに選択したところと違う内容がコピーされたり、テキスト選択時に何もないところを選択しているように表示されるなど、テキスト選択と表示にズレが発生することがあります。

解決策「拡大縮小表示を解除する」

Safariの機能として、フォントサイズや画面の構成要素の拡大縮小を行う機能がありますが、これが「100%」設定以外ではテキスト選択がずれることがあります。

ツールバーの「AA」と書いてあるアイコンから表示を「100%」に設定すれば選択範囲のズレは解消します。

ターミナルのトラブル

1. Ctrl-Cが機能しない

ターミナル上で実行中のコマンドを終了させるCtrl-Cが機能しません。Cloud9の問題というよりはiPad OSがOSレベルでCtrl-Cに別の機能に割り当てているようです。

このことを知らずに不用意にnpm run serveなどを実行した場合Ctrl-Cでは止められず、思わずターミナルのタブごと閉じてしまうことでしょう。

解決策「Ctrl-Zなら動く」

コマンドを終了させるCtrl-Cは機能しませんが、中断させるCtrl-Zは機能しています。中断からkillコマンドで終了させることができます。

^Z
[1]+  Stopped                 npm run serve
$ kill %1
$ jobs
[1]+  Done                    npm run serve 

2. Ctrl-[が機能しない

Vimのinsertモードを抜けるにはescキーを押す必要がありますが、iPad Smart Keyboardにはescキーはありません。でも大丈夫、escキーの代替としてCtrl-[があるから大丈夫さ⁴と思っていたら裏切られます。機能しませんでした。

このことを知らずに不用意にVimのinsertモードに入ってしまうと、Ctrl-CもCtrl-[も機能せず、もうひとつターミナルを開いてkillコマンドを実行するしかできることはなくなります。

解決策「.vimrcにimap <C-e> <esc>と書き加える」

Vimを起動する前に以下のコマンドを実行します。くれぐれもVimで.vimrcの編集しようとしないでください。多くの場合、詰みます。⁵

$ echo "imap <C-e> <esc>" >> ~/.vimrc

これはinsertモード中にCtrl-Eが押されたらescキーが押されたと読み替えるという意味です。eについては自分の好きなキーに設定して構いません。⁶

3. sudo vimを実行すると.vimrcが読み込まれない

Vimをsudoで実行するとユーザーローカルの設定である.vimrcは読み込まれず、root権限での設定になります。そのため個別に設定したescキーの代替設定は読み込まれず、insertモードから抜け出せなくなります。

このことを知らずに不用意にsudo vimからinsertモードに入ってしまうと、Ctrl-CもCtrl-[も機能せず(ry

解決策「sudoeditを使う」

sudo vimといった形でroot権限でVimを起動するのはセキュリティ上褒められた慣習ではありません。iPadで開発するのであればこれを機にエディタをsudoする習慣をやめましょう。

sudoeditもしくはsudo -eを利用するとsudo権限でのファイルの編集を安全に行うことができます。このとき利用されるエディタは環境変数のEDITORが参照されるので.bashrcに設定を書き加えておきます。

$ echo "export EDITOR=vim" >> ~/.bashrc
$ source ~/.bashrc

上のコマンドは一例です。もちろん普通に.bashrcを編集しても構いません。

Vue.jsのトラブル

1. Cloud9のPreviewを見るとドメインが一致しないというエラーが出る

何の設定もしていないとInvalid Host headerというエラーが出てWebアプリケーションのプレビューができなくなります。これはiPadで開発する場合に限った話ではありませんが、環境構築をする上で苦労したので書いておきます。

解決策「EC2のPublicIPからアクセスする」

Cloud9のPreviewを使わずに、EC2インスタンスのPublic IPからアクセスするようにします。

package.jsonのscriptsを以下のように書き直してPublicIPからのアクセスを受け付けるようにします。⁷

"serve": "vue-cli-service serve --inline --hot --port 8080 --public http://`curl -s http://169.254.169.254/latest/meta-data/public-ipv4`:8080"

http://169.254.169.254/latest/meta-data/public-ipv4はEC2のメタ情報の取得URLで、この場合どのIPに割り当てられているかを取得しています。この部分にCloud9のPreview時のドメインを入れても動きますが、他のインスタンスで実行した際に書き換える必要があり、共通化することは困難です。

disableHostCheck=trueとする設定を書くという手段もあるのですがその場合サーバとの接続ができなくなりauto-reload(hotオプション)が機能しなくなります。

2. ブラウザSafari上でJavaScriptのエラーが確認できない

MacOS X上のSafariであればWebインスペクタから行えるJavaScriptの開発機能が、iPad OS上のSafariには存在していません。そのため、エラーの確認などが非常に困難を極めます。

(未検証)解決策「専用アプリを探して使う」

iPadのアプリとしてWebインスペクタ相当の機能を提供しているものがあるようです。

MIHToolというアプリが有力候補らしく、そちらを利用すればiPadだけで確認作業ができます(とアプリ紹介には書いてあります)。

#最後に
結論としてはiPadとAWS Cloud9の組み合わせでWebアプリケーションの開発を行うことは十二分に可能です。⁸「iPadだけでWebサービス開発」という言葉に謎の高揚感を見いだした人⁹はぜひチャレンジしてみてください。

ただし、Cloud9のUIの癖がより強くなってしまうので慣れが必要です。慣れたところで開発速度は普通のPC上の方が圧倒的に速いです。Cloud IDEの利点として緊急時にも対応できるiPadサブ環境を整備しておく意味はあると思います。

要望があれば作業内容をチュートリアル形式でまとめようと思います。質問などあればコメントに書いてください。

1. ちなみに終電間際の駅前マックでコーヒーを飲みながらこの記事を書いています ↩

2. 可能性は低いとはいえ、潜在的に誰でもアクセスできるという状況は避けることにしました ↩

3. ファイルを消すのは rm を使うとして、Favoriteに追加する手段は？と思った方にはPCブラウザから登録しておく以外に手段はないようだと書き加えておきます ↩

4. 筆者はなんちゃってVimmer穏健派です ↩

5. vimの起動直後に:imap <C-e> <esc>と設定すれば詰み回避できます(が、筆者は何度も打ち忘れて詰みました) ↩

6. ネット上ではe、j、gあたりが人気 ↩

7. EC2のネットワーク設定からポート開放も必要になります ↩

8. Vim以外のエディタは検証してませんが、Ctrlショートカットがいくつも潰されている状況でEmacsが使えるかはEmacs使いではないのでわかりませんでした(Emacs使いの方はコメントください) ↩

9. 無論、筆者は謎の高揚感を見いだしました ↩