アプリ化する

最後にアプリメニューを設置するかの選択ができますが、今回はアプリメニューを設置せずにまずアプリ化する流れをご説明します。
（アプリメニューの設置については、「【第３章】アプリメニューを設定しよう」をご覧ください。）

これまでの入力内容に間違いがないか確認し、間違いがなければ「WEBアプリ化する」ボタンをクリックしてください。

「WEBアプリ化する」ボタンをクリックすると、自動で「アプリ化用ファイルダウンロード」画面に移動します。

アプリ化用ファイルのダウンロード・設置

「アプリ化用ファイルダウンロード」画面に移動しました。
この画面では、アプリ化に必要なソースコードの埋め込みやファイルの設置を行います。

Step1. ソースコードをサイトのソースコード内に埋め込む

meleeにより自動生成されたソースコードをコピーし、アプリ化したホームページのソースコード内に埋めこんでください。
「copy」ボタンをクリックすると、ソースコード全体がコピーされます。

ソースコード内で埋め込む場所はどこでも構いませんが、head内またはbody閉じタグの直前を推奨します。

ソースコードを埋め込んだ後は、正しく埋め込まれているかの確認もできます。
ソースコードをコピーした箇所の下にある「確認する」のボタンを押し、メッセージの内容を確認してください。

◇「正しく埋め込まれています」
このまま次の「pwaファイルをダウンロード」にお進みください。

◇「正しく埋め込まれていません」
正しくコピーできているか、埋め込む場所でエラーが起きていないかなどに注意し、もう一度やり直してください。
※アクセス制限をかけているなどWEBサイトが公開されていない場合は、「正しく埋め込まれていません」の結果が表示されるためご注意ください。

Step2. pwaファイルをダウンロードして設置

次に、「ファイルをダウンロード」のボタンをクリックしてください。
「pwa.zip」という名前のzipファイルがダウンロードされますので、zipファイルを解凍し、①でソースコードを埋め込んだファイルと同じ階層に設置してください。
 

こちらも同様に、正しく設置が出来ているか確認できます。
ファイルをダウンロードする箇所の下にある「確認する」のボタンを押し、メッセージの内容を確認してください。

◇「正しく設置できています」
これでアプリ化は完了です。もう一度サイトにアクセスし、アプリ化できていることを確認してください。

◇「正しく設置できていません」
間違ったファイルを設置していないか、正しい階層に設置できているかなどに注意し、もう一度やり直してください。
※アクセス制限をかけているなどWEBサイトが公開されていない場合は、「正しく設置できていません」の結果が表示されるためご注意ください。

アプリ化完了

これでサイトのアプリ化は完了です。

アプリ化後にサイトを確認し、以下2点についてご確認ください。
①スマートフォンで見た場合、トップページにモーダルが出現
②パソコンで見た場合、サイトURLの箇所にインストールアイコンが出現

①スマートフォンで見た場合、トップページにモーダルが出現

アプリ化後にスマートフォンでサイトにアクセスすると、トップページにモーダルが出現します。
モーダルにはアプリのインストール方法が記載されており、サイトの訪問者がスムーズにインストールできるようになっています。

下の画像ではiPhoneでアクセスしているためiPhone版のインストール方法が記載されていますが、Androidでアクセスした場合には、Android版のインストール方法に表示が切り替わります。

②パソコンで見た場合、サイトURLの箇所にインストールアイコンが出現

アプリ化後のサイトをパソコンで確認すると、ブラウザの上部にインストールマークが出現します。

サイトのアプリ化の手順については以上です。