2019年10月26日土曜日

モバイルアプリの未来 PWAの作り方〜既存スマホサイトのアプリ化 

先日、ウェブサイトをアプリ化する課題があって、いろいろ調べていくとPWAという2018年ごろから話題になっている技術に出会いました。

この出会いはこの10年ぐらいのテクノロジー基盤としては、かなりのインパクトがありそうなので、自分なりの知識で解説しておこうと思います。

クロスプラットフォームの問題


そもそも、アンドロイドとiPhone のスマホアプリ、それからウェブサイトとしてのスマホサイトの3つを開発しようと思うと、それぞれの開発言語が異なるので、開発者としては3つの言語とそれぞれのシステムの管理が必要です。


ネイティブアプリの開発の場合、iOSだと Swift で Androidだと Kotlinで ウェブサイトはHTMLCSSですね。これだと開発者泣かせということで、iOSでもAndroidの共通開発言語としてクロスプラットフォームという考え方が次に広まりました。有名なクロスプラットフォームとしては XamarinやReact Native がありますが、これもまた独自の言語に近いのでゼロから学習しなければならないし、ネイティブアプリのような体現ができるかといえば、微妙です、、。

PWAの登場


そんな過程で2018年ごろに登場したのがPWAです。
 PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。


特別な技術は必要なく、既存のウェブサイトに数行のJavascriptコードを追加するだけでGoogleストアやアップルストアで見かけるネイティブアプリのようにユーザーは自分のスマホにインストールして使えるようにするものです。

PWAを既存のウェブサイトに実装すると以下のようなメリットがあります。

  • ネイティブアプリと同じく全画面で閲覧できる
  • プッシュ通知が行える
  • オフラインで閲覧できる
  • ファイルがスマホにキャッシュされるので読み込み速度が格段にアップする
  • 検索エンジン経由でアプリをインストールさせることができる
  • 管理者側としてはサイトの審査が不要


などなど、、非常にメリットが大きいのです。

Googleのケース事例として紹介されている、不動産検索サービスを提供するSUUMOの場合、
  • 読み込み時間75%短縮
  • プッシュ通知開封率31%
  • 検索エンジンでのランク評価に好影響
という結果がでています。

そのほかにも、NIKKEIやTwitterやスターバックスなども事例として紹介されています。

ブラウザの対応


PWAという仕組みはスマホのブラウザで動作するため、AndroidとiOSにそれぞれインストールされているブラウザの対応状況によっては正しく動作しない場合があります。

2019年時点では、Google Chromeは完全にPWAに対応しています。Safariについてはまだプッシュ通知ができない、バックグランド同期ができないなど課題が残ります。近い将来、AppleがPWAを完全サポートすることを願うばかりです。

PWAの作り方


前提条件としては、以下の条件です。

  • 最近のバージョン(74以降)のChrome。 PWAは単なるウェブアプリであり、すべてのブラウザで機能しますが、ブラウザレベルで何が起こっているのかをよりよく理解してインストール体験をテストするためにChrome DevToolsのいくつかの機能を使用します。
  • HTML、CSS、JavaScript、そしてChrome DevTools に関する知識。

1、manifest.json ファイルの作成

manifest.json というファイルを作成し、以下の記述をします。
{
  "name": "Weather", //ウェブサイトの名称
  "short_name": "Weather", //ウェブサイトの名称(短文)  "icons": [{
    "src": "/images/icons/icon-128x128.png", //128pxアイコンの場所      "sizes": "128x128", //サイズ定義      "type": "image/png"     }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html", // アプリインストール後のURL転送先
  "display": "standalone", // 変更なし
  "background_color": "#3E4EB8", // アプリ起動時のブラウザの色
  "theme_color": "#2F3BA2" //テーマ色
}

Note: Chromeをインストールするには、少なくとも192 x 192 pxのアイコンと512 x 512 pxのアイコンを用意する必要があります。しかし他のサイズを提供することもできます。 Chromeは48dpに最も近いアイコンを使用します。たとえば、2xのデバイスでは96px、3xのデバイスでは144pxとなります。

2、ウェブアプリマニフェストへのリンクを追加する

アプリの各ページに<link rel="manifest"...を追加して、ブラウザにマニフェストについて通知する必要があります。 index.htmlファイルの<head>要素に次の行を追加します。

public/index.html


<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">


3、iOSのmetaタグとアイコンを追加

iOSのSafariはウェブアプリマニフェストがまだサポートされていません。そのためindex.htmlファイルの<head>に伝統的なmetaタグを追加する必要があります。

public/index.html


<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">


4、アドレスバーのテーマカラーを設定する

PWA監査で、Lighthouseはアプリの「 アドレスバーのテーマカラーが設定されていない 」と指摘しています。ブランドの色に合わせてブラウザのアドレスバーをテーマにすると、より没入型のユーザー体験を提供できます。
モバイルでテーマカラーを設定するには、次のmetaタグをドキュメントの<head>に追加します。

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

基本的には以上の実装で終了です。各種パスはサイトの構造に合わせて変更してみてください。また、もっと詳細にスマホアプリとウェブサイトの統合を行う場合は、Googleが提供しているドキュメントに はじめてのプログレッシブウェブアプリを参照してみてください。



AppleはPWAフレンドリーに近づくか?


答えはおそらくYESです。いずれにせよ、AppleがPWAテクノロジーに近づき、それに近づいていることは大きな一歩ですね。iOS 12.2およびiOS 13ベータ版のPWA対応は多くの人が待ち望んでいたことですので。

PWAはモバイルアプリケーションの未来だと考えています。ネイティブアプリケーションは今後数年後、PWAを基本としたウェブアプリに置換えられ、ネイティブアプリはウェブサイトと完全な組み合わせになる可能性があると思われます。


結局のところ、Googleはこの点で先導的であり、常にProgressive Web Appsの開発を推進しています。PWAについては今後もウォッチを続けていこうと思います。最新記事についてはメルマガを購読していただけると助かります。










0 件のコメント:

コメントを投稿