2017年09月

6

水曜日の投稿

垳田 悟
投稿者:垳田 悟
(ディレクター / コーダー)

2017年09月06日

スピーディかつ正確に!
サイト運用におけるコーディングの秘訣

Webマスターがゆく

垳田 悟
投稿者:垳田 悟(ディレクター / コーダー)

こんにちは。クリエイティブ部の垳田です。

突然ですが、 運用案件におけるコーディングって、怖いんです...。 一歩間違えると公開後のミスにつながってしまいます。

実は、ひと言で「コーディング」と言っても、新規サイト構築と、既存サイト更新(運用)では、かなり勝手が違ってきます。ゼロから構築する新規サイトと違って、既存サイトの更新では、各サイト毎に仕様が異なっている(理解するのが大変)、すぐに公開されてしまう(スピードと正確さが必要)ということがあります。

以前の記事では、運用案件で何をしているかについて取り上げさせていただきましたが、今回は、その運用案件の中でコーディング部分にフォーカスして、これまで既存サイトの運用をメインにやってきて実感した、運用ならではのコーディング(=運用コーディング)のコツをお伝えしたいと思います。


運用コーディングとは

運用コーディングとして主にやっていることは、以下のようなものがあります。

  • コンテンツの追加・差し替え(テキスト差し替え、バナー差し替え)
  • LP(ランディングページ)の制作
  • CMS登録操作

など

新規サイト構築と違って、公開されているものに対して、更新をしていくというのが、運用コーディングと新規サイトコーディングとの大きな違いと言えます。


運用コーディング時に気をつけたいこと

例えば、某サイトのLP制作依頼があったとします。 新規サイト構築と違って、1ページだけだし、簡単だろ!って、傍からみたら、思われますよね。あなどるなかれ...。

確かに、単純にデザイン通りかたちにコーディングするという部分でみれば、容易かもしれませんが、運用ならではの注意点が多々あるのです。依頼が来てから公開するまでの過程を紹介しながら、運用コーディングで気をつけるポイントについてお伝えします。 ※例として、サイトのパーツ集などが特に無いサイトを挙げさせていただきます。

1. サイト全体の仕様及び修正対象ページの仕様を確認する

まず、依頼されたサイト全体の仕様を確認します。 PCサイトなのか、SP(スマートフォン)サイトなのか、レスポンシブサイトなのか 動きがある部分のあるのか。Javascript 等の実装は発生するか ヘッダー、フッターの作成は不用なのか コンテンツ部分の作成のみなのか、これらの仕様について確認します。

ポイント!
サイト自体の仕様を事前に理解するという部分では、新規サイト構築とあまり変わらないと思います。しかし、コンテンツ部分の作成のみなのかどうかを確認するのは、運用コーディングならでは。 また、依頼されたサイトの全体の仕様を確認し、対象ページの固有の CSS はないかもチェックしたり、もし動的な部分がある場合は、jquery のバージョンを確認しておくのがおススメです。サイトによって、jquery のバージョンが古いこともあり、Js のプラグインが動作しないこともあります。

2. サイト全体の構成を把握する

仕様が把握できたら、実際に画像をスライスしてコーディングを進めていきますが、その前に、ディレクトリ構成を確認しましょう。

ポイント!
新規ディレクトリでの作成になるのか、既存ディレクトリがあるのかもポイントです。特に、CSSへの記述には注意しましょう。
新規ディレクトリでの作成と既存ディレクトリでの作成時の場合は、以下のようにHTML側のコンテンツ部分の wrapper要素にID名を付け、CSSでは、そのID名を継承させて書いていきます。
例)

【HTML】

          <div id="dammy"></div>

【CSS】

#dammy {}

もしくは、既にID要素が付いてしまっている場合は、クラス名を付ける形式でも良いと思います。クラス名の付け方としては、更新日の日付を付けても良いと思います。絶対に、既存のCSSにバッディングしないクラス名を付けることが絶対です。
例)

【HTML】

          <div id="dammy"class="dammy171231"></div>

【CSS】

          #dammy {}
          #dammy .dammy171231 {}
          

【HTML】

          <div id="dammy"class="contents dammy171231"></div>

【CSS】

          #dammy .contents {}
          #dammy .contents.dammy171231 {}
          

3. 本番公開する

本番サイトへの公開と一口で言っても、その公開方法はいくつかあると思います。 CMSでの公開、サーバーヘFTPアップしての公開、納品データを作成してクライアント側で公開作業を行う、など。このなかで特に運用案件でよくあるのがCMS登録による公開です。

CMSは、操作方法を覚えれば、誰でも簡単にページを更新することができ、大変便利なサイト管理ですが、企業の大規模サイトとなると、非常に複雑な CMS設計になっていることも多く、単純にページを更新するといっても、その方法をきちんと理解しないてないと、思わぬ公開ミスに繋がることがあります。

ポイント!
CMSでアップする際、作成したページがどのタイミングで公開されるのかは特に注意しましょう。
現在公開されているサイトに直接反映するのあれば、特に問題ありませんが、未来の日付(1週間後の y月XX日 0:00)でといった場合、同じCSSを使用している場合、同じID名、クラス名を使用している場合だと、現在公開されているサイトが崩れてしまいます。その為、上記で紹介したクラス名の付け方をしないといけなくなってしまいます。
また、公開されているサイトに反映する時も、必ずソース比較ツールを使用するようにしています。自身が触っていない箇所のソースが変わっていたら、先祖返りしてしまいますので要注意です。
※主な比較ツールの使い方は、以前の記事を参考にしてください。
difff」「winmerge

このように、運用ならでは制作時のチェックポイントというものがあります。 様々なサイトがあり、それぞれの運用方法もありますが、このチェックポイントを最低限把握しておくと、ミスを起こさないずにサイトの運用をすることができると思います。


注意すべき「コーダーへの指示の出し方」

通常、各案件のディレクターは、コーディングの細かな仕様や組み方までは把握していないことが多いため、コーディングに関することはコーダーが把握しますが、最近、ディレクターとコーダーのつなぎ役(制作ディレクション)として、案件に携わることも増えてきました。 制作ディレクションでは、コーディングに関するディレクターの指示を伝え、完成したものの品質も保つことが必要ですが、その際に難しいのが「コーダーへの指示の出し方」です。

以前、この「伝え方」の不注意で失敗してしまったことがあります。

既存サイトのコンテンツ部分改修のコーディング依頼があり、ディレクターから「この対象ページの1ページのレイアウトを改修して」との指示があり、私は、対象ページと改修内容だけをコーダーに伝えて、CMS登録ののち、納品してもらいました。

無事に納品して一安心と思っていると、数時間後、ディレクターを通じて、クライアントから「依頼してない他のページが崩れている」とのクレームの連絡がきたのです。

すぐさま調査したところ、先ほど改修したページで使用した CSSが他のページでも使用されており、しかも同じクラス名部分を改修してしまっていたことが原因でした。(すぐにバックアップより以前の状態にCSSを戻し、クラス名を新たに付けて対応しました。)幸いにも、まだ公開されていないテスト環境でのミスでしたので、大事には至りませんでしたが、本番サイトでのミスでしたら大変なことでした。

これは、私の指示ミスが大きな要因だったと思います。

  • 対応依頼されたページのディレクトリに、他のページも存在していることを把握してなかったこと
  • 対象ページだけの既存CSSだと思いこんで、CSSを触って問題ないと指示してしまったこと

そこで、今後の対策として、以下を徹底することにしました。

  • 既存CSSのレイアウトを修正した場合は、既存のクラスに更新をするのではなく、新たにクラス名を付与しレイアウト修正を行うこと
  • 対象ディレクトリに他のHTMLが存在していないか、また、そのCSSが他のページに使われていないかチェックすること
    ※CSSのクラス名を新たに付け加えることで、この項目は注意しないで済みますが、
    初めて触るサイトの場合は、必ず徹底すると良いでしょう。
    エディタを使用しサイト管理すれば、検索機能で一括で調べることができます。

もし、他の人がやっていてその点に気づいていたら起きなかったミスかもしれません。 ただ、運用コーディングに携わってる以上、誰が担当してもミスが起きないようにする必要がありますし、新たに担当するようになったからといって、サイトの仕様を理解していなかったということも許されません。

ミスが起きない仕組み作りと同時に、ミスが起きてしまった時に速やかに原因を探って対応することも、運用コーディングならではの重要なポイントだと思います。また、原因を見つけてただ対応するだけでなく、その方法で本当に問題ないのか、その時に見つけて対応することが大切だと考えています。


まとめ

運用コーディングでは、サイトの仕様が既にある中での作業になるため、その仕様を理解してから作業しなくてはいけません。新規サイト構築と違い、その点が大変です。全てを把握して、スピーディーに対応し、それらをミスがないようにしないといけない...そう聞くと、大変だなと感じられるかもしれません。実際、私たちも大変に感じることもありますが、様々な運用案件のコーディングに携わっていることで、問題や状況に合わせたコーディングだったり、提案が出来るのだと思っています。 新しいサイトが世の中に生まれ続ける=そのサイトを更新し続けることが必要不可欠になった昨今、その更新を支える運用コーディングの重要性は増していくと思います。新規サイト構築をしているだけでは見えてこない視点を研ぎ澄まして、これからも運用案件をスピーディーかつミスがないように公開し続けていきたいと思っています。

私たちクリエイティブ部では、「Webマスター代行サービス」として
企業のWeb担当者様のトータルサポートを展開しています。
パーツ集作成についても、お気軽にお問い合わせください。

WEBマスター代行サービス

お問い合わせ

 

この投稿を書いた人

垳田 悟

垳田 悟(いげた さとる)ディレクター / コーダー

クリエイティブ部の運用チームで主にコーディングをやっています。 愛称は『イゲちゃん』『イゲさん』 いつでも仕事の対応できるように、ジャケットorシャツを来て胸ポケットにペンを入れています。 ペンが無くて困ったらいつでも言ってください!!

垳田 悟が書いた他の記事を見る