『Processing アニメーションプログラミング入門』(技術評論社 7/15発売)を書きました

■なんどか版を変えつつご愛顧いただいているtakachin君との共著『Built with Processing』(BNN新社)につづいて、こんどは技術評論社からProcessingの本を出させていただくことになりました。今回も「プログラミングはしらない、むしろ苦手、でもプログラムでできる表現は興味あるし、むしろやりたい」といったかたに向けた入門書となっています。7月15日(あたり)発売です。



Processingの入門書というどうにも狭いジャンルで同じ著者がなんさつも本を出すのにはわりと抵抗感があったのですが、編集さんからのすすめもあり、BwPではできなかったことをふくめ、スタンスや打ち出しを変えた別のかたちの入門書にできないかなというのが個人的なチャレンジでした。具体的には、つぎのような方針を立てました。

  • CD-ROMにサンプルプログラムを付属し、未完成のひな形プログラムを読者が修正・追加してサンプルを完成させながらプログラムを学んでいくレッスン形式の構成にする(これは編集さんのオファー)
  • 本の最後の段階で、あるていどの規模からなる完結した(「作品」と呼べるくらいの)プログラム作品が完成する
  • 各ステップでのサンプルプログラムは、最終的にできあがるプログラム作品の途中段階としてそれぞれで完結したプログラムにする
  • プログラムの説明をするためだけの便宜的な章やサンプルプログラムを〔極力)用意せず、すべてのサンプルや解説を最終的なプログラム作品の部分として機能するものとして構成する
  • オブジェクト指向を実践的に盛り込んだ内容にする
  • 個性的なイラストレーターを起用して、本文図版やサンプルプログラムの素材をたくさん用意して楽しい紙面にする

みたいな感じです。

ゲームプログラム本などではサンプルのゲーム作品をひな形サンプルから完成させていくような内容の入門書がよくありますけども、だいたいは序盤でプログラムの座学をへて、(それとは分離された)実践編にうつる感じの構成のものが多いみたいでした(ちがうのもあったらすいません。教えてください)。そうじゃなくて、「ゼロからプログラムを学びつつサンプルを打ち込んでいると、いつのまにか作品が完成する」みたいな本ができないかなーというのが考えていたところでした。いやそれはさすがにムリなんですけども、ひとつのパターンとしてゼロからはじめてあるていどの規模のプログラム作品を完成させるプロセスが疑似体験できるような内容にはできたかなと思っています。

で、どんな感じのサンプルを作る本かというと、こんな感じです。


ご覧いただいて明らかなとおりで、今回はサンプルプログラムのキャラクターデザインや本文図版制作などを土壁綾さんに全面的にご協力いただきました。 土壁さんの不思議ビビッドイラストがサンプルや本文に満載なのでこれだけでも新鮮で楽しい本になっております。内容的にもBwPではあまり盛り込めなかった図解を多くしてとっつきやすくしたつもりです。

冒頭の方針を満たすステップの構成とサンプルの内容のすり合わせがかなり大変で、サンプルを修正するとその後のすべてのサンプルに影響するあたりが地獄だったりして(震災の影響も多少あり)、当初去年の夏に出すはずが一年遅れてしまいましたがようやく刊行にたどりつきました。書店でぜひ手にとってみてください!

あと今回実験的にFacebookページを設置してみたので情報共有や質問などにお使いくださいませ(本内の誤記や不具合がもしあったらこちらにお知らせください)。


ブックス文庫を使って授業課題の「本」をつくりました


bunko.jpg

■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円になりました。

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

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

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


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

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

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

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

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

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


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: 衝突時の動画再生のボリュームの減衰を変えます。減らすと速くフェードアウトします
  • 動画ボールオブジェクト
    • 衝突時の衝撃の強さにより、動画が再生されます
    • ボールをドラッグして好きな場所に移動できます
    • マウスがボールの上にある時(ドラッグ中)にマウスホイール(スクロール操作)をすることでボールの大きさが変わります
    • ボールが大きいとボリュームが大きくなります
    • 動画の再生が進むと徐々にボールが大きくなり、再生が終了するとボールは消えます
    • ※動画ストリームの問題により、再生されないまま消滅する場合もあります
  • ウインドウ
    • ウインドウのサイズを変えることで、オブジェクトが飛び回るフィールドを広げることができます
    • ウインドウを画面内でドラッグして移動させると、ドラッグ距離に応じてすべてのボールに力を与える(画面を揺らす)ことができます
    • フィールドは上部の見えないところで上端が切れているので、ボールを上に大きく飛ばすと戻ってこないことがあります。

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


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


iOdorokiban for ProcessingBETA

iodorokiban_beta.jpg

■2年前にオープンキャンパスの子供向けワークショップで使うために作っていた「iOdorokiban」というソフトがあるんですが、また使いたいとのことで、ProcessingBETAで動くよう修正したので、公開しておきます。

久しぶりに遊んでみたけど、いまでもけっこう楽しい。

実行形式アーカイブ

■せっかく実行形式でのexportをProcessingがサポートしてるので、バイナリでも置いておきます。

Windowsでの使用方法

WinVDIG(USBカメラをQuickTime(forJava)で制御出来るようにするソフト)をインストールする必要があります。

  • iOdorokibanをダウンロードして展開します。
  • WinVDIG Release NotesからWinVDIG ver 1.0.1をダウンロードしてインストールしてください。
    • WinVDIGは1.0.5が最新ですが、不具合があり、前バージョンでないと正常に動作しません
  • 展開フォルダの”application.windows”内にある”iOdorokiban.exe”を実行してください。
  • ウインドウが出て、カメラの画像が動いていれば正常に動作しています。

MacOSXでの使用方法

Macでは特にソフトのインストールなしに、使用できると思います(が、未確認です。キャプチャデバイスの選択でこける可能性大なので、できなかったら教えてください)

  • iOdorokibanをダウンロードして展開します。
  • 展開フォルダの”application.windows”内にある”iOdorokiban.app”を実行してください。
  • ウインドウが出て、カメラの画像が動いていれば正常に動作しています。

動かない場合の注意点

  • QuickTime7.1 + WinVDIG1.0.1の環境でのみ動作確認してます。QuickTimeのバージョンなど確認してください。
  • キャプチャデバイスの選択でさぼっています。デバイス名に”cam”/”CAM”が含まれるものを探すので、接続したデバイスによっては失敗します。その場合は、ソースにデバイス名直接描いて、Processingで実行するとうまくいくかもしれません。

あそびかた

ビデオ画像で驚き盤をつくります。

キーボード、マウスボタンで操作します。

  • スペースキー:映像を撮影し、コマを進めます。
  • バックスペースキー:前のコマを削除し、戻します。
  • マウスボタン:押している間、驚き盤を回転させて動きを確認します
  • pキー:画面をjpgで保存します。印刷すれば驚き盤になります。
  • cキー:画面をクリアして、驚き盤を作り直します。
  • !キー:デモモードです。自動的に撮影を繰り返して驚き盤風のアニメーションが表示されます。

Webページでダイスを振るbookmarklet

dice.jpg

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

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

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

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

[2]: 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);})();


Amazonからアートワークを追加.js

addartworkfromamazon.gif

RecommuniHacks の続きで、 Recommuniでダウンロードした曲にアートワークを追加 なんてのを作って遊んでいたんですが、これがけっこう楽しくてふつうの曲でもやりたくなったので、Amazonから(アーティスト名とアルバム名で該当すれば)アートワークを追加できるスクリプトを書きました。

blog.bulknews.net で宮川さんがつくってた「 iTunes のアートワークを Amazon Web Services からとってくる 」とおんなじですが、まあActivePerlとモジュールがインストールされてなくても使える、というのが利点かなと。AWSのディベロッパトークン(というのですか)は必要です。 Amazon Web サービス登録ページ で登録すればもらえます。ぼくもさっきもらいました。

だいたいもともとCDDBのアーティスト名/アルバム名だろうからAmazonで引っかからないのも多いし、てきとうに書いてるのでうまくいかないかもしれませんが、とりあえず。


Piccy ver.001

piccy001.png

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

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

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

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

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

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

■[追記]

Piccyとは

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

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

ダウンロード

設置方法

  • 圧縮ファイルを展開する。
  • 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のキーを取得します。
  • info.txtのgmapkeyをにAPIキーを入れる。スペースで区切ってください。

    location ABQIAAAAgf6OSxrgd3QJC98-sUWrXBT6rMgtMUOAl…

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

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

動作について

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

ライセンス