Medley Developer Blog

株式会社メドレーのエンジニア・デザイナーによるブログです

フロントエンドエンジニアがIonicを触ってみた〜メドレーTechLunch〜

こんにちは。開発本部の大岡です。オンライン診療アプリ「CLINICS」の開発を担当しているエンジニアです。2017年6月にメドレーに転職してきて初めて気づきましたが、僕は人見知りでした。

メドレーでは、定期的にTechLunchという社内勉強会を実施しています。今回僕が担当になりましたので、その時の内容をご紹介させていただければと思います。テーマは「フロントエンドエンジニアがIonicを触ってみた」です。

色々な事情を考えずに好き放題言っています。個人的にウェブアプリが好きということもありウェブアプリよりの偏ったことを書いていると思います。ご了承ください。

なぜIonicを触ろうと思ったか

ウェブアプリ・ネイティブアプリ(このエントリーではiOS/Android各プラットフォーム固有の言語を使って開発したものを指しています)それぞれにメリットデメリットはあると思いますが、ゲームのようなグラフィックごりごりのものでなければウェブアプリで十分に感じています。

最近では、両方に展開しているもののネイティブアプリにコストを割いてしまっているのか、モバイルのウェブアプリのUIが本当にひどかったり最適化されていないと感じる例があります。最適化もしてないし、導線はネイティブアプリに向けてるのにネイティブアプリの方が使われてるじゃん!って言われてもウェブアプリの気持ちになると「そりゃそうでしょ。。。」って感じです笑

とはいえ、いくらウェブアプリが好きでもネイティブアプリを作らざるをえないとなった場合にiOS/Androidそれぞれ作ることが適切なのかなと思ってしまいます。そこでクロスプラットフォーム開発できるものを探していると、自分のスキルセットに合いそうなものがいくつかありました。その中で今回は、Ionicを触ってみることにしました。

今回TechLunchで発表したスライドは以下です。

speakerdeck.com

スライドと重複してる箇所もありますが、テキストでも解説してみます。ご興味がありましたら以下もどうぞ。

ウェブアプリとネイティブアプリ

ウェブアプリとネイティブアプリはよく比較されますが、その違いは以下のような感じかなと思います。

項目 ウェブアプリ ネイティブアプリ
動作速度 遅め 早め
バイスの機能 使えるものもある 利用可
開発コスト 普通 多め
審査 無し 有り
インストール 不要 必要

動作速度は遅めとはいえ、ゲームではなくECサイトのようなものであれば、そこまで気にするほどではない思います(作りにもよると思いますが)。デバイスの機能に関してはChromeなら割と使えます。開発コストはワンソースでいけるのでネイティブアプリよりは優れているかなと思います。

あとは何と言っても、ブラウザとURLさえあればどこからでも使えるっていうのがメリットです。最近ですとウェブアプリをネイティブアプリっぽく動かすProgressive Web Application(以下PWA)というワードもよく目にするようになりました。PWAは動作速度の面やプッシュ通知・オフラインでも利用できたりとウェブアプリの弱点を補ってくれるのですが、PWAに必要な技術であるService Workerの実装がされていなかったりと環境により十分に恩恵を受けることができない場合があります。

個人的に以下のようなパターンの場合

  • ネイティブの実装が必要
  • 重要だけど機能に更新がはいることがほぼない
  • アプリを使う上で毎回必要なわけではない

アプリによっては、この部分だけアプリに切り出して、ウェブアプリで必要になったら呼び出すとかでもいいのかなと思います。

上記のようなことをネイティブアプリとして実現できるものにApach Cordova(以下Cordova)があります。ウェブアプリはWebView(ネイティブアプリ内でウェブページを表示する部品みたいなもの)に表示し、ネイティブ機能はプラグインとして提供されているのでそれをJavaScriptから呼び出すことが可能です。

Ionicとは

ウェブの技術を用いてネイティブアプリの開発を可能にするフレームワークです。 主な特徴は以下です。

実際に触ってみた

公式のGet startedにもあるようにブラウザでアプリを表示するまでは3ステップです。 ※Node.jsがインストールされていることが前提

# 1. ionicとcordovaのインストール(この時のIonic CLIは3.18.0)
 $ npm install -g cordova ionic

# 2. アプリケーションの作成
$ ionic start [アプリ名] [テンプレート]

# 3. アプリケーション起動
$ cd [アプリ名]
$ ionic serve

テンプレートもよく見る形のものは用意されているのでこだわらなければサクッとそれっぽいものが作れます。下の画像はtabsテンプレートを使用しました。

f:id:medley_inc:20171122191851g:plain

Android/iOSの開発環境が整った状態ですと以下のコマンドで、エミュレータを起動しネイティブアプリとしてインストールすることができます。

# 1. 対象のOSを追加
$ ionic cordova platform add [ios/android]

# 2. エミュレータ起動かつインストール
$ ionic cordova run [ios/android]

# 2.5 ウェブアセット更新と連動してアプリ更新させる場合
$ ionic cordova run [ios/android] --livereload

ここまでは本当に簡単です。起動時に--livereloadオプションをつけるとウェブのアセットが更新されるとアプリ内の画面も更新されるので便利です。ネイティブの機能を利用したくなった場合も多くのプラグインが提供されているのでウェブの知識だけでもある程度のアプリは作れると思います。

便利そうだし簡単にアプリ作れそう!となりますが、やりたいことがプラグインで提供されていなかった場合は自分で作成しないといけません。プラグインの作成はiOS/Androidそれぞれで作らないといけないため知識もそれぞれ必要です。そして、このプラグインを作るのがウェブの知識だけだと割と苦戦します。

SkyWayを利用してビデオチャットアプリを作ってみた

SkyWayとはNTTコミュニケーションズが提供しているWebRTCを利用したビデオチャット等ができるサービスです。今回このSkyWayを利用して、Androidのみですがビデオチャットアプリを作ってみました。

Androidプラグイン作成

SkyWayのプラグインがなかったのでプラグインを作成します。画面のあるプラグインの作成に結構はまりました(基本的なプラグイン作成の説明は、検索すればすぐに見つかると思うので省略させていただきます)。解決して思うようには動いたのですが、これでいいのかわかりません。いい感じの解決法があったら教えてください。

今回はSkyWayのAndroidサンプルコードに少し手を入れて利用させて頂きプラグインを作成してみました。ざっくりディレクトリ構成は以下のようになりました。

    plugin-skyway
    ├── platform
    │   └── android
    │       └── AndroidStudioで作成したプロジェクト(SkyWayサンプルソース)
    └── plugin
        ├── package.json
        ├── plugin.xml
        ├── src
        │   ├── android
        │   │   ├── cordova-plugin-skyway.gradle
        │   │   ├── MainActivity.java
        │   │   ├── PeerListDialogFragment.java
        │   │   ├── SkyWay.java        
        │   │   ├── layout
        │   │   │   ├── activity_main.xml
        │   │   │   └── fragment_dialog_peerlist.xml
        │   │   └── libs
        │   │       └── skyway.aar
        │   └── ios
        └── www
            └── SkyWay.js

plugin-skyway/platformに各OSのプラグイン用プロジェクトがある感じです。plugin-skyway/pluginがIonicのプロジェクトにインストールされるディレクトリです。

はじめは、plugin-skyway/plugin/src/androidにAndroidStudioで作成したプロジェクトを置いてました。しかし、Ionicのプロジェクトに作成したプラグインをスンストールすると不要なものまで含まれてしまったので、plugin-skyway/platform/androidにプロジェクトを作成し必要なファイルのみをplugin-skyway/plugin/src/androidにコピーすることにしました。

AndroidStudioでプラグインを開発する際は、一度IonicのプロジェクトをAndroidでビルドし、Ionicプロジェクト内のplatforms/android/CordovaLib/build/outputs/aar/CordovaLib-debug.aarプラグインのプロジェクトで取り込まないといけないようです。

いざIonicプロジェクトにインストールしてビルドするとConstraintLayoutが無いとかSkyWayのSDKのバージョンがどうとか怒られますが、Androidの開発の仕組みが理解できていなかったので下記の「パッケージRは存在しません」というエラーに時間を取られました。

    .../MainActivity.java:258: エラー: パッケージRは存在しません
                    Canvas canvas = (Canvas) findViewById(R.id.svLocalView);

のようにR.javaがないと怒られます。 AndroidStudioからGUIでポチポチと画面を作るとR.javaというのができいい感じに解決してくれるようなのですが、今回のようにxmlのみを移動させるだけだとR.javaが作られません。

そこでR.id.svLocalViewのようなR.の箇所を下記のように置き換えて、やっとビルドが通るようになりました。

getResources().getIdentifier("svLocalView", "id", getPackageName())

最終的に以下のようなものができました。 SkyWayボタンをタップするとネイティブの画面が立ち上がり、AndroidのSkyWay SDKを利用してテレビ電話をすることができます。 クローズボタンをタップするとネイティブ画面が終了し、WebView部分に戻ってきます。実際触ってみた感じフルネイティブアプリと違和感なく感じます。

f:id:medley_inc:20171122192030g:plain

※アニメーションGIFの容量が重くなったので相手側でのコード入力中の空白時間を削ったり編集した影響で左下の緑と赤の画面が飛んだりしてますが、実際は滑らかです

まとめ

今回触ってみたというより指先が触れた程度ですが、全然Ionicでもいけそうな雰囲気を感じました。普通に触ってる分にはネイティブ部分なのかウェブ部分なのかわからなかったです。ただし、銀の弾丸ではないので、実際に開発に導入する場合はメリット・デメリットをちゃんと把握する必要があります。 ウェブアプリ寄りのことを言ってはきたものの、結局はウェブだろうがネイティブだろうがどんなツールを使おうが、使ってくれる人が求めるものを提供できればいいと思います。今後も何かあったときの引き出しのために色々なツールなど触っていこうと思います。

お知らせ

12/6(水)、こんなイベント(というか飲み会)をやります。 今回のブログの話が詳しく聞きたい、医療ヘルスケア領域の開発ってどんな感じだろう、社会貢献性の高いプロダクトに関わりたい、など思っているエンジニア・デザイナーの方、ビール片手に開発の話で盛り上がりませんか?

www.wantedly.com

その日は予定が入っているんだけど話を聞きたいという方は、こちらの「話を聞きたい」ボタンからどうぞ。

www.wantedly.com