2005-06-30
Wiki と Blog
「
BlogとWikiの違いと、無意識に気づくこと」で
Wikiは情報の整理。Blogは考えの整理
とあった。そこで、自分なりに思いついたこと。
「不完全」は許せても「未完成」は許せないのが Wiki、
「未完成」は許せても「不完全」は許せないのが Blog。
中途半端な説明とか、明らかに間違ってるとか、誤字脱字があるとか、そんな「不完全」な Wiki は、
手を入れて直そうか
という気にもなるけど、「未完成」になってると「続き」は作者しか分からないわけで、手の入れようもないから困ってしまう。
一方、Blog は「未完成」で続きがあるにしても、そこまでが一応「完全」であれば、
早く次のポストが読みたいなぁ
と期待してしまう。そして「不完全」な Blog は読む気がしない。
なんか、しょうもない Wiki と Blog の雑感が増えただけのような... まぁ、読者からみた、Wiki と Blog の作者に対する期待ですかな。未完成な Wiki はやめてね、不完全な Blog はやめてね、っていう。
dvipng 1.6 リリース |AUCTeX|
[2005-06-27]、 dvipng 1.6 がリリースされた。dvipng は、TeX の DVI ファイルから PNG 画像 (or GIF 画像) を生成するコマンド。dvips の PNG 版みたいな感じ。Ghostscript で DVI ファイルを PNG に変換するよりも高速で綺麗な画像が得られる。
dvipng は、もともと preview-latex という LaTeX のソースを、ソース・レベルでプレビューするというツールの成果物。その preview-latex を取り込んだ AUCTeX の新版 (11.80?) がそろそろリリース。と言われ続けて、はや数か月...。本当にリリースされるのかな?
2005-06-29
Emacs-w3m で「次・前」のページへ |Emacs-w3m|HTML|
Emacs-w3m では、ちょっとした quick hack で HTML の link 要素を辿るようにできる。今回はその発展編 (?) で、link 要素のないページで「次」のページと「前」のページを推測する機能について。
rel="next/prev" を辿る
その前に
Emacs-w3m の link 要素サポートに関して一言。実は、先日の
hack を加えなくとも、
rel="next" (or
rel="prev") だけなら
Emacs-w3m はデフォールトでサポートしている。
例えば、 Google で何かを検索してみよう。 SPC を連打してページの一番下まで行く。そこでもう一回 SPC を打つと、 Emacs-w3m は「次」の検索結果ページへとジャンプする。「前」の検索結果に戻りたければ、 DEL。もし、ウェブページの全てに link 要素が (ちゃんと) 入っていれば、 Emacs-w3m は SPC と DEL キーだけでページを全部見れる (言いすぎ?)。
link 要素の推測
さて、 Google の検索結果ページのソースを見てみよう。ソースに、link 要素が見あたらないはず。そう、 Google は link 要素を持っていない。さっきの「次の検索結果」へのジャンプは、 Emacs-w3m の link 要素推測機能で実現されている。
Emacs-w3m の link 要素推測機能は、ページごとに link 要素を推測させるルールを追加することで実現している。ルールは変数 w3m-relationship-estimate-rules に書かれているので、新しいルールの追加は次のようにする。
(setq w3m-relationship-estimate-rules
(cons `(ルール) w3m-relationship-estimate-rules))
ルールの書式は次の通り。
`("ルールを適用するサイトの URL"
"「次の」リンク (を含むテキスト)"
"「前の」リンク (を含むテキスト)"
nil nil)
例えば、http://www.foo.bar で
<a href="bar003.html">次へ</a> が「次のページ」へのリンクに、
<a href="bar001.html">前へ</a> が「前のページ」へのリンクになっていたら、次のように書く。
(setq w3m-relationship-estimate-rules
(cons `("\\`http://www\\.foo\\.bar"
,(concat "<a href=" w3m-html-string-regexp ">次へ</a>")
,(concat "<a href=" w3m-html-string-regexp ">前へ</a>")
nil nil)))
URL 関連は全て正規表現。なので、. (period) は \ (backslash) でエスケープ。リンク先の bar003.html は bar004.html や bar005.html なんて感じに変わるかもしんない。 Google みたいに、機械的にリンク URL を作ってるかもしんない。ここは、 Emacs-w3m が用意している URL 用の正規表現 w3m-html-string-regexp を使うのがミソ。
実際の例は、w3m.el の中にある w3m-relationship-estimate-rules のソース・コードとか、 Yahoo Search Beta in Emacs-w3m (2) を参照されたし。
ref
- [2005-06-27] Link 要素
- [2005-06-26] Yahoo Search Beta in Emacs-w3m (2)
2005-06-28
2005-06-27
Link 要素 |HTML|Emacs-w3m|Firefox|
HTML には Link 要素というものがあって、外部ファイルへのリンクと閲覧中のファイルとの関係性を記述できる。代表的なものは、外部スタイルシートへのリンク。この他にも、代替ファイルへのリンクとか、「次の」ファイルや「前の」ファイルへのリンク、それから「スタートページ」へのリンクを設定できる。
link 要素の書き方は二種類ある。一つは head 要素の中に書く方法。
<link rel="start" type="text/html" href="../index.html" title="...">
もう一つは、a 要素の中に書く方法。
<a href="../index.html" rel="start" title="...">
link 要素を正しく使えば、適切なリンク先をブラウザーに教える事ができる。例えば、ブログで古い記事の続きを書く場合でも
rel="previous" として、古い記事にリンクを張ればいい。適切なブラウザーを使っていれば、キー操作一つで「前の」記事へとジャンプする。
問題は、 適切な ブラウザーが少いこと。そこで、 firefox と Emacs-w3m で link 要素を使う方法を書いとく。
Firefox - linkToolbar
firefox には LinkToolbar という拡張がある ( 日本語版もある)。この拡張を導入すると、 firefox の右下に link 先を表す小さなアイコンが表示される。アイコンは左から、スタート・親・最初・前・次・最後・その他、のページへのリンクになってる。アイコンを中クリックすると、新しいタブでページを開くので便利。
Emacs-w3m
Emacs-w3m には、link 要素用の関数は用意されていない。けれど、link 要素をスキャンして値を変数に保存する機能があるので、quick hack で link ジャンプを実現できる。link 要素関連の変数は次の通り。
- w3m-next-url
- rel="next" なリンク情報を保存
- w3m-previous-url
- rel="prev" なリンク情報を保存
- w3m-start-url
- rel="start" なリンク情報を保存
- w3m-contents-url
- rel="contents" なリンク情報を保存
この変数を活用する。.emacs に次のコードを追加する。
(add-hook 'w3m-mode-hook
'(lambda ()
(define-key w3m-mode-map "\C-cN" (lambda () (interactive) (if w3m-next-url (w3m-goto-url w3m-next-url))))
(define-key w3m-mode-map "\C-cP" (lambda () (interactive) (if w3m-previous-url (w3m-goto-url w3m-previous-url))))
(define-key w3m-mode-map "\C-cS" (lambda () (interactive) (if w3m-start-url (w3m-goto-url w3m-start-url))))
(define-key w3m-mode-map "\C-cC" (lambda () (interactive) (if w3m-contents-url (w3m-goto-url w3m-contents-url))))))
今回の例だと、 C-c N に Next、 C-c P に Previous、 C-c S に Start、 C-c C に Contents へのジャンプ機能を割り当てた。ここら辺のキーバインドは、お好きなように。
ref
2005-06-26
Yahoo Search Beta in Emacs-w3m (2) |Emacs|Emacs-w3m|
昨日の続き。Emacs-w3m は検索するにも優れたブラウザーで、Google の検索ページを SPC キーだけで閲覧することができる。もう少し説明すると、Emacs-w3m では SPC キーでページのスクロールができて、検索ページの一番下まで行くと、次の検索ページへとジャンプしてくれる。つまり、「次へ」のリンクを (クリックしたりして) 辿る必要がない。ブラウザーの操作に気を使わなくて済むということは、検索結果だけに集中できるのでありがたい。
この機能を Yahoo! Search Beta でも使うには、次のコードを .emacs に追加する。
(eval-after-load "w3m"
'(progn
(setq w3m-relationship-estimate-rules
(cons `(w3m-relationship-simple-estimate
"\\`http://beta\\.search\\.yahoo\\.co\\.jp/"
,(concat "<a href=" w3m-html-string-regexp
"><img src=http://i\\.yimg\\.jp/images/common/ar_next\\.gif")
,(concat "<a href=" w3m-html-string-regexp
"><img src=http://i\\.yimg\\.jp/images/common/ar_prev\\.gif")
nil nil)
w3m-relationship-estimate-rules))))
昨日書いた Yahoo! Search Beta 用のコードは CVS Emacs-w3m に既に取り込まれた (Thanks: 土屋さん) ので、新しもの好きな人は開発版もどうぞ。
2005-06-25
アンパサンド・テスト
Blogger の ATOM API で、& の扱いが変な気がする。というわけでテスト。
< " > &
< > & < > & < > &test
<p>test</p> <p>test</p>
Flickr This! |Flickr|Bookmarklet|
Flickr に画像をアップロードするには幾つか方法があって、bookmarklet を使うのも手の一つ。bookmarklet を使うと、閲覧中のページから画像をワンクリックで Flickr にアップロードできる。
インストールは、自分の Flickr ページから [Uploading Tools] のリンクを辿って、 "Send To Flickr" Bookmarklet をクリック。bookmarklet 用のウィンドウが開くので、 firefox であれば、このリンクをドラッグしてツールバーの上でドロップするだけ。
デフォールトだと「Photostream Bookmarklet」という長〜い名前の Bookmarklet が出来る。これじゃ、ツールバーのスペースを無駄に取るので「Flickr This!」( Blogger の 「Blog This!」のパクリ) という名前にしてみた。やり方は以下の通り。
- bookmarklet 用のウィンドウを開く
- ページのソースを表示
- 「Photostream Bookmarklet」とある行をコピーして、適当なファイル (foo.html) にペースト
- 「Photostream Bookmarklet」を「Flickr This!」に書き換えて保存
- foo.html をブラウザーで開いて、新しい bookmarklet をツールバー上にドラッグ & ドロップ
この方法は、 Flickr に限らずどの Bookmarklet でも使えると思う。
Google Maps の名所リンク集 |地図|
[2005-06-23] に Google Maps が日本に対応して、緯度・経度で Location を指定できる事を書いた。この緯度・経度を使う方法で日本のいろんな名所 (?) へのマップ・リンクを張っているページがある。
よくもまぁ調べたものだと、脱帽。
2005-06-24
Yahoo! Search Beta in Emacs-w3m
Yahoo! が出した 新しい検索エンジンは、 Google みたいにシンプルなデザイン。既に色んな所で話題になってるので、趣向を変えて Emacs-w3m から見た Yahoo! Search について。
検索エンジンの返す結果は、 firefox のようなモダン・ブラウザーで見ると見栄えがいい。でも、テキスト・ブラウザーでの見栄えまで考えている所は少ないようで、 Emacs-w3m ユーザーとしては不満の出る事も多い。私見では、まともに見えるのは Google 位いのもの (だから Google が好きになる)。yahoo search beta の出来は如何ほどか?
Google と Yahoo! のトップページを比べてみると、どちらもシンプル。ただし、Yahoo! では [画像] 検索や [音声] 検索へのリンクに JavaScript を使っているので、 Emacs-w3m では表示されない。 Google よりシンプルだけど、機能性がなくなっちゃあねぇ。最近、はやりの Ajax にしてもそうだけど、便利になったように見えてアクセシビリティが下がる事もあるのでウェブ制作者は考えて欲しいもの。
検索結果ページの比較
次に、両者のページで Flickr を検索してみた。
見ての通り、どちらもテキスト・ブラウザーでの見栄えがいい。実際、使ってみても Google と同じ位いの使い勝手。検索エンジンはウェブ・ツールの中で一番よく使うから、使い勝手が悪いと使う気がしない。 Yahoo! Search は、使ってみたい気にさせる。
Emacs-w3m の search に yahoo search を加える
(eval-after-load "w3m-search"
'(progn
(add-to-list 'w3m-search-engine-alist
'("yahoo beta"
"http://beta.search.yahoo.co.jp/search?p=%s&ei=UTF-8&eo=UTF-8"
utf-8))
))
追記(2005-06-26): 土屋さんに日本語で検索しても文字化けしない方法を教わったので上記のサンプルを修正しました。
via
2005-06-23
Google Maps 日本対応? |地図|
すでに色々なサイトで言われているけれども、 Google Maps が全世界のサポートを開始した。基本的には、アメリカとイギリスだけしかサポートしていなかったこのサービスだけど、東京を始めとして世界の主要都市がサポートされてるみたい。東京の地図を見るには、まず Google Maps をサテライト・モードにして、ページの検索クエリーに tokyo と入力する。まだ、サポートされている地域が少ないので、本当に使える! とは思えないけど先が楽しみ。
Google Maps で面白いのは、緯度・経度で場所 (Location) を指定できる事。
- ll=XX,YY
- 緯度と経度の指定
- spn=X,Y
- 拡大率の指定
- t=k
- サテライト・モード ON
例えば、次のように指定する。
http://maps.google.com/maps?ll=35.6,139.4&spn=0.01,0.01&t=k
ところで、地図を最大解像度で見てみると
© 2005 Google
と「すかし」(?) が入っているのが見える。ここら辺のセンスは、Google らしいなぁ、とニヤリとしてしまう。
via
ref
- [2005-06-11] ちず丸の地図
- [2005-06-04] スイスの地図 map.search.ch
- [2005-06-03] Livedoor 地図
- [2005-06-02] Goo 地図
- [2005-05-23] Infoseek 地図
ATOM の見栄え |Blogger|ATOM|Sage|
clmemo@aka は ATOM 0.3 でも情報を配信しているが、最近、気付いた事が一つ。RSS アグリゲーダーで見ると、パラグラフの要素が無視されて非常に読みづらい。少し調べてみた所、 firefox の Sage は、p エレメントを解釈してくれないようだ。例えば、次のようなソースを書く。
<p>foo bar</p> <p>FOO BAR</p>
すると、 Sage では次のように見えてしまう。
foo bar FOO BAR
本当は、こんな風に見たいのに。
foo bar FOO BAR
Sage で見栄えをよくするには、p エレメントの間に空行を入れればいい。
<p>foo bar</p> <p>FOO BAR</p>
これは Sage の仕様なのかバグなのか。少くとも Liferea では、p エレメントをちゃんと理解してくれた。
とにかく、これからは Sage で見ても見易いようにソースを書くつもり。よろしく。
昔の画像を Flickr に登録 |Flickr|
[2005-05-15] に描いた GIF アニメーション
しかし、 Flickr は GIF アニメーションに対応していないのだね。 @aka's photos では orz.gif が枠線だけが表示されてる。 @aka's photos で見るには、 Large Size のページを開く必要がある。 Flickr に GIF アニメーションを置こうというのが、そもそも間違っているのかな? 何かよい方法があれば教えて下さい。
2005-06-20
2005-06-19
Flickr 始めます |Flickr|
画像のホスティング・サービス Flickr に入った。
デジカメも持ってないし、携帯もカメラ付きじゃないのでフォトなんて... と思っていたけど、スクリーン・ショットを載せるのに便利かな。ということでサインアップ。これからは、ちょくちょく画像もブログに出すと思う。 Flickr の個人サイト (っていうのかな?) は以下のアドレス。
ちなみに、 Flickr は Yahoo! 傘下。 Google も Hello というサービスをやってて、 Blogger との連携も出来るみたい。ただ、 Hello にサインアップしようとすると requirements に Windows と出てくるのだけど... Linux には対応してないってこと?
quick-url でリンクを簡単に入力する |Emacs|HTML|Texinfo|RD|
[2005-05-05] に、abbrev を使ってリンクを簡単に入力する方法について書いた。今回はその発展版。
何がしたいか
abbrev を使う方法で不便なのは、省略文字と展開文字が一対一対応していること。例えば、google という省略文字は必ず <a href="http://www.google.co.jp/">Google</a> に展開される。HTML だけ書いているなら、これは望ましい動作で問題ない。でも、HTML 以外でも同じことがしたかったらどうか。例えばメールの中に Google への URL を書きたくなったら。Texinfo のソースに Google へのリンクを含めたくなったら。RD に (以下省略)。一対一対応だと対処できない。
こういう場合の解決策はいくつかある。モード別に abbrev を定義するとか、展開する形式に従ってプレフィックスやサフィックスを決めておくとか...。こういう方法だと URL 変わったら全部修正しなくちゃいけないから大変。
省略文字と URL は決まっているんだから、モード別に展開する形式を定義できればそれに越したことはない。というわけで、quickurl パッケージ。
quickurl
quickurl は、abbrev のように省略文字を URL に展開する GNU Emacs の標準パッケージ。省略文字と URL はリストで定義する。
("GNU" "http://www.gnu.org/")
GNU の後ろで M-x quickurl すると
<URL:http://www.gnu.org/>
という形に展開される。
なお、URL に続けてコメントを書くこともできる。正確な書式は次の通り。
(<省略文字> <URL> <コメント>)
省略文字と URL のリストは、quickurl-url-file (デフォールトは ~/.quickurls) の中に書く。ぼくの .quickurls はこんな感じ。
(
;; Emacs
("emacs" "http://www.gnu.org/software/emacs/" "GNU Emacs")
("xemacs" "http://www.xemacs.org/" "XEmacs")
; Elisp
("auctex" "http://www.gnu.org/software/auctex/" "AUCTeX")
("navi2ch" "http://navi2ch.sourceforge.net/" "Navi2ch")
("emacsw3m" "http://emacs-w3m.namazu.org/" "Emacs-w3m")
("mew" "http://www.mew.org/" "Mew")
("howm" "http://howm.sourceforge.jp/index-j.html")
("sdic" "http://namazu.org/~tsuchiya/sdic/")
("reftex" "http://staff.science.uva.nl/~dominik/Tools/reftex/" "RefTeX")
("tcode" "http://openlab.ring.gr.jp/tcode/" "T-Code")
("xsymbol" "http://x-symbol.sourceforge.net/" "XSymbol")
("yatex" "http://www.yatex.org/" "YaTeX")
;; Search Engine
("ask" "http://ask.jp/" "Ask Jeeves")
; Google
("google" "http://www.google.co.jp/" "Google")
("googlenews" "http://www.google.co.jp/nwshp?hl=ja&tab=wn&ie=UTF-8" "Google News")
; Yahoo
("yahoo" "http://www.yahoo.co.jp/" "Yahoo!")
; goo
("goo" "http://www.goo.ne.jp/")
; infoseek
("infoseek" "http://www.infoseek.co.jp/" "Infoseek")
;; Map
("yahoomap" "http://map.yahoo.co.jp/" "Yahoo! 地図")
("goomap" "http://map.labs.goo.ne.jp/" "goo 地図")
("infoseekmap" "http://map.www.infoseek.co.jp/" "Infoseek 地図")
("livedoormap" "http://map.livedoor.com/map/scroll" "Livedoor 地図")
("googlemap" "http://maps.google.com/" "Google Map")
("mapsearch" "http://map.search.ch/index.en.html" "map.search.ch")
以下略...
)
新しい URL の追加は、.quickurls を開いて追加・保存するだけ。.quickurls の修正は直ちに反映される (再ロードとかは不要)。
モード別展開用の設定
実は、このままじゃ abbrev の global 展開と同じ。少し手を加えなくちゃいけない。
quickurl は、展開形式を自分でカスタマイズできる。この機能を使わせてもらう。モードごとに展開形式を変えるには、次のコードを .emacs に追加する。
;; 好みのキーに設定
(define-key mode-specific-map "q" 'quickurl)
(setq quickurl-grab-lookup-function #'quickurl-current-word)
(defun quickurl-current-word ()
(save-excursion
(let ((beg (progn (skip-chars-backward "A-Za-z0-9-") (point)))
(end (progn (skip-chars-forward "A-Za-z0-9-") (point))))
(buffer-substring-no-properties beg end))))
(setq quickurl-format-function #'quickurl-mode-format-function)
(eval-after-load "quickurl"
'(progn
(defun quickurl-mode-format-function (url-list)
(let ((url (quickurl-url-url url-list))
(desc (quickurl-url-description url-list)))
(delete-region (point) (search-backward lookup))
(cond
((memq major-mode '(nxml-mode sgml-mode xml-mode yahtml-mode))
(format "<a href=\"%s\">%s</a>" url desc))
((memq major-mode '(rd-mode))
(format "((<%s|URL:%s>))" desc url))
(t url))))
))
上の設定では、C-c q で文字列を展開するようにした。
quickurl-mode-format-function がこの quick hack のキモ。今の所、nxml-mode, sgml-mode, xml-mode, yahtml-mode と rd-mode に対応している。HTML 入力用のモードでは
<a href="URL">コメント</a>
という形に、RD モードでは
((<コメント|URL:URL>))
それ以外のモードでは、URL だけが入力される。
quickurl-current-word を定義しているのは、デフォールトでは展開語の直前が日本語だったり、タグだったりすると quickurl がちゃんと動かないのに対応する為。
雑感
abbrev 機能は便利だけど、URL の展開には向いていない気がする。abbrev は略語展開なんだから、URL の入力まですべきではなかったのかも。今は、abbrev は略語展開、quickurl は URL の入力と分けて使ってる。例えば、clmemo は略語展開で「ChangeLog メモ」へ、quickurl で clmemo.el へのリンク という感じ。
ref
- [2005-05-05] Blog を書く時のサイトへのリンク
2005-06-18
Emacs-w3m で Google News を検索する |Emacs|Google|
[2005-06-16] に書いた、 Emacs-w3m から Google News を検索する機能が、 Emacs-w3m の開発版に取り込まれた (作業をしてくれた山岡さん、ありがとうございます)。
日本語環境で使っていれば、 google news という検索エンジン名で Google ニュース 日本語版を、 google news-en で英語版の Google News を検索できる。
ref
- [2005-06-16] Emacs-w3m の検索に Google News 検索を加える
- [2005-06-15] NET の Google News への言及
- [2005-06-15] Google News as Google Fresh
プレフィックス・キー以下のコマンドを調べる |Emacs|
Emacs でプレフィックス・キーの後に C-h すると、プレフィックス以下のキー・バインドの説明が出る。
Emacs のキーバインドには、プレフィックス・キーを持つものが多い。ファイルの保存や新規作成は C-x C-s と C-x C-f だし (プレフィックスは C-x)、C 言語モードや LaTeX モードのようなモード由来のキーは C-c がプレフィックスとして使われる。他に思いつくプレフィックスを挙げれば:
- C-h
- Help
- C-x 4
- Other Window
- C-x 5
- Other Frame
- C-x RET
- Char Coding
- C-x a
- Abbrev
- C-x r
- Register
- C-x v
- Version Control
とにかく、一杯あるわけ。プレフィックス以下には同系列コマンドがバインドされてるから、その一覧が見れると嬉しい。そこで、プレフィックスを押した後に、 C-h してみましょ。
例えば、 C-x 4 関連のコマンドを調べるには、 C-x 4 C-hとする。すると、
Global Bindings Starting With C-x 4: key binding --- ------- C-x 4 0 kill-buffer-and-window C-x 4 . find-tag-other-window C-x 4 d dired-other-window C-x 4 a add-change-log-entry-other-window C-x 4 C-o display-buffer C-x 4 b switch-to-buffer-other-window C-x 4 C-f find-file-other-window C-x 4 r find-file-read-only-other-window C-x 4 f find-file-other-window C-x 4 c clone-indirect-buffer-other-window C-x 4 m compose-mail-other-window
今まで使ってなかったコマンドが見つかるかも。
2005-06-17
こんなメール通知サービスないかな?
今日は天気もよかったので洗濯物を干した。毎日が雨だから、少しでも晴れ間が覗くと洗濯物を干したくなる。
でも時々、予想 (というか願い) を裏切ってポツポツと来る事がある。そんな時、家に居ればいいけど、スーパーに買い物なんかに行ってると雨に気付かない。そんで、建物から出ると雨が降ってる目にして敗北感に打ちのめされてしまう。もし、雨が降り始めた時に携帯にメールで通知してくれるサービスがあったらよいなぁと思う。
例えば、水に反応して定型メールを携帯に送るセンサーのようなものがあれば、庭に置くだけで使えて便利だと思うのだけど。誰か作ってくれないかな。
2005-06-16
Musical Baton (ミュージカル・バトン)
ミュージカル・バトンを zRyu さんから渡されてしまった! これは受けねばなるまい。日本における Musical Baton の流れは Musical Baton の泥臭いまとめが参考になるかな。
今コンピュータに入っている音楽ファイルの容量
1.7 GB (wav)
少ないということは、こういう事を言うんだろうな。mp3 でも ogg でもありません。wav です! 圧縮なしです。音質優先です!
基本は CD 持って行って (持って来て) かけてます。
今聞いている曲
メンデルスゾーンの弦楽八重奏曲 Op.20。たまたま、かけてた CD がこれというだけ。
最後に買った CD
The Best Smooth Jazz...Ever! [Capitol]
よく聞く、または特別な思い入れのある 5 曲:
-
ベートーヴェン: 交響曲第 5 番「運命」 フルトヴェングラー指揮ベルリン・フィル (1947.5.27)
-
フランク: ヴァイオリン・ソナタ ティボー、コルトー (1929.5.28)
- モーツァルト: レクイエム K.626 (バイヤー版) コルボ指揮ローザンヌ器楽・声楽アンサンブル (1995.9.24)
- ベートーヴェン: ピアノ・ソナタ第 14 番「月光」 シュナーベル (1934.4.23)
- アイルランド民謡: Siúil A Rúin (Johnny Has Gone for a Soldier)
括弧の中の数字は録音年月日。
Comments:
1. 最高の「運命」。戦後の復活ライブ第 3 日目!
2. マニアの中で評価の高い 1923 年の旧録音ではなく、新録音の方。異常な緊張感がスキ。
3. 70 年代の旧録音ではなく 1994 年のバイヤー版による新録音。サラリと進む冷たさに惹かれる。
4. 襟を正して聴かずにはいられない。ベートーヴェンのピアノ・ソナタの聖典!
5. 一枚に絞れません。PPM
次に、お願いしたい人
迷惑かけてるだけのような... よろしくお願いします。m(_ _)m
Emacs-w3m の検索に Google News 検索を加える |Emacs|Google|
昨日は、
Google News の検索はフレッシュ検索として使える
って書いた。せっかくだから、愛用のブラウザー
Emacs-w3m の検索エンジンに
Google News も組み込んでみる。以下のコードを .emacs に追加するだけ。
(eval-after-load "w3m-search"
'(progn
(add-to-list 'w3m-search-engine-alist
'("google news"
"http://news.google.co.jp/news?hl=ja&ie=Shift_JIS&q=%s"
shift_jis))
(add-to-list 'w3m-uri-replace-alist
'("\\`gn:" w3m-search-uri-replace "google news"))))
2005-06-15
楽天アフィリエイト始めました
ギフトを買おうと Amazon を探すも、よいものが見つからず。結局、楽天で買った。せっかく買ったので、 Amazon へ商品のリンクをはろうと考えた... が。 Amazon に商品がないから 楽天で買ったのだよね。商品がないのに商品リンクははれない。しばし自己嫌悪。
そんなわけで楽天アフィリエイト。 Amazon より、こっちの方がよいかも。具体的には、
- 楽天会員なら、すぐに始められる (手続きなし)
- 商品リンクがシンプル (iframe なし、無駄画像なし)
- トップページへのバナーが分かり易い (Amazon は iframe なしバージョンないの?)
Amazon と比べると、儲けが少ないように感じるけど、お金が目的というより、自分の買った物を紹介するのが目的だから読者がより見易い形でリンクを提供できる方が嬉しいのだ。
ちなみに、購入したボールペンは
2005-06-14
CNET の Google News への言及 |Google|
前のポストで Google News を誉める記事を書いた。投稿後、その中でリンクをはった CNET の記事を読んだ。そしたらびっくり、話題は Michael Jackson の無罪判決を軸にしたニュース・メディア・サイトのニュース配信の取り組みだった。無罪判決がメインじゃなかった。
ううむ。 前のポストと CNET の記事を両方読むと、なんかチグハグ。言いたかったことは、 Google News こそ最速のニュース・メディアだ、ということではなくて、 Google News をフレッシュ・サーチとしても使えるよね。という事なので誤解なきよう。
Google News as Google Fresh |Google|
Google News のトップについてる検索ボックスは、 Google のフレッシュ検索としても使えるのだね、という話。
Google は素晴らしい検索エンジンだけど、最新の情報を手に入れるのには必ずしも最良の手段じゃない。例えば、このポストを書いてる数時間前に Michael Jackson の児童に対する性的虐待に関する裁判で無罪の判決が出た。そこで Google で Michael Jackson を検索すると、トップには ソニーのミュージック特集サイトが出てくる。以下、Michael Jackson のファンサイトとか Amazon の商品ページが続く。無罪判決の記事は最初の 10 件にも (今、現在は) 現れない。これらのサイトは、Michael Jackson を知るには良いサイトだろうけど、フレッシュさに欠ける。
そこで Google News。まあ、News サイトなのだから当たり前ではあるけれど、最新の情報が集まってる。 Google News のよい所は、トップにある検索ボックスから自分好みなニュースを検索できること。つまり、 Google の枠組の中でフレッシュ検索ができるのだね。ここで Michael Jackson を検索すると CNET が配信しているメディア・ニュースがひっかかった。
ニュースのカスタマイズと併せて、自分用のニュース・サイトとしては Google News は使い勝手がいい。
ref
- [2005-05-21] Google News に「スター・ウォーズ」を追加
- [2005-04-28] Google News 関連記事
ChangeLog メモで Howm を使う quasi-howm |ChangeLogメモ|Howm|Emacs|
ChangeLog メモの基本は箇条書き (なのかな?)。短文で思ったこと、考えた事をメモっておけるのがいい所。長文を書くのには向いていない。でも、時々長い文章を入れたい時があるのだよね。例えば、なくなってしまいそうなウェブページのバックアップを取りたいとか、プログラムのサンプル・コードとか。
そこで強引に長いテキストを ChangeLog メモに含めればいいかというと、問題は簡単じゃない。困るのは、メモが冗長になること。言い換えれば、不必要なメモが混入すること。というか、ウェブをバックアップしたら、それは「全文」であってメモじゃないし。だから、長いテキストは別ファイルにすべきだと思う。「ポケット一つの原則」に反しちゃうけど、仕方がない。そして、 ChangeLog メモには、そのテキストの要約 (サマリー?, メモ?) とリンクを張ればいい。
howm
howm は、「一人お手軽 Wiki もどき」の略。 ChangeLog メモ が一つのファイルにたくさんのメモを書くのに対して、 howm は一つのディレクトリーにたくさんのファイルを書く。この形式を ChangeLog メモで使う仕組み (quasi-howm) を作った。
quasi-howm の使い方
ChangeLog メモで C-c, ( M-x quasi-howm) すると、次のようなタグが挿入され
(howm: 20050613-214149.howm)
新しいバッファーが開く。テンプレートは howm と同じ。
= タイトル [2005-06-13 21:41] 本文...
一行目にタイトルを書いて、以下本文を書く形。書き終えたら、保存。
ChangeLog メモから、 howm なファイルにアクセスするには、上のタグの上にポインターを持っていって C-c RET。
たったこれだけ。簡単でしょ。
quasi-howm のインストール
まず、以下のコードを .emacs に入れる。
;;
;; quasi-howm
;;
(defun quasi-howm ()
(interactive)
(let ((file (format "%s%s.howm" quasi-howm-dir
(format-time-string quasi-howm-file-name-format))))
(unless (file-exists-p (file-name-directory file))
(make-directory (file-name-directory file) t))
(when (equal (buffer-file-name) (expand-file-name clmemo-file-name))
(unless (save-excursion (backward-char 1) (looking-at "^\t"))
(or (looking-at "^") (insert "\n"))
(insert "\t"))
(insert (format "(howm: %s)" (file-name-nondirectory file))))
(find-file file))
(insert "= ")
(save-excursion
(insert "\n" (format-time-string "[%Y-%m-%d %H:%M]\n"))))
(defun clmemo-tag-howm-open-file ()
(interactive)
(let ((file (buffer-substring-no-properties
(progn (beginning-of-line) (search-forward "(howm: "))
(1- (search-forward ")")))))
(setq file (concat
(substring file 0 4) "-"
(substring file 4 6) "/"
file))
(find-file (concat quasi-howm-dir file))))
(add-hook 'clmemo-mode-hook
'(lambda ()
(define-key clmemo-mode-map "\C-c," 'quasi-howm)))
(setq clmemo-tag-list
(cons '("howm" clmemo-tag-howm-open-file) clmemo-tag-list))
それから、quasi-howm の設定も .emacs に追加。
(defvar quasi-howm-dir "~/personal/memo/howm/") (defvar quasi-howm-file-name-format "%Y-%m/%Y%m%d-%H%M%S")
quasi-howm-dir 以下に quasi-howm したファイルが保存される。 quasi-howm-file-name-format はファイル名のフォーマット。上の例だと 2005-06/ というディレクトリーの下に 20050613-214149.howm というファイル名ができる。 %Y とかは、関数 format-time-string の説明を参照のこと。
ref
2005-06-13
サイドバーのメニューを Peek-a-boo スタイルにした |Blogger|CSS|JavaScript|
サイドバーにあるメニューを Peek-a-boo スタイルにした。 firefox や IE でこのサイトを見ていれば、サイドバーのタイトル (About とか Link とか) をクリックして、内容の非示・非表示が切り替えられる。コードは、JavaScript と CSS だけ。JavaScript 非対応なウェブ・ブラウザー ( lynx とか w3m) では、非表示の切り替えはできないけど、見る分に問題はない。 Blogger のヘルプで参考にしたコードが Peek-a-boo comments という名前で紹介されていたので、このページでもそういう風に呼ぶ事にしますね (本当は何て言うんだろ?)。
Blogger のヘルプは 2005-06-13 現在、日本語訳されていない。というわけで、Tips をおりまぜてコードの説明を書いとく。
JavaScript, CSS, and HTML
JavaScript のコードは以下の通り。これを head エレメントの中に書いておく。
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
}
}
</script>
CSS のコードは短い。
.commenthidden {display:none}
.commentshown {display:inline}
ようは、CSS で表示・非表示するクラスを定義して、JavaScript で適義クラスを設定してやるだけ。HTML のコードは次のようになる。
<a href="javascript:togglecomments('cXXX')">ココをクリックすると表示・非表示が切り替わる</a>
<span class="commenthidden" id="cXXX">
表示・非表示される内容。
ウェブページを開いた時、この内容は非表示になっている。
最初から表示させるには class="commenthidden" を "commentshown" にする。
</span>
「表示・非表示される内容」を含む span エレメントの id
cXXX はページの中で固有であれば何でもよい。ただし、
javascript:togglecomments の引数に同じ値 (ここでは
cXXX) を指定しなければいけない。
Small Hack
このページで使ってる Peek-a-boo スタイル (?) は、上のコードに若干手を入れたもの。表示・非表示を切り替える文字列の前に、上向き三角 (表示時) と下向き三角 (非表示時) を出すようにした。修正版 JavaScript は次の通り。
function toggle_display (head_id,body_id) {
var whichhead = document.getElementById(head_id);
var whichbody = document.getElementById(body_id);
if (whichbody.className=="body_shown") {
whichhead.className="head_hidden";
whichbody.className="body_hidden";
} else {
whichhead.className="head_shown";
whichbody.className="body_shown";
}
}
そして、CSS はこう。
.body_hidden { display: none; }
.body_shown { display: block; }
.head_hidden:before { content: "▼ "; } /* #x25bc */
.head_shown:before { content: "▲ "; } /* #x25b2 */
サイド・バーの About は、Templete で次のように書いた。
<h2 class="sidebar-title"><a id="habout" class="head_shown" href="javascript:toggle_display('habout','babout')">About</a></h2>
<div class="body_shown" id="babout">
<p><$BlogDescription$></p>
<p>[ <a href="<$BlogSiteFeedUrl$>" title="Atom feed">Site Feed</a> ]</p>
</div>
CSS の
:before を使って、head_shown クラスの前に文字を生成させてる。もし、これを本文の中に直接書き込むようにすると、JavaScript・CSS 非対応なブラウザーで表示・非表示両方の場合の文字が見えることになってマヌケに見えちゃう。
Blogger 用の設定
サイドバーの About はデフォールトで表示。クリックして初めて非表示になる。そんなに長いものじゃないし、オプション的に非表示にできればいいか、という感じ。ただし、Previous とか Archives なんかは長くなりそうだから、ItemPage では非表示にしておきたい。そこは、 Blogger の Templete で対処。ちと繁雑だけど、次のコードを書いてる。
<MainOrArchivePage>
<h2 class="sidebar-title"><a id="hprevious" class="head_shown" href="javascript:toggle_display('hprevious','recently')">Previous</a></h2>
<ul id="recently" class="body_shown">
</MainOrArchivePage>
<ItemPage>
<h2 class="sidebar-title"><a id="hprevious" class="head_hidden" href="javascript:toggle_display('hprevious','recently')">Previous</a></h2>
<ul id="recently" class="body_hidden">
</ItemPage>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
ref
2005-06-12
Behind the Scenes: センスのあるコメント
Jonathan Snook 氏のブログにあるコメント欄が素晴らしい。ブログを提供する者にとして、ぼくは「コメント」を機能としてでしか捉えてなかった。このサイトを見ると、コメントもデザインの一つとして考えるべきなのだと思い知らされる。通りすがりの人にコメントを書かせる、魅力のあるサイト。
via
初めてのコメント |Blogger|
Blog を書き始めて一か月半。やっと 初めてのコメントが入った。やったね。人のブログには何気なくコメントを書いてたものだけど、自分がもらってみるとこんなにも嬉しいものだね。これからは、積極的にコメントを書くようにしよう。
ちなみに、 Blogger ではコメントが入るとメールで通知するサービスがある。沢山ブログを書いてると、コメントが入ったかどうかを調べるのは患わしいので、便利。今回も、このサービスのおかげで新着コメントに気付いた。メールの中に、コメントの書かれた記事への permalink が入ってて良い (最初、気づかなくてコメントの入った記事を探し回ったのは内緒)。願わくば、HTML メールで送らないで欲しいのだけど... 変更はできるのかな?
Google にインデックスされた?! |Blogger|
アクセス解析を見て、最近 Google から直接 Goo 地図の記事に跳んで来る人が多い事に気付いた。これは、もしや Google にインデックスされたか? 試しに、 clmemo@aka の一番上にあるナビゲーション・バーに文字を入力してみると... ちゃんと検索されました。記憶にある限り、2005-06-07 まではほとんど Google にインデックスされてなかった。お蔭で、自分のブログなのに検索ができなくて困った困った。
それはさておき、 clmemo@aka がインデックスされたので、ナビゲーション・バー二段目にある カテゴリー・サーチも使えるようになった。 設置してから一か月、全く使えないので無くそうかと思ったが、もう大丈夫 (だよね?)。皆さんもガンガン使って下さいな。
ref
- [2005-05-11] カテゴリー・サーチをナビゲーション・バー風に配置する
- [2005-05-10] Blogger でカテゴリー・サーチ
2005-06-11
ちず丸の地図
一週間ぶりに地図ネタ。 ちず丸という地図サイトもスクロール地図に対応してる。 ちず丸は、 日本コンピュータグラフィック株式会社というデジタル地図専門の会社 (?) が運営しているサイト。利用している地図も、この会社が作ったものを使っているみたい。一番大きな地図は、一辺 250 m のもの。表示エリアを横幅の十分の一の単位で変えられる (一辺 250 m の地図なら 10 m 刻みで、1 km の地図なら 100 m 刻みで表示エリアの横幅を変更できる) のが面白い。実用的かどうかは別にしてね ;) あと、山とか寺とかコンビニとかのアイコンは、他の地図サイトより凝っていて楽しい。
ちず丸の不満は、スクロール時の地図のロードにタイムラグがある事。つまり、マウスをクリックして地図をドラッグすると、一瞬進行方向の地図が空白になる。マウスから手を離すと、
Loading...
と出てから、地図が表示される。せっかくのスクロールが活かされてない。Ajax じゃないのかな? ちなみに路線検索との連携はなし。残念。
それからもう一つ。 Mapion の次世代地図検索 マピオンラボでもスクロール地図が提供されている。こちらは無料の会員登録が必要。なので、ウェブページを見ただけで試してない。地図にお絵かきができたり、A3 印刷に対応したりと面白そうではあるけれど。
今の所、一押しは goo 地図かな。
ref
- [2005-06-04] スイスの地図 map.search.ch
- [2005-06-03] Livedoor 地図
- [2005-06-02] Goo 地図
- [2005-05-23] Infoseek 地図
2005-06-10
最小幅の設定 |Blogger|CSS|
CSS 非対応 (もしくは対応が不十分) なブラウザーで読んでいる人の為に説明をすると、このページはメイン・コンテンツとサイドバーの 2 カラム構成になってる。基本は fluid width なページだけど、横幅 が 500px 以下では fixed width になる。備忘録の代わりにトリックを書いておこう。
テンプレートと CSS
このページのテンプレートは次の通り。
<body>
<div id="wrap">
<div id="main-content">
メイン・コンテンツ
</div>
<div id="sidebar">
サイドバー
</div>
</div>
</body>
CSS は、次のように書いてる。
body {
color: #333;
background: #eee;
}
#wrap { min-width: 500px; }
#main-content {
float: left;
width: 61.8%;
margin: 0 1% 0 2%;
background: #fff;
border-style: none double;
border-width: 18px;
border-color: #eee;
}
#sidebar {
float: left;
width: 28%;
font-size: 85%;
line-height: 1.4;
color: #999;
}
CSS の解説
何故に #main-content の width が 61.8% という微妙な値なのかというと、本文とそれ以外を黄金比にしたかったから。黄金比は 1:(1+sqrt(5))/2 で、パーセントにすると 61.8:38.2 になる。本文の左には 2%, 右には 1% のマージンを取った。 #sidebar の width=28% は、実は適当。
このスタイルでは、メイン・コンテンツの両脇に白いバーを出してる (※ border-style: double をサポートしているブラウザーでないと見えません)。これは、二重線 border の線と線の間がメイン・コンテンツの background の色で塗られる事と、二重線自体は body の background と同じ色を指定して見えなくする事で実現している。ただし、border-width にパーセント指定ができなかったので 18px に指定。18px の由来は、 Google Adsense の枠線の太さが 6px っぽいのを参考にして、その値を 3 倍にしたもの。
横幅がパーセント指定と px 指定の混合になってしまったので、ブラウザーがある程度小さくなると float 指定したサイドバーがメイン・コンテンツの下に回されてしまうバグが入った。これを解決するために、min-width 値を設定して、この値より小さくなった時は fixed width にするようにした。
min-width の計算
横幅は、メイン・コンテンツの幅とサイドバーの幅の足し算。ボックスの幅の計算は次のようになる。
横幅 = margin + border + padding + width
具体的な計算は次のようになる。
横幅 = メイン・コンテンツの幅 + サイドバーの幅
= #main-centent(margin-left + border-left + width + border-right + margin-right)
+ #sidebar(width)
= ( 2% + 18px + 61.8% + 18px + 1% ) + 28%
= 92.8% + 36px
ここで、92.8%+36px が 100% より上回るとサイドバーが動いてしまう。よって
92.8% + 36px < 100% * width
36px < 7.2% * width
∴ width > 36px / 0.072 = 500px
つまり、min-width=500px というわけ。
ただし、IE6 は min-width に対応していないので、幅を 500px より小さくするとサイドバーがメイン・コンテンツの下に行きます。ゴメンなさい。
HMV のアカウントに入れない
2005-05-29、
HMV で気になる CD を見つけたのでウィッシュ・リストに追加しようとしたら... ログインできない!
入力された情報が合っていません
と宣う。
HMV にログインするのも久し振りだったので、パスワードを間違えたかなと「パスワードを忘れた方はこちら」から「正しいパスワード」を手に入れたけどダメ。仕方がないので
HMV に直接フォームから問い合わせた。
まず、言われたのが firefox の問題。1.0.3 で、ログインできない不具合が報告されているという。これは 1.0.4 にバージョン・アップする事で解決するとの事。1.0.4 にアップグレードして再トライしてみる。ここで解決すれば、ハッピーだった。でもログインできず。試しに Windows の IE から入ろうとしたけど、ログインできず。つまり、今回の問題に関してはブラウザーの問題ではないわけ。
そこで、次に疑ったのはメール・アドレス。 HMV のアカウントに登録しているメール・アドレスには + 記号が入ってて、それが悪さをしてるんじゃないかな〜と思った。果たして、 HMV からの返答は予感的中。
HMV.co.jp ではメールアドレスに「< > " ; & +」等の記号が入っている場合、ログインを行うことができませんのでご注意くださいませ。
セキュリティー強化の為、システムの一部変更
をしたのだという。さて、この対処法については
HMV サイトへログインしていただく為に、新しいメールアドレスをご用意して頂くことは 可能でしょうか? もしご用意して頂けましたらば、こちらへお伝えくださいませ。 弊社スタッフがご登録のメールアドレスを新しいものに差し替えさせて頂きます。
とのこと。心当たりのある人は、 HMV に問い合わせてみる事をお勧めします。このクレームをしたのはぼくが最初だったのか、解決まで 10 日弱かかったけど、もうそんな事はないはず。手続き自体は、1、2 日で終わると思う。
ちなみに、気になった CD というのは ザ・5 ブラウンズ。
2005-06-09
「"デザイン(構造も)がかっこいいブログ@2chブログ板"まとめサイト」|CSS|
題名が全てを語っているので、説明の必要はないよね。 Blog のデザインを変えるのに、このページも参考にした。
優良デザインなページを紹介するという意味では、 昨日紹介した CSS Zen Garden と同じ。違うのは、対象がブログだという事。ブログのサムネイルがあるので、リンクを辿る事なくイメージがつかめる事。
あと、このまとめサイト自身、センスがいい。サムネイルの上にマウスを持っていくと、大き目のイメージがポップアップするのだけど、これはどうやっているのだろう。デザインは奥が深い。
Movable Type 3.17 日本語版リリース
ちょっと思う所があって、最近 Movable Type にも手を出してる。公開はしないけど、自分用のメモみたいなのを取れるようにしてみようかな... と。そんなこんなで目をつけてた Movable Type の最新版 3.17 の日本語版が今日リリース。早速、ダウンロードした。続きは、また、後日。
2005-06-08
CSS Zen Garden |CSS|
CSS Zen Garden は CSS を使ったサンプルの宝庫。 日本語版もあるのが嬉しい。500 以上もサンプルがあるので、全部見るのは大変だけど時間があったら是非どうぞ。
2005-06-06
新スタイル Green Witch |Blogger|HTML|CSS|
Blogger が提供するスタイル (テンプレート) から、自作のものに変えた。基調は Green。固定幅 (fixed width) なスタイルは好きじゃないので、可変幅 (fluid width)。IE のバグには対応していないので、IE な人は表示が崩れると思う。
今まで使っていたテンプレート (Dan Cederholm 氏の TicTac に修正を加えたもの) も、alternate stylesheet として残した。スタイル・シート切り替え機能付のブラウザー (例えば firefox) を使えば古いスタイルも見られる。
ところどころに、ベースにした TicTac の残骸 (例えば footer) があるので、暇を見て直すつもり。
2005-06-05
sgml-quote は Emacs 21 にない |Emacs|
[2005-05-09] に、SGML 系のマークアップ言語 (HTML, XML) で < と > と & を < と > と & に変換する Emacs コマンド sgml-quote を紹介した。ところが、このコマンドは Emacs 21 にはない。Emacs-22 以降での提供なので御注意を。
2005-06-04
CSS コードを別ファイルにした |Blogger|
Open Cage で CSS コードを別ファイルにするメリットが説かれてた。
今回の変更で CSS ファイルは自前のサーバーに設置するように変更しました。これによってポストに占めるレイアウトコードが激減するのでかなりファイルサイズが小さくなっているはず。レスポンスが凄い向上するはずです。また冗長な部分がなくなって検索ロボットが情報を取り出しやすくなるのもいいところです。
また，CSS ファイルに変更を加えると直ぐに反映されるので，試行錯誤するのも楽。これまではいちいち再構築をしなければならなかったので時間がかかってしまい面倒臭かったですが，これで気軽に手を入れることができます。ちょっと嬉しい。
なるほど、と頷くことしきり。早速、 clmemo@aka も CSS コードを別ファイルにした。ついでに、Templete も少しいじってみた。permanent link をブログのタイトルの名にも出すようにしたり、 Google AdSense を ItemPage ではバナーで表示するようにしたり。次に目指すは、自作 CSS ファイルかな〜。
スイスの地図 map.search.ch
Google Map が Ajax を使ってスクロールに対応してから、他の地図サイトが続々とスクロールに対応した。そして、 Google Map が Satellite モードを塔載したら、Microsoft がそれに続くみたい。 Google Mapは、常に最先端を行っていると思ってた。 map.search.ch を見るまでは。
map.search.ch はスイスの地図サイト。英語・ドイツ語・フランス語で書かれてる。日本やアメリカの地図は提供していない。この地図サイト、衛星写真に (普通の) 地図の都市名・道路・鉄道が上書きしたような感じ。グルメとかのアイコンにマウスを持っていくと、情報がポップアップされる。もちろん、スクロール地図。文章では上手く書けない。とにかくセンスがいい。日本の地図サイトも、こういうのを作って欲しい。
via
ref
- [2005-06-03] Livedoor 地図
- [2005-06-02] Goo 地図
- [2005-05-23] Infoseek 地図
2005-06-03
Livedoor 地図
昨日に引き続いて地図ネタ。 livedoor の地図も スクロールに対応した (ベータ版提供)。どこもかしこも、Ajax ですな。これで知る限り、 Infoseek と goo と livedoor がスクロール地図を提供している事になる。
livedoor 地図は Increment P Corp から地図の提供を受けている。でも、提供元へリンクが張られてない。いいのかなぁ。ちなみに、 Increment P Corp は Map Fan という地図サービスをやっている。そのサイトに「マウスで動かせる地図」とあったので、これは、と思ったけど AJAX じゃなくて地図専用ソフトだった。もう、このソフト、売れないだろうなぁ。
閑話休題、 livedoor 地図は goo 地図のようにルート検索をサポートしてる。でも、グルメ検索もないし、路線検索もないし、縮尺が「詳細」、「極詳細」となってて詳しさの具体性がないし... 地図サイトとしての魅力に乏しい。
まあ、 livedoor 地図も悪いばかりじゃない。目玉は、地図にトラックバックが打てる機能。地図を使っている人が利用者の声が残せる。ここのお店が美味しかったとか、見所だとか... 使う人が増えれば、とても面白い地図サイトになるかも。どれだけ良質のトラックバックが書き込まれるかがポイントかな。
via
ref
- [2005-06-02] Goo 地図
- [2005-05-23] Infoseek 地図
2005-06-02
Goo 地図
infoseek の地図がよいと [2005-05-23] に紹介したけれども、もう一つ。 goo の地図もよい。こちらも Zenrin から地図の提供を受けているので、 infoseek の地図 と同じ詳しさ。加えて、 infoseek の地図だと不満のあった「路線案内」との連携も取れてる。
goo の地図は、他にも、ルート検索がある。これは路線検索ならぬ「車のルート」を出発点と到着点から表示する検索。車に乗りながら、この検索が使えれば言う事なしなんだろうけど、予め検索結果を印刷しておけば便利かも。ルート検索用に「一括印刷」なんてボタンもあった。
更に goo の地図を楽しみたければ、 goo lab の地図がお勧め。lab というだけに実験中のサービスなのだけど、 infoseek 地図と同じようにスクロール機能をサポートしている。マウスで地図をドラッグすると、シームレスに地図がスクロールする。あとは、銀行の ATM とか郵便局の ATM とか美容院とか中華料理なんて「ジャンル」が検索できる。やりたい放題!? 使ってて楽しめるウェブ地図という感じ。
2005-06-01
blg-css: CSS 用 block grep |Emacs|blgrep|CSS|
CSS記述規則「プロパティ別整理法」の提案
大きな CSS ファイルを作ると、整理ができなくなって HTML につけた id や class 名が混沌としてくる。または、どんな id・class 名をつけるべきか混乱してくるという。そこで、あきやんさんが提案するのが「プロパティ別整理法」というもの。詳しい説明は、 あきやんさんのページを見てもらうとして、とりあえず概略をば。サンプルは、 自分のページで使っている CSS ファイル。
あきやんさん曰く、大低の人はセレクター毎にプロパティーを設定している。ぼくの CSS ファイルもそう。
body {
margin: 1em 5%;
line-height: 1.35;
}
h1 {
text-align: center;
text-family: sans-serif;
text-size: xx-large;
margin: 0.8em -5%;
padding: 0.5em;
background-color: #ffff00;
}
h2 {
text-family: sans-serif;
text-size: xx-large;
border-bottom: 4px dotted #666666;
padding-bottom: 4px;
padding-top: 20px;
}
h3 {
text-size: x-large;
border-bottom: 2px dotted #666666;
padding-bottom: 4px;
padding-top: 20px;
}
(続く)
この方式を 図書館方式と名付けてる。不満点を一言であらわすと、
とにかく無駄な時間がかかることが不満です。
メンテナンス性の低さ、見栄えと関係の無い事象への負担が無視できないほどに大きいのです。これは、良いスタイルを目指す際の重い足かせとなっています。
とのこと。ぼくは、それほど大きな CSS ファイルは作ってないので不満はないけど、CSS 処理にバグを持つ NN4 とか IE5 の対策を入れている CSS ファイルはすごい事になっているので、大変そうなのは薄々分かる。
そこで プロパティ別整理法。これはシンプルに、1 セレクターに 1 プロパティーと割り切ってしまう方法。上の例をプロパティ別整理法で書くとこうなる。
/* background-color */
h1 { background-color:#ffff00 }
/* border-bottom */
h2 { border-bottom:4px dotted #666666 }
h3 { border-bottom:2px dotted #666666 }
/* line-height */
body { line-height:1.35 }
/* margin */
body { margin:1em 5% }
h1 { margin:0.8em -5% }
/* padding */
h1 { padding:0.5em }
/* padding-bottom */
h2 { padding-bottom:4px }
h3 { padding-bottom:4px }
/* padding-top */
h2 { padding-top:20px }
h3 { padding-top:20px }
/* text-align */
h1 { text-align:center }
/* text-family */
h1 { text-family:sans-serif }
h2 { text-family:sans-serif }
/* text-size */
h1 { text-size:xx-large }
h2 { text-size:xx-large }
h3 { text-size:x-large }
(続く)
いろいろ利点はあるそうだけど、ぼくはプロパティーごとに設定が分かるのがよいなぁと思う。セレクター単位でプロパティー値を見るには、grep を使えばよい、とのこと。
blg-css.el
さて、ここからが本題。プロパティー別な情報をセレクター別な情報に grep で変換できるというなら、セレクター別な情報 (旧来の方法) をプロパティー別に直すこともできるんじゃない? というわけで、 blgrep の CSS 用フロント・エンドを作ってみた。フロント・エンド名は blg-css。提供する関数は blg-css と blg-css-line の二つ。
実行例はこんな感じ。
- M-x blg-css RET text-size
h1 { text-align: center; text-family: sans-serif; text-size: xx-large; margin: 0.8em -5%; padding: 0.5em; background-color: #ffff00; } h2 { text-family: sans-serif; text-size: xx-large; border-bottom: 4px dotted #666666; padding-bottom: 4px; padding-top: 20px; } h3 { text-size: x-large; border-bottom: 2px dotted #666666; padding-bottom: 4px; padding-top: 20px; } (続く) - M-x blg-css-line RET text-size
h1 { text-size: xx-large; h2 { text-size: xx-large; h3 { text-size: x-large; h4 { text-size: x-large; h5{ text-size: large;
blg-css-line が、プロパティ別整理法の代わりに使える。ただし、検索結果が不完全な CSS ファイル (閉じの中括弧がない) になってしまうのと、セレクターとプロパティーの間に改行が入ってしまうのが嫌らしい。 blg-css は、検索に引っかかったセレクターを丸ごと出力するので旨味はないかな。
完全なプロパティ別整理法がやりたければ、あきやんさんが作っている 蓄々CSS自動整形を使うべきだと思うけど、
尚、小規模なCSSは例外ケースとなります。
また、CSSを新たに構築する際もプロパティ別整理法で書き始めることは推奨されません。 多くのCSSは図書館方式で整理されている
ということなので、プロパティー別整理法に移行する前の中位いの CSS ファイルで blg-css は使えるじゃないかな。
blg-css のインストール
まず、 blgrep 0.2 をインストール。その後、下の blg-css.el をダウンロードして、blgrep.el をインストールした場所と同じ所に入れます。
最後に、.emacs に次の二行を入れれば、 M-x blg-css, M-x blg-css-line ができるようになります。
(autoload 'blg-css "blg-css" "CSS grep." t) (autoload 'blg-css-line "blg-css" "CSS grep line." t)