先日担当した運用案件で、本番サイトの一部表示が崩れてしまうミスが生じてしまったので、再発防止のために今回ブログにまとめることにしました。
運用案件は既存サイトにコードを継ぎ足していくので、ミスが発生するとクライアントに損失を与えてしまいます。
Web制作に携わっている人は、僕と同じようなミスをしないためにも、今回の記事を参考にしてもらえたら嬉しいです。
運用案件とは？
運用案件とは1からWebサイトを作る新規案件と違い、既存サイトに対して追加や修正を行う案件のことを言います。
例えば、運用案件では以下のようなことを行います。
・既存サイトにページを追加する
・既存サイトの一部のレイアウトを修正する
・既存サイトの一部にアニメーションを追加する
・画像を張り替える
・文言修正
・CMSからコンテンツを増やす
あとは毎月決まった日時にコンテンツを更新する作業も担当します。
単発で頼まれる案件もあれば、長期的に継続して頼まれる案件もあります。
コーダーが運用案件でミスしないために出来ること
運用案件でミスしないために出来ることをまとめました。
修正したページにだけスタイルが反映されるように限定してスタイルを当てること
運用案件は既存サイトに対してスタイルを継ぎ足していくので、意識してスタイルを書かないと、既存のスタイルとバッティングして、既存サイトの表示が崩れてしまう恐れがあります。
そうならないために、スタイルを修正する際は、修正した箇所にだけスタイルが効くようにスコープを限定しましょう。
例えば、以下のようにスタイルを当てると、全てのページと要素に対してbox-sizing: border-box;のスタイルが当たってしまい、他のページに影響が出るかもしれません。
* {
box-sizing: border-box;
}
修正したページ以外に影響してほしくない場合は、ページ固有クラスに対して対象のスタイルを当てると良いでしょう。
例えばblogクラスの場合は以下のようにスタイルを限定します。
.blog * {
box-sizing: border-box;
}
このように書くことで、ページ固有のblogクラス内にだけスタイルが当たるようになります。
CSSはグローバルスコープなので、運用案件の時は修正するページ内にだけスタイルが当たるようにスコープを限定して書くことで、ミスを防ぐことができます。
本番サイトに反映する前に、必ずテストサイトで表示確認すること
本番サイトに反映する前に、必ずテストサイトで表示確認するようにしましょう。
テストサイトに今回修正したコードを反映することで、既存サイトと今回書いたコードがバッティングしないか事前に確認することができます。
テストサイトでちゃんと表示が確認できてから本番サイトに反映することで、本番サイトで表示が崩れるといったミスを防ぐことができます。
他に確認してくれる人がいたとしても、念の為自分の目で実際に確認することをお勧めします。
1人がOKを出しても、複数人で見たら間違っていることも十分あり得るので、最後まで気を抜かずにチェックしておきたいです。
よく使う汎用的なクラス名にスタイルを当てない
よく使う汎用的なクラス名にスタイルを当てないようにしましょう。
例えば、インナー幅を指定するクラスとしてinnerや、コンテンツの幅を指定するクラスとしてwrapperなどがよく使われています。
よく使うクラスは複数ページで使われていることが多いので、もしこのままスタイルを当ててしまうと他のページにも影響が出てしまう可能性があります。
もしinnerのような汎用的なクラスに対してスタイルを当てないといけない場合は、追加で指定したクラスに対してスタイルを当てるようにすると、他のページに影響が出なくなります。
.inner.add {
// 対象のスタイルを書く
}
このように書くと、innerにaddクラスが付与した時だけスタイルを当てることが出来ます。
運用案件でCSSを書く際は、修正したページにだけスタイルが限定されるように書くことが鉄則です。
口頭は避けてテキスト化して残すようにすること
これはどんな仕事にも通じますが、共有事項は口頭だけでなくテキスト化して残すようにしましょう。
MTG話した内容をテキストとして残してメンバーに共有することで、認識のずれを無くしたり、言った言ってない問題を解消することも出来ます。
あとSlackだと検索して後で調べることも出来ます。
口頭だとどうしても他の案件と重なって忘れてしまう可能性があるので、出来るだけテキストとして残すように意識すると良いでしょう。
既存サイトの全体の仕様を理解すること
運用案件の作業を開始する前に、既存サイトの全体の仕様を理解するようにすると良いでしょう。
どんなクラスが共通で使われているのか、どんなパーツが共通化されているのか、を知ることで、クラスやスタイルのバッティングを未然に防ぐことが出来ます。
修正・追加したページ以外の表示確認も行うこと
修正・追加したページ以外の表示確認もするようにしましょう。
たとえ1ページしか触っていないとしても、今回書いたスタイルが他のページにも反映してしまうかもしれないからです。
こちらも確認することで、事前にミスを防ぐことができるのでお勧めです。
作業指示書を作成すること
作業指示書を作成することで、やるべきタスクが整理されるので、タスクの抜け漏れを防ぐことが出来ます。
こちらはディレクターの方がやる仕事だと思われますが、余裕があればコーダー側から作成したものを共有しても良いかもしれません。
もし忙しい場合は、Googleスプレッドシートやメモに箇条書きでやるべきタスクをリスト化するだけでも、ミスを防ぐ確率を減らすことが出来ます。
どこまでのブラウザに対応すれば良いのか確認すること
どこまでのブラウザに対応すれば良いのか事前に確認できると良いでしょう。
もしかしたら対応ブラウザを明記してないあまり、どこまでのブラウザに対応しないといけないのかローンチの直前に揉める可能性があります。
このような事態に遭遇したことはないですが、念の為案件ごとに対応ブラウザを確認しておくと良いでしょう。
まとめ
以上が、「コーダーが運用案件でミスをしないようにするために出来ること」でした。
運用案件に取り組む上で一番大事なことは、今回修正した箇所が他のページに影響が出ないようにすることです。
今後同じミスをしないように、何度も今回の記事を読んでいきたいです。
