新型インフルエンザが収束に向かってるらしい今日この頃、
普通に風邪を引いてしまった京都制作の原田です。

ヘルシーファミリー倶楽部リニューアル！
（表現コンセプト～デザイン編）に続きまして、
「コーディング＆技術編」をお送り致します。

コーディング作業ですが、こちらのサイトは100％新規作成ではなく、
各カテゴリー内の情報コンテンツにある膨大な記事ページはそのまま使います。
そのままと言っても、当然のこと新しいヘッダ・フッタ等、
記事以外の外側のデザインは新しく作り直すことになるので、
ここでどうやって作業工数を短縮するかがポイントです！

旧サイトはDOCTYPE指定の無い普通のhtmlでテーブルレイアウト。
記事ページを使いまわすには同じ仕様で組むのが一番なのだけど、
「2009年の今、テーブルレイアウトってどうなのさ！」と。
SEO的にもソースの複雑さ等でも、何も良いことはありません。

そんなことを考えている時に、デザインが上がってきました。
それを見たとたん・・・
「あ～これはCSSで組まないと無理だな」と。
このデザインをテーブルで組むとなると大変な作業になると思いました。
これでプラン決定です。
新規でゼロから作るページはXHTMLで組むことにしました。

既存の記事ページはhtmlを無理やりxhtmlにすると、
スタイルの継承やマージン等の問題が出てレイアウトが崩れます。
そこで記事ページはhtmlのままで新デザインパーツを使うために、
スタイル問題を吸収するcssファイルを用意して対応しました。
これで作業工数はぐっと短縮されました！！

コーディングとは別に、スクリプトの開発も必要でした。
画像のマウスオーバー切り替えはもちろんのこと、
グローバルメニューのマウスオーバーで各ローカルメニュー表示、
そしてトップページには最新ニュースのスライドショーがあります。

今回これらの開発にベースライブラリとしてjQueryを採用しました。
この手のライブラリを使う一番のメリットは
DOMツリー完成後にアクション開始できることです。
ページ完成後だと長いページでは操作が出来ない時間が発生してしまう。
jQueryを採用した理由としては、強力なセレクターと信頼性があります。
MicrosoftやNokiaが自社製品に組み込むとかいう話があるくらいです。

このようにして、様々な技術が合わさって1つのサイトが出来ています。
一口でコーディングと言っても、
単にデザインをコード化するオペレーション作業では決して無く、
「コードをデザインしてるのですよ！」と声を大にして言いたい。

日々、コード文字列と戦うコーダー心の叫び。