2003年12月27日 (土)
Valid な iBlog
サイトの立ち上げ手順
iBlog は簡単に Blog が始められるところが魅力だが、Blog 名やカテゴリ名そして Blog の説明に日本語が使えなかったり、シングルクォーテーションが Blog 名などに使えなかったり、生成される html ファイルや xml ファイル、css ファイルに間違いがある。このカテゴリではこれらの不具合を克服する試みを公開し致命的なものは一掃したがのだが、エントリに散らばってしまっている。そこでこれまでのまとめとして、一から Blog を立ち上げるときの手順を書いてみる。
[2004.09.30 追記あり]またこのエントリは 1.3.5 より前の iBlog と 1.3 より前のiblogPatcher より前のバージョンの情報です。リンク先は切れています。
以下、私の iDisk の Public フォルダーから色々ダウンロードするので、まずこれをマウントしておこう。Apple 提供の iDisk Utility を利用するのが便利だが、今の iDisk Utility にはバグがあってプロキシ経由でのアクセスができない。プロキシ経由でなければ外部にアクセスできない人は Finder の [移動]-[サーバへ接続...] を実行して [アドレス] 欄に http://idisk.mac.com/yuji_okamura-Public2004.09.30 現在は http://idisk.mac.com/yuji_okamura/Public/ です を入力して [接続] ボタンを押すと接続できる。
iBlog のインストールは既に終わり、Blog も既に作成してあるところからスタート。 効果を確認するために、Another HTML-Lint で予め点数を確認してこう。それから RSS が間違っていることも Feed Validator で確認しておこう。
第一段階 : ファイルのダウンロード
Public フォルダーから以下のものをダウンロードする。全て iBlog フォルダーの下にある。| ファイル | 役割 |
|---|---|
| CommonLib_en.js |
下の CommonLib.js の英語版。カレンダーの曜日などが英語表記になる。いちいち日本語になっているのがいまいちという人は、下の CommonLib.js の代わりにこちらを利用しよう。ファイル名はダウンロード後に CommonLib.js に直さないといけない。 左のリンクは control-クリックで保存するか表示させてから名前を付けて保存をして保存する。 |
| CommonLib.js |
デフォルトではナビゲーションエリアに書かれるカレンダーの部分が間違った XHTML になっているが、これを訂正するために必要な JavaScript 関数や、正しい RSS Feed へのリンクを記述するのに必要な JavaScript 関数、そしてエントリを条件指定付きで一覧するために使用する JavaScript 関数が含まれた CommonLib.js。 左のリンクは control-クリックで保存するか表示させてから名前を付けて保存をして保存する。 |
| HomePage.txt | プレビュー後に表示される Blog の一覧ページの日本語化されたもの。 |
| iblogPatcher-1.2.2.tar.gz | iBlog によって生成されたファイル群を操作するためのスクリプト。 |
| Login.html |
非公開の Blog の Valid な日本語化されたログイン画面。 左のリンクは control-クリックで保存するか表示させてから名前を付けて保存をして保存する。 |
| validCss.tar.gz | iBlog に付属しているスタイルシートファイルと、スタイルシートファイルのテンプレートファイルにある間違いを直したもの。 |
| validTemplate.tar.gz | 正しい XHTML で記述されたテンプレートセット群。日本語化されたテンプレートセット群も入っている。 |
第二段階 : テンプレートファイルの導入
以下の要領でダウンロードしたテンプレートファイル群をコピーまたは移動しよう。iBlog の既存のテンプレートファイルを一部上書きするので、まず ~/Library/Application Support/iBlog/ をバックアップしておいたほうがよい。
以下、ローカルのホームフォルダーを ~ で表す。フォルダーA の下の B は A/B と表す。B もフォルダーの場合は A/B/ と表す。| テンプレートファイル | 移動先 |
|---|---|
| CommonLib.js | ~/Library/Application Support/iBlog/Javascript/ |
| HomePage.txt | ~/Library/Application Support/iBlog/TemplateSets/ |
| Login.html | ~/Library/Application Support/iBlog/Javascript/ |
| validCss.tar.gz の中の ApplicationData/Custom.css |
~/Library/Application Support/iBlog/ApplicationData/ |
| validCss.tar.gz の中の Styleseets/*.css |
~/Library/Application Support/iBlog/Styleseets/ |
| validTemplate.tar.gz の中の 全てのフォルダー |
~/Library/Application Support/iBlog/TemplateSets/ |
| テンプレートセット | 説明 |
|---|---|
| Valid_LeftNavigation | LeftNavigation の間違いを訂正したもの。LeftNavigation と入れ替えてしまって良い。 |
| Valid_LeftNavigation_SJIS | LeftNavigation の間違いを訂正しエンコードを Shift_JIS にしたもの。 |
| Valid_LeftNavigation_SJIS_JP | LeftNavigation の間違いを訂正しエンコードを Shift_JIS にし、更に英語を和訳したもの。 |
| Valid_RightNavigation | RightNavigation の間違いを訂正したもの。RightNavigation と入れ替えてしまって良い。 |
| Valid_RightNavigation_SJIS | RightNavigation の間違いを訂正しエンコードを Shift_JIS にしたもの。 |
| Valid_RightNavigation_SJIS_JP | RightNavigation の間違いを訂正しエンコードを Shift_JIS にし、更に英語を和訳したもの。 |
第三段階 : ナビゲーションエディタによる修正
iBlog のナビゲーションエディタで Calendar の項の内容を次のように変更する。<div class="side">そして XML/RSS Feed を生成する Blog の場合は、XML Feed の項の内容を次のように変更する。
<div align="center" class="calendar">
<script type="text/javascript">
WriteCalendar();
</script>
</div>
</div>
<div class="side">
<script type="text/javascript">
WriteUTF8RssLink('<$SyndicateLink$>', 'Syndicate this site');
</script>
</div>
第四段階 : iblogPatcher のインストールと設定
iblogPatcher 1.2.2 を解凍して、その中にある README.txt にしたがって設定をする。ただし、そこに書いてある Perl モジュール Jcode.pm のインストールだけでは足りないらしい。kintaさん のエントリも参考にしてほしい。
第五段階 : Blog の再構築
Blog 名やカテゴリ名を日本語に変えたいときはこのときに変えておくこと。また、これらにシングルクォートも使用してよい。そして、テンプレートセットを第二段階で導入したものに選び直す。この Blog を見ている人は日本語で Blog を公開していると思う。SJIS と名前に付いているものを選択するとよい。Valid_LeftNavigation, Valid_RightNavigation はエンコードが日本語になっていない。 iBlog で [Blog]-[プレビュー状態をリセット後、プレビュー] を行って Blog のプレビューファイル群を再構築する。
第六段階 : プレビューファイルの更新
iblogPatcher を使って各種間違いを訂正する。ターミナルで次のようにする。iblogPatcher --blog myblog.txt preview afterこれはプレビューした後に毎回実行することになる。README.txt にも書いたが、これを行うための command ファイルを用意しておくととても楽になる。
第七段階 : Blog の公開
iBlog を使って Blog を公開する。プレビュー状態をリセットしたので全てのファイルが転送されるから時間がかかる。コーヒーでも飲んでのんびりしよう。
第八段階 : RSS Feed の UTF-8 版の作成
iblogPatcher --blog myblog.txt publish afterこれは公開した後に毎回実行することになる。README.txt にも書いたが、これを行うための command ファイルを用意しておくととても楽になる。
以上で一通りが終了した。Another HTML-Lint や Feed Validator を使って効果を確かめてみよう。Another HTML-Lint の結果をよく見るとわかるが Read More のリンクのところで減点されている。これをなんとかしたい人は私のもう一つの Blog のソースを見て研究してみよう。エントリのタイトルもリンクの文字列の中に含めている。そしてそれが表示されないように display: none というスタイルを割り当てている。
上の手順では既に色々カスタマイズしている人は CSS ファイルやテンプレートセットが見た目オリジナルに戻ってしまう。しかしがっかりしないでほしい。カスタマイズした箇所に間違いが含まれている iBlog による Blog サイトを時々見かける。この段階からカスタマイズしたことを盛り込んでいき、一つ変更する毎に Another HTML-Lint などでチェックしていけばそれを解消することができるからだ。ちょっと手間のかかる作業になるが、やってみる価値はあると思う。HTML の進化に標準化が追い付いていなかったという歴史的な経緯から各ブラウザは間違った HTML や XHTML でもそれなりに表示してくれるのだが、iBlog が採用している XHTML は XML の一種で、XML では形式的な間違いは許されていない。形式的に正しいサイトであることは、(古くない)各種ブラウザでなるべく意図どおりに表示させる第一歩だし、Web アクセシビリティを向上させるための必須条件でもある。
実は Mac OS X の設定や iBlog のカスタマイズで解消できない不具合が残っている。それはエントリにイメージを貼付けたときの img 要素(タグ)に alt 属性が付かないという不具合だ。XHTML 1.0 では img 要素に alt 属性が必須なのだ。iblogPatcher のプラグイン VALID_XHTML.plugin にこれを修正する変更を加えたいと思っている。また、FeedBack のリンクからメールを出せるのだが、Internet Exploror でリンクを辿るとメールの件名が文字化けしてしまう。これも解消できるようにしたいと思っている。
ここで使用した iblogPatcher 1.2.2 ではエントリを日付の範囲、カテゴリ、HaloScan によるコメント数によって選別してリストアップさせる機能を Blog に付加することもできるようになっている。これについては KHOO さんのエントリと一つ前のエントリで説明してある。是非これもトライしてみてほしい。
Posted: 02:54 | Comment | Trackback
以下、類似エントリです。
.Mac および .Mac 配布アプリケーションを利用するためのノウハウやツールを提供しているウェブログです。iBlog の諸問題を克服し様々な機能を追加するためのツール iblogPatcher とそのプラグインや iBlog のバックアッププログラム iBlogFreezer の開発と公開、.Mac カウンタなど .Mac 提供機能の流用&カスタマイズ方法の紹介などがメインコンテンツです。
![[Valid RSS]](http://homepage.mac.com/yuji_okamura/image/valid-rss.png){kind=small}
うっかりすると駄目になってしまいます。エラーが検出されたときは Blog コメントでお知らせください。
Total entries in this category:
Published On: 2006-08-10 20:41
DotMac Counter:
