Apps(プログレッシブウェブアプリ)という言葉を聞いたことがあるでしょうか。Experience)が素晴らしいと着目されたことで、目にしたことがある方も多いかもしれません。今回は、モバイルユーザーのUX向上を担うプログレッシブウェブアプリをご紹介します。プログレッシブウェブアプリとはプログレッシブウェブアプリは簡単にいうと、スマホアプリのように動作するウェブアプリケーションのことです。何か特定の技術だけでなく、いくつかの最新のウェブ標準技術を使うことで実現し、代表的には以下のような特徴を備えています。Homescreen)プッシュ通知オフライン動作プログレッシブウェブアプリは、Google社が推進する取り組みであるため、Chromeでの対応が先行していましたが、今ではその他の主要なブラウザでも対応が進んでいます。Workerに関しては、Chrome、Mozilla社のFirefoxに加え、2017年12月にMicrosoft社のEdgeとApple社のSafariの開発版がともにデフォルトで有効になったことがニュースとなりました。2017]:https://webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/(外部リンク)日本では、2017年11月にリニューアルした日経電子版(外部リンク)がプログレッシブウェブアプリに対応していることが話題になったため、日経電子版で知った方も多いかもしれません。海外では、dev.to(外部リンク)というサイトが有名です。ネイティブアプリとウェブアプリまずはプログレッシブウェブアプリが出てきた背景について紹介します。モバイル、特にスマートフォンの爆発的な普及以降、スマートフォン特有の機能と連携し、ネイティブならではのUXを提供できるネイティブアプリの需要が多くなってきました。ネイティブアプリがモバイルウェブアプリを置き換えるものかというとそうではありません。Web」)のユニークユーザー数とユーザーごとの利用時間の統計データです。USのレポートですが、日本でも同じような傾向にあるのではないでしょうか。図1によると、ネイティブアプリの利用時間はモバイルウェブアプリの利用時間より圧倒的に長い一方、ユニークユーザー数に関しては、モバイルウェブアプリのほうが倍以上多いことがわかります。これは、検索エンジンからの流入をはじめとして、モバイルウェブアプリがより多くのユーザーを誘導する「入り口」として重要な役割を担っていることを示しています。みなさんも普段どのようにウェブとアプリを利用しているのか考えてみてください。私も初めて利用するサービスはウェブから検索し、ある程度頻繁に利用するようになってから必要に応じてアプリをインストールすることが多いです。アプリに関しては、以下のようなデータもあります。図2によると、1ヶ月で新たにアプリをダウンロードするユーザーは半数しかいません。ダウンロードするとしても平均2アプリ程度です。図3によると、ダウンロードしたとしても、トップ10のアプリが利用時間のほとんどを占めているということがわかります。アプリには、「ダウンロードしてもらう壁」と「継続的に使ってもらう壁」が大きいといえると思います。このような背景があり、アプリにできてウェブにできないことのギャップを埋めるべくウェブが進化した結果、プログレッシブウェブアプリが登場したといえます。プログレッシブウェブアプリを支える技術プログレッシブウェブアプリは、以下のような最新のウェブ技術を用いて実現します。Pushプログレッシブウェブアプリは基本的には、「プログレッシブ・エンハンスメント」の概念に基づいています。「プログレッシブ・エンハンスメント」とは、基本的な機能をベースとして、最新の標準技術が利用できる環境では、よりリッチな機能を提供するという考え方です。そのため、前述のウェブ技術のすべてを備える必要はなく、既存のウェブアプリにプログレッシブウェブアプリの要素を段階的に取り込み、少しずつウェブアプリの機能を広げていくことも可能です。Checklist(外部リンク)がひとつの基準になります。Checklistへの対応状況は、ChromeのDevToolsのAuditに組み込まれているLighthouseというツールで簡単に調べることができます。そのツールでは、プログレッシブウェブアプリへの対応状況をスコアとして計測してくれるのに加え、改善点も示唆してくれます。Manifestについて簡単に紹介します。Workerは、プログレッシブウェブアプリにおいて最も重要な技術です。Workerは、ウェブページのバックグラウンドで別に動作するスクリプトで、ウェブページからのリクエストをキャッチしてコントロールすることができ、キャッシュを利用したオフライン動作やバックグラウンド同期などが実現できます。Workerについてのより詳細な説明はこちら(外部リンク)をご覧ください。Manifestは、アプリ名やホーム画面へ追加するアイコンなどのアプリケーション情報を定義するJSON形式のファイルで、ブラウザに対してインストール可能なウェブアプリであることを示します。Manifestの存在といくつかの条件を満たすことで、自動的にホーム画面への追加ダイアログを出してアプリのインストールを促してくれます。ホーム画面へ追加することで、ネイティブアプリと同様のアクセスが可能となります。最後にスマホファーストなアプリケーション開発を起点として、ネイティブアプリとモバイルウェブアプリが互いに進化していく中、ネイティブアプリの特徴を備えたウェブアプリとしてプログレッシブウェブアプリが登場しました。冒頭でも紹介したように、EdgeとSafariの対応がされるということが大きな後押しとなり、カスタマーアプリケーションを中心として、今後広がりを見せてくるのではないでしょうか。プログレッシブウェブアプリは、ネイティブアプリの上位互換ではありません。ブラウザのサポート状況や、すべてのネイティブAPIを使えるわけではないことなどの課題もあり、アプリケーションの特性や必要な機能、利用環境などに応じて適切な使い分けが必要だと考えています。プロジェクト支援に従事。『Spring徹底入門』(翔泳社)の監修を担当。INSIGHTは、最前線で活躍する「人」や、最先端の「テクノロジー」動向の発信を通じ、あなたが今必要としている情報を届け、共に未来のイノベーションを起こすための源となるプラットフォームです。Magazine注目の記事や新着情報などのお役立ち情報をお届けするメールマガジンを配信しています。NTTデータグループの最新動向や技術トレンド、イベント・セミナー情報などと併せて定期的にお届けします。メールマガジン登録Contactサービスに関するご相談やご質問など、お気軽にお問い合わせください。Corporation。