管理画面なしで動作確認する方法 – NPC
「管理画面を貸してもらえない案件」の動作確認、どうしてる？
Web制作フリーランスをやっていると、ときどきこんな案件に当たる。「修正したHTMLを納品してください。サイト本体は依頼者側で貼り付けます」。サイト構築サービス（埋め込み型CMS）にHTMLウィジェットで埋め込むタイプの案件で、ココナラやクラウドソーシング経由だとわりとよくあるパターンだと思う。
このとき地味に困るのが「動作確認」だ。自分の手元（ローカル）でHTMLを開けばボタンは動くしレイアウトも見える。でも本番のサイトに貼ったら、親要素のCSSが効いて位置がズレたり、JavaScriptが想定外の動きをしたりする。「ローカルで動いた」と「本番で動く」は別物、というやつだ。
だからといって、毎回依頼者の方に「貼り付けて見せてください」「直したのでまた貼り付けてください」を繰り返すと、お互いに消耗するし、信頼コストもじわじわ削れていく。最近の埋め込み型HTML納品案件で、自分はこのフローを確立した。今回はその話。
結論：SiteSuckerで本番を丸ごとコピーして、自分のサーバーにミラーを作る
やっていることはシンプルで、本番サイトをまるっとコピーして自分が触れるサーバーに置き、そこで修正版の動作確認をする、というだけ。流れはこんな感じ。
このフローのいいところは、依頼者の方の手間をゼロに保ったまま、本番とほぼ同じ環境で何回でも試行錯誤できる点。実際の案件では、CSS/JS含めて約5.5MB・30ファイルくらいのページ一式を取得して、自分のサイト（n-pc.jp）配下のサブパスにアップしてテストしている。
SiteSuckerでサイトを取得する
SiteSuckerは、指定したURLのページとリンク先のリソースをまとめてダウンロードしてくれるMacアプリ。HTMLだけでなく外部CSS・JS・画像まで一括取得して、相対パスに自動変換してくれるのが地味にありがたい。これを自分で書こうとすると意外に面倒なところなので、ツールに任せている。
取得すると、こんな感じのファイル群が手元に降ってくる。
- 取得元ドメインフォルダ
- 該当ページ.html
- css/（テーマCSS一式）
- js/（テーマJS一式）
- img/（画像）
ちなみにSiteSuckerは、ファイル名のクエリ部分（?12345...みたいなやつ）が、Macのファイルシステムの都合で全角に近い特殊文字に置換される。これは見た目はギョッとするけど、Linux系のサーバーにFTPアップしても普通に動くので気にしなくていい。最初これで「壊れたかも」と焦ったので一応書いておく。
自家サーバーにアップして「検索除外」を入れる
取得したファイルを、自分の管理しているサーバー（自分の場合はn-pc.jp）の/test-{案件名}/みたいなサブパスにアップする。ここで絶対に忘れちゃいけないのが、検索エンジンに拾われない設定だ。
本番サイトとそっくりのコピーが公開状態で出回ると、SEO的にも法的にも気持ち悪い。なので以下の2点は必ずセットで入れる。
Header set X-Robots-Tag "noindex, nofollow, nosnippet, noarchive"を1行入れる。ディレクトリ全体に効くので楽。<meta name="robots" content="noindex,nofollow">。.htaccessが効かない環境への保険。「公開サーバーに置く」ことに対する後ろめたさは、この検索除外がしっかり入っていればだいぶ薄れる。あくまで検証用、検索結果には絶対出さない、という前提だ。
修正版を反映して、ブラウザ自動操作＋実機で検証する
ミラーが用意できたら、ここからが本番。納品予定の修正版HTMLを、該当ページのスクリプト・スタイル部分にだけ差し込んで反映する。Pythonでサクッと置換スクリプトを書くのが安全で、手作業でやると別の場所まで触ってしまいがちなのでおすすめしない。
動作確認は二段構えにしている。
- クリック・スクロール・入力を自動で実行
- 計算結果やDOMの状態を機械的にチェック
- 繰り返し検証が高速
- iPhoneやAndroid実機で手で触る
- 仮想キーボード・慣性スクロールの挙動
- 本番URLと同じドメイン環境
埋め込み型CMSの案件は、特にスマホでの追従ボタン（sticky）や仮想キーボード起動時の挙動でハマることが多い。PC上でのチェックだけで「OKです」と返してしまうと、たいてい数時間後に「スマホで開いたら違うんですけど」と返ってきて手戻りになる。実機テストは省かないほうがいい。
このフローでよかったこと、注意点
このやり方に切り替えてから、修正→確認→修正の往復が圧倒的に減った。以前は依頼者の方に何度も貼り直しをお願いして、そのたびに連絡を待って…という構造だったのが、こちらで完結するようになった。依頼者の貼り替えは原則1回で済む。
一方で、注意点もある。
- 「単体HTMLをローカルのブラウザで開いて確認」だけはやらない。親要素のCSSや祖先のリセットが効かないので、本番と見え方が全然違うことがある。あくまで自家サーバーミラー上で確認する。
- 本番サイトの構造が変わったら、ミラーは作り直しが必要。長期保守案件で「半年後にまた修正」みたいなときは、最新の本番をもう一度取得し直す。
- アップ先のサブパスは、案件ごとに分けて運用が終わったら削除する。ミラーが溜まり続けるとサーバー側で混乱するし、検索除外の管理も面倒になる。
依頼者の管理画面アクセスを借りなくても、本番と同等の環境を自分の手元に再現できる、というのは「持っておくと一生使えるスキル」の一つだと思う。埋め込み型CMS案件に限らず、コードが効くかどうかを本気で確かめたいときに、何度も助けられている。
同じような案件で困っている人がいたら、SiteSuckerと自分のサーバーの組み合わせ、ぜひ試してみてほしい。
※この記事はNPCの中の人の実務経験をもとに書いています。