nDiki : CSS

WiKicker 開発 CGI プログラム サイドバー Galeon JavaScript Perl モジュール WikiEngine 画像 DOM HTTP Privoxy Perl tDiary WikiName WikiPage アップロード キャッシュ Google UTF-8 Firefox 拡張機能 NaneyOrgWiki Debian パッケージ CGI track feed dh-make-perl Blog レビュー DanglingLink Amazon.co.jp

■ [ WiKicker ] deb 化

WiKicker の開発PCを移行(DynaBook -> ThinkPad)してから、手元で動作確認をする環境を用意していなかった(実サーバ上でテストしている)。 そろそろまた大幅な改造をする予定なので、手元に動作環境を作らねば。

ということで、これを機に deb も作るかなと。 dh-make-perl で雛型を作ってパッケージ化。 ライブラリ部分はこれで簡単にまとまるのだが、CGI プログラムとCSS、デフォルトプロパティファイルをどうやって提供するかな。 実際、今の source tar ball でも提供してないし。

• nDiki のサイドバーを右に移動 (2006-03-02)
• [ Perl ] Devel::Cycle (2004-01-23)
• [ WiKicker ] textarea ビヨーン (2004-02-04)
• [ WiKicker ] (続)リビジョンが追加されていかない (2003-04-23)
• Perl CGI プログラムのテストには WWW::Mechanize::... (2006-02-18)

■ [ WiKicker ] CSS修正

Safari だとリスト項目の時が小さくなりすぎるというので、修正。

• [ WiKicker ] textarea ビヨーン (2004-02-04)
• [ DiKicker ] くっつき BBSをくっつけてみた。 (2004-05-04)
• nDiki のサイドバーを右に移動 (2006-03-02)
• [ WiKicker ] deb 化 (2003-12-26)
• Firefox 拡張機能の整理 (2005-02-05)

■ word-break: break-all

NaneyOrgWikiのサイドバーで、長いWikiNameを表示すると折り返すところがなくてはみ出ししてしまって見苦しい。

CSS で word-break: break-all してみた。 IE6だと効く。 Galeon 1.3.11a だと駄目。

• Firefox 拡張機能の整理 (2005-02-05)
• nDiki のサイドバーを右に移動 (2006-03-02)
• [ Debian ] Galeon 1.3.12 (2004-02-03)
• Firefox ユーザプロファイル作り直し (2005-09-11)
• [ Debian ] 昨日の cookie 問題は Privoxy のフィ... (2003-12-22)

■ [ WiKicker ] textarea ビヨーン

今日IEで、WikiPage を編集しようとしたら textarea ビヨーンに遭遇。 CSS で'width: %' を指定していると発生する比較的有名な問題のようだが、WiKicker ではそういえば今まで起きていなかったなぁ。

昨日だか、今日だかに Windows Update をしたから? トリガーは何だか良くわからんが、IEユーザは少くないしなんか対策とらねばならないか。

しかしLinuxで開発していると、ここら辺の検証面倒なんだよねぇ。

• WiKicker でソフトウェアかんばん (2007-03-01)
• nDiki のサイドバーを右に移動 (2006-03-02)
• Linux Feed Reader Liferea (2004-08-17)
• [ WiKicker ] deb 化 (2003-12-26)
• Win32 で WiKicker が落ちるのは binmode の設定忘れのせい (2005-04-18)

■ [ DiKicker ] くっつき BBSをくっつけてみた。

DiKicker でのコメント機能についてだがあらためて実装するのも大変なので、たつを氏のくっつき BBSを組み込んでみた (v1.0rc2)。

@ ファイルレイアウト

 $HOME/etc/kuttukibbs/kuttukibbs.conf - 設定ファイル (一部変更)
 $HOME/var/log/kuttukibbslog.txt - 管理者用ログファイル

 $HTML/kuttukibbs/kuttukibbs.cgi - CGIプログラム (一部変更)
 $HTML/kuttukibbs/getlog.cgi - (一部変更)
 $HTML/var/kblog/$ID.log
 $HTML/var/kblog/$ID.js

@ DiKicker への埋め込み

記事毎ののHTMLフラグメントを生成する際に、kuttukibbs.cgi へのリンクと、(getlog.cgi経由での)Feedファイルの読み込み部分を埋め込むように変更。

くっつくFeedファイルが無い場合は commentshortクラスの div要素 (tDiary スタイル)が存在しなくなるようにしたかったのでレンダラではこれを埋め込まず、getlog.cgi で出力するようにした。

ついでに getlog.cgi は

• charset指定を UTF-8 に修正
• 違う階層Feedファイルを読むように修正

した。

@ kuttukibbs.cgi のUTF-8対応

Feedファイル用にコメントを切りつめる際、UTF-8 だと後続バイトが切り捨てられる場合がある。 WiKicker に UTF-8 用の substr / length ラッパがあるのでこれを使うように修正。

@ tDiary テーマの修正

tDiary では日単位でのコメントでありテーマもそれにあわせてデザインされている。 DiKicker では記事単位にコメントをつけるようにしたいので(またそうでないと記事単位で集約した場合に困るので)、使っているテーマ(Nana さんの flower をベースにしているもの)のCSSを修正。

@ くっつけてみる

テストした範囲ではうまくいっているようだ。 HTMLレンダリング済みの記事はキャッシュが更新されないとコメントするためのリンクが現れないが順次出てくるはず。

くっつきとして見るには要 JavaScript サポート。

• DiKicker にそろそろコメント機能を実装するか (2005-01-26)
• WiKicker に JSON でのページ出力機能を追加 (2007-04-03)
• [ WiKicker ] 憧れのサイドバー (2004-01-23)
• Rubric でプライベート SBS を立てるも 0.140 では日本語に不具合 (2006-07-22)
• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)

■ 過去の今ごろ

過去の6月6日より。

• 部分編集を実装
  • 慣れると部分編集は手放せない。プレビューの時にテーマ(CSS)によっては崩れることがあるのが課題。

• Firefox 拡張機能の整理 (2005-02-05)
• Task Coach で GTD (2008-06-23)
• [ DiKicker ] くっつき BBSをくっつけてみた。 (2004-05-04)
• 給与制度改革 (2005-01-05)
• [ WiKicker ] プレビューをレンダリング中も逐次出力するように (2004-05-03)

■ Firefox 拡張機能の整理

ユーザプロファイルをクリアしたついでに、インストールする拡張機能を整理してみる。

@ テーマ

• 楠見直人氏の rein。Cool!
  • klee - mozilla

@ Debian パッケージで入れてしまう拡張

• DOM Inspector (mozilla-firefox-dom-inspector)
• Diggler (mozilla-diggler)
• Live HTTP Headers (mozilla-livehttpheaders)
• Firefox Development JLP

@ 必須拡張

• タブブラウザ拡張
• Add Bookmark Here
  • Galeon ユーザだった自分には必須。
• SwitchProxy Tool
  • Privoxy の on/off 用
• Web Developer
  • CSS書き時必須。フォームの POST -> GET 変換も便利。

@ あった方が便利 (入れる)

• Google Pagerank Status
• googlebar
• mixiツールバー

@ 以前いれていたけどあまり使っていないもの (今回保留)

• ContextMenu Extensions
• Configuration Mania
• ChromEdit
• Ez Sidebar
• ScrapBook
• GooglePreview

• Firefox ユーザプロファイル作り直し (2005-09-11)
• Iceweasel 2.0 (Firefox 2.0) にほぼ無事移行終了 (2006-11-27)
• 遅ればせながら Greasemonkey。mixi の未読・既読の色分けなど。 (2005-10-01)
• Tor で hidden service (2005-02-13)
• Linux で使えるデスクトップ検索ツール Beagle でローカルファイ... (2006-08-08)

■ Firefox ユーザプロファイル作り直し

ブックマーク、Sage まわりその他がおかしくなったので、ユーザプロファイルを半年ぶりに作り直し。 拡張機能の整理(New は 前回から新たに使うようになったもの)。

@ テーマ

• 楠見直人氏の rein。Cool!
  • klee - mozilla

@ Debian パッケージで入れてしまう拡張

• DOM Inspector (mozilla-firefox-dom-inspector)
• Diggler (mozilla-diggler)
• Live HTTP Headers (mozilla-livehttpheaders)
• Firefox Development JLP

@ 必須拡張

• タブブラウザ拡張
  • Tab Mix + Tab Mix Plus にしようと思ったけれど、ツールバーを左に持ってこれなさそうなので、やっぱりコレに。
• Add Bookmark Here
  • Galeon ユーザだった自分には必須。
• SwitchProxy Tool
  • Privoxy の on/off 用
• Web Developer
  • CSS書き時必須。フォームの POST -> GET 変換も便利。
• Google Pagerank Status
• (New) Google Toolbar for Firefox
  • 本家のやつ。
• (New) Adsense Notifier
  • Google AdSense 用。
• (New) Sage
  • track feed の表示用 (それ以外は Bloglines で)。

• Firefox 拡張機能の整理 (2005-02-05)
• Iceweasel 2.0 (Firefox 2.0) にほぼ無事移行終了 (2006-11-27)
• Tor で hidden service (2005-02-13)
• Debian に RSS リーダ「フレッシュリーダー」をインストール (2006-03-06)
• Bloglines に巡回先の一部を集約 (2005-02-13)

■ nDiki のサイドバーを右に移動

WiKicker の開発でログインフォームとその CSS の検討をしているうちに、全体の CSS が興味が移ってしまった。

nDiki の日付見出し部分の背景画像をグラデーションに変更。 ページの印象がちょっと明るくなったかな。

それからサイドバーを右側に移動。 基本的には、今までメイン部分の左マージンを大きくとって position: absolute; で左側にサイドバーを配置していたところを、メイン部分の右マージンを大きくとるようにして、サイドバーを右側からの position: absolute; にしたぐらい。

左側にサイドバーがあると、メインである記事を読む時にちょっと目がチラチラするかなと以前からちょっと感じていたので。

変えてすぐは自分でもかなり違和感があったが、しばらくいじっている間に慣れてきた。

• WiKicker に Flickr 関連機能追加 (2005-02-11)
• [ WiKicker ] textarea ビヨーン (2004-02-04)
• Flickr に登録 (2005-02-08)
• 最近の Twitter ステータスを nDiki 「最近のさえずり」ページ... (2007-11-23)
• [ WiKicker ] deb 化 (2003-12-26)

■ 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 に JSON でのページ出力機能を追加 (2007-04-03)
• Twitter ステータスを nDiki サイドバーに表示 (2007-11-09)
• DiKicker にそろそろコメント機能を実装するか (2005-01-26)
• Hyper Estraier で社内 Web コンテンツ検索 (2006-06-01)