狠狠撸

スキスキ滨辞苍颈肠
Introduction to Ionic
@konpyu
Piece of cake, Inc

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

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

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

Ionic
Create hybrid mobile apps with the web technologies you love

Cordova + Ionic
?Ionicはモバイルに最適化されたUIをHTML5の技術
でコンポーネント化したUI層
?カメラ、GPS、Push通知など、端末の機能へのアク
セスはCordovaのAPIを通じて行う
?Ionic, cordovaはそれぞれ単体でも動作する

Powered by Angular
?UIのコンポーネントはDirective, Serviceでラップさ
れている
?なんとなく使うだけなら、深いAngularの知識は不
要（だと思う）
?ui-routerの使い方は知っておく必要あり

PROS/CONS
pros
?webの技術が使えるため開発効率が良い
?クロスプラットフォーム
?angularjsのライブラリが流用可能
!
cons
?パフォーマンス
?細かい制御や実装が実現出来ない
?起動時間が長い（webviewの限界）
?見た目でIonic製だとバレる(Ionicに限った話じゃないけど)

まだ時期尚早?
?IOS8 - WKWebview
?Android 4.4 - Chronium
?Android 4.3< - Andorid標準ブラウザ
?UI層の動作はWebviewの性能によるところが大きい
?近年、iOS, AndroidともにWebviewに大きな改善
?詳しくは後述

Install
$ npm install -g cordova ionic

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

or use yo
?diegonetto/generator-ionic
?karma, jslint, ripple などがgrunt経由で提供

ブラウザで確認
$ cd MyProject
$ ionic serve
http://localhost:8100
!
デザイン、UIの変更は
ブラウザで完結
!
Live ReloadもデフォルトでON
(by using gulp)
!

见た目をいじってみる

UI Components
?AngularのDirective + Serviceで提供されている
!
例えば、タブは<ion-tabs>

UI Components
popupの管理は$ionicPopup
サービスを顿滨して行える

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リファレンスも合わせて参照してお
くと良い
?Kitchen thikで雰囲気を掴んでおくとよい（後述）

!
app.controller('HogeCtrl', function($scope, $cordovaCamera){!
});
ServiceをDI
ex) Camera

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){!
}!
} !
});
カメラが起動して選ん
だ写真が返ってくる

Android - 実機で確認
?Android SDKをインストールする
?$ cordova platform add android
?USBで実機をつなげる
?$ ionic run android
!
[参考]
Cordovaを用いた開発環境を構築する
http://www.buildinsider.net/mobile/bookhtml5hybrid/0401

Kitchen Think
?で、結局ng-cordovaでは
何が出来るの??
?kitchen tinkが用意されてます
?ざっくり確認できます
?実機に入れてみよう
?ソースを眺めてみよう

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

注意
? Cordovaは3.4からPlugin Baseの設計
?必要なプラグインを先にインストールしておかない
とエラーに
?ex) $ cordova plugin add file-transfer
?必要なプラグインを一括でinstallするshellをおいて
おくことをオススメします

用途について所感
?webサービスのNativeApp向けとしては微妙.
Cordovaとwebviewがこなれてくる必要あり
?キャンペーンアプリのような、簡単な作りで時間も
掛けたくないような用途には向いてると思う
ex) ng-europeの案内アプリ
!
?どちらかというと、エンプラ向けな気がする

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 Apps
http://blog.nraboy.com/2014/10/use-crosswalk-ionic-framework-android-apps/

まとめ
?IonicはHybrid ApplicationのUI層として動くAngularJS
製のUIライブラリ
?コンポーネントはDirectice,Serviceにまとめられていて
使いやすい. Angularを触ったことがあればほとんど違和感
なく使えるはず。
?むしろcordovaの扱いが鬼門になりそう。
?Webviewの限界があることを知っておく（特にAndroid
で顕著）

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

狠狠撸

スキスキ滨辞苍颈肠

More Related Content

What's hot (20)

Similar to スキスキ滨辞苍颈肠 (20)

スキスキ滨辞苍颈肠