目次
はじめに
HTML、CSS、JavascriptなどのWebの技術でモバイルアプリを作るニーズがますます高まってきていると感じてます。
正直Cordova時代はユーザビリティに難があるせいかいまいち盛り上がらない感じでしたが、最近だとReact NativeやNative Scriptが出てきて、今後この流れは止まらないだろうなと。
Ionicは今時点ではあまり目立っていないように感じますが、サクッとプロトタイプを作るには適したフレームワークです。
バージョンアップもされていて出来ることも増えているので、個人的には有望なプロジェクトだと思っています。
また、Angularjsで開発出来るので、Angularjs好きなら候補として挙げてみてもいいんではないでしょうか。
今回はIonic Frameworkを使ってハイブリッドアプリを開発してみます。
動作環境
- macOS High Sierra 10.13.3
- ionic 3.20.0
- cordova 8.0.0
- Node v8.9.4
- npm 5.6.0
- Xcode 9.3 Build version 9E145
- cordova-ios 4.5.4
Ionicプロジェクトの作成
Cordovaとionicをインストール
|
1 2 |
$ npm install -g cordova ionic |
ionicプロジェクト作成
|
1 2 |
$ ionic start SampleProject |
すると各種テンプレートを選択できるので、ここではtutorialを選択します。
|
1 2 3 4 5 6 7 8 |
tabs ............... ionic-angular A starting project with a simple tabbed interface blank .............. ionic-angular A blank starter project sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development. conference ......... ionic-angular A project that demonstrates a realworld application ❯ tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation aws ................ ionic-angular AWS Mobile Hub Starter |
プロジェクトの作成が開始されるので、質問に答えながら進みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
? What starter would you like to use: tutorial ✔ Creating directory ./SampleProject - done! ✔ Downloading and extracting tutorial starter - done! ? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) y ✔ Personalizing ionic.config.json and package.json - done! > ionic integrations enable cordova --quiet ✔ Downloading integration cordova - done! ✔ Copying integrations files to project - done! [OK] Added cordova integration! Installing dependencies may take several minutes. ✨ IONIC DEVAPP ✨ Speed up development with the Ionic DevApp, our fast, on-device testing mobile app - 🔑 Test on iOS and Android without Native SDKs - 🚀 LiveReload for instant style and JS updates ️--> Install DevApp: https://bit.ly/ionic-dev-app <-- > npm i ✔ Running command - done! > git init 🔥 IONIC PRO 🔥 Supercharge your Ionic development with the Ionic Pro SDK - ⚠️ Track runtime errors in real-time, back to your original TypeScript - 📲 Push remote updates and skip the app store queue Learn more about Ionic Pro: https://ionicframework.com/products ? Install the free Ionic Pro SDK and connect your app? (Y/n) n |
プロジェクトの作成が完了しました。
デフォルトのディレクトリ構成です。
ブラウザで実行
ローカルで起動してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$ cd SampleProject/ $ ionic serve Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser - Ctrl+C to cancel [15:46:49] watch started ... [15:46:49] build dev started ... [15:46:50] clean started ... [15:46:50] clean finished in 1 ms [15:46:50] copy started ... [15:46:50] deeplinks started ... [15:46:50] deeplinks finished in 25 ms [15:46:50] transpile started ... [15:47:05] transpile finished in 14.64 s [15:47:05] preprocess started ... [15:47:05] preprocess finished in 2 ms [15:47:05] webpack started ... [15:47:05] copy finished in 15.57 s [15:47:16] webpack finished in 10.95 s [15:47:16] sass started ... Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning. [15:47:17] sass finished in 1.91 s [15:47:17] postprocess started ... [15:47:18] postprocess finished in 46 ms [15:47:18] lint started ... [15:47:18] build dev finished in 28.66 s [15:47:18] watch ready in 28.82 s [15:47:18] dev server running: http://localhost:8100/ [OK] Development server running! Local: http://localhost:8100 External: http://172.25.2.7:8100, http://169.254.200.50:8100 DevApp: SampleProject@8100 on kubotayuuichi-no-MacBook-Pro.local [15:47:31] lint finished in 13.69 s |
※ios-deployが存在しないみたいなエラーが出たら以下を実行して下さい
|
1 2 |
$ npm install -g ios-deploy |
ブラウザが起動し、http://localhost:8100/でIonicプロジェクトが実行されます。
プラットフォームを追加
今回はiOSアプリを作成します。
まずはプラットフォームにiosを追加します。
|
1 2 |
$ ionic cordova platform add ios |
platform>ios配下にiOSアプリ用のファイル群が生成されます。
エミュレータで実行
ローカル端末のエミュレータで実行してみます。
|
1 2 |
$ ionic cordova emulate ios |
エミュレータが起動し、Ionicプロジェクトが実行されます。
※ライブリロードしたい場合は--livereloadオプションをつけて下さい。
実機（デバイス）で実行
Ionicプロジェクトをiosビルドします。
エミュレータで実行した場合は、ビルドファイルはすでに生成されています。
|
1 2 |
$ ionic cordova build ios --prod |
Platformsのios配下に生成されたxcodeprojectファイルを開きます。
SampleProject>platforms>ios>SampleProject.xcodeproj
General>SigningからTeamにDeveloper Accountを設定します。
デバイスをPCに接続し、Xcodeからビルド実行するとデバイス上でIonicアプリが起動します。
最後に
今回は数あるハイブリットアプリフレームワークの中からIonicを取り上げてみました。
性能などはあまり調査しきれませんでしたが、激しいインタラクションやリアルタイム性が必要でないならば、十分実用に足ると感じました。
あとは開発者のコミュニティが広がれば浸透するかもしれませんね笑