STR STORAGE | Entry | Blog 3.0

お久しぶりです。

とりあえず今回はこのブログの技術的な話でもしますか。

CMS

コアとなるCMSはMovable Type 3から4にアップグレードしました。開発途中でアップデートが来たので現在は4.01です。

実はWordPressへの移行も検討し、実際MTと並行しWPブログも試作してみたのですが、どうにもハードコーディングが多すぎて”タブ一個まで拘ってインデントをしたい”私の要望は通りそうになかったので、結果的にMTに舞い戻ってしまいました。WPは動的更新で軽量なのでMTに比べれば桁違いに高速ですが、テンプレート側とコアからの変数がゴチャゴチャになってしまいソースが煩雑になるのが非常に気持ち悪いので、今回は無しの方向で決議しました。出力されたコードをテンプレート側で退避させて書き換える手段はスマートではないのでこの方法は除外。

実物のソースを見ていただければ、私がどの様なインデントを望んでいたのかをご理解頂けるかと存じます。

さて、MTの話に戻りますが、MT3時代のテンプレートは現在は推奨されないMTタグも含まれていたので、新たにMT4のデフォルトテンプレートを眺めながらの再構築を試みました。前バージョンは検索フォームも無くアーカイブもカテゴリーのみという利便性に大いに疑問があるデザインだったので、”人並みの機能を備えたサイト”をテーマに組んでいます。

しかし、デフォルトテンプレートはテンプレートモジュールによって派手に細分化されているので初見では萎えます。MTのモジュールはあくまで管理用であり、出力されるファイルが分かれる訳ではないので、今回モジュールは全て切り捨てました。「テンプレートモジュールは再構築、或いは更新をきっかけとしてEOFにLFを吐いたり吐かなかったり」というバグらしき物も、採用を見送った原因の一つです。変な所で改行を出力されるとPHPのheader関数の所でエラーが出てしまうのです。

アーカイブリスト

<ul>
<$MTArchiveList archive_type="Yearly"$>
<$MTSetVarBlock name="all_year"$><$MTArchiveDate format="%Y"$></MTSetVarBlock>
<$MTSetVar name="all_year" value="$all_year"$>
 <li>
  <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%Y"$>年</a>
 </li>
<$MTArchiveList archive_type="Monthly" sort_order="ascend"$>
<$MTSetVarBlock name="in_month"$><$MTArchiveDate format="%Y"$></MTSetVarBlock>
<$MTSetVar name="in_month" value="$in_month"$>
<$MTArchiveListHeader$>
 <li>
  <ul>
</MTArchiveListHeader>
<$MTIf name="in_month" eq="$all_year"$>
   <li>
    <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%m"$>月</a> /
   </li>
</MTIf>
<$MTArchiveListFooter$>
  </ul>
 </li>
</MTArchiveListFooter>
</MTArchiveList>
</MTArchiveList>
</ul>

MT4からプラグイン無しで年別アーカイブを生成する事が可能になったので、さっそく使ってみました。”年別アーカイブは降順、ネストされた月別アーカイブは昇順”で表示される様にしました。

WingMemo: 月別アーカイブを年毎に区切ってみる(3) 4.0完成版で公開されている構文を参考にさせて頂きました。

（注）可読性を考慮してMTタグを一行としていますが、このままでは空行だらけになってしまうので、実際のソースではMTタグ後のLFは削除しています。

カテゴリーリスト

<ul>
<$MTTopLevelCategories$>
<$MTIfNonZero tag="MTCategoryCount"$>
 <li>
  <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
<$MTElse$>
 <li>
  <$MTCategoryLabel$>
</MTElse>
</MTIfNonZero>
 </li>
<$MTHasSubCategories$>
 <li>
  <ul>
<$MTSubCategories$>
<$MTIfNonZero tag="MTCategoryCount"$>
   <li>
    <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> /
<$MTElse$>
   <li>
    <$MTCategoryLabel$> /
</MTElse>
</MTIfNonZero>
   </li>
</MTSubCategories>
  </ul>
 </li>
</MTHasSubCategories>
</MTTopLevelCategories>
</ul>

前バージョンではデザイン側の都合でサブカテゴリーを持てず今まで不便に感じていたので、多機能化を目指すに当たりデザイン・ソースのネストを可能にしました。

4.0ではバグで利かなかった<$MTHasParentCategory$>ですが、4.01で無事修正されたらしいので4.0ユーザーは速やかにアップグレードした方が賢明かと思います。ついでに<$MTHasParentCategory$><$MTParentCategory$><$MTCategoryLabel$> | </MTParentCategory></MTHasParentCategory><$MTCategoryLabel$>と<title>タグ内に記述すれば、「TopLevelCategory | SubCategory」という具合に表示出来るので便利です。

<$MTSubCatsRecurse$>は、多重のネストを可能にしますが、ソースコードは再帰的に呼び出すだけなのでインデントがコントロール出来ません。ここでは敢えて使用を避けました。

PHP

MTテンプレートは全てPHPで記述しており、MT側はパーマリンク等の必要最低限の文字列の出力に抑え、URIが固定のリンク等は全てハードコーディングし僅かながらも高速化に努めています。MTのテンプレートモジュールではなく、ヘッダー等を記述したPHPテンプレートファイルをincludeし代替としています。まぁこの辺はいつものサイトと同じです。要は「サイドバーとかはインデックステンプレートで構築し、閲覧者がアクセスする度にincludeして動的に結合していますよ。」という訳です。

CSS

記法が完全オリジナルなので普段から容量が重くなりがちとはいえ、単一デザインでの1000行超えは記録更新かもしれません。

このサイトを機に、ここ以外も含めた全てのサイトのCSS規則を最新に揃えました。「グローバルセレクタを使わない」や「line-heightの単位を入れない」等の修正が主です。

とりあえず今回はFaux columnsやら固定＆変動レイアウトとかやってます。サイドメニューカラムを固定しつつコンテンツ側のカラムを変動レイアウトにするアレです。ありがちなテクなので説明は割愛。

フッターのposition:fixed;は前バージョンからの持ち越しですが、こちらはIE6以下が対応していないのでセレクタハックで弾いています。

後はまぁ、リストをネストするとIEで空行を描画してしまうバグの解消とかですかね？

小ネタですが、最近ソースコードに行番号を付けて掲載しているサイトをちょくちょく見掛けるので真似してみました。

HTML

<pre>
 <code>Source Code</code>
 <code>Source Code</code>
 <code>Source Code</code>
 <code>Source Code</code>
 <code>Source Code</code>
</pre>

CSS

pre
{
counter-reset:code;
}
 pre code
 {
 counter-increment:code;
 }
  pre code:before
  {
  content:counter(code);
  }

<pre>タグ内の<code>に対してcontent:counter(code);を指定しているだけです。但しIEは7ですらcontentプロパティには対応していませんし、counter(code)はFirefox・Opera・Safariしか対応していません。文書内に直接記述するのであればIEでも表示可能ですが、閲覧者がコピー＆ペーストした際に行頭の番号を手動で削除しなければならないので煩わしいかなと思います。ちなみに他所では直接文書に行番号を入力していました。

Firefoxは上手い具合に解釈してくれますが、Operaはこのままですと”別々の<pre>内の<code>であったとしても行番号が連続してしまう”ので、<pre>タグ出現の度にcounter-resetを掛けて行番号をリセットしています。（Operaの挙動の方が正しい気もしますが。）

Ajax

そんなに大した事はしていません。フィードバックエリアの表示切り替えの為にjQueryを使っています。