Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
スキスキ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
Prochain SlideShare
Chargement dans…5
×

スキスキIonic

13 175 vues

Publié le

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

Publié dans : Logiciels
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

スキスキ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

×