2BLOG

ファッションブランド beautiful people のサイトを作りました。
2010.10.18に東京ミッドタウンで行われたJapan Fashion Week in TOKYOのインスタレーションショーの告知及びレポートサイトです。

beautiful people
http://www.beautiful-people.jp
ArtDirection / Design : Munehiro Machida.nssgraphica
Flash & HTML : KOSUKE,Nakamura.nipx
Photo : Motofumi Sannomiya, Fumihito Katamura, Takahiro Motonami

アートディレクションは今年何かとよく絡ませてもらっている、nssgraphica 町田さん。サイトに掲載されているだけでも400枚以上ある写真は3人のカメラマンがイベント当日に撮影しています。僕はFlashを担当させていただきました。

企画段階から絡ませていただいていて一般参加型のショーということでWEBではイベント当日までのカウントダウンを表示しつつtwitterのタイムラインを表示。
イベント翌日に写真を公開する運用方法などイベントを盛り上げるアイデアを出し合って進めたプロジェクトです。撮影から公開までうまくいって良かったですね。皆様おつかれさまでした。

beautiful peopleを着たモデルさん。イベント中は自由に撮影出来ました。カメラを向けると笑ってくれる。

詳細写真にディープリンクを設置し、twitterかメールでシェア出来るようにしています。

告知ページはFlashを使わずAjaxで構築しました。

frocessing使ってみました。面白いです。

東京ミッドタウンでJapan Fashion Week in TOKYOというファッションイベントが行われています。ファッションブランドbeautiful peopleのイベントが本日開催だったのですが、イベントのサイトをやらせてもらっていることもあってnssgraphicaの町田氏と観に行ってきました。

このショーはミッドタウンのいたるところにbeautiful peopleの新作を纏ったモデルさんがポーズをとっているというもの。
なのでモデルさんのいるエリアは、月曜日の昼間にもかかわらず大勢の人だかりが出来ていました。そしてイベント中は一般の人でもモデルさんを撮影できる。これって中々経験出来ないですよね。

何枚か写真を撮ってきましたがこんな感じです。

どうでしょう？服やモデルが良いせいかとっても素敵な写真に…。
素人でもカメラを向けているとちゃんと笑ってくれるモデルさんのサービス精神に感激。
ちょうど晴れの天気が暖かい春先のような気候で服もすごく景色と調和して素敵でした。

beautiful peopleの公式サイトのほうでイベントに参加された方のtwitterが盛り上がっています。興味がある方は是非チェックしてみてください。

Flashからアップロードする方法を調べたのでまとめ。

ファイルリファレンスでファイルのアップロードする。
ローカルファイルをアップロードするならこの方法。

AS

var file:FileReference	= new FileReference();	//ファイルリファレンス
var req:URLRequest	= new URLRequest( "upload_filereference.php" );	//リクエスト先CGI
file.browse();	//ファイルを選択
file.addEventListener(Event.SELECT, function( e:Event ):void{
	file.upload( req );	//選択後アップロード
});

PHP

<?php
$name	= $_FILES[ 'Filedata' ]['name'];
$tmp	= $_FILES[ 'Filedata' ]['tmp_name'];
move_uploaded_file( $tmp, "./$name" );
?>

BASE64にエンコードしてアップロードする。
ダイナミックに生成した画像データをアップロードする例。

AS

//画像データ
var bmp:BitmapData	= new BitmapData( 100,100,false,0x000000 );
//PNGにエンコード
var pngEncorder:PNGEncoder	= new PNGEncoder();
//そのバイトデータ
var bytes:ByteArray	= pngEncorder.encode( bmp );
//Base64エンコード
var base64Encorder:Base64Encoder = new Base64Encoder();
base64Encorder.encodeBytes( bytes );
var base64:String	= base64Encorder.toString();
 
//リクエスト
var vars:URLVariables= new URLVariables();
vars.base64 = base64;
var req:URLRequest	= new URLRequest( "upload_base64.php" );
req.method	= URLRequestMethod.POST;
req.data	= vars;
 
//送信
var loader:URLLoader	= new URLLoader();
loader.load( req );

PHP

<?php
$bas = $_POST['base64'];		//BASE64エンコードテキストを受け取る
$bin = base64_decode( $bas );	//デコード
 
//ファイルに書き出す
$fp = fopen( "./xxx.png", "w" );
fwrite( $fp, $bin );
fclose( $fp );
?>

さらにバイナリのままアップロードする方法があった。

AS

//画像データ
var bmp:BitmapData	= new BitmapData( 100,100,false,0x000000 );
//PNGにエンコード
var pngEncorder:PNGEncoder	= new PNGEncoder();
//そのバイトデータ
var bytes:ByteArray	= pngEncorder.encode( bmp );
 
//リクエスト
var req:URLRequest	= new URLRequest( "upload_binary.php" );
//application/octet-streamはContent-Typeヘッダにおいてバイナリ形式である場合に指定されるサブタイプ
req.contentType	= "application/octet-stream";
req.method	= URLRequestMethod.POST;
req.data	= bytes;
 
//送信
var loader:URLLoader	= new URLLoader();
loader.load( req );

PHP

<?php
/*POST受信時にphp://inputで生データを取得できる*/
$bin= file_get_contents( "php://input" );	//バイナリを受け取る
//ファイルに書き出す
$fp = fopen( "./xxx.png", "w" );
fwrite($fp, $bin);
fclose($fp);
?>

パブーにて、ニピクセルオリジナル絵本、てんとちゃんの家さがし ePub版を販売しています。
このブログに掲載中の同作品に、新カットを描き加えた新しいてんとちゃん。秋の夜長にお子さんとご一緒に読んでいただけたら幸いです。

作品：てんとちゃんの家さがし
作者：Yoco,Nakamura. nipx

今年の。

Y型2気筒エンジン
ArtDirection / Design : Hiroki Miura.mopstudio
CreativeDirection / Flash : KOSUKE,Nakamura.nipx

昨年同様、モップスタジオの三浦氏と一緒に作った作品。
三浦氏を焼き肉定食で買収し、あーでもない、こーでもないと進めた作品でして、僕的にはBox2Dを使ったり、モーフィングさせたりと意欲的に作ったものの、見事に選から漏れている訳で…。スミマセン、ミウラサン。

結果は残念でしたが、このままお蔵入りにしてしまうのもあまりにもったいないので、今回は読み物的にこの作品が出来るまでの道のりを紹介したいと思います。

当初、今回作ろうとした案はY型2気筒エンジンではありませんでした。
元々の案は「Nedelka」、通称「テュラテュラ案」。

僕が自信満々だったこの案についてはもはや説明をしませんが、打ち合わせの時点でとりあえずの大ラフなFlashが出来ていました。しかしこの案、ウチのYさん始め、三浦氏にもいまいち不評。ですが、僕のゴリ押しもあって、ひとまず打ち合わせた内容でコンテを描いてみようという話になりました。

で、まぁ思うところもあったのでしょう。
三浦氏が修正と脚色を加えて戻してきてくれたのが次のコンテです。

三浦氏が戻してきたコンテは、ラフのFlashの前後に新しい展開を加えたものです。

こういう時に、これが良くない、これは違うと駄目だしだけをする人がいますが、僕の経験からすると、はっきり言って大抵そういう人は何も生み出しません。

今回はこのコンテの前半から今回のY型2気筒エンジン案の原型が出来ました。
コンテを見てから、僕があらためて三浦氏に戻したのが次のラフ案。

このラフについては、二人で「おおっ、いいんじゃねーか！」と盛り上がります。
そして、やがて「テュラテュラ案」はやめて「Y型2気筒エンジン案」を作ることに決定します。

三浦氏にデザイン・イラストをお願いして、僕は実装方法の検討を進めます。
しばらくしてあがってきたデザインは、まるで設計図のような精巧なもの。（汗

これを組み上げていった訳ですが、その間にも様々な検討がありました。

例えば、煙を入れてみたり、

ハンマー使いませんか？とか、

他にも音やコピーワークなんかは、特に検討を重ねて決まったものです。そんな紆余曲折へて最終的な形になっています。

といった流れで打ち合わせから完成まで、お互い普段の仕事をしながら2週間くらい時間を使っているでしょうか。残念な結果ですけど、出来には満足してますし作業は面白かったですね。

一緒に仕事をさせていただくパートナーの方の中でも、三浦氏とはもう10年くらいの付き合いです。毎回焦りますが、今回の上のデザインも全てIllustratorでパスを使って描かれています（！）。そんなの他で見たことありません。Flashで使うにしても何にしても、パスで出来ているとビットマップのそれより何かと便利なことが多いのに異論は無いでしょう。パスをビットマップにするのは容易ですが逆は難しいですから。

ということで、ミウラサン。今回もありがとうございました。
これに懲りずにまたお付き合いくださいね。また次の機会に一緒にがんばりましょう！

nipx Flash Wallpaper for Mobile Phoneですが、これまで壁紙作品は全てDL-MARKETからのダウンロードでしたがサイト内での直接ダウンロードに変更しました。なので、これからは登録しなくてもダウンロード出来るようになりました。

有料作品はパスワードキーをpaypalで購入するように変更しました。手数料や最低設定料金の違いから、これまでの200円から105円（税込）と大幅に値下げしてます。

DL-MARKETからは撤退。何がやだってこともなかったけど、広告スペースのバナーに気になるものがあったり…。しょうがないですけど、壁紙はおろかいろいろなファイルの中に一緒に掲載されちゃいますので。そのあたりは避けたいなと。
それにpaypalのノウハウ情報やブログプラグインなんかが増えてきて使いやすくなってきましたしね。

ということで、最近更新出来ていないですけど。さらにスマートフォン全盛の時代ですけど。これはこれで地道にやっていくのでよろしくお願いします。