2007年2月アーカイブ

第３回ライブコーディングに行ってきました。

普段見ることのできない他の人のコーディングを見れるというイベント。

どうしても、都合が空かず、最後のほうに遅れての参加だったんですが、20人以上が町屋の2階に集まって、つっこみを入れたり、解説がおもしろく、かなり楽しい雰囲気でした。

何がしかの、技を披露しないといけないとGreasemonkeyスクリプト作りにチャレンジしたのですが、頭が真っ白になってしまい。結局、まったく完成に至らず。全然精進が足りません(^^;

会場からいただいたお題「mixiをRubyっぽくするGreasemonkeyスクリプト」。
さっきできあがりました。

• rubyixi.user.js
• その他のGreasemonkeyスクリプト

ポイントはfaviconも変更してるところです。
画像はマウスオーバーすると表示します。
これで職場でmixi見てても大丈夫？


イベントの後、他の参加者の方と主催者の方といっしょに、ラーメン食べに行き、さらにまた別の町屋にて、酒飲みモードに入っていろんな話ができておもしろかったー。
最後に残った人がコードを書き始めたので、僕も続きを書いて、この記事を書いてます。

ライブコーディング、とても刺激受けたイベントでした。
主催者の方々お疲れ様でした！
また、ぜひ参加してみたいです＞今度は時間に間に合うように

最近、ひしひしとインターフェース重要という予感がする。

そんなことは昔から言われてるし、わかりきったことじゃないか？
今さらなに言ってんだと思われるかもしれないが。


思った理由をメモ。


DS、Wiiの革新点

インターフェースの変更、扱いやすさ、敷居をさげ、間口を広げ、それを生かしたソフトを出すことで、ユーザー層を拡大することに成功しつつある。
インターフェースが破壊的イノベーションにつながった例。


あちら側とこちら側のデバイドを越えるものと埋めるもの

という感じのテーマがまわりの友人と話していて最近、よく出てくる。

ネットにも詳しく、普段学生に接する仕事をしているある友人。
彼の意見をまとめると。

• 学生や若い世代でもmixiぐらいしかやらない層が相当多い。(学生だと5割ぐらい)
• ネットを使っている人と使っていない人との差がありすぎる。若い人ほどその傾向が顕著。
• RSSリーダーや、ソーシャルブックマーク、googleラボのサービスの良さを力説しても振り向いてくれる層は限られている。
• この状態はネットがもっと洗練されて飛躍的に便利にならない限り半永久的。
• ただ大手マスメディアの眼の届かないところで行われるネットでの論議というのは、それが正論であればひろがるし、必ずネットを越えて波及する。
• それは結局口コミだったり、本だったりという超アナログ的方法だったりするところが面白い。

2つの世界のデバイドが相当長く残るだろうということは、「Ｗｅｂ進化論」を読んでなくても、現場の鋭い人には感じられてるんだなぁと。
そしてネットが多くの人が使われるようになるにはインターフェースが鍵なのは明らかだとも。
でも、そこは長らく大事だと言われながら、なかなか日の当たらなかった場所のような気がする。
でも、最近変わってきた気がするんだよなぁ。

そんなことをぐだぐだ考えながら、iPhoneについて記事を書くために情報を集めていたら、その中にドンピシャな文章を見つけた。


なぜ我々はiPhoneに興奮させられるのか - 日経エレクトロニクス - Tech-On!
http://techon.nikkeibp.co.jp/article/TOPCOL/20070123/126729/

　もう一つの要因が，製品の使いやすさを伝達できるメディアの台頭と考えている。ユーザー・インタフェースの専門家たちがいつも嘆いていたのは，製品の使いやすさは往々にして使ってみて初めて分かることだった（関連記事2）。使いやすさは，製品の物理的な形状や操作メニューの構成，機能を表す言葉遣いやユーザーの習熟度など，極めて多岐にわたる要素が絡み合って醸し出される感覚である。これを，時間の制約が大きい放送番組や，誌面に限りがある雑誌といった既存のマスメディアで伝えることは相当困難だ。勢い製品の売り手側も，性能や新機能といった，数字や宣伝文句で表しやすい特徴を強調しがちだった。つまりこれまでの消費者は，使い勝手についてほとんど手掛かりがないまま製品を購入してきたわけである。

　この状況は今や過去の話である。インターネットの普及は，既存のマスメディアの多くの制約を取り払った。何より現在の消費者は，自分で製品を購入する前に，既に製品を使っている人の意見を幅広く聞くことができる。価格.comなどの商品比較サイトは，購入を検討中の消費者の質問と，実際に製品を持つユーザーの回答で溢れている。WWWサイトにはマスメディアにあった時間や誌面の制約がないため，どんな些細な情報にも掲載の余地があり，しかも検索可能な形で蓄積していく。消費者自身が立ち上げるブログの存在も大きい。開発者が想像しなかった利用法をユーザーがブログで発信し，製品のヒットにつながる例も，今では珍しくなくなった（詳細は1/29号の特集記事に）。これらの情報の流通基盤が，製品の使いやすさの伝達に役立つことは確実である。

この人に日経BPの”なぜシリーズ”で「インターフェースはなぜ今、重要なのか？」という本を書いて欲しい。無理か。10年後には話が変わってそうだ。


その他

• Webアプリケーションのインターフェースの可能性。
• キーボード、マウス以外の一般に使われうるパソコンの新しい入力デバイスの可能性。

情報革命と言われる中で、情報の流通の仕方の変化だけではなく、それを人間が扱うインターフェースの変化が求められているし、それを後押しする条件も生まれてきているのではないか？

だから、今、インターフェース重要。



なので


デザイニング・インターフェース
―パターンによる実践的インタラクションデザイン

とりあえず、この本を買って読んでみようと思う。

他にもインターフェースと言えば、「Apple Human Interface Guidelines」が有名だけど、絶版になり復刊するも現在ではプレミアがついて手に入らない状態。

英語が読める人なら現在のMac OS Xの状況を反映させた「IndieHIG」が公開されている。

Main Page - IndieHIG
http://indiehig.com/wiki/Main_Page

だれか和訳してorz
読める人にはたぶんオススメ。

IE7で透過PNGがサポートされて、以前からもありましたが、透過PNGをIE5.5、6でも表示させるJSライブラリがいくつか出ています。

これらのライブラリは、IE独自のAlphaImageLoaderフィルターを利用して擬似的に透過PNG表示をさせています。

でも、このAlphaImageLoaderフィルターには、癖があって、それで以前にハマったことがあります。


実例

IE6(5.5)で見てください。
吹き出しの中のLingerへのリンクをクリックして移動することができますか？

原因

原因がさっぱりわからなかったので、ライブラリの中身を見て、AlphaImageLoaderで検索したところ以下の情報が。


PNG ちょっと裏技 (2)
http://www.minc.ne.jp/~konda/new/png/urawaza02.html

アルファイメージローダーを使用した要素(タグ)の内側にハイパーリンクを使う場合

　ブロック要素(例えばDIV)に対してアルファイメージローダーを使用すると、構造の内部(インライン)のハイパーリンクが押せなくなる(無効になる)場合が有ります。また、BODY要素(タグ)でも同様の現象が発生します。

な、なんだってーーー!!


結局、その時は吹き出し内のリンクがひとつに限定されていたので、divタグにonclickでページ移動するコードを書くという強引な方法で回避しました。

この現象は、背景にAlphaImageLoaderフィルターで透過PNGを表示させ、そのPNGの非透明部分に重なる形でリンクを表示させた場合に起きるようです。

なので、JSライブラリを使って透過PNGを背景に表示する場合は、中にリンクが含まれる可能性がないか注意する必要があります。

追記：
透過PNGの罠の解決法-とあるWEBクリエイターのblog
http://web.kankodo.net/2007/02/09-142542.html<

解決方法をいろいろ模索してみたのですが、AlphaImageLoaderフィルターを指定している要素内のa要素のposition属性にrelativeを指定すれば解決できます。

な、なん（ry


おお、たしかに！
ありがとうございますm(__)m

さっそく問題が出ていたページの修正を試みたのですが、こちらは現象変わらず。

調べてみると、どうやら親要素にposition属性(static以外)が指定されているとリンク無効になるようです。

透過PNGを適用していたのが地図上の吹き出しで、position:absoluteで配置せざるを得ないのが、悩みどころ。

こちらは、やはりGoogle Mapsの吹き出しのように分割するのがまっとうかも。