nDiki : JavaScript

Perl HTML WiKicker Web nDiki 実装 DiKicker Web ブラウザ URL 検索 サイドバー tDiary くっつき BBS C++ WikiPage RSS Java XML CGI プログラム NaneyOrgWiki スクリプト言語 CSS Prototype メール インストール アップロード Internet Explorer Firefox Twitter キャッシュ

■ Web 解析サービス Google Analytics を申し込む

昨年無料サービス開始時には申し込みが殺到して新規登録を一時中止したという経緯があった Google Analytics、当時はそのうち試してみたいと思っていたのだが気がつけばもうすぐ1年だ。

アクセス解析を見るのは結構楽しいもので、周期的に見たいという衝動がくる。 analog やら AWStats やら自作やらで過去にもいろいろ解析してみた経験がある。

会社でも最近アクセスログ解析が話題になっているし、www.naney.org 用に Google Analytics に申し込んでみた。

解析を取りたいページの最後に JavaScript を埋め込むタイプの解析で、404 であったりその他のリソースのアクセス数のチェックには向かないものの、その分 Web サーバのアクセスログ解析では得られない統計を得ることができる。

レポートの種類は豊富で、最初は「あのレポートは、どれだっけ?」と何度もいろいろ見直したりしなければならないぐらい。

アクセス傾向が分かるようになるので、重点的に内容を充実させるべきページを把握してサイトを改良していきたい。

• AWStats 6.0 (2004-05-21)
• 本サイトの Referer 統計復活 (2000-11-05)
• [ www.naney.org ] 23:00 明日に移転先サーバの設定完了予定 (2002-01-22)
• さくらのレンタルサーバ プレミアム申し込んだ (2009-10-23)
• www.naney.org をさくらのレンタルサーバへ移転 (2009-12-23)

■ WiKicker 0.40 リリース - ログイン・ログアウト後の表示変更機能

10月17日以来、15日ぶりのリリース。

リクエストにより、ログイン後のリダイレクト先の指定と、ログイン完了表示ページ専用の外部 JavaScript ファイルの指定をできるようにして、ログイン・ログアウト後の表示をカスタマイズできるようにした。

また「Web ブラウザを終了させた後にログイン状態を維持するかどうかのオプション」を無効にできるように設定項目を追加。

今回のリリースでは認証機能を使っていない人には特に変更なし。

• WikiPage 編集画面で Ctrl+S を押すとプレビューするようにしてみる (2006-04-29)
• Java Web Start と Basic 認証 (2004-06-21)
• 速度改善のため nDiki からくっつき BBS を外す (2005-10-16)
• ケータイ用にプライベート Wiki を設置 (2008-01-07)
• WiKicker における PageName 最長文字数 (2006-06-10)

■ SpiderMonkey の素のインタプリタでは CGI プログラムには役立たず

Ajax を使うプログラムを書くことになりそうなので、どうせならサーバーサイドも JavaScript で書けないかなと調査。 有名どころの JavaScript エンジンというと SpiderMonkey なので、まずはこれでいけるか確認。

Debian GNU/Linux sid だと spidermonkey-bin パッケージに JavaScript shell プログラム smjs (js) が含まれている。 とりあえずコマンドライン引数 (arguments)と環境変数(environment)と標準入力(readline())から入力ができて、標準出力に出力 (print()) ができるので、最低限の CGI プログラムは書けそうだ。

ただこれだけでできる範囲のことなら、クライアントサイドでできてしまう。 単独だとあまり意味ないな。やはり embedded 用か。

Perl の JavaScript::SipderMonkey モジュールや JavaScript モジュールを使うと Perl のサブルーチンを JavaScirpt プログラム側から呼べる関数として与えた中で JavaScript を実行できるのでいろいろ遊べるようになる。 ただこれだと、Perl で書いちゃった方がよっぽど楽。

• 一般ユーザで Apache 2.0 を起動する最小限の httpd.conf (2006-07-15)
• DBD::Oracle 1.16 を Debian GNU/Linux s... (2005-05-19)
• [ WiKicker ] SpeedyCGI (2003-10-17)
• Twitter ベイジアンフィルタプロキシ (2007-12-29)
• Perl CGI プログラムのテストには WWW::Mechanize::... (2006-02-18)

■ 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 でデザインするのがいいのかな。

• [ DiKicker ] くっつき BBSをくっつけてみた。 (2004-05-04)
• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)
• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• WiKicker に JSON でのページ出力機能を追加 (2007-04-03)
• DiKicker にそろそろコメント機能を実装するか (2005-01-26)

■ 紙copi 試したけれど Windows メインではないので使わなさそう

「5周年記念! 紙copiプレゼント」ということで先着10,000名にライセンスを発行してくれるという太っ腹な企画があったので先週申し込みをして登録番号をもらっておいた。

で今日 紙copi Ver 2.56 をダウンロードして使ってみた。

Web ページの全部/ローカルを取り込んで、スクラップしておくことができるソフト。 試してみたところ使っている Windows XP BOX では、取り込んだページが JavaScript エラーを起こしてデバッガが起動したり、紙copi 自体が落ちてデバッガが起動したりとちょっと不安定。

Web ブラウザのページ保存機能を使うよりも保存したページの管理が楽になるという点で良さげだけれど、自分の場合、こういうのはメインで使っている PC ではないとすぐに使わなくなりそう。 Firefox なら ScrapBook があるし。

• 朝日新聞講読申込み (2005-01-31)
• Debian に RSS リーダ「フレッシュリーダー」をインストール (2006-03-06)
• そろそろ Google Chrome を Windows のメイン Web... (2010-02-15)
• Skype チャットを Evernote に保存する方法 (2009-03-23)
• WikiPage 編集画面で Ctrl+S を押すとプレビューするようにしてみる (2006-04-29)

■ WiKicker に JSON でのページ出力機能を追加

最近は DiKicker ばかりに手を入れていたが、久しぶりに WiKicker の改良も行っている。 しばらく前から実装を始めていた JSON 形式での出力機能が今日完成。

今までは WikiPage について

• HTML 形式による出力
• Wiki 文法で書かれている生テキスト形式による出力

という2つの出力形式を持っていたので、JSON が加わることで3つめとなる。

@ サーバ側で WikiPage の構文解析まではやる

クライアントサイドの JavaScript でページの内容に合わせて様々な処理をできるように、サーバ側で構文解析まではしてあげるというのが主な目的。

JavaScript でまたパーサを書いてメンテしていくのも大変なので、その部分はサーバでやってしまおうかと。 構文解析した結果の解析木を JSON 形式で返して、JavaScript 側であとはお好きにという形。

@ CPAN にある JSON モジュールを使用

サーバ側の Perl プログラムには、構文解析をして解析木を作れるようになっている。 この解析木から Visitor パターンで JSON 形式を生成していく。

依存モジュールを増やすことを避けるべく、最初は自前で JSON 形式に変換していこうと思ったのだがやっぱり面倒だった。 ということで CPAN にあるモジュールをチョイス。

JSON 関連では JSON、JSON::Syck、JSON::PC などがあるが今回はインストールのしやすさを考えて pure Perl モジュールとして実装されている JSON を採用することにした。

Visitor クラスで解析木を無名ハッシュ/無名配列のツリーに変換して、JSON モジュールに流しこめば OK。

 use JSON;
 my $json = JSON->new(pretty => 1);
 my $js = $json->objToJson($tree);

WiKicker のフレームワークにはフォーマット別に出力を切り換える機構があるので、これに JSON を追加して application/json で送るようにして完成。

ちなみに残念ながら JSON 1.07 は Perl 5.005_03 では make test が fail するので、NaneyOrgWiki では使えない。

• Rubric でプライベート SBS を立てるも 0.140 では日本語に不具合 (2006-07-22)
• WiKicker の Makefile.PL を Module::Inst... (2006-02-10)
• [ WiKicker ] 「最近のアクセスログ」処理思案 (2004-01-17)
• [ WiKicker ] hell mode - HTMLタグ付けブロックの導入 (2005-09-13)
• www.naney.org をさくらのレンタルサーバへ移転 (2009-12-23)

■ クリッピングに便利な CMS 「Tumblr」を使ってみる

Twitter と一緒に取り上げられることの多い Tumblr の方も試しに使ってみることにした。 一緒に取り上げられているといっても、両者は結構違うサービス。 Tumblr はどちらかというと Web コンテンツをクリッピングしていくのに便利なネットサービスだ。 Tumblr ではメディアミックスな短かめの投稿によって構成される tumblelog と呼ばれる Blog の一種を作ることができる。

Tumblr はページのテンプレート(HTML)を好きなようにいじれるのが魅力的だ。 Google AdSense 等 JavaScript コードなども挿入することができるので、結構好きなようにページにパーツを埋め込むことができる。

早速アカウントを作成して、tumblelog なるものを作ってみた。

• http://naney.tumblr.com/

まずは設定の方から。「Change settings」から設定ページに移動する。

1. Title: tumblelog のタイトルを書く。
2. Description (任意): tumblelog の説明を書く。
3. URL: tumblr.com のサブドメインの URL をもらえるので、名前を入力する。ドメイン名を持っていればそれを割り当てることもできる。
4. Theme: あらかじめ定義されているものを選べる。Custom を選択して、HTML テンプレートをいじることもできる。定義済みのものをカスタマイズしたいなら一旦そのテーマを選んで保存してから、Custom に変更する。
5. Import Feeds: RSS フィードや ATOM フィードから自動的に記事をインポートしたい場合、Feed を登録する。例えばFlickr、Twitter、はてなブックマークなどへ投稿したものを自動的に Tumblr の方でインポートさせることができる。

テンプレートをいじって Twitter のバッジを貼ってみたり、テスト投稿をしてみたりしてまずは様子見。

nDiki に書くほどではないけれども、はてなブックマーク以上の言及をちょっとしたい時などのクリッピングに使ってみようかと思う。

ただ検索機能・タグ機能などは今のところ無さそうなので、書きっぱなしになってしまわないかという懸念あり。

• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• あまり話題になっていない Life-X に登録した (2008-10-01)
• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)
• はてなブックマーク上の検索結果を nDiki に (2005-10-30)
• Hyper Estraier で社内 Web コンテンツ検索 (2006-06-01)

■ nDiki に「はてなスター」をつけてみた

本日よりはじまった「はてなスター」をつけてみた。 nDiki (by DiKicker) はほぼ tDiary 互換の HTML 構造なので、はてなスターの JavaScript プログラムを読み込むようにするだけで、各記事の見出しに Add ボタンが表示されるようになった。素晴しい。

ページの HEAD 要素の中で JavaScript プログラムを読むように指定されているのだが、今の DiKicker ではちょっと手を入れる必要があるので、とりあえずフッタ部分に挿入。

• http://s.hatena.ne.jp/naney/

• DiKicker にそろそろコメント機能を実装するか (2005-01-26)
• はてなブックマーク上の最新ブックマークを nDiki に (2005-05-16)
• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• [ DiKicker ] くっつき BBSをくっつけてみた。 (2004-05-04)
• DiKicker に n 年日記機能を追加 (2006-11-03)

■ Twitter ステータスを nDiki サイドバーに表示

公式の Flash 版 Twitter badge をこのページのサイドバーに表示していたが、以下の点でちょっと不満だった。

• 「Flash, Just Me」: 自分のみのステータスを表示できるが、1度に1つのみ。キャッシュの関係で古い情報が表示されがち。
• 「Flash, With Friends」: 自分のみのステータスを表示できない。
• 「HTML/JavaScript」: JavaScript ファイル読み込みなので、Twitter 側が重いとページのその先のレンダリングが止まってしまう。

「自分の過去のステータスを一覧的にサイドバーに表示する」のがしたいことなのだが、ちょっとマッチしない。 ということで Twitter から RSS フィードを取ってきて、サイドバーに表示することにした。

使ったモジュールは URI::Fetch + XML::RSS + Date::Parse。 それとユーティリティとして WiKicker::HTML と WiKicker::URI。

1. cron で定期的に Twitter から RSS フィードをとってきて、Perl スクリプトで HTML フラグメントに変換。
2. DiKicker が読み込む(サイドバーを含む)フッタファイルに挿入。

と簡単に実装してみた。機能的には概ね満足。

今後は L:～ や URL の自動リンク化、キーワードの自動リンク化を適宜したい。

• はてなブックマーク上の最新ブックマークを nDiki に (2005-05-16)
• はてなブックマーク上の検索結果を nDiki に (2005-10-30)
• Flickr の写真を自動的に Twitter アイコンにする (2008-03-13)
• Plagger のインストールが大変なので XML::RSS で RSS ... (2006-06-10)
• クリッピングに便利な CMS 「Tumblr」を使ってみる (2007-04-13)

■ 資源有効利用促進法にもとづき、ディスプレイの回収を申し込んだ

普段はノート PC ばかり使っていて、自宅にある自作 PC はここ数年年賀状の作成程度にしか使っていなかった。 いい加減、場所ばかりとって邪魔なので廃棄することにした。 ということで有給休暇をとった昨日、データをノート PC や、外付け HDD にコピー。

で今日はディスプレイの回収の手配。 資源の有効な利用の促進に関する法律(通称、資源有効利用促進法)に従ってメーカーに回収してもらう必要がある。

こちらは1999年に購入したソニーの CPD-G200J。 当然 PC リサイクルマークがついていないので、回収・再資源化料金を払って回収してもらうことになる。

手順を確認して、Web から申し込み。 予算が少ないのか、作りがショボい。 最後の確認画面まで進まない。 しょうがないので、HTML のソースを見てみた。 JavaScript コードで hidden パラメータのあるフォームを自動的に POST させている部分がうまく動いていないようだ。 しょうがないので URL の後ろにパラメータをつけて GET リクエストしてみたら、受け付け完了した。 決済にクレジットカードがあるのにちょっとひどい。

とりあえずなんとか申し込み終了。 税込4,200円也。 エコゆうパック伝票待ちだ。

ディスプレイは結構綺麗に使ってきたので、まだまだ十分使えるんだけれどなぁ。 しかし17インチとはいえ自宅においては場所占めすぎ。

買った当初は「発色とか考えると液晶モニタではなく CRT モニタだよね」とか思ってチョイスしたんだけれどねぇ。

• Hyper Estraier で社内 Web コンテンツ検索 (2006-06-01)
• クリッピングに便利な CMS 「Tumblr」を使ってみる (2007-04-13)
• 今日のさえずり - ディスプレイ回収の申し込み (2008-02-03)
• フォト イメージング エキスポ 2005 (2005-03-18)
• 買った! 新品 TC-1 (2台目) (2005-10-13)