11/5 第二回AngularJS勉強会 @LIG の講演資料です

1. スキスキIonic
Introduction to Ionic
@konpyu
Piece of cake, Inc

2. 自己紹介
• KON Yuichi (@konpyu)!
• Software Engineer!
• DeNAに2011年新卒入社
→ Piece of Cake, Inc!
• 散歩とパクチーが好き

3. note.mu

4. AngularJS製
note.mu

5. Agenda
• Ionic + Cordovaとは
• 試してみよう、Ionic
• 落穂ひろい

6. I have a dream
私には夢がある それは、いつの日かいつもの
web技術でNative Appを書けるという夢である

7. Ionic

8. Ionic
Create hybrid mobile 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. Try it!

14. Install
$ npm install -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. ブラウザで確認
$ cd MyProject
$ 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. kitchen tink
http://stegrams.github.io/ionic-demo/

22. Codepen
http://codepen.io/ionic/public-list/
一旦、Kitchen thikや
codepenを見て何が出来るかを確
認しておくことをオススメします

23. スマホ特有の機能を叩く
カメラ、コンパス、GPS、プッシュ通知、連絡帳、
水平器…

25. ng-cordova
・Cordova API integrated Angular
・AngularのService経由でCordovaのAPIが呼べる
・Ionic Teamが開発
・CordovaのAPIリファレンスも合わせて参照してお
くと良い
・Kitchen thikで雰囲気を掴んでおくとよい（後述）

26. ex) Camera
$cordovaCamera

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からPlugin Baseの設計
・必要なプラグインを先にインストールしておかない
とエラーに
・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. Thank you!

40. [参考]他のUI層ライブラリ
・TopCoat UI - adobe製
・OnsenUI - 国産. Angularベース
・lungo.js
・Ratchet