■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();
  });
  

  など

■先週末会社でiPadで毎日使うWebサービスを想定した1Dayプロトタイピングというのをしていて（そのうちまとめられますがとりあえずYoutubeの動画で様子が見られます）、iPadWebアプリのブラウザモックをつくったのですが、そのとき困ったのが、iPadアプリで見られる左サイドのペインに一覧、右サイドのメインペインに詳細を表示するようなスクローラブルな複数ペインUIをふつうにつくる方法がmobileSafariに用意されてないことでした。そもそもmobileSafariにはスクロールバーがないんですよね。

ブラウザでiPhone風のグラブスクロールを実現するjQueryプラグイン「overscroll」というのを見つけて入れてみたんですがこれでもだめで。調べたところmobileSafariには（スクロールバーがないためか）そもそもscrollTop/Leftプロパティそのものがなかったので、スクロールを実現するにはposition:absoluteでtop/leftを直接いじらないといけないことがわかりました。

先週はモック用にoverscrollベースで全体的にいじってとりあえずしのいだのですが、せっかくなのでまとめなおしたものを公開しておきます。

• jquery.iFingerScroll.js

• デモ(要iPad,iPhone,Chrome,Safari4)

• つかいかた

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

  など

まだネイティブのスクロールUIとはいろいろ違いがあります。

• スクロール端でドラッグを続けた時のラバーバンド的なエフェクトがない
• ドラッグを放したときのアニメーション中に再度クリック、ドラッグしても、アニメーションが終了するまで操作ができない
  • 動作が軽くなるかとアニメーションをCSS Transitionsにしたため、途中で止められなくなっています。jsアニメーションに戻したほうがいいかも。
• 動作、アニメーションがぎこちない

とはいえモックつくったりするには便利なのでつかってみてください。またはもっといいもの教えてください。

とりあえず以下を修正しました。

• レシピ詳細ページ
  • コツ・ポイントを表示するようにした
  • つくれぽの数を表示するようにした
  • 手順リストに番号を振り、不要な欄は表示しないようにした

■ちなみにこのブログ関連の情報をアナウンスしたり受け付けたりするtwitterアカウントを作ってみました。なんかありましたらお気軽にどうぞです（ご期待に添えるとも限りませんけども）。

• http://twitter.com/doppac_cc

あとgithubにてソース一式も公開しております。

• http://github.com/dotimpact/iCookpad/tree/master

■クックパッド（http://cookpad.com/）のページを整形して、iPhone / iPod touchのスタイルで表示するサービスです。「iCookpad」なんて公式っぽい名前にしてしまいましたが完全な勝手サービスです（問題ありましたらご連絡ください）。

• iCookpad
  • http://dotimpact.jp/icookpad/
• できること
  • 検索
  • 旬のキーワードを取得して表示
  • 検索結果のリスト表示
    • 次ページを読み込んでリストを拡張
  • 話題のレシピを取得して表示
    • バックナンバー（前日まで）を表示
  • レシピ詳細ページ表示
    • 画像、コメント、材料、手順を表示

１歳児が好んで食べ（なぜなら舌に合わないと投げたりコップに入れて遊んだりするから）、あっという間に調理できる（なぜなら起きた瞬間から腹がへったと泣くから）伝説のレシピをもとめて、というか単に料理が好きなのだろうかともおもいますが、ヨメさんが毎晩ふとんの中でiPod touchをつかってクックパッドで話題のレシピを見るのが日課になっているそうで、でもクックパッドのサイトはiPhone対応になってないのでわりと見にくいという話になり、日曜大工としてつくりました。もともとAPPJETで〜とかはじめたんですけど、スクレイピングに四苦八苦したあげくあきらめて、Sinatra + nokogiriでやりました。こっちは楽だった。スタイルはiWebKitです。

ものすごい盛況でイベント自体もすごい面白かったですね。人のプログラミングの様子を見る45分ってどんな時間になるのかなーと若干不安に感じていたんですが、始まってみると思った以上に興味深くてあっという間だったです。プログラムなんてさっぱり、という感じの友人（女子）も何人か来ていたんですけども、そういう人から見ても噂には聞いていたプログラムなるものが実際に目の前でかなりのスピードで打ち込まれていくのは新鮮な体験だったみたいでした。あとASゴングのみなさま（とくに小坂さんのDirector使いっぷり＆饒舌っぷり！）も4nchor5 la6のトークもすごすぎでした。

いっぽう自分のデモはなんとも残念な感じで公開しきりでしたが…　ともかくこのイベントにむけて作ってみたものをこちらでも公開しておきます。YouTubeのストリーミング動画を物理シミュレーションで落下させて映像と音声をミックスするというコンセプトのコンテンツ「TubeObstruction」です。

• http://work.doppac.cc/as3/TubeObstruction/index.html
  • FireFox, Safariにて動作確認してます
  • ※FireFoxだと動かないこともあるみたいで、確認中です

TubeObstruction Demo from dotimpact on Vimeo.

これは

■Box2DFlashAS3の物理シミュレーションオブジェクトとしてYouTubeからダウンロードする動画を表示して、動画同士を衝突させて映像や音をミックスして遊ぶコンテンツです。動画のボールは壁や別のボールとの衝突による衝撃が起きた際だけ力の強さに応じて再生されます。

操作方法

• 入力フィールド（画面上段）
  • 検索ワードを入力してリターンすると、YouTubeでの検索結果から動画をダウンロードして、円形のオブジェクトとして落下します。
  • “＜検索ワード＞,3″のようにカンマ区切りで数字を指定すると、落ちる個数を指定できます
  • 検索ワードの代わりにYouTubeの動画パーマリンクを入力することで、特定の動画を指定できます
• スライダーパネル
  • 入力フィールドにマウスオーバーすることでスライダーパネルがスライドします
  • スライダーはマウスを載せてマウスホイール（スクロール操作）をすることで値の増減を操作します
  • TimeStep: 物理シミュレーションの時間単位を変えます。増やすことで時間単位が細かく（＝動きがスローに）なります
  • Gravity: 重力の値を変えます。増やすことで重力が強くなります
  • Density: オブジェクトの密度の値を変えます。増やすことで重量が増し、慣性が強くなるため衝突の衝撃が強くなります
  • Restitution: 衝突時の力の減衰を変えます。最大だと完全反射ですが減らすと衝突するたびに力が弱くなります
  • Friction: 摩擦力を変えます。増やすと衝突時に回転がつきやすいです
  • Impulse_Decay: 衝突時の動画再生の減衰を変えます。増やすと減衰が緩くなるので、再生される時間が長くなります
  • Play_Vibrate: 衝突時の動画再生を一定期間ごとに止めて擬似的なスローモーションをかけます。数値を小さくすると一時停止の間隔が速くなり、スローになります
  • Volume_Fade: 衝突時の動画再生のボリュームの減衰を変えます。減らすと速くフェードアウトします
• 動画ボールオブジェクト
  • 衝突時の衝撃の強さにより、動画が再生されます
  • ボールをドラッグして好きな場所に移動できます
  • マウスがボールの上にある時（ドラッグ中）にマウスホイール（スクロール操作）をすることでボールの大きさが変わります
  • ボールが大きいとボリュームが大きくなります
  • 動画の再生が進むと徐々にボールが大きくなり、再生が終了するとボールは消えます
  • ※動画ストリームの問題により、再生されないまま消滅する場合もあります
• ウインドウ
  • ウインドウのサイズを変えることで、オブジェクトが飛び回るフィールドを広げることができます
  • ウインドウを画面内でドラッグして移動させると、ドラッグ距離に応じてすべてのボールに力を与える（画面を揺らす）ことができます
  • フィールドは上部の見えないところで上端が切れているので、ボールを上に大きく飛ばすと戻ってこないことがあります。

ボールが増えれば増えるほど音像としては混沌になってしまうので、多少練習してデモではもうちょっとうまく「演奏」できるかなと思っていたんですが、前のデモの流れから説明中心のデモにしてしまったんでいまいちだったかなと。みなさまにも触ってみていただけるとうれしいです。

えーと、「Tombloo」ってのはWebページとかWebページの一部（引用とか、画像とか、指定した領域とか）を右クリックのメニューからちょう楽にブックマークしたりいろんなサービスに投稿したりローカルに保存したりできる、toさんがつくってるちょう便利なFirefox機能拡張で、「iview for Tombloo」ってのはkuさんがつくってるTomblooをさらに拡張するスクリプトで、画像共有サイトやら写真ブログやらの画像だけを取ってきてさくさく見られる機能ね。取得先のサイトが（siteinfoっていうルールを書けば）誰でも登録して共有できるとこが素敵。しかしtoだのkuだのどうなんでしょうかこのひとたちの名前は。

• Tombloo
  • http://github.com/to/tombloo/wikis/home
• iview for Tombloo
  • http://ido.nu/kuma/2008/09/26/iview-for-tombloo/

でこの、iview for Tomblooで画像を見てて、もっと画像を巨大に見たいなーと思ったので、iviewからPicLens（いまはCoolirisって言うらしいですが）を起動できるようにしてみました（実際はTomblooにあるPicLens起動のコードを持ってきただけなので何もしてないに等しいですが）。PicLensの説明はまあいいか。とりあえずこんな感じです。

• iview for Tombloo(+launch piclens)
  • https://dl.getdropbox.com/u/103615/iview.js

iview for TomblooでBig Pictureを見るとこんな感じだけど、

pキーを押すとPicLensが起動してこんな感じで見れる。

もちろんiviewのsiteinfoがあるサイトならイワタブログでもあ？クリステルでもPicLensで見れます。PicLensはふつうmediaタグが埋め込まれた対応サイトでないと起動できないわけですけど、これでiview for Tomblooごしにどんなサイトでも（siteinfoを書けば）PicLensで鑑賞できるようになるのがうれしいとこです。

なんでみなさんもiview siteinfo書くとよいですよ。

ちなみに自分で書いたsiteinfo。

• Big Picture
  • http://wedata.net/items/2658
  • もともとこのサイトの写真をフルスクリーンで見たいと思ってて、PipesでmediaRSSが作れないかとかいろいろ試していたところ、iview for Tomblooでいいじゃんという結論に達したのでした。ていうかBig Pictureいいよねー。
• 一畳プラレール
  • http://wedata.net/items/2710
• なおとくんの自由研究
  • http://wedata.net/items/2720
  • このへんはRSSリーダで購読してるけどせっかくの大きな画像が見えないサイトシリーズ（「なおとくんの自由研究」はRSSリーダだとYahooブログのリファラ制限で巨大な閲覧不可画像が出る）。
• United Visual Artists
  • http://wedata.net/items/2812
  • PicLensで見れるんならと書いてみたやつ。もとのサイトにすでにJavaScriptのスライドショーが組み込んであるので、スライドショーのページングボタンをparagraphにして、そのページ番号を使ってから直前のscriptタグで配列に入れてるurlを取ってくるという強引なことをしています。XPathの勉強になった。

■http://realtimemachine.sakura.ne.jp/mashup/tokyoheightmap/

■Sun×RECRUITマッシュアップアワード応募作品です。

桃鉄ネタにつづく、GoogleMaps×ゲームインターフェイスのマッシュアップ（？）でもあります。

これはなにか

■Smatch物件検索APIで取得した物件情報を、価格を「高さ」で表しながらGoogleMapsにマッピングします。東京周辺の地価情報がグラフィカルに一望できます。

詳しくは解説ページを見てください。

つーか内部的にはたたみラボのサンプルをほとんどそのままなんですけど。あんま時間かけてなくてすいません。でも、あんまやられてないけどGoogleMapsのマーカーアイコンの切り替えをうまくすると、けっこういろんなことできるんじゃないかなーと思いまして。

GoogleMaps×スプライト

■あとGoogleMapsのマーカーをスプライト的に動かしたかったので（今回でいうと雲ですね）、APIv2でどうするか調べました。

v1のときはABAさんがやってたみたいにGMarker.point.x/yを触ってGMarker.redraw(true)、とかだったんですが、このへんががらっと変わってます。Gmarker.setpoint(latlng)というメソッド（非公開）がありました。実際のとこ、内部的には今までと変わらないみたい。ちゃんと表示順位をいじってくれるし、影も管理してくれるんで、けっこうスプライトとしてうれしいですよね。重いけど。

APIv2の非公開命令については、Unofficial API 2 Referencehttpがくわしいです。

■エイプリルフールエントリはなんかもっともらしいこと書いときゃいいだろ、と思って書いたらぜんぜんウソになってなかった。来年の4/1までにはもうちょっとウソがつけるようになっておかないと。

そんなわけで、「GoogleMaps上でサイコロが振れると桃太郎電鉄みたいでいいなー」というまえまえから暖めていたアイデアをあわてて作ってみたものです。

このページでダイスを振る

GoogleMaps上での使用例

bookmarkletとしても動作するようにしました。以下のスクリプトを任意のwebページを開いてアドレスバーかブックマークに登録しておいて実行すると、そのページでサイコロが転がります。

javascript:(function(){var d=document;var h=’http://realtimemachine.sakura.ne.jp/dice/js/’;var s=d.createElement(’script’);s.src=h+’dice.js’;d.body.appendChild(s);var s=d.createElement(’script’);s.src=h+’dicebm.js’;d.body.appendChild(s);})();

まあネタ以外のなにものでもないですが、桃鉄のあのゲーム画面にサイコロが転がる感じはいまだに好きなんで、なんかこういう感じがWebにもあるといいよなーと思っているところです。

■先日公開したPiccyを、問題の修正や新機能を追加してバージョン001として公開します。

バージョン001では動作の不具合の修正と以下の機能を追加しました。

• 管理者認証機能
• 写真、フォルダ、タグへのコメント
• GPS携帯からの位置情報通知、ロケーションタグ機能
• GoogleMapsによるロケーションタグ一覧

サンプルサイトをごらんください。サンプルサイトはパスワード「guest」で管理者ログインできます。

• http://piccy.dotimpac.to/

■ロケーションタグとGoogleMapsAPIもフォトアルバムを考えていた当初からやってみたかったので、とりあえず作ってみましたがどうでしょうか。

ちなみに写真と位置情報については、以前増井”富豪家”俊之さんとお話してたときに（Wikiばなですな）、「位置情報と時間の関連データが取れてれば後からどうにでもなるんだから位置情報をいちいち写真に添付するのはナンセンスだ」という話をしてて、もっともだなーと思っていたので、そういうものをつくってみたいなと前から思ってたんでした。

■［追記］

• バグを修正したpiccy002をリリースしました。
• piccyサポートwikiページを用意しました

Piccyとは

■Ajaxを採用したオンラインフォトアルバムです。 気軽に管理できてストレスなく閲覧できる画像ビュアーを目指して開発しています。

詳しくは以下の解説ページもごらんください。

• http://collisions.dotimpac.to/works/web/piccy.html

ダウンロード

• http://piccy.dotimpac.to/release/piccy002_20051118.zip

設置方法

• 圧縮ファイルを展開する。
• info.txt のadminpassを必ず変更する。
• info.txt の site_name や url などを編集する。
• index.rb 先頭行のRubyのPATHをサーバーに合わせる。
• サーバに転送する。
• dot_htaccessは「.httaccess」に名前を変える。
• index.rb に実行属性を付加する。他の属性は良きに計らう。
  • data以下のディレクトリに書き込み属性が必要かもしれません。

サムネイル作成機能を使う

ImageMagick/RMagickを使用することで、画像のサムネイルを作成することができます。 デフォルトでは機能はオフにされています。

• info.txtのmakethumnailをtrueにする。スペースで区切ってください。
  > makethumnail true
• ImageMagickとRMagickをインストールしてください。
  　必要ならば、thumnail.rbのrequireのパスを変更してください

位置情報記録機能を使う

auのGPS機能のある携帯電話からアクセスすることで、位置情報のあるタグを使用できます。 デフォルトでは機能はオフにされています。

• info.txtのlocationをtrueにする。スペースで区切ってください。
  > location true
• ezwebからpiccyを置いたURLにアクセスしてください。
  > http://（自分のサイトURL）/index.rb?cmd=location
• 位置情報通知ページが出ますので、「位置情報を通知する」をクリックします。
• 位置情報をが得られればフォームが出ますので、場所の名前を入力して送信してください。
  　（場所の名前は入力しなくてもかまいません）

※現仕様では位置情報通知は誰からでもできてしまいますので注意してください。

GoogleMaps機能を使う

GoogleMapsに位置情報タグをマッピングしてみることができます。

• GoogleMaps APIのキーを取得します。
  • http://www.google.com/apis/maps/signup.html
• info.txtのgmapkeyをにAPIキーを入れる。スペースで区切ってください。
  > location ABQIAAAAgf6OSxrgd3QJC98-sUWrXBT6rMgtMUOAl…

謝辞、同梱ライブラリについて

以下のライブラリ、モジュールを使用しています。関係者の開発と提供に感謝します。

• ruby-jsonをアーカイブに同梱し、使用しています。
  • http://sourceforge.net/projects/json
• imagesize.rbをアーカイブに同梱し、使用しています。
  • http://tociyuki.cool.ne.jp/clife/comp/rubyimagesize.html
• PhotoXPのexifパースモジュールexifcodec一式をアーカイブに同梱し、使用しています。
  • http://www.daifukuya.com/photoxp/
• javascriptライブラリscript.aculo.usをアーカイブに同梱し、使用しています。
  • http://script.aculo.us/
• GoogleMaps用測地系変換ライブラリwgsgmap.15.jsをアーカイブに同梱し、使用しています。
  • http://d.hatena.ne.jp/tociyuki/20050731/1122823117

動作について

• 動作についてはFirefox1.0.7、InternetExplorer6で行っています。
• Opera,Safariなどのブラウザでの動作検証は行っていません。問題がありましたらフィーとバックいただけると助かります。
• 報告はこの記事のコメントなどにどうぞ。

ライセンス

• piccy は、フリーソフトウェアです。
• 完全に無保証です。

■ちょっと思いついたので作ってみました。

• http://dotimpac.to/work/dqspell/dqspell.html

参考：

• Wikipedia：ドラゴンクエストの呪文体系
• 人工無能を作ろう〜マルコフ連鎖
• 最速インターフェース研究会 高橋メソッドなプレゼンツール

なんか想像してたよりおもしろくなかったなー。

以上！