Web IDE cloud9でのスマホアプリ開発 using Angular(Ionic)

4386 ワード
cloud9 Angular2 ionic cloud9 テキストリンク

monacaは触ったことありましたが、対抗馬のIonicは触ったことなかったので触ってみました。

IonicではAngularでのスマホアプリ開発が可能となります。
公式ドキュメントを確認してみると・・・

command
npm install -g cordova ionic

なんかLinuxでも動きそうです。
というわけで今回もcloud9上にスマホアプリ開発環境を構築してみました。

次に進む前に、cloud9のアカウントを取得して、Workspaceを作成しておいてください。
※Workspaceの説明はcloud9環境でReactの検証① -導入-でも参考にしてみてください。

AngularじゃなくてReactがいいという人はこちらへ。

1. 前準備

まずnodeのバージョンを確認します。

command
node -v
> v4.6.1

古すぎる。。
標準インストールのnvmでも使って6系くらいにはあげておきましょう。
インストール可能なnodeのバージョンはnvm ls-remoteで確認可能です。

command
nvm install v6.10.3
nvm alias default 6.10.3
node -v
> v6.10.3

コマンド実行後nodeのバージョンが変わらない場合はしばらく待ってみてください。

2. Ionicのインストール

cloud9のTerminalからコマンド一発！

command
npm install -g cordova ionic

3. プロジェクト作成

cloud9のTerminalからコマンド一発！

command
ionic start myApp tabs

4. ブラウザ確認

プロジェクトフォルダに移動して、previewコマンドを打ちます。
cloud9で使用できるポートは8080、8081、8082の3種類なので、
ここではpreviewコマンド実行時にオプションでポート指定をしてやります。

command
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に上げました！

結果、許容範囲まで早くなりました！