• コーディング ファクトリーHOME
  • Coding Methodology
  • 制作したページを素早く確認できる!検証用ページ制作のすすめ

コーディングメソドロジー

第119回 制作したページを素早く確認できる!検証用ページ制作のすすめ

Webサイトの規模は1ページ、100ページ、1,000ページと大小様々です。制作するのはもちろん大変ですが、それと同じくらい検証にも時間が掛かります。URLを1ページずつ入力したり、スプレッドシートのセルを一つ一つクリックしてページを探すのは結構手間がかかるものです。そこで今回は検証の効率を上げるために検証用のページの使用例をご紹介をしたいと思います。

1. 検証用ページとは

一言で言えば、サイトに存在する全てのページのリンク集ページです。 1ページに全てのリンクを集約することで探す手間を必要としませ ん。また、Web ページとして制作するのでExcel やスプレッドシート と比べて自由にCSSやJavaScriptでカスタマイズすることできます。 さらに簡単なレスポンシブ対応をすればスマートフォンなどの小さい デバイスからでも使い勝手が良くなります。

2. 検証用ページの構造と活用例

普段使用している検証用ページは、下記のようにiframeと組み合わせ てページ内で簡易的なプレビューもできるようにしています。
ページ数が増えてくると、「このモジュールどこかで制作した記憶があ るんだけど、どのページだっけ・・・。」ということもしばしばあります。 そんなときにも1ページ内で全ページの閲覧ができる機能があるとモ ジュールが探しやすく、とても便利です。

3. 実装のポイント

画面幅の50%ずつ、左にメニューエリア、右にプレビューエリアと なるよう配置します。
メニューにマウスオンするとhrefと同じパスがiframeのsrcに代入さ れるようにjavascriptで設定します。
プレビューエリアはposition:fixed;で固定配置し、iframeに下記の styleを適用させ、50%縮小表示させています。

iframe {
 width:200%; height:200%;
 transform: scale(0.5); transform-origin: left top;
}

これは、画面を50%に分割していることで、iframeの幅が狭くなり、 SPレイアウトになってしまうことを防止しています。widthを倍にし てscaleで半分にすることでブレイクポイントを倍のサイズで解釈さ せ、PCレイアウトが表示されるようにしています。
また、右上のPCボタンをクリックするとiframeの縮小スタイルを解 除し、最大幅をmax-width:375px;と指定して中央に配置しています。