株式会社メドレーDeveloper Portal

2017-11-24

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ionicとは

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

  • オープンソース
  • Apach Cordova 上に構築されている
  • HTML5 を用いたクロスプラットフォームなハイブッドアプリ(PWA 含む)の開発が可能
  • JavaScript のフレームワークは Angular
  • Angular を採用しているので AltJS は TypeScript
  • ​​UI コンポーネントがいい感じ
  • ネイティブ機能をフルで利用可

実際に触ってみた

公式の 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 テンプレートを使用しました。

20171122191851.gif

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 部分に戻ってきます。実際触ってみた感じフルネイティブアプリと違和感なく感じます。

20171122192030.gif

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

まとめ

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

お知らせ

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

https://www.wantedly.com/projects/170112

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

https://www.wantedly.com/companies/medley

前の記事
次の記事

株式会社メドレーDeveloper Portal

© 2016 MEDLEY, INC.