Movable Typeテンプレートのカスタマイズを行うには予めXHTMLテンプレートを作成し、テンプレートタグを流し込む方法が最善であるが、今回はデフォルトテンプレートをよりWeb標準準拠、アクセシブルにするためのカスタマイズを紹介する。
「Web標準」とはW3C, ISO, IETF, ECMA等の国際的な組織が提唱する仕様に準拠することで、誰でもどんな環境でも利用することのできるユニバーサルデザイン（ユニバーサルアクセス）のウェブページを目指すものである。
過去において「ブラウザできれいに表示できればそれでよい」という誤った認識に縛られてきた事実がある。ただ表示するためのみを目指した“正しくない”手法に基づいたソースコードが氾濫した結果、高齢者や障碍者など社会的に弱い立場にあるユーザーに対して不自由を強いるなど、弊害が生じていた。 最近ではより正しくマークアップを行うことで、オペレーティングシステムやブラウザなどの環境を問わず、あらゆるユーザーに対してアクセシブルなウェブサイトを構築する「Web標準」を強く意識したXHTML+CSSに基づくサイト制作が一般的になりつつある。
Movable Typeには以下の2つのプラグインが標準で装備されおり、これらはブログの見栄えを最も簡単に変えられるのでぜひ利用したい機能である。
StyleCatcher プラグインとは、シックス・アパート社やその他の有志が配布しているスタイルシートの検索からダウンロード、適用、再構築までを自動化し、簡単にデザインを切り替えることができる拡張機能である。 この StyleCatcher プラグインを利用すれば、これまでのようにスタイルの変更の為に行っていたコピー・アンド・ペーストは一切不要になる。
mt.cgiのあるディレクトリにはdefault_templatesというディレクトリがあり、その中には新規ブログ作成時に読み込まれるテンプレート群が保存されている。このプラグインを利用すると、default_templatesに入っているテンプレートへの移行と、現在利用しているテンプレートのバックアップを簡単に実行きでる。
そこで今回の方向性としては、StyleCatcherでの動作に一切影響を与えないWeb標準へのカスタマイズを行うことにする。
Movable Typeのデフォルトで準備されているテンプレートは、ほぼWeb標準準拠しているが、ユニバーサルデザインの面から見ると多少不足する部分があるので、以下の4点をカスタマイズの実例を挙げながら解説する。
xml:lang属性及びlang属性title属性の追加tabindex属性、accesskey属性を追加する今回カスタマイズの完成形として紹介する「World Wide Movable Type 3.3 Web標準テンプレート」はMT_TRANS phraseを利用することで、世界各言語のブログに適応することができるが、カスタマイズの解説はTemplate Backup and Refreshにより生成されたテンプレートを用いる。なお「World Wide Movable Type 3.3 Web標準テンプレート」は主要モダンブラウザ（Internet Explorer6、Internet Explorer7、Firefox 2.0.0.2、Opera 9.10、Safari 2.0.4）にて表示確認している。
Movable Type デフォルトテンプレートの文書型はXHTML 1.0 Transitionalが採用されている。
HTMLをXMLの文法に基づいて定義し、拡張性やモジュールの開発を容易に行うことができるようにしたもの。Extensible HyperText Markup Languageのことである。XMLはHTMLと違い、タグや属性名を自分で定義することができる。これをHTML4.01が持っている要素や属性をそのままXMLでも仕様できるように定義し、HTMLから移行しやすいように作られたのがXHTMLである。
XHTML 1.0にはHTML4.01と同様にStrict、Transitional、Framesetの3つのDTDがある。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>仮想図書館</title>
</head>
<body>
<p><a href="http://example.org/">example.org</a> に引っ越しました。</p>
</body>
</html>詳しくはXHTML(TM) 1.0 The Extensible HyperText Markup Language (Second Edition)を参照のこと。
XHTML 1.1や、XHTML 1.0 Strictとすることも考えられるが、Internet Explorerの対応が不十分な点やMovable Typeで「コメント情報の登録が稼動しない」等の改善およびカスタマイズが必要な為、あまりお薦めできるものではない。「Web標準はStrictでなければならない」ということもないので、デフォルト通りのXHTML 1.0 Transitionalが現実的だと思われる。
XHTMLにおいて、文字コードがUTF-8とUTF-16の場合にはXML宣言を省略可能であるが、Movable Typeは初期値のUTF-8以外の多種の文字コードに対応可能な為にXML宣言を記すことは必須と考えられる。しかし、Internet Explorer 6はXHTML文書のDOCTYPE宣言よりも前に文字やスペースがあると、互換モードにで表示され、レイアウト等が崩れる大きな原因にもなる。幸いデフォルトやシックス・アパート社が管理しているStyle Libraryのスタイルシートには互換モード対策やCSSハック等が組み込まれているのでXML宣言を追加記述してもInternet Explorer 6でのレイアウトの崩れはない。
StyleCatcherを利用しデフォルトやシックス・アパート社が管理しているStyle Library以外が提供するスタイルシートを読み込む場合には、互換モード対策が行われているかを確認し利用すること。
<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><$MTPublishCharset$>はMovable Typeで使用される文字コードを表すテンプレートタグ。Movable TypeではUTF-8が初期値だが、環境設定ファイル（mt-config.cgi）のPublishCharsetに設定した値が挿入される。
xml:lang属性及びlang属性の追加検索エンジンのロボットが情報を収集する際の各言語別の文書インデックス化の手助け、音声出力環境の読み上げ時の発声規則を明確にする為にxml:lang属性及びlang属性を追加する。
XHTML1.0 では xml:lang属性を参照できないユーザーエージェントとの後方互換のために HTML互換の lang属性と xml:lang属性の両方を同一の要素に同じ値で設定することが認められてる。実際には国際化を示すi18n（internationalization）で指定する。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<$MTBlogLanguage$>" lang="<$MTBlogLanguage$>" id="sixapart-standard">日本語だけではなくその他の言語でも利用できるよう<$MTBlogLanguage$>（Movable Typeで使用される言語コードを表すテンプレートタグ）を使用し指定する。日本語版では、jaが挿入される。
前出のxml:lang属性及びlang属性もアクセシビリティに関連するカスタマイズであるが、不足する部分があるので追加する
アクセシビリティとは、「年齢や身体的制約、利用環境等に関係なく、提供されている情報に問題なくアクセスし、コンテンツや機能を利用できる」ということである。アクセシビリティについての研究を推進する組織であるWAI（Web Accessibility Initiative ）が勧告するWebページのアクセシビリティについてのガイドライン「Web Content Accessibility Guidelines」がある。
「HTML Validatorでの検証でエラーがない」だけでは不十分である。アクセシビリティについて完全に対応可能なチェッカーはないが、アクセシビリティを十分考慮して作成してこそWeb標準準拠といえるだろう。
詳しくはウェブコンテンツ・アクセシビリティ・ガイドライン 1.0を参照のこと。また合わせて、JIS X 8341-3 高齢者・障害者等配慮設計指針を確認されることをお奨めする。
title属性の追加ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書によると「各リンク部分は、その行き先が明確にわかるようにする」とされ、「title属性に異なる値を指定しそれらを区別する」よう求められている。title属性を付加することにより、マウスでポイントするとtitle属性の値をツールチップとして表示することができる。また音声ブラウザでは読み上げやステータスバーに表示できる機能もある。
title属性を追加する複数のエントリーが表示されるページのそれぞれの投稿情報は【 パーマリンク | コメント | トラックバック 】と表示されている。これらはエントリーごとにリンク先が違うはずである。ブラウザでは表示する位置が違う為に「別のものであるだろう」と想像はできるが表現は全て同じである。
エントリー及びエントリー毎のコメント、トラックバックが明確になるようにtitle属性を追加する
<span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>" title="Permalink to this entry:<$MTEntryTitle$>">パーマリンク</a>
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments" title="Comments for <$MTEntryTitle$>">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback" title="Trackback for <$MTEntryTitle$>">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive><$MTEntryTitle$>はエントリータイトルを表すテンプレートタグ
この投稿者情報はmain_index.tmpl、category_archive.tmpl、datebased_archive.tmplに存在するので、すべてtitle属性を追加することが望ましい。
title属性を追加するエントリータグを利用する際にカテゴリーとまったく同じ表現を利用してしまうことがある。この場合も行き先の区別が付かない。そこで、エントリータグにもtitle属性を追加する。
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>" rel="tag" title="タグ:<$MTTagName$>"><$MTTagName$></a></li>
</MTEntryTags><$MTTagName$>はタグ名をあらわすテンプレートタグ
このエントリータグはmain_index.tmpl、individual_entry_archive.tmpl、category_archive.tmpl、datebased_archive.tmplに存在するので、すべてtitle属性を追加することが望ましい。
tabindex属性、accesskey属性を追加する全ての閲覧者がマウスとGUIブラウザを利用し閲覧しているとは限らない。GUIブラウザであってもキーボードだけの操作で閲覧しているかもしれない。
リンクやフォームの部品を容易に移動できるような仕組みを提供することで誰でもが利用しやすいページとなる。しかし自由にページ及びサイトを作成できるCMS（Contents Management System）の特性上、ページ全体のリンクにショートカットや順序を付けることは難しい。そこで頻繁に使われるフォーム部品にカスタマイズを行う。
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0では、フォーム部品の移動を容易にする為に「tabindex」属性と「accesskey」属性を利用するとされている。
tabindexとはtabindexのtabとは文字通りキーボードのTabボタンのことである。ページ上でTabボタンを押せば、順序良くリンクやフォーム部品を移動できる。この順序をtabindexでコントロールできる。
accesskeyとはキーボードによるショートカットのこと。ショートカットの入力で直接フォーム部品にアクセスできるがブラウザにより操作方法が違う。ブラウザやオペレーションシステムのショートカットと重複しないよう注意が必要である。
accesskey対応フォームが設置されているテンプレートとして思いつくのがindividual_entry_archive.tmplである。しかし殆どのテンプレートに検索の為のフォームが設けられているため、コメントフォームと検索フォームを一連のものとして順序をつける必要がある。
コメントフォームのフォーム部品にはinput要素とtextarea要素が存在する。この両方にtabindex属性、accesskey属性を追加する。
tabindex属性は名前から順序良く1、2、3…として記述することにする。accesskey属性は前出の通り重複しないように注意しながら適当なショートカットキーを割り当てる。
<div id="comments-open-data">
<div id="name-email">
<p>
<label for="comment-author">名前:</label>
<input id="comment-author" name="author" tabindex="1" accesskey="n" size="30" value="" />
</p>
<p>
<label for="comment-email">メールアドレス:</label>
<input id="comment-email" name="email" tabindex="2" accesskey="m" size="30" value="" />
</p>
</div>
<p>
<label for="comment-url">URL:</label>
<input id="comment-url" name="url" size="30" tabindex="3" accesskey="u" value="http://" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" onkeypress="if (!this.checked) forgetMe(document.comments_form)" value="1" tabindex="4" accesskey="c" />
この情報を登録しますか?</label>
</p>
</div>
<p id="comments-open-text">
<label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" tabindex="5" accesskey="t" onfocus="if(this.value=='コメントを投稿'){this.value='';}" onblur="if(this.value==''){this.value='コメントを投稿';}">コメントを投稿</textarea>
</p>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" accesskey="v" tabindex="6" name="preview" id="comment-preview" value="確認" />
<input type="submit" accesskey="s" tabindex="7" name="post" id="comment-post" value="投稿" />
</div>注1：今回のカスタマイズはStyleCatcherでの動作に一切影響を与えないことを重視した為、tabindex属性、accesskey属性が割り当てられていることがわからないが、本来ならば「名前（n）:」等と明記し隠し技的なカスタマイズに終わらないよう注意する。
注2：textareaには入力を解りやすくする為に何かテキストを記述しておくべきだが、入力する時点で表示されたテキストを削除する必要がある。コメント入力する際に非常に面倒な作業である。この記述によりtextareaをクリックすると「コメントを投稿」の文字が消える
続けて検索フォームをカスタマイズする。
コメントフォームに続けてtabindex属性の値とaccesskey属性を挿入する。
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" value="Search" tabindex="8" />
<input type="submit" value="検索" tabindex="9" accesskey="k" />
</form>
</div>エントリーアーカイブを中心に考えtabindex属性を追加したが、サイトの内容によりコメントフォームが存在しないこともある。構成を十分考慮してtabindex属性の値をつけるべきである。また、本来関連するフォーム部品はfieldset要素やlegend要素を使用してひとまとめにする必要がある。
今回はStyleCatcherでの動作に一切影響を与えないカスタマイズとした為あえて使用していない。
紹介した以外のカスタマイズも含まれている。ぜひ検証していただきたい。
2007年3月17日作成 2007年5月8日一部修正 2007年5月8日一般公開