こんばんわ。USKです。

というわけで、てらこ、行ってきました。
なんだかんだで二ヶ月ぶり。

今回のお題は、「戻るボタンアワードに挑戦！」
以下、引用。

今回は、いつもお世話になっております、ペパボさんが開催する『戻るボタンアワード』にみんなで挑戦しようぜっていうことになりました。（みなさんお忙しいので別に無理して挑戦しなくてもいいよ。ゆるーくいこう。ていう言い訳を先に用意しておきマス）

戻るボタンアワードについては下記参照のこと

* レンタルサーバー「heteml」 - 戻るボタンアワード
* ペパボクリエイターズコンテスト（ペパコン2009）

大阪てら子 25 「戻るボタンアワードに挑戦！」 : ATND

そんなわけで今回はアワードの関係上、非公開の作品に限るだろう、という配慮のもと、
Ustreamでの中継もありませんでした。
そして、受付期間は終わったけれども、まだ結果が発表されていないという事で、
ここでみなさんの発表されたものの紹介も自重しておきます。すいません。
決して手抜きとかではありません。

というわけで、自分が発表したものを晒しておきますよ、と。

発表したやつ

さっそくですが、成果物です。

こちら

少しすると真ん中らへんに色のついた矢印が現れると思います。
（接続状況によりなかなか現れないかもしれません。そんな時はリロードでお願いします。）
それを押すと、、、はい、戻りましたね。

あまりの内容のなさに、発表時にも、「え！？」という驚きの声が続出しました。
、、、ほんとうに内容なくてすみません。

解説

で、解説します。

今回は、_level0.KAYACさんで書かれていた、kuler、というサービスのAPIを使用させて頂いています。
【flash時計】kulerで色をつける時計 | エントリー | _level0.KAYAC

この、kulerというサービスは、僕も知らなかったのですが、
人気のある色の組み合わせや、面白い組み合わせなど、様々な色の組み合わせを
登録、編集、利用出来るという、素敵なサービスです。
このサービスでは非商用であれば無料でAPIが使え、様々な色の組み合わせを楽しめる！ということで、
使ってみたかったのです。

そんな経緯で、無理矢理戻るボタンにはめ込んで、使ってみました。

ソース的には_level0.KAYACさんが書かれてる内容、ほぼそのままです。
ですが、書かれているソースをそのまま使ってみると、XMLのパース時になんとも上手くいきませんでした。

名前空間

どうにかこうにか色々調べてみると、どうやら名前空間というものを指定してやらねばならないよう。
この名前空間、というのがイマイチよくわかりませんが、
XMLは独自でタグを決めれる反面、タグの名前が被ってしまうことがある。ので、
それが被っても大丈夫なように、このタグはこの名前空間に属していますよ、という風に使うそう。
ASで言う、クラスのパッケージのようなものだそう。
と、言う事を、てらこで教えていただきました。

というわけで、XMLをパースする時にも、その名前空間を指定してやらないと、
どれに属するタグかを見分けてくれないので、指定してやらないと上手くいかない、のだそう。
（※あまりにもざっくりとした説明＆中途半端な理解度なのでこのまま鵜呑みにしてしまうと危険かと思います。。）

それで、今回使用させていただく、kulerのXMLを見てみると、XMLの宣言部分には次のように書かれています。

この、xmlns:hogeのhogeの部分が名前空間の指定、となっているよう。
さらに今回必要な色の指定の部分を一部抜粋すると、

と、ほとんどの箇所で、kuler:hoge、となっています。
というわけで、名前空間は「kuler」を指定してやればいいんだろう、と予測。
以下のように指定してやります。

で、パースしてやる箇所で、名前空間::タグ名、という風に、コロン二つでつないでやります。
（コロン一つだとコンパイルエラーになる）

そんなこんなで色が取得出来るってわけです。

ちなみに今回の記事の一番上にあるのは、これを使って色をつけただけです。

まとめ

結局、アワードには応募はしませんでした。
アワードの説明にも書いてあるように、内部的な事よりも、見た人があっと驚く、面白い、斬新な、演出が求められていたようでしたので。
ここからもっと詰めて、触って面白いものに出来ればよかったなー、と思います。
これじゃーあまりにも何もなさすぎです。。

とりあえず、今回のコードをアップしておきます。
ASファイル一つだけ、です。
teraco25.zip (Index.as) - 1.7KB

次回てらこは9/26(土）予定だそうです。
残念ながら僕はいけそうにないですが、、。

参考リンク

・kulerのディベロッパーサイト
Home - Kuler - Adobe Learning Resources
・解説（英語）
B. Feeds - Kuler - Adobe Learning Resources
・Adobe製品にはkulerのカラーピッカーパネルを入れれます。
[Adobe]kulerパネル | blog ViolentCoding

JavaScriptでリンクにマウスオーバーしたら、ツールチップを出すようにしたいんだけど。
ツールチップの中身はHTMLで好きに変えれるように。

ってな感じの事を言われたので、色々調べてやってみました。
JSはあんまし触った事ないし、とりあえずjQuery使ってやったら出来るかも、みたいな浅い知識しかないわけですけど、
なんとか出来ました。

なんでjQueryなの、とかは聞かないで下さい

まずはとりあえずググってみた。
すると、こういったものがあった。

CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips | CSS Lecture

おー！まさに！！といった動きなんですが、問題が。
これだと、ポップアップの中身がHTMLで書けないんです。
実際にポップアップするところのソース。

デモのページを見てもらえばわかるとおり、このやり方は、aタグのtitleの中身をポップアップする仕様です。
なので、titleの中でタグを展開するわけにもいかず…。

で、他にも色々見てたんだけど、なかなかドンピシャのものがなかったので、作ってしまおう、と。
そんなこんなで出来たものがこれ。

サンプル

jQueryは今日時点で最新のものを使用しています。(v.1.3.2)

JavaScriptのソース。

全然たいした事はやってなくて、要するに、
リンクにマウスオーバーしたら指定のidのdivブロックを表示してポジションを変えて、
マウスムーブしたらそのポジションを更新して、
マウスアウトしたら、そのブロックを非表示にする、って感じです。

マウスアウトした時にフェードアウトさせようと思ったけど、
なんか動きがおかしくなったのでやめました。

HTMLはこんな感じ。

classにtooltipって名前があるものが対象となって、nameで指定したidを持つdivをポップアップ表示させます。
なので、複数作る場合はこう。

デモ

この複数ある時にそれぞれ指定したポップアップを出す部分が結構悩んだ。

あとは、divの中を好きに変えたらいいんではないかと。
classはポップアップに関係ないので、ここでCSSの指定をしてもらったら良いと思います。

何かありましたらコメント下さい。

参考リンク：
jQuery 1.3.2 日本語リファレンス
jQuery入門

こんばんわ。USKです。

さて、先週土曜に行われたてらこに今回も行って来ました。
今回は奇麗になったAID-DCCさんのところにお邪魔しました。

今回のテーマは、「WEBカメラ」です。
箇条書き風にまとめってかメモっておきます。

やまぢーさん

15面パズルの画像をカメラで取り込んだ画像で。
4時間で作ったそうです。しかもAIR。
カメラの画像を全フレームビットマップにdrawしてるから、
その処理の部分がやたらと重い。

ちなみに、15面パズルでは絶対に解けないパターンが存在します。
・１５パズルで数学しよう！ 〜１〜

ご本人様による解説記事

みのんさん

毎度おなじみの顔認識。
Sparkに上がっている、「Marilena」という顔認識のライブラリを使ってます。
詳しくは以前に書いたのでそちらでどうぞ。
で、さらにその「Marilena」をビデオ向けに高速化したものが最近アップされてたよう。
（見つけれなかった。。）

・マスク（フルフェイスのいかついやつ）をかぶせるのん
・二人並んだ顔を入れ替えるのん
・（顔認識じゃないけど）簡単にストップモーションアニメが作れるのん
三番目に書いたのが技術的にはいたってシンプルだけど、アイデアが逸品で目から鱗でした。

パンツカムヨさん

毎回独特の世界を披露して下さるパンツカムヨさんですが、
最近は「y_tti」の名前の方に統一していきたいそうです。

カメラで撮った画像を保存させる仕方の勉強。
adobeが公開してる、PNGEncoderでバイナリデータを送信出来ます。
で、それをサーバー側で画像に再構築する、と。（合ってる？）
サーバー側のプログラムはamfphpというFlashとは相性がよくて、かつ、簡単なものをほぼそのまま使った、とか。
画像保存はFlash10からはFlashのみでも出来るよ（by さくーしゃ先生）
Mikan | wonderfl build flash online

で、作品。
カメラの画面をクリックで、画面をキャプチャ→ハエの絵に顔を合成→画面上にいっぱい飛ばして→手で追い払える。
いやはや、気持ち悪いです。

手で追い払う部分は簡単な動体検知を行っていて、
ビットマップでキャプチャした1フレーム前の画像と今の画像を比べて、
誤差の大きい場所を調べ、その差をスピードに反映させ、ハエ達を動かしている、ようです。

ご本人様による解説

kimuさん

みのんさんのストップモーションを簡単に作るやつ、をさらに発展させた版。
wiiのコントローラーを使って簡単に色々な制御が出来る。

ボタンを押すことでキャプチャが撮れたり、削除できたり、
コントローラーを振る事で再生や早送り、逆再生が出来たり、と、とにかく高機能。
kimuさんはVJをされているそうなのです。
なので、いちいちPCを触らなくていいし、リズムに合わせて振ったりできるので、その辺wiiのコントローラーってのはかなりいいんじゃないかと。
よく考えられてます。

wiiのコントローラーはFlashと連携させて使うのはそんなに難しいことじゃないよう。
ライブラリ等が公開されてます。
WiiFlash : Wiimote and Flash
また、詳しいやり方がFlashOOPに載ってました。
WiiリモコンとAS3 - Flash OOP Japan

以前のてらこでも、trick7さんがローソクの炎で画面の中の地図を照らし出す、ってのをwiiを使ってやっておられました。
（以前の自分のログ）

wii本体がなくてもコントローラーだけでも結構遊べそうな気がしました。

トンカさん

コンセプトはマイノリティリポートのやつ。

カメラの前で自分の動きでポインタを操作。
二つのポインタがあって、それによって、写真の両端を掴めたりします。
ただし、動体検知しているので、指先は常に動かしとかないといけません。
その辺がまた良い感じに雰囲気を出してました。

ご本人様による解説

myantaさん

webカメラを使った案件の紹介。
webカメラを使った案件ってあんまりないよね、と。大変そうだけうらやましい。
みんなのWeb面接
求人サイトで、自分の自己PRを登録しておくことによって、採用担当の人がスカウトを行ったり、
そのままその場で面接も出来たりするよう。
テレビ電話ではなくて、事前に決められた質問内容に答える自分の様子を録画して、
担当の人に見てもらう、ってことのようです。

サーバは、Red5っていうFlashストリーミングサーバを使っているそうです。
GIGAZINEに記事が。
無料で利用できるFlashストリーミングサーバ「Red5」 - GIGAZINE

ちゃぶ台さん

FLARToolKit
マーカーから物体が現れるんじゃなくて、マーカーの位置に物体を移動させたい。
（ご本人様による解説）
その物体とは、BigDog！
このアニメーションの方が時間がかかっているのではないかと。
モデリングはLightWaveで、アニメーションはMaya、という豪華仕様。
というのも、Flashの3Dではよく使われている（無料だし）Blenderっていう3Dソフトだと、ホーンアニメを書き出せないそう。
なので、Maya。体験版。

FLARToolKitでは、x,yの座標は普通に取れるけど、角度がちゃんと取れない。どうするの？
それは良く聞かれる。から、gihyoの連載で書いたよ（by さくーしゃ先生）
FLARToolKitを使ったAR系Flashの作り方：第3回　マーカーの位置や回転，向きなどを取り出す｜gihyo.jp … 技術評論社

マトリクスの話でも質問がでたので、さくーしゃ先生が答えてくださいました。
参考リンク：
[as]Matrixによる変形のこと [NUTSU]
Matrixクラス － 変換行列 | デベロッパーセンター
いきなり3Dでは難しいので、2Dで理解して、それにZ軸が加わった、と考えるといいよ、とのこと。

シナチクさん

画像をアスキーアートみたいにしてくれるライブラリがあったから使ってみました。
ライブラリの紹介。
Oaxoa Blog » Asciify - Actionscript 3 (as3) Ascii Art class
ご本人様による紹介

「あこがれのあの子とツーショット写真を撮ろう！」
タイトル通り、写真が撮れます。
ご本人様による解説記事が詳しいです。
シャッター音が小気味よい。

挙動不審カメラ
これをそのまま作ろうとしたけどなんだかよくわからなかったので、恒例の質問タイムへ。
さくーしゃ先生がwonderflにてさくっと作ってくれました。

さくーしゃさん

紙に引いた線をカメラに写して、それで音を制御する。
線が上がってたら高音、下がってたら低音、みたいな。
紙にかいただけで音を制御できるよ、とのこと。
他のみなさんが発表されている合間にさくっと作っておられました。さすがです。

まとめ的な

今回は発表者も多く、内容もそれぞれレベルの高いものとなり、
非常に面白く、勉強になりました！
二次会でも非常に濃いお話を聞かせて頂きました。

それにしても、相変わらず長い文章になってしまいました。。
もっとまとめれるように努力します。

発表者、参加者のみなさん、お疲れさまでしたー。
来月は、6/27予定だそうです。（未定）

テンプレートを変えてみました。
Hemingway

ブログのトップページが最近の記事二つが横並び、と、
あまり、ブログ向けではないのかも知れませんが（どっちかっていうとポートフォリオ向け？）、
ま、デザインも好きなテイストですし、気分転換に、と。
黒バックって見やすさどうなんだろう？

しかし、テーマの入れ替えが楽です。
どうやるのか一瞬迷ったけど、要は、落としてきたものをフォルダごと
wp-content/themes/
の中に放り込んでやればいいだけ、と。
あとは管理画面から追加したテーマを選択すればいい、と。簡単です。

そのうち自分で一からカスタマイズしたいんですけど、
wordpressのデザインを一から自分仕様にしようと思ったら、
結局テンプレートを作る事と同義なんですかね？？

------------------------------------------------------------------------------------------------------------------

あと、fladdictさんのところで紹介されてた、「ユメみるiPhone」を買いました。
ちょっと弄ってみます。

Mac Heistでいろんなソフトがまとめて安くなってました。
全部で$1000近いものがなんと$39。驚愕。
そのうち一部はチャリティーに回されるようです。（購入時にそのチャリティー先も選択できました。）

サイト自体も英語で、ソフトも全て英語のものなので、イマイチ何をするソフトなのかわからなかったりするものもあります。。
なので、自分用にメモがてらリンクを貼り付けときます。
リンク集みたいになってますが、、。

※それぞれのタイトル部分のリンクが本家のサイトです。

iSale $39.95
eBay用のソフト。eBayとか使わない。。。

Picturesque $34.95
画像加工ソフト
・ピクチャエスク（Picturesque）でいい感じの画像を作ろう！ - 湘南画材研究所@MT
・スタイリッシュに写真を加工できるMac用ソフト「picturesque」 (ブログウォッチャー編集長日記)
・わかばマークのMacの備忘録 : Picturesque

SousChef $30
レシピソフト。共有できたりするらしい。

World of Goo $20
ゲーム。
・組み立て、支え、吊り下げるＷｉｉ用物理アクションゲーム「World of Goo」デモ＆トレーラー映像:小太郎ぶろぐ
・World of Goo - How to play.

PhoneView $19.95
iPhoneをHDDとして使う。
・iPod touchをディスクモードとして使う「PhoneView」 - iPod LOVE

LittleSnapper $39
サイト等のスクリーンショットを撮って管理できる。
・LittleSnapperで自分だけのサイトコレクション : could

Acorn $49.95
画像編集ソフト
・MAC REVIEW » Acorn：シンプルで強力な画像編集ソフト

Kinemac $299
3Dアニメ制作ソフト
・3D Real Time Animation「KINEMAC」はどんなソフト？ - Macテクノロジー研究所

WireTap Studio $69
音声録音・編集
・レビュー：WireTap Studio ver.1.0

BoinxTV $199
動画編集
・KAGAYA.COM » Blog Archive » 超簡単！　Mac１台で個人ビデオスタジオをつくってしまう「BoinxTV」を使ってみた

The Hit List $49.95
・Mac用GTDツール The Hit List | NOAINTERACTIVE blog

Espresso $80
HTML・CSS・JS等のエディタ
・Webオーサリングソフト『Espresso』のパブリックベータ | BULANCO BLOG
・ppmweb » Espresso 1.0b1 クイックレビュー

Cro-Mag Rally $19.95
ゲーム。昔はMacに標準で入ってたの？今でも入ってる？
同名のiPhoneアプリが売っていました。

Times $30
ニュースを見る為のソフト？もちろん英語で。

こっからは購入者に限り、Twitterで紹介文をつぶやけばもらえるソフト。

Delicious Library 2 $40
蔵書管理ソフト
・iSightで楽にデータ化！ 書籍・CDを管理「Delicious Library」
・ゆぶそま 蔵書管理ソフト「Delicious Library」をさらに使う

Multiwinia by Ambrosia $19
ゲーム。
・カルトストラテジーがマルチプレイで再び！『Multiwinia』スクリーンショット公開 - Game*Spark
・Multiwinia日本語化wiki - トップページ

あと、誰でももらえる分

Event Box $15
ソーシャルネットワークのフィードを一つにまとめる
・ソーシャルサービスをまとめる「EventBox」 - soundscape out

参考まとめリンク
わかばマークのMacの備忘録 : category - ひとりごと

どうも、USKです。

さて、てらこに行ってきました。
てらこレポ書くのも久々な気もします。
（まぁ、まともに勉強してなかったし、、、）

---------------------------------------------------------------------
って、記事を帰ってすぐに書き始めてたんだけど、
そのあと放置してて、投稿するタイミングを逃していました。。。
なんで、今更感がかなりありますが、とりあえず公開だけしときます。
---------------------------------------------------------------------

今回は「AS3教えて！えらい人」ってわけで、
「AS3についての質問大会」でした。
(ATNDにみなさんから募集した質問が載っています）

かく言う僕もAS3はまだまだほとんど触ったことなくて、全然わかってないので、今回の企画はほんと勉強になりました。
そんなわかってない人がわかってないなりに書いてきます！

以下、箇条書きで。

1.class内でparentとrootを多用しちゃわないような、うまい書き方のコツなどあれば教えてください。それがSingletonってやつのことですか？（byシナチク）

・やっぱりparentとかrootを多用しちゃうような書き方はよくない。
・考え方にMVCってのがある。簡単に書くと、
Model - アルゴリズムや計算部分
View - 表示に関する部分
Contoroller - それらを繋ぐもの
【参考】
Model View Controller - Wikipedia
trick7 - FlashとMVCパターン
コリン・ムック氏のたまごっちのサンプルがMVCの勉強にはいいんじゃない？
SSAW06 » Flash ActionScript2.0 実践講座3：Flash OOP詳細
AS3版は本が出ています。
詳説 ActionScript 3.0

2.classがdynamicってどういうこと？じゃあstaticって？（byシナチク）

・型宣言なしでもエラーが出なくなる。なんでもあり？
・そのかわり間違ったものを代入してもエラーが出ないのでわかりにくい。
（AdobeMAXで野中さんも型宣言はしたほうが軽くなるよ！って言ってた）
・じゃあどういう時に使うの？
・例えばAS2だと、FuseKitで使うよ！

3.タイムラインにASは書く？クラスに書く？(by j.iida)

・クラスに書く派！
・じゃあ、スクリプトとタイムラインアニメーションだと？
・タイムラインアニメーションを使いたい時ってどうしてる？
・MC内にタイムラインアニメーションを作っておいて、それをリンケージしておくとか。

4.FlexとFlashの違いは？(by シナチク）

・結局同じのもなのでは。
・Flexにはmxmlがある。
・MVCで言えばViewの部分はmxmlで書いて、残りはASで書く。
・けど、mxmlも最終的にはASに変換されるから結局一緒。
・Flexって結局フレームワークだから。

5.AS書く時、何で書いてますか？ ・（by j,iida）

・Winだと、FlashDevelop。MacだとFlex Builder、で決まり！？

休憩：パノラマ屋さん二宮さんの自己紹介タイム

AppBankで二宮さんの記事を読んだばっかりだったので、ちょっとびっくりしました！
iPhoneアプリ(直接iTunesが開きます）もダウンロードしてました！

京都・日本・世界の最新パノラマムービー情報：QTVR Diary

なんと今回のてらこの模様を撮影もしてくれました！
写真もさっそく公開されてます。（全員目線入りで超あやしいですがw）

効率の良いデバッグの方法。（byシナチク）

・サンダーボルト
・Flash、Flex標準のデバッガー
【参考】
【デバッグ強化週間】3分でできるデバッグ環境！ ThunderBolt AirConsoleまとめ｜_level0.KAYAC

・デバッグといえば、メモリ関連の管理で「Hi-ReS! Stats」使ってるよ。
・メモリ関連といえば、ビットマップでメモリの処理が軽くなる話があったけど、これってどういうこと？

ごみ漁り関係（ガベージコレクション関係）を教えてほしいっす。 ステキなクラス設計を。（by ギリギリツーリスト)

・そもそもガベージコレクションってなに？
ガベージコレクション - Wikipedia
・wikipediaの説明じゃわからん！
・びんたさんの説明がわかりやすい！
BeInteractive! [Spark project 勉強会 #06 ありがとうございました]
・System.gc(); で、強制的にガベージコレクションを発動してくれる。けど、これはデバッグプレーヤーでしか動かない。
（FP10からは通常のプレーヤーでも動くようになった？？）
・基本、使ったものは片付ける。
- イベントをリッスンしてるものは消す
- addChildしてるやつは消す。
- 参照もってるやつはnullを入れて消す。
・これらを基本的に考えながら作ってやらないとメモリリーク（メモリが漏れてる）が発生しちゃう。

さてさて、２週間程前にWordPressに変えました。
前々から変えよう変えようとは思っていて、インストールしてから放置することはや数ヶ月…。
ようやっと移行させました。

ちょうどやろうと思ってた時に、trick7さんのところもWordPressに移行されたそうで、
その記事を参考にさせていただきました。

trick7 - ブログをMovableTypeからWordPressに移行しました

以下、作業を箇条書きに。

• MT3.1から、WordPress2.7に変えた。
• MTからエクスポート→WordPressにインポート
• パーマリンクは全て変更。なのでインポートは容易。
• RSSフィードをFeedBurnerに一本化
• FeedBurner用に301リダイレクト。.htaccess作成
• 同じく以前のパーマリンクから新パーマリンクへリダイレクト
• WordPressのプラグインを少し入れた
• FeedBurner FeedSmith - WordPressのフィードを自動でFeedBurnerのフィードへリダイレクトしてくれる
• HeadSpace2 - メタ情報などを記事単位で簡単に編集できる。あんま使わん気がする。
• Ultimate Google Analytics - Google Analyticsのコードを簡単に埋め込んでくれる
• あとは、Akismetと、WP Multibyte Patchが自動で入ってた。

もちょっとかかないと

とか思うわけです。
まぁ、あんまり気負うと余計に書かなくなりそうなので、もうちょっと自分の中で書く内容のハードルを下げて、
ほんとしょーもないことでもどんどん書いていこうかな、とか思ったりしてます。
書いてなかった間にも、てらこ行ったりMAX行ったりF-site行ったりライトインサイト見たりiPhoneに変えたりとかいろいろあったし。
（イベントと買い物ばっかｗ）

とりあえずその前にブログのデザインをなんとかせねば。
一応形は考えてるから、あとはサイトにするだけなんだけど、PHPってのがさらに腰を重くする、、、。

とりあえず、今週末はてらこでゲーム大会してきます。

こんばんわ。
どうも最近てらこに行ってきた記事しか書いてないような気がしますが、、、。
頑張ります。

とにかく。
大阪てらこ17に行ってきました。
お題は「時計」です。

東京てらこのテーマが時計ってことで、それに相乗りした形で大阪でも時計がテーマに。
しかも大阪がパクったのに大阪のほうが先に開催。
そもそも、yugopさんの展覧会が開かれて、それが時計にまつわるネタが多く、
それに触発されたりして、trick7のteraさんが自作のライブラリ、TeraClockを作られて、それを使った色々なものが見たい！ってのもあって、時計がテーマ、となったようです。（割愛、推察あり）

今回idoさんが案件爆発ってことで、
会場が急遽COLORSさんから、AID-DCCさんに変更。
初上陸してきましたが、キレイなオフィスでした。

あまりメモをとらなかったので、覚えている範囲で勢いで書きます。
間、抜けてたりしたらスミマセン、、。

シナチクさん

ご本人さんによる解説記事

シナチクさんは私用のため来られなかったのですが、作品はしっかりと作っていて、
それを代わりにちゃぶだいさんが発表。

写真と時計を組み合わせることによって色々な効果が出るんじゃないかってことで、
写真をバックに色々が時計（とか、時間のカウントなどが）出るようなものが計三つ。

オーソドックスな感じでしたが、キレイに作られてました。

みのんさん

ご本人さんによる解説記事

前々回くらいで使っていた、Marilenaのライブラリを使って、顔検出再び。

yugopさんの展覧会であった、顔をキャプチャして、写真の顔をキャプチャした顔にすり替える、
ってコンテンツの時計版、といった感じ。

５０人分くらいキャッシュがとれるようですが、一人でやってるとかなり虚しかったとのこと。

ノブヒデさん

ご本人さんによる解説記事

時計っぽくない時計を！がテーマ。
時計ってのはデジタル時計だと数字で、アナログ時計だと針があって、と、
結構フォーマットが決まってる、と。
それを全て取っ払って、時計っぽくないものを作りたくて作られたそうです。

なんだかぼーっと見てられるような感じで面白かったです。

パンツカムヨさん

ご本人さんによる解説記事

発表前の自己紹介スライドが凝ってました。
せんとくんとか面白い。

時計、ではないけれど、リズムマシーンを作られていました。
時間に関係して。

音に合わせて動くロボットのようなものの動きがコミカル（？）で面白かったです。

パンカムさんの細かいあしらいとかは結構すきです。

ちゃぶだいさん

ご本人さんによる解説記事

純タイムラインアニメーション、といった趣き。
最近変わったTwitterのアイコン、「honehoneちゃん」を使って、もじもじくんのような時計を。
0〜9までの数字をhonehoneちゃんが体を使って表現してくれるんですが、
その動きを全てタイムラインのアニメーションでされてました。

腕や足や顔といったパーツごとにかなり細かい動きをつけていて、
タイムラインがかなりすごいことになってました。

ちゃぶだいさん曰く、タイムラインの場合だと、時間をかければいいものが出来る！
階段を上るように完成度があがっていくのが明確に見えていい、とのこと。

スライドを駆使したタイムラインアニメーションのすすめ、が印象的でした。
なるほど。

ブログパーツになったよ！！

ここに貼付けてみます。

面白い、、。

カッシーさん

ご本人さんによる解説記事

デジタル時計。
テキストをビットマップに変換して回転させる練習につくってたコンテンツだとか。

別のswfを立ち上げてそこにテキストをうてば、時計の部分がその文字に変わります。
ローカルコネクション（っていったかな？）を使っているそうです。

別々のswf同士がリンクしてて面白い。

さくーしゃさん

ご本人さんによる解説記事

FlashPlayer10からの新機能、swfで音を生成する機能を使っての時計。

時計の数字をビットマップにして、それを音と波形としてFlashPlayerで再生。
そしてそれを音の波形を見れるソフトで見てみると、見事、数字になってるってもの。
（説明あってるのか？？）

元ネタはIAMASの卒展で発表されていた、sonicodeってのだそうです。（動画）

技術的にはなにがなんだか、って感じですけど、見た目と音のインパクトが面白い。
また、パラメータの調整をiPhoneで無線で操作されてました。

hoehoeさん

アナログ時計をデジタル時計に変換。

実際のアナログ時計をwebカムで写して、その針の傾きから何時かを取得、数字に変換するって感じのよう。
まだ作りかけの段階らしく、きちんと動くところが見れなかったのが残念でした。

Hough(ハフ）変換、なるものを使って計算しているようです。

CodeZineのサイトに解説記事が載っていて、そこにJavaのコードがあるので、
それをAS3に移植して、、、という手順だそうです。

slnsyndicateさん

スクリーンセーバー。
一秒ごとに音が鳴るんだけれど、一分ごとに２４時間全て音が違う、ってもの。
音を聞くだけで何時か、ってのが直感的にわかるように。

アナログ時計ってのはだいたいの針の間隔で、感覚的に何分くらいたった、あと何分だ、ってのがわかるので、
それを音でも出来ないか、ってのがそもそもの始まりなんだとか。

席をはずして帰ってくると音がかわっていて、それで時間がたったってのがわかる、みたいな。

その後

その後は、ケンタロウさんによる、FICCの話、や、さくーしゃさんのフィード消化をしながらネットサーフィン、と、
まったりとした感じでした。

二次会は「麹」へ。
すごいおしゃれなところでした。

二次会の方が内容的には濃かったような感じでした。
非常に有意義でためになる、また考えさせられる話が満載で、もうおなかがいっぱいです。
ケンタロウさんのパワーはすごいです。

次回は、Progressionの勉強会になる予定、だとか。
まだ未定なようですが。

そんな感じで、
皆さん、お疲れさまでしたー。

どうも、お久しぶりです。

ほんとに久々のエントリーで、気づけば最後のエントリーから一ヶ月どころか二ヶ月が過ぎよう
していますね、、、。
一度さぼりぐせがついてしまうととことん書かなくなってしまう質なので、気をつけていかねば。

さて。

この前の週末に行ってきた、参加してきたものをかるーくレポート。

NOW UPDATING...

まずは、東京と大阪で開催中の、
「NOW UPDATING...THA／中村勇吾のインタラクティブデザイン」へ。
大阪は心斎橋にある、DNP Galleryで開催中。

感想としては、やっぱりすごかったです。
ほとんどの作品をweb上で見た事があったけれど（ひとつ二つ知らないのがあった）、
あらためて大画面でいくつも並べられた中見るとまた違った気分で見れて面白い。

基本全てユーザの操作が可能なインタラクティブなのものなんだけど、
単に眺めているだけでも飽きずに見れてしまうところがすごいと思った。

ただし、trick7さんのところのレポートを読む限り、東京の方がやっぱり規模が大きかったみたい。
大阪はワンフロア、しかも結構小スペースな展示となっていました、、。

東京のほうのも行ってみたかったけど、さすがに、ね、、。
28日までだし。

ぷちてらこ

その後、すぐ近くの場所で開催されたぷちてらこへ。
今回はなんと、スペシャルゲストにカヤックの道家さんをお迎えしての開催。

ただし、テーマは何もなく、さらに、何かを作ってきた人もいない、という中（かくいう僕もなにも作ってない、、）
いつもに増してのぐだぐだ感全開な感じでしたw

けど、道家さんの話は面白かったし、みなさんが色々な質問を持ってきていて、それに強者達が答える、
という質問会形式に（突如）なったりしたので、中々に有意義でした。

以下、簡単にメモを箇条書き。

・ECMA Scriptの4が正式になくなっちゃうけど、どうなの？
結局どうなろうと、ツールに縛られる事はないんだから、どっちになってもあんま変わらんのでは？
（byさくーしゃさん）
参考：BeInteractive! [ECMAScript Harmony と ActionScript]
akihiro kamijo: ECMAScript Harmony/ES3.1 と ActionScript

・CAM Twistを使ってwebcamの映像を簡単にいじる

・シナチクさんの質問コーナー
Flex SDKを使ってFlashソフトなしにコンパイルする方法、とか。

・GYOROLの仕組みってどうなってるの？？
とりあえず、みんなで遊ぶ。ほんと、すごい。
みなさん色々推察しておられましたが、全くついていけませんでした、、。

・Flash作るときは一人？複数人？どっちがいい？
基本、結構一人で、って人が多かった印象。
複数人でやる場合には、呼び名の統一など、細かい仕様決めが必要。
swf単位でお互い被らないようにしてやれば結構楽？

などなど、今回は多岐にわたる貴重なお話でした。

関連リンク：
崖っぷちWEBデザイナーブログ | プチTERACO 8月23日土曜

PIECE OF PEACE

で、次の日。（日曜日）

前の日のぷちてらこの二次会の席で、ahchangさんが行ったという、レゴの世界遺産展の写真をiPhoneで見せてもらったのですが、
前から開催されてるのは知ってたけれど、その写真を見て見に行くことを決意。
入場料が300円と聞いたのも決め手w
梅田に行く用事もあったので一石二鳥。

で、感想としてはすごいの一言。
結構広い（天井も高い）ところでやっていて、思ったよりお客さんも多かった。
その後帰り道とかでビルとかを見ると、全部レゴに見えてしょうがなかったw

ちょっと調べてたら、結構古い話題だけど、こんなのもありました。
レゴの世界をパソコンでも体験できる：涙が出るほど役立つ ピリ辛ソフト
PCでレゴをシュミレートできるソフト。
レゴ公式のものらしく、アメリカ等からだと、作ったものをそのまま発注できたりするらしい。
（残念ながら日本は未対応のよう）

まとめ

色々見たり聞いたり、ほんと刺激を色々受けた週末でした。

もっと色々見に行ったり参加したりして、色々な方面の物事を吸収していきたいですね。

さてさて。
もうてらこで発表してからだいぶたってしまいましたが、
この無駄に長く解説してきたシリーズも今回で最後です。
前回、前々回からどうぞ。

って言っても、もうほとんど終わっているので、解説するところはほとんどないんですが、、。

FlickrとMarilena

前々回、一番最初で、Marilenaの使い方を説明しました。
その時に、ここに画像のURLを入れればいい、と書いたと思います。
それがここ。

で、as3flickrlibを使用して、Flickr上の画像のURLをゲット。
それがこれ。

もうおわかりのように、これでFlickrから取得してきたURLを、Marilenaに渡してやることが出来ます。
これによって、Flickrの画像を顔認識にかけてやることができます。

で、エロく

あとは、顔と判定されたポイント(Rectangleで返ってくる)をもとに、
顔からした、顔が半分切れたバストショットになるように調整。

調整した結果が、これ。

顔とバストショットの関係図

緑の枠が、Marilenaで取ってきた顔の範囲で、青の枠がそこから割り出した見せたい範囲。
割り出した、っても実際に目で確認しながら調整しただけ。
顔の範囲の下半分から始めて、顔の範囲の高さの三倍分の高さにしただけ。
式にするとこう。

結果的にたいていのものが上手くいったので、これでいいか、ってことで。
（顔認識自体が上手くいってないものは除いて）

まとめ

だいたい以上で終了。
自分のわかってる範囲で、説明しきったはずです。

最後にソースを一式アップしときます。
ほんと、既存のものをいじっただけ＆汚いソースですが、、、。

ソース(164.4Kbyte)

※動作させるには別途、以下が必要です。（ライブラリ）
Marilena
as3flickrlib
as3corelib
tweener

FlashCS3で、Main.asをドキュメントクラスに設定してお使い下さい。

・Marilenaシリーズ
Marilenaでアイドル(1)
Marilenaでアイドル(2)