フロントエンジニアがIonicを触ってみた /lonic

メドレー開発本部の社内勉強会「TechLunch」で発表した内容を掲載しました。

iOS/Androidのクロスプラットフォーム開発できるものを探していると自分のスキルセットに合いそうなものがいくつかありました。その中で、今回はIonicを触ってみることにしましたので、その内容の共有です。

Transcript

1. フロントエンジニアがIonicを 触ってみた 大岡　靖典
2. 目次 • はじめに • なんで触ろうと思ったか • Ionicとは • Ionicを触ってみた • まとめ
3. はじめに 登場人物のご紹介 Web アプリ Native アプリ Hybrid アプリ
4. Webアプリ Web アプリ サーバー ブラウザ インターネット WEB アプリ ブラウザを利用します！ HTML / CSS / Javascript / Image等をインターネットを通してダウン ロードしてアプリっぽく動きます！
5. Native アプリ Nativeアプリ Native アプリ アプリを端末にインストールして動きます！
6. このパターンもあります Hybrid アプリ Hybridアプリ Hybrid アプリ アプリを端末にインストールして動きます！ WebViewというHTMLを表示するコンポーネントを使って SPAのWeb アプリを動かしてます！ Web View WEB アプリ サーバー インターネット WEB アプリ
7. 彼らと友達になれる場所 Web アプリ Native アプリ Hybrid アプリ URLがあればOK！
8. 今日は彼が主役です Web アプリ Native アプリ Hybrid アプリ
9. iOSとAndroidを触るようになって、こんなことを思いました。 同じような処理・UIが二つの環境にあってめんどくさっ！ IDEおもっ！ だいたいのことWebで十分じゃね？ そもそもインストールとかだるっ！ なんで触ろうと思ったか
10. Webでできることを例にあげると • Vibration API (バイブレーション) • Geolocation API (GPS) • DeviceOrientation Event (ジャイロセンサー(方角・傾き)) • DeviceMotion Event (加速度センサー(慣性・回転速度)) • AmbientLight Events (照度センサー) • Proximity Events (近接センサー) • Web Bluetooth API (BLE(Bluetooth Low Energy)デバイス接続) • Battery Status API • カメラ撮影 • Web VR • Payment Request API (決済) などなど、デバイスの機能も割と使えます。
11. 最近だと、PWA(Progressive Web Apps)も話題にあがっています。PWAとは、Webアプ リをNativeアプリのように動かせる仕組みです。 • インストール不要(ホーム画面に追加するだけでよい) • PUSH通知 • 素早いアップデート(常に最新) • 起動時にスプラッシュスクリーン表示 • GPSを使った現在地取得と利用が可能 • オフラインでコンテンツ利用可能 • キャッシュさせることにより高速な動作 • 見た目ほぼネイティブのUIにできる • HTTPS • 検索エンジンへの対応もWebサイトとして行える
12. メリットが多いように感じるPWAなのですが、デメリットもあります。 • 公式アプリストアの検索にはひっかからない • すべてのブラウザで対応しているわけではない
13. ただし、Safariでも何年後かに使えるようになるかもしれません。以下がPWAに必要な技 術で、現在のWebKitの開発ステータスです。 参考:https://webkit.org/status/
14. と、Webアプリのことを言ってきましたがすべてのブラウザが同時進行でAPIの実装をお こなっているわけではありません。 CLINICSを例にだすと一番大事なオンライン診察で必要なWebRTCにSafariが非対 応。。。 ただし、こちらも以下のようなステータスになっています。 参考:https://webkit.org/status/
15. Webアプリでは出来ないことがあるのでNativeアプリで実装するしかないのはわかる。 だからって iOSとAndroid 別々に開発するのめんどっ！
16. そこで、クロスプラットフォームを考えました。 クラスプラットフォームとは 本来ならiOS・Androidのような異なるOS上で動くプログラムはそれぞれに対応した言語・ツールを使用 して開発を行う必要がる。 しかし、クロスプラットフォーム開発では 1つのツールで複数OSに対応したアプリを作成することができ る。
17. • Unity • Xamarin • ReactNative • Cocos2d-x • NativeScript • Titanium Mobile • Kotlin/Native などなど クロスプラットフォーム環境(ツール・フレームワーク・プラットフォーム )の種類 • Apach Cordova • Monaca • Telerik Platform • Ionic などなど
18. クロスプラットフォーム環境(ツール・フレームワーク・プラットフォーム )の種類 • Apach Cordova • Monaca • Telerik Platform • Ionic などなど Native アプリ Hybrid アプリ • Unity • Xamarin • ReactNative • Cocos2d-x • NativeScript • Titanium Mobile • Kotlin/Native などなど
19. Hybrid アプリ 基本的にWebアプリが好きなので必然的に Hybridアプリに魅力を感じ ました。 その中でIonicを選んだのは • エミュレータで表示中も Web部分はライブリロードしてくれる • UIコンポーネントがある程度揃っている • npm trendsやgoogle trendsで調べて一番勢いありそうだった • 基本的に無料 • Apach Cordova • Monaca • Telerik Platform • Ionic などなど
20. Ionicとは アメリカのIonic社が中心となって開発しているオープンソースのモバイルフレームワーク です。Apache Cordova(以降Cordova)の上に構成されています。 基本的に無料でクラウドを利用するなどは一部有料です。 Apach Cordovaとは Nitobi社がクロスプラットフォームのフレームワークとして PhoneGapを開発。 その後、Nitobi社がAdobeに買収され、Adobe PhoneGapに名前が変更される。 コードがApache foundationに寄贈されApach Cordovaとなった。
21. Webアプリ Cordova ネイティブ機能 CordovaがJavascriptからネイティブ機能を呼び出せ るインターフェイスを提供しています。 IonicはCordova上に構成されているため Cordovaの 様々なプラグインを活用できます。 (https://cordova.apache.org/plugins/) もし、使いたいプラグインが用意されていなかった場合 は自分でプラグインを作成し取り込むことが可能です。 Cordovaの仕組み
22. IonicのWebアプリの構成 • フレームワークはAngular • UIコンポーネントはIonic • デフォルトでTypeScript採用 • SCSS
23. Ionicを触ってみた 　デフォルトの画面を表示するまでの手順 Node.jsなどはすでにインス トールされているものとしま す
24. まずはインストール $ npm install -g cordova ionic
25. アプリケーション作成 $ ionic start [アプリ名] [テンプレート名] blank tabs sidemenu テンプレート例
26. ブラウザで確認 $ ionic serve
27. ブラウザが立ち上がり表示されます。
28. 各種プラットフォームの追加 $ ionic cordova add [ios | android]
29. エミュレータで確認 $ ionic cordova run [platform]
30. ここまでは本当に簡単です。 画面を作るだけのアプリであれば、AngularとTypeScriptにさえ慣れてしまえば簡単に作 成していけると思います。 だがしかし！
31. 基本的にはWebView内のWebアプリでことすむと思います。 プラグインが必要になった場合もまずは探してみて、なければ作るというサイクルになる と思うでそこまで気にする必要はないかもしれません。 ただし、いざ作るとなった場合それぞれのプラットフォームのことを知らないといろいろつ まります。(実際一歩進むために毎回つまりました。。。orz)
32. はまりポイント 今回Androidのプラグイン作成しかさわれませんでしたが以下3点はまりました。 • Android Studioを使用してのプラグイン開発の仕方 • SDKを使用したい場合にどうやってプラグインに取り込むのか • プラグインに画面を作成した場合、画面をどう扱えばいいのか
33. まとめ • アニメーションごりごりのアプリでなく、ECサイトのようなアプリであれば候補にいれ てもいいかも • Ionicを使わずCordova + Vue + Onsen UIみたいな組み合わせでもいいかも • 基本調べても古い記事 or 新しいのは英語記事なのでつらみはある • Pluginを作成する場合には、それなりに各プラットフォームを知っていないとはまる • 要素が少ないのもあってかネイティブと同等のパフォーマンスがでているように感じ る。要素を多くしてパフォーマンスにどう影響があるかは調査したほうがよさそう(とく にAndroid4.4(KitKat)より前のバージョンはかなりパフォーマンスが遅いらしい)。 • 銀の弾丸ではない
34. おわり