WordBench Osaka スマホアプリハンズオン

wbosaka.md

WordBench Osaka スマホアプリハンズオン

NodeJSをインストール

Windowsの人

https://nodejs.org/en/

Macの人

$ brew install node

HomebrewもXcodeも入ってない人はWindowsの人と同じように公式サイトから入手してください。 Xcodeは必須なのでAppStoreからインストールしてください。

ターミナルで確認

$ npm --version
3.7.3

• Windowsの人は、"Node.js command prompt"というソフトが入っているはずなので、それを開いて上のコマンドを実行
• コマンドの入力例が$で始まる場合はrootで実行しないという意味。sudoも不要。適切にインストールされている環境であれば今日のハンズオンでsudoが必要なコマンドは一切ありません。
• $は一般ユーザーという意味の記号なので、コマンドを入力する際は$は入力する必要はありません。

必要なNodeモジュールをインストール

$ npm install ionic cordova -g
$ npm install ios-sim -g

• 二つ目のコマンドはWindowsの人には意味がないかも。（実行したからといって特に不具合もないです。）
• これらのコマンドは最初の一回だけ。次回以降は定期的にアップデートしてあげる程度

Nodeモジュールのアップデート（参考）

$ npm update -g
$ npm cache clean

プロジェクトを開始

デスクトップに移動

$ cd ~/Desktop

プロジェクトのテンプレートファイルを作成

$ ionic start myApp https://github.com/miya0001/ionic-starter-wordpress
$ cd myApp
$ ionic platform add ios
$ ionic platform add android

プレビュー用の環境を起動

$ ionic serve --lab

• 末尾の--labは、有りでも無しでもお好みで。ぜひ両方試してください。
• ionic serveを実行するとターミナル内でIonicのシェルが起動します。これを終了するには、キーボードでCtrl+C。

アプリを自分流にカスタマイズ

編集すべきもの

• www/js/app.js
• www/js/controller.js
• www/templates/以下のファイル
• www/css/sass/style.scss または、www/css/style.cssを直接編集

.scssを編集した時は...

$ cd www
$ npm install
$ npm run build

以降編集するたびにnpm run build

アプリのテスト

シュミレータでの確認にはXcodeがインストールされている必要があります。

$ ionic emulate ios

• iOS端末の実機にデプロイするにはAppleへの登録が必要（有償）。その他いろいろ設定が必要だったりするのでググってください。

Androidの場合はシュミレータよりも実機の方が手っ取り早いかも。 Android端末をUSBで接続してから以下のコマンドを実行

$ ionic build android
$ ionic run android

• もしかしたら端末側で開発者モード的な設定を有効にする必要があったかもですが忘れました。（笑）
• Windows + iOSの人は実機、シュミレータどちらも無理かも。

Have Fun!