Downloaded 30 times
![Android - 実機で確認
・Android SDKをインストールする
・$ cordova platform add android
・USBで実機をつなげる
・$ ionic run android
!
[参考]
Cordovaを用いた開発環境を構築する
http://www.buildinsider.net/mobile/bookhtml5hybrid/0401](https://image.slidesharecdn.com/sukisukiionic-141105054753-conversion-gate01/75/Ionic-29-2048.jpg)
![[参考]他のUI層ライブラリ
・TopCoat UI - adobe製
・OnsenUI - 国産. Angularベース
・lungo.js
・Ratchet](https://image.slidesharecdn.com/sukisukiionic-141105054753-conversion-gate01/75/Ionic-40-2048.jpg)
スキスキIonic
- 1. スキスキIonic Introduction toIonic @konpyu Piece of cake, Inc
- 2. 自己紹介 • KONYuichi (@konpyu)! • Software Engineer! • DeNAに2011年新卒入社 → Piece of Cake, Inc! • 散歩とパクチーが好き
- 3.
- 4.
- 5. Agenda • Ionic+ Cordovaとは • 試してみよう、Ionic • 落穂ひろい
- 6. I have adream 私には夢がある それは、いつの日かいつもの web技術でNative Appを書けるという夢である
- 7.
- 8. Ionic Create hybridmobile apps with the web technologies you love
- 9. Cordova + Ionic ・Ionicはモバイルに最適化されたUIをHTML5の技術 でコンポーネント化したUI層 ・カメラ、GPS、Push通知など、端末の機能へのアク セスはCordovaのAPIを通じて行う ・Ionic, cordovaはそれぞれ単体でも動作する
- 10. Powered by Angular ・UIのコンポーネントはDirective, Serviceでラップさ れている ・なんとなく使うだけなら、深いAngularの知識は不 要（だと思う） ・ui-routerの使い方は知っておく必要あり
- 11. PROS/CONS pros ・webの技術が使えるため開発効率が良い ・クロスプラットフォーム ・angularjsのライブラリが流用可能 ! cons ・パフォーマンス ・細かい制御や実装が実現出来ない ・起動時間が長い（webviewの限界） ・見た目でIonic製だとバレる(Ionicに限った話じゃないけど)
- 12. まだ時期尚早? ・IOS8 -WKWebview ・Android 4.4 - Chronium ・Android 4.3< - Andorid標準ブラウザ ・UI層の動作はWebviewの性能によるところが大きい ・近年、iOS, AndroidともにWebviewに大きな改善 ・詳しくは後述
- 13.
- 14. Install $ npminstall -g cordova ionic
- 15. Create Project $ionic start MyProject or $ ionic start MyProject blank $ ionic start MyProject tabs $ ionic start MyProject sidemenu # if you don't need cordova $ ionic start MyProject ̶no-cordova
- 16. or use yo ・diegonetto/generator-ionic ・karma, jslint, ripple などがgrunt経由で提供
- 17. ブラウザで確認 $ cdMyProject $ ionic serve http://localhost:8100 ! デザイン、UIの変更は ブラウザで完結 ! Live ReloadもデフォルトでON (by using gulp) !
- 18.
- 19. UI Components ・AngularのDirective+ Serviceで提供されている ! 例えば、タブは<ion-tabs>
- 20. UI Components popupの管理は$ionicPopup サービスをDIして行える
- 21.
- 22. Codepen http://codepen.io/ionic/public-list/ 一旦、Kitchenthikや codepenを見て何が出来るかを確 認しておくことをオススメします
- 23.
- 25. ng-cordova ・Cordova APIintegrated Angular ・AngularのService経由でCordovaのAPIが呼べる ・Ionic Teamが開発 ・CordovaのAPIリファレンスも合わせて参照してお くと良い ・Kitchen thikで雰囲気を掴んでおくとよい（後述）
- 26.
- 27. ! app.controller('HogeCtrl', function($scope,$cordovaCamera){! }); ServiceをDI ex) Camera
- 28. ex) Camera ! app.controller('HogeCtrl', function($scope, $cordovaCamera){! var options = {! quality: 50,! destinationType: Camera.DestinationType.DATA_URL,! sourceType: Camera.PictureSourceType.CAMERA! };! $scope.takePhoto = function() {! $cordovaCamera.getPicture(option).then(function(image){! }! } ! }); カメラが起動して選ん だ写真が返ってくる
- 29. Android - 実機で確認 ・Android SDKをインストールする ・$ cordova platform add android ・USBで実機をつなげる ・$ ionic run android ! [参考] Cordovaを用いた開発環境を構築する http://www.buildinsider.net/mobile/bookhtml5hybrid/0401
- 30. Kitchen Think ・で、結局ng-cordovaでは 何が出来るの?? ・kitchen tinkが用意されてます ・ざっくり確認できます ・実機に入れてみよう ・ソースを眺めてみよう
- 31. Kitchen Think ! AndroidをUSBでつないだ状態で ! $ wget https://github.com/driftyco/ng-cordova/ archive/master.zip ! $ tar -xvf master.zip $ cd ng-cordova-master $ sh init.sh $ cordova platform add android $ cordova run android
- 32. 注意 ・ Cordovaは3.4からPluginBaseの設計 ・必要なプラグインを先にインストールしておかない とエラーに ・ex) $ cordova plugin add file-transfer ・必要なプラグインを一括でinstallするshellをおいて おくことをオススメします
- 33.
- 34. 用途について所感 ・webサービスのNativeApp向けとしては微妙. Cordovaとwebviewがこなれてくる必要あり ・キャンペーンアプリのような、簡単な作りで時間も 掛けたくないような用途には向いてると思う ex) ng-europeの案内アプリ ! ・どちらかというと、エンプラ向けな気がする
- 35. WebView ・AndroidのWebviewは4.4ではChroniumベース ・それ以前はAndroid標準ブラウザorz… ・なら、webkitベースのWebviewを同梱すればいいじゃな い。Chrome dev toolでデバッグもできるし。
- 36. Crosswalk ・Intelが開発するchroniumベースのwebview ・Android,Tizen対応. apkが40MBくらいになる ・Use Crosswalk With Ionic Framework Android Apps http://blog.nraboy.com/2014/10/use-crosswalk-ionic-framework-android-apps/
- 38. まとめ ・IonicはHybrid ApplicationのUI層として動くAngularJS 製のUIライブラリ ・コンポーネントはDirectice,Serviceにまとめられていて 使いやすい. Angularを触ったことがあればほとんど違和感 なく使えるはず。 ・むしろcordovaの扱いが鬼門になりそう。 ・Webviewの限界があることを知っておく（特にAndroid で顕著）
- 39.
- 40. [参考]他のUI層ライブラリ ・TopCoat UI- adobe製 ・OnsenUI - 国産. Angularベース ・lungo.js ・Ratchet