2012年5月16日水曜日

#gtuggirls で鎌倉に行ってきた!

GTUG Girls の活動では、イベントのたびに必ずモノづくりをして、かつ色々な会社さんのオフィスを訪問するようにしています。

第一回は mixi さんのオフィスにお邪魔して、Google Apps Script。
第二回は ニフティさんのオフィスにお邪魔して、HTML5 Canvasでお絵かき。
第三回はロフトワークさんのオフィスにお邪魔して、懇親会。
第四回は Google オフィスで、Androidのウィジェット作り。
第五回は Cookpad さんのオフィスにお邪魔して、Chrome Extensionを作りました。

第五回の後に、ミニセッションをちょこちょこやっていて、先月やったのが「プログラムコーディングの準備体操」。

そして先週は鎌倉の面白法人カヤックさんとFabLabにお邪魔して、SVG について学んだり、レーザーカッターで GTUG ロゴを作ったりしてきました。というわけでそんな鎌倉ツアーのブログを書いておこうと思います。

●ランチ

集合はカヤックさんの一階にある、どんぶりカフェ「Bowls」。

GTUG Girls 鎌倉

さすがどんぶりカフェ。丼が天井まで。。。

GTUG Girls 鎌倉

人気の特盛り湘南釜揚げシラス丼。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

鮭イクラ親子丼アボカドクリーム。

GTUG Girls 鎌倉

GTUG Girls 鎌倉


集合写真もぱちり。

GTUG Girls 鎌倉

トイレの表示も丼!

GTUG Girls 鎌倉


●面白法人のオフィスはやはり面白かった

。。。お食事を終了し、いよいよカヤックさんのオフィス見学へ。残念ながらオフィスは撮影禁止だったのでないのですが、とても面白かったです!オフィスツアーのサイトとか、941さんのレポートとかをご参照ください ;)

●SVG Girl 制作の裏話

続いて、メインイベント:SVG Girl (SVG女子) の「中の人」カヤックのエンジニア吾郷さんに、SVG と SVG Girl のお話を伺いました。



SVG Girl の予告編動画:



「SVG」とは Scalable Vector Graphics の略で、テキスト(XML)で記述された、JavaScript、CSSで操作できる画像形式のこと。画像なのですが XML で書かれているので、ブラウザ上で見ることができ、専用アプリとかがなくてもテキストエディタ等で編集することができ、ハイパーリンクを画像の中に埋め込んだりすることもできます。

また、ベクターイメージであるため、拡大や縮小をしても描写の劣化が起きません。

かれこれ10年以上前、2001 年に W3C でオープン標準として勧告されていますが、ブラウザのサポートがあまり行われていなかったため(例えばIE8以前ではサポートされていなかった)使われることも少なかったようです。ちなみにモバイルでは、iPhoneと Android 3.0でサポートされています。

カヤックさんがマイクロソフトさんから「IE9 で新しくサポートされるようになった何らかの機能を使ったサービスを作って欲しい」と依頼され、SVG を選んで作成したのが "SVG Girl"というサイトの誕生の経緯。公開されたのは去年の3月ですから、もう 1 年以上たっているのでしたね。

まずはどうやって作ったのかを教えて頂きました。

だいたいのところは、吾郷さんの書かれたブログ記事「SVG Girlの公開と内部実装」やカヤックデザイナーブログの記事「SVG女子を90%軽くしたSVG軽量化テク+α #svggirl」にも書いてありますね。

制作過程:
1) アニメーション制作会社(神風動画さん)にアニメの制作を発注
2) 神風さんが作ったビットマップ素材からアニメーション構造を設計
3)  素材を階層ごとに分けてまとめる(レイヤー化)
4) レイヤー化した素材に連番と階層で名前をつける
5) トレスして軽量化。同時にカラーコードで色調整をする
6) トレスが終わった素材はSVGZで書き出す
7) SVGZをサーバーにコミットしてプログラムで動かせるようにする
内部実装:
「.ai形式で作成されたアニメーションの各コマを.svg形式で出力したあと、JSでDOM Treeにすべてのコマを追加してsetIntervalでdisplay:noneしています。」

で、「 当初アニメーション全体をそのままSVGへ変換したところ、未圧縮状態で150MB以上になり、読み込みに3分、読み込み後のメモリ使用量は1.2GBを超えていました」という状態で、そこから行われた鬼のような軽量化の工程については同じく吾郷さんの「HTML5 プロジェクトの舞台裏~とあるSVG女子の開発記録~」が詳しいのでここでは割愛します :)

へー!と思ったことをいくつか書きだしてみると:

● SVG Girl は、実は SVG パラパラ漫画だった!

IE9 が SVG Animation には対応していないので、SVG Girlは SVG Animation を使っておらず、「SVG で描いた画像のパラパラ漫画」だったのです。

● SVG で、デザイナーさんは仕事がしやすくなるかも!

デザイナーさんはよくイラストレーターを使っていると思いますが、イラストレーターから直接 SVG で書き出しをすることができます。で、HTMLではなくて、SVG で表示のレイアウトを制御することができます。SVG は対応しているブラウザがまだ少ないのが難ですが、対応しているブラウザでさえあれば、デザイナーさんがイラレから書き出した物をブラウザに入れて見えた物がそのままどのブラウザでも表示されるのが SVG のいいところ。「マークアップをしたらブラウザによって見え方が違う!」なんていうことが起きない。サーバサイドとの相性もよく、検索エンジンの親和性も高い。吾郷さんは、「今後は html, flash, SVGの三択で書き出しになるのでは? 」と仰っていました。

●SVG の仕様が重い。。。

SVG の問題はまだ色々あるのですが、まずブラウザ環境が限られること、表示が重いこと、そして仕様が重いこと、だそうです。

「仕様が重い」ってどういうことかなと思ったら、SVGの仕様にはフォントとか色とかアニメーションとか色々あるのですが、なぜか「楽譜」とか「音声」とか、なんでそんな物が。。。的な仕様がてんこ盛りらしい。よって「できるだけSVGの機能を使わず」、divを操作するとよいらしい。

● SVG Girl は、実は元のアニメのクオリティの方が高い!

アニメ会社さんもカヤックさんもアニメから SVG に変えて制作するのは初めてだったので、やりながら学んだことも多かったそうです。例えば、このシーン。


視点が横移動していくシーンなのですが、アニメだと視線が移動していくにつれて見える角度が変わっていくのですが、それを線画でやっていくと恐ろしく工程が増えてしまうので、そこは変えていない。


物がせり上がっていくシーンも、元のアニメだと迫っていくようになっているそうなのですが、これも線画でやると大変なので、落としている。

今後アニメ制作会社さんにアニメを作ってもらって、それを SVG にするような場合は、アニメの発注の段階から色々想定しておかなければいけない。実際、吾郷さんは「もう一度やるとしたら、何をどう変えますか?」という質問に対しては「アニメの発注の仕方を変える(線画でもらう)」と仰っていました :)

なお、これを読んで「SVGをちょっと触ってみたいなー」と思ったあなたに朗報です。カヤックさんがやっている SVG Girl のコンテストサイトで、SVG Girl のアニメーションのコードを Fork し、JavaScript 部分を変更することで、SVG Girl のアニメーションの色を変更したり、描画される要素を書き換えることができます。

http://jsdo.it/svggirl/svg_sample_filter 



カヤックの皆様、吾郷さん、ありがとうございました!

吾郷さんのインタビュー記事:世界が認めた日本のクリエイティブ「SVG女子」――カヤック吾郷協氏に訊く

●FabLab 鎌倉へ

続いて、FabLab 鎌倉へ移動。オンラインや電話では予約を受け付けていないので、現地に行って、黒板で予約を入れる必要があります。4月いっぱいはおやすみしていましたが、5 月にオーナーが変わって再開しており、現在は毎週金曜日の午後13時 – 17時のみオープンしています。

GTUG Girls 鎌倉

「蔵」です!かっけー。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

設計室の看板。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

ちょうど別のお客さんが来たところだそうで、我々は16 時からの予約に。せっかく鎌倉に来たので、あいた時間で鶴岡八幡宮と銭洗弁天に行ってみることに。

●鶴岡八幡宮

GTUG Girls 鎌倉

結婚式をやってました。

GTUG Girls 鎌倉

修学旅行生がいっぱい!

GTUG Girls 鎌倉

2010年に強風で倒れたあの銀杏。

GTUG Girls 鎌倉

のどかな鎌倉の風景。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

●銭洗弁天

トンネルを抜けて、銭洗弁天へ。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

GTUG Girls 鎌倉

お線香・ろうそく・ザルを購入し、岩の中で銭を洗う。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

GTUG Girls 鎌倉

中には千羽鶴がいっぱい!

GTUG Girls 鎌倉



●FabLab 鎌倉へ

時間通り、FabLabに戻って来ました。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

GTUG Girls 鎌倉

超和風な蔵の中に、ギークな機材がいっぱいあって、そこに女子が8人ウロウロしているという不思議な風景。。。 :)

GTUG Girls 鎌倉

GTUG Girls 鎌倉

机の上にあった文字を並べてみる。

GTUG Girls 鎌倉

GTUG Girls 鎌倉

GTUG Girls 鎌倉

あんざいさんの会社、"uphyca" のロゴをレーザーカッターで作ることに。

データを作る。

GTUG Girls 鎌倉

こちらがレーザーカッター。

GTUG Girls 鎌倉

出てきた、出てきた!

GTUG Girls 鎌倉

できた!

GTUG Girls 鎌倉

iPad アプリで、自分の好きな文字を入力し、レイアウトすることができ、そのデータを読み込んでレーザーカッターで切り出すことができるらしい。というわけで、さっそくみんなで「gtug」の4文字をレイアウト。



レーザーカッターでカッティング中。

GTUG Girls 鎌倉



みんなでレーザーカッターを囲む :)

GTUG Girls 鎌倉

できたー!

GTUG Girls 鎌倉

取り出すこともできます。

GTUG Girls 鎌倉

「ここで作りました」の記念写真。

GTUG Girls 鎌倉

FabLab 鎌倉の皆様、ご参加頂いた GTUG Girls の皆様、ありがとうございました :D

ちなみに photo of the dayはこちら。

kamakura

FabLabの二階から階段下を見下ろして、パノラマで天井まで撮影しました。

Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。