本セッションの登壇者
セッション動画
スライド
榊原昌彦と申します。自分で会社を経営しているほかに、日本でIonic Japan User Groupというユーザーグループの代表をしていたり、最近はIonic Developer ExpertsのプログラムがIonicチーム自体にできて、そこの Developer Expertの認定 を受けました。
Webアプリとモバイルアプリをどう見分けているか
Capacitor 4について話していくのですが、おそらく今日視聴している方は「Capacitor 4でこれがこう変わった！」と言われても、「なにそれ?」となってしまうと思うので、まず最初に「そもそもCapacitorとは何か」というお話をしたいと思います。
その前に、この3つの画面には違いがありますよね?
で、どう違うかと考えたときに、一番左は普通のChromeブラウザですよね。真ん中はiOSのSafari。私たちは、これをブラウザとしてどうやって認識しているかというと、上のURLツールバーだったり、下のアクションボタンを見て、「これはブラウザで表示されているものだ」と認識しているんですね。
なので、一番右は誰が見てもブラウザで表示されたWebページではなくてアプリだと思うでしょうが、どうしてこれをアプリと思うのかというと、ただURLバーとアクションバーがないからですね。
で、私たちがモバイルアプリとして認識するために、いろんな要素がありますが、基本的には1つ目にユーザーインターフェースがあります。
「ここがタブになっている」「ヘッダーが付いている」など、そういったHuman Interface Guidelineと、Material Designに沿ったインターフェースであったら、「このユーザーインターフェースはモバイルアプリだ」と認識しますよね。
Webでそれを再現するためのライブラリがありまして、それがIonic Frameworkといいます。これは簡単に言ってしまうと、Webサイトを作るときに「これを使ったらモバイルアプリのように作れますよ」というフレームワークです。
そして私たちが「アプリをアプリであると認識する」ための2つ目のものが、先ほども言ったURLバーとアクションバーがないことです。それを実現できるライブラリがCapacitorであって、今日はまさにその話をしようと思っています。
CapacitorのベースはWebView
Capacitorとはそもそも何かと言ったら「Web標準をベースにした、マルチプラットフォーム展開ができる」ライブラリです。なので、具体的にはCapacitorで表示しているものはWebViewなんですよね。それをまるでアプリのように振る舞わせることができるライブラリ、ということになります。
当然ながら「見た目がアプリだ！」というのも重要な要素なのですが、もうひとつはアプリのような機能を使うことができるというのもありますよね。
さらにCapacitatorはアプリのような機能を使えるどころか、「ここの部分はSwiftで書きたいな」「ここのところJavaで直接実行した方がパフォーマンスいいな」といったときに、WebのJavaScriptと、SwiftやJavaを通信させることができるという機能を持っています。
見た目の話をすると、「じゃあPWAでいいじゃん」と言う人がよくいると思うんですけど、もちろん、PWAも素晴らしいソリューションのひとつではあるのですが、使えるAPIが限られちゃうんですよね。たとえば以下でお見せしているものは、iOSで作ったときに使える機能で、HealthKitであったり、HomeKitであったり、iCloudであったり、課金だったり…これらはモバイルデバイス自体には搭載されているんですけど、ブラウザで表示している限り、これらのAPIを使うことができないんですね。
ほかにアプリだったら、こういった機能であればブラウザでもけっこう使えるようになっています。
ほかにもtileや、brotherのラベルプリンタに直接つないでWeb技術からプリンタを操作するなど、Web技術としては実現できるんですけど、WebブラウザにそのAPIがないので、「デバイスには付いている、Web技術でもできる、でもブラウザでAPIがないからできない」という状況を、Capacitorを使うと、それらのAPIに直接Web技術からアクセスすることができます。なのでこういったラベルプリンタを直接つなぐとか、ユーザーの健康状態をHealthKit Frameworkから取得して、ユーザーに何かしらリマインドできるような機能を作るといったように、Webアプリにより新しい機能を付けられるようになります。
以上がCapacitorの概要なんですが、とてつもなく簡単に言ってしまうと、今みなさんが持っているWebアプリを、Capacitorを使うことによって、Storeから配信できるようになるし、アプリとして使うことができるようになるし、かつ、モバイルデバイスでWebブラウザからはアクセスできないようなAPIにアクセスすることができるようになるので、今までユーザーに提供できなかった新しい付加価値を提供できる、それがCapacitorです。
Capacitor 4で変わったこと
バージョンアップデートを重ねて良くなっていっているのですが、何が変わったかと言うのを簡単に説明しようと思います。
Capacitorというのは、WebViewを表示するためのファイルセットなんですね。左が、Capacitorで生成するAndroidのフォルダで、右がiOSのフォルダなんですが、これら、アプリのデフォルトプロジェクトがあって、その中にWebアセットを入れることによって、WebViewを表示できるようになる、というものなんです。
今回、とても大きかった変更点はdeployment_targetとtargetSDKが上がりました。Web制作畑の人間からするとなんのことだろう?という話になるのですが、とてつもなく簡単に言ってしまうと、「Nodeのバージョンが上がったから、いろんな機能が使えますよ」にかなり近いです。
iOSのdeployment_targetが13になって、AndroidのtargetSDKが32になります。それからセキュリティパフォーマンスが改善したこともあるのですが、これ、左はStripeの決済アプリで、クレジットカードを撮影して、カードの番号をそのまま読み取るという機能があるのですが、その機能はAndroid targetSDK 31では使えなかったんです。それが32になると使えるようになったので、こういったさまざまなプラグインで用意している機能がより使いやすいものになっています。
あとGoogle Playに今年の11月からAPIレベルを上げないと審査してもらえないという変更が入ったんですね。こうしたことにも対応しているなど、最新のSDKを対象にしたというのが1つ目の大きな変更点です。
その他の細かい変更点としては、Live Load用のHTTP接続を許可するポリシーを持っていたんですけど、これはそもそもHTTPのアクセスがローカルアセットしてたから許可してたもので、今は別のアクセスの方法になってるのでもう不要だよね、と消されたりとか、
javascriptinterfaceからシンプルな実装のWebMessageListenerに変更になったとか、などいくつかあります。
その中でも今回いいなと思った変更点を挙げると、Capacitor 2からCapacitor 3に上げるときに、人力でけっこう頑張る必要があったんですよね。たとえばプロジェクトをまっさらにして、Capacitor 3でプロジェクトを作り直して、それにさまざまな機能を乗っける…みたいなことをしてたのですが、今回、Capacitor 4に上げるときはマイグレーションサポートが入ったので、npx @capacitor/cli migrateでCapacitor 3からCapacitor 4に上がるようになりました。
まとめ - 「どう作るか」ではなく「何を作るか」に注力しよう
で、まとめなんですけど、これはけっこう私が好きな記事でよく引用しているんですが、PWAでかなり人気のあったアプリが、アプリストアにも公開されました。でもPWAでもたくさんユーザーがいたし、それで儲かっていたし、別に公開しなくてもよかったじゃん、という質問に対して、その人が「PWAで儲かっているかは関係なく、そもそもブラウザで検索するように、こんなアプリないかな、とアプリストアで検索する人もいる。自分がアプリストアにリリースしたのは、そこにユーザーがいるからです」という記事を出していて、いい表現だなと思ってます。
なので、「どう作るか」じゃなくて、「何を作るか」に注力するとより良くなるんじゃないかなと思います。
なので、Webアプリのアセットがあるのであれば、モバイルアプリにすることにチャレンジしてもらえればいいなと思います。
以上です、ありがとうございました。
