見出し画像

Web技術/Ionic Frameworkでつくったモバイルアプリにできないたったひとつのこと。

ときどき「Ionicでつくったモバイルアプリ(Web技術/HTML5でつくったiOS・Androidアプリ)で出来ないことって何ですか?」と質問を受けるので簡単にまとめようと思います。

(カバー画像に意味はないです。何使おうかと思って探したところめちゃくちゃ可愛かったからこれにしました)

パフォーマンスが低いという誤解

とりあえず、「Web技術でアプリつくるとパフォーマンス低くて使い物にならないって聞くんだけど」というのはもうとっくに通り過ぎた昔の話です。以下の2つのレンダリングを比較してみてください。

圧倒的に後者のほうがなめらかでスムーズですよね。これはReactの過去の実装(Stack)と、4年前に刷新された「Fiberアーキテクチャ」との比較なのですが、JavaScriptのレンダリングの実装はここまで進化しています。

画像1

こちらはつい最近実装されたIonicでユーザがアニメーションを実装するのを支援するAnimation APIのFPSですが、過去のライブラリに比べて上記のように改善されています(参考: https://ionicframework.com/blog/introducing-ionic-animations )。ちなみに、Angularの起動速度もAngularJS時代と比べ物にならないぐらい高速化しています。

というか、7年前でさえ https://vimeo.com/55486684 で「実装の問題であり、Nativeで実装したから速いわけではない」と紹介されてるので、そろそろパフォーマンス低い話は卒業することができればと思います。

できないこと

では、構造的にできないことを考えてみましょう。まず、Capacitorの誕生により「デバイスAPIへのアクセスが難しい」ということは解消されました。

Custom URL Scheme/JavaScript InterfaceによってデバイスAPIへの容易なアクセス手段を得たことで、Swift/JavaとWebとのブリッジはスムーズになりました。実際わたしもブリッジプラグインを3つほどリリース・保守していますが、Swift/JavaとWebのブリッジに悩むことはありませんでした(Swift/Javaの知識不足でその実装には手間取りましたがw

ですので、できないことを伝えるのも難しいなと思ったのですが、敢えていうなら以下の1つが現時点では私は実装の方法が思いつきません。

IonicはフルサイズのWebViewを基本にします。ですので、例えばAdMobを利用して広告を表示する場合、「下部200pxを広告エリアにして、残りをアプリで表示」といった以下のような広告の表示方法となります。

画像2

一方でAdMobの広告にはこのようなバナー広告以外にも「ネイティブ広告」があります。本文内に広告をだすような使い方をする広告ですね。

いろいろ考えたのですが、どうしても構造上これをIonicのプロジェクト(WebView内)に組み込むことはできませんでした。いや、WebViewのスクロール値をとって広告を表示しているSubViewもスクロールされてば理論的には可能なのはわかってるんですが、それ実装の現実味ないので、それ以外でもし「こうやったら実装できるのでは」というアイデアがありましたら @rdlabo までご教示くださいー!

できること一例

あとは私の考えうる限り実装が可能です。例えば、以下はREADMEを書いておらず恐縮ですが「iOSのスクリーンショット撮影を認識してWebViewに通知するプラグイン」です。「撮影データは他のユーザの個人情報含むなら取り扱いに注意してね」ってアラートだすために使っています。

こちらはCodeScannerです。起動するとコードスキャナーが起動して、読み取ったコードをWeb側に連続して送出します。業務系で連続読み込みする用途です。

このようにSubControllerやSubViewをつくれば一部をNative実装にして連携することもできますし、何なら逆にNativeでつくったプロジェクトにIonic(Capacitor)を埋め込むことも可能です。応用すれば、広告ブロックみたいなアプリもつくることは可能でしょう。

冒頭の「出来ないことって何ですか?」に戻るのですが、技術はこの数年で大きく躍進し、できないことは上記一例を除いてほぼほぼなくなったと思って大丈夫です。

そうなんだIonicを使って、Web技術でモバイルアプリつくってみようという方は以下書籍ぜひご利用くださいー。

ちょいちょいいただく質問へのアンサー記事でした。

それでは、また。

この記事が気に入ったらサポートをしてみませんか?