Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
スキスキIonic 
Introduction to Ionic 
@konpyu 
Piece of cake, Inc
自己紹介 
• KON Yuichi (@konpyu)! 
• Software Engineer! 
• DeNAに2011年新卒入社 
→ Piece of Cake, Inc! 
• 散歩とパクチーが好き
note.mu
AngularJS製 
note.mu
Agenda 
• Ionic + Cordovaとは 
• 試してみよう、Ionic 
• 落穂ひろい
I have a dream 
私には夢がある それは、いつの日かいつもの 
web技術でNative Appを書けるという夢である
Ionic
Ionic 
Create hybrid mobile apps with the web technologies you love
Cordova + Ionic 
・Ionicはモバイルに最適化されたUIをHTML5の技術 
でコンポーネント化したUI層 
・カメラ、GPS、Push通知など、端末の機能へのアク 
セスはCordovaのAPIを通じて行う 
・Ionic,...
Powered by Angular 
・UIのコンポーネントはDirective, Serviceでラップさ 
れている 
・なんとなく使うだけなら、深いAngularの知識は不 
要(だと思う) 
・ui-routerの使い方は知っておく必...
PROS/CONS 
pros 
・webの技術が使えるため開発効率が良い 
・クロスプラットフォーム 
・angularjsのライブラリが流用可能 
! 
cons 
・パフォーマンス 
・細かい制御や実装が実現出来ない 
・起動時間が長い(...
まだ時期尚早? 
・IOS8 - WKWebview 
・Android 4.4 - Chronium 
・Android 4.3< - Andorid標準ブラウザ 
・UI層の動作はWebviewの性能によるところが大きい 
・近年、iOS,...
Try it!
Install 
$ npm install -g cordova ionic
Create Project 
$ ionic start MyProject 
or 
$ ionic start MyProject blank 
$ ionic start MyProject tabs 
$ ionic start My...
or use yo 
・diegonetto/generator-ionic 
・karma, jslint, ripple などがgrunt経由で提供
ブラウザで確認 
$ cd MyProject 
$ ionic serve 
http://localhost:8100 
! 
デザイン、UIの変更は 
ブラウザで完結 
! 
Live ReloadもデフォルトでON 
(by using...
見た目をいじってみる
UI Components 
・AngularのDirective + Serviceで提供されている 
! 
例えば、タブは<ion-tabs>
UI Components 
popupの管理は$ionicPopup 
サービスをDIして行える
kitchen tink 
http://stegrams.github.io/ionic-demo/
Codepen 
http://codepen.io/ionic/public-list/ 
一旦、Kitchen thikや 
codepenを見て何が出来るかを確 
認しておくことをオススメします
スマホ特有の機能を叩く 
カメラ、コンパス、GPS、プッシュ通知、連絡帳、 
水平器…
ng-cordova 
・Cordova API integrated Angular 
・AngularのService経由でCordovaのAPIが呼べる 
・Ionic Teamが開発 
・CordovaのAPIリファレンスも合わせて参照...
ex) Camera 
$cordovaCamera
! 
app.controller('HogeCtrl', function($scope, $cordovaCamera){! 
}); 
ServiceをDI 
ex) Camera
ex) Camera 
! 
app.controller('HogeCtrl', function($scope, $cordovaCamera){! 
var options = {! 
quality: 50,! 
destination...
Android - 実機で確認 
・Android SDKをインストールする 
・$ cordova platform add android 
・USBで実機をつなげる 
・$ ionic run android 
! 
[参考] 
Cord...
Kitchen Think 
・で、結局ng-cordovaでは 
何が出来るの?? 
・kitchen tinkが用意されてます 
・ざっくり確認できます 
・実機に入れてみよう 
・ソースを眺めてみよう
Kitchen Think 
! 
AndroidをUSBでつないだ状態で 
! 
$ wget https://github.com/driftyco/ng-cordova/ 
archive/master.zip 
! 
$ tar -xv...
注意 
・ Cordovaは3.4からPlugin Baseの設計 
・必要なプラグインを先にインストールしておかない 
とエラーに 
・ex) $ cordova plugin add file-transfer 
・必要なプラグインを一括で...
落穂ひろい
用途について所感 
・webサービスのNativeApp向けとしては微妙. 
Cordovaとwebviewがこなれてくる必要あり 
・キャンペーンアプリのような、簡単な作りで時間も 
掛けたくないような用途には向いてると思う 
ex) ng-...
WebView 
・AndroidのWebviewは4.4ではChroniumベース 
・それ以前はAndroid標準ブラウザ orz… 
・なら、webkitベースのWebviewを同梱すればいいじゃな 
い。Chrome dev toolで...
Crosswalk 
・Intelが開発するchroniumベースのwebview 
・Android, Tizen対応. apkが40MBくらいになる 
・Use Crosswalk With Ionic Framework Android ...
まとめ 
・IonicはHybrid ApplicationのUI層として動くAngularJS 
製のUIライブラリ 
・コンポーネントはDirectice,Serviceにまとめられていて 
使いやすい. Angularを触ったことがあれば...
Thank you!
[参考]他のUI層ライブラリ 
・TopCoat UI - adobe製 
・OnsenUI - 国産. Angularベース 
・lungo.js 
・Ratchet
スキスキIonic
スキスキIonic
Upcoming SlideShare
Loading in …5
×

スキスキIonic

13,103 views

Published on

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

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

スキスキIonic

  1. 1. スキスキIonic Introduction to Ionic @konpyu Piece of cake, Inc
  2. 2. 自己紹介 • KON Yuichi (@konpyu)! • Software Engineer! • DeNAに2011年新卒入社 → Piece of Cake, Inc! • 散歩とパクチーが好き
  3. 3. note.mu
  4. 4. AngularJS製 note.mu
  5. 5. Agenda • Ionic + Cordovaとは • 試してみよう、Ionic • 落穂ひろい
  6. 6. I have a dream 私には夢がある それは、いつの日かいつもの web技術でNative Appを書けるという夢である
  7. 7. Ionic
  8. 8. Ionic Create hybrid mobile apps with the web technologies you love
  9. 9. Cordova + Ionic ・Ionicはモバイルに最適化されたUIをHTML5の技術 でコンポーネント化したUI層 ・カメラ、GPS、Push通知など、端末の機能へのアク セスはCordovaのAPIを通じて行う ・Ionic, cordovaはそれぞれ単体でも動作する
  10. 10. Powered by Angular ・UIのコンポーネントはDirective, Serviceでラップさ れている ・なんとなく使うだけなら、深いAngularの知識は不 要(だと思う) ・ui-routerの使い方は知っておく必要あり
  11. 11. PROS/CONS pros ・webの技術が使えるため開発効率が良い ・クロスプラットフォーム ・angularjsのライブラリが流用可能 ! cons ・パフォーマンス ・細かい制御や実装が実現出来ない ・起動時間が長い(webviewの限界) ・見た目でIonic製だとバレる(Ionicに限った話じゃないけど)
  12. 12. まだ時期尚早? ・IOS8 - WKWebview ・Android 4.4 - Chronium ・Android 4.3< - Andorid標準ブラウザ ・UI層の動作はWebviewの性能によるところが大きい ・近年、iOS, AndroidともにWebviewに大きな改善 ・詳しくは後述
  13. 13. Try it!
  14. 14. Install $ npm install -g cordova ionic
  15. 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. 16. or use yo ・diegonetto/generator-ionic ・karma, jslint, ripple などがgrunt経由で提供
  17. 17. ブラウザで確認 $ cd MyProject $ ionic serve http://localhost:8100 ! デザイン、UIの変更は ブラウザで完結 ! Live ReloadもデフォルトでON (by using gulp) !
  18. 18. 見た目をいじってみる
  19. 19. UI Components ・AngularのDirective + Serviceで提供されている ! 例えば、タブは<ion-tabs>
  20. 20. UI Components popupの管理は$ionicPopup サービスをDIして行える
  21. 21. kitchen tink http://stegrams.github.io/ionic-demo/
  22. 22. Codepen http://codepen.io/ionic/public-list/ 一旦、Kitchen thikや codepenを見て何が出来るかを確 認しておくことをオススメします
  23. 23. スマホ特有の機能を叩く カメラ、コンパス、GPS、プッシュ通知、連絡帳、 水平器…
  24. 24. ng-cordova ・Cordova API integrated Angular ・AngularのService経由でCordovaのAPIが呼べる ・Ionic Teamが開発 ・CordovaのAPIリファレンスも合わせて参照してお くと良い ・Kitchen thikで雰囲気を掴んでおくとよい(後述)
  25. 25. ex) Camera $cordovaCamera
  26. 26. ! app.controller('HogeCtrl', function($scope, $cordovaCamera){! }); ServiceをDI ex) Camera
  27. 27. 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){! }! } ! }); カメラが起動して選ん だ写真が返ってくる
  28. 28. Android - 実機で確認 ・Android SDKをインストールする ・$ cordova platform add android ・USBで実機をつなげる ・$ ionic run android ! [参考] Cordovaを用いた開発環境を構築する http://www.buildinsider.net/mobile/bookhtml5hybrid/0401
  29. 29. Kitchen Think ・で、結局ng-cordovaでは 何が出来るの?? ・kitchen tinkが用意されてます ・ざっくり確認できます ・実機に入れてみよう ・ソースを眺めてみよう
  30. 30. 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
  31. 31. 注意 ・ Cordovaは3.4からPlugin Baseの設計 ・必要なプラグインを先にインストールしておかない とエラーに ・ex) $ cordova plugin add file-transfer ・必要なプラグインを一括でinstallするshellをおいて おくことをオススメします
  32. 32. 落穂ひろい
  33. 33. 用途について所感 ・webサービスのNativeApp向けとしては微妙. Cordovaとwebviewがこなれてくる必要あり ・キャンペーンアプリのような、簡単な作りで時間も 掛けたくないような用途には向いてると思う ex) ng-europeの案内アプリ ! ・どちらかというと、エンプラ向けな気がする
  34. 34. WebView ・AndroidのWebviewは4.4ではChroniumベース ・それ以前はAndroid標準ブラウザ orz… ・なら、webkitベースのWebviewを同梱すればいいじゃな い。Chrome dev toolでデバッグもできるし。
  35. 35. 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/
  36. 36. まとめ ・IonicはHybrid ApplicationのUI層として動くAngularJS 製のUIライブラリ ・コンポーネントはDirectice,Serviceにまとめられていて 使いやすい. Angularを触ったことがあればほとんど違和感 なく使えるはず。 ・むしろcordovaの扱いが鬼門になりそう。 ・Webviewの限界があることを知っておく(特にAndroid で顕著)
  37. 37. Thank you!
  38. 38. [参考]他のUI層ライブラリ ・TopCoat UI - adobe製 ・OnsenUI - 国産. Angularベース ・lungo.js ・Ratchet

×