Web技術で作れるモバイルアプリに制限はあるか？

HTML5やJavaScriptは年々進化を遂げています。それは、スマートフォンやタブレットの隆盛に伴って、利用シーンが拡大しており、Webとしても対応すべきだと考えられたものについて機能が追加されているからです。最近であれば、多要素認証に注目が集まるのに合わせてSMS Receiver APIであったり、決済を簡単に行うPayment Request APIなどが誕生しています。

MonacaではそんなWeb技術をベースにモバイルアプリを開発するのですが、利用者の方から「Monacaのアプリでは、できないことがあるのか」といった質問をよくいただきます。そこで、この記事の中でお答えしたいと思います。

プラグインなしでできること

まず大前提として、Monacaではプラグイン（Cordovaプラグイン）が利用できます。これはWeb技術だけではできない機能を実現するための仕組みです。プラグインを使えば、実質的にネイティブアプリができるすべてのことを実現できるといえるでしょう。しかし、プラグインを多用するのであれば、それはハイブリッドアプリ（Monacaアプリ）である必要性も薄れてしまいます。そこで、プラグインについては今回は考えないこととします。

ゲームのようなUIを作れるのか

一言でゲームといっても様々ですが、例えばRPGのようなゲームを作りたいとします。これは、RPGツクールMVのようなソフトウェアを使えば作ることができます。RPGツクールMVは20年以上の歴史を持ったRPG作成ソフトウェア「RPGツクール」のスマートフォン、Web対応版です。これを使うと作成したゲームをHTML5で出力できます。生成したコードをMonacaプロジェクトにすることで、Android/iOSアプリにすることが可能です。

2Dスクロールや3Dを使ったゲームを作成したい場合、PLAYCANVASを利用できるでしょう。PLAYCANVASはHTMLでの表示ではなく、WebGLを用いています。そのため、Webブラウザに描画するよりも高速、かつ滑らかな表現が実現できます。

日本で人気があるノベルゲームであればティラノスクリプトが利用できます。あらかじめ決められた記法に沿って書き進めることで、誰でもノベルゲームが簡単に作成できます。また、クイズゲームのような、高感度が求められないものであれば、HTMLとJavaScriptでも十分作成できるでしょう。

逆に、入力に対する反応がシビアに求められるゲームはWeb技術で実現するのは難しいかも知れません。そういったゲームであれば、Unityなどを活用するのがお勧めです。

カメラをどこまで自由に操作できるか

最近はカメラの映像に対して、リアルタイムにオブジェクトを載せたり、エフェクトするようなアプリが人気です。Web技術においては、カメラの画像を受け取ったり、リアルタイムの取り込みはできるものの、その後の加工まで行うのは実行速度として難しいかも知れません。

Web技術を用いる場合には、カメラで撮影した画像を取り込んで、レタッチしたり、輝度や彩度を調整することができます。画像に線を引いたり、描き文字を加えるようなレタッチであれば、さほど難しくありません。

リアルタイム通信はできるか

LINEやFacebookメッセンジャーなど、チャットアプリは常に人気です。そうしたアプリはMonacaアプリでも十分に実現できます。テキストチャットであればWebSocketを用いることで、利用者同士のリアルタイムコミュニケーションが実現できます。

プッシュ通知についてはWeb技術だけでは難しいですが、プラグインで実現できる技術です。Webプッシュ通知という機能もありますが、現時点ではAndroidのみ利用可能です。

ソーシャルメディアとの連携はできるか

例えばFacebook認証であったり、Twitter、GitHub、Googleなどのソーシャルメディアとの連携はWeb技術でも十分可能です。OAuth認証と呼ばれるサードパーティーの認証はMonacaアプリでも利用できます。さらにWeb Share APIによって、今見ている情報を別なアプリでシェアすることもできます。

Appleは昨年、Sign in with Appleを発表しました。すでにJavaScriptのライブラリも出ていますので、それを用いることでMonacaアプリ内でSign in with Appleを提供できます。

お絵かき（ペイント）機能はできるか

Web技術の中にはCanvasと呼ばれる機能があります。これは通常のHTMLとは異なり、ドローイングを実現する機能になります。円や四角といった形を描いたり、自由線を引いたりできます。このCanvasを用いることで、お絵かきアプリのようなものは実現できます。

もちろん高度な機能を実現するためにはJavaScriptを駆使する必要があるでしょう。

Bluetoothとの接続はできるか

現在、Web Bluetooth APIという仕様が策定されていますが、サポートはAndroid Chromeのみになっています。将来的にはiOSにも実装されると思われますが、それまではプラグインを使わないといけません。

NFC（近距離無線通信）を利用することはできるか

Suicaに代表されるNFCを使いたいと言うニーズもよく聞きます。こちらもAndroid ChromeではWeb NFCのサポートを開始しています。iOSでは実現できません。こちらも現時点ではプラグインを利用しなければなりません。

スレッドを利用できるか

ネイティブアプリではスレッドを用いることによって、処理を並列化させられます。しかしWebViewの場合、スレッドはメインの1本のみになり、重たい処理が走ると他の処理が止まってしまうという欠点があります。

ハイブリッドアプリの場合はちょっとした工夫が必要ですが、Web Workerを使うことでスレッド処理が実現できます。ただし、このスレッド処理ではDOM操作やネットワーク処理はできませんので注意してください。数値計算などをバックグラウンドで並列化する際などに利用できます。

AI/機械学習は利用できるのか

iOSではCore ML、AndroidであればML Kitによって、アプリの中に機械学習を組み込めます。これらをWebアプリ、Cordovaプラグインで利用する方法は今のところなさそうです。機械学習をMonacaアプリの中で実現する方法としてはTensorFlow.jsを利用する、またはWeb APIを使ってサーバサイドで実行する方法がよさそうです。

高度なUIが実現できるのか

高度な、という表現は判断に困るところではありますが、単純に以下の4つに分類して紹介したいと思います。

このように利用するUI技術を使い分けることで、幅広いUI描画に対応できます。

まとめ

Web技術は日々進化しており、そのAPIの数はどんどん増えています。UI周りにおいても、高度な表現が可能になっています。とはいえ、まだまだ不足している機能もあるかも知れません。それを補えるのがCordovaプラグインやWeb APIになるでしょう。

工夫次第でWeb技術であっても高度な機能、UIは実現できます。もちろん向き不向きや、もっと最適なプラットフォームもあるでしょう（例えば3DゲームであればUnityなど）。開発要件や、自分の作りたいものに応じて、最適な技術を選択してください。