WordPressサイトをスマホアプリ化したいがSwiftもAndroidJavaもムズイのでPWA化した

## 背景

WEBブログをスマホアプリ化させたかったわけです。

しかし、SwiftもAndroidJavaも難しく、
最近ハヤりのハイブリッドアプリもなんやようわからんので、
PWAという技術に注目したわけです。

PWAとはAppStoreやGooglePlayからダウンロードせずして、スマホアプリな感じに扱えるすげー技術なのです。
ではWordPressをPWA化した流れについて記載します。

## 前提

PWA化するためには対象サイトがHTTPS化されている必要があります。
また本記事ではWordPressによって構築されたサイトを対象にしています。

## まずはSuper Pregressive Web Appsの設定

まず`Super Pregressive Web Apps`というプラグインを使います。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfM2VkMmU5OTg2ZTlkYTZlMTM3ZDYxMDc4OTJkNTFkZjAifQ.-FKo-7-jPmclYLZSG1YoBWnRMR7XxNk3hGK7NDDty-s-png.jpg)](https://gyazo.com/8914215d6f84a1f043ae1d3a6dd35130)

インストールして有効化します。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMjFmZDNmNGFkODhiZTViNzA3OGNjY2JjYTU2ZTA0MGQifQ.NhXrpG7ncdTrvFZyy1Fk2-RJtK_CKrCStd7DqAgs6vU-png.jpg)](https://gyazo.com/18b83a2e7c7776f8fc23c661eb901945)

その後、`Setting`から以下の画面を開きます。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMjNhNzljY2YwMmUyNzU4ZThlNDI2YzU1NTU2ZDI2ZDIifQ.l3p5r2vroZdXCES3MtYwesVehf_eikeuPprnexswbwI-png.jpg)](https://gyazo.com/51a51a22227a5b36362f5358977dfe05)

英語で表示されていますが、下記のような項目になります。

|英語表記|意味|備考|
|:--:|:--:|:--:|
|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`をクリックします。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfYzVjYmJmZThkMThlMzNkNjUwNGQwOTM2MTczZmQ4ZTMifQ.rWRTvIcsfs1eNrNIa576or9QK33R6eTf2HsDlpDwx8E-png.jpg)](https://gyazo.com/036190f4a0d81b82a1003641639cc727)

で、`Apple Touch Icons`を`Activate`します。
これでiOSにも対応完了です。

## Google Analyticsの設定のために

先ほどと同様に`SuperPWA`の`Add-ONs`から`UTM Tracking`を`Activate`します。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfNzkxZDc5NjlkZTg5ODNlNDg0ZmIyMTRiYjgyNzM3MzEifQ.6seUPNGRbY3NRv_NpSTaqsxofwYp0VRFeW0p5x_56Go-png.jpg)](https://gyazo.com/40f0f56ccb45c9b6b306d631dadf14df)

`Customize Settings`をクリックすると下記のような画面が表示されます。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfZjEwMDg4YjFjMWNmYjcxZWE3OTlmZGVhNTFkNTBlMGQifQ.UnafaF52H_Fs6WzZMzTLSbZF9gnv2BErY5ETaGpS0dE-png.jpg)](https://gyazo.com/18382142e319ddfe34fc97474c668849)

`Campaign Source`に入力したものが`Google Analytics`の`集客の概要`の`others`としてカウントされるようになります。

## ちゃんとPWAできてるか確認

### AndroidOSで確認

[コンビニうまジャンキー極秘リスト](https://kakiuchi.style/)をGoogleChromeで開き、設定から`ホーム画面に追加`をクリックします。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfNWQwMTZhNjI2YTFjZWMyNjAwNmU1ZTZhMGNjMTFiNzgifQ.tYeM6yELHaixIAjDLFbHUVydQxK7PAWRTiEAeW4EDaI-png.jpg)](https://gyazo.com/6fc44778ea323a88a57374ea5aea4812)

すると以下のようにポップアップが表示されそのまま`OK`をクリック

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfZDlhZTQ0YjQ0YmQ1YTUxNmI4MjBkYWMxZGFlMTc0ODQifQ.CzHG4Tu2bIXpt9orQTTDNMaiMABSmNxBZ-jq-z5wxW4-png.jpg)](https://gyazo.com/b6bf43e147e1856ca42e21cbbcbb3ed1)

するとまるでAndroidアプリのようにホーム画面に表示されます！

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfOWE3YmYxOTQ1MzJlOTUyOWRjOWMwMzc1NzIzODk3NjcifQ.fOV8uX2v7gSPqLjmT6uo_jqoUmEsmoOGcg0fMLULMUE-png.jpg)](https://gyazo.com/fafd605f2f087d71d52d3502bd49cfed)

起動してもかなりいい感じです！

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMjZlYTBmYjlkMWFlY2ZmNjZhNjg5N2ZjN2FmYjk3ZTYifQ.7fQB2zl00gpojEkWftV2a-p1yt6IFUWisV5p-NhhwQQ-png.jpg)](https://gyazo.com/a3fdc9ef79fd6aeaa9973e41dc98e3a5)

### iOSで確認

[コンビニうまジャンキー極秘リスト](https://kakiuchi.style/)をSafariで開き、設定から`ホーム画面に追加`をクリックします。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfNjg5MDBmMDk3YTE5MGE1YjAzMzYxZDY0ZmRjZTI5YTgifQ.TZvBqKGYCmPKAmRM0b4MORWSH3XGx0P1KenregwB9mA-png.jpg)](https://gyazo.com/6ed53719ba14a008c2e8d4efd8988d6a)

すると以下のようにポップアップが表示されそのまま`Done`をクリック

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMWU0MjUzOTA5M2QwNTk2ZmFkYTYyYzJjYTZlZTJiMDAifQ.G_3W4e4dp6Hxxid45mHS8Tg9ivAZr21dUOQbogvVjaE-png.jpg)](https://gyazo.com/88c533ae7575ae1e9ad2810d8d025b34)

するとまるでiOSアプリのようにホーム画面に表示されます！

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfNzI3ZmZkYjlhODgyOTM0ZmU2YjlhZjU1NWI3ZjY1NDMifQ.iYduTyJTXq07HLyzyYXOmSVYx7jv7ftlUmbLwHpkEM0-png.jpg)](https://gyazo.com/0b2a9fc2229edca39b0d566edc199f5f)

起動も問題ありません！

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMDBlM2I0ZTU4YTExZTliYjJlMjdjNTRmZDJhZmUxNWYifQ.HVTu1hpOc9VaGqXbq3xVESV9DPbaB6Ivc93qlnhU5tk-png.jpg)](https://gyazo.com/92439e519b27f535ccd344e623bc0388)

### iOSでの注意事項

じつはまだiOSにてPWAの適用が確立されておらず（2018/11/19時点）、戻るボタンがありません。
仕方ないので自分で実装するか、適用されるまで待ちましょう！

### GoogleAnalyticsでの確認

以下のようにしっかりとSuperPWAのキャンペーンからのアクセスがカウントされています。
これで効果があるか確認していきたいですね。

[![Image from Gyazo](https://thumb.gyazo.com/thumb/200/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfZmQ1NjAwOTlkNGYwZGNmNmM4MjcxNjI4ZDViYzI1MjIifQ.PdOgXXlEHQZ8H_KGQThS1p5C749ZBfjBLxKwJFWHBWY-png.jpg)](https://gyazo.com/55257c2165a4f567a97189b1dd88a219)