html_body.skin の中で、
<script src="lightbox2/js/lightbox.js"></script>
などと記述した場合、 HOME で記事一覧を表示中は問題ないが、サブカテゴリの記事を表示中には、ディレクトリ位置が変わるのでスクリプトを正しく読み込めないのが分かった。そこで、 rnote.php が存在する場所を / からの相対ディレクトリで返す、
<%=$site_dir%>
を追加した。これを使って、
<script src="<%=$site_dir%>lightbox2/js/lightbox.js"></script>
と記述することで、読み込まれたファイルのディレクトリが変わっても問題なくスクリプトを読み込める。
キーワード: rNote 置換命令 <%=site_dir%>
最近、いつまでたってもブログのカウンタが増えないなあと思っていたが、原因が分かった。
リファラが取得できなかった場合はページ内移動かどうかの判定が出来ないため、カウントアップをしないようにしていたのだが、なぜかその部分のコードを通っていたのでカウントアップされていなかった。
どうしてなのか調べてみると、「さくらサーバでのfilter_input(INPUT_SERVERの挙動が・・」のコメントによると、どうやら、 CGI 版の php では、
filter_input(INPUT_SERVER,'HTTP_REFERER')
などの INPUT_SERVER を引数に取るもの（ $_SERVER の値）が全滅するらしい。
$_SERVER['HTTP_REFERER']
に戻したら、以前のようにカウントアップするようになった。
ちなみに、「PHP filter_input(INPUT_SERVER, 'REQUEST_METHOD') returns null?」によると、 CGI 版では filter_input() を用いた場合 INPUT_SERVER, INPUT_ENV の値は取得できなくて、INPUT_GET, INPUT_POST, INPUT_COOKIE の値は取得できるそうだ。
キーワード: php CGI filter_input INPUT_SERVER bug
これまでは、 “YYYY-mm-dd (曜日) TT:MM:SS” の形式だったが、これだとどのタイムゾーンに属する場所での表示なのか、さっぱり分からない。「このブログを閲覧するのは日本国内からだけ」であれば、それでも問題ないのだが、海外からも閲覧されることを考えると、これではまずい。
ブログのホームのどこかか記事の日時表示の隣などに、「日本」と国名を表記するとか、いっそタイムゾーン文字列そのもの（ ‘Asia/Tokyo’ ）を表示するのもだめではないと思うが、それだと閲覧者は、自分の今いる場所での時刻と比べ、どれだけ差があるのか、やっぱり分からない。
そこで、のりさんの「朝顔日記」を参考に、記事の公開日時の表示形式を“YYYY-mm-dd (曜日) HH:MM:SS+HH:MM” のような形式に修正した。 “+HH:MM” の部分は、 UTC からの時差を表す。
この形式で時差を表示するために rnote.php 本体を改造する必要があると思っていたが、ソースを読むと、最初からこの形式での時差の表示機能が実装されていた。
rNote では、 html_item.skin ファイルに Date タグで日時を表示させる際の fmt オプションに “%z” を付けることで、この形式での時差が表示される。今回は "%Y-%m-%d (%a) %H:%M:%S%z" とした。
ソースコードの表示に便利な prism だが、一つだけ不便な点がある。
そのままだと、ソースコードの全ての行を表示する大きさで表示してしまう。これだと、短い行数のソースコードの場合はいいが、長い場合はちと困る。
行番号表示の場合、記事中の <pre> タグの要素として class=”line-numbers” と書けば行番号が表示されるようになるが、どうやらソースコード表示枠に表示する行数そのものを指定する方法は無く、しかし、 css で max-height プロパティに em 単位で数値を指定することで、 font-size プロパティで指定されている高さに対する倍率として指定することでソースコード表示枠の高さを変更でき、結果的に表示行数をコントロールすることができると分かった。
参考にした「JavaScript Prism.js: 表示する行数を指定する」のように、 prism.css を、
pre[class*="language-"] > code{
max-height: 32em;
overflow: auto;
}
のように修正し max-height プロパティの値を指定しても確かに実現出来るのだが、これだと、そのサイトで表示される全てのソースコード表示枠の高さが固定になってしまうので具合が悪い。
そうではなく、記事中にソースコードを埋め込む際に挿入する <pre> タグに、
<pre class="line-numbers" styles="max-height: calc(16px*1.5*31);">
のようにして、 <pre> タグの要素としてスタイルシートを埋め込むことで、ソースコード枠ごとに好きな高さを設定することができる。（現在のバージョンの prism では、 <code> タグに対し、 mex-height: inherit; と指定されているため。）
ちなみに、１行の正確な高さを取得して、「その３１行分」のように max-height を指定できないか、いろいろ試してみた。行高さを指定するプロパティ line-height があるが、 css では、
<pre styles="max-height: calc(line-height*31);">
のような書き方は出来ないようだ。非常に不便だが、上の例のように、ソースコード枠を表示したい場所での行高さを、即値を用いた計算で（それでも calc が使えるだけマシか）求め指定するしかないようだ。（ css のこのあたりの不便さはなんとかならないものか。）
また、ソースコードが表示枠からはみ出る場合にスクロールバーを出すためには、 overflow: auto; が必要だが、現在のバージョンでは prism をダウンロードした状態で既にそのように設定されているようなので修正不要。
こちらを参考に、「ブログにタグクラウドを追加してみた」の記事のソースコードの表示を、 prism にしてみた。
code-prettify と違い、 php にも対応しているので使いやすい。関数名に好きな色をつけたいと思って SyntaxHighlighter はどうかと試していたところだったので、ちょうどよかった。（ちなみに、 SyntaxHighlighter はいろいろなサイトの記事を参考に設置を試みたが、当サイトではどうやっても表示させることができなかった。）
導入はとても簡単で、 prism のサイトで使用する言語やプラグイン、テーマを指定し、 prism.css と prism.js をダウンロードしたら、 <head> ～ </head> の間で prism.css を下のように読み込み、
<link rel="stylesheet" href="prism/prism.css"/>
次に、 </body> の直前で、 prism.js を下のように読み込むだけだ。
<script src="prism/prism.js"></script>
既に公開した記事のソースコード表示も含め、順次置き換えていこうと思う。