2004-11-21 アーカイブ

Opera で重いよ ?

今水面下で Movable Type のテンプレート改造および新スタイルシートの作成にとりかかっており、一部の方にプレビュー版を見せてカスタマレビュー ( 大げさ ) をいただいています。 私は Mozilla Firefox をメインターゲットにして CSS を作成しているため、手持ちの Firefox 1.0 で問題なく表示できれば大丈夫だろう、と考えていました。

ところが、レビューをしていただたいていた方の内のお一人から、「表示が激しく重い」といった指摘を受けたため、こうして作成途中のスタイルを表に出してみることにしたわけです。 その方はレビューをしていただいていた方の中で、唯一 Opera を常用していた方なので、マシンスペックや通信速度、背景に使っている画像のサイズなどよりも、ブラウザのレンダリングによるものではないかと思い自らも Opera 7.53 を起動して確認してみたところ、表示しただけで CPU 使用率が 100% になりました。

実際に新スタイルを適用してみたページ

• CSS のサンプル

初期の段階で躓いてしまったので、完成型ではありません。 解決したので公開を停止しました。

原因と思われる CSS の記述

html{
  color:         #ffffff;
  background:    #000000 url("../materials/20041114.png") left top repeat-y;
  }

body{
  color:         #ffffff;
  background:    #000000 url("../materials/_sample.jpg") right top repeat-y;
  }

html 要素と body 要素の両方に background プロパティで repeat-y を指定していると、 Windows XP Home Edition 、 Opera 7.53 の環境で CPU 使用率が 100% になりました。 html 要素か body 要素のどちらか、あるいは両方ともをコメントアウトすると再現しませんでした。

Opera CSSバグリストを見ても該当するものはありませんでしたので、まだ解決方法が見つかっていません。 コメントアウトすることなく、上記の指定を残したまま Opera でもスムーズに閲覧できる解決方法はないものでしょうか……。 結局、 html 要素に背景を指定するのをあきらめて、他の部分にうまく指定することで解決しました。

アーカイブ上で実際に展開される結果

サブカテゴリから親カテゴリへのナビゲーションをするテンプレートにて親カテゴリへのナビゲーションを行う方法を記述しましたが、ひとつだけ注意しておかなければならない点があります。 以前、 Movable Type 3.11 のサブカテゴリ機能についての所感 (3) - 親カテゴリにおける注意点で述べましたが、運用によっては記事を持たない親カテゴリというものが存在する可能性があります。

デフォルトのテンプレートでは、 Main Index にカテゴリが階層化された状態で表示され、記事が存在しないカテゴリについてはリンクを張らないような条件式のテンプレートタグが使われている と述べていますが、その条件式テンプレートタグについて具体的に触れていませんでした。 サブカテゴリから親カテゴリへのナビゲーションをするテンプレート - 上の階層にナビゲーションするリンクにてそのタグを使ったので、解説代わりにメモします。

MTIfNonZero テンプレートタグ

<MTIfNonZero tag="MTCategoryCount">
  <a href="<$MTBlogArchiveURL$><MTCategoryLabel dirify="1">/">Parent category : <MTCategoryLabel dirify="1"></a>
  <MTElse>
  Parent category : <MTCategoryLabel dirify="1">
  </MTElse>
</MTIfNonZero>

これは使用例の一例ですが、条件式にマッチすればリンクアンカーとして、マッチしなければただのテキストとして出力するような記述をしています。 その条件式というものは、テンプレートタグ名を見れば想像が付くと思いますが、「 tag 属性の値が 0 でないならば」というものです。 例えば、メインページのデフォルトテンプレートのカテゴリ部分で見ることができます。 ( 何故かデフォルト・テンプレート - メインページの方には記述されていませんが、実際に Movable Type の管理画面から見ると確認できるはずです。 )

そして、 MTIfNonZero テンプレートタグは 名前に If が含まれているタグ ですので、 MTElse が使えます。 <MTIfNonZero> 〜 </MTIfNonZero> の内側で使うことにより、条件式にマッチしないもの、すなわち「 tag 属性の値が 0 である」という条件を指定することができます。

この使用例の場合は tag 属性の値に MTCategoryCount を指定していますので、「そのカテゴリに記事が 1 つ以上含まれているならば」親カテゴリへのリンクアンカーを付けるようにし、「そのカテゴリに 1 つも記事が含まれていないならば」カテゴリ名をそのまま記述するだけといった結果になります。 こういった性質から、他に tag 属性に指定できる属性として、

• MTBlogEntryCount
• MTBlogCommentCount
• MTEntryCommentCount
• MTEntryTrackbackCount
• MTArchiveCount
• MTSearchResultCount

などが利用できると思います。 思います、とぼかして書いているのは、マニュアルのテンプレート・タグの中に MTIfNonZero テンプレートタグの記述が見当たらないからです。 デフォルト・テンプレートの方にも書かれてありませんし……。

MTCategoryCount の注意点

MTCategoryCount に限らず、 MTBlogEntryCount や MTArchiveCount にも似たようなことが言えるのかもしれませんが、下書き状態の記事も カテゴリーに属するエントリーの数 に含まれます。 ただし、それは <MTSubCategories> 〜 <MTSubCategories> 中でのみ起こるようです。 通常は下書き状態の記事はカウントされません。 それが気になる場合は、 Ogawa::Memoranda: Movable Type 3.11 日本語版・修正案の「 MTSubCategoriesの中でMTCategoryCountを用いると公開状態でないエントリーも数え上げてしまう」を参考にして修正を行うと良いでしょう。

しかし、カテゴリアーカイブの生成条件として、そのカテゴリの直下に公開状態の記事が最低 1 つ存在していなければならないというものがあります。 サブカテゴリの直下に記事を配置し、親カテゴリの直下には記事が全く無いという状態は充分にあり得ます。 その場合、親カテゴリ自身のアーカイブは生成されません。

よって、「公開状態の記事数が 0 」だけれども「下書き状態の記事がある」親カテゴリについては、 サブカテゴリから親カテゴリへのナビゲーションをするテンプレート - 上の階層にナビゲーションするリンクのナビゲーションリストでは、アーカイブが存在しない親カテゴリに対してもリンクを行うことになってしまいますので、注意してください。 もちろん、「公開状態の記事数も下書き状態の記事数も 0 」という場合は MTCategoryCount は 0 ということになりますので、リンクアンカーが付かないテキストとして記述されます。

上の階層にナビゲーションするリンク

サブカテゴリ系テンプレートタグのメモでメモしたテンプレートタグを元に、カテゴリアーカイブで使いそうなナビゲーションリストの例を作ってみました。

<ul>

  <MTHasNoParentCategory>
    <li>This category is top level category.</li>
  </MTHasNoParentCategory>
  
  <MTTopLevelParent>
    <li>
      <MTIfNonZero tag="MTCategoryCount">
        <a href="<$MTBlogArchiveURL$><MTCategoryLabel dirify="1">/">Top level category : <MTCategoryLabel dirify="1"></a>
        <MTElse>
        Top level category : <MTCategoryLabel dirify="1">
        </MTElse>
      </MTIfNonZero>
    </li>
  </MTTopLevelParent>
  
  <MTParentCategory>
    <li>
      <MTIfNonZero tag="MTCategoryCount">
        <a href="<$MTBlogArchiveURL$><$MTSubCategoryPath$>/">Parent category : <MTCategoryLabel dirify="1"></a>
        <MTElse>
        Parent category : <MTCategoryLabel dirify="1">
        </MTElse>
      </MTIfNonZero>
    </li>
  </MTParentCategory>

</ul>

これをカテゴリアーカイブのテンプレートに記述し、 サブカテゴリ系テンプレートタグのメモ - テスト環境で使った test01 〜 test03 カテゴリで確認してみると次のようになりました。

アーカイブ上で実際に展開される結果

test01 カテゴリ ( http://hxxk.jp/mt/test01/ )

<ul>
  <li>This category is top level category.</li>
</ul>

test02 カテゴリ ( http://hxxk.jp/mt/test01/test02/ )

<ul>
  <li><a href="http://hxxk.jp/mt/test01/">Top level category : test01</a></li>
  <li><a href="http://hxxk.jp/mt/test01/">Parent category : test01</a></li>
</ul>

test03 カテゴリ ( http://hxxk.jp/mt/test01/test02/test03/ )

<ul>
  <li><a href="http://hxxk.jp/mt/test01/">Top level category : test01</a></li>
  <li><a href="http://hxxk.jp/mt/test01/test02/">Parent category : test02</a></li>
</ul>

サブカテゴリの階層を 3 以上に深くする場合には結構役立ちそうです。

なお、階層が 2 の場合は

<MTParentCategory>
  <p>
    <MTIfNonZero tag="MTCategoryCount">
      <a href="<$MTBlogArchiveURL$><$MTSubCategoryPath$>/">Parent category : <MTCategoryLabel dirify="1"></a>
      <MTElse>
      Parent category : <MTCategoryLabel dirify="1">
      </MTElse>
    </MTIfNonZero>
  </p>
</MTParentCategory>

とすれば、サブカテゴリの場合のみ親カテゴリへのナビゲーションが現れることになります。

カテゴリアーカイブをいじっていて気が付いた

サブカテゴリ機能を使おうとする場合、カテゴリアーカイブは同一のディレクトリレベルではなく、親子関係を持った階層ができます。 それは過去に何度か取り上げた通りですが、今回はアーカイブ内において、親カテゴリまたはサブカテゴリに対するナビゲーションをどうするか、という点についてメモしたいと思います。

1. ナビゲーションに使えそうなテンプレートタグ
2. テスト環境
3. test01 カテゴリ
4. test02 カテゴリ
5. test03 カテゴリ
6. まとめ

ナビゲーションに使えそうなテンプレートタグ

カテゴリー関連のタグを目的に応じてナビゲーション用として使えそうです。 総当りで試した方が良いのでしょうが、今回は私が使えそうだと思ったもののみ試してみました。 テンプレートタグの解説は、タグごとにマニュアルへのリンクを張っておきますので参照してください。

• MTParentCategories
• MTTopLevelParent
• MTParentCategory
• MTHasSubCategories
• MTHasParentCategory
• MTHasNoSubCategories
• MTHasNoParentCategory

テスト環境

test01 というトップレベルカテゴリを作り、そのサブカテゴリに test02 、更にそのサブカテゴリに test03 というカテゴリを作成しました。 実際の URI としては、以下のようになります。 ( テストで作成したので、実際にアクセスしても 404 Not Found になります。 )

• http://hxxk.jp/mt/test01/
  • http://hxxk.jp/mt/test01/test02/
    • http://hxxk.jp/mt/test01/test02/test03/

そして、カテゴリアーカイブに以下のような記述をして、各カテゴリ内でどのように反映されるかを試してみました。

<dl>

  <dt>このカテゴリの位置は、 &#60;MTParentCategories glue=&#34;/&#34;&#62;&#60;MTCategoryLabel dirify=&#34;1&#34;&#62;&#60;/MTParentCategories&#62; です</dt>
  <dd>このカテゴリの位置は、 <MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories> です</dd>
  
  <dt>&#60;MTTopLevelParent&#62;このカテゴリのトップレベルカテゴリは &#60;MTCategoryLabel&#62; です&#60;/MTTopLevelParent&#62;</dt>
  <dd><MTTopLevelParent>このカテゴリのトップレベルカテゴリは <MTCategoryLabel> です</MTTopLevelParent></dd>
  
  <dt>&#60;MTParentCategory&#62;このカテゴリの親カテゴリは &#60;MTCategoryLabel&#62; です&#60;/MTParentCategory&#62;</dt>
  <dd><MTParentCategory>このカテゴリの親カテゴリは <MTCategoryLabel> です</MTParentCategory></dd>
  
  <dt>&#60;MTHasSubCategories&#62;このカテゴリ以下にはまだサブカテゴリがあります&#60;/MTHasSubCategories&#62;</dt>
  <dd><MTHasSubCategories>このカテゴリ以下にはまだサブカテゴリがあります</MTHasSubCategories></dd>
  
  <dt>&#60;MTHasParentCategory&#62;このカテゴリには親カテゴリ &#60;MTParentCategory&#62;&#60;MTCategoryLabel&#62;&#60;/MTParentCategory&#62; が存在します&#60;/MTHasParentCategory&#62;</dt>
  <dd><MTHasParentCategory>このカテゴリには親カテゴリ <MTParentCategory><MTCategoryLabel></MTParentCategory> が存在します</MTHasParentCategory></dd>
  
  <dt>&#60;MTHasNoSubCategories&#62;このカテゴリ以下にサブカテゴリはありません&#60;/MTHasNoSubCategories&#62;</dt>
  <dd><MTHasNoSubCategories>このカテゴリ以下にサブカテゴリはありません</MTHasNoSubCategories></dd>
  
  <dt>&#60;MTHasNoParentCategory&#62;このカテゴリはトップレベルカテゴリです&#60;/MTHasNoParentCategory&#62;</dt>
  <dd><MTHasNoParentCategory>このカテゴリはトップレベルカテゴリです</MTHasNoParentCategory></dd>
  
</dl>

dt 要素にテンプレートのソースコードを書いて、 dd 要素には実際にテンプレートタグを書いています。 カテゴリの階層に応じて、これが展開されます。

test01 カテゴリ

このカテゴリの位置は、 <MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories> です

このカテゴリの位置は、 test01 です

<MTTopLevelParent>このカテゴリのトップレベルカテゴリは <MTCategoryLabel> です</MTTopLevelParent>

( 空白 )

<MTParentCategory>このカテゴリの親カテゴリは <MTCategoryLabel> です</MTParentCategory>

( 空白 )

<MTHasSubCategories>このカテゴリ以下にはまだサブカテゴリがあります</MTHasSubCategories>

このカテゴリ以下にはまだサブカテゴリがあります

<MTHasParentCategory>このカテゴリには親カテゴリ <MTParentCategory><MTCategoryLabel></MTParentCategory> が存在します</MTHasParentCategory>

( 空白 )

<MTHasNoSubCategories>このカテゴリ以下にサブカテゴリはありません</MTHasNoSubCategories>

( 空白 )

<MTHasNoParentCategory>このカテゴリはトップレベルカテゴリです</MTHasNoParentCategory>

このカテゴリはトップレベルカテゴリです

test01 カテゴリはトップレベルカテゴリであるために、その条件にそぐわない部分 ( ( 空白 ) と書いてある部分 ) はナビゲーションが出現しません。

test02 カテゴリ

このカテゴリの位置は、 <MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories> です

このカテゴリの位置は、 test01/test02 です

<MTTopLevelParent>このカテゴリのトップレベルカテゴリは <MTCategoryLabel> です</MTTopLevelParent>

このカテゴリのトップレベルカテゴリは test01 です

<MTParentCategory>このカテゴリの親カテゴリは <MTCategoryLabel> です</MTParentCategory>

このカテゴリの親カテゴリは test01 です

<MTHasSubCategories>このカテゴリ以下にはまだサブカテゴリがあります</MTHasSubCategories>

このカテゴリ以下にはまだサブカテゴリがあります

<MTHasParentCategory>このカテゴリには親カテゴリ <MTParentCategory><MTCategoryLabel></MTParentCategory> が存在します</MTHasParentCategory>

このカテゴリには親カテゴリ test01 が存在します

<MTHasNoSubCategories>このカテゴリ以下にサブカテゴリはありません</MTHasNoSubCategories>

( 空白 )

<MTHasNoParentCategory>このカテゴリはトップレベルカテゴリです</MTHasNoParentCategory>

( 空白 )

test02 カテゴリは親カテゴリを持ち、なおかつサブカテゴリも持っているため、最後の 2 つだけはナビゲーションが出現しません。

test03 カテゴリ

このカテゴリの位置は、 <MTParentCategories glue="/"><MTCategoryLabel dirify="1"></MTParentCategories> です

このカテゴリの位置は、 test01/test02/test03 です

<MTTopLevelParent>このカテゴリのトップレベルカテゴリは <MTCategoryLabel> です</MTTopLevelParent>

このカテゴリのトップレベルカテゴリは test01 です

<MTParentCategory>このカテゴリの親カテゴリは <MTCategoryLabel> です</MTParentCategory>

このカテゴリの親カテゴリは test02 です

<MTHasSubCategories>このカテゴリ以下にはまだサブカテゴリがあります</MTHasSubCategories>

( 空白 )

<MTHasParentCategory>このカテゴリには親カテゴリ <MTParentCategory><MTCategoryLabel></MTParentCategory> が存在します</MTHasParentCategory>

このカテゴリには親カテゴリ test02 が存在します

<MTHasNoSubCategories>このカテゴリ以下にサブカテゴリはありません</MTHasNoSubCategories>

このカテゴリ以下にサブカテゴリはありません

<MTHasNoParentCategory>このカテゴリはトップレベルカテゴリです</MTHasNoParentCategory>

( 空白 )

test03 カテゴリは親カテゴリを持ち、かつサブカテゴリは持っていないために、その条件にそぐわない部分 ( ( 空白 ) と書いてある部分 ) はナビゲーションが出現しません。

まとめ

まあ、まとめと言うほどのことでもないんですけど、マニュアルにテンプレートタグの実用例がなかったので、テスト結果をメモしておかないとテンプレートをカスタマイズできないのでこうして残しておく次第です。 この場合はナビゲーションを目的として書いていますけど、それ以外の用途にも使えると思います。