■iFingerScrollを公開したあと、GmailのiPadビューのペインスクロールが自分のに比べて相当サクサクなのに気付き、どうやってんだろと思ってPCからiPadのUAを送ってソースをちょっと見てみたところ、” -webkit-transform: translate3d “をつかってdivをスクロールさせてるらしいことがわかりました。

ということでiFingerScrollもCSS Transitionでabsoluteの座標を動かすのではなく、translate3dの指定をjavaScript側の制御で動かすように再実装したところ、いい感じになりました。translate系の指定はもともとtransitionやanimation目的でGPUサポートありで実装されてるので、CSS Transition/Animationとして使わなくても速いのかもしれません（憶測）。レガシーCSSのabsolute指定はあくまで指定座標への固定表示用途で考えたほうがよさそうです。

■ついでに前回やってなかったスクロールブロック先頭/末尾でのスプリングアクションというか、ドラッグ中は領域端を超えて引っ張れて放すと戻るアクションも加えてみました。これ単なるよさげエフェクトではなく視覚的に理解しにくいスクロール端（動かないと操作が間違っているのかと思ってしまう）をふるまいで明示するタッチUIの重要な作法になってるのは理解していたんですが、実際にアクションを加えてみてあまりの体験の違いにびっくりしてしまいました。webでiPadUI作るときは必ずこのアクションを入れたほうがよいと思います。

あとtweetie2的なpull reloadコールバックとかもあるとよそうだなと思いつつ、とりあえず現時点で公開しておきます。

• jquery.iFingerScroll-translate.js
• デモ(要iPad,iPhone,Chrome,Safari4)

• つかいかた

   $(document).ready(function() {
    $("#sidebar").iFingerScroll();
    $("#main").iFingerScroll();
  });
  

  など

• http://work.doppac.cc/miniature/miniature.html
  • on/offをクリックすると効果をトグルで変更します。

■いちおう説明しておくと、上下をぼかして擬似的に被写界深度を浅くすることで、まるで模型のように見える風景写真、というやつです。最近ネットでよく見かけますな。日本だと本城直季さんという作家さんが、こういう写真の作品をたくさん発表しております。

• 本城直季さんの作品
  • http://www.gooddesigncompany.com/gallery_g/index.cgi?index=6#
  • http://www.tokatsufilm.com/special/travelogue.html
• そのほかいろいろ
  • http://www.metropolismag.com/cda/story.php?artid=1760
  • http://www.pingmag.jp/J/2006/03/07/10-tiny-tokyo-photos/
  • http://recedinghairline.co.uk/tutorials/fakemodel/
  • http://www.synthereal.com/jp/miniaturize.html

僕は今回初めて作ってみて、なんとなく上下ぼかせばどんな写真でもいいのかなと思ったらそうでもないことがわかりました（あと意外にそういう写真を撮ってないこともわかった）。やっぱり（当たり前だけど）ある程度俯瞰で、上下のぼかしと画面の奥行きが対応する写真じゃないとそれらしく見えないみたいです。あと模型っぽくなるように、多少色調もいじったほうがよさげ。こんな感じにしました。

• なんとなく室内照明っぽく、色温度を低めにした
• 全体の明るさや、ハイライトを強くした
• 彩度を高くして色をビビッドにすると、ニセモノっぽくなる感じ
• シャープネスもかけたほうがよい？

あとたぶん、写真の構成に「模型っぽいレイアウト」というのがあって、それの認識に沿うトリミングにすると、なんとなくそれっぽくなるようです。

ぼかし自体はIEのBlurフィルタをかけたdivを上下２段づつ画像にかさねてるだけです。

■デイリーポータルZサイト開設３周年　24時間ウェブもぶじ終了したようなので、bookmarkletは動かなくしました。お楽しみいただけましたか？

まあ単純なものなので、ソースを置いておくのでご参考にどうぞ。

• http://processing.dotimpac.to/index.php?sample%2FJavaScript%2Fbetsuyaku.js

ちなみにこの手の遊びは「document.body.innerHTML」で検索するといっぱいありますので、こういうのは一瞬で作って一瞬で飽きていくとよいと思います。

ついでに：デイリーポータルZ「ちょっと見てきて」

■せっかくデイリーポータルがらみなので、mixiに書いてたものも公開しておきます。

■デイリーポータルＺが「ちょっと見てきて」という企画をやってて、これにちょっと、いやかなり感動しました。

• http://portal.nifty.com/mitekitesp/index.htm

昔すんでいた家の近くはどうなっているだろう。学校はまだあるんだろうか。昔よく買ったパンはいまでも売ってるのだろうか。
気になる場所を、近くに住んでいる人に見てきてもらおう。そして、あなたの家の近くにある「誰かの見てきて欲しい場所」の写真を撮ってきましょう。

という、だれかが気になっている場所を投稿して、だれかがそこに行って写真を撮ってくるという企画。この内容と「ちょっと見てきて」というタイトルがすでにいいんですけども、しかもこれ当然のごとく、GoogleMapsにマッピングしてあるんですよ。　これが、すごくいい。

• http://portal.nifty.com/mitekitesp/gm.htm

なにがいいって、みんなGoogleMapsで「自分の場所の記憶」にはじゅうぶんにアクセスしたと思うけど、この「ちょっと見てきて」の GoogleMapsを見ると、「どこかのだれかの場所の記憶」にアクセスできるわけです。それはとりたててなんでもない場所なのかもしれないけど、そこを知っていて、今も気にしている人がいること。その「本来ぜったいに地図には載らない情報」が、いま世界一大きな地図の上で俯瞰できる。これ、ちょっとしたひみつ道具ですよね。

この投稿をマッピングした地図があるおかげで、この「ちょっと見てきて」という企画にコミットする方法がものすごく広がっているというのが GoogleMapsの使い方としてすごく正しいし、しかもこの地図が結果的にものすごくピースな表現になっているというのが本当にすばらしい。

こういう企画を考えてちゃんと実行してるデイリーポータルＺの編集部はすごいなーと思いました。

■Autostitchというソフトを最近知りました。カメラを振りながら撮った連続画像をつないで、いわゆるパノラマ画像にするソフト。同様の処理はいまやたいていのデジカメに同梱ツールでついてそうな気がしますが、ふつうはなんからの手作業が必要そうなところがこれは処理が完全全自動で、それらしい画像を多数つっこんでやれば、なんとなく画像を作ってくれるというところが特色なんでしょうか。

せっかくなので試してみようと思ったんですがあんまりパノラマっぽい連続画像を撮ったことがなかったので、去年金沢２１世紀美術館に行ったときに外周を回りながら撮影していた連続画像をつっこんでみたところ、ぜんぜんパノラマではないですが奇妙な画像ができました。なんかがんばって整合させようとしてるとこが泣ける。よく見ると建物のガラスに映った自分の像をキーにつなごうとしてたりして。

• 大きい画像はこっちに。
  • http://project.dotimpac.to/kanazawa21st/kanazawa_pano.jpg

金沢２１世紀美術館人力タイムスライス

去年の１１月ごろ遊びにいった金沢２１世紀美術館は、上から見ると建物が完全な円形をしていることで有名な美術館なんですが、構内に建物に沿って敷かれた遊歩道もあって、つまりこの道も円形になっているわけです。てことはこの遊歩道を数歩づつ歩きながら建物をデジカメで撮影していけば、円形の建物を周回するムービーができるなーと思ってやってみたんですな。当時サポートしてた映像の授業でデジカメでなにかのモノを周回しながら撮影してその静止画をタイムラインに並べて、いわゆる「タイムスライス（「マトリックス」にあるような、時間の止まった世界でカメラだけが移動するような効果を得られる特殊撮影）」っぽい映像を手作りするという課題を出していたんですが、これは21世紀美術館の人力タイムスライスというわけです。せっかくなんでムービーを公開しておきます。ダウンロードしてループ再生するとおもしろいかもしれません。

• http://project.dotimpac.to/kanazawa21st/kanazawa21.mov

■江渡浩一郎さんが現在産総研のプロジェクトで開発しているコンピュータ上でフレームを組み立てて仮想生物を作る物理シミュレーション環境「Modulobe」のbeta版がちょっと前にリリースされています。はまってしまうのは目に見えてるのでなかなか触れなかったんですが、夏休み的に時間ができたのでいろいろやってみました。

• http://www.modulobe.com/
  • 公式サイト
• http://wiki.modulobe.com/　
  • マニュアルやモデルデータが公開されているWiki

デスクトップで起動したらかなり致命的に落ちたので（ビデオドライバを新しくしたら直りましたが、原因はわかりません）しばらくノート（タブレットPC）で遊んでたんですが、タブレットだとかなり直感的にいじれてすごく楽しい。シミュレーションが重いのかCPUパワーをかなり（うちのTC1100だと常に計算率80%以上になります）使うのでバッテリを消耗する＆本体が持てないくらい熱くなるのが残念。外で暇なときに遊べたりすると楽しそうなんだけど。

むかしプレステに「パネキット」というゲームがありましたが、あれをもうちょっとシンプルにした、というか、もうちょっとゲームっぽくなくした感じでしょうか（そのはずでパネキットのスタッフの渡辺kuniさんもModulobeの開発にもかかわってるそうです）。“シャフト”と呼ばれる骨組みと“リンク”と呼ばれる駆動部（つながったモジュールとの接合部を曲げる動きをつけられる）というふたつのモジュールを角度をつけながらうまくつないでいくと、ちゃんと物理法則にのっとっていろんな動きをするモノがつくれます。具体的に言うとシャフトの連結方式はパネキットで、リンクの動きの指定はsodaconstractorぽい（？　そうでもないかな）感じ。慣れるまではけっこう難しいですが、しばらくいじってみてコピー＆ペーストも活用できるころには（2,3時間くらいずっと触ってたんですが）、もうかなりシャフトの組み合わせる角度やリンクとの使い分けが頭に入ってきて、形が想像で作れるようになりました。いまも「あー、こうしてこうすると8の字走行する３輪車とか作れそうだなー」というアイデアが浮かんできてまた遊んでしまいそうです。

• とりあえず作ってみた多足ホイールと立体スネーク
  • http://dotimpac.to/misc/wheel.gif
  • http://dotimpac.to/misc/snake.gif

sodaplayなんかより環境の自由度が高いぶん、ここから先どうバージョンアップしていくのかが楽しみです。がんばってください！＞etoさん