link-log powered by fullsizeimage.inc

« April 2007 | メイン | June 2007 »

May 29, 2007

ミスチル好きにはたまらないかも。。olympus-wonder.com E GOES to WORLD

オリンパスのサイトでおもしろいことをやっていました。
ユーザーに写真をアップロードさせて、その写真をPVに
しちゃいますよっていうサイト。

下記、サイトからの引用です。
---------------------------------------------------------------------------
世界でたったひとつのミュージックビデオを紡ぐのは、
あなたがアップロードする写真です。Mr.Children「彩り」の歌詞から
あなたのイメージする写真を撮ってアップロードしてください。
アップロードされた中から著名クリエイターが写真を選び、
もうひとつのミュージックビデオを完成させていきます。
---------------------------------------------------------------------------

今、旬な宮崎あおいを起用したりとお金のかかったコンテンツです。
しかし、自分の写真がミスチルのPVになると考えると
ミスチルファンは鳥肌もんですね。

一応選考があるらしいのですが、
アップしてみる価値はあるかもしれません。

olympus-wonder.com E GOES to WORLD

Kawata ： 1:54 AM

アメリカの統計学的アート

アメリカの統計学をアートにしてしまったということです。
あんまりこのブログを関係ないけど、
おもしろかったので、ぜひ見てみてください。
chris jordanという人のフォトアートだそうです。

ちなみに下記は、
「毎日アメリカで使われなくなる携帯電話の数」

もっと見たい人は
Running the Numbers
An American Self-Portrait

chris jordan photography

Kawata ：12:51 AM

よくありがちなランダムな文字のアニメーション

とってもありがちなんですが、
結構使われているので、作ってみました。
ランダムで表示されている数字が
端から止まっていくアニメーションです。
アルファベットでやった方がかっこいいかな。。。

サンプル
 flaファイル

//STOPしたときの文字 var stoptxt:String = "14194147568979646232"; //文字列の長さ var txtLeng:Number = stoptxt.length; //文字がストップする間隔 var stopTime:Number = 10; //配列 stoptxtArray = new Array(); ramdamTxt = new Array(); //文字列を1文字ずつ配列に格納 for (i=0; i<txtLeng; i++) { stoptxtArray[i] = stoptxt.substr(i, 1); } //文字の動き var countNum:Number = 0; this.onEnterFrame = function() { for (i=0; i<txtLeng; i++) { if (countNum<i*stopTime) { ramdamTxt[i] = Math.floor(Math.random()*10); } else { ramdamTxt[i] = stoptxtArray[i]; } numbertxt.text = ramdamTxt.join(""); } countNum++; };

Kawata ： 1:02 PM

PositLogさわってみました

PositLog [ポジログ]

久々にすげぃと思ったのでさわってみました。
たしか昔Flashでこんなのありましたよね。

まだちょっとしかさわってないですけどスゴイ。
何がスゴイかはさわってみてください。
わかります。

ページの右下に出てるマップみたいなのがお気に入りです（そこかよ

tsuka ：10:55 AM

ユーザビリティーの悪さがメッセージ"Try Drugs"

デザインうんぬんよりも、
アイデアがおもしろかったので、紹介しておきます。

人間が壊れていく様子がうまく表現されてます。
日本のAC公共広告機構のCMみたいな感じですかね。

http://www.trydrugs.net/

Kawata ： 3:01 AM

話題になったサイトの制作裏話

インタラクティブの流儀ブランド価値を高めるネット広告クリエイティブ

ひさしぶりに本を読みました。
WEB制作をしている人にとって、
いつかはつくってみたいと思うサイトの
制作裏話的なものをまとめた本でした。

スラムダンク1億冊感謝広告（終了してます。）
資生堂
 アマナ「伝えるから伝わるへ」
ハインツ日本「逆さケチャップ」
赤城乳業「ガリガリ君」その他
 バスキュール
 富士フイルム「Forests Forever」

など、誰もが一度は目にしたことがあるサイトかもしれません。
製作者メンバーもそうそうたるメンバーで、
どういう過程でこのようなサイトが制作されたかという
制作サイドの思いが伝わってくるようで、
いい刺激になりました。
最近なまっていたので、
コンセプトをいかに考え・つくるか、会社に泊まりこんでまで制作、
納品後でさえ修正をする、そんなクリエイターとしてのスタンスは、
読んでいるだけでも興奮します。

3人の熱いスペシャリストがいれば、すごいものがつくれる。
そんな記述もありました。

Kawata ： 3:32 AM

デザインのためのプログラミング環境「Processing」とは？

この前、打ち合わせの帰りに「Processing」というのがあるよねっていう
話が出て、前から聞いてはいたけど、なにやらはっきりとわからなかったので、
簡単に調べてみました。

ちなみにはてなキーワードでは、
「Ben FryとCasey Reasによって始められたCGのためのプログラミング言語。」
となってました。
それだけじゃ、わからんよということで、
他にもいろいろ調べた結果です。

本家のProcessingサイトはこちら
サンプルなどもちらほら見ることができます。
ソースもダウンロードできる作品がいくつかあります。

日本でもちらほらこれらについて詳しく書いてあるサイトで出てきているみたいです。
プロセシング：数学からアートへのシンプル・ステップ
まずはここを読むとわかりやすい。

Processing入門
Macromedia FlashとJavaを用いたインタラクティブデザインの開発環境であるProcessingを
もちいた大学の講義の資料。こんなの授業でやるってうらやましすぎる。。
受けにいきたい。

Processsing.jp
プロセシングジャパンのページ。内容はあまりないですが、イベントなども
開かれているようです。5/11のやつ行ってみたかった。

Built with Processing —デザイン/アートのためのプログラミング入門
日本初のProcessing解説書だそうです。とりあえず、会社で買っておきます。
興味のある人はぜひ読んで遊んでみてください。

Kawata ： 4:41 PM

XPath4AS2クラスを利用した簡単なXMLの読み込み方

FLASHのactionscriptでXMLを読み込む際には、
firstChild.firstChild.childNodes
なんかを書いて、読み込んでいたのですが、
正直、すごいわかりにくいし、面倒くさい。

xfactorstudioというサイトで、
「XPath」で簡単にXMLを読み込めるクラスが配布されているようで、
試してみました。
ちなみにXpathというのは、下記で詳しく説明されてます。
XPathによるノードの指定法を理解する

このクラスを使うと、XMLの読み込みが超簡単、しかもわかりやすい。
すごい便利！！かも。。
下記、サンプルです。
（読み込んでいるのはこのブログXMLです。）
単純にブログのエントリだけ読み込んで表示してます。
import com.xfactorstudio.xml.xpath.*; var blogXml:XML = new XML(); blogXml.ignoreWhite = true; blogXml.onLoad = function(success:Boolean) { if (success) { XMLLoaded(); } else { trace("XMLのロードに失敗しました。"); } }; blogXml.load("../test.xml"); //------------------------------------- //XMLオブジェクトからデータを取り出す //------------------------------------- function XMLLoaded(){ //ノードから配列に値を格納 var titleAr:Array=XPath.selectNodes(blogXml,"blogentries/item/title/text()"); //配列の長さを取得 arrayNum=titleAr.length; //配列の中身を表示 for (i = 0; i < arrayNum; i++) { //エントリーのタイトルのインスタンス名を決定 entryBox = "entry" + i; //エントリーのタイトルを生成 _root.attachMovie("entryName", entryBox, i); _root[entryBox]._x = 20; _root[entryBox]._y = 20*i+10; _root[entryBox].entryName.text = titleAr[i]; } }
サンプル
 flaファイル
XPath4AS2はダウンロード後解凍してできたcomフォルダを、
flaファイルと同じフォルダにおいて作業してください。

ちなみに、こちらでもっと丁寧に解説してくださってます。
xfactorstudioのXPath4AS2の使い方
 XPath4AS2のダウンロードはこちら

Kawata ： 5:56 AM

AS基本編：actionscriptでマスクをかける時のcacheAsBitmap

actionscriptでマスクをかける時は
マスクをかける方のムービクリップとかけられる方のムービークリップの
両方にcacheAsBitmap = trueを設定します。
すると、ぼかしの部分やダイナミックテキストにも
きちんとマスクがかけられます。
サンプルのscriptは以下の通り //マウスに追随するマスクの動き onEnterFrame = function () { maskMC._x = maskMC._x+(_xmouse-maskMC._x)/8; maskMC._y = maskMC._y+(_ymouse-maskMC._y)/8; }; //マスクMCとフォトMCの双方にcacheAsBitmap=trueを設定 maskMC.cacheAsBitmap = true; photoMC.cacheAsBitmap = true; //マスクするMCのパス.setMask(引数にマスクの範囲MC); photoMC.setMask(maskMC);
サンプル
 flaファイル

Kawata ： 5:44 AM

IE7のclearfix

CSSで僕が今まで使っていたclearfixは以下の様なものでした。

--------------------------------------------------------
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear{display:inline-table;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */
--------------------------------------------------------

ところがこれだとIE7に対応できません。
むむっと思って調べてみたら以下の形で解消できるようです。

--------------------------------------------------------
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear{display:inline-table;zoom:1;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */
--------------------------------------------------------

赤字の所が追記されてます。既存のソースへの追記だけでできたので一安心。

この情報は「STOPN'LISTEN」のエントリーを参考にさせてもらいました。
▼【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
http://stopnlisten.no.land.to/2006/11/ie7clearfixclear.html

yamada ： 9:51 AM

配列の中の最大値、最小値を取り出す

actionscriptで配列から最大値や最小値、平均値を取り出します。
この前、XMLからデータを取り込んで、
グラフを生成する際に多用したので、
書いておきます。
グラフを作成するサンプルはヒマがあったら整理して
アップしておきます。

var myValue:Array = [1 , 2, 5, 3, 10, 99, 99, 95, 91]; var arrayNum:Number=myValue.length; //初期値 var numMax:Number=myValue[0]; var numMin:Number=myValue[0]; var numSum:Number=0; var numAv:Number; //最大値の算出 for (i=0; i<arrayNum; i++) { if (myValue[i] != "") { num = myValue[i]; //最大値 _root.numMax = Math.max(_root.numMax, num); //最小値 _root.numMin = Math.min(_root.numMin, num); //合計値 _root.numSum = _root.numSum+myValue[i]; //平均値 _root.numAv =_root.numSum / arrayNum; } }

サンプル
 flaファイル

Kawata ： 9:54 PM

動くQRコードでカンフー女子高生

モバイルも検索エンジンから
検索する時代になってきましたが、
まだまだQRコードからというのが多いですよね。

で、動くQRコードっていうのが開発されたらしい。
その名もムービーQR。

使用事例がおもしろかったので、
つい見てしまった。

「カンフー女子高生」

少しパンツが見えすぎていますが。。。

QRコードも進化していますね。
カラーコードやらもでてきていますし。

“動いて話す”QRコードが登場──i-ビジネスセンターとIT DeSignの「ムービーQRコード」

Kawata ： 3:21 AM

WEB開発者向けIEプラグイン

IE用のWEB開発者向けのアドオンツールが
リリースされたみたいです。
CSSのプロパティやら、HTMLの構造などを
ブラウザで見ながら修正できるというツール。

CSSでコーディングする際、IEに悩まされている人は、
超おおいと思います。
なので、重宝するかも。
FIREFOXだとたくさんあるんですが。。。

対応：Windows Server 2003; Windows Vista; Windows XP

ダウンロードはこちらから

FireFox用WEB開発用Add-ons：Web Developer

Kawata ： 5:05 PM

リキッドデザインで重宝するIEでmin-widthを使えるようにする方法

仕事で悩んでいるときに、教えてもらったところ、
非常に助かったので、みなさんにも。
リキッドデザインをCSSでコーディングしたとき、
困るのが、縮め過ぎると、レイアウトが崩れて意図しない形に
なってしまいます。
3段組が2段組になったりとか。。。

そんなとき、CSSのmax-withやmin-widthと回避できるわけですが、
残念なことにIE6では効かない！

というとき、このJSを使ってみると、一発解決！
素敵なライブラリです。

CSS minimum and maximum sizes

使い方は簡単！

<head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>hoge</title> <script type="text/javascript" src="minmax.js"></script> <style type="text/css">  </style> </head>
という具合にJSを読み込んで、class:minmaxを指定するだけです。
便利です。

詳しい解説はこちら minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ

Kawata ： 1:59 AM

ぐるなびAPI

http://japan.cnet.com/news/media/story/0,2000056023,20348463,00.htm

ぐるなびのAPIが公開されたそうです。
これでまた新しいサービスが色々とでてきそうですね。

yamada ： 3:31 PM

配列の要素をランダムに並び替える方法

Flashのスライドショーでxmlファイルから読み込んだ写真をランダムに表示したいという依頼があり、それまでのスライドショーは配列に格納した画像のパスを先頭から順番に読み込んでいたので作りを少し修正しました。

配列の要素をランダムに抽出したいと思った時にパッと思いつくのがMath.random()を使ったやり方だと思いますが、それだと同じ要素を繰り返し抽出されてしまう場合があります。
重複なく要素を取り出したい場合は以下のスクリプトを使ってみてください

var i = array_name.length;//array_nameというのは任意に作成された配列名です
while (i--) {
var j = Math.floor(Math.random()*(i+1));
var t = array_name[i];
array_name[i] = array_name[j];
array_name[j] = t;
}

考え方としては配列からランダムに要素を抜き出すのではなく、
配列を生成した後にその配列をランダムに並び替える、という感じです。
なので画像を先頭から読み込む処理自体は変更していません。

割といろんなところで使える処理だと思います。

このエントリーの情報はほぼ野中さんの「非公式テクニカルノート一覧」の転用です。
もっと詳しく知りたい方は以下のURLへどうぞ。
▼配列を偏りなくランダムに並替える

yamada ：10:04 AM

フォームの必須項目チェックのJavascriptを生成してくれるサイト

これは便利だなぁ。
たまにJSでチェックかけるのあまりないかもしれませんが、
意外と書くの面倒だったりするので、参考まで。

エラーチェックまでできたら、もっといいんですが。
必須項目チェックJavascript自動生成ツール

Kawata ： 3:56 AM

オープンソースのSBM（ソーシャルブックマック）Pigg

PHPの勉強にと思ってオープンソースのアプリケーションを
探していたら、楽しそうなのを見つけました。
はてブやdel.icio.usを使っている人も多いと思いますが、
これを自分たちでできたら、おもしろいかも。
SNSだと結構ありますが、
社内用のソーシャルブックマークというのもいいかもしれません。
今度、遊んでみようと思います。

Pligg 日本語版
 Piggのデモサイト

Kawata ： 2:07 AM

Flashのアクションをアクセス解析

先日のCSSniteでのBASEMENT FACTORYさんのセミナーで
「Flash上でのユーザーのアクションを取得＆解析している」
と聞いて、ふとどうやっているんだろうと思ったので、
調べてみました。

Google Analyticsで意外と簡単にできるらしい。
知らんかった。。

on (release) { getURL("javascript:urchinTracker('eventid');"); }

eventidの部分は自分の好きな値をいれればOKです。
イベントがとれれば、どこにでも設定できるので、
かなり細かいとこまで、トラックできるそうです。

詳しくはfladdict.netさんに書いてあります。（2005年に・・・）
AjaxもFlashもトラックできる！？　Google Analyticsの脅威
 Google Analyticsを制御するクラスを作ってみたよ

Kawata ： 3:58 AM

ポケットサイズのオリジナル地図帳が作れるサービス

機能に引き続き、地図関係のサービス。
最近遠出することが多くて、地図を見る機会がおおいので、
こういうサービスに興味深々です。

-----引用-----
１枚の紙からミニ地図帳を作るALPSLAB printを公開
ALPSLABでは自社の持つベクトル地図描画の技術を応用し、１枚のＰＤＦに複数の地図を面付けし、まるで小さな本のようなミニ地図帳が作成できる「ALPSLABprint」を公開しました。
--------------

これいいかも。
オリジナルの地図帳が簡単につくれてしまいます。
イベントとかショップさんなんかが重宝すると思います。

PDF自体を加工してしまえば、表紙もオリジナルにできてしまうので、
コストをかけずにオリジナルMAPがつくりたいときなんてどうでしょう。