<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../test.xsl"?>

<article format="2002.0312">

<article_head>
	<article_id>d20204_1</article_id>
	<article_date><year>2002</year><month>02</month><day>04</day></article_date>
	<article_addr><sect>4</sect><subsect>22</subsect></article_addr>
	<article_subj>PHPによるサーバサイドのルビ制御</article_subj>
</article_head>

<article_body>
<p>この記事ではブラウザに応じて動的に最適のルビ用HTMLコードを生成するPHPを紹介し、それを一例に「PHPの生成物としてのHTML/XHTML/XML」について考える。</p>

<h4>PHPソース例</h4>
<div class="paper box">
<p>&lt;p&gt;あなたは&lt;?php ruby(&#39;妖精&#39;,&#39;フェアリー&#39;)?&gt;とか、何かそういったものを見たことがありますか。&lt;/p&gt;</p>
</div>


<h4>ブラウザのレンダリング例</h4>
<dl>
<dt>MSIE 6.0 SP1 beta</dt>
<dd>
<img src="../../../soft/php/ruby_ie.png" alt="IEではルビは文字のうえに乗る。" width="241" height="41" />
</dd>

<dt>Mozilla 0.9.8 beta</dt>
<dd>
<img src="../../../soft/php/ruby_mozilla.png" alt="Mozillaでは括弧内に小さな薄い文字で表示。" width="330" height="41" />
</dd>

<dt>Netscape 4.79</dt>
<dd><img src="../../../soft/php/ruby_n4.png" alt="Netscape 4 も Mozilla とほぼ同じ。" width="189" height="21" />
</dd>
</dl>
<p>ごらんのように、<code>ruby(<var>文字列1</var>, <var>文字列2</var>)</code> というコードで、<var>文字列1</var>に<var>文字列2</var>というルビをくっつける。スタティックなHTMLを使う通常の方法では、次のように書くこともできる。</p>
<pre class="paper2">
&lt;ruby&gt;&lt;rb&gt;妖精&lt;/rb&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;フェアリー&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;
</pre>

<p>PHPを使えば、ルビを上につけるか、かっこに入れるかで、別々にスタイルを指定できるように、中間生成物のHTMLを動的に変更できる。例えば:</p>

<dl>
<dt>1. ブラウザがIEなら</dt>
<dd>&lt;ruby&gt;&lt;rb&gt;妖精&lt;/rb&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;フェアリー&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;</dd>
<dt>2. それ以外なら</dt>
<dd>妖精&lt;span class=&quot;ruby&quot;&gt;(フェアリー)&lt;/span&gt;</dd>
</dl>

<p>HTMLとして原理的には2.の書き方が正しいというタテマエになっているが、現実問題として、IE5以降には1.のHTMLを与えたほうがレンダリングが最適化される（すでに画像を例示したように、ルビがちゃんとベース文字の上に乗っかる）。このルビのレンダリングは良い機能なので、ここではIEに対してはIE用のタグを送ってしまうことにしよう。例えば次のような関数定義をincludeしておけば良い。</p>
<pre class="paper2">
function ruby($rb, $rt) {
    global $HTTP_USER_AGENT;
    if( ereg(&quot;MSIE 5&quot;, $HTTP_USER_AGENT) || ereg(&quot;MSIE 6&quot;, $HTTP_USER_AGENT) ) {
        print(&quot;&lt;ruby&gt;&lt;rb&gt;$rb&lt;/rb&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;$rt&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;&quot;);
    } else {
        print(&quot;$rb&lt;span class=\&quot;ruby\&quot;&gt;($rt)&lt;/span&gt;&quot;);
    }
}
</pre>
<p>XMLでいえば、ちょうどXSLTにあたるレイヤだ。一般のUAを対象とする場合、クライアントサイドは信頼できないので、サーバサイドで変換して、クライアントには初等的なHTML+CSSレベルで送るのがぶなんだろう。しかし、Mozilla と IE に対しては同じページを XHTML や XML で送り、Netscape 4 に対しては HTML3.2 で送るようにしても良い。動的に処理する部分は増えるが、テーブルそのほかHTML4でNetscape 4に処理させると滅茶苦茶になる要素や属性について、それにみあった Netscape 4 用の最適化を行うこともできる。（現に存在する以上）非視覚系ブラウザや視覚障害者を困らせてはいけないのと同様、現に広く使われている以上、Netscape 4 のユーザを困らせるべきでない……たとえいかほど内心いまいましく思っていても……だ。なぜなら、わたしたちのミッションは良質な情報を提供することであって、“正しい”フォーマットを使うことそれ自体じゃないから……（もちろんあなたのミッションは違うかもしれないし、それはそれでかまわない。）</p>
<p>話を戻して、上記に対応するCSSは例えば次のようになる。</p>
<pre class="paper2">
.ruby {
    font-size: 80%; color: #393;
}
rt {
    font: 63.15789% &quot;ＭＳ ゴシック&quot;, &quot;MS UI Gothic&quot;, sans-serif;
}
a rt {
    text-decoration: none;
}
</pre>


</article_body>
</article>
