April 2006

今更いうことでもないですが、僕は Firefox の大ファンです（とかいってメインは Safari ですけど…）。2004年には、Mozilla 財団に寄付して、Firefox T-shirt も持ってます。その頃は Mozilla suite もあって（というかそれがメインだった）、友人には、あの Russian avant-garde 風アイコンがプリントされた T-shirt をあげました。

さて、Firefox にはもちろん Extension をいくつか入れています。以下にそのリスト。

• DOM Inspector
• Web Developer Extension
• Greasemonkey
• FireBug
• LiveHTTPHeaders

最近仲間入りした FireBug はめちゃくちゃ便利ですね。script エラーがページ別にみられるし、Console があるのもよい。でも Firefox が 1.0 になる前から本体付属の DOM Inspector を抜きには web 開発は語れませぬ。DOM 構造やら Javascript tree もすべてこれにおまかせ、という感じ。

さてここから本題。

このところ Windows でも作業することが多いのですが、Windows 版の DOM Inspector はたまに壊れる、というか、表示が変になることがあります。いちいち Firefox 自体を再インストールのばからしいので、どうしたもんかなと思っていたのでここにやり方をメモ。DOM Inspector は Extensions ウィンドウに現れるように、その他の Extension と同じように管理できます。つまりインストール/アンインストールが Firefox の再起動だけでできるんですね。

• まずは Tools -> Extensions で Extensions ウィンドウを開く。
• DOM Inspector の項目を選択して、ウィンドウ下部の Uninstall ボタンを押す。→再起動
• ftp.mozilla.org/pub/mozilla.org/firefox/releases/へ行く
• 使ってるバージョン → win32 → xpi → adt.xpi をクリック

という感じ。今 mac(PPC)版で試してみたらダメだった…というか、adt.xpi は win32 ディレクトリにしかないし…まぁ、Windows では直せるので無駄ではないですが、他の OS で試す時は知りません、ということで。

“おそらくみなさん 1780 年を憶うほうがお好きでしょう。たとえば、1980年のことよりも。”

日本語で書くとキザすぎるけど（もちろん僕の翻訳がそうだ、という批判には甘んじます）、英語ってこういうことが書いてある広告がたくさんある。言葉にもっと力がある、ような気がする。印刷された言葉に重みがある、というか。

関係ないですけど、 goo辞書（Dashboard Widget） って便利ですね。

「儲からないけど広がる」Web2.0 を読んで。もういくつか反応がついているので、これ以上“ただし、その有料サービスのユーザーが80人より多いのかどうかは不明だが・・・”をほじくるのはやめておきましょう。

昔話をば。

僕は2003年から NYU の ITP という学校に行っていました。Media Art をやってる人には結構有名な学校で、MIT の Media Lab の次くらいにスゴいらしいです。僕はそこで“Web 2.0”（なんて名前はまだついてなかったけれど）の流れを、手を動かさずに追っかけていて、１年半経って、やっぱ手を動かさなきゃ、って焦ってもう遅かったんですけれども。

ともかく。Flickr が始まったのは、２年くらい前？めちゃくちゃ初期から、学校のメーリングリストは Flickr の話題がたくさんありました。なぜならそこには Lia 御大があらせたからですね。彼女は本当に Evangelist の鑑というか、何にでも挑戦して、そのすばらしさを説いてまわれる人。Flickr が提案/提供する世界をどんどん自分のものとしてしていく感覚は壮観でした。（ま、その実、彼女の愛犬 Jarvis の写真をうpし続けてただけですけど。日本人の僕としてはその辺はかなり醒めていて、それは大きな間違いでした）

すぐにみんな Flickr を初めて、お互いの写真を載せ合う。コメントつけたり、飲み会写真集をみんなで作ったり。（アフォかと。でも）みんなそれが楽しかったのですね。（結局）僕もそれに参戦して、楽しさはよくわかりました。もっとも、僕は techy として、興味はAPI の方にうつって行きました。最初期にbickr とか（まったくコンセプトには共感できなかったけど、Show で展示されていた筐体はすばらしいものでした）を生み出していたのは、コミュニティとして秀逸だったといえるでしょう。tagged with itp こいつらみんなスゴいぜ！！

で、Flickr が有料になった時も、スゲーよ、こんなこともできんだ！みたいな感じ（たしか Upload 帯域制限が実質解除になることだったかな？）で、ほとんどの人が Pro アカにかえてたし、年会費が半額になった時ももう、大騒ぎだった気がする。Yahoo に買われるって噂だよ〜みたいな話も相当聞こえてたし、Evil にならないといいね〜みたいにバーで話してた。

さて、閑話休題。冒頭の記事の反応リンクをみていると。

Flickrってweb2.0の代表的な企業、だよね。
今日のこれはひどい
適正規模の経済

“Flickrの負のウワサは初めて聞いた気がする”し、全体の何パーセントであれ、“信仰的有料会員数”という語感にはすごい共感する。

より良いものがでてきたら、すぐ鞍替えできちゃうのが Web 世界っぽいけど、Flickr ほど膨大なデータになると（うpしたのが5000枚を超えてる人なんてざらにいる）、そうも行かないしね。逆に言えば、先行の Ofoto なんかを使ってた人なんてどうなってんだろう？オリジナルデータは買い戻しのみ？だったような。だとしたら相当可哀想なんだけど、反面 Flickr ユーザとしたら新サービスの BubbleShare とか Riya を試しづらいのは、信仰的ってことかも。

何にせよ、赤字ってのはサービスとして健康ではないし、もし本当に“適正規模の経済”でしか生きられないのであれば、件の blog で海部さんがさんざんおっしゃっている“雇用への波及効果が低い”ので、まだしばらく傍流ままということか。

もうしばらく前ですが、Mac OS X 10.4.6 update を当てました。そうなるんじゃないかと思ってはいたのですが、削除したはずの php 4系がまた新たにインストールされていました。
以前のエントリに書いてある通り…

• /usr/lib/php
• /usr/include/php
• /usr/bin/php*
• /usr/bin/pear*

をどけます。ただこれだけでは、pear が動かないので、

ln -s /usr/local/lib/php /usr/lib/php

とする。メモ。

とりあえず以下３つだけですが、試した結果 どこも Status 200 を返しますね…

Google
http://www.google.com/ig/api?weather=abcde

はてな
http://b.hatena.ne.jp/xmlrpc

MovableType も
mt/mt-tb.cgi

なんでだろう？javascript が XMLHttpRequest で受け取る時に、403 とかで帰ってくるとエラーになるのかな？その点は後で確認してみましょう。

del.icio.us API は request URL (正確にはアドレスの /api/ 以降、? より以前) が method で、query（アドレスの ? 以降、無い場合もある）が argument となる。かえってくるのは method によって変わる“野良”XML を返してくれる訳です。

いま、PHP の class を作ってやろうと思っているんですが、(pear もメンテされてないみたいだったから）、エラー対応をしようと思ってるんだけど、サイトにエラーに関する記述が何も無い。

例えば、tags/rename は old と new という query を必要としますが、何も request しないと…

<?xml version='1.0' standalone='yes'?>
<result>something went wrong</result>

がかえってきます。

でも、例えば、posts/add に query なしでアクセスすると…

<?xml version='1.0' standalone='yes'?>
<result code="something went wrong" />

なんでやねん。

野良 XML はいいと思うんだ。JSON でもいいけど、どっちかというと XML の方が、処理コストは高くても、data exchange format としては枯れてるし、いろんな処理系で使えるし。でもこの仕様は使いにくい…で、思いついたのは…

ステータス200なのに「その商品はありません」

で語られてるみたいに、HTTP-STATUS で返してくれると、さらに便利なのにな、と。後で、Delicious mailing list に投げてみます。

でもさ、他の API はどうなんだろう？？後で実験してみよう。

なんだか最近 GMail の演算子を語るのがはやってるらしい（オレンジニュース とか はてブとか）。以下は最良のまとめ。というか Google 本家の日本語訳酷い。

Gmailの検索やフィルタで使用できるコマンド（演算子）一覧表

そこでも載ってないのが ! （否定演算子）。手前味噌ですが１年前のエントリで解説ちう。

Why we like GMail.

去年の今頃の GMail の変化を A to Z に追っかけてた感覚からいうと、こういう細かい仕様は結構ちょこちょこ変わるのだが。というわけで ! が使えるのをもう一度調べてみました。効果が確認できたのは…

• has:attachment
• is:unread
• is:starred
• in:inbox
• is:sent
• in:drafts
• in:spam
• in:trash

あまり用途が思いつかないけど、label: も使えるっぽい。というか、僕はラベラーではないので確認できない。。

Demo

Try

Accordion Effect.

Download

download:

Accordion 1.0

license:

MIT License, same as script.aculo.us

What is this?

On Rico site, it shows as Accordion Exmple, and you can see the top page of Moo.fx (it's called fx.Accordion in their Documentation page) as well. I made a similar effect only with Script.aculo.us. You can try its working demo from the link on the top. In short, this is a way to show several panels, which you can only see ONE panel at one time, and choose the one you see by clicking on it.

There is an implementaion on Wiki of Script.aculo.us, but it seems like no scalability at all (put unique id on each panel? NO WAY!), I made by myself for my purpose.

How to use it?

Of course, you need to have prototype.js and scriptaculous.js(?load=effects). After loading these two, you can do like..

<script type="text/javascript" src="accordion.js"></script>

in order to load the script.

And then, here is an example of Accordion-behavior HTML elements.

<div id="accordion">

   <div class="panel">
      <h3>Item 1</h3>
      <div class="panelBody">
         <p>Something something.</p>
      </div>
   </div>

   <div class="panel">
....
</div>

Here comes a list of spec.

• “Accordion” must be marked-up by a Block element with unique ID.
• Each panel must be marked-up by a Block element with class name of “panel”
• Each panel must have a heading element (doesn' have to be HTML's HEADING element, such as H1, H2.. in terms of meaningful mark-up, it is strongly recommended though)
• Each panel must have a body element, and be given a class name of “panelBody”.

Finally, you can instantiate the class, like following.

var acc = new Accordion("accordion", "h3", "acc");

Accrodion class (basically) accepts 3 arguments.

1. Id name of entire Accordion elements
2. Tag name of each panel's heading element
3. Instance name (technically, it is just a variable name in global context, which points to Accordion Object )

Other

You can actually change the class name of Panel Element (“panel” as default) and Panel Body Element (“panelBody” as default). When you instantiate Accordion Object, you can put customized a class name of Panel Element as a fourth argument, and Panel Body Element as a fifth.

Enjoy!!

昨日悩んでいた奴ができました。

デモ

Accordion を試す

ダウンロード

ライセンスは… script.aculo.us と一緒で MIT License にでもしておきます。

Accordion ja 1.0

これは何？

Rico のページで Accordion Exmple として紹介されていたり、Moo.fx でも Top ページで使われていて、Documentaion ページでは fx.Accordion として紹介されているようなことを、Script.aculo.us だけを使ってやってみようというものです。上のサンプルをみてもらった方がわかりやすいと思いますが、いくつか並んだパネルの中、クリックして表示部を選択できますが、開いているパネルは常に一つ、というもの。

Script.aculo.us でも Wiki にひとつ実装が載っていますが、汎用性が低そうだったので（項目ごとに id なんか打てるか！っつぅの）、僕が使いやすいように実装してみました。

使い方

まず、prototype.js と scriptaculous.js(?load=effects) は必須です。二つを読み込んだ後に、

<script type="text/javascript" src="accordion.js"></script>

として本体スクリプトをロードしてください。

次に実際に Accordion 動作をする HTML 要素ですが、こんな感じです。

<div id="accordion">

   <div class="panel">
      <h3>Item 1</h3>
      <div class="panelBody">
         <p>Something something.</p>
      </div>
   </div>

   <div class="panel">
....
</div>

満たすべき条件は以下。

• Accordion は任意 id の block 要素で囲われていること
• 各パネルは “panel” という class nameの block 要素で囲われていること
• 各パネル毎にヘッダ要素（畳まれた状態でも視認可能な要素）を一つ設定すること
• 各パネル毎にボディ要素（開いた時に視認確認になる要素）を一つ設定し、“panelBody” という class nameを与えること

そして以下のように初期化すると蛇腹として動作するようになります。

var acc = new Accordion("accordion", "h3", "acc");

Accordion の引数は以下の３つ

1. Accordion 全体を囲う block 要素の id
2. 各パネルのヘッダ要素を構成する Tag 名
3. 変数（インスタンス）名

その他

パネル要素クラス名（default では“panel”）とパネルボディ要素クラス名（default では“panelBody”）は変更可能です。Accordion クラス初期化の際に 第四引数としてカスタムパネル要素クラス名、 第五引数としてカスタムパネルボディ要素クラス名が指定できます。

今回の実装で気がついたことなどは次回エントリで。。

Script.aculo.us の このページ とか moo.fx のトップページ なんかに使われてる、クリックすると、その場所が開いて、他の場所が閉じる、みたいな Effect。Scriptaculous で、きれいに書いてみようと思ってやっています。

Apr. 4, 2006版

実は、最後の部分で行き詰まっています。h3 の onclick handler 内では、実行コンテキストがかわって、呼び出し元オブジェクトを参照できない。。

しかも Safari でみると、エラーは全く出ずに、ただ、動きませんね。なぜ？とりあえず up して、しばらく頭を冷やします。。。

追記(Apr 5 2006)：できました。詳しくは次のエントリにて。

Tiger 設定日記。

phpMyAdmin のインストール。このアプリケーション自体、圧縮を伸張して、それで終わりというすばらしいアプリケーションだと思います（PEAR に入ればいいのにな。そうならない理由があった気がするけど）。でも、設定の仕方だけはあまりいただけない。command line で動く、対話式の ./configuration.php みたいなのを作ると需要はあるかもしれないね。

2.8 以降、設定すべき点がすこし違った気がするので（ローカルだし、今は急いでいるのでとりあえず）、今回は 2.7 をダウンロードしました。適当な場所に展開して、まずは httpd.conf を作る。僕は /etc/httpd/users/ 以下に、サービスごとに設定ファイルを書くのがお気に入り。00xpma.conf とかを書く（x には数字を入れます。apache が起動するとき読み込む順番になる、はず）。

Alias /ABSOLUTE/URI_PATH /ABSOLUTE_PATH/IN/FILE_SYSTEM
<Directory "/ABSOLUTE_PATH/IN/FILE_SYSTEM">
    Options Indexes MultiViews
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

とか。apachectl restart を忘れない。で、とりあえず config.default.php を config.inc.php にコピーして、設定したのは以下

• $cfg['PmaAbsoluteUri']
• $cfg['Servers'][$i]['password']

するとトップページになんか妙なエラーが日本語で出てる。英語に戻すと "cannot load MySQL extension, please check PHP Configuration" だとか。ははぁ、と思い出して以下の項目を追加。

• $cfg['Servers'][$i]['extension']

mysqli ですね。

Tiger 再設定日記となりつつありますが。さて。

Mac OS に限らず、ローカルで Web 開発するとき、ローカルドメインがあると、何かと便利です。という訳でおさらい。

Mac OS X の場合

NetInfo Manager を使うのが流儀らしいです。NetInfo というのは NeXT 発祥の Directory Service だったっけ？それはともかく。起動すると開くウィンドウ、上半分はコラムビューになっています。一番左が / （root）で、次がサービス名？ aliases, groups, machines... と並んでいます。

ローカルドメインの設定は、/machines 以下に入ってます。デフォルトエントリとして、おそらく braodcasthost と localhost が入ってますね？単純に、localhost を複製して（ウィンドウ上部にボタンがあります）、下半分のプロパティリスト中、name をお望みの名前にして、それで終了。再起動は必要ありません。

Windows XP の場合

驚いたことに、unix の hosts ファイルと同じ形式です。が、場所が特殊。

C:\WINDOWS\SYSTEM32\DRIVERS\ETC

にあります。適当なテキストエディタで開いて、編集しましょう。最初に例があるので、迷うことは無いと思います。多分、Windows 2000 も同じ形式でしたが、system32 じゃなかったかも。それ以前の OS はググると、

Windows XP  	=  	C:\WINDOWS\SYSTEM32\DRIVERS\ETC

Windows 2K 	= 	C:\WINNT\SYSTEM32\DRIVERS\ETC

Win 98/ME 	= 	C:\WINDOWS

だそうです。

ところでマウスも壊れました。長らく愛用してきた Sony vaio note 用 USB mouse 。数年前に生産中止。渡米の際、友人に頼んで Sofmap の中古を２個準備してきたものの、３年経って２個とも消費したようです。かれこれ５代目だったかしらん。適度な小ささと重心、Wheel 感も僕にはぴったりだったのに。しばらく新しいの探そうと思います。