サイトに何かを追加するときのテスト手順

サイトを０から作り上げるということは実際に仕事をしていくうえではあまりないかもしれません。

それよりも現在あるサイトに何か組み込んでほしいという仕事のほうが多いかと思います。

ちょっと追加するだけでしょと思うかもしれませんが、これが意外と難しい。

今回はサイトの改変に少し携わらせていただいたのでそのとき知った役に立つことをメモします

まず、何か新たな部品をサイトに追加するとします。

私の場合、スマホサイトのメニューバーを作って追加しました。その際、その際とのソースをGitなどから採ってきてローカルで埋め込むのではなくすでに公開されているサイトの表示されているトップページをコピーして使いました。

サイトに行って右クリックするとページのソースを見ることができます。今回はそれを使ってローカルで作った部品が動くか試しました

新たに何かを追加したいサイトを右クリックして検証を押しソースをすべてコピーします

サイトのソースをコピーしたら適当なファイルを.html形式にして保存します

特に何もしていない状態だとこんな感じです。cssが効かず画像も見えません

これは写真のようにパスが//で始まっています。相対パスになっているのでcssや画像の読み込みができません

公開されているサイトで右クリックし、ページのソースを表示するで表示しそのリンクをクリックしたさきのものをローカルのところに書くようになります。

すでにhttp形式になっているものもあるので注意が必要です。

目視での確認は必要になりますが、置き換えるものが多い場合もあるのでエディタの置換機能を使うと楽です。

Sublime TextをWindowsで使う場合、コントロールとHキーを押すと下記のように置き換え機能が出てきます

青い下線はひとつず置き換えるもので、赤いほうは一気に置き換えます。パスを書き換える必要があるものだけ選択されているか確認し、適宜使い分けましょう