html5j Webプラットフォーム部 第21回勉強会の登壇資料です。

1. Ionicで作るTechFeed
2018/2/25
Toru Yoshikawa (@yoshikawa_t)

2. Who?
株式会社テックフィード取締役
html5j 代表、Google Developer
Experts、Microsoft MVP、HTML5
Experts.jp 副編集⻑兼エキスパート
吉川 徹 / Toru Yoshikawa
@yoshikawa_t

3. エンジニア向け情報キュレーションサービス
「 TechFeed」を運営してます！
techfeed.io

4. iOS、Androidアプリもあります

5. TechFeedとIonic
TechFeedは、ブラウザー・モ
バイル（Android、iOS）で動作
するマルチプラットフォームを
Ionicで実現している
Ionicをベースにカスタマイズを
ほどこして各プラットフォーム
向けに配信している

6. Ionicとは？
マルチプラットフォーム対応の豊富なUIコンポーネント
群を持つフレームワーク
Angular/TypeScript/Cordovaを採⽤
各プラットフォームに特化したUIを提供
レスポンシブ、PWA対応
無償で商⽤利⽤可能で有償のサポートも有り
現在の最新はv3.9.2で、v4の準備中

7. IonicのUI
各プラットフォームに特化したUIに変わる
Androidならマテリアルデザインに準拠し、⾒た⽬だけでなくアニメーショ
ンやエフェクト等も変化
https://ionicframework.com/docs/components/

8. Ionicプロジェクトの作成
> npm install -g ionic cordova
> ionic start helloWorld blank
> cd helloWorld
> ionic serve

9. Page/Componentの中⾝
html ts

10. TechFeedで実際に
⾒てみよう
レスポンシブデザイン
モバイルビュー（現在はiOSモード固定）
ページ遷移か各種コンポーネント
https://techfeed.io

11. ネイティブの機能をサポー
トするIonic Native
Cordova PluginをIonic NativeのAPIでラップし
て、ts上からそのまま使えるようにしたもの
⾮常に多くのPluginをサポート
https://ionicframework.com/docs/native/

12. Ionic Nativeの利⽤⽅法
> npm install @ionic-native/core --save
> npm install @ionic-native/camera --save
> ionic cordova plugin add cordova-plugin-camera
AngularのAppModuleに
読み込ませてあとはDIでインポートして
利用するだけ

13. よく使うプラグイン
cordova-plugin-crosswalk-webview
cordova-plugin-splashscreen
cordova-plugin-statusbar
cordova-plugin-badge
cordova-plugin-inappbrowser
cordova-plugin-wkwebview-engine
cordova-universal-links-plugin
etc…

14. まとめ
良い点
Ionicは洗練されたコンポーネントが豊富に⽤意
されていて開発に困ることはほぼない
マルチプラットフォームで動作し、ネイティブ機
能による＋αも⽐較的容易
Angular/TypeScriptが使える⼈はすぐにでも実
践可能

15. まとめ
注意事項
Angular/TypeScriptの学習コスト
良くも悪くもCordovaなので、パフォーマンスに
は気をつける必要がある。使うPluginによっては
バグも？
v4がもうすぐ出る予定なので若⼲の移⾏コストは
かかるかも

16. 参考資料
TechFeedのつくりかた - Angular2/Webpack/
Ionic2/Cordova実践⼊⾨
https://www.slideshare.net/shumpei/
techfeed-angular2webpackionic2cordova
Ionic2/3 Anti Pattern
https://dsuket.github.io/ionic2-anti-pattern/

17. Ionicコミュニティ
Ionic japan
Ionic meetup
https://ionic-jp.connpass.com/
Slack
http://ionic2-ja.herokuapp.com/

18. Thank you!!
(@yoshikawa_t)