QG : Akiary Labo

今まで、画像はサムネイルと２種類用意して、ポップアップさせていた。でもファイル数が多くなるのと、コードが長くなるのが気になっていたので、前回「チョコレートが！」は、ただの縮小画像を表示させて、クリックで実画像が同ウィンドウで開くシンプルな仕様にしてみた。カテゴリ「Out」みたいに写真数が多い時は、実画像を見ては戻っての繰り返しになるので、どっちがいいとは偏に言えないが。それから、実画像を読み込む事になるので、写真数の多い記事に対応する為、ぜひ「続きを読む」機能が使えると嬉しい。月毎表示ではdescriptionで表示させといて、「続きを読む」で個々の記事の表示に切り替えられるといった感じ。個々の記事表示は、kkojima氏の考案したcatecory機能のオプションで出来るようになったけれど、これの応用で何とかなるだろうか。過去の画像付き記事を直すのは手間だけれど、サイト改装とともにぼちぼちやっていきたい所。

あと、リンクをQG内は同ウィンドウでの移動にしていたけれど、target属性でblank指定しているのが、HTMLチェッカーでおすすめでない的評価が出ていたのが気になっていたので、どれも同ウィンドウ内移動にしようかなと、「忍道」からやってみた。早い話が、省略なんやけどね。（＊2005年10月19日追記：全て同ウィンドウ内移動に変更しています）

このブログで使っているAkiary開発者、YAMAMOTO Akira氏が以前不定期更新日記内で次期バージョン開発について触れられていたが、先日やーとWiki内で、Akiary改善欲求を語られていたので、期待したい。それにしても不定期更新日記のドラセナコンシンネ、久し振りに写真見たけど相変わらず全然変わっていないなあ（笑）。やーとWikiに今までの成長ぶりをまとめたページも設けられていたので、まとめて見るのも面白いかも。

こうさぎの画面を良く見て下さい。トラの敷物の上に、赤いハートのプレゼントが置いてあります。これ私がやったんじゃないですよ。最初に気付いた姉によると、昨日からあったらしい。つ・ま・り、バレンタインチョコレートってわけですね！メリーバレンタイン♪

BlogPetこうさぎも粋な事やってくれますね。いやいや、どうやらこの度KDDI株式会社と共同で「BlogPet」としてリニューアルオープンしたそうです。その旨のメールが届いていました。選べるペットは更に４種類増えたそうです。

さらに、ペットが記事を書くときにトラックバックを打ったり
あなたのBlogにコメントを書き込むようになりました。

ということで、秋頃調整してから全く日記を書かなくなってしまったウチのウトギちゃんも、なんぞ書いてくれるようになるのかなと、楽しみです。ブログもそろそろ弄ろうかなあ。

忍道 戒公式サイトを見て来ました。それまでは、もう侍じゃなきゃイヤーと言っていたけど、ちょっといい感じですわよ、コレ！ 主人公が鴉のゴウ。額の左辺りに鴉って書いてあるんや。てのはウソで、炎みたいな刺青なんやけど、烏な侍（こっちは額には烏と書いてあるが名前は違う）が好きな身としては、なんだか嬉しいぞー。といった感じ。侍道２の浮雲小太刀みたいな技が出来るようだし（忍者だからね）、自由度が高いってところに期待です。次回更新は2/25だそうです。

それにしても、まだゲームがいつ出るのか明らかじゃないのに、すでに忍道攻略サイトがあったとですよ。雑談専用掲示板だけオープンしてるみたいなんで、発売まで待ち切れないあなたは溢れる思いを吐き出して来て下さい。

JUGEMカスタマイズ講座の日付表示を制御するを参考に、同じ日付のエントリーに対して2個目以降のエントリーには日付を表示しないJavascriptを入れてみました。ヨッシうまくいった……と思っていたら、IEでうまくいっていない。WinとMacOSXのIEで変化なし。Safariなら完璧だったのですが、閲覧は圧倒的にWinのIE6が多いので、なにが変わったのと思われた事だろうなあ。みんなSafari使え←ムリ。JUGEMユーザさんたちはIE遣いが多いと思われ、しかし殆どの人が感謝の辞を述べている。一体何がアカンのかテスト中なのですが。

そして、解決したつもりのPRE問題が、IEでは横に伸びて行ってしまっていました。欄からははみ出ていないけれど、欄そのものが行の長さに引っ張られるように長くなっておーいどこまでスクロールすんのー状態。それから昨夜CSSの調整をしたのが影響して、IEではページが隙間なく画面一杯に広がってしまっていました。数々の試みの末、CSSではなくページ言語の問題だったことが判明。今まで普通にHTMLだったのを、XHTML1.0準拠へ。それまで問題のなかったCSSの適用法にするのも１つだけど、XHTML対応にもしようかなと思っていたところだったので。それにしてもPREタグって、両端のマージンを同じだけ取るようにするのが難しいですねえ。あんまりDIVで囲むのも好みじゃないので日記本文と同じ幅にする事にしました。

新刊の在庫もなくなったので、トップページでの宣伝もそろそろ引っ込める事にしました。代わりに、その場所へ表示させるものの候補がありました。isnot.jp/wikiのtDiaryテーマ対応テンプレートを見ていたら、最新記事を表示させるオプショナル日記が付いていたので、こちらを利用させてもらう事にしました。少しはブログっぽくなったかな？

HTML文書の文法チェックとPREタグ問題の時にakiary.cgiを改造した部分をメモします。文法チェックではBRタグが連続すると減点対象だったので、BRタグが２つあったらPタグに変換させるように、168行目（未改造の場合。以下同）から始まる「# 処理実行」の211行目「# 更新実行」に追記。まぐら日記の公開スクリプト参考。

$BODY{$dids[0]}=~s/<br><br>/<\/p><p>/g; # ふたつの改行を段落変えに変換

更に、編集画面ではプレーンな表示に戻すように、448行目から始まる「# 修正表示」の470行目「# 更新/削除」に以下を追記。

$body=~s/<\/p><p>/\n\n/ig;

他、Pタグで囲まれると都合が悪くなるPRE・UL・OL・BLOCKQUOTEは直前でPタグを閉じて、直後にまたPタグを開始するように211行目「# 更新実行」に追記。

$BODY{$dids[0]}=~s/<pre>/<\/p><div class=\"pre\"><pre>/g; # preの前にp閉じタグ＋divタグ
$BODY{$dids[0]}=~s/<\/pre>/<\/pre><\/div><p>/g; # preの後にdiv閉じタグ＋p開始タグ
$BODY{$dids[0]}=~s/<ul>/<\/p><ul>/g; # ulの前にp閉じタグ
$BODY{$dids[0]}=~s/<\/ul>/<\/ul><p>/g; # ulの後にp開始タグ
$BODY{$dids[0]}=~s/<ol/<\/p><ol/g; # olの前にp閉じタグ
$BODY{$dids[0]}=~s/<\/ol>/<\/ol><p>/g; # olの後にp開始タグ
$BODY{$dids[0]}=~s/<blockquote>/<\/p><blockquote>/g; # blockquoteの前にp閉じタグ
$BODY{$dids[0]}=~s/<\/blockquote>/<\/blockquote><p>/g; # blockquoteの後にp開始タグ

PREタグはMacOSX版IEでの不具合回避のため、DIVタグで囲む処理をしています。OL開始タグの囲みが片方しかないのは、type属性をつけたりしてタグ内の後半が変動するための対応。段落替えと同様、470行目「# 更新/削除」にその逆を追記。て、書いてみて思ったんだけど、これもっと省略できそう。動作に問題はないんで、そのうち直そかな。

それにしてもこうさぎ、前の投稿からかれこれ半月以上。あれからおかしく触ったつもりはないんだけどな。時々アップロードし直したりしてるけど、もう何が何だか。

公式サイトのサーバ現在落ちているようですが、前から、Web日記支援フリーソフトウェアtDiaryのテーマってのが気になっていました。例えば、はてなダイアリーのテーマとして選べるテーマ別によるスタイルシートサンプルとかは、これまた色んなのがあって見ているだけで楽しいのです。で、何となく自分とこの日記もCSSをtDiary互換にしてみようかなあと思っていました。

そんな作業を今日は一日中……。雨だったので出掛ける気力もなかったし。MTとかblosxomとかで使っていたクラス名とか自分で足したのとかで色々になってしまっていたので、整理しつつ、ふとIEで見てみました。PREタグで囲まれた領域がみんな枠だけになっているよ吃驚だぜ。実は、以前にも確か正常に表示されなかった覚えがあったのですが、後で直すつもりで忘れていました。調べてみると、PREが見えなくなった原因は、MacIE5 (含む OSX の IE5.1) のoverflow処理の問題らしい。

特定の要素に visible以外の overflow を指定すると要素の中身が見えなくなるそうです。特定の要素とは html, heading, p, pre, dl, blockquote, form, address で，逆に body, div, ul, ol では不具合が起こらないそうです。

CSS Frame test using overflowより。ということで、IE5.2.3でSafariと同様に見えるよう、調整。

pre {
margin: 0;
padding: 0;
}
.pre {
border: solid 1px #1939bd;
background-color: #ffffff;
overflow: auto;
padding: 1em;
margin: 0 3em 0 3em;
}

PREにはoverflowを指定せず、overflow指定をしたDIVタグ（ここではclass名は.pre）で囲み、<DIV class="pre"><PRE>○○○</PRE></DIV>と表記しました。

あとで調べてみたら、こんな解決例もありました。 @media 規則で囲ってあると古いブラウザに CSS は適用されないのを利用してブラウザ振り分けをしているらしい。

やっと何とか最新版日記ページからの記事毎アンカーが作れました。カテゴリ名の前にある「＋」です。過去記事で日付単位のリンクをして不都合だった方はご利用ください。昨日今日と改造した辺りをメモっときます。

まずは、バックナンバー用のアンカー。akiary.cgiの1145行目（未改造の場合。以下同）、「# body部作成」に、記事毎アンカー（$anchor）の項目を追加します。実際の日記では日付とタイトルの間にアンカーを表示させるつもりで同じ順番に記述しましたが、$tmp=$tmpbnbody;とprint FH "$tmp";の間のどこでもよろしいかと。

# 記事毎アンカー
$anchor="<a href=\"$file#$_\" >$anchormark</a>";
$tmp=~s/<!--\s*akiary_anchor\s*-->/$anchor/;

ここで、アンカーの形をあとでいじりやすいよう、$anchormarkという変数にしました。で、その変数の設定を89行目からの# 設定(変更不可)に追加。変更不可って書いてあるのでもっといい位置があるのかな。

#アンカーマーク
$anchormark="+";

次に、最新版日記用のアンカー。1427行目、「# (3)最新版日記を変数上」の$tmp=$match;と$ret.=$tmp;の間、私の場合は日付とタイトルの項目間に以下を追加しました。

# 記事毎アンカー
$str = substr($date{$_}, 0, 6);
$anchor="<a href=\"$str.html#$_\">$anchormark</a>";
$tmp=~s/<!--\s*akiary_anchor\s*-->/$anchor/g;

苦肉の策なのですが、その記事の持つDID（day ID？）から、substr関数を使って最初の6文字を取り出し、年月の数列を得てみました。DIDは「"年月日"_"perlの時間を表すらしい数列"」で書かれているので。akiaryのバックナンバーファイル（データベースも兼ねている）が年月がファイル名になっているので、年月.htmlを定義する方法にしてみたのですが。プログラム分かっている人に笑われそう……。後はそうやって得た年月.htmlのページからDIDをページ内リンクでつないだというだけです。

ああそれと、テンプレートファイルで、アンカーを表示させたい部分に<!-- akiary_anchor -->って入れておきます。今のところ最新版日記とバックナンバーだけしかやっていません。アーカイブのテンプレートも直しておかないとな。

もしかしたらこっちの設定をバックナンバー用に入れておいて、最新版日記用には最後の1行だけにするも良いのかもと思ったり。でも上手く行ってるみたいなんで取り敢えずいいや。categlist_ver04にバージョンアップするにあたって、記事毎のアンカー名にdid（改造）を使いたかったので、こんな試みをしたというわけです。

実験中です。バックナンバーファイルは記事毎のアンカーは何とか作れたんですが、最新記事ページのアンカーがどれも最新記事のものになってしまうというのがもう訳が分からない。どこ見ても具体的に書かれていないから自力で頑張ったんですが、高すぎる壁でした。まだ途中ですがちと寝て来ます。オプショナルファイルのアンカーの作り方、誰か教えて下さい……。

日記のHTML文法の正しさはどんなもんかいのうと、Another HTML-lint gatewayで調べてみました。最初にトップページを調べてぎょえっ。38点。結果の示されたソースは誤りを指摘する部分で真っ赤。それで日記本文の修正に加えて、テンプレートファイルとcgiの改造を往復して95点くらいまでもっていきました。バックナンバーのページはもっとひどくて、手打ちタグにしてもおっちょこちょいなミスがいかに多かった事か。

しかし、どちらのページでも直していないのは、日付単位のアンカーと、リンクのターゲット指定。前者は、手をつけねばならないと前から思っている問題点です。１日に複数記事があった場合、自動で付加されるアンカーが日付単位のためどれも同じ名前になってしまいます。akiaryには日付に加えて記事ごとのdidという属性も記録されるので、これを利用して記事ごとリンクを作れば良いらしいのですが、具体的な方法が今ひとつ分からず放置状態です。後者は、別サイトへのリンクの場合は違うウィンドウを出したい為に、ターゲットを空白ページに指定したくて、チェックでは減点対象になるのですがこのままです。あと、アンカーの打ち方ですが、<a>と</a>に囲まれている間が空なのも減点なので、これは仕方ないかと思っています。

日記のディレクトリが色んなファイルだらけになって来たので、生成ファイル以外を移動してみました。殆どはパス名を書き換えるだけで大丈夫でしたが、少しだけメモ。ファイル構成はこんな感じ。★印は生成されるファイル。
+-- hoge/ [755]
|　+-- hoge/ [755]
|　　+-- ak-xmlrpc.cgi [755]（こうさぎ用）
|　　+-- aki2rss.cgi [755]（RSS用）
|　　+-- akiary.cfg [644]
|　　+-- akiary.cgi [755]
|　　+-- categlist.cgi [755]（カテゴリ用）
|　　+-- Jcode/ [644]（こうさぎ用）
|　　+-- Jcode.pm [644]（こうさぎ用）
|　　+-- rss10general.xsl [644]（RSS用）
|　　+-- tmp_categ.html [644]（カテゴリ用）
|　　+-- tmphoge.html [644]
|　　+-- tmpnew.txt [644]（RSS用）
+-- hoge/ [777]
　+-- cat_checked.txt [666]（カテゴリ用）
　+-- categHoge.html [644]（カテゴリ用）★
　+-- categories.js [666]（カテゴリ用）
　+-- hoge.html [644]★
　+-- lockfile [666]
　+-- index.rdf [644]（RSS用）★
　+-- new.txt [644]（RSS用）★
　+-- xml/ [777]（こうさぎ用）

RSS用のcgi、aki2rss.cgiの出力するファイル名の後に.tempと続き、index.rdf.tempとなってしまいました。342行目のファイル名の置き換えが働いていない。もう一度設定項目を見直して、168行目の生成されるRSSのファイル名をパス付きで表記していたのからパスを除去して、index.rdfと直したら成功しました。

もう１つ。おそらくcgiと生成されるファイルのディレクトリが異なってしまった為か、categories.jsに記述されるパス名の都合が悪くなり、カテゴリファイルcategHoge.htmlの正しいパスが指定されなくなりました。categlist.cgiの272行目は

$categindex.="document.writeln('<li>[<a href=\"".$conf->{'cat_dir'}.
&EscapePercent($file)."\">".$category."</a>]</li>')\n";

なので、例えばコンフィグで

# categhoge.htmlを置くディレクトリ。デフォルトはこのcgiをおいたディレクトリ。
'cat_dir'     => '../../hoge/',

としていると、categories.jsには

document.writeln('[<a href="../../hoge/categHoge.html">Hoge</a>]')

と記述されます。categories.jsの場所に関係なく当然ながらそのまま記述され、categories.jsを読み込むファイルからのリンクに矛盾が生じてしまうため、categories.js用に関数を少し追加。コンフィグに

# categhoge.htmlを置くディレクトリ2。
'cat_dirr'     => './',

などと追加して、その分２行ずれて272行目だった274行目の部分を

$categindex.="document.writeln('[<a href=\"".$conf->{'cat_dirr'}.
&EscapePercent($file)."\">".$category."</a>]')\n";

と、つまり'cat_dir'を'cat_dirr'というアヤシイ関数に置き換えます。これで、categories.jsへの記述は

document.writeln('[<a href="./categHoge.html">Hoge</a>]')

になり一安心。最初の状態だと上層のあり得ないパスを指定して来て焦ったよ。あ、それと相対パスだから、CGIを置くディレクトリをhomeから見て同じレベルにすればその辺触らなくて良かったんだろうけど、akiary関係はまとめておきたかったから。

ここ１週間こうさぎが投稿しなかったのは多分、categlist_ver03の時に編集画面の日記へのリンクを押すとaki2rss.cgi→categlist.cgiの順に処理されていた関係で、正しくRSSが生成されなかったからかと。先日categlist_ver031に入れ替えた際、readme.txtの「ご注意！」や緊急告知 - aki2rss.cgiと共用される方へにその辺りの事が書かれていたのに従って、categlist.cgi→aki2rss.cgiに直したので、そのうち投稿してくれるかなと楽しみにしています。