インストール方法

PWAappimg

for iOS

手順1

iPhoneの方向けの説明です。 初めに本サイトをsafariで開いていることを確認してください。safari以外で開いていると、次の手順に進めないことがあります。 下の写真はsafariで開いているときの画面です。 尚、以下の手順は左上のOTHELLOのロゴが表示されているページであれば、どのページでも以下の手順を踏むと同様にアプリ化することが出来ます。

作品サムネイル

手順2

safariで開いていることを確認し画面下部、または上部にある共有ボタンを押してください。共有ボタンは▭に↑が付いているアイコンの事です。safariの設定によっては上部、または下部にUIがある場合があります。

作品サムネイル

手順3

共有ボタンを押して表示されたメニューの中に「ホーム画面に追加」と書かれたメニューが表示されます。この「ホーム画面に追加」を押して次の手順に進んでください。

作品サムネイル

手順4

手順3にて「ホーム画面に追加」を押すと以下の画像のようなUIが表れます。このUIの右上にある「追加」を押してホーム画面に追加してください。ホーム画面に追加されたアプリを押すとアプリを開くことが出来ます。

ここではホーム画面に追加した際に表示される名前を指定することが出来ます。 本サイトではデフォルトで「Othello」となっているため、特に変える必要はありません。

作品サムネイル

for Android

手順1

Androidの方向けの説明です。 初めに本サイトをchromeで開いていることを確認してください。chrome以外で開いていると、次の手順に進めないことがあります。 下の写真はchromeで開いているときの画面です。 尚、以下の手順は左上のOTHELLOのロゴが表示されているページであれば、どのページでも以下の手順を踏むと同様にアプリ化することが出来ます。

作品サムネイル

手順2

chromeで開いていることを確認し画面下部、または上部にあるメニューボタンを押してください。メニューボタンは・が縦に3つ並んでいるアイコンの事です。chromeの設定の設定やバージョンによって表示が異なる場合があります。

作品サムネイル

手順3

表示されたメニューの中にある「アプリをインストール」または「ホーム画面に追加」と表示されているメニューを押してください。

wifi環境下以外の場所では「ホーム画面に追加」と表示されることがあります。

作品サムネイル

手順4

以下の画像のようなUIが表れます。このUIの右上にある「インストール」または「追加」を押してホーム画面に追加してください。ホーム画面に追加されたアプリを押すとアプリを開くことが出来ます。

ここではホーム画面に追加した際に表示される名前を指定することが出来ます。 本サイトではデフォルトで「Othello」となっているため、特に変える必要はありません。

作品サムネイル

インストールされたApp

プロフィール写真

インストール後、スマホのホーム画面に画像のようなアプリがインストールされます。このアプリからサイトを開くと何もUIがないすっきりとした画面で遊ぶことが出来るようになります。

プロフィール写真

本サイトをホーム画面に追加することで、アプリのように使うことが出来るようになります。本サイトではPWAを活用しネイティブアプリのような使用感でwebゲームを楽しんでほしいという考えのもと開発を行いました。通常のホーム画面に追加する事とは異なり、ブラウザのアドレスバーのようなUIを非表示にすることが出来ます。このような工夫を施すためにPWAを使用しています。