アップロードが完了しても、公開作業はまだ終わりではありません。ローカルではなく公開URLを開き、実際にサーバーから受け取った状態を確認します。
HTTPSのURLを直接入力する
公開後はローカル画面ではなく、実際のHTTPS URLを起点に各項目を確認します。
ブラウザのアドレス欄へ公開URLを入力します。別のページから移動するだけでなく、公開URLを直接開いてindex.htmlが表示されることを確認します。
HTTPステータスから確認する
ページが表示されていても、CSSや画像の一部だけ404になっている場合があります。Networkで各リクエストのStatusを確認し、200以外のものを探します。
次の図では、「HTTPステータスから確認する」の仕組みや関係を確認できます。
- 200：正常に取得できた
- 301・302：別のURLへ転送された
- 403：アクセスが許可されていない
- 404：指定した場所にファイルがない
- 500：サーバー側で処理に失敗した
ステータスだけでなく、Request URLが意図した公開先になっているか確認します。古いドメインやローカルのパスが残っていればHTML、CSS、JavaScriptを修正します。
Networkで取得結果を確認する
DevToolsのNetworkを開いて再読み込みし、HTML、CSS、JavaScript、画像が成功しているか確認します。404がある場合は、ファイル名の大文字・小文字、アップロード先、HTML内のパスを順番に見ます。
次の図では、「Networkで取得結果を確認する」で行う操作の流れを示しています。
公開環境の大文字・小文字を確認する
ローカル環境によってはPhoto.jpgとphoto.jpgの違いに気付かない場合があります。サーバー上では別ファイルとして扱われ、画像だけ404になることがあります。
次の図では、「公開環境の大文字・小文字を確認する」で行う操作の流れを示しています。
Networkに表示されたファイル名と、サーバー上の実ファイル名を拡張子まで比較します。HTML側だけでなくCSSの背景画像も確認してください。
HTTPSとMixed Contentを確認する
アドレス欄がHTTPSでも、ページ内でHTTPの画像やJavaScriptを読み込むと安全でない通信が混在します。ConsoleとNetworkでMixed Contentの警告を確認し、対象URLをHTTPSへ変更します。
次の図では、「HTTPSとMixed Contentを確認する」の仕組みや関係を確認できます。
キャッシュの影響を除いて確認する
公開直後に古いCSSが見える場合は、シークレットウィンドウまたはDevToolsを開いた状態の強制再読み込みで確認します。別の端末や回線でも同じかを見ると、端末のキャッシュか公開側の問題かを分けられます。
リンクと操作を確認する
- ページ内リンクが目的の位置へ移動する
- 外部リンクと問い合わせ先が正しい
- ボタンとメニューがキーボードでも動く
- 別の端末またはシークレットウィンドウでも表示できる
- ページタイトルとファビコンが意図した内容になっている
確認結果をチェック表へ残す
- 公開URLとHTTPS
- トップから最後のセクションまでの表示
- すべてのリンクとボタン
- スマートフォン・タブレット・PC幅
- キーボード操作とフォーカス表示
- Consoleのエラー
- Networkの404と読み込み先
- 別端末またはシークレットウィンドウ
修正した項目は、修正後に同じ条件でもう一度確認します。確認済みの条件を記録すると、更新時にも同じ品質で検証できます。