本セッションの登壇者
セッション動画（YouTubeチャンネル登録もお願いします。）
榊原と申します。よろしくお願いします。
モバイルデバイスでブラウザは機能制限を受けている
突然なんですが、Web制作している皆さん、モバイルデバイスでWebを表示する世界はあたりまえだと思うのですが、モバイルデバイスで皆さんのWebアプリは機能制限を受けているってご存知でしたか？
たとえば、こちらで表示しているものはXcodeの画面なんですが、Xcodeでここにざっと表示されている、たとえば健康関係のデータを共有できるHealthKitであったり、アプリ内課金のPurchaseであったり、デバイスではアプリから利用できるさまざまなAPIが用意されています。
ほかにもカメラであったりとか、位置情報、振動、ストレージ、ファイルシステム、プッシュ通知、Motionなど、 さまざまなAPIがデバイスにあって、そのデバイスにあるものを使えるのがアプリなんですね。
さらに、外部デバイスを用意することで、たとえばブラザーのラベルプリンタと接続して印刷後に自動裁断したり、Tileで紛失したものを探せるといった拡張も行うことができます。
アプリからはこれらのAPIをすべて利用することができますが、ブラウザにはその一部しか許可されていません。そして皆さんが作っているWebアプリは、ブラウザというアプリに許可されたAPIのみを利用することができます。
デバイスには100を超えるAPIがいろいろあるのに、ブラウザがその一部しか許可されていないため、 Webアプリから使えるAPIがすごく限られてしまっているというのが現状です。
Webアプリが機能制限を受ける理由
なぜ一部しか許可されないのかというと、Webアプリが審査を受けていないということが一番の理由です。
Google PlayとApple Store、どちらもデベロッパーポリシーというものを用意しています。ぜひ、GooglePlayのデベロッパーポリシーの内容が深くて面白いので読んでもらいたいと思います。
なりすましやプライバシー詐欺、不正利用など、そういった悪用を防ぐためにストアアプリは審査を受けています。でもWebアプリはというと、ブラウザに直接URLを入力して表示できるので審査を受けていない。
すごく印象的なのがWebのプッシュ通知のMDNの中で「過去にプッシュ通知が悪用されることがあった」と明記されていることです。いろいろなことが過去にあり、現在Push通知を利用できるブラウザであっても、「今後ブラウザはユーザの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう」と（審査を受けるストアアプリと比べて）利用制限が厳しくなる見通しが書かれています。
ですので、モバイルデバイスでブラウザには数多くあるAPIのうち一部しか開放されていませんが、それはブラウザというアプリの制限であって、Web技術が機能制限を受けているわけじゃないんですよね。
そこでWeb技術でAPIをフルに使った「アプリ」を作る基礎知識を学んでみましょう。
Web技術でAPIをフルに使ったアプリを作るための基礎知識
こちらは、iOS SafariでWebサイトを表示しているものです。
一番上のステータスバーはデバイスOSが表示しています。真ん中がWebViewで、みなさんのコンテンツが表示されて、一番下にURLバーとアクションボタンがあり、これはブラウザアプリが表示しています。
「アプリにする」とはどういうことかというと、ステータスバーもURLバーも消してしまって全画面WebViewにしたら、アプリかWebかの区別はつかないですよね。
重要なのがURLバーに打ち込んで外部アセットを表示すると、その外部アセットは審査を受けていないものを表示することができてしまいます。これでは意味がない。けれど、ローカルアセットを表示すると、普通にSwiftやJavaで開発したものと同じように審査を受けることができます。
ローカルアセットを縦横100%のWebViewで表示して、審査を受ける - Web技術でAPIをフルに使ったアプリをつくる基本的な考え方はこれです。
続いて、JavaScriptからiOSやAndroidのAPI群にどうやってアクセスすることができるかというと、iOS、Androidは技術的にはJavaScriptからSwiftやJavaのコードを介して、先ほど紹介したAPI群にアクセスする方法を用意しています。JavaScript CoreフレームワークとJavaScript Interfaceの中にそういう機能があって、すごく簡単に言ってしまうと、WebViewを作成したときに、WebViewの中のWindow関数の中に「直接Objective-CやJavaのメソッドにアクセスすることができる関数」を用意することができます。
まとめると、Web技術でブラウザで表示することで皆さんはWebアプリだったり、Webサービスを出していると思いますが、全画面でそれを表示して、かつアプリとして審査を受ければ、先ほど紹介したAPIが使いたい放題なんです。
Webアプリを「アプリ」に - CapacitorとIconic Framework
ただ、問題は私たちがJavaScriptからAPI群にアクセスすれば、「こういう機能ができる」「こうやったら自分のアプリの価値を高めることができる」ということはあっても、WebViewを表示するフレームまでは開発したいわけではないということです。
npm数行でこれを実現することができる簡単なライブがあります。Capacitorといいます。
Capacitorを既存アプリに導入するには、npmの数行を打つだけです。先ほど簡単に解説したブラウザに代わる自分専用のWebViewを作って、それを表示するということがこの数行でできます。
Angularの場合、ng addいう自動インストール機構でより簡単になります。
「でもWebのUIじゃん。モバイルのUI作るのしんどい」となったら、Ionic Frameworkというモバイルのデザインパターンを再現したUIフレームワークもあります。
##まとめ
Webアプリとストアアプリの特性をうまく使い分けるのがいいんじゃないかなと思います。
Webアプリは、先ほどの説明のように、ある程度制限がありますが、URLを叩いたり、リンクをクリックするだけで簡単にアクセスすることができます。
対してストアアプリはインストールしないといけない、審査を受けないといけない。だけど、さまざまなAPIを通してユーザーにさらなる価値を提供することができます。
ここで紹介するのは私がすごく好きな記事なんです。PWAですごく人気だったアプリが、わざわざストアプリでも公開し直したという記事です。この記事の中で、「何で公開したんですか？」「なんでストアアプリで公開したんですか？」という質問に対して、「答えは簡単です。そこにユーザーがいるからです（ because that’s where the users are ）」と答えてます。
Google検索でアプリやWebアプリを探す人もいますが、同様にストアで「こういうアプリがないかな」と探す人もいるわけです。なので、あなたがWebアプリを作ってるとしたら、それってブラウザで表示するしか価値がないものですか？もしかするとそれをアプリにすることで、より価値を持たせて、より多くのユーザーに届けられるんじゃないですか？
ということで、Webアプリとストアアプリの壁をなくして、ぜひいろんな価値を作っていってください。
また、5月29日にIonic Meetupイベントを行うので、よかったら参加してください(注: イベントは終了しました。ユーザーグループはこちら)。
ということで終わります。ありがとうございました。
