ウェブサイトの公開

アパレルショップの通販サイトを作ったと考えてみてください。画面もすべて組み上げ、コンテンツスタジオに登録しておいた商品もきちんと読み込まれます。ところが、このサイトはまだ自分のパソコンの中にしかありません。お客さんがアドレスを入力して訪れて見られるようにするには、サイトをインターネット上に置いておく場所が必要です。このように作ったウェブサイトをインターネット上に置き、誰でもアドレスから訪れられるようにしてくれるのが Web Hosting です。

テナントを借りて店を開くことにたとえられます。自分が作り込んだ店(ウェブサイト)を持ち込んでその場所に据え、店の看板に使うアドレスを決めます。すると、そのアドレスからお客さんが訪れてきます。Web Hosting は、その「場所」と「アドレス」を一か所で提供してくれます。このページでは、Web Hosting とは何か、作っておいたサイトをどう公開するか、そして後でサイトを直したときにどう再公開するかを見ていきます。

公開できるサイトの形

Web Hosting に公開するのは、あらかじめ作っておいた画面ファイル一式です。お客さんがアドレスから訪れると、作っておいたその画面がそのまま表示されます。お客さんが訪れるたびにその場で画面を新しく計算して作り出す別のプログラムは置きません。そのため、公開する前に画面をすべて完成させてファイルにしておく必要があります。アパレルショップでいえば、お客さんが来るたびに陳列をやり直すのではなく、陳列をすべて終えた店をそっくりそのまま据え付けるようなものです。

公開するときは、その画面ファイル一式をひとつのまとめファイルにして公開します。複数の写真をひとつのフォルダに入れて圧縮するように、サイトを構成するファイルをひとつにまとめて公開すると考えてください。このまとめには 2 つのルールがあります。

• まとめの中のファイルは一度に最大 100 個までです。 サイトを構成する画面、画像、フォントといったファイルをすべて合わせて 100 個を超えると公開できません。ファイル数が多くなりそうなら、同じ画像は一度だけ置いて複数の場所で共用するか、フォントのような重いファイルはインターネット上にすでに公開されているものを取り込んで使うなどして、まとめに入れるファイル数を減らしてください。
• まとめを展開したときに、いちばん上に index.html がなければなりません。 index.html は、お客さんがアドレスから最初に訪れたときに表示する最初の画面ファイルです。このファイルがまとめのいちばん上ではなく下位フォルダの中に入っていると公開できません。サイトの最初の画面ファイルをまとめのいちばん外側に置いてください。

サイトがコンテンツスタジオに登録しておいた商品のようなコンテンツを読み込んで表示するには、そのコンテンツを読み取ってこられる鍵がサイトの中に入っている必要があります。この鍵(Delivery Access Token)を発行する方法は トークン で扱います。サイトを公開する前に、この鍵をサイトに入れておいてください。

アドレス(サブドメイン)を決める

サイトを公開するときに合わせて決めるのが、お客さんが訪れるアドレスです。アドレスの先頭部分を自分で決めると、その先頭部分が入ったインターネットアドレスがひとつサイトに付きます。たとえばアパレルショップの名前をとって myclothes と決めると、お客さんはその名前が入ったアドレスからサイトに訪れます。

アドレスの先頭部分にはいくつかのルールがあります。

• 英小文字と数字、そして間をつなぐハイフン(-)だけが使えます。 空白やそのほかの文字は使えません。
• 長さは 3 文字以上 32 文字以下です。
• すでに他の人が使っているアドレスは決められません。 アドレスはひとつの場所にひとつだけなので、先に取得したほうが所有者です。そのため、サイトを公開する画面で 利用可能か確認 を押して、決めようとしているアドレスが空いているか確認する手順があります(下記「サイトを公開する」を参照)。空いていなければ、別のアドレスを決める必要があります。

サイトを公開する

アパレルショップの通販サイトを Web Hosting に公開し、myclothes というアドレスからお客さんが訪れられるようにしてみます。公開する画面ファイル一式は、index.html をいちばん上に置いたひとつのまとめとしてあらかじめ作っておいたものとします。

1. アパレルショップの Space の設定で Web Hosting 画面を開いてください。
2. 右上の 作成 ボタンを押してください。
3. 名前の欄に アパレルショップ通販 を入力してください。この名前は、後でどのサイトかを見分けるためのものです。
4. Subdomain の欄に myclothes を入力してください。
5. 利用可能か確認 を押して、そのアドレスが使えるか確認してください。「このサブドメインは利用できます。」と表示されれば大丈夫です。すでに使われている場合は、別のアドレスを決めてください。
6. デプロイファイル に、あらかじめ作っておいた画面ファイルのまとめを公開してください。まとめのいちばん上に index.html があれば「ルートに index.html が見つかりました。アップロード準備完了です。」と表示されます。
7. 作成 ボタンを押して公開してください。

公開したまとめは、その場所に据え付ける準備を経て公開されます。準備が終わると、サイトに入れるアドレス(myclothes が入った .weegloo.app のアドレス)が画面に表示されます。そのアドレスを押して、サイトがきちんと開くか確認してください。アパレルショップの商品が画面に表示されれば成功です。

サイトを直してから再公開する

サイトは一度公開して終わりではありません。アパレルショップなら、新シーズンの商品を加えたり、画面のデザインを変えたりすることが出てきます。このようにサイトを直したときは、直した画面ファイル一式を改めてひとつのまとめにして、同じ Web Hosting に新しく公開します。アドレスはそのままで、中身だけを差し替えるようなものです。新しく公開した内容に切り替わると、お客さんは同じアドレスから訪れて、直されたサイトを見ることになります。

再公開するには、その Web Hosting 画面を開いて ファイル に直したまとめを新しく公開し、保存 を押します。再公開するときもまとめのルールは最初と同じです。ファイルは 100 個以下でなければならず、いちばん上に index.html がなければなりません。

自分のドメインに切り替える

ここまで使ってきたアドレスは、myclothes.weegloo.app のように WEEGLOO が提供する無料アドレスです。アパレルショップの名前で別に取得しておいた自分のドメイン(例: myclothes.shop.com)があれば、お客さんがそのアドレスから訪れるように切り替えられます。すでに公開してあるサイトはそのままで、訪れてくるアドレスだけを自分のドメインにつなぐのです。

この作業は、公開が完了した Web Hosting の詳細画面で行います。

1. Custom Domain の欄に、お客さんに見せる自分のドメイン(例: myclothes.shop.com)を入力してください。
2. 入力すると ドメインを接続 ボタンが押せるようになります。押して接続を始めてください。
3. 画面に、ドメイン業者に登録する DNS レコード 3 つ が表示されます。各レコードは種類と名前(Name)、値(Value)からなります。
   • トラフィックを転送(CNAME): お客さんを自分のドメインから実際のサイトへ送る経路です。
   • ドメイン所有権(TXT): そのドメインが本当に自分のものかを確認する値です。
   • SSL 証明書(TXT): 安全な接続(アドレスバーに鍵マークが付く https)を発行してもらう値です。
4. この 3 行を、ドメインを購入した場所(ドメイン管理業者、例: お名前.com・Cloudflare)の設定に、画面に出たとおりそのまま移して登録してください。種類、名前、値を同じように入れれば大丈夫です。
5. 登録を終えたら 更新 を押して、検証の状態を確認してください。変えた内容がインターネットに広まるには時間がかかることがあり(最大 48 時間)、すぐに確認されない場合は、しばらくしてからもう一度押します。
6. 3 つのレコードがすべて確認されると、自分のドメインがサイトに接続されます。これでお客さんは myclothes.shop.com から訪れて、同じサイトを見ることになります。

自分のドメインを接続するには、そのドメインをまず持っている必要があります。ドメインは WEEGLOO ではなく、ドメイン管理業者から別に購入します。無料アドレス(.weegloo.app)は、ドメインを接続した後もそのまま併用できます。接続した後は 変更 でドメインを切り替えたり、削除 で接続を解除したりできます。

次にすること

• トークン: 公開したサイトがコンテンツスタジオの商品を読み込んで表示するには Delivery Access Token が必要です。サイトに入れる鍵を発行します。
• API リファレンス: プログラムから Web Hosting を直接扱ったり、ファイルのまとめをアップロードしたりするときに必要な、リクエスト形式のような技術仕様を扱います。