最近のiPad（Air以上）はM1やM2チップが搭載され、ラップトップとの違いはメモリ容量くらいの差しかないのではないかと思います。そのため、iPadで十分アプリ開発が出来るのではないでしょうか。iPadなのでAndroidアプリ開発には不向きですが、ハイブリッドアプリやマルチプラットフォーム向けの言語であればiOS/Android両方に対して開発できます。
特にiPadであれば、自分用のPCがない学生の方でもチャレンジしやすいのではないでしょうか。今回はMonaca向けのアプリ開発環境を整えてみたので、方法を紹介します。
必要なもの
まず以下のサービスアカウントが必要です。
また、今回は以下のアプリを使っています。
標準の方法での課題
Monaca Web IDEはiPadで使えるのか？
これは結論から言うと、利用できませんでした。サードパーティーCookieの問題で、Safari/Google Chromeともに動作しません。Monacaにはライトモードというモードが用意されていますが、こちらであれば利用できます。ただしトランスパイルが使えない、ターミナルが使えないと言った問題があります。VueやReactなどトランスパイルが必要な開発には利用できません。
Monaca Educationはどうか？
Monaca Educationは少し前のMonacaがベースになっており、トランスパイルに非対応です。そのため、モダンな開発には利用できません。
vscode.devはどうか？
vscode.devはWebベースのVisual Studio Codeです。コードは書けますが、プレビュー（HTTPサーバー）はないので、Monacaアプリ開発には向きません。GitHub Codespacesはターミナルも使えますが、Monacaデバッガー（iOS/Android向けのプレビューアプリ）との通信はできません。
解決策
Web IDEが使えないので思いついたのがMonaca CLIを利用する方法です。これは簡単に言えばコマンドライン（Node.js）で使えるMonaca開発環境になります。
このMonaca CLIを使えば、Node.jsをiPadで動かせればどうにかなるんじゃないかと推測しました。
iPadにおけるNode.js動作環境
iPadでNode.jsを動作させるアプリは幾つかあります。
Code App
VSCodeを内包したエディタです。Node.jsも入っており、npmも使えます。Monaca CLIをインストールできるのですが、肝心の中身が空になったり、コマンドがサポートされていないといったエラーが出るために利用できませんでした。
iSH Shell
Alpineが内包されているターミナルです。apkを使って各種コマンドをインストールできます。Node.jsをインストールできるのですが、 npm i monaca を実行すると全く反応が返ってこなくなるので、その先には進めていません。
CodeSandbox
CodeSandboxはクラウドサービスのCodeSandboxをiPad化したアプリになります。まだベータ版のようです。iPad版の情報はあまり多くなく、クラウド版の情報とごちゃ混ぜになって苦労しましたが、今回の目的にはベストマッチでした。
実際の開発について
試行錯誤した結果が、以下のリポジトリになります。これはFramework7というUIフレームワークとMonaca、そしてニフクラ mobile backendのJavaScript SDKが入ったものになります。
このリポジトリをCodeSandboxで、Local Sandboxesとしてcloneします。実際には上記リポジトリをそのまま取り込むのではなく、自分のアカウントにフォークしてからの方が良いでしょう。
ライブラリのインストール
最初にライブラリをインストールします。これはCodeSandboxに用意されているパッケージ管理を使っても良いですし、コマンドで用意されているinstall dependenciesを使っても良いでしょう。
ちなみに画像では Unsupported〜 なる文字が出ていますが、インストールは行われています。
Webブラウザを立ち上げて開発
Cordovaプラグインを使わない部分については、iPadでWebブラウザを立ち上げて動作確認するのが良いでしょう。これはMonaca Web IDEに似た開発スタイルになります。
この時には dev と書かれているスクリプトを実行します。そして、実行中に地球儀アイコンをタップして、プレビューを開きます。この時、うまくプレビューが表示されないのですが、URLを http://localhost:8080 とすればFramework7の画面が表示されるでしょう。
FAQs - CodeSandboxによれば WEB_PORT という環境変数にポート番号が入っているらしいのですが、 package.json 側でその変数を利用できなかったので、8080固定としています。
なお、CodeSandboxではファイルの保存が必要なく、リアルタイムに修正が反映されるのでサクサク開発できます。
Monacaデバッガーで確認
iOS端末など実機で確認する際にはMonacaデバッガーを使います。その際にはiPadと同じLAN環境につないでいる状態で debug スクリプトを実行します。
また、 debug を実行する際にはMonacaにログインしている必要がありますので、 login スクリプトを事前に実行してください。login でメールアドレスを入れると表示が乱れたり、スクリプトが終了しないという問題が確認されています。認証情報は正しく保存されているので大丈夫です。
debug スクリプトを実行したら、Monacaデバッガーを起動してiPadと接続します。これでiPad上で修正した内容が、Monacaデバッガーで確認できます。
また、1337ポートでブロードキャストして失敗しているようなログが流れます。デバッガーの利用には問題なさそうですが、常にエラーが出続けるのが精神衛生上良くなさそうです。
さらに先ほど書いた通りCodeSandboxはファイルを即座に保存するため、文字を入力する度にMonacaデバッガーの表示を更新しようとします。これも更新が頻繁になってしまうので、あまり良い体験ではありませんでした。開発の目処が経つまではプレビューで進めるのが良さそうです。
注意点
CodeSandboxではsandbox.config.jsというファイルで動作設定を行えるようですが、iPadでは現状（2022年11月）対応していません。
環境変数の問題で、 node_modules/.bin 以下にファイルがないと実行ファイルとして扱えません（npxも使えません）。そのためMonaca CLIのコマンドはファイル直接指定での実行になっています。
CodeSandboxのターミナルでは文字入力はできても、選択形式に対応していません。そのためMonaca CLIのimportやcreateは利用できませんでした。
Monaca CLIでのアップロード（クラウドIDEへのコードアップロード）は失敗します（反応が返ってきません）。ビルドする際などは、GitHub経由でコードを更新する方法が良さそうです。
まとめ
今回はiPadでのMonacaアプリ開発にチャレンジしました。工夫次第ですが、開発できそうです。iPadで手軽にスマートフォンアプリ開発にチャレンジしてみたい方は参考にしてください。
ニフクラ mobile backendはJavaScript SDKを提供しており、Monacaアプリとシームレスな連携が可能です。ぜひお試しください！