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

This movie requires Flash Player 9

こんばんわ。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の宣言部分には次のように書かれています。

XML:
  1. <rss version="2.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:kuler="http://kuler.adobe.com/kuler/API/rss/" xmlns:rss="http://blogs.law.harvard.edu/tech/rss">

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

XML:
  1. <kuler:swatch>
  2.   <kuler:swatchHexColor>F0F0F2</kuler:swatchHexColor>
  3.   <kuler:swatchColorMode>rgb</kuler:swatchColorMode>
  4.   <kuler:swatchChannel1>0.941176</kuler:swatchChannel1>
  5.   <kuler:swatchChannel2>0.941176</kuler:swatchChannel2>
  6.   <kuler:swatchChannel3>0.94902</kuler:swatchChannel3>
  7.   <kuler:swatchChannel4>0.0</kuler:swatchChannel4>
  8.   <kuler:swatchIndex>0</kuler:swatchIndex>
  9. </kuler:swatch>

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

Actionscript:
  1. var kuler:Namespace = xml.namespace("kuler");

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

Actionscript:
  1. for each(var swatch:XML in items.kuler::themeItem[0].kuler::themeSwatches[0].kuler::swatch) {
  2.     var colorStr:String = swatch.kuler::swatchHexColor[0];
  3.     arr.push(Number("0x" + colorStr));
  4. }

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

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

まとめ

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

とりあえず、今回のコードをアップしておきます。
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


About this entry