月: 2011年3月

アフォーダンスな話-Real Affordance(実際のアフォーダンス)とPerceived Affordance(知覚されたアフォーダンス)

なるほど納得な「アフォーダンス」の話。

3年か4年くらい前、ダニエル・ノーマンの著書「誰の為のデザイン」が周りのWEB制作者の間でやたら持ち上げられたことがあって。
確かWEB標準の流れの話とFLASHとJSなんかがガサガサしてて、どこへいくんだ、これからのWEBってなことで、やたらみんなUIとかIAの話してましたね。
確かに、なんかいっぱいありすぎて落ち着かないって言うか。複雑なITスキル、どれもこれもを追いかけるってのは実際個人のマンパワーでは不可能で、そうなってくると、なんちゅうか、どれが流行るんか(=>お金になるんか)どれが標準になるんか(=>仕事になるんか)教えてくれ決めてくれ的なね。なんかそ~ゆーんですよ、はい。

そいでWEB制作者どうしで、UIの話するときに、ちょっとこれ、読まないとね、みたいなちっちゃい流行になったのが、「誰の為のデザイン」て本だったわけなんですけども。

んで、そこで認知学の話から、アフォーダンスって言葉(概念)が頭よさげな感じで、わささ~と広がっていきました。あの頃、みんなやたらと “あふぉーだんす” “あふぉーだんす” 言うてましたね。私も。はい。

ところが、最近読ませていただいたブログで、そもそもダニエル・ノーマンの言うアフォーダンスってのは、実際のアフォーダンスって概念とまちがってんよ、って話が出てきました。

おえ~???なんと!
今まで信じていたものが、ガラガラって崩れていきました。
そして、なるほど。

ダニエル・ノーマンの本読んで、そかそか、と納得していた概念が、根本的に正反対だったらしいんです。
で、デザイン関係のエライ人たちにも混同して考えている人が結構いるらしく、この概念をちゃんと理解して、この人は、アフォーダンスって言葉にどういう定義をして、使ってるのかな?って考えながら話を聞かないと、ちんぷんかんぷんってことになります。

正しいアフォーダンスは、、、
「アフォーダンスというのは、生態心理学者ギブソンが提案した、「行為者とモノとの物理的な行為の関係性」を示す造語。
「○が□に×できるという関係」をカタカナで言ったもの、つまり客観的な事実であるということ。

ところが、認知学者ダニエル・ノーマンが「誰の為のデザイン」で提唱したアフォーダンスっていうのは、、、
「○が□に×できそう(に見える/思える)という関係」、つまり主観的な認知や知覚なんですね。

正しいオリジナルのアフォーダンスの概念で言うと、
○ イスに座れる(座れなさそうに見えても、座りたくなくても、実際の事実として「座れる」) →このイスには、「座れる」というアフォーダンスが存在する
× イスに座れそう(実際に小さすぎたり壊れてたりして、座れなくても、ある人が「座れる」と認識する) →このイスには「座れる」というアフォーダンスが存在しない(=事実関係としては座れないから。)
てことになるわけです。
ところが、ダニエル・ノーマンのいうアフォーダンスでいうと、、
○ そのイスが、イスとして人から「座れる」ものとして認識される →このイスには、「座れる」(正しくは座れるものだと認識される)というアフォーダンスが存在する
× そのイスが、(例えば変な形状で。実際に座れるのかどうかは別として)人から「座れる」物として認識されない →このイスには、「座れる」(正しくは座れるものだと認識される)というアフォーダンスが存在しない
となります。

なぁんか、なんとなく、わかります?
前者は、そのことそのものが「事実なのかそうでないのか」を言っているのに対して、後者は、事実関係は別として、そう人から認識されるかどうか、つまり「そのように見えるかどうか」ということを主観点にしています。

で、ダニエル・ノーマンさんは、1999年に、「誰の為のデザイン」で言及されているアフォーダンスは全て、ギブソンの言うアフォーダンスではない、と訂正を行い、ギブソンのいうアフォーダンスを実際のアフォーダンス(Real Affordance)、自らの著書内にあるアフォーダンスは、「知覚されたアフォーダンス(Perceived Affordance)」と読んでくれ、と訂正しています。
てことです。

は~。なんか、自分の中で、遅ればせながら、整理ついた。

ネタ元はこちらです。↓↓↓
http://www.fladdict.net/blog-jp/archives/2005/06/post_86.php
有益な情報をありがとうございました!

Papervision3Dを使ってみるためのイロイロ備忘録その1

Papervision3Dとは、Flash(ActionScript)で3D描画を行うASの拡張ライブラリ。

つまり、このパッケージをダウンロードしてきて自身で作成しているFLASHのASコードに連携させることで、複雑なASコードを最初から書かなくても、用意されているクラスを利用して、複雑な動作や表現ができるってことです。ちなみにPV3D(Papervision3D)は2DであるFLASH内で擬似3D表現を可能にするソースコードのパッケージです。

他にも代替ライブラリや違う表現機能を持ったライブラリが色々オープンソースでも出ているけど、PV3Dは、人気があって有名で、AR(Augmented Reality)的なイロイロを作成するときに、便利なFLARtoolKitというSaqooshaさんのソースパッケージと連動させて使うことができるので(ネットでサンプルとかチュートリアルとか豊富)これを使ってイロイロやってみることにする。

できることイロイロ。
フラッシュ内で3D的なものが作れる。
例えば、プリミティブな図形(球や立方体や円柱、飛行機など)をスクリプト制御で動的に生成してテクスチャをつけるとか、それを見ている3D空間の擬似カメラの視点や視野角を調整するとか、さらにマウスアクションに連動させて、そういうオブジェクトを自由に動かすとか、3Dハイパーなテキストを動的に出すとか、ま~、3Dアニメーションで簡単にやりたいようなフラッシュ的な面白い物をイロイロ作れるってことでしょかね。

どういう風に機能するかっていうと。
まずこちらでいろんな動きとかを作っていくAS3(フラッシュのアクションスクリプトVer.3)を書いていき、そのコードに書いた内容を表示するための空のFLAファイル(ドキュメントルートに、その実行するASを設定しておく)を用意しておきます。
んっで、そのASのコードから、PV3Dのクラス(うんっと。要は、いろんな動きとかオブジェクトを作成するコードのグループ化した塊ね。“四角形生成~”とか“3Dカメラを置く”とか“90度回す”とかそういうのを実現するコードのグループ。通じます?説明悪くてごめんなさい;)を呼び出してあげますと、そのイロイロな複雑なことを実行するコードグループはPV3Dのパッケージの中にグループごとに入っているので、こちらで作成したASコードには、「PV3Dの1番コードを実行。」って感じで書いとけば、そのグループに含まれる複雑な処理は全部を書かなくても自動的にPV3Dの中身が呼び出されて処理してくれる、というわけです。
私たちは、PV3Dでは、「PV3Dの1番コードを実行。」っていうのを、なんて書いてあげればいいかだけを考えればよくなるんですね。

ちなみに、アクションスクリプトはバージョン色々あって、2も使えますけど、動作の安定性と表示処理の速さとか色々な都合を考えると、PV3Dを扱うときには、3にするのがベストだそうです。3Dレンダリングってマシンに結構な負荷かけますから。ココはさくっとその通りAS3使いましょう。

そいじゃ。

動かすために、PV3Dをどういう風にローカルマシンに配置してやればいいかとかどうやってDLするかとか、その辺ですけど。

PV3Dは、ローカルマシンの好きな場所に一式を保存して、フラッシュの編集メニュー→環境設定からActionScriptのタブの中のActionScript3設定を開いて、「ソースパス:」という項目で+ボタンをクリック。さらにフォルダのマークの参照ボタンをクリックして、ダウンロードしてきたPV3Dの「\papervision3d\as3\trunk\src」という階層を選択してOKしましょう。
これで、いつでも任意のAS3コードからPV3Dのアクションスクリプトを参照して利用できるようになりました。
たまたま1台のテストマシーンで使ってみたいとか、設定が面倒だから、あんまり考えたくない、みたいな時には、DLしてきたPV3Dの「\papervision3d\as3\trunk\src」の中にある、「org」フォルダと「nochump」フォルダを、これから作成・編集するASファイルとFLAファイルを保存した同じところにコピーしておけば、上記の設定をしなくてもPV3Dを利用できます。

どっちでもいいです。使いやすいほうで。いっぱい作るなら設定しちゃったほうがバージョンアップとかも同一管理でできるから便利だし、チュートリアルを試すくらいなら、ファイルフォルダをコピペしてきて使うってのもわかりやすいだろうし。

さて。ちょっと戻りますが、上記を踏まえて、PV3DをDLします。
PV3Dは、ZIPファイルとSWCファイルでDLすることもできますが、開発コードのアップグレードが結構頻繁に行われていますので、そういう差分までを管理しているSubversionシステムから管理用のアプリケーションを使ってDLするのがいいと思います。常に新しいのは、Subversionシステムにアップロードされているソースコードのほうです。

アーカイブをDLする場合は、ココから最新をどうぞ。
http://code.google.com/p/papervision3d/downloads/list

SubversionシステムからDLする場合は、SubversionクライアントソフトであるTortoiseSVNをDLして利用してください。(他にも、Subversionクライアントソフトはあります。WINで一番ポピュラーなのがこれなだけです)

簡単にSubversionの取得のやり方。
1)TortoiseSVNをマシンにインストールしておく。
2)PV3Dを保存したいディレクトリにフォルダを作って右クリック。すると、右クリックのメニューに「SVN checkout」と言うメニュー項目ができていると思うので、そのメニューをクリックして選択。
3)表示されるCHECKOUTのウインドウで「URL of repository:」のフォームの中に、「http://papervision3d.googlecode.com/svn/trunk/」と入力してOKをクリック。
4)横長の別ウインドウが出てきて、ダウンロードが始まります。完了したら、OKボタンをクリックして終了。
これで、PV3Dの最新コード全てがDLされますが、AS3を使うなら、必要なのは、\as3\trunk\の中身だけなので、それだけをDLしてもかまいません。

これで一応、フラッシュのアクションスクリプトで、PV3Dのクラスが使えるようになりました。

今日のところはこれでおしまい。次は基本機能とか、イロイロ。

フラッシュでできる楽しい表現「Papervision3D」

http://www.smashingmagazine.com/2009/08/10/discovering-papervision3d-best-design-practices-and-tutorials/

久しぶりすぎる更新で、見慣れた人には、すでに古いネタですね;

いまさらですが、PV3D。フラッシュで3D的な表現を可能にするソースパッケージです。
最近注目のAR(augmented reality)とかその手の流れの一環で再び注目を集めているようです。

上記のサイトでは、チュートリアルやステキな作例を紹介しています。

通販サイトとか企業サイトとか、業務で制作するようなWEBサイトで使うことって全然無いので、この手の情報はもっぱら趣味の道。

でも、消えたり浮かんだりしながら、サイバー世界に生きる人たちってやっぱりCGっぽいCGの表現って結構好き、ですよね。私も好きです。

昔と違うのは、3DCGなんかでできることって表現は以外とそんなに大きくは変わらないのに、浮かび上がってくる度にやり方が簡単に少ないツールや費用の掛からない方法でできるようになってくるってことですかね?