iBlog カスタマイズガイド

2004 年 01 月 09 日
(一か月振りの更新です。しかもちょびっと。もう一息だ。)

OKAMURA Yuji

visited:

目次

1 はじめに
        1.1 この文書の目的
        1.2 読者の対象
        1.3 注意事項
        1.4 表記
2 概要
        2.1 カスタマイズファイルの場所
        2.2 ファイル構成
        2.3 画面遷移
        2.4 テンプレートファイルの形式
        2.5 テンプレートファイルの構成要素
        2.6 カスタマイズレベル
        2.7 生成された blog の構成
3 XHTML テンプレートファイル
        3.1 Login.html
        このセクションの項重要な解説は必ず読んでください。
        3.2 FeedPage.txt
        3.3 HomePage.txt
        3.4 ArchivePage.txt
        3.5 BlogPage.txt
        3.6 CategoryPage.txt
        3.7 DayPage.txt
        3.8 EntryPage.txt
        3.9 YearPage.txt
4 JavaScript
        4.1 Digest.js
        4.2 CommonLib.js
5 スタイルシート
        5.1 スタイルシート名.sxml
        5.2 スタイルシート名.css
        5.3 Custom.css
6 構成要素リファレンス
        6.1 ID
        6.2 CLASS
        6.3 REPLACE
        6.4 CONTROL
        6.5 FUNCTION
7 iBlog 1.3.2 へのバージョンアップ
8 参考 URL

はじめに

この文書の目的

この文書は筆者が iBlog 1.3.1 (.Mac 版) のカスタマイズするにあたって調べたり理解したことを記録するとともに、それらを iBlog ユーザ の間で共有する目的で作成しました。

読者の対象

この文書は iBlog 1.3.1 (.Mac 版) の基本操作をマスターした方を対象に、更にカスタマイズするための手引きとして作成しました。HTML, スタイルシート, JavaScript についての基本的な理解を前提としていますが、全ての事項についてこれらの十分な知識が必要なわけではありません。iBlog のカスタマイズを実践してゆくことによってより深くこれらを身に付けることができると思います。解る部分からで構いません。まずはやってみることが大切です。

iBlog の基本操作に関しては 0 iBlog/マニュアル がお薦めです。HTML, スタイルシート, JavaScript についての解説は 1 とほほのWWW入門 がお薦めです。また、iBlog の HowTo ものは 2 iBlogのTips がお薦めです。

注意事項

カスタマイズするための手順についてはあまり説明しません。なぜならばカスタマイズはあなたの好みや創意工夫によって行うものだからです。好みや創意工夫を反映させるために必要となる iBlog の仕組みを中心に説明します。

あくまでも筆者が個人的に調べた内容の公開であることに注意してください。ここに書かれた内容に基づいてあなたが行うことはあなた自身の責任で行ってください。しかし、筆者の理解不足/勘違い/書き間違いなどの指摘や教授、情報提供については歓迎します。筆者は iBlog を使用するにあたってあまりマニュアルや Web 上の文書を参照しないで色々試して使い方を覚えました。いわば我流ですから、きっとこういう点があると思います。

この文書は図示部分をイメージではなくスタイルシートによる見た目の制御で行っています。このため、これらの部分を意図どおりに参照するためにはきちんとスタイルシートに対応したブラウザが必須になります。イメージとしなかった理由は

• テキストブラウザでも完全ではないが重要な部分は読み取れる
• 読者の対象から考えてきちんとスタイルシートに対応したブラウザはほぼ利用可能だが、高速な回線は必ずしも利用可能とは言えない

表記

GUI 部品

操作を説明する際に、メニュー項目やウィンドウ上の要素などの GUI 部品を示すのに ラベル という表記します。サブメニューなどを辿る場合はそれらを - で繋ぎます。

ディレクトリ(フォルダ)とファイル

ディレクトリ(フォルダ)とファイルはUNIX 系 OS の表現に従います。そしてディレクトリであることを表すときは末尾を / とします。ここでは ~/Sites/, ~/Sites/index.html のように表示されます。

参考 URL

参考 URL は アクセスキー 表題や内容を表す短い言葉 という具合に表記します。文中の当該箇所ではアクセスキーは書いているだけで定義はしていませんが、末尾の参考 URLでのリンクでは定義しています。
HTML 4.01 strict の形式でこの文書を書いていて、この形式の A 要素に target 属性はないので、この文書を表示したまま外部へのリンクを辿りたいときは新しいウィンドウでリンクを開くか、新しいタブでリンクを開くというような操作をしてください。

概要

カスタマイズファイルの場所

iBlog の個人のデータやファイルは ~/Library/Application Support/iBlog/ にあります。この下の Javascript/, Stylesheets/, TemplateSets/ を自由にカスタマイズできます。

これらカスタマイズできるディレクトリやファイルは、いつでもオリジナルを復元できます。オリジナルは /Applications/iBlog.app/Contents/Resources/ の下の同名のディレクトリやファイルが初期状態のものです。取り返しがつかない操作をしてしまった場合は、ここからコピーして初期状態に戻せるので安心してカスタマイズできます。

ファイル構成

カスタマイズできるファイルの構成を図示します。各ファイルの詳細についてはファイル名についているリンクを辿ってください。設定により使用されないものは破線で、全 blog に共通のものは太線で囲んでいます。

画面遷移

テンプレートから生成される blog の画面遷移をなぞって、テンプレートファイル間の画面遷移として図示します。ここでは private に設定された blog とします。public に設定された blog では Login.html への遷移がありません。また、XML Feed を作成 の いいえ にチェックをした blog では FeedPage.txt への遷移はありません。

HomePage.txt─(blog 名)─→BlogPage.txt

BlogPage.txt─(未認証時自動で)─→Login.html
  │
  ├─(カレンダーの日付け)────→DayPage.txt
  │
  ├─(カテゴリ名)────────→CategoryPage.txt
  │
  ├─(Browse archives by date )─→ArchivePage.txt
  │
  ├─(Syndicate this site )───→FeedPage.txt
  │
  └─(Read More )────────→EntryPage.txt

DayPage.txt─(未認証時自動で )─→Login.html
  │
  ├─(blog 名 )─────────→BlogPage.txt
  │
  ├─(Browse archives by date )─→ArchivePage.txt
  │
  ├─(Syndicate this site )───→FeedPage.txt
  │
  └─(エントリタイトル)─────→EntryPage.txt

CategoryPage.txt─(未認証時自動で)─→Login.html
  │
  ├─(blog 名 )───────────→BlogPage.txt
  │
  ├─(カレンダーの日付け)──────→DayPage.txt
  │
  ├─(カテゴリ名)──────────→CategoryPage.txt
  │
  ├─(Browse archives by date )───→ArchivePage.txt
  │
  ├─(Syndicate this site )─────→FeedPage.txt
  │
  └─(Read More )──────────→EntryPage.txt

ArchivePage.txt─(未認証時自動で)─→Login.html
  │
  ├─(blog 名)───────────→BlogPage.txt
  │
  ├─(Syndicate this site)─────→FeedPage.txt
  │
  └─(年 )─────────────→YearPage.txt

EntryPage.txt─(未認証時自動で)─→Login.html
  │
  ├─(blog 名 )──────────→BlogPage.txt
  │
  ├─(カレンダーの日付け)─────→DayPage.txt
  │
  ├─(カテゴリ名)─────────→CategoryPage.txt
  │
  ├─(Browse archives by date )──→ArchivePage.txt
  │
  ├─(Syndicate this site )────→FeedPage.txt
  │
  └─(Read More )─────────→EntryPage.txt

YearPage.txt─(未認証時自動で)─→Login.html
  │
  ├─(blog 名 )─────────→BlogPage.txt
  │
  ├─(Browse archives by date )─→ArchivePage.txt
  │
  └─(カレンダーの日付け)────→DayPage.txt

Login.html─(認証成功で)─→BlogPage.txt

FeedPage.txt ※どこにも遷移しない

テンプレートファイルの形式

テンプレートファイルはいうまでもなくテキストファイルではありますが、改行が LF のみの Unix 式になっているものと CR のみの Mac 式になっているものが混在しています。ブラウザでソースを表示するときなど Mac 式のファイルだと全てが一行になって見えることがよくあるので Unix 式に統一しておいたほうがいいでしょう。

また、txt の拡張子を持つものは XML 形式です。特に FeedPage.txt 以外は XHTML 形式(XML の一種)になっています。HTML 形式ではありません。iBlog のテンプレートファイルでは HTML の代わりに XHTML 1.0 が使用されています。XHTML 自体については述べませんが、次のことは最低限覚えておいてください。

• 終了タグを省略するときは末尾を > ではなく /> とする。
  ex) <br />
• 要素名と属性名は全て小文字にする。
  XML では要素名の大文字と小文字が区別されているからです。
• 属性には属性値を必ず付ける。
  ex) <hr noshade="noshade" />

詳しくは 3 XHTML 1.0 の仕様書 を参照してください。これを読まなくとも HTML を理解している方ならば 4 JChecker のようなチェッカーがあれば十分だと思います。

このことは普段エントリの内容を書くときにも注意が必要です。エントリの本文の中では

ところでオリジナルの XHTML テンプレートファイルには間違いやよくないところが散見されます。下にどのような間違いがあるかを列挙しますので、これらを直しながらインデントを付けるなどして整形することをお薦めします。XHTML テンプレートファイルの内容をほぼ理解できるようになるからです。

テンプレートファイルの構成要素

テンプレートファイルの構成要素には次の 5 種類があります。

ID

XHTML の要素の id 属性値。そのファイルの中で一つだけしかありません。テンプレートファイルの基本構成要素を表しています。

<element id="name">
...
</element>

CLASS

XHTML の要素の class 属性値。その要素がどのような種類のものであるかを表しています。

<element name="name">
...
</element>

REPLACE

iBlog が置き換える部分。一般には状況に応じて置き換え結果が変わります。この状況をこの文書ではコンテクストと呼んでいます。このためファイルによって有効であったり無効であったり、同じファイルの中でも有効であったりなかったりします。

iBlog の内部動作はブラックボックスで筆者は十分なドキュメントを手に入れていないのでコンテクストについては予想の域を出ませんが、コンテクストには次のものがあると考えています。

グローバルコンテクスト

どのテンプレートファイルの内部でも有効なコンテクスト。このコンテクストに所属する REPLACE はいつでも置換可能です。

ファイルコンテクスト

各テンプレートファイル固有のコンテクストです。

アーカイブリストコンテクスト

ArchivePage.txt と DayPage.txt それから YearPage.txt のファイルコンテクストで有効になるコンテクスト。このコンテクストでは CONTROL ArchiveList が利用できます。

アーカイブコンテクスト

CONTROL ArchiveList の内部で有効になるコンテクストです。

エントリリストコンテクスト

BlogPage.txt と CategoryPage.txt それから FeedPage.txt のファイルコンテクストで有効になるコンテクスト。このコンテクストでは CONTROL ForEachEntry が利用できます。

エントリコンテクスト

CONTROL ForEachEntry の内部で有効になるコンテクストです。

blog リストコンテクスト

HomePage.txt のファイルコンテクストで有効になるコンテクスト。このコンテクストでは CONTROL ForEachBlog が利用できます。

blog コンテクスト

CONTROL ForEachBlog の内部で有効になるコンテクストです。

カスタム CSS コンテクスト

Custom.css の内部で有効になるコンテクストです。

CONTROL

繰り返しなどを制御するための XML タグ。

FUNCTION

CommonLib.js に書かれている JavaScript 関数で blog の各 XHTML ページの中で呼び出され、大抵の場合 REPLACE によって予め固定された XHTML コード(HTML コードも混在しているようです)をドキュメントオブジェクトに書き込みます。

カスタマイズレベル

カスタマイズのレベルを考えてみました。自分の blog をどうしたいかを整理する指針にしてください。

GUI による設定のレベル

この文書は必要ありません。既存のテンプレートセットとスタイルシート、それから環境設定の項目、ナビゲーションエディタによってカスタマイズしてください。特別な知識は必要ありませんが、この文書で述べた知識があると、ナビゲーションエディタを使いこなせるかもしれません。

スタイルシートレベル

各 ID と CLASS の内容と、XHTML のテンプレートファイルでそれらがどのようにレイアウトされているかに注目してください。iBlog はこのレベルで活用するのがもっとも労少なくして得るものが多いでしょう。

レイアウトレベル

スタイルシートレベルに加えて、各 XHTML テンプレートファイルの中で用いられている各種構成要素が何であるかに注目してください。「使う」という意味ではこのレベルでほぼマスターしていると言えます。この文書はこのレベルのカスタマイズのために十分な情報を記載したつもりです。

再構成レベル

この文書全てを理解することに加えて、更に調査が必要になります。特にコンテクストの分析がこの文書では十分でありません。

生成された blog の構成

iBlog によって生成された blog のファイル構成を知っておくことがカスタマイズする上で役に立つこともあります。そこで公開後の blog のファイル構成とテンプレートファイルへの対応を書いておきます。

XHTML テンプレートファイル

Login.htmlLogin.html

役割

private に設定された blog の認証画面のテンプレート。このファイルは全ての blog に共通のテンプレートファイルであることに注意が必要です。

構成

このファイルの構成は以下のようになっています。

重要な解説

Digest.js の MD5 暗号化機能を利用して、予め暗号化されたユーザ名(EncryptedUsername)とパスワード(EncryptedPassword)とユーザ入力を照合し、一致すれば index.html(BlogPage.txt) に移動し、一致しなければ再度 Login.html を読み込みます。これらの動作は JavaScript によって実装されています。また、REPLACE AuthenticationLink によって、認証が必要な場合このファイルに遷移して認証するのですが、この遷移も JavaScript によって実装されています。そして、認証済みであるかどうかは特に暗号化されていない Cookie によってチェックしています。このため次の点に注意しなければなりません。

1. ユーザ入力は SSL などにより暗号化された経路でなければ、第三者が通信内容を覗き見ると簡単にわかってしまいます。
   そして .Mac の Homepage には SSL 機能がありません。
2. Login.html に遷移する前のページはブラウザによって既に読み込まれています。
   このためキャッシュなどから容易に遷移元が読み取られてしまいます。またリンク先を保存するブラウザの機能を利用すればページを丸ごと保存できてしまうかもしれません。
3. JavaScript を無効に設定してあったり、JavaScript をサポートしていないブラウザでは認証の仕組みは全く意味がありません。
   このため、このようなブラウザでは private な blog も public な blog も区別なく自由に読み取り可能です。
4. 認証済みであることを偽るクッキーを容易に作成できるため、ユーザ名とパスワードを知らない第三者でも容易に認証済みであると偽ることができます。

ですから private に設定された blog は見かけ上認証によって保護されているに過ぎず、とても認証と呼べる仕組みにはなっていません。blog の閲覧者を安全に制限することは iBlog 自身にはできないのです。むしろこの仕組みをユーザへの注意の喚起なしに提供することによって善意の人を排除し悪意の人を容易に通す仕組みになっているとの誹りを免れ得ません。

以上の注意をよく理解し想定されるリスクを承知の上で private に設定された blog を公開するときの便利のためにこのファイルを日本語化したものを提供しています(5 ログイン画面を日本語化する)。また、3 を回避する方法の紹介もしています(6 JavaScript が OFF のブラウザを弾く)。

FeedPage.txtFeedPage.txt

役割

その blog の RSS ファイルのテンプレートです。このファイルを取り込むことにより iBlog の Reader モードでその blog を閲覧できます。

構成

このファイルの構成は以下のようになっています。

HomePage.txtHomePage.txt

役割

プレビューで生成される blog の一覧のページのテンプレートファイル。

構成

このファイルの構成は以下のようになっています。

ArchivePage.txtArchivePage.txt

役割

アーカイブのページのテンプレートファイル。エントリがある年が列挙されます。

構成

このファイルの構成は以下のようになっています。

BlogPage.txtBlogPage.txt

役割

blog のトップページのテンプレートファイル。

構成

このファイルの構成は以下のようになっています。

CategoryPage.txtCategoryPage.txt

役割

カテゴリー毎のページのテンプレートファイル。

構成

このファイルの構成は以下のようになっています。

DayPage.txtDayPage.txt

役割

日毎のアーカイブのページのテンプレートファイル。

構成

このファイルの構成は以下のようになっています。

EntryPage.txtEntryPage.txt

役割

エントリ単独のページのテンプレートファイル。

構成

このファイルの構成は以下のようになっています。

YearPage.txtYearPage.txt

役割

特定の年の月毎のページのテンプレートファイル。

構成

このファイルの構成は以下のようになっています。

JavaScript

Digest.jsDigest.js

内容を見ればわかるとおり、このファイルは MD5 暗号化の機能を JavaScript で実装したものです。既に述べましたがこのファイルが単にコピーされるものなのか、REPLACE を埋め込むと置換されるテンプレートファイルなのかは未調査ですが、恐らく単にコピーされるものと想像しています。

CommonLib.jsCommonLib.js

このファイルは REPLACE を置換した上で blog 毎にコピーが作成されるもので、blog の各種データを JavaScript の呼び出しによって動的に XHTML ファイルへ埋め込む(document.write)ためのものです。つまり FUNCTION の内容のテンプレートファイルです。

もし、FUNCTION の出力に変更を加えたいのでしたら、このファイルを編集することになります。ただし、このファイルは全ての blog に共通するファイルであることに注意が必要です。もし特定の blog だけに影響を与えたいのでしたら、既存の FUNCTION を変更するのではなく新しい FUNCTION を作成して、その blog の XHTML テンプレートファイルの中で新しく作成した FUNCTION を使用するようにすべきです。

各 XHTML テンプレートファイルでも REPLACE が置換される一方で、一部を除いて、単に REPLACE の置換後の内容を XHTML 上で書き出す関数が多くあります。恐らくこれは、REPLACE がコンテクストによって値を持っていたり持っていなかったりすることに関係すると思われます。つまり、XHTML テンプレートファイルコンテクストでは置換できない REPLACE の値を取得する場合にこのファイルで生成された FUNCTION の呼び出しによって行うのでしょう。つまり、JavaScript を利用することで CommonLib.js のファイルコンテクストが利用できます。したがって、目的の XHTML テンプレートファイル内で置換できない REPLACE の値がどうしても欲しのでしたら、このファイルに関数を追加して、その関数経由で取得できるかもしれません。

スタイルシート

スタイルシート名.sxmlスタイルシート名.sxml

役割

このファイルは iBlog の GUI を用いて作成したスタイルのデータを記述した XML ファイルです。このファイルに基づいて iBlog はプレビューや公開時に styles-site.css を作成します。

このファイルは XML なのでデータを保持しているだけで、テンプレートファイルではありません。このファイルに記述されたデータが適用されるテンプレートファイルは Custom.css です。

構成

このファイルは Apple Computer が定義している plist 1.0 (PropertyList) のファイルで XML の一種です。この plist 文書の仕様書がどこにあるのか筆者は知りませんが、Mac OS X では様々なデータの記述に用いられています。

このファイルは XML 文書の宣言と DOCTYPE の宣言以降 plist 要素だけがあり、その plist 要素は唯一の dict 要素を持っています。その dict 要素のデータは次のようなものの繰り返しになっています。

<key>&lt;$REPLACE名$&gt;</key>
<string>REPLACEの置換結果</string>

解説

このファイルのデータを Custom.css に適用して作成された styles-site.css をコピーして スタイルシート名.css として保存し直し、この スタイルシート名.sxml を削除(恐らく iBlog は再起動が必要です)することによって、遥かに普及している仕様のスタイルシートの編集に帰着できます。この XML の仕様を調べてそれを覚えるのもよいですが、スタイルシートを使いこなせるようになった方が使い道が多いと思います。

しかし上の構成で示唆したオリジナルの REPLACE の作成がもしできるのでしたら、今までテンプレートではなく元ファイルを作ることによって利用してきたスタイルシートのカスタマイズが一段メタな領域で行えることになります。あくまでも仮定の上での話に過ぎませんが、工夫次第によってはより柔軟なスタイルシートのカスタマイズが行える可能性を持っています。

スタイルシート名.cssスタイルシート名.css

このファイルがもっともカスタマイズの効果が大きいファイルです。このファイルは、それを選択した blog の styles-site.css としてコピーされます。現段階では REPLACE の置換が行われるかどうか、すなわちテンプレートファイルであるかどうかは未調査ですが、スタイルシートを変更することによりあなたの blog の見た目が劇的に変わります。もしスタイルの効果をよく知らないのでしたら、この文書が使用している css ファイルをダウンロードせずにこの文書だけをローカルにダウンロードしてください。そして、ダウンロードしたファイルをブラウザで見てみましょう。オンラインで見ているときと見た目が全然違うはずです。この文書は css ファイルがなくても読めるように書いてありますが、css があるとより読みやすいようになっています。筆者はデザインセンスがないのでこの css を適用することで凄く読みやすいかどうかは自信がありませんが。

このファイルを一から作るのは大変ですので スタイルシート名.sxml のセクションで述べたように スタイルシート名.sxml 経由で生成された styles-site.css のコピーを基本にするのが楽です。また、既存の css ファイルをコピーしてそれをベースにするのもよいでしょう。このファイルのカスタマイズの基本は次のとおりです。

• body 要素のスタイルを編集し、ページ全体の基本スタイルをカスタマイズすること
• 各 ID のスタイルを編集し、ページの大枠の構成要素のスタイルをカスタマイズすること
• 各 CLASS のスタイルを編集し、部品としての構成要素のスタイルをカスタマイズすること

オリジナルの スタイルシート名.css には間違いがあります。

Custom.cssCustom.css

役割

このファイルは スタイルシート名.sxml から styles-site.css を作成する際に用いられるテンプレートファイルです。このファイルは sxml ファイルをスタイルシートとして使用する全ての blog に影響を与えるので注意が必要です。普段は iBlog の GUI でスタイルシートを編集したいがその結果は一律カスタマイズしたいというときに使用します。

構成

このファイルの構成は以下のようになっています。

解説

オリジナルのこのファイルには間違いを三箇所見つけました。一箇所は

.date {

...
<$DatePostedBorder$>
...
}

#banner {

...
<$HeaderBorder$>
...
}

構成要素リファレンス

ID

CLASS

REPLACE