Website Usability Info

実際にソースコードを軽量化するには、余分なスペースや改行を無くすなど、地道な作業が必要になりますが（しかも、かけた労力と効果とのバランスによって、どこまで徹底するかという判断がサイトごとに異なると思いますが）、今回は便利なソリューションとして、このサイトでも使用しているMovable Type用のツールをご紹介したいと思います。いずれも、自動的にソースコードの軽量化に寄与してくれるものなので、Movable Typeを使っている方は積極的に活用されてはいかがでしょうか。

Apply Modifierプラグイン

このプラグインを使うと、ソースコードの改行を詰めることができます。

ブラウザの「表示」メニューでソースを表示して見ると、（意味的な区切りを示す改行が無いので）解読しにくくなりますが、マシンリーダブルであれば（機械すなわちPCのブラウザが解読できれば）充分ですし、Movable Typeの管理画面上では改行がある状態でソースを確認できるので、問題ありません。開発者さんのブログ「The blog of H.Fujimoto」のこちらのページに、解説とプラグインファイルのダウンロードリンクがあります。

ただし、ソース内にスクリプト（JavaScriptなど）が入っている場合、Apply Modifierの適用には注意が必要かもしれません。実際に私は、「Googleマップを自分のサイトに」で紹介したMapperプラグインを使っていて、地図が表示されないという現象に出くわしました。というわけで今のところ、このサイトでは便宜的に、コラム記事本文にはApply Modifierを適用しないようにしています。

<MTIngore>タグ

Movable Typeのテンプレート内に、<MTIngore>とその閉じタグ（</MTIngore>）を記述すると、その範囲内に書かれた内容は、「サイトを再構築」して生成されるソースコードに一切表示されなくなります。

Movable Typeのバージョンが4になって、「MTIf」や「MTUnless」による条件分岐ができるようになりましたが、便利な反面、管理上、マメなコメント記入が必要になったりします。しかもこれらのコメントは、「サイトを再構築」してHTML生成された状態ではソース上に残しておきたくない（コメントアウトではなく、完全に消してしまいたい）場合が多いと思います。このようなときに、<MTIngore>タグを使うと、Webページから余計なコメントを排除することができます。

また、Movable Typeであらかじめ用意されているテンプレートやモジュールを自分のサイト用にカスタマイズする際にも、（不要な記述を削除するのではなく）とりあえず<MTIngore>タグで囲っておくことで、トラブル時に素早く元に戻すことが可能です。

いかがでしょうか？今回ご紹介した手法は2つだけですが、他にも工夫次第で、ソースをスリム化できるかもしれませんね。ソースコードのチューニングは、地味である意味オタクっぽいですが、「チリも積もれば山となる」という諺もありますし、よりアクセシブルなサイトを目指すためにも、ぜひ皆さんなりに工夫してみていただきたいと思います。