Webサイトをアプリっぽく使ってみる

あきにゃん（@aki_hamuinu）によるまったりChromebook講座、第１回です。

といいつつも、今回はモダンなインターネットブラウザー（Google Chrome、Chromium版Microsoft Edge、新しめのSafariなど）が利用できる環境であれば、誰でも体験できます。

今どきのWebサイトって、アプリっぽく使えるの！？

突然ですが、「今どきのWebサイトは、とある仕組みに対応していればアプリっぽく使うことができる」という事実、どのくらいの方がご存知でしょうか。

アプリっぽくというと、例えば以下のようなイメージを持たれている方が多いと思います。

・デスクトップ画面やホーム画面にアプリアイコンを置ける

・アプリからのプッシュ通知が届く

・事前にアプリデータをダウンロードしてオフラインで利用できる

実はこういったことに対応しているWebサイトであれば、ホームにアプリアイコンを置いたり、オフラインで利用できたり、プッシュ通知が届いたり、といった、まるでスマホやタブレットのアプリのような使い勝手で便利にWebサイトを利用することができます。

その仕組みを利用したアプリのことを「プログレッシブ・ウェブ・アプリ（以下、PWA）」といって、Googleなどが主導になって仕様策定がなされています。

これは、インターネットで利用される様々な技術が進歩して、スマホやタブレットのアプリのようにインタラクティブなスタイルでWebサービス提供を行うところが増えてきたこともきっかけの１つです。

少し昔のインターネット技術ではなかなか実現の難しかった「プッシュ通知」などの仕様を策定すれば、スマホやタブレットのアプリと同様の使い勝手になるのでは！．．．といった感じがわかりやすいかと思います。

そんなPWA、技術的な側面からは、非常に多くの便利な要素があって進化のスピードも早くて、実装が大変だったりしますが、ユーザー的な側面からは、先程あげたような、ホーム画面にアイコンを置けたり、オフラインでも閲覧やデータの編集などができたり、プッシュ通知が届いたり、アプリショートカットから必要な機能を手早く利用できたりと、とても便利な仕組みだったりします。

これらの具体的な機能は、PWAに対応しているWebサイトであれば、必ずすべて対応している．．．というわけではなく、ホーム画面へのアイコン追加などのように必ず対応している機能もあれば、プッシュ通知やオフライン利用などのように一部のサイトしか対応していない機能もあるなど、まだまだ発展途上です。

PWA対応サイトを体験してみる

では実際に体験してみましょう！ 

今回は、某大手SNSの青い鳥さんを例に挙げてみます。

https://twitter.com/

某青い鳥さんのホームを開くと、アドレスバーの右端に「インストール」アイコンが表示されるので、それをクリックします。

すると、「アプリをインストールしますか？」と聞かれますが、ここで「インストール」を選択します。

そのまましばらく待つと、PWA対応サイトのインストールが完了です！

試しに、アプリ一覧画面を開いてみましょう。

アプリ一覧画面に、今まで存在しなかった某青い鳥さんのアイコンが出現していれば、PWA対応サイトをアプリとしてインストールできた証です。

これ以降は、アプリアイコンから直接サイトを表示できます。

補足：PWAに対応していなくても．．．？

PWAに対応していなくてもに対応していないサイトであっても、ホーム画面等にサイトアイコンを表示することは可能です。

先ほど紹介した方法のほか、ブラウザメニューアイコンから「その他のツール → ショートカットを作成...」を選択すると、「ショートカットを作成しますか？」と聞かれます。

このときに「ウィンドウとして開く」にチェックを入れてから「作成」を選択することで、アプリのような感じでWebサイトを使うことができるようになります。

最後に

えっ？たったこれだけ？

．．．と思われるかもしてませんが、これでWebサイトをアプリのような感じで利用できます。

他にもプッシュ通知に対応しているサイトであれば、サイトを初めて開いたときにプッシュ通知を受け取るかどうかを聞かれるので、受け取る選択をすると、それ以降からはそのWebサイトからのプッシュ通知を受け取れるようになります。

最初に書いたとおり、PWAという仕組みはまだまだ発展途上なので、まだまだ本格的に利用できる対応Webサイトは少ないです。

ただ、ブラウザー側のサポートのおかげで「Webサイトをアプリのようにお手軽に利用できる」最低限の機能はサポートされているので、気になるサイトがあれば、ホーム画面にどんどんアイコンを置いていきましょう！