- 操作・取扱について
ホームページをそのままアプリ化できるサービス、melee（メリー）をご存じですか？
今回は、ホームページのアプリ化の方法について、詳しく説明します。
管理画面へログインしていない方は、まずログインを行ってください。
ログインには、melee会員登録の際に登録した「ユーザーID」「パスワード」の情報が必要です。
管理画面左側のメニュー欄から「WEBアプリ化」をクリックし、プルダウンのメニューから「初期設定」を選択してください。
▲「WEBアプリ化」→「初期設定」をクリック
アプリ化設定の画面に移動します。
▲アプリ化設定の画面
ここから、アプリに関する設定を行っていきます。
アプリ化したときに最初に表示されるページのURLを入力してください。
「URLのリンク先を確認する」をクリックすると別ウィンドウでリンク先に移動しますので、入力したURLが正しいことをご確認ください。
▲このようにURLを入力してください。
アプリ化した際、スマートフォンなどのデバイスのホーム画面に設置されるアイコンを設定します。
※JPGまたはPNGファイルを使用してください。
スライドバーで画像の大きさを調整できます。
アプリ化した際のアプリ名を入力してください。
最後にアプリメニューを設置するかの選択ができますが、今回はアプリメニューを設置せずにまずアプリ化する流れをご説明します。
（アプリメニューの設置については、「【第３章】アプリメニューを設定しよう」をご覧ください。）
これまでの入力内容に間違いがないか確認し、間違いがなければ「WEBアプリ化する」ボタンをクリックしてください。
「WEBアプリ化する」ボタンをクリックすると、自動で「アプリ化用ファイルダウンロード」画面に移動します。
▲「アプリ化ファイルダウンロード」画面
「アプリ化用ファイルダウンロード」画面に移動しました。
この画面では、アプリ化に必要なソースコードの埋め込みやファイルの設置を行います。
meleeにより自動生成されたソースコードをコピーし、アプリ化したホームページのソースコード内に埋めこんでください。
「copy」ボタンをクリックすると、ソースコード全体がコピーされます。
ソースコード内で埋め込む場所はどこでも構いませんが、head内またはbody閉じタグの直前を推奨します。
ソースコードを埋め込んだ後は、正しく埋め込まれているかの確認もできます。
ソースコードをコピーした箇所の下にある「確認する」のボタンを押し、メッセージの内容を確認してください。
◇「正しく埋め込まれています」
このまま次の「pwaファイルをダウンロード」にお進みください。
◇「正しく埋め込まれていません」
正しくコピーできているか、埋め込む場所でエラーが起きていないかなどに注意し、もう一度やり直してください。
※アクセス制限をかけているなどWEBサイトが公開されていない場合は、「正しく埋め込まれていません」の結果が表示されるためご注意ください。
▲ソースコードをコピーして埋め込んでください
▲正しく埋め込みが出来ているか確認できます
次に、「ファイルをダウンロード」のボタンをクリックしてください。
「pwa.zip」という名前のzipファイルがダウンロードされますので、zipファイルを解凍し、①でソースコードを埋め込んだファイルと同じ階層に設置してください。
こちらも同様に、正しく設置が出来ているか確認できます。
ファイルをダウンロードする箇所の下にある「確認する」のボタンを押し、メッセージの内容を確認してください。
◇「正しく設置できています」
これでアプリ化は完了です。もう一度サイトにアクセスし、アプリ化できていることを確認してください。
◇「正しく設置できていません」
間違ったファイルを設置していないか、正しい階層に設置できているかなどに注意し、もう一度やり直してください。
※アクセス制限をかけているなどWEBサイトが公開されていない場合は、「正しく設置できていません」の結果が表示されるためご注意ください。
▲ファイルをダウンロードしてください
▲正しく設置ができているか確認できます
これでサイトのアプリ化は完了です。
アプリ化後にサイトを確認し、以下2点についてご確認ください。
①スマートフォンで見た場合、トップページにモーダルが出現
②パソコンで見た場合、サイトURLの箇所にインストールアイコンが出現
アプリ化後にスマートフォンでサイトにアクセスすると、トップページにモーダルが出現します。
モーダルにはアプリのインストール方法が記載されており、サイトの訪問者がスムーズにインストールできるようになっています。
下の画像ではiPhoneでアクセスしているためiPhone版のインストール方法が記載されていますが、Androidでアクセスした場合には、Android版のインストール方法に表示が切り替わります。
▲アプリ化前の通常のサイト（iphoneでアクセス）
▲アプリ化後のサイト（iphoneでアクセス）
アプリ化後のサイトをパソコンで確認すると、ブラウザの上部にインストールマークが出現します。
▲アプリ化前の通常のサイト
▲アプリ化後のサイト
サイトのアプリ化の手順については以上です。