こーひーをぶんなぐれ！ - Work/TechInfo/rnote

rNoteデフォルトのCSS

rNoteデフォルト付属のCSSは，さすがに出来がいい．
しかしながら，フォント指定がWindows対象のみになっており，OSXや他のUnix系OS+Firefoxを使用している人間には多少不満が残る．
その点は，今までもヒラギノフォントを有効活用する方法などの記事で書いてきた通りである．

Refine作業に至った経緯

最近，もう一度rNoteを初期状態でインストールしなければならない事態になった．
過去のデータは基本的には残っていない．(ローカルから過去のデータをほじくり出すという作業が侵攻中ではあるが……)
再びデフォルト状態のCSSからいじることとなったわけである．
そこで，せっかくの機会なので，主にフォント関係を考慮して，デフォルトのCSSを改良して，rNoteデフォルトっぽさを残しつつ，見栄えを改良するということをやってみた．

概要

• rNoteデフォルトらしさ(どんなんだ？w)は失わずに，見栄えを多少改良．
• itemにh4~5を追加．
• ソースコード用preの追加．
• blockquote内での各要素の追加．
• 基本的に，OSXでSafari……というよりもヒラギノフォントを使用している状態での見た目を重視している．
• なので，閲覧者がWinユーザのみの場合，その意味はほとんどない．
• とはいえ，もちろん他のOS+ブラウザでのチェックもきちんと行っている．
• コードとしては汚い．(もっと完結に書くことが出来るはず)

ダウンロード

このrNoteサイト(こーひーをぶんなぐれ！)のstyleディレクトリより
style-sites_default_refine.css

ヒラギノフォント

OSXの日本語環境標準である，ヒラギノ，特に角ゴシックと丸ゴシックは本当にいい感じだ．
明朝体も，印刷用途としては非常に優れたフォントだと思う．

ただ，問題がある．
一度ヒラギノの味を知ってしまうと，もうそこから抜けられなくなるのだ．

というわけで，Webで積極的にヒラギノ角ゴとヒラギノ丸ゴを使うためにはどうするか，という話になる．
常に，ヒラギノでbold表示出来るものを優先的に書かなきゃ行けない．

ええ，まぁ，別にrNoteの話ではないです．
通常使うゴシック体について．

他のOSを考慮に入れると…？

さて，Winの人はIEを使おうがGeckoを使おうが，ブラウザで使うのはほぼMS P Gothicで決め打ちでさほど問題はない．
てか，それ以外のフォントを使おうとする人なんているのか？

問題は，Unix系である．
まぁ，大抵の場合，Geckoになるはずだ．
で，フォントは何を使うかというと，
PC Unix系ならば，東風代用になる．
しかしWinからMS Gothic，MS P GothicとMS UI Gothicを持ってきている人も必ずいるはず．
もしくは，商用フォントを使うか…という所だ．
僕が想像するようなセッティングにしているヤツは他にはまずいないだろう．
だけどまぁ，念のため，頭にHiragino Kaku(Maru) Gothic Pro W3(W4)と入れておく．
(ただし，それだとboldが表示できないのだが…それは諦めるしかないか，後述する方法を使う)

したがって，記述するべき順番は，
Hiragino Kaku Gothic Pro W3 > MS P Gothic > sans-serif
となる．

OSXは卑怯だ！

さて，ヒラギノフォントのパッケージングの問題があって(boldとかがセットになってなく，全部バラバラ)，
SafariとFirefoxの1.0からは，かなり卑怯なことをやっている．
実際のファイルは，プロポーショナルでもW3とW6だったか二つの幅が別にパッケされているのに，
フォントパネルには，まとまって表示されるのだな．
つまり細いW3が通常フォントで，太いW6は便宜的にboldとして扱われるのだ．
SafariとFirefoxどちらも，ここで表示されているものを使う．
(記述するには，太さを抜いてHiragino Kaku Gothic Proとなる．
てなわけで，boldを使いたいのなら，まとまったフォント名を記述する必要がある．
しかも，これはバラバラのものより優先順度が高くなければならない…はずだ．

つまり…

CSSのフォントファミリには，
"Hiragino Kaku Gothic Pro","Hiragino Kaku Ghothic Pro W3","MS PGothic",sans-serif;
の順番で書くのがいいということになる．

boldの問題をどう片付けるか？

しかしまぁ，Unixとかに突っ込んだヒラギノフォントは，boldが使えないという問題があるので，
そこをどう解決するか…なんだけど．
結局僕が考え付いたのは，大きさと色使いで圧迫感を変えるしかない，というぐらいである．

つまり，通常使う文字は，ホンのちょっと色を薄くしておいて，
boldにしたい部分は，それよりももうちょっとだけ大きく，真っ黒にしておく，というわけ．
これで，擬似的にboldを表示することができる．

だから結局なんなのだ？

LinuxのFirefox，OSXのSafariとFirefox，WinのIEとFirefox，
合計5種類でチェックするのは大変だったなぁ…という愚痴．

素直にMS P Gothicとsans-serifだけ書けばいいじゃないか，って？
いやぁ，絶対にヒラギノ丸ゴシック使いてぇ！と思っちゃったのよ．

Safariのフォント指定の不具合

やっぱり確認されているようです．
v125.9で確認とのことのようですが，v125.12でも直っていません．

本家でも使われている記事中にサムネイルを表示して，画像本体へのリンクを張る，というヤツ．
僕なりにやってみるとこうなった．
サムネイルは別途生成しておくって感じで．その方が負担少ないかな，と思ったので．
色々な所のソースを組み合わせて，こうすりゃいくはずだって書いただけなので，PHPの変数取得の概念やらタグの属性云々やらXMLの規制とかいうのは，まったくもってわかっていません．悪しからず．

これがスキン．

<div class="item">
<div class="category">[<%=$Category%>]</div>
<h2><a href="<%=$Url%>"><%=$Title%></a> / 
   <span class="date"><%=$Date fmt="%Y-%m-%d (%a)"%></span></h2>
<table border="0" cellspacing="0" cellpadding="0" class="text">
<tr valign="top"><td class="DataAreaL">
<p><a href="<%=$ImageDir%><%=$Image%>">
   <img src="<%=$ImageDir%><%=$Thum%>" /><br /><%=$Image%></a></p>
</td>
<td>
<div class="text">
<%=$Text%>
</div>
</td></tr>
</table>
<%=$WriteBack%>
</div>
<hr class="sep"/>
	

で，これがそれに対応する記事．

<?xml version="1.0" encoding="UTF-8"?>
<rNote xml:lang="ja" xmlns="http://rinn.e-site.jp/rnote/">
  <Title>I Love Mac</Title>
  <Description>I Love Mac</Description>
  <Date>2002-10-13T00:00:00</Date>
  <Image>pb150.jpg</Image>
  <Thum>pb150.gif</Thum>
  <ImageDir>image/</ImageDir>
  <Text type="text/html"
    xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
    <p>
    I Love Macです.<br />
    これは,つくねさんの"I Love Macシリーズ"に影響を受けたもので,.....
    </p>
  </Text>
</rNote>
      

ろりぽの問題だと思うのだけれど，
標準のrnote_config.php内に書かれている

define(DATETIME_LOCALE, 'ja_JP')

ではうまく表示が出来ない．PHP側で受渡しに失敗しているっぽい．
従って，

define(DATETIME_LOCALE, 'en_US')

にするか，日本表示が良ければ，

define(DATETIME_LOCALE, 'ja_JP.UTF8')

と設定する．

nonki氏，ありがとうございました．