nDiki : JavaScript Include

HTML サイドバー DiKicker nDiki CGI プログラム tDiary 検索 RSS Web ブラウザ 社内 Blog ブックマーク Perl KDE Wiki イベント Emacs URL cron CSS URI rsync Sage Firefox XML::RSS メモリ はてなブックマーク ネットワークカメラ 電子化 Spurl WiKicker

■ [ WiKicker ] 憧れのサイドバー

Wiki はまぁ(ユーザからの視点において)シンプルな方が良いと思うのだが、やっぱサイドバーは出せてもいいかな。先日実装したIPC共有メモリを用いた直近のアクセスログ管理を使ってトップランキングも常にチェックできるようにしたいし。

@ tDiary テーマでサイドバー

レイアウトは tDiary のテーマにまかせる。 現在の blue-feather はサイドバー対応していないようなので、Nana 氏の flower に変更。 Wiki用に若干幅、配色等を修正。

で、WiKicker のフッタファイルに <div class="sidebar">...</div> を作ってそこに Google の検索フォーム等を移動。

@ Access Top 30

IPC共有メモリに置いてあるアクセスログを使って直近300アクセスによるランキングをサイドバーに表示できるようにする。

アクセスログは刻々と更新されるのでトップランキングもできるだけ更新表示させたいのだが、一方各WikiPageはレスポンス向上・負荷軽減のためできるだけ 304 を返したい。

なのでページ中の更新表示させたいトップランキングの部分を、JavaScriptファイルとして別ファイルに生成しておくことにした(いわゆる JavaScript Include)。 HTML出力自体に変更がなくて304を返しても、アクセスログの変更に合わせてJavaScriptファイルだけ更新しておけばクライアント側で表示を更新してくれる。

JavaScript はできるだけ避ける方針できているが、アクセスランキングは付加的情報なのでJavaScript off によって表示されなくてもそれほど問題ないと判断。 document.write だけだから互換性の問題もほとんどないだろうし。

JavaScriptファイルの更新は、RecentLogへアクセスがあった時についでに生成するという形で行うようにしてみた。 一応 cron で1時間毎に

 wget --quiet -O - http://www.naney.org/wiki/RecentLog.html > /dev/null

して、最低でも1時間に1回は更新されるようにしておく。

• WiKicker に JSON でのページ出力機能を追加 (2007-04-03)
• [ WiKicker ] 古くても検索キャッシュを返す (2004-01-20)
• DiKicker にそろそろコメント機能を実装するか (2005-01-26)
• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)
• Hyper Estraier で社内 Web コンテンツ検索 (2006-06-01)

■ DiKicker にそろそろコメント機能を実装するか

@ くっつき BBS

nDiki では、たつを氏が公開しているくっつき BBSを利用してコメント機能をつけている。 くっつき BBSは自前でBBS機能を実装しなくても、JavaScript Include を使うことでコメントをページに貼りつけられるという優れもの。

@ CGI プログラム経由の JavaScript Include 方式は遅い/負荷がかかる

nDiki では JavaScript Include する際、コメントがない(=JavaScriptファイルがない)場合でも404にならないようにCGI プログラム経由で貼りつけていた。 しかし、この方法だと1ページに多くのコメント領域があると何度もCGI プログラムが実行されるのでサーバへ負荷がかかる。

また Web ブラウザもHTMLの途中でscript要素が出てくると、そのスクリプトファイルを読み込んで処理するまで残りをレンダリングできない。 このためサーバが重かったりして、途中スクリプトファイルの読み込みでひっかかるとユーザ側でのページ表示完了が遅くなってしまう。

ということでこの方式をやめて、単純にコメントJavaScriptファイルのURIを指定するようにした。 その使わなくなったCGI プログラムで、tDiaryテーマ用の「commentshortクラスdiv要素」を書き出していたので、この部分は DiKicker に戻す。 現在のコードでは、コメントが無くてもこのdiv要素が出力されてしまうので、ちょっとみぐるしいがしばらくご容赦。

@ やはりDiKickerでネイティブにコメント機能を実装しよう

コメント内の AutomaticLink 処理や cookie の連動など、前からやりたいとは思っていたのでこれを機会に実装するかな。 いろいろ決めないといかん。

• 速度改善のため nDiki からくっつき BBS を外す (2005-10-16)
• nDiki に「はてなスター」をつけてみた (2007-07-11)
• [ DiKicker ] くっつき BBSをくっつけてみた。 (2004-05-04)
• [ WiKicker ] 憧れのサイドバー (2004-01-23)
• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)

■ Spurl に登録してブックマークしてみる

最近話題になりはじめている Spurl というオンラインブックマークに登録してみた。

この手のサービスは結構昔からあり4年ほど前に Blink を試してみた事がある。 結局この時はレスポンスの問題(ダイヤルアップだったし)や、関連検索いまいちだったことなどから放置状態になってしまっている。

時代は流れて常時接続になったしまた試してみるのも悪くないだろう。

Spurl は Firefox 用のサイドバーを使う事でそれなりに便利に使えそうだ。 ただし、日本語の利用についてはまだ微妙。 ブックマークタイトルは問題ないようだが、カテゴリ名では文字化けしてしまった。 description もフォームで edit すると化けてしまう。 それからJavaScript Include用のコードも駄目。

ということで本格利用にはちょっとつらい。 Web巡回している際に見つけたページをいつもテンポラリなフォルダにブックマークして結局なかなか見ずじまいとなっているやつを、こちらに登録していってみる事にしよう。

しかしたびたび繋がらなくなる。 これは辛い。 こちらのクライアントのせいかと思って Firefox のユーザプロファイルを消してまっさらにしてみたが駄目。 サーバが安定していないのかアクセスに耐えられないのか、それとも一時的なネットワークの問題なだけなのか。

• naney's spurls

• はてなブックマーク上の検索結果を nDiki に (2005-10-30)
• 飲めば飲むほど強くなる Spurl (2005-02-06)
• [ WiKicker ] 憧れのサイドバー (2004-01-23)
• Firefox ユーザプロファイル作り直し (2005-09-11)
• Hyper Estraier で社内 Web コンテンツ検索 (2006-06-01)

■ [ DiKicker ] RSS で全文をフィード

今まで RSS には記事の先頭300文字までを description に書き出していたところを、全文出力に変更。 あわせて、RDF Site Summary 1.0 Content Module を使用して、記事全文HTMLフラグメントものせてしまうようにした。

数行の修正しただけで、HTMLフラグメントは通常表示用にレンダリングしたものなのでいくつか問題点あり。

• DiKicker 内のページへのリンクに相対URLが含まれている。例えば Sage ならちゃんと相対参照の解決がされるけれど、 Bloglines だとそのまま www.bloglines.com 内への参照になってしまう。
• (くっつき BBS 用の)JavaScript Includeコードが含まれている。

近日中に修正。

• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• [ DiKicker ] 早速 RSS まわりを改良 (2005-06-14)
• DiKicker にそろそろコメント機能を実装するか (2005-01-26)
• mixipress でコミュニティ掲示板もチェック (2005-10-01)
• [ DiKicker ] RSSの description をちゃんと埋める (2005-02-04)

■ 速度改善のため nDiki からくっつき BBS を外す

DiKicker にはまたコメント機能を実装しておらず、かわりにくっつき BBS を利用できるようにしてある。 くっつき BBS は JavaScript Include を利用して手軽にコメント機能を追加できる便利な BBS。

JavaScript Include なのでコメント部分については Web ブラウザ側で外部スクリプトを読み込んでいくことになる。外部スクリプトをロードしている間はレンダリングが先に進まないので、外部スクリプトの配信・転送に時間がかかるとそこで表示がひっかかてしまう。 このため DiKicker としてのページの生成・出力が短い時間で終わっていても、結果的に閲覧者側でのレンダリング完了には時間がかかってしまう。

nDiki でもかなり遅く感じるようになってきたので、一旦くっつき BBSを外すことにした。 やはり早々にコメント機能を実装しなくては。

• DiKicker にそろそろコメント機能を実装するか (2005-01-26)
• nDiki に「はてなスター」をつけてみた (2007-07-11)
• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)
• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• nDiki のコメント欄にコメントスパム (2005-09-12)

■ Plagger のインストールが大変なので XML::RSS で RSS から JavaScript コードへ変換するスクリプトを自作

一昨日社内メイン Wiki のレイアウトを変更してサイドバーを設けたので、徐々に増えてきた社内 Blog の ヘッドラインをそこに表示することにした。

最初は Plagger を使ってみようと思ったのだが、依存 CPAN モジュールが多くて CPAN.pm を使ってもなかなかインストールが終わらない。

ということで今回は Plagger を見送って、XML::RSS でちょちょっと aggregator を自作して済ますことにした。

基本的には nDiki 用に書いた「はてなブックマーク上の最新ブックマークを表示するためのコード(2005年5月16日)」をちょっと修正して利用。 HTML フラグメントを生成するかわりに、JavaScript Include 用 JavaScript ファイルを生成するように変更した。

これで社内 Blog が読まれる回数も増えるかな。

• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• はてなブックマーク上の最新ブックマークを nDiki に (2005-05-16)
• Rubric でプライベート SBS を立てるも 0.140 では日本語に不具合 (2006-07-22)
• はてなブックマーク上の検索結果を nDiki に (2005-10-30)
• クリッピングに便利な CMS 「Tumblr」を使ってみる (2007-04-13)

■ iCalendar 形式経由でスケジュールを社内 Blog に表示

仕事用に Skype 名を作成し、ついでに社内 Blog に Skype ボタンを貼りつけてログイン状態を表示できるようにしてみた。

そういえば電話もそうなんだけれど、本社に連絡を取るとき「もしかして会議中?」などと勘繰ってかけるかどうか迷ってしまうことがある。 かけたい人の予定がわかればいいのになと。

ならば逆もしかりだろうということで、自分の仕事のスケジュールを晒してみようと思いついた。 グループウェアとかそういうのは大袈裟なので、まずは社内 Blog のサイドバーに表示するようにしたい。

ということでこの3連休に実装してみた。

@ 構成

@ 入力

完全なスケジュールはほぼ日手帳に手書きで管理しているので、ミーティング・外出など晒しカテゴリのイベントだけを、電子化する必要がある。 手で HTML 毎回ごりごり書き直すのも嫌なので、スケジュール管理ソフトを使いたい。 この部分は KDE の KOrganizer を使うことにした。

@ サーバへアップロード

で、KOrganizer のスケジュールを iCalendar 形式でエクスポート。 このファイルを社内 Blog を配信しているサーバに rsync で転送。

この処理はちょっと手間なので自動化したいところ。

@ 社内 Blog 内表示用 JavaScript Include ファイル生成 CGI プログラム

この iCalendar 形式ファイルを読み込んで、今日以降の10件(程度)を HTML フラグメントに変換し JavaScript プログラム (document.write() 列) として出力する Perl CGI プログラムを作成。

iCalendar の形式の読み込みについては Data::ICal や iCal::Paraser などの Perl モジュールを利用できる。 今回はシンプルに使えそうな iCal::Parser をチョイス。 基本的には

 use iCal::Parser;
 my $parser = iCal::Parser->new;
 my $calendar = $parser->parse($ics_file_name);

で読み込んだデータがハッシュリファレンスとして $calendar に設定される。 イベントは $calendar->{2007}->{01}->{01}->{$uid} のように「年、月、日、イベントUID」のハッシュ階層として格納されているので、これを読み出せばよい。

@ 社内 Blog サイドバーに表示

で、この CGI プログラムが生成する JavaScript プログラムをサイドバーで JavaScript Include。

まずは表示までできるようになった。

これで

• [未来] スケジュール
• [現在] 在籍状況 (Skype ボタン)
• [現在] 顔色 (ネットワークカメラ画像の貼り付け)
• [過去] 業務情報 (Blog 記事)

をまとめて公開できる社内 Blog にアップグレード。

おいおいスケジュールの表示デザインとかは改良していきたい。 hCalendar 形式にして CSS でデザインするのがいいのかな。

• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)
• [ WiKicker ] 憧れのサイドバー (2004-01-23)
• WiKicker に JSON でのページ出力機能を追加 (2007-04-03)
• Hyper Estraier で社内 Web コンテンツ検索 (2006-06-01)
• Rubric でプライベート SBS を立てるも 0.140 では日本語に不具合 (2006-07-22)