当ホームページは、WordPress（ワードプレス）のテーマ方式で制作しています。よって、既存テーマ（XHTMLバージョン）を複製して必要な箇所を書き換え、新たなHTML5バージョンのテーマセットとする形で進めました。この方法であれば、テーマセットの差し替えのみでほぼ作業完了となりますし、不具合を見つけた場合もすぐ元に戻せるので、運用中のホームページでも低リスクで移行できます。

元々、ホームページを現行デザインにリニューアルする際に、HTML5化を意識してXHTMLの構造を設計していたため、移行作業は想像以上に少なくて済みました。

具体的には、以下のような作業を行っています。

1. head要素内の省略可能な部分を削除
2. IEでHTML5の新要素を使えるように、JavaScriptを設置（オープンソースのライブラリを使用）

   <!--[if lt IE 9]>
   <script
    src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
   </script>
   <![endif]-->
   

3. XHTMLのマークアップをHTML5用に修正

   <div id="header">...</div>
   を
   <header>...</header>
   
   <div id="sidebar">...</div>
   を
   <nav id="sidebar">...</nav>
   
   <div class="section">...</div>
   を
   <section>...</section>
   などに変更
   
   シングルページについては
   <div class="section">...</div>
   を
   <article>...</article>
   に変更
   

4. これらに応じてCSS（スタイルシート）を修正

   article, aside, dialog, figure,
   　footer, header, hgroup, nav, section { display:block; }
   

5. WordPressでHTML5バージョンのテーマに差し替え

その他、WordPress（ワードプレス）のページ機能で制作しているページについては、一部コンテンツ側でタグの変更を行いました。

ざっとこんな感じです。特に問題なく移行できました。

現在、HTML5についても、W3C Markup Validation Serviceのページから正しい記述であるかのチェックができるようです。

* 当ホームページ右下のリンク（ Valid HTML5 ）からの場合、IEだとうまくチェックできないようです。

当サイトでも幾つかのプラグインを使用していますので。参考にご紹介させていただきます。

• Disable Revisions and Autosave … これを使ってリビジョン管理とオートセーブの機能をストップしています。
• Google (XML) Sitemaps Generator … Googleサイトマップに送信するsitemap.xmlを自動で生成してくれるプラグイン。Yahoo!サイトエクスプローラーでも使えます。
• PXS Mail Form … お問い合わせのメールフォームで使わせてもらっています。Contact Form 7も有名ですが、jQueryを連れてくるようなので、PXSにしました。
• del.icio.us cached++ … ブックマークのページでdelisious（ソーシャルブックマーク）に登録しているデータを表示するためのプラグイン。
• WPtouch iPhone Theme … これだけでサイトがiPhone用にリデザインされます。すごい。
• WP Zen-Coding … ウェブ制作必須ソフトウェアでも触れさせてもらったZen-CodingをWordPressのエントリー入力欄で使えるようにするプラグイン。
• WP Super Cache … WordPressのパフォーマンスチューニング用プラグイン。サーバー上にキャッシュを保存して表示スピードを高速化。

さて、良いことずくめに見えるプラグインですが、デメリットがないわけではありません。

WordPressはセキュリティ対策その他の理由でわりと頻繁にバージョンアップされますが、過度にプラグインに依存したサイトの場合、そのバージョンアップの際にプラグインが正常に動かなくなったりする可能性もあります。肝心な機能が使えなくなったりすると困りますよね。

またプラグインは、その高度な機能を実現するために、プラグイン本体に加えて、JavaScriptライブラリなど、わりと容量の大きなファイルを自動でインストールすることがあります。

これからのサイト制作には、表示スピードアップなど、サイトのパフォーマンスについての配慮が求められますが、この「プラグインが連れてくるちょっと重いファイル」は、パフォーマンスチューニングの面からは困りものと言えます。

サイトの安定運用を最優先に考えた場合、本当に必要な機能のみプラグインの恩恵に預かる、といった考え方が大切かもしれませんね。

これ以外にParallels DesktopでWindows環境を用意したり、FireworksやPhotoshopなどのグラフィック系ソフトも使いますが、作業の大半はテキストエディタで行います。

• TextMate … XHTML、CSSを書くのはこれしか考えられない、というぐらい強力なエディター。Bundlesと呼ばれるプラグインで、様々な言語を略語ベースで入力、補完することが可能です。
• Zen-Coding … TextMate用Bundlesの一つで、XHTMLとCSS用があります。略語ベースの入力をさらに拡張して、さらに強力にしてくれます。
• TextExpander … Zen-CodingはTextMate上での利用が前提になりますが、こちらはインストールしたMac上でいつでも略語ベースの入力が可能に。エントリー入力欄なんかでもオーケーですが、Zen-Codingほど強力ではないので、併用が吉ですね。
• Jedit X … これもエディターです。日本語入力、エンコード絡みなどでTextMateと併用。
• Coda … エディターはこれ一本で、といかないところが悲しいところ。足らない部分を補う形でこれも使います。
• MultiTextConverter … Windowとのファイルのやりとりで文字化けに困ったときに。文字コード変換ツールです。Windows用もあり。

• Transmit … FTPソフト。ほとんどトラブルを経験したことがないぐらい安定しています。
• MAMP … Macのテスト環境を構築。WordPressもローカルでテストできます。
• Color Schemer Studio … カラースキームの検討に。ソフト上から豊富なギャラリーをブラウズすることも可能です。
• Wallet … パスワード管理ソフト。マスターパスワード一つで膨大な数のパスワードを管理できます。ソフト上からURLを開いて、ID、パスワードの自動入力が可能。

これらに加えて、先のエントリーで触れたFirefoxのアドオンも必須ツールとなっています。

蛇足ですが、現在Zen-Codingがちょっとしたムーブメントになっている様子。Zen-Codingは実はTextMate以外のエディタでも使えたりするので、興味のある方は“TextMate Zen-Coding”などで検索して調べてみてください。

参考：EmEditorでZen-Coding、TEA for Coda（Coda用Zen-Coding）

Firefox自体の動作が遅くなるものは極力無効にしたり、新しいものを試してみたりと、割と常時変動します。

膨大な量のFirefoxアドオンでじっくり探せば、皆さんもきっとニーズに合ったものが見つかります。（一応、ウェブ開発に関するものと、そうでないものを分けておきます。）

• Add Bookmark Here ² … ブックマークの場所を選択
• FireGestures … マウスジェスチャーで色々な操作が可能
• Easy Youtube Video Downloader … Youtubeのページにダウンロード用リンクを
• Gmail Notifier … Gmailの着信通知
• Google Redesigned … Googleサービスの見た目をガラっと変更
• Xmarks … 複数のパソコンのFirefoxでブックマークを同期
• NoScript … とにかくウィンドウをリサイズされるのがイヤな人はコレ
• 1Password … 覚えるのはマスターパスワードひとつでオーケー（これのみ有償）
• Greasemonkey … AutoPagerizeは手放せませぬ
• tombloo … 色々なサービスへ簡単にポスト
• SQLite Optimizer … Firefoxの動作が遅くなってきたと感じたときに

• Web Developer … ウェブ開発用ツール一式
• Firebug … こちらも定番ウェブ開発ツール
• Google Page Speed … パフォーマンスチューニング用ツールGoogle版
• YSlow … パフォーマンスチューニング用ツールYahoo!版
• ColorZilla … ウィンドウ内の色をピックアップ

当ホームページでも、オープンソースのブログ構築ツール、WordPress（ワードブレス）をCMSとして使用しております。

イーシフトでは、更新のしやすさ、SEO効果の高さに着目し、WordPressをCMSに使用したホームページの構築をご提案しております。自社ホームページへの導入をご検討の方は、ぜひご相談ください。