背景
WEBブログをスマホアプリ化させたかったわけです。
しかし、SwiftもAndroidJavaも難しく、
最近ハヤりのハイブリッドアプリもなんやようわからんので、
PWAという技術に注目したわけです。
PWAとはAppStoreやGooglePlayからダウンロードせずして、スマホアプリな感じに扱えるすげー技術なのです。
ではWordPressをPWA化した流れについて記載します。
前提
PWA化するためには対象サイトがHTTPS化されている必要があります。
また本記事ではWordPressによって構築されたサイトを対象にしています。
まずはSuper Pregressive Web Appsの設定
まずSuper Pregressive Web Appsというプラグインを使います。
インストールして有効化します。
その後、Settingから以下の画面を開きます。
英語で表示されていますが、下記のような項目になります。
| 英語表記 | 意味 | 備考 |
|---|---|---|
| Application Name | アプリ名 | |
| Application Short Name | アプリ名の略 | スペース不足時に表示される |
| Description | アプリ説明 | |
| Application Icon | スマホに表示されるアイコン | 192px × 192px のPNG画像 |
| Splash Screen Icon | アプリ立ち上げ中に表示される画像 | 512px × 512px のPNG画像 |
| Background Color | アプリ立ち上げ中の背景色 | アプリテーマカラーでOK |
| Theme Color | ステータスバーの色 | アプリテーマカラーでOK |
| Start Page | スタートページ | |
| Offline Page | オフライン時に表示されるページ | |
| Orientation | 画面の向き |
Follow Device Orientation→自動回転、Protrait→縦固定、Randscape→横固定 |
それぞれを入力してSave Settingをクリックします。
これでAndriodOSでの設定は完了です。
iOSにも対応させるために
以下のようにメニューからSuperPWAのAdd-ONsをクリックします。
で、Apple Touch IconsをActivateします。
これでiOSにも対応完了です。
Google Analyticsの設定のために
先ほどと同様にSuperPWAのAdd-ONsからUTM TrackingをActivateします。
Customize Settingsをクリックすると下記のような画面が表示されます。
Campaign Sourceに入力したものがGoogle Analyticsの集客の概要のothersとしてカウントされるようになります。
ちゃんとPWAできてるか確認
AndroidOSで確認
コンビニうまジャンキー極秘リストをGoogleChromeで開き、設定からホーム画面に追加をクリックします。
すると以下のようにポップアップが表示されそのままOKをクリック
するとまるでAndroidアプリのようにホーム画面に表示されます！
起動してもかなりいい感じです！
iOSで確認
コンビニうまジャンキー極秘リストをSafariで開き、設定からホーム画面に追加をクリックします。
すると以下のようにポップアップが表示されそのままDoneをクリック
するとまるでiOSアプリのようにホーム画面に表示されます！
起動も問題ありません！
iOSでの注意事項
じつはまだiOSにてPWAの適用が確立されておらず（2018/11/19時点）、戻るボタンがありません。
仕方ないので自分で実装するか、適用されるまで待ちましょう！
GoogleAnalyticsでの確認
以下のようにしっかりとSuperPWAのキャンペーンからのアクセスがカウントされています。
これで効果があるか確認していきたいですね。
