11/25/2008

[&] Processing 1.0



Download \ Processing 1.0

Processing 1.0 がリリースされました。
Ben と Casey, おめでとう!

2004年の 0069 ALPHA からすると相当感慨深い。
さてと、1.0 はこれから何を処理 (Processing) するんだろう。

アートとエンジニアリング
デザインとプログラミング

これらを繋ぐ媒介者としての Processing.

デザインのためのプログラミング言語として Processing があるなら、
デザイニングを単なる「感覚」じゃなくて、
数値とアルゴリズムで指し示すことができるような気がしてならない。
黄金律みたいのをもっと体系化したもの。
フィールド調査しなくても、ユーザビリティが計れるような仕組みとかね。

masui さん監訳の新刊も要チェック。帯の文言がクスッと笑えます。

11/23/2008

[&] Making Do and Getting By




Core77 - Parallel Universes: Making Do and Getting By Thoughtless Acts (Mapping the quotidian from two perspectives)

Twitter 界隈の話題で思い出したので紹介。
Kevin Henry 氏の "Making Do and Getting By"
なんとなく訳せば「やりくり」とか「うまいことやる」だろうか。

本来の意味、本来の役目とは違うところで、
十分に役立って、役目を果たしているものたち。
数々の写真から、一瞬でその役目を読み取れるのも
本質を表しているからこそ。

街の中を注意深く見渡せば、
なんかもっと素敵なことがいっぱいありそうな気がしてきた。
それに街の中だけじゃなくて、Web の世界の中にもあるなきっと。

手抜きとか、ズルとかじゃなくて「うまいことやろう」をもっと見つけよう。

"Making Do and Getting By" つながりで、オマケに Adobe Think Tank の
[ Making Do and Getting By: Software and Design ] もお薦め。

11/22/2008

[&] FONTPARK 2.0


FONTPARK 2.0 | MORISAWA

フォント(文字)だけで、こんなにも描けるんだ。
Fontpark が blog parts を引き連れて再登場。

Fontpark の凄さは、完成した「絵」だけでなく、
それを描いている間の「迷い」さえも、
作品として描き出していることなのかもしれない。

そこに至るまでの過程と、
そこにたどり着くまでに回り道した数々の出来事。
いま世の中にある数々の名画も、
それを描いている過程が観られたら、
どんなに素晴らしいのだろうか。
それとも、過程を観ていないからこそ素晴らしいのだろうか。

一種、職人芸的な「過程」を記録することに、
何かヒントがあるような気がしてならない。

11/21/2008

[&] Urban Computing #02




イベント受付 | イベント情報 | パナソニックセンター東京 | Panasonic

11月28日(金)PM2〜5
好評だった第一回につづき、
第二回アーバンコンピューティングシンポジウムを開催します。

今回のテーマは

「都市とデザイン」
  世界中の都市で開催されるデザインイベントや、
  参加型のデザインプロジェクトに関して

「都市とプログラミング」
  建築、都市空間とプログラミングとの関係性(パターンとか)、
  都市をコンパイルする City Compiler、
  都市をデバッグする CityDebugger の話しなど。

「都市とウェブ」
  関心空間の前田さんをお呼びして、
  ウェブの世界に広がる集合知的な都市空間と、
  ウェブの仕組みによって拡張される都市や身体のコミュニケーション。

といった感じで、対談形式で進めます。
どういった話しになるかは、こうご期待。
登壇者間では、綿密?な打ち合わせ済みです。

きっとなにかしらアイデアや、
ヒントを分けてあげられるのではないかと思っています。

要登録。参加費無料ですので、どうぞよろしく。

あと、希望者は未来の家電三昧の
パナソニック・イーユーハウス」の見学ができます〜

11/20/2008

[&] KOKUYO WORK@EARTH




2009 KOKUYO FAIR | コクヨ

twitter 界隈で話題の、コクヨのオープンオフィスを見てきた。
製品を紹介するとともに、ショールーム的に全フロアが公開されていました。

一番の話題は 5F(屋上階)にある「お外オフィス」←勝手に命名。

照明の削減、冷暖房の削減らしいんだけど、今の季節は寒すぎた。
春とか、秋とか、イイ季節なら、
開放感あって、のんびりできそう ←仕事場です。

オープンカフェっぽい雰囲気ながらも、
ミーティングする感じや、机に向かう風景が感じ取れた。
この開放感と、仕事とどう関係していくのかが興味深い。
アイデアは浮かびそうだけど、はたして集中して仕事できるのか?

オフィス家具の会社が考えるのはここまで?
さらにテクノロジーが後押しできるのはなんだろう?

 ■太陽光の下でも見やすいノートパソコンの液晶画面
 ■液晶画面だけ遮光できるカバー
 ■数分後の降雨を警報してくれる、超近接天気予報
 ■太陽の光から時間を知ることのできる時計
 ■ワイヤレスで給電できる仕組み
 ■メンテナンスを極力減らすことのできる家具素材
 ■今誰が居るのかを知ることのできる仕組み(遭遇の度合いを増やせる)
 ■植物が育つスピードと、プロジェクトの何かを結びつけて考える
 ■天気が良い・悪いによって、それに反映する室内の何か。

散文的になって、まとまらない。

こういう時こそ、外に出ようということか。

11/07/2008

[&] Web Directions East 08 (Mike Migurski)


stamen design | big ideas worth pursuing

Web Directions East 08
-----------------------------
Mike Migurski (Stamen Design)
http://stamen.com/
http://mike.teczno.com/

adaptive path の Jeffrey Veen が来られなくなって
急遽代役の Stamen Design の Mike Migurski.
Digg Labs の Visualization をやったとこ! 僕的にはとってもうれしい。
--------------
Visualization A Web Of Data
地図デザイン、情報のビジュアライゼーションが中心の Stamen 社
Digg Labs の Visualization。
オークランドの犯罪地図サイト。
ロンドンオリッピックの Web デザインにも参画。

Stamen Design の CTO
オンライン Web の情報可視化。地図。大きなデータの可視化。
4つの事例を紹介。

大統領選挙に至るまでの、情報を活用する手法。
電子投票の結果。カートグラフ。人口に応じて州の形をゆがめたもの。
どれだけ票をとったのかが、わかりやすく分かる。
ミシガン大学の教授が、値に応じて、赤〜青、グラデーションで表している。

内部の容量計画 Flickr の計画。
キャパシティの問題に直面した時。
データを並べ替えて分かりやすいように。
ビジネス用語の分類。36日がキャパシティ。

538.com 野球の統計サイト。
http://www.fivethirtyeight.com/
予備選挙の各大会ごとにどういった投票行動があったのかをまとめたもの。
有権者に対して話を聞くときにどういう行動が予想されるのか。
データをクラスタ化して、予測する。速報に利用したい。


ニューヨークタイムズ。
Casualties or War
http://www.nytimes.com/ref/us/20061228_3000FACES_TAB2.html
イラク戦争における犠牲者数。分類に応じてまとめたもの。
ユーザが指定した様々な切り口でデータを見ることができる。
大きな戦闘があった時など。
最新の情報をまとめて更新することに価値がある。

■ライブ、広範囲、深いところを突いているか。
Life:最新の情報を持っていないといけない。
 日々刻々と変わる情報をとらえる。
Vast:どれくらい広範囲なのかが重要。Google も広くカバーしている。
Deep :背後にある情報を引き出せるかどうか。
オーバーレイから、なじみのある情報を深く掘り下げて、探していけるかどうか。

プロジェクトの紹介

moveon.org カンファレンスコールを置き換えていくもの。
http://moveon.org/
選挙のためのカンファレンスコールの仕組み。
費用がかかって、満足度が低かったので、あたらしい こころみ。
Web ベースの通話ツール、ログインすると参加人数がわかる。
通常の電話会議にはない仕組みづくり。
流動性高く、細かく分析できる。カンファレンスコールとしては最適。
ビジュアルな情報でユーザに情報が戻ってくる。フィードバックツールとして使える。

アルバータ州の統計情報地図。

Digg Labs
http://labs.digg.com/

2006年いろいろなアプリケーションを提供してみた。
他の人がどんなストーリーを面白いかがわかる。
Web2.0 の digg が何なのか良くわかるたたき台。
スクリーンセーバーのようにずっと見ていられるストーリーランキング。
突然人気がでてきたニュースとかが分かる。

digg swarm
ユーザーがストーリーを点々とする。新しいものが加わっていく。
何が web サイトで起こっているのかが分かる可視化
ライブで全体像が見られるのが素晴らしい。
deep に掘り下げることもできる。

VAST:

不動産業者の trulia
http://hindsight.trulia.com/
自分の近所で何が起こっているのか?住宅の価値。価格。

どうやって情報を提供するのかが一番大変な部分。
プロジェクトの最初の部分で探求を行なう。
どういったかたちで表現したいのか。

まずはアニメーションから始めた。
位置を示すようなものは無い。日付に区切って可視化。
郊外から市街地へ移動してきている。
動きがあると直感的に理解できる。
Web が用いられる前に災害復旧用や、軍事用に特殊な地図が作られた。

trulia snapshot
http://snapshot.trulia.com/
個々の住宅にたいして細かな情報を提示するもの。
物件の写真を確認できる。
膨大なデータの提示の仕方を様々に試す。
小さい穴から世界をのぞいているものを、いかに分かりやすく恒久的に表現できるのか?
ユーザーの挙動も考えた上で、見せ方を考える。

SFMOMA ArtScoep
http://sfmoma.org/pages/artscope
カタログ一覧
検索して探し当てて、ぴったりとするものを見つけ出す。
google maps がやっているタイルに分けて大きな画像を扱う方法と同じものを活用。
虫眼鏡のように大量の画像の中から拡大することができる。
直感的に使える。
コレクション全体が時系列で並んでいる。

{modest maps}
http://modestmaps.com/
MS の Silverlight で行なっているものと同様。

oakland crimespotting
http://oakland.crimespotting.org/
犯罪率の高いところ、警察の使っている地図情報
参照基準を当てはめる。犯罪から何日たっているのかなど。

Native To A Web of Data / Tom Coates 2006
http://www.plasticbag.org/files/native/
定期的にデータを提供することによって、データの信頼度があがる。
再利用を視野に入れた形で設計する必要がある。
PDF で出版するよりも、メールとWeb ベースでやり取りできる仕組み。
データフックとして追加したのは一覧を毎日更新する仕組み。
NON API API がある。XML remix をしなくてもいいように。
特定の犯罪が空間的だけではなく、時間的に広がっていること。

Thanks!

[&] Web Directions East 08 (Doug Schepers)


Reinventing Fire

Web Directions East 08
-----------------------------
Doug Schepers - Standards based graphics in the browser
http://schepers.cc/

SVG and Canvas : Standards based open graphics

Google Map の中で SVGが使われている。
VML(Vector Markup Language)
W3C の HTML5 の中で扱われている。
canvas はベクトルを使ってラスターを作成している。

ラスターとベクターの違い。
ラスターはコンテンツの再利用に適している。
SVG と Canvas の違い。
リテインドモード SVG は DOM に保存されている。

みんな角丸が好き(笑)
SVG/canvasの中でスクリプトを使うこともできる。
どうやって SVGを作るのか。
無料の InkScape, Illustorator などがつかえる。

Wikipedia は画像/図表を SVG でアップロードすることを推奨している。
Lively Kernel
http://research.sun.com/projects/lively/
Processing.js
http://ejohn.org/blog/processingjs/
SMIL の活用。

SVG の場合、要素が増えるほど遅くなる。
Firefox, WebKit (Safari, Chrome), Opera で使える。IE が例外。
プラグインを使えば IEの中でも使える。
iPhone でも SVGが使える。
多くの携帯電話 (au/KDDI) などで使える。マップ用途。

SVGは構造化された文章に向いている。
ローカライゼーションに向いている。
フックが可能、APIが用意されている。
SMILでタイムラインを合わせることができる。
JavaScript が駆使できれば、様々なことができる。

SVG in CSS
将来、混在させることができるようになる。

SVG in text/html and XHTML
簡単な使い方は XHTML の中に object/embed で埋め込む。
SVG が直接文章の中で使えるように W3Cと作業を進めている。

Common Open Graphics
- Common API for SVG and Canvas : 同じ API で同じ画像が作れる
- SVG , Canvas の統合、シームレスに。

schepers@w3.org

SVG 1.2 で音や動画が扱える。Opera でサポートされている。
JIS など日本でも標準規格化されれば広まっていくと考える。

[&] Web Directions East 08 (Andy Budd)


Andy Budd::Blogography

Web Directions East 08
-----------------------------
Andy Budd - Guerilla User Testing
http://www.andybudd.com/
著作 CSS Mastery

鉄道チケット自販機のユーザビリティ
コンピュータの処理能力が高まってきたために
簡単に使えるものではなくなってきている。
多くの新しいものがでるにつれ、
ユーザは理解して使うためのフラストレーションがたまる。
機械のせいにしたり、自分が呪ったりする。
ユーザが間違った操作をおこさないような作りにする。

マニュアル自体が読まれなくなっている。
その代わりに、今まで使った共通のパターン、使用方法をもとに操作する。
Web を活用する一つに、検索/探索がある。
ボタンをでたらめに押してもテレビは壊れない。

Web は、さまざまなことに意識をそらされながら使っている。
実際の見方は飛ばし読みをしている。

ユーザビリティテスト
ユーザがこいう風な使い方をするだろうと、推測して作っていく。

ゲーム Halo3 のユーザビリティテスト。
microsoft は調査を行なった。素人でも面白いものに。
600人を対象 3000時間のユーザビリティテストを行なった。
結果的には 3億ドルの新たな売り上げにつながった。
古典的なユーザビリティテスト(マジックミラーと、ビデオ録画)
大量ユーザテスト(30人〜40人)フォーカスグループテスト
ゲームの経験が浅い人は、弾薬がすぐ無くなって殺されてしまう。
射程距離に無い的に向かって打つため。赤緑表示で射程が分かるように。
手榴弾を投げても自分自身がやられてしまう。
地図を使って、どの部分でユーザが死んでいるのかを調査。
どのレベルのユーザがどの箇所で死んだかを調査。

ペーパープロトタイピング
早い段階で、ユーザビリティーの問題を抽出できる。安価に。

従来はミラーとビデオで観察。プロの司会者で経験が豊富。
チーム全体がプロジェクトに参加できる。
ユーザビリティーの承認を得るには説得力がある。
マイナスの要素もある。時間がかかりすぎる。
対象者はたくさん必要だし、リクルートに時間がかかる。費用もかかる。
統計を見て、定量的なデータのみを見がち。
もっと直接観察して、問題が何かを知りたい。

お金がない場合もできないわけじゃない。
ローコストゲリラテスト。素晴らしいラボは要らない。どこでもできる。
手軽。準備が簡単。質的にもいい。問題の検出にも有効。
すぐにアプリケーションにフィードバックできる。
正式なラボを使うと、報告が出てくるまでに時間がかかる。

ユーザビリティーテストは、アプリケーションを良くするために使うべき。
ネガティブ要素は、プロジェクトに精通しているので偏見があるかもしれない。
客観性が必要。
統計的な数字よりも、何が問題かを直視すること。

問題は何かを見る。
キーポイント、大きな声で考えていることを説明しながら使ってもらう。
どの操作をやっているのかを話ながら
意見ではなく、思考を知りたいから。
ユーザがやっていることを直接観察する。
気に入ったかどうかではなく何を考えているのか?
何が起きてほしいのか?起きたことは想定内かのか?

一日にテストすると、あり得ないと思っていた問題点が洗い出される。
幸運ならば、数ヶ月後に気づく。
フラストレーションを感じているので教えてもらえない場合が多い。
対象者のリクルート:オンラインテストも可能。
けっこうすぐ見つかる。
テスト対象者は 5〜6人が 1時間やってもらえれば、一日分になる。
その数で 8割の問題は洗い出せる。多くても 10人で十分。

キーポイントは、いいタスクを選ぶこと。
よくありがちな要望。ものを購入するサイトなら、実際に購入するところまで。
SNS なら登録、プロフィール情報の入力など、
時間が少ないなら重要なところから、問題のありそうなところからテストする。

タスクデザインが重要。
テストの対象者に具体的に何をするのかを言ってはいけない。
ストーリー、物語だけを指示する。やる気がでる方法。
答えを出すわけではなく、目的だけを指示する。

テストがおわったら、情報をなるべく速くとりこむ。
動画も音声も取り込む。翌日プレイバックしてレビューを行なう。
デザイナーにすぐに聞けた方がいい。
一人目ででた大きいテストを、すぐにフィクスして、二人目のテスト。
テストの間にすぐに改善、実装していく。変更が良かったのか確認できる。

silverback
http://silverbackapp.com/
被験者はコンピュータの前に座ってテストを行なう。
クリックの様子を全て保存できる。
どこでも手軽にテストが簡単に行なえる!

[&] Web Directions East 08 (Jeremy Keith)


Adactio: Jeremy Keith

Web Directions East 08
-----------------------------
Jeremy keith- Bulletproof Ajax
http://adactio.com/ clearleft社所属。

Ajax サイトのデザインの課題に関して。

Ajax とは?JavaScript でかっこいい効果があれば、すべて Ajax?
それは必ずしも Ajax とは限らない DOM Scripting かもしれない。
サーバーとコミュニケーションするが、ページ全体が更新されないで実現する。
ページの一部分のみが更新されるもの。スピードがあり、速いという感覚を与える。

frames
iframe
Flash もページ全体が更新されないことでは同じ
XMLHttpRequest

XMLHttpRequest は Microsoft から発祥。 IE5 から。1999年。
なぜ急に話題になるようになったのか?
Mozilla Safari Opera 主要なブラウザが XMLHttpRequest をサポート。
実質上デファクト。W3C 標準化の途上。

synchronous 。Webのモデルを変えた。
あたかも速いような幻想を得る。

browser <<>> XHR <<>> server
display <<>> <<>> storage
processing <<>> <<>>

クライアント側に処理を持ってこない。サーバー上でコントロールする。
たくさんのブラウザがあると、たくさんの作り込みを行なわなければいけない。

progressive enhancement の考え方。
content が一番大切。web ページの contents は何なのか?
structure 構成を与える。あるコンテンツをどう見せたいのか?
コンテンツがいかに振る舞うのか?

behavior -- JavaScript
presentation -- CSS
structure -- HTML
content

あるテクノロジーが OFFにされている場合でもコンテンツを伝えられる。
Ajax が導入されて、progressive enhancement を気にしなくて良いと言われるが、
リクエストとともに考える。

Hijax
通常の Web サイトを作る。FORM は Web の誕生からあったので、
それを使うべき。
リンクのクリック、フォームの入力の情報を解析。送り出す。
Ajax が使えない場合。JavaScript が使えなくても普通の使い方ができる。
Ajax のサイトであり、Ajax で無いサイトを同時に実現できる。

deceptively rich client
モジューラ化されたアーキテクチャであること。
Ajax を使うこと、サーバの仕組みを最初から考えておくこと。
ただ、最後に Ajax を実装する。JavaScript が OFF の時にも動くように。

pattern recognition
よくある事例から考えることができる。
ほんの一部だけ変化しているところがあれば、そこが Ajax / Hijax を使うところ。
sign up の箇所、ユーザが待ち時間を減らせるところ。
add to cart の箇所、非同期型のやりとりを実現。ページ全体が更新されるのを待たなくていい。
rate this の箇所、バックグラウンドで行なっている方が良い。
add a comment の箇所、変わったのは追加された部分だけ。
search results?、検索の結果ページで使うのは適切でない。
pagination? 

google maps や Gmail だけでなく、
web の細かいところの使い勝手を良くできる。
あまりやりすぎないように。検索結果など。
いつ使うのが妥当なのか?全ページ更新をどこで使うのが適切か?

feedback
何かが起きたのを知らせなければいけない場合。
今何が起きているのか、何が起きたのか、
全てのデザインでフィードバックは重要。
イギリスの信号、振り返らないと青信号が分からない。

conventions
status indicators
砂時計、プログレスバー
ユーザーを安心させる。
yellow fade (37 signals) ページの一部分だけ更新していることが分かるように。
drag'n'drop もともとデスクトップで使っているから分かりやすい?と思われがち。
dnd 以外に操作の選択肢が無いと利用が困難。

beyond the browser
ページの部分的なところを更新すると、履歴の意味が無くなる。
the back button : バックボタンがきかない
bookmarking: ブックマークがしにくい。

user test
統計を見る。誰を対象にしているのか?
ユーザテストを行なわないといけない。

adactio.com/

[&] Web Directions East 08 (Dan Cederholm)


SimpleBits

Web Directions East 08
-----------------------------
Dan Cederholm - bulletproof Webdesign
あらゆるデバイスに対応できる Web デザインの考え方。

SimpleBits http://simplebits.com/
書籍:Bulletproof Web Design
コードをできるだけ軽くして、標準に沿ったデザインを。

bulletproof A-U
SimpleBits は手作業で Web を作る。クラフトマンシップ。
職人気質はバーモント州生まれに由来している。
バーモント産は他の地域のものよりも 10%品質が高い。
デザインは人間の手作業が背後に必ずある。

家具に例えることができる。実際に使ってみないとわからない。
Webもいろいろなシナリオで使ってみないとわからない。
事例から職人的作業のいかされかたを説明。
複雑なことをやらなくても柔軟に変えていけること。

架空のコーヒーショップの例。
icedorhot.com

A. メタ情報入りのリンク
すべての行がクリックできる。
長いタイトルの場合、リンクテキストが重ならないように。
float を使って、リンクテキストが重ならない。
逆方向の float で端があう。

B. border-radius
 角の所を丸めてある。
 CSS3 の推奨で border-radius の値を設定。
 ブラウザあった使い方 -webkit-border-radius, -moz-border-radius
 ブラウザ特定の CSS がある場合 master.css, enriched.css に分ける。
 Firefox2 ではサポートしていない場合もゆるせる。

C. Color-Opacity
マウスオーバーした時に表示される要素。
 background-color : rgba(0,0,0,.7);
 IE では使えないので、background-color を重ねておく。
 デザインを検討する際には RGBa を使って検討。

D. 全てのブラウザで同じ表示がされないといけないのか? =NO
 サンダンス映画祭のサイト。
 それぞれのブラウザでそれなりに見える。
 foamee.
 http://foamee.com/
 可読性には影響しない。

E. Easy Clearing
 自動的に clearfix する。
 クリアしたいパラメータのリストを作る。
 やり方としては良くない。
 group エレメントとして表現した方がいい。
IE8 はまだ対応していない。
ページ内の要素を入れ替えてもお互いに影響を受けないのがいい。

F. Framework
マスタースタイルシートを IE5,6,7,8 用に
リセットファイルの使い方。
ブラウザが適用するフロートスタイルのリセットに使う。
MTV.com の例。margin 0: padding:0 が多数使われている。

G. グリッドを柔軟に使おう
 Grid layout Using EMs
デザインのバックグラウンドを考える。
グリッド:簡単な計画性と知性に基づいてすっきりした形にするのがグリッドシステム。
提示の仕方で、人々の記憶にとどまる見せ方。グリッドシステムの方が記憶に残る。
手作業を少なくして、表現できるところを多くする。
EMs は弾力性のあるレイアウトのこと。
IKEAのサイトの例
 Emベースのレイアウトで気に入っているのは、作業的にフレキシビリティがある。
 EM ベースのレイアウトをグリッドで、計算が簡単になる。
 フォントサイズを同じエレメントに適応してはいけない。
 グリッドからはみ出してしまう場合がある。
 最大幅も柔軟性があるレイアウトにしなければいけない。
 ブラウザ自身の幅からはみ出してしまう場合がある時のレイアウトを考える。
 モジュール単位に考えてコーディングしていく。
 Xscope というツールがグリッドライン確認に便利に使える。
 http://iconfactory.com/software/xscope

H. 垂直グリッド
デザイナーが考えたものをレイアウトすると思ったとおりにならない場合がある。
 デザインコンセプトがコーディングに反映していない。
 垂直グリッドは、モジュールごとに定義していく。

I. IE8
 フォントサイズを指定していても IEで無視される。
 em を使ってサイズをあわせる。
 PAGE ZOOM レイアウト全体のズームアウト。
 
J. jQuery
仕様が分かりやすい。便利で使いやすい。

K. Kitty

L. .last
アイテムリストがあって、特定のリスティングをする。
正しいものを最後の直前にもってくる。
サポートされていないブラウザでの用法。

M
N
O
P
Q
R

S. Slide
 silverback
 http://silverbackapp.com/
ブラウザをリサイズすると 3D スライディング効果がある。

T. Text blending RGBa
 wilsonminer.com
 ブラックフォントが少し背景を透過させている。ブレンドされている。

U. U=You
 いつから使える?
 アナタのサイトの user stats を調べる。
 アクセス履歴のブラウザの種類を見て、使うかどうか考える。

[&] Web Directions East 08 (Eric Meyer)


Web Directions East

Web Directions East 08
-----------------------------
// wde08 の tag で flickr に写真があがってくるそう。
-----------------------------
Eric Meyer - state of the web

web 2008 の状態について。
ブラウザの視点。クライアント側の視点から。
これからの方向性。特に開発の方向性に関して。

Google Chrome が登場。コミックブックで紹介された。
いろいろな意味で既存のブラウザである。
WebKit のブラウザ。標準をサポートしている。実質的には Safari と同じ。
Google があえてWebKit を使うのが興味深い。
Gecko を使うのが普通。Mobile WebKit があるから。

IE8 は ACID2 テストを通っている。
標準作りには時間がかかっている。
HTML5 がまとめられるのは 2022年?!
Canvas がそう。棒グラフや円グラフが作れる。
自分用の描画ツールを作ることもできる。

typeface.js は比較的新しい canvas の hack.
Flash におけるフォントの使い方と同じ。
Web では 7つのフォントしか使えないことを打破。
たくさんのフォントを使うのが良いかどうかとは別のこと。
プラグイン無し、ブラウザだけで実現できる。

プログラミング言語としては JavaScript は成熟してきている。
リスと魚の組み合わせ。Squeal Fish?
TraceMonkey, SpiderMonkey の改良版。パフォーマンスの改善。
ブラウザの中のエンジンであること。
ユーザエクスペリエンスを直接変化させる。

かならずしもブラウザの見た目ではなく、JSエンジンがパワフルかどうかが重要。
IE6 で CSS の実装を JS を使って改善しようとしていた。
IE7 (css2; auto;)
http://dean.edwards.name/IE7/
ネイティブにその機能があるかのように使える。
そこからデザイナーが望んでいる機能がわかった。

jQuery からシズルが登場した。
typeface.js
http://typeface.neocracy.org/

Bluff:シンプルなグラフを追加することができる。
http://bluff.jcoglan.com/
raphael:キャンパス上に円を書く。
http://raphaeljs.com/
280Slides : Objective-CをJavaScript で実現。
http://280slides.com/
Processing.js : Processing の JavaScript 版。
http://ejohn.org/blog/processingjs/

こういった拡張は JavaScript エンジンの進化に依存している。
2年前なら遅すぎてできなかったこと。

Google Chrome
JavaScript エンジンのパフォーマンスが格段にあがっている。
進化してきた方向が、アプリケーション開発にとっては必ずしも有効ではない。
もっと Web アプリケーションの開発が容易になるように。
コミックブックの紹介で、なぜやっているのかがよくわかる。

Chrome の名前そのものも面白い。
実際にアプリケーションを Chrome のように物を包むことができるものなのだ。
Chrome は Web ブラウザを包み込む環境であるということ。
これからは RIA はブラウザだけで動く。
いろいろな実験の場である。android も含めて。

iPhone に対してどう進んでいくのかが興味深い。
まだまだ最も良い Mobile Web は開拓の余地がある。
blackbery とも Treo とも違うものである。
どちらが良いとは決していえない。皆が違うものを求めている。
mobile safari は webkit . android の中で活用するかもしれない。
どちらが勝つかということではなく、試すことができるのが重要。

何十億人ものユーザが初めての Web として使う人達。
デスクトップは使わず、唯一の Web アクセス方法である人も多い。
Web のアクセスをあらゆる人に展開したい。
Foundation では TimBerners Lee のもともとのビジョンを実現するもの。
どんなデバイスでも対応するのが目標。

JavaScript エンジンの性能、進歩、機能を使って、
標準のサポートが強化されていることが 2008年の Web を示すもの。
技術的にも社会的にも進歩している。
Web のエッセンスは変化そのもの。
変化は良いものである。悪いものもあるけれど。

THE STATE OF THE WEB

11/05/2008

[&] UNIQLOCK 4



UNIQLOCK

ちょっと巷のブログ達に出遅れた感があるのだが、
UNIQLOCK 冬バージョンの UNIQLOCK 4 が登場。
後を追って iPhone 用のアプリや、ScreenSaver も登場。

世界中の広告賞を総なめだったり、
広告なのに、商品の売り上げは伸びているの?とか言われたり、
いろいろあるみたいだけど、
観ていて心地いいから、それでいいじゃん。と。
CreativeCommons にも言えることだけど、
「広まる」ことによる圧倒的なパワーを得ることだって出来るんだ。

振り付けは [ air:man ] という3人組のコレオグラファー。
掲げている言葉が...

「とてつもなく格好良いモノを創る」
「3倍のプレゼン能力があります」
「動くものなら何でも振付けます!! 」

...と素敵さ爆発。

ダンスに詳しい人なら、
[ Rosas ] の [ Rosas danst Rosas ] を思い浮かべるんだろうけど、
その(初期?の)4人バージョンにはグッとくる。

それぞれ独立して動いているダンサーが 4人分合わさった時の脈動感。
誰かを見て動くと、それに影響されるから、
ぞれぞれの自律した意識と、かすかに感じる周囲のリズムとの同調。

真似とかそういう指摘じゃなくって、
みんなが素敵だと感じる数々のクリエイティブは
とてつもない積み重ねの上に、
ちょっとだけ何かが加わったモノなんだと
再認識した映像なのでした。



DVD/VHS 買おうと思ったら、とてつもなく高いよ(泣)



[ ローザス・ダンス・ローザス ]