2009.07.07

スターリーワークス3周年!

20090707-anniversary.gif

おかげさまで株式会社STARRYWORKSは2009年7月7日で設立3周年を迎えます。

若輩者ばかりの会社ですが、これまで続けて来れたのもひとえに皆様のご支援の賜でございます。
これからも人との巡り会いを大切にし、心を込めたモノ作りができるよう、社員一同精進して参ります。 今後ともどうぞ宜しくお願い致します。

インスパイアされる映像 〜ハッピーな気分になれる編(3本)〜

今日は見ていてハッピーな気分になれるLove&Peaceな雰囲気を持った映像を3つ紹介します。

Skank - One Song -

stashで見つけた大好きな映像。短いけど、なんか懐かしくてあったかい雰囲気を持った映像です。loboというデザイン/アニメーションスタジオが制作したらしいです。

SOUR - 日々の音色 -

SOURという日本のバンドの曲。世界中の人がウェブカメラを使ってひとつのPVを作っています。PVのアイデアも音楽も本当に素敵です。ウェブサイトとmixiで世界中から応募したファンが協力してウェブカメラで撮影したそうです。

Bjork - It's oh so quiet. -

ミュージカル風の構成で、とにかく明るくて楽しい映像。 Spike Jonesが手がけたミュージックビデオの中で一番好きな作品です。

2009.05.18

珍しいものを作ることについての考察

自社のスタッフに向けて分かっておいてほしい自分の考えをメモ。

一般的なものには必ず理由がある。

ティッシュの箱の形、はさみの形、封筒の形、テニスボールの色、Webサイトのレイアウトなど、たくさんの先人たちの知恵の結晶が「一般的」なものとして定着している。

また、一般的になって、たくさんの人がそれを「一般的」と認識することの利点もある。 例えばWebサイトの場合、下線の付いた青い文字にすることで、説明しなくてもほとんどの人がその文字をリンクだと認識することができる。
水道の蛇口も木ねじも、電球も、コンロのつまみもみんな時計回りにまわすと閉めることができるから、一般的にまわすものは時計回りが閉まる方向だという認識が生まれる。

デザインの仕事をやっていると新しいもの、珍しいものが良いという考えを持っているディレクターやデザイナーやクライアントに出会うことが多いし、自分の中にもそういった考えがある。

新しいものは新鮮だし、珍しいものは興味を持たれやすい。

Webサイトは紙媒体の広告と違って、見て読むだけじゃなく、「使う」ことや、繰り返し見ることが前提になる場合が多々ある。
そういった場合に、一般的じゃないものを作るときは、一般的なものの色・形・大きさ・配置・順番などがなぜそうなのか、その理由、その利点をちゃんと把握して、一般的じゃないものを作る危険性を考える必要がある。
そういったサイトを作るうえで目指すところは、今は珍しくても未来の「一般的」になり得るようなものだと考えている。

安易に新しい技術や珍しい手法を取り入れても、ただ珍しいだけでは、「使う」ことを前提においたプロジェクトの場合、ただの一発屋で終わってしまう。

そのためには深く考える必要があるし、常日頃アンテナを張り巡らして、たくさんのアイデアを一歩引いた目線で選別する目を養う必要がある。 たくさんの人が考え抜いたうえで今の「一般的」があるわけだから、それ以上のものを作るのはとても大変なことだと思うが、全てのものに無限の改良の余地があると思う。
MUJI AWARDの過去の受賞作品を見ていると本当にそう思わされる。

もの作りというコミュニケーションを通してユーザのことを想う愛が必要だと思う。
未来の「一般的」になり得るようなものをまだ一般的じゃないうちにやると「珍しい」というオマケがついてくるから、インパクトがあると思われたり、新しいと思われたり、いろいろとラッキー。
そういうもの作りを目指したいと思う。

たぶんプロダクトデザインの世界では当たり前のことなんだろう。

でも、短期間のキャンペーンサイトとか一回見てくれたらそれでいいものは一発屋で全然OKだと思うし、ユーザビリティーとかアクセシビリティーとか頭の固いこと言ってると面白いもの、インパクトのあるものは作れないと思うし、そういうのは大好き。
使いやすさや読みやすさよりインパクトを優先すべき場合もある。

2008.10.29

FlashとJavaScriptを連携するExternalInterfaceでハマる

今制作中のサイトで少し変わったナビゲーションを実現させるために、ActionScriptからJavaScriptをのFunctionを呼び出したり、逆にJavaScriptからActionScriptのFunctionを呼びだすというような処理を多用するものを作っています。
それを実現するためにはActionScriptのExternalInterfaceを使うのですが、それでかなりハマってネットで検索しても同様の情報がなかったのでメモしておきます。

症状

以下のようなコードで、Flash Playerのバージョン9.0.48以前+IE 6/7の組み合わせの場合のみ、SWFを配置しただけでJavaScriptエラーが発生してExternalInterfaceの機能が全く動かなくなります。

ActionScript(2.0)例

//TextFieldを作る
var greetingText:TextField = this.createTextField("greeting",this.getNextHighestDepth(),0,0,100,100);

//JavaScriptから呼びだしてTextFieldの内容を変える
function changeText(t:String) {
	greetingText:TextField.text = t;
}
//ActionScriptのFunctionをJavaScriptから呼びだせるように登録
ExternalInterface.addCallback("extChangeText", null, changeText);

HTML例

<div id="Alternative-Content">コンテンツ</div>
<a href="#" onclick="callASFunction()">ActionScript実行</a>

JavaScript例

//SWFObjectでSWFを配置
swfobject.embedSWF("/flash/navi.swf", "Alternative-Content", "800", "200", "8.0.0", false, {}, {wmode:"opaque",allowScriptAccess:"always"}, {id:"Navi-SWF"});

//ActionScriptを実行するためのFunction
function callASFunction() {
	var swf= document.all? window["Navi-SWF"] : document["Navi-SWF"];
	swf.extChangeText("Helllo!");
}

原因

SWFObjectで配置している「{id:"Navi-SWF"}」の部分が問題でした。
Flash Player 9.0.48までのバージョン+IE 6/7(8や5.5以下は試してない)の組み合わせの場合は配置するObjectのIDにハイフン(-)が使えないようです。
Flash Player 9.0.115 以降だと同じコードで問題なく動きます。
これは同じくExternalInterfaceを使っているSWFAddressを使った場合にも発生します。
試してませんが、SWFObjectを使わず配置する場合でも同様のことが起こるかもしれません。

対策

SWFを配置するときのIDにはハイフンを使わないようにしましょう。

2008.08.31

ページ内リンク(アンカー)の移動を分かりやすく、スムーズにするJavaScriptライブラリ - blinkAnchor -

概要

ページ内リンクをクリックするとその場所までスムーズにスクロールし、対象のエレメントをチカチカさせるスクリプトです。
今やってる商業施設の仕事でイメージマップを使ったフロアマップから同じページ内にあるショップの一覧への遷移を分かりやすくするために作ったモノで、かなり簡単なスクリプトですが、気に入ったので公開します。

サンプル

 

コンテンツ1

コンテンツ2

コンテンツ3


設置方法

jQueryinterface elements for jQueryが必要です。
(interface elementsはすごいことがいっぱいできるライブラリで、それなりのファイルサイズですが必要なのは「ScrollTo」だけなので、いずれ余裕がある時にinterface elementsがなくても動くようにしたいです)2009.06.05 jQueryだけで動くように修正しました。

  1. JavaScriptファイルの読み込み

    <head>内に以下のタグを挿入します。JavaScriptのファイルのパスは実際にサーバーにアップしたパスに置き換えてください。

    <script src="/js/jquery-1.2.6.js"></script><script src="/js/interface.js"></script><script src="/js/blinkAnchor.js"></script>	
  2. 適用したいリンクに「blinkAnchor」というクラスをつける
    <ul><li><a href="#ANCHOR-1" class="blinkAnchor">1</a></li><li><a href="#ANCHOR-2" class="blinkAnchor">2</a></li><li><a href="#ANCHOR-3" class="blinkAnchor">3</a></li></ul><div id="ANCHOR-1">コンテンツ1</div><div id="ANCHOR-2">コンテンツ2</div><div id="ANCHOR-3">コンテンツ3</div>	

利用条件

MITライセンスです。個人でも商用でも無料で利用可能です。
このスクリプトの利用により直接的または間接的に生じたいかなる損害に関しても、その責任を負いません。
まだまだ未熟者の書いたスクリプトなのでバグやおかしな書き方してる部分などあれば、是非コメントください。

ダウンロード

以下のリンクからダウンロードできます。
blinkAnchor.js.zip (4KB)

インスパイアされる映像 〜映像ディレクター編(3本)〜

今回は集めている映像ディレクターごとのオムニバスDVDからいくつか紹介します。

Micheal Gondry - ミシェルゴンドリー -

One More Timeで一気にメジャーになったDaft Punkの昔の曲、Around the worldのPV。

このPVのメイキング映像はこちら

他のミシェルゴンドリーの代表的な作品
The white Stripes - Hardest Button to Button
Bjork - Hyperballad
Chemical Brothers - Let Forever Be
Cibo Matto - Sugar Water
海外で活躍する日本人のユニット チボマットのPV。上から読んでも下から読んでも同じ言葉になる「回文」を映像で表現しています。正方向に再生する画像と逆再生の画像を同時に見て、それぞれがリンクしている。
このDVDに他にもいろいろ入ってます。

Jonathan Glazer - ジョナサングレイザー -

すごくセンスが良く、完成度の高い作品を作るディレクターです。
これはDVDには入ってなかったものですが、今まで見たCMの中で一番好きなSonyのCM

このCMのメイキング映像はこちら

他のジョナサングレイザーの作品(DVDに入ってます)
ギネスのCM
Jamiroquai - Virtual Insanity
これは床が動いているように見えますが、部屋にカメラを固定して部屋を人力で動かしながら撮影しています。
Levi'sのCM

Chris Cunningham - クリスカニンガム -

すごくきれいな映像を作るけど、かなりド変態なディレクター。これはビョークの有名なPV

他のクリスカニンガムの作品
Madonna - Frozen
Aphex Twin - Come To Daddy
Portishead - Only You

2008.07.20

WEBデザイナーを募集しています。

STARRYWORKSでは現在WEBデザイナーを募集しています。
デザインがすきなひと、グラフィックデザイナー(DTP)の実務経験者歓迎します。
FLASHができなくても、HTML/CSSができなくても構いません。
一緒に楽しく、責任を持って仕事を出来るひとお待ちしてます。

詳しくはこちらから
http://www.find-job.net/fj/showjob.cgi?id=68843&from=23

2008.07.07

STARRYWORKS創立2周年!

おかげさまで、株式会社STARRYWORKSは7月7日で2周年を迎えました。

2006年7月7日に会社を設立してからあっという間の2年間でしたが、さまざまなお仕事をさせていただき、スタッフみんなが成長して来れたと思います。営業職のいない弊社にとっては全て人との巡り会いのおかげです。
これからもひとつひとつの巡り会いを大切にして、よりおもしろい、たのしい、かっこいいモノづくりができるように社員一同、頑張ってまいりますので、今後ともどうぞ宜しくお願い申し上げます。

代表取締役 木村 幸司

インスパイアされる映像 〜シブイ編(3本)〜

Portishead - Glory Box -

90年代のブリストルで活躍したバンドPortisheadの代表的な曲。たしか96年か97年ごろにLevi'sのCMで使われていて、初めて聞いた時は衝撃的だった。

Gilberto Gil and Stevie Wonder

R&B/Soulの大御所Stevie Wonerとボサノバの大御所Gilberto Gilのセッション。さわやかさがとても心地よいです。

Tom Waits

シブすぎるおじさん。どういう生き方したらこんなシブさを醸し出せるのか?

2008.03.29

スターリーワークスのオフィスを移転します

2008年4月1日よりSTARRYWORKSのオフィスを移転します。

案内状を印刷して送っている時間がなかったので案内状の代わりに特設引越しサイトを作成しました。

http://move.starryworks.jp/
株式会社STARRYWORKSのオフィス移転

より多くの人に見てもらえるよう、Flash Playerのバージョンを8でパブリッシュすることにしたので、久々にActionScript2.0で構築しました。

LEGOブロックで旧事務所と新事務所とその周辺の地図を作り、それを撮影して360°回せるようになっています。

2008.03.29

事務所のリフォーム Before --> After

オフィスの引越しで新しい事務所は天井をスケルトンにして、床を無垢の檜材のフローリングに、リフォームをしました。事務所が破壊されて生まれ変わっていく様をご紹介します。


リフォーム前の状態。元々は天井があって、床はタイルカーペット


天井と床が破壊された状態。


がれきを片付けてキレイになった。


天井にレールと照明を器具をつけて、フローリングが途中まで貼られた状態。


フローリングが完成し、クロスを張り替えた状態。

インスパイアされる映像 〜スゴイ+オモロイ編(4本)〜

ブルースリー+ジェームスブラウンな子供

とりあえず、見たらわかる、ヤバい子供。

Blue man group

青い人のグループによる演奏。

Aphex Twin - windowlicker -

ビョークやマドンナのムービークリップ作ってるChris Cunningham(クリスカニンガム)の有名な作品。Aphex Twinのwindowlicker。ドヘンタイ。

Kid Koala - Drunk Trumplet -

Ninja Tuneの神業ターンテーブリストKid Koala。

インスパイアされる映像 〜カッコイイ編(4本)〜

今までに影響を受けた映像や新しく発見した映像などを紹介していこうと思います。
基本的にミュージックビデオやライブ映像が多いです。普段から音楽や映像から受ける影響はかなり大きいので、自分のメモも兼ねて紹介していきます。

4heroのライブ

この空気感がカッコイイ。ドラムンベースは最近のエレクトリックでガチャガチャしたのより、こういうシブさがあるのがいいですね。この時代に一番いろいろな音楽を聞いていたこともあって、ドラムンベースの出始めの頃の音やブリストルの音は今でも好きです。

HexstaticのDistorded Mind

映像も音も作っているNinja TuneのHexstatic。よく見るとブラックユーモアたっぷりです。小泉首相も出演!?

Zap Mama

とてもエキゾチックな声。アフリカ・ピグミー族の"ポリフォニー"という伝統的な発声法や音楽をベースにしているらしいです。

Nitin Sawhney & Sharon Duncan

最近教えてもらった映像。デザインも音楽も映像も空気感とテンションと技術が大事だと思いまが、この人たちはすごい。

プロのフォトレタッチャーの仕事 - Christophe Huet -

フォトレタッチャー Christophe Huet のサイトです。


http://www.christophehuet.com/

彼の手がけた今までの作品が見れるサイトなのですが、どの作品もとてもクオリティが高いです。拡大しても見れるようになっていて、細部までとことんこだわっているのが伝わります。

作品によってはメイキングが見れるのですが、これがまたすご過ぎます。白人が黒人になったり、白黒写真がカラーになったり。技術もすごいですが、すばらしいアイデアと作品に対する徹底的なこだわりがあるからこそ、人の心を掴むビジュアルを生み出せるんだと思います。

2007.09.03

Action Script 3.0の変更点まとめ

今更ながらAction Script 3.0についてちゃんと理解するためにいろいろ調べた結果のメモとしてAction Script 3.0の変更点の中で特に重要なもの書いておきます。

  • Movie Clip にスクリプトが書けない
  • イベントの処理の変更
  • getURLが使えなくなった代わりにURLRequestとnavigateToURLを使う
  • プロパティ名の変更
  • クラス定義に関する変更点
  • 新しく追加されたSpriteクラス
  • リンケージやattachMovieがなくなって代わりにクラスやaddChildを使う 
  • 正規表現が使えるようになった!
  • XMLのparse(解析)が簡単になった!
  • 定数を宣言するconstキーワード

Movie Clip にスクリプトが書けない

AS3.0ではMovieClipインスタンスにスクリプトを書くことができません。AS2.0までのようにMovieClipインスタンスにスクリプトを直接書くことができなくなりました。 AS3.0ではフレームにしかスクリプトを書くことができなくなります。

ウチの会社ではMCに直接スクリプトを書くとどこに書いたか分からなくなるから以前からほとんどのスクリプトをrootのフレームに記述していたた め、個人的にはこの変更はあまり気にならないですが、ボタンをクリックしたらURLに移動するだけのようなスクリプトしか書いていない人は要注意です。

例えば、ボタンをクリックするとURLを開く、以下のようなスクリプトの場合、AS3.0ではエラーになります。

//MovieClipインスタンスに直接記述されたスクリプト
this.onRelease = function() {
        this.getURL("http://www.google.co.jp/","_blank");
};

AS3.0ではこれを以下のように書く必要があります。

//MovieClipインスタンスが配置されたタイムラインのフレームに記述されたスクリプト
this.btnGoogle.onRelease = function() {
       this.getURL("http://www.google.co.jp/","_blank");
};
//MovieClipインスタンスの名前が「btnGoogle」の場合

ただし、イベントに関する扱いも変更されたのでこのスクリプトは正しく動作しません。 詳しくは後述します。

イベントの処理の変更

AS2.0まではonRollOver、onRollOut、onRelease、onReleaseOutside、onClipEvent などのイベントハンドラを利用していましたが、AS3.0ではイベントリスナーを使う必要があります。具体的には addEventListener() を使ってイベントリスナーを登録します。

上記のスクリプトをイベントリスナーを使って記述すると以下のようになります。

 //MovieClipインスタンスが配置されたタイムラインのフレームに記述されたスクリプト
this.btnGoogle.addEventListener(MouseEvent.CLICK, function(e:MouseEvent) {
       this.getURL("http://www.google.co.jp/","_blank");
});
//MovieClipインスタンスの名前が「btnGoogle」の場合

ただし、AS3.0ではgetURLが使えなくなったので、これでもまだこのスクリプトは正しく動作しません。

getURLが使えなくなった代わりにURLRequestとnavigateToURLを使う

AS2.0まではgetURLで簡単にURLの移動ができましたが、AS3.0ではnavigateToURL関数を使う必要があります。しかもこ のnavigateToURLにはURLを文字列として直接渡すことができず、URLRequestクラスを使う必要があります。上記のスクリプトを navigateToURL使って記述すると以下のようになります。

 //MovieClipインスタンスが配置されたタイムラインのフレームに記述されたスクリプト
this.btnGoogle.addEventListener(MouseEvent.CLICK, function(e:MouseEvent) {
       var url:URLRequest = new URLRequest("http://www.google.co.jp/");
       navigateToURL( url, "_blank" );
});
//MovieClipインスタンスの名前が「btnGoogle」の場合

http://weblogs.macromedia.com/akamijo/archives/2006/03/navigatetourl.cfm 

プロパティ名の変更

AS3.0では2.0までのようにプロパティ名の前に「_」(アンダースコア)が付きません。だから「_root」や「_alpha」は「root」「alpha」というように記述しなければなりません。

また、「_xmouse」や「_xscale」は「mouseX」や「scaleX」に名称自体が変更になりました。

変更内容AS1.0/2.0AS3.0
「_」がなくなった _root、_alpha、_height、_parent、_rotation、_visible、_width、_x、_y root、alpha、height、parent、rotation、visible、width、x、y
 名称変更 _xmouse、_xscale、_ymouse、_yscale mouseX、scaleX、mouseY、scaleY

クラス定義に関する変更点

AS3.0では次のクラスの定義について次の点に注意する必要があります。
以下のURLに詳しく解説されています。
http://weblogs.macromedia.com/akamijo/archives/2005/12/package.cfm

新しく追加されたSpriteクラス

AS3.0で追加されたSpriteクラスはMovieClipと同様にグラフィック要素を表示でき、子を持つこともできる DisplayObjectContainerクラスのサブクラスです。MovieClipとほぼ同様のことができますが、タイムラインを持ちません。ア ニメーションをすべてスクリプトで制御する場合やタイムラインを必要としないユーザーインターフェイスなどの用途ではMovieClipではなく Spriteクラスのインスタンスを生成する方が軽いみたいです。MovieClipはSpriteのサブクラスになります。

http://weblogs.macromedia.com/akamijo/archives/2005/11/splite.cfm
http://www.fumiononaka.com/TechNotes/Flash/FN0607002.html

attachMovieがなくなって代わりにクラスやaddChildを使う 

スクリプトで生成したSpriteインスタンスやMovieClipインスタンスをステージ上に配置するにはDisplayObjectContainer.addChild()メソッドを使います。また、リンケージについて詳しくは以下のサイトを参照してください。

http://www.fumiononaka.com/TechNotes/Flash/FN0607001.html
http://f-site.org/articles/2006/07/07074143.html

http://weblogs.macromedia.com/akamijo/archives/2005/11/splite.cfm

正規表現が使えるようになった!

AS2.0でもこのRegExpクラスを使えばできましたが、やっと標準でサポートされるようになりました。以下のような感じで使えます。

var srcStr:String =  '<a href="http://www.google.co.jp/" target="_blank">Google Japan</a><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo Japan</a>';
//パターンを指定してRegExpのインスタンスを生成します
var regPattern:RegExp = new RegExp('href="[^"]*"','ig');
//matchesに文字列として「href="http://www.google.co.jp/"」と「http://www.yahoo.co.jp/」が格納されます。
var matches:Array = srcStr.match(regPattern);

XMLのparse(解析)が簡単になった!

E4X (ECMAScript for XML)のクラスがサポートされるようになったのでXMLデータの扱いがかなり簡単になりました。以下に簡単なサンプルを書いときます。

var strXML:String = '<work>'+
'<url>http://www.starryworks.co.jp/</url>'+
'<creator type="art director">Koji Kimura</creator>'+
'<creator type="flash developer">Miyako Ueki</creator>+
'</work>;
var objXML:XML = new XML(strXML);
//ノードへのアクセス
trace(objXML.work.url);                                           //http://www.starryworks.co.jp/
//ノードリスト内のへのアクセス
trace(objXML.work.creator[0]);                                //Koji Kimura
//属性へのアクセス
trace(objXML.work.creator[1].@type);                      //flash developer
//条件を指定したノードへのアクセス
trace(objXML.work.creator.(@type=="art director");    //Koji Kimura
//要素の追加
objXML.work.appendChild(<creator>Ryoji Murai</creator>);
//属性の追加
objXML.work.creator[2].@type = "designer";

詳しくは以下のサイトを参考にしてください。

http://weblogs.macromedia.com/akamijo/archives/2006/02/e4x.cfm
http://weblogs.macromedia.com/akamijo/archives/2006/02/xml_1.cfm
http://weblogs.macromedia.com/akamijo/archives/2006/02/xml.cfm

定数を宣言するconstキーワード

AS3.0では定数の定義にconstキーワードを使うようになりました。

この記事を書くにあたって参考にしたサイト

http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/migration.html
http://www.adobe.com/jp/devnet/flash/articles/writing_actionscript.html
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
http://weblogs.macromedia.com/akamijo/archives/actionscript_30/index.cfm
http://f-site.org/articles/as/as3/
http://www.fumiononaka.com/TechNotes/Flash/index.html#ActionScript3

STARRYWORKS inc. official web site