monacaは触ったことありましたが、対抗馬のIonicは触ったことなかったので触ってみました。
IonicではAngularでのスマホアプリ開発が可能となります。
公式ドキュメントを確認してみると・・・
npm install -g cordova ionic
なんかLinuxでも動きそうです。
というわけで今回もcloud9上にスマホアプリ開発環境を構築してみました。
次に進む前に、cloud9のアカウントを取得して、Workspaceを作成しておいてください。
※Workspaceの説明はcloud9環境でReactの検証① -導入-でも参考にしてみてください。
AngularじゃなくてReactがいいという人はこちらへ。
1. 前準備
まずnodeのバージョンを確認します。
node -v
> v4.6.1
古すぎる。。
標準インストールのnvmでも使って6系くらいにはあげておきましょう。
インストール可能なnodeのバージョンはnvm ls-remoteで確認可能です。
nvm install v6.10.3
nvm alias default 6.10.3
node -v
> v6.10.3
コマンド実行後nodeのバージョンが変わらない場合はしばらく待ってみてください。
2. Ionicのインストール
cloud9のTerminalからコマンド一発！
npm install -g cordova ionic
3. プロジェクト作成
cloud9のTerminalからコマンド一発！
ionic start myApp tabs
4. ブラウザ確認
プロジェクトフォルダに移動して、previewコマンドを打ちます。
cloud9で使用できるポートは8080、8081、8082の3種類なので、
ここではpreviewコマンド実行時にオプションでポート指定をしてやります。
cd myApp
ionic serve --port 8080
「dev server running」と表示されれば、ビルドして起動が完了しています。
ブラウザでの確認では、https://[cloud9のworkspace名]-[cloud9のユーザ名].c9users.io:8080/webpack-dev-server/ でアクセスしてください。
ユーザ名やWorkspace名が分からない方は、IDEのURLから判断してください。
下図のような画面が表示されていれば成功です。
続きは気が向いたら書きます。
5. 参考
6. おまけ
cloud9のデフォルトメモリは256MBなのですが、ビルドが重い、重すぎます。
351sはひどすぎます。カップラーメンができます。
tsファイルを改修して保存しただけで5分て。。。
ここはお金の力で解決しました。
Premium Planにアップグレードし、メモリを2.5Gに上げました！
結果、許容範囲まで早くなりました！
