• 操作・取扱について

【第2章】ホームページをアプリ化しよう

ホームページをそのままアプリ化できるサービス、melee(メリー)をご存じですか?
今回は、ホームページのアプリ化の方法について、詳しく説明します。

会員登録画面へログイン

管理画面へログインしていない方は、まずログインを行ってください。
ログインには、melee会員登録の際に登録した「ユーザーID」「パスワード」の情報が必要です。

メニューから「WEBアプリ化」を選択

管理画面左側のメニュー欄から「WEBアプリ化」をクリックし、プルダウンのメニューから「初期設定」を選択してください。

▲「WEBアプリ化」→「初期設定」をクリック

アプリ化設定の画面に移動します。

▲アプリ化設定の画面

アプリの設定

ここから、アプリに関する設定を行っていきます。

Step1. アプリ化したいホームページのURLを入力する

アプリ化したときに最初に表示されるページのURLを入力してください。
URLのリンク先を確認する」をクリックすると別ウィンドウでリンク先に移動しますので、入力したURLが正しいことをご確認ください。

▲このようにURLを入力してください。

Step2. ホーム画面アイコンを設定する

アプリ化した際、スマートフォンなどのデバイスのホーム画面に設置されるアイコンを設定します。
※JPGまたはPNGファイルを使用してください。

スライドバーで画像の大きさを調整できます。

Step3. アプリ名を設定する

アプリ化した際のアプリ名を入力してください。

アプリ化する

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

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

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

▲「アプリ化ファイルダウンロード」画面

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

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

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

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

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

 

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

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

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

▲ソースコードをコピーして埋め込んでください

▲正しく埋め込みが出来ているか確認できます

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

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

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

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

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

▲ファイルをダウンロードしてください

▲正しく設置ができているか確認できます

アプリ化完了

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

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

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

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

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

▲アプリ化前の通常のサイト(iphoneでアクセス)

▲アプリ化後のサイト(iphoneでアクセス)

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

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

▲アプリ化前の通常のサイト

▲アプリ化後のサイト

 

 

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