先日作ったianime.jsを使ったスライドショー。何か具体的に役に立つものができまいかと作ってみたのが、左に貼付けた「今月のベストセラー」ウィジェット（もしくはブログパーツ）。スライドショーの上にマウスカーソルを持って行くと、そこでアニメーションが一時停止し、クリックするとちゃんとアマゾンのその本のページにアフィリエイトID付きで飛ぶところがミソだ。
Javascriptはライブラリ化しておいたのでHTMLページをコピーしていただければ、自分独自のウィジェットを作ることは難しくないはず。もし要望があれば、「ジェネレータ」を作っても良いと考えている。
ちなみに、今月はあまり書評を書かなかったので、売り上げはほとんどが過去のエントリーからのもの。目新しいものといえば「ハーバード流交渉術」ぐらいだ。興味深いのは９位に食い込んだ「.fla」。出版社が倒産してしまい入手が困難になりそうだ、という情報を得た人が駆け込みで買っているのか。
一つ前のエントリーで紹介したJavascript上のアニメーション記述言語（格好良い名前募集中^^）。先の例は単に上から順番に実行するだけであったが、それだけでは１度に一つのオブジェクトしか動かすことができず、表現力に乏しい。より複雑なアニメーションを実現するには、複数のオブジェクトに別々の動作を同時にさせることができなければだめだし、記述言語もそれをサポートしていなければならない。
そこで試しに実装してみたのが、シーケンスの入れ子構造による並行処理の記述。けっこうすごいことができてしまうのだが、実装は意外にあっさりとできてしまったので（Javascriptで数行）自分でも少し驚いている。
ちなみに、動作A, B, C, D, Eを順番に実行させる場合には、先の例のように、
[A, B, C, D, E]
と書けば良い。これはすなわち、「Aが終わったらB、Bが終わったらC、...」という意味である。
ここで、このアニメーションの実行に加えて（つまりメインのシーケンスには手を加えずに）、「Bが終わったらP、Pが終わったらQ」（つまりPとCは同時に実行される）と指示を出したい場合には、
[A, B, [P, Q], C, D, E]
と書けば良いのだ。具体的な例で言えば、
[
{ duration:3000 },
{ id:'pic4', effect:'fadeout', duration:3000 },
[
{ id:'text1', effect:'settext', text:'Hello World', duration:2000 },
{ id:'text1', effect:'fadeout', duration:500 }
],
{ duration:3000 },
{ id:'pic3', effect:'fadeout', duration:3000 },
{ duration:3000 },
{ id:'pic2', effect:'fadeout', duration:3000 },
...
]
と書くことになる。太字の部分が[P,Q]に相当する部分だ。
こんな説明だと、何の話だかピンと来ないだろうから、実際のサンプルを貼付けておく。一つ前のサンプルと全く同じシーケンスで写真を順番に表示しつつ、それぞれにキャプションをつけるというシーケンスを入れ子構造にして挟み込んでいる点がミソである。
ianime.jsもようやく安定して動き出したので、スライドショーを作ってみようと思ったのだが、通常のjavascriptのイベント処理を使って作ろうとすると、(1)最初のアニメーションの動作を指定し、(2)そのアニメーションの終了イベントを受けて次の指示を出し、...と、ものすごいスパゲッティ・コードを書かねばならなくなる。
それがどうしても耐えられなかったので、色々と試行錯誤をしているうちにたどり着いたのが、JSONを使ったアニメーション専用のメタ言語である。下の例の太字の部分がそれ。
function start()
{
anime.addSequence([
{ duration:3000 },
{ id:'pic4', effect:'fadeout', duration:3000 },
{ duration:3000 },
{ id:'pic3', effect:'fadeout', duration:3000 },
{ duration:3000 },
{ id:'pic2', effect:'fadeout', duration:3000 },
{ duration:3000 },
{ id:'pic4', effect:'fadein', duration:3000 },
{ id:'pic3', effect:'fadein' },
{ id:'pic2', effect:'fadein' },
{ onComplete:start }
]);
}
上から順番に説明すると、
となる。直感的にアニメーションのシーケンスが記述できるので、私自身はとても気に入っているのだがいかがだろう。
上のサンプルをIFRAMEの形で下に貼付けておいたので、興味のある人はソースコードをコピーして、自分なりのスライドショーを作って遊んでみていただきたい。フェードイン・アウトだけでなく画像を移動させることも可能だし、テキストを含むdivやspanをフェードイン・アウトさせたり、ということも自由にできる。
ちなみに、ianime.jsは若干進化してv0.24。v0.24に追加した機能のドキュメントはまだ書いていないが、このサンプルを見ていただければだいたいのことは分かっていただけると思う。
「Why hospitals don't learn from failures（なぜ病院は失敗から学ばないのか）」という論文を読んでなるほどと思う部分があったので、ここにメモ代わりに書いておく。
この論文の筆者（TuckerとEdmondson）は、医療ミスがなかなか減らない原因を探るために、全米の１０の病院を長期間に渡って調査・研究したのだが、その結果判明したのは、「システムの改善」という観点からは、ナースの優秀さと勤勉さが逆効果になっているという皮肉な話。
「優秀なナース」の定義はどこでも同じで、「目の前の患者が必要としているものを、あらゆる障害を乗り越えていち早く提供する」こと。取り替えるべきシーツが不足していれば別の階に走って行って調達してくるし、新米のナースのミスにはいちいち噛み付くこともなくそのミスを取り繕う。そんなナースたちにとっては、その手の「不具合」や「障害」は避けられないもの。「そんなものにいちいち文句を言っている暇があったら、患者の世話をするべき」というのが彼らの考え方だ。
調査によると、ほとんどのナースは一日の３０分から１時間をそんな「障害を乗り越えるための工夫」に費やしており、そのために残業をしたりすることは日常茶飯事。彼らは、口をそろえたように、「大きな問題があったけど何とか患者さんには迷惑をかけずに解決することができた」日にもっとも充実感を覚えると言う。
問題は、ナースたちが優秀であればあるほど、システム上の問題点が病院の経営側に伝わって来ないこと。ナースたちにとってみれば、システムの欠陥を指摘する・他人のミスを指摘する・ミスの原因を徹底究明する・経営陣に改善を申し出る、などは彼らの仕事ではなく、そんな暇があったら一分一秒でも患者のためになることをすべき。
病院の経営陣が、そんなナースたちの「問題解決能力」に大幅に頼って病院の運営を続けているために、いつまでたってもシステムそのものの改善が出来ない、というのがこの論文の要旨である。論文は病院を題材にしているが、筆者が伝えたいのは、この手のことは病院に限らずいろんな職場で起こっているという点である。
筆者は「だから病院の経営陣は、ナースの日々の活動に常に近いところにいてどんな問題を彼らが解決しなければならないのか、どんなところに余計な時間を費やしているのか観察し、積極的に手を差し伸べてシステムを改善しつづけなければならない。そして、他人のミスを指摘することが個人攻撃にならないような文化を作り、誰もがオープンに自分や他人のミスを語り合える場を作るべき。」と結論付けている。
いくつか思い当たる点もあるので、自分の経験に照らして反省してみたりした私だが、この手のことは本当に難しい。「あいつはものすごく口うるさいけど、仕事もものすごく出来る」と言われるのが理想なんだが...。
クロスブラウザーな進化をとげたアニメーション・ライブラリianime.js。テストのために作ったiFreecell 1.2が楽しくてつい寄り道をしてしまったが、ようやく時間を見つけて正式リリース（「ianime.js v0.22 - light-weight Javascript animation library」参照）。
当初のバージョンと比べて、APIもずっとシンプルに使いやすくしたので、ぜひとも使っていただきたい。アーキテクチャ的にも、fade-inやease-outなどの各種エフェクトを別JSファイルにするなどの工夫をしており、かなり拡張性も高くしてある。上のエントリーのサンプル・プログラム、ianime1.html, ianime2.html, ianime3.htmlのソースコードを見ればそのシンプルさが分かっていただけると思う。多くの人に使っていただければいただけるほど、やる気が出るたちなので、よろしくお願いする。コメントやフィードバックは、英語であればリリースページのコメント欄に直接、日本語で書く場合はこのエントリーのコメント欄にお願いする。すべての要望に答えられるとは限らないが、少なくともすべてのフィードバックには目を通すし、真剣に考慮させていただくつもりだ。
ちなみに、日本の読者はたくさんいるこのブログだが、英語ブログの方は私が更新をさぼっているためもあり、読者は極端に少ない。そこでお願いだが、del.icio.usのアカウントを持っている方はリリース・ページをブックマークしていただけると大変ありがたい（タグとしては、javascript, animation, iphoneあたりで）。少し英語圏のプログラマー、特にiPhone向けのゲームなどを作っているプログラマーの目に触れさせたいので（こういうのをブクマスパムと呼ぶのか組織票と呼ぶのか分からないが、こういう呼びかけがどのくらいの効果を持つかのテストも兼ねてのお願いである）。
先日公開した、iFreecell。色々な人に楽しんでいただけているようでうれしいばかりだが、「自分が出したハイスコアをブログ等で公開したい」という要望が強いようだ。
そこで、満足できるハイスコアが出せた時に、その手順をブログで公開したりメールで送ったりすることができる、「ハイスコア公開機能」を付け加えた。追加されたmenuボタンをクリックし、「Permalink (with "HI")」を選ぶと("HI"はハイスコアの略)、ハイスコアを出した手順を含むページに行くので、そのURL（例）をブログ等に貼付ければ良い。手順を見たい人は、同じくmenuから「Autoplay "HI"」を選べば手順を再現してくれる。
この機能追加に加えて、トップ画面からは過去一週間分のパズルに自由に戻れるようにしたので、１２時を過ぎてしまって同じパズルを解くことができなくなる、ということがなくなった。
iPhone/iPod touchを持っている人用のリンク。
http://www.uicentric.com/ifreecell/
Safari/Firefox/IE/Operaを持っている人用のデモ。
【追記】ちなみに、11/26のパズルに関しては、私のハイスコアは376点。もっと良いスコアを取る方法があるかも知れないが、とりあえず今日はここまで。
ianime.js用のテスト用に作った落ちゲーに得点等の機能を付けて遊べるようにしたのが、この「iFreecell for iPhone/iPod touch 1.0」。日替わりで問題を出題するように作ってあるが、別々のiPhone/iPod touchからアクセスしても全く同じ問題が出題されるので、二人で同時にアクセスしてハイスコアを争う、などの遊び方が可能である。何度も何度も同じ問題を解き、どこまでスコアを伸ばせるかがこのゲームの醍醐味。iPhone/iPod touchをお持ちの方はぜひともお試しいただきたい。
iPhone/iPod touchを持っている人用のリンク。
http://satoshi.blogs.com/ianime/freecell8.html
Safari/Firefox/IE/Operaを持っている人用のデモ。
今日はこちらはThanks Giving Day。家族や友達が集まって七面鳥を食べて「ちゃんと食べ物があることに感謝する日」知られているが（飽食の時代にいまさら、とも思うが）、小売業にたずさわる人たちにとっては、クリスマス商戦の幕開けを知らせるベル。特にその翌日は、激しい値引き合戦で朝から人が並ぶ。
全米で初めて42インチのプラズマが1000ドルを切ったのが去年のThanks Giving Dayの次の日。その意味では、ここで大型テレビにどんな値段がつくかは注目に値する。今朝の新聞の折り込み広告から値段を拾ってみるとこんな感じである。
$899 Panasonic 42" Plasma (Best Buy)
$999 Sharp 46" LCD (Sears)
$699 Polaroid 40" LCD (Circuit City)
$549 Olevia 37" LCD (Target)
$749 (Unknown) 42" LCD (Staples)
この中で注目に値するのが、SearsがSharpの46インチ液晶テレビにつけた$999という価格。プラズマと液晶の値段の差は縮まりつつあるとは知っていたが、１インチあたりの値段で言えばBest BuyのPanasonicのプラズマを下回る価格になってしまっている。大半のメーカーが液晶に走る今、scale of economyがボディーブローのようにきいてきたのか。
はてなからの告知で知ったのだが、User Experienceの日本語訳としての「おもてなし」が現代用語の基礎知識２００８に乗ることが決定したそうである。
その経緯に関しては、以前のエントリーをコメント欄も含めて読んでいただくと分かるが、私の「こんな大切な言葉なのに適切な日本語訳がない」という呼びかけに対して読者の方々からさまざまな意見が寄せられ、その中でnaotake氏の「User Experienceは『おもてなし』だと思っています」という一言が妙にツボにはまり、それ以来私がブログも含め色々なところで使っている、というしだいである。
「言葉は生きている」という感覚を文字通りに実感できたあたりが、まさにブログスフェアの「おもてなし」、と思った私である。
iPhone用に作り始めたアニメーション・ライブラリianime.js。いつかはIEでも動く様にしなければならないと知りつつ避けていたのだが、やはりこれではいかんとIEもサポートするために大改造。結局のところ、canvasの使用をやめ、DOMを直接操作することによりアニメーションを実現することにした。canvasを使うのと比べて若干遅いが、結果的にはかなりコードサイズを削ることができたので、まあ良かろう。
しかし、この手のライブラリを市場に出回っているすべてのブラウザで動く様に保つためには相当な手間がかかると思うんだが、皆どうやってテストしているんだろう。だからこそ他の人たちから協力を得やすいオープンソースなアプローチが必要という考えもあるが。
◇ ◇ ◇ ◇
ちなみに、今回のデモはこれ。同じ種類のアイコンと隣り合っているアイコンをクリックすることにより消すことができる。だいぶゲームっぽくなって来た。
iPhone/iPod touchを持っている人用のリンク。
http://satoshi.blogs.com/ianime/freecell6.html
Safari/Firefox/IE/Operaを持っている人用のデモ。
ちなみに、動作確認したのは以下のブラウザ。
・Firefox 2.0.0.0 on Mac OS-X 10.4.11
・Safari 3.04 on Mac OS-X 10.4.11
・Opera 9.24 on Mac OS-X 10.4.11
・Safari on iPhone 1.1.2
・IE 6.0.2900 on Windows XP (running under Parallels on Mac)
（IEがPNGのアルファ値をサポートしていないので、IE上で走らせると少し見栄えが悪い）