Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Ionicで作るTechfeed

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Ionicで作るTechfeed

  1. 1. Ionicで作るTechFeed 2018/2/25 Toru Yoshikawa (@yoshikawa_t)
  2. 2. Who? 株式会社テックフィード取締役 html5j 代表、Google Developer Experts、Microsoft MVP、HTML5 Experts.jp 副編集⻑兼エキスパート 吉川 徹 / Toru Yoshikawa @yoshikawa_t
  3. 3. エンジニア向け情報キュレーションサービス 「 TechFeed」を運営してます! techfeed.io
  4. 4. iOS、Androidアプリもあります
  5. 5. TechFeedとIonic TechFeedは、ブラウザー・モ バイル(Android、iOS)で動作 するマルチプラットフォームを Ionicで実現している Ionicをベースにカスタマイズを ほどこして各プラットフォーム 向けに配信している
  6. 6. Ionicとは? マルチプラットフォーム対応の豊富なUIコンポーネント 群を持つフレームワーク Angular/TypeScript/Cordovaを採⽤ 各プラットフォームに特化したUIを提供 レスポンシブ、PWA対応 無償で商⽤利⽤可能で有償のサポートも有り 現在の最新はv3.9.2で、v4の準備中
  7. 7. IonicのUI 各プラットフォームに特化したUIに変わる Androidならマテリアルデザインに準拠し、⾒た⽬だけでなくアニメーショ ンやエフェクト等も変化 https://ionicframework.com/docs/components/
  8. 8. Ionicプロジェクトの作成 > npm install -g ionic cordova > ionic start helloWorld blank > cd helloWorld > ionic serve
  9. 9. Page/Componentの中⾝ html ts
  10. 10. TechFeedで実際に ⾒てみよう レスポンシブデザイン モバイルビュー(現在はiOSモード固定) ページ遷移か各種コンポーネント https://techfeed.io
  11. 11. ネイティブの機能をサポー トするIonic Native Cordova PluginをIonic NativeのAPIでラップし て、ts上からそのまま使えるようにしたもの ⾮常に多くのPluginをサポート https://ionicframework.com/docs/native/
  12. 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. 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. 14. まとめ 良い点 Ionicは洗練されたコンポーネントが豊富に⽤意 されていて開発に困ることはほぼない マルチプラットフォームで動作し、ネイティブ機 能による+αも⽐較的容易 Angular/TypeScriptが使える⼈はすぐにでも実 践可能
  15. 15. まとめ 注意事項 Angular/TypeScriptの学習コスト 良くも悪くもCordovaなので、パフォーマンスに は気をつける必要がある。使うPluginによっては バグも? v4がもうすぐ出る予定なので若⼲の移⾏コストは かかるかも
  16. 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. 17. Ionicコミュニティ Ionic japan Ionic meetup
 https://ionic-jp.connpass.com/ Slack
 http://ionic2-ja.herokuapp.com/

  18. 18. Thank you!! (@yoshikawa_t)

×