Home > web Archive

web Archive

iCookpadをちょっと修正しました

■iCookpad、なんか思いがけないほど好評のようで、やっぱiPhone / iPod touchで見れてうれしい人がいるんだなーと思ったいっぽう、いろいろ不具合ほったらかしで申し訳ないです。

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

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

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

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

iPhone/iPod touchでクックパッドを見やすくする「iCookpad」

iCookpad.png

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

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

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

YouTube打楽器/VJソフト（？）「TubeObstruction」

TubeObstruction.png ■さくじつDeskTopLive.asにご来場（もしくはustreamで試聴）くださったみなさまありがとうございました、そしてお疲れさまでした。

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

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


TubeObstruction Demo from dotimpact on Vimeo.

これは

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

操作方法

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

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

iview for Tombloo(+launch piclens)

  • 2008-10-11 (土)
  • web

■最近はiview for Tombolooが気に入っていて、空気を読まないsiteinfoを勝手に追加しては鑑賞して悦にひたっております。

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

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

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

IMG_0243.jpg

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

IMG_0244.jpg

IMG_0245.jpg

もちろん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/2720
    • このへんはRSSリーダで購読してるけどせっかくの大きな画像が見えないサイトシリーズ（「なおとくんの自由研究」はRSSリーダだとYahooブログのリファラ制限で巨大な閲覧不可画像が出る）。
  • United Visual Artists
    • http://wedata.net/items/2812
    • PicLensで見れるんならと書いてみたやつ。もとのサイトにすでにJavaScriptのスライドショーが組み込んであるので、スライドショーのページングボタンをparagraphにして、そのページ番号を使ってから直前のscriptタグで配列に入れてるurlを取ってくるという強引なことをしています。XPathの勉強になった。

Tokyo Estate Height Map

tehm.png

■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がくわしいです。

  • Comments (Close): 0
  • Trackbacks (Close): 0

Home > web Archive

Pages
Recent Entries
Categories
Tag Cloud
Search
Feeds
Meta

Return to page top