■ようやく、というほかないのですがようやく、長らく開発していたあたらしいBCCKSで本を編集・出版するためのブラウザ上エディタを一般リリースしました。6月の発表会でのロードマップからはやや遅れつつも、無料ユーザーがだれでも本を編集・発行でき、そうして出版された本をだれでも好きな方法で快適に読むことができる、というあたらしいBCCKSのサービスのコアが立ち上がったことになります。今後も有料出版機能とかプリントオンデマンド機能とか進めていて間に合ってない機能はたくさんあるのですが、ひとまずいろんなかたに本を出版してみていただければと思います。

• http://bccks.jp/
  • BCCKSのサービス概要はこちらのFacebookページがわかりやすいです
• 本づくりの参考書
  • BCCKSエディタで作れる本のフォーマットの紹介や、編集のヒントをまとめた本です。
  • BCCKSエディタをはじめて使うさいに参考になるように、この本は自分の書斎でコピーして編集データをのぞけるようになっています。発行された本と見比べて参考にしてみてください。
• BCCKSでの本の作り方ムービー
  • BCCKSエディタの使いかたをまとめた動画です。やや長いですが、エントリ単位の文章の編集やジャケットの作りかた、発行までの操作を順を追って紹介しているので、エディタの使いかたがよくわからないときは観てみてください。

■僕はWeb用リーダーに引き続きエディタのJavaScriptによるUI一式と編集関連のバックエンドの開発を担当しております。いま世の中にある電子書籍出版Webサービスの多くは（たぶん）ブログエンジンベースで、各ページの編集はいわゆるブログエントリーを執筆するのとほぼ同じUIが採用されていますが、BCCKSではより「編集」という作業にフォーカスするために、むしろTogetterやStorifyの編集画面に近いアプローチで、テキストや画像のエレメントを並び替えたりスタイルを変えたりしながらプレビューページを自分の意に沿うよう変化させていく編集作業ができるエディタUIを果敢にもゼロから構築しました。エディタ画面をみてただけるとわかるのですが、今後エディタ右端に検索ペインが追加され、twitter、facebookほか自分の他サービスコンテンツや、転載許諾されたBCCKS内のエントリを本に自由に取りこめるような仕組みを導入してく予定です。

これまでのBCCKSには直感的に操作できるという意味では非常に優れたエディタがあり、それと比較して今回のエディタに違和感がある方は多いでしょうし、通常のブログエディタのようにテキスト修飾や画像挿入が自由に出来たほうが楽だという意見もありそうで、もちろんBCCKSとしてもこれ以外ないと考えてるわけでもないのですが、縦書きベースのリフローコンテンツをWeb技術で直感的に編集するUI、というのは世の中的にもかなり前人未到で、すぐにでき上がったりしないだろうなとも思っており（最終的にはInDesign on Webでいいのかもしれませんが、縦書きのインライン変換をはじめとする技術的な難関もふくめ開発パワー的に無理なので、今回はとにかくInDesingを目指したら負け、というスタンスで進めております）、ひとまず形になってある程度快適に使えるエディタを仕上げたのでいろんな人に触れていただいて意見をいただければなーと。個人的には先行モニターとしてつかっていただいた suge™ さんの「はじめてHTML覚えて、emacsで書いてはブラウザで確認って繰り返してwebのレイアウトをちまちまいじってた頃の楽しさがある。」という意見に共感しつつ、やや手間はあっても手をかけたデータが「発行」される小気味よさを伸ばしていけたらいいなと思っています。

ちなみにjs的にもDnD API / File API / FormData Post / textareaダイナミックハイライトなどなど、できそうなことはなるべくつっこんだ感じのつくりになっておりますので、試しにでも触っていただけるとうれしいです。

■9月末から10月にかけて、女子美の一年生後期授業「コンピュータ実習B」を担当しておりました。学生は2組80名超、週4日なんで講師も4人2日づつというハードな授業が先日なんとか終了したところですが、この授業のなかで、現在BCCKSがクローズドベータで運営しているオンデマンド出版サービス「bccksBunko（ブックス文庫）」を使った作品集を使う課題をしましたのでせっかくなのでレポートしておきます。

ブックス文庫についてはサイトのほうを見てもらえればわかりますが、「文庫サイズモノクロ48ページ、1冊525円から出版可能！！」という、いわゆってしまえばいわゆるオンデマンド出版サービスですね。電書だ自炊だとやたらと「紙の本」がおとしめられがちな世の中ではありますが、BCCKSの場合は「もともとオンラインでコンテンツをつくれるサービスだったのに、いまから紙をはじめる」という、時流の逆行ぶりがただごとではないサービスとして提供されようとしているわけです。ちなみにクローズドベータは第一期モニターが受付完了していて、今後も時期をみて増員されたりするみたいです。今回はBCCKSさんに授業課題での使用をご理解いただいて特別にモニター参加させていただいています。

ブックス文庫むけの課題としては今回、学生全員に「Looking Into a Drawing」というタイトルで、「ある風景の写真と、その風景の一部をその場でドローイングしてその絵と風景がつながるようにかざしながら撮った写真とを並べる」というルールの写真を制作してもらいました。これは講師の一人である西本太郎さんがアイデアとして紹介してくれたflickrグループの「Looking Into the Past」（昔の写真と同じ地点で撮った写真を公開するグループ）をアレンジしたものです。学生には各自テーマを決めてこのルールの写真を連作してもらい、BCCKSの本として編集してもらってもいますが、ブックス文庫には各自そのなかから1枚づつ提出してもらって、それぞれを見開き裁ち落としのレイアウトで配置した写真集になっております。BCCKS側での編集、出版の作業は助手やら講師やらでおこない、バグに遭遇したりしてバタバタしつつも10/10に出版完了し、10/16には無事に届いて10/18の授業最終日に学生に配布することができました。ちなみに今回160pまでのプランでカラー/カバーありで95冊発注したので、1冊1,922円になりました。

オンラインのブックはこちらで見られます。出版したブックはそのまま販売もできるんですが、授業の本は印税が誰に入るべきか微妙なんで販売はしておりません。

実際に使ってみて、こうした授業だとかワークショップのたぐいなどで、ブックス文庫をアウトプットにするのはかなり使えるんではないかなーと思いました。ブックス文庫の印刷や製本、レイアウトの「本物の本」感については天然文庫を購入するなりして実際に手で確かめてみていただきたいですけど、たとえば１日くらいでBCCKSで作成したポートフォリオやプロジェクトドキュメントが、１週間そこそこ後にこの形ででてくるというスピード感までふくめたコストパフォーマンスは驚異的だなと。授業を構成するうえで課題の最終的な落としどころというのは結構迷ったり困ったりするものなのですが（やりすぎると授業時間内に終わらずそのために出校したりとか大変だったりする…）、その意味でブックス文庫のまとめやすさと仕上がりの充実感はすばらしいものがあります。そのあたりお悩みのかたがいたら検討してみたらいかがでしょうか。

ちなみに今（というか今日まで）開催中の女子美祭の授業課題展示にて、このブックス文庫も展示されているのでお寄りのさいはお手に取ってみてくださいませ。

■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にもあるといいよなーと思っているところです。