Serene Bach 用プラグイン「記事評価」を公開しました。

Serene Bach のプラグインとして公開していますが、内部の仕組みは Serene Bach の機構とはほぼ独立しています。

ここ、SimpleBoxes は諸事情により Serene Bach ではなく、sb で運用していますが、プラグインという形ではなく、独立した形で導入しています。

記事評価スクリプトは、主に以下のパーツからなっています。

sbstar-script.js

インタフェース処理を行う JavaScript

rating.cgi

投稿された評価の受付処理を行う CGI スクリプト

sbstar.txt

投稿された評価内容を保存するテキストファイル

その他

スタイルシートや画像パーツなど「見た目」を構成するリソースファイル

スタイルシート

記事評価を表示する方式としては、スターレーティングをCSSでデザインするのようなものもありますが、「平均値を表現するのには向いていない」「HTMLファイルの更新を行いたくない」という理由により、JavaScriptで幅を指定する方式を採用しています。

具体的には以下のようなHTMLとCSSを利用します。

<p class="sbrating"><span id="sbstar_id">
「サンプル記事」の評価です。
</span></p>

マークアップ

/* [entry rating extra style sheet] */
.sbrating {
  display: block;
  width: 100px;
  height: 20px;
  background-image: url(sbstar-back.gif);
  background-repeat: no-repeat;
  background-position: 0% 0%;
}
.sbrating span {
  display: block;
  width: 0px;
  height: 20px;
  overflow: hidden;
  background-image: url(sbstar-active.gif);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  text-indent: -9999px;
}
.sbrating span.hover {
  background-image: url(sbstar-hover.gif);
}
ul.status {
  clear: right;
}

スタイルシート

.sbrating spanの幅が「0px」になっていますが、これはJavaScript側で制御するためです。

これで土台となる表示部の実装は終了で、後はJavaScriptで条件に応じて幅を変えてあげればよいだけになります。

動作の流れ

記事評価スクリプトは、以下のような流れで動作します。

1. HTML ロードに伴い、sbstar-script.js がロードされる。
2. 評価を表示する要素( class 属性が sbrating である要素)を確認して、初期化する。
3. sbstar-script.jsより、XMLHttpRequestを起こして、sbstar.txtを呼び出す(Ajax)。
4. 該当する id が存在する場合には、評価部分をアップデートして、評価値を表示する。
5. 記事評価がクリックされたら、受付処理を行うスクリプトに評価値を渡す(Ajax)。
6. 受付処理でデータを更新したら、処理終了通知を返す。
7. 3. に戻る。

受付処理は CGI スクリプトですので、そこだけ動的に処理されます。逆に言えば、受付処理が行わなければ、ブラウザからは静的に生成されたファイルにしかアクセスされません。

この過程では、HTMLファイルの更新は行われないようにしています。sb/Serene Bach では、ひとつの記事がひとつの HTML ファイルだけに存在するとは限らないので、HTML ファイルを更新するプロセスをいれると、どうしてもその分重くなってしまう可能性を捨てることができません。

Serene Bach「記事評価」プラグインでは、管理画面で評価された記事の情報を確認することができます。これも受付処理で更新されたプレーンテキストのデータ(sbstar.txt)を読み込んで整形処理しているだけです。

mouse over/move イベント処理

JavaScriptの処理として、ポイントとなるのは、mouse over の処理でしょうか。

上記手順、2. の初期化の段階で、該当する要素(記事評価を表示する要素)に対して、マウスイベントを処理する関数を登録します。

該当要素にマウスカーソルが当たっているときには、マウスカーソルの位置に応じて星の数を変化させる必要があります。

この時、対象とするマウスカーソルの位置は、あくまでも要素内での相対的な位置だけを取得する必要があります。

ブラウザウィンドウ内でのマウスカーソルの位置は event.clientX(event.clientY) で取得できますが、あくまでもウィンドウ内での位置です。これに対して、対象要素の表示位置を考慮する必要があります。

ここで event とは、イベントハンドラに引数として渡される変数ないしは window.event で取得できる、イベントオブジェクトを指しています。

対象要素が絶対配置されている場合は、offsetLeft プロパティを利用すれば、ほぼ取得可能です。しかしながら、対象とする要素が、必ずしも絶対配置されているとは限りません。むしろそうでないケースの方が多いでしょう。

そこで、要素の位置を以下のようなコードで取得します。Internet Explorer 6.0以降, Safari 2.0以降, Opera 9.0, Firefox 2.0 で動作を確認しています。

  var x = obj.offsetLeft;
  var parent = obj.offsetParent;
  while (parent)
  {
    x += parent.offsetLeft;
    parent = parent.offsetParent;
  }
  return x;

ここで、obj は、対象とする DOM オブジェクトを指します。

offsetParent プロパティは、表示位置に関連している親 DOM オブジェクトを返します。これをルートまで辿っていけば、最終的な表示位置を取得できるという仕組みです。

上記サンプルコードでは、x 座標のみを対象としていますが、y 座標に関してもほぼ同様な方法で取得できます。

これで得られた対象要素内でのマウスカーソル位置を利用して、対象要素の幅を動的に変えてあげれば、★の数の表示が可能になります。

本エントリとはてなスターは、関係ありません。

クリックしても何も起きませんので、あしからず。

とりあえず、javascriptとCSSの実装はこんな感じ？でしょうか。

スタイルシートが更新されているので、もしマウスオーバーで星の数が変わらなかったら、リロードしてみて下さい。

[2007/07/26] 追記

とりあえず、評価投稿処理も追加して形にまとめてみました。

ですので、上で置いていた試作スクリプトは削除しています。

機能の割に仕掛けなどやや大げさな感じもしますが、こんなもんでしょうか。

仕組みについては後日時間があれば、触れたいと思います。

はてなで新しく始まったサービス、はてなスターを早速つけてみました。

設置方法については[観] はてなスターを設置してみましたで詳しく紹介されていますので、そちらを参考に。

Hatena Starとはてなスターでは、データが共有されているようです。Hatena Starで登録したブログは、はてなスターでも見れました。

はてなスターでは、コメントの機能が利用できますが、はてなスターと同時に始まったはてなメッセージの機能を利用しているようで、そのコメントははてなメッセージでも確認することができるようです。

賛否両論ある「はてなスター」のサービスですが、とりあえず、しばらく様子を見てみようかと思っています。各所で言われているように、現状の仕様では、星の数が記事の評価につながるかというと微妙な感じですね。

[2007/07/26] 追記。独自の記事評価スクリプトを導入したので、はてなスターを外しました。ご了承ください。

SimpleBoxesは、sbで運用しています。

Serene Bachではなく、あえてsbで運用しています。

sbのアクセス解析でどのログにアクセスが多いかは大体分かるのですが、アドレスが並んでいるだけなので、ちょっと分かりづらい。

そこで、アクセスの多い記事をリスト表示するスクリプトをでっち上げてみました。

javascriptを利用して表示するという形式を取っています。perlスクリプトをCGIとして動的に出力していますが、アクセスログが結構なサイズになるので、適時キャッシュするようにしています。

折角作ったので、ソースならびに簡単な説明を「続き」に載せておきます。

ただし、このスクリプトは汎用性はあまりありません。アクセスログの形式が異なるためSerene Bachでは動作しませんし、単一のログディレクトリのみが対象となります(カテゴリーなどで別ディレクトリに保存している場合、対象とならない)。

それでもよければ、ご自由にお使いください。

sbのデフォルトテンプレートをWordpressに移植してみました(ダウンロード)。

単に移植するだけでは、面白くも何ともないので、テンプレートの書式も移植しています。

ツールが異なりますので、全ての書式を完全には再現できていませんが、それなりにそれっぽく仕上げたつもりです。

sbデフォルトテンプレートで使われていない独自ブロック・独自タグもいくつかは移植してありますので、「base html template」(_base.php)ならびに「スタイルシート」(style.css)を編集することで、Serene Bach/sbのテンプレートをそのまま使うこともできるかもしれません(できないかもしれません)。

「base html template」(_base.php)には、Serene Bach/sbで言うところの、ベースHTMLテンプレートの内容が入ります。いくつかのSerene Bach/sbの独自ブロック・独自タグが利用できる代わりに、phpコードを含めることはできませんので、注意して下さい。

sb likeには、phpに移植したSerene Bachと互換性のあるテンプレートエンジンが内包されています。

テンプレートの解析処理などが入るので、Wordpressの標準的なテンプレートよりも遅くなると思うのですが、手元のごくごく簡単なテストでは、速度低下は見られませんでした。

「続・静的生成と動的生成、Webページをビルドするコストは誰が支払うべきなのか」で、少し話題になったので、以前も触れたことがあるような気がするのですが、もう一度。

sb/Serene Bachを作成する上で、htmlファイルを静的に生成するという仕様は、決めていました。

とはいえ、全てのファイルを静的には生成しないというのも決めていました。

ログとして残す部分を静的に生成して、カテゴリーやアーカイブなどは冗長になる部分は、動的に生成(cgiによる出力)してしまえばよいと考えました。今でも基本的にその考えは変わりません。

最新の記事・コメントやトラックバックなどを表示するリストは、常に新しい情報を載せておくのが望ましいと思うので、ここは少しだけ悩んだのですが、最終的にはJavaScriptとして出力する形を選んでいます。

sb/Serene Bachでは、テンプレートのhtmlパートを変更するなど再構築を必要とする操作をしない限り、通常の記事更新で変更または生成される静的なファイルの数はどんなに記事が増えても一定になるようになっています。

しかしながら、データのロードなどが行われるので、実際の記事数には限界があります。また、Serene Bachではカテゴリーの設定によっては静的に生成されるファイルの数が増えます。

インストール直後のデフォルト設定(保存形式:Individual、カテゴリーインデックスなし)でしたら、

• htmlファイル : 記事ファイル 3 つ・トップページ
• jsファイル : 8 つ
• feedファイル : 2 つ

の計14つのファイルが静的に生成(あるいは更新)されます。

前述の通り、カテゴリーの設定によって増えますが、一度設定を確定した後は、基本的にそう変わらないはずです。

このサイトの前身・EasyTalkでは、Movable Type 2.*で数ヶ月間だけですが、運用したことがあります。

こちらで公開している「sbtext for Movable Type」は、その時の名残です。

その時も基本的な運用方法は変わりませんでした。

• ログは月別アーカイブだけにする
• 他に静的に生成されるファイルは、トップインデックス(index.html/index.rdf)のみ
• コメント・トラックバックを表示する個別記事表示にはmt.cgiを利用する
• カテゴリー・検索表示には独自に作成したスクリプトを利用する

という結構変則的な運用をしていました。

Movable Typeはかなり柔軟なウェブログツールですので、このようにSerene Bachと似たような構成にすることも可能ですね。今はphpによる動的生成もサポートしていますので、もっと効率の良い運用方法も可能なのではないでしょうか。

Movable Type 3.*/4.*は、ほとんど運用したことがないので、上述の2.*系運用時からの予測でしかありませんが。

JavaScriptでCSSスタイルを取り扱うライブラリstyle.jsを自作していました。

今回、IT戦記にて書かれた、getComputedStyleについて調べてたら深みにハマったのでメモという記事を参考にバージョンアップしてみました。

使い方は簡単です。style.jsで定義されたStyleのインスタンスを取得して、任意のCSSプロパティを指定します。

<script src="style.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
var style = new Style();
style.set('color','red'); // set メソッドでスタイルを指定
style.set('background-color','white'); // set メソッドではプロパティ名は CSS 書式と同等
style.set('borderColor','blue'); // JavaScript 書式のプロパティ名ももちろん使えます
var hoge = document.getElementById('hoge');
style.affect(hoge); // affect メソッドでスタイルを hoge に割り付ける
var fuga = document.getElementById('fuga');
style.importStyle(fuga); // fuga からスタイルを取得する
style.affect(hoge); // fuga のスタイルを hoge にコピー
// ]]>
</script>

Styleのサンプルコード

特定のスタイルをバッファしておいて、DOMオブジェクトに適用するという感じの利用方法を想定しています。

style.jsは、以下のようなスクリプトになります。

// spica javascript libraries - style.js
// == written by Takuya Otani <takuya.otani@gmail.com> ===
// == Copyright (C) 2006 SimpleBoxes/SerendipityNZ Ltd. ==

function Style()
{
  this._style = {};
  return this;
}
Style.prototype = {
  set : function(elem,value)
  {
    this._style[this.camelize(elem)] = value;
    return true;
  },
  get : function(elem)
  {
    return this._style[elem];
  },
  getStyle : function()
  {
    return this._style;
  },
  importStyle : function(object)
  {
    var style = object.currentStyle || document.defaultView.getComputedStyle(object, '');
    if (!style) return false;
    var property = StyleProperties();
    for (var i=0,n=property.length;i<n;i++)
    {
      if (style[property[i]] != undefined)
        this._style[property[i]] = style[property[i]];
    }
    return true;
  },
  affect : function(object)
  {
    if (!object || !object.style) return;
    for (var elem in this._style)
    {
      object.style[elem] = this._style[elem];
    }
  },
  camelize : function(name)
  {
    if (!name.match(/-/)) return name;
    return name.replace(/-(\w)/g,function(str,chr) { return( chr.toUpperCase() ) });
  }
};

強調したStyleProperties()は、CSS level 2プロパティ一覧を返す関数です。style.js内で定義しますが、長くなるので内容は「続き」に。

わざわざ配列として定義しなくても済めばいいんですが、SafariだとgetComputedStyleで取得したstyleオブジェクトに対して、inで回しても、プロパティのリストが返ってきません。

Safari 2.0.4で確認。Safari 3.0では、異なる結果でしたが、プロパティのリストが返ってこないのは、現状では一緒でした。

var style = object.currentStyle || document.defaultView.getComputedStyle(object, '');
for (var property in style)
{
  document.write([property,' : ',style[property],'<br />\n'].join(''));
}

上記のようなコードを実行しても、「color」や「backgroundColor」のような値はpropertyに現れません。しかしながら、style['color']と指定すると、ちゃんとカラーコードが返ってきたりします。

上述の理由のため、StyleProperties()というプロパティのリストを返す関数を定義します。必要ないプロパティは削ってしまうというような使い方もできると思います。

Finderの代わりにファイラーとして、Path Finderを常用しています。

Path Finderは高機能なファイラーという位置付けでUS$34.95のシェアウェアです。

様々な機能があり、ポイントとなる点はユーザーによって異なるでしょうが、以下の機能が気に入っています。

• ターミナルドロワー
• ドロップスタック
• パスナビゲータ
• スマートソート
• タブ
• アピアランスの変更

そして、先日にはPath Finder 4.7がリリースされました。いくつか注目に値する機能が追加されています。

ターミナルドロワー

ターミナルドロワーは、ブラウザウィンドウ上で開いているディレクトリに対して、その場でターミナルを開くものです。

まず、ターミナルのアプリケーションを別途立ち上げる必要がなく、開いているディレクトリがブラウザウィンドウとリンクしているので、視覚的にも分かりやすくなります。

ただし、ターミナル上でcdコマンドを利用してもブラウザウィンドウは追従しません。

ドロップスタック

ドロップスタックは、サイドバーに表示されるファイルバッファです。

NeXTSTEPというMac OS Xの前身にあたるOSのファイルブラウザには、シェルフと呼ばれる機能がありました。シェルフの見た目は、Finderのツールバーとほぼ一緒なんですが、ファイルの一時置き場としても利用できました。

あるファイルを別のディレクトリに移動させたい場合、シェルフに一時的にファイルを置いておきます。そして、ブラウザで移動させたいディレクトリを表示して、シェルフに置いたファイルを移動先にドラッグ&ドロップします。

つまり、移動させたいファイルをマウスクリックでホールドしたまま、移動先を探すというようなことをしなくて済みます。WindowsのExplorerでも、同じようなことがファイルのコピー&ペースト(あるいはカット&ペースト)操作でも可能ですが、シェルフに置くことで視覚的にはっきりと認識できることなどの利点があります。

Path Finderのドロップスタックは、まさにNeXTSTEPのシェルフを実現したものです(表現方法はやや異なります)。スタックにファイルを一時的に置いておくことができます。

パスナビゲータ

パスナビゲータは、現在ブラウザで表示しているディレクトリ階層を視覚的に表示するものです。

カレントディレクトリはハイライト強調されます。

コンテキストメニュー(右クリックメニュー)で、パスをクリップボードにコピーしたり、選択したディレクトリの内容を表示することも可能です。

スマートソート

Finderでは、カラム表示の際、項目のソート順を設定することはできませんが、Path Finderでは、ソート項目を設定することができます。

また、スマートソートという機能が実装されていて、フォルダ・アプリケーション・パッケージ・ファイルというグループに対して、ソート項目に関わらず、表示順を固定することが可能です。

カラム表示は、その性質上、フォルダはまとまっていた方が扱いやすいと思うので便利です。

タブ

Path Finderは、タブをサポートしています。

ひとつのブラウザウィンドウ内で複数のタブを利用することができます。

ドロップスタックと併せて利用すると、異なるタブ間でのファイルのやり取りも効率よくできると思います。

もちろん、Path Finderはスプリングロードにも対応しているので、ドロップスタックを利用しなくても使い勝手は悪くありません。

アピアランスの変更

私はブラッシュメタルなアピアランスがあまり好みではないのですが、Path Finderでは、もちろんアピアランスを好みに応じて変更できます。

Finderでも、実はツールバーを非表示にすることで、ブラッシュメタルではなく、アクアなアピアランスに変更されます。

しかしながら、そのような動作にするのかいまいちよく分かりませんし、ツールバーとサイドバーをなくすと使い勝手も今ひとつな印象があります。

Path Finder 4.7の追加機能

先日リリースされたPath Finder 4.7には、いくつか興味深い機能が追加されました。

公式サイトのアナウンスによると……

• 情報ウィンドウの刷新
• Subversionプラグイン
• アプリケーションランチャーの実装
• ターミナルの刷新
• Safariでサポートしているウェブアーカイブファイルのプレビュー機能の追加
• カラム表示での動画・音声ファイルのプレビュー

という機能が追加されました。

Path Finderの情報ウィンドウは、Finderと比べて劣っている部分だったのですが、これが同等以上の機能を持つようになっています。

Sbversionプラグインは、Path Finder上で動作するsvnのフロントエンドのようなものです。

これがあれば、svnXが要らないかも！と思ったのですが、当方の環境ではうまく動作してくれませんでした。

エラーメッセージにUTF-8とあるので、文字コード絡みのエラーでしょうか。

アプリケーションランチャーは、これまでのPath Finderにあった、アプリケーションメニューの代わりになるもののようです。

「移動(Go)」メニューの「アプリケーションを起動...」より立ち上げることができます。

グローバルホットキーとしても利用でき、どのアプリケーションからでも起動することも可能です。

表示までやや間が空くところが少し残念。

機能としては、Quicksilverの廉価版といったおもむきです。アプリケーション一覧が表示され、テキスト入力でフィルタすることができます。

起動中のアプリケーションは青枠で囲まれています。

WWDC2007のキーノートにて、Windows上で動作するSafari、Safari 3.0 for Windowsが発表されました。

さっそく試してみたので、簡易レビュー。

日本語版Windows XPでの、日本語表示について検証した内容を追記しています。Safari RSSリーダー上でも日本語を正しく表示できるようになります。

• 追記その1 : 日本語表記について
• 追記その2 : 日本語表記に関する検証と対策
• 追記その3 : Safari RSSで日本語を正しく表示する方法

[注意!]Safari 3.0.2が公開されていて、日本語の表示に関してほぼ問題なくなっており、当記事の内容は古くなっています。

Safari 3.0 for Windows 簡易レビュー

Safariのページよりダウンロードしました。アーカイブのサイズはWindows版が7.9MBで、Mac OS X版が14.5MB。Mac OS X版の方が倍近いですが、これはUniversal Binaryだからでしょうか。

Windows版は、インストーラーがダウンロードされます。起動して、インストール先やらを選択します。

インストールが終了すると、デスクトップなどにアイコンが置かれます。

インスールされたファイルを見ると、WebKitの他にSQLiteのライブラリもあり、SQLiteを内部で利用しているのが伺えます。

CoreGraphicsやCoreFoundationというMac OS X由来と思われるライブラリも興味深い。今後、他にもMac OS Xから移植されるアプリケーションが出てくるんでしょうか。

早速起動してみます(次のスクリーンショットは実際の大きさの画像にリンクしています)。

まず、一目でフォントの描画が(Internet ExplorerやFirefoxとは)違うことが分かります。サイズを小さくしてもアンチエイリアスがかかる表示になっています。

アンチエイリアスのかけ具合は設定で変えることができますが、ビットマップな表示はできない様子。ここら辺はAppleのこだわりなんでしょうね。

特に新しいフォントがインストールされた形跡はないようですが、MSゴシックとか使っているんでしょうか、これ。

パブリックベータらしく、バグ報告用のボタンがツールバーにあります。

続いて、手元のテストページを表示してみます。

Mozilla/5.0 (Windows; U; Windows NT 5.1; ja) AppleWebKit/522.11.3 (KHTML, like Gecko) Version/3.0 Safari/522.11.3

Safari 3.0 for WindowsのUser Agent

このページでは日本語が化けていますが、原因不明です。

っていうか、UserAgent文字列、長いなぁ〜。

初めてSafari 3.0 for Windowsを利用するはずなのに、アドレスバーに履歴が表示されます。おそらくInternet Explorerからアドレスの履歴を持ってきているんだろうと思われます。

設定はEditメニューから開きます。iTunesなどと一緒です。

設定ウィンドウで設定できる内容はMac OS X版もWindows版も大差ない様子です。

Safari以前でもAdobeのApollo(AIRに改名)など、WebKitを利用したブラウザはありましたが、Safari3 for WindowsはさすがにApple純正ということもあって、より「らしい」表示になっています。

面白いのは、テキストエリア。マウス操作により、リサイズが可能になっています。これはMac OS X版でも同様のようです。

スクロールバーなどもアクアな表示になっていて、「プチMac OS Xの世界」って感じでしょうか。ここら辺はiTunesなども一緒ですね。

まだ、動作などは若干不安定な感じがしますが、結構本気で作っている印象は受けるので、これからに期待でしょうか。

関連しそうな話題……

• Mac OS X上で動作するウェブブラウザのまとめ

他所様のサイトでのお役立ち情報

• Safari for Windowsを試してみる
• Safari for Windows betaで日本語表示する方法

[追記その1]

すでに各所で報告されていますが、Windows XP 日本語版では、日本語フォントが正しく表示されないケースがあるようです。

[注意!]Safari 3.0.2が公開されていて、日本語の表示に関してほぼ問題なくなっており、当記事の内容は古くなっています。

実際、当方のMacBookにインストールしているWindows XP Home日本語版では、うまく日本語が表示できませんでした。選択してコピーすると、きちんとペーストはできるようなので、表示だけがとりあえずうまくいっていない印象です。

解決方法に関しては、決定的な方法はない感じがします。最速インターフェース研究会さんで触れられている方法を試しましたが、当方の日本語環境ではうまくいきませんでした。Parallels上だからというのも影響しているかもしれません。

ところが、Windows XP英語版では、特に何かしらの設定をしなくても、日本語など綺麗に表示されます。Safari内臓のRSSリーダーもほぼきちんと動作している様子です。

このことから推測して、Microsoft AppLocaleで「English」を指定してSafariを起動させてみたりもしましたが、症状は改善されませんでした。後でParallelsの設定をいじってみる予定です。

なお、日本語入力はWindows XP日本語版・英語版どちらもできないようです。他で日本語入力して、ペーストする方法でしか日本語そのものをフォームに流し込む方法はない様子。これはツールバーの検索欄も同様です。

[追記その2]

Safari 3.0 for Windowsで日本語が表示できないというのを見かけますが、正確には以下のような感じのようです。

[注意!]Safari 3.0.2が公開されていて、日本語の表示に関してほぼ問題なくなっており、当記事の内容は古くなっています。

Win Safariで日本語フォントを指定する方法β | Blog hamashun.comでも検証されています。

英語版Windows XPで動作させた場合、日本語はほぼ問題なく表示されます。タイトルに含まれた日本語も動作しますし、「テキストエンコード」メニューも英語でばっちり表示されます。

Windows Vistaでの動作は未確認です。Windows Vistaでは、Windows XPと異なり(Mac OS Xと同様に)、インタフェースを完全に英語に切り替えることができるはずですので、日本語で問題であれば、英語に切り替えて起動したら正しく動作するかもしれません。

日本語版Windows XPで動作させた場合、いくつかの条件によって日本語が正しく表示できなくなるようです。

アプアランス設定で、日本語を含む名前のフォントを指定した場合(例えば「MS ゴシック」)⇒Safari for Windows betaで日本語表示する方法で言及されています。

従って、まず、MS UI GothicもしくはOsakaなど、英数字だけで名前が構成されているフォントを選ぶ必要があります。

しかし、これでもまだ日本語が正しく表示されない場合があります。これはおそらくスタイルシートの設定が問題です。

例えば、SimpleBioxesは、日本語版Winodws XP + Safari 3.0の組み合わせで表示できない典型的なサイトでした(今は修正済みです)。

結論としては、以下のスタイルが原因でした。

h1,(中略)
blockquote {
  /* except MacIE \*/
  font-family: "Lucida Grande", sans-serif!important;
  /* end for MacIE */
}

これは以前Mac OS X上で動作するGecko系ブラウザでフォントの高さがうまく表示されないというバグに対処するためにいれたスタイルでしたが、これが今回Safari 3.0 for Windowsに対して悪影響をもたらしていました。

ざっくりと検証すると、

* {
  font-family: sans-serif;
}

こんなスタイルも引っかかります。あと日本語が表示できないフォントを指定した場合に、そのフォントが存在し、さらに日本語が使われていると表示できない様子です。

本来はユーザーが指定したデフォルトのフォントで表示すべきかと思われます。

ただ、以下のようなちょっと不正なスタイルだと、現状のSafari 3.0 for Windowsでは効果があります。

* {
  font-family: , sans-serif;
}

「sans-serif」の前に「,」を置いただけ。おそらく、その行が無効になるため。

以上、簡単な検証でした。もしご自身のサイトがSafari 3.0 for Windowsで表示できないという場合、スタイルを見直してみて下さい。

とりあえず、以下の指定が無難です。

* {
  font-family: "MS UI Gothic", sans-serif;
}

[追記その3]

上記の変更を施しても、Safari 3.0 for WindowsのRSSリーダー上では、Safari固有のスタイルが適用されるため、日本語が正しく表示されません。

[注意!]Safari 3.0.2が公開されていて、日本語の表示に関してほぼ問題なくなっており、当記事の内容は古くなっています。

この「Safari固有のスタイル」を変更すれば、Safari RSSリーダー上でも正しく日本語を表示できます。

具体的には、C:\Program Files\Safari\PubSub.resources\Main.cssを変更します。

もちろん「C:\Program Files\Safari\」の部分は、インストール先によって変わります。

Main.css内部に

Helvetica, sans-serif

という記述が7カ所程あります。これを以下のように変更します。

"MS UI Gothic", "Helvetica", sans-serif

これでMS UI Gothicが表示フォントとして、適用されるので、Safari RSSリーダー上でも日本語が正しく表示されるようになります。

以上の点に気をつければ、とりあえず、実用というレベルではないと言われているのも少し改善できるのではないでしょうか。

実際、英語版Windows XP上でしたら、若干動作の不安定さは感じますが、十分使える印象です(日本語入力はできないので、その点はどうしようもありませんが)。

当ページでは、他の多くのウェブページと同様、CSSならびにHTMLを利用しています。

私はperlでスクリプトを作成しますが、その際、perlのコーディングルールは、明文化していて、できるだけ分かりやすいコードを記述するように心がけています。

今回、perlと同様にCSSならびにHTMLについてガイドラインを作成してみました。

• HTMLコーディングガイドライン ver 0.00 [日本語]
• HTML coding guideline ver 0.00 [English]
• CSSコーディングガイドライン ver 0.00 [日本語]
• CSS coding guideline ver 0.00 [English]

HTMLに関しては、属性に対しての出現順序がメインのルールになります。XHTML 1.0 Strict DTDが一番の参考文献でしょうか。

我的春秋: 論理構造を文脈に読み換えながら class 名を考えるで触れられているようなclass名の命名規則も明文化しようかとも思ったのですが、今回は保留しています。

CSSのコーディングガイドラインについては、すでにいくつかのウェブサイトで触れられているようです。

• スタイルシートを書く時のガイドライン
• CSSコーディング・スタイル
• CSS2 Specificationでのプロパティの出現順序

上述のウェブページを参考にして、自分なりのスタイルを取り入れた感じです。

折角ガイドラインを作成したので、まず手始めに当ページに適用してみました。

CSSやHTMLのソースを見ていただくと分かりますが、適用しているガイドラインも明示しています。HTMLでは以下のようなlink要素を使っています。

<link rel="guideline" href="http://serennz.sakura.ne.jp/guideline/html_en_00.txt" />

ちなみにCSSに関しては、今回のコーディングガイドラインを利用する際、miのCSSモードの「見出し行」設定に、以下の正規表現を追加すると、使い勝手が大幅に向上します。

^\/\*\s\[(.*)\]\s\*\/