東京大学で開催された、「ABC2012Spring（Webトラック）」で発表した
「あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう？」
の映像です。
実際デザイナーは、どんなツールを使い、どんな考え方を持ってユーザにアプリを提供するのか？
という自分なりの考え方を発表し、後半はWebデザイナーにとってあまり馴染みのない3Dグラフィックのライブデモをやりました。
使ったソフトはLightwave。ドロイドくんをつくるデモです。
東京大学で開催された、「ABC2012Spring（Webトラック）」で発表した
「あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう？」
の映像です。
実際デザイナーは、どんなツールを使い、どんな考え方を持ってユーザにアプリを提供するのか？
という自分なりの考え方を発表し、後半はWebデザイナーにとってあまり馴染みのない3Dグラフィックのライブデモをやりました。
使ったソフトはLightwave。ドロイドくんをつくるデモです。
<!DOCTYPE HTML><html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>カメラの映像を映す!</title> <style> html, body, video { margin: 0; padding: 0; } video, canvas, button { display: block; } </style> <script> function init() { var video = document.getElementsByTagName("video")[0]; var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); navigator.getUserMedia("video", function (s){ video.src = s; }); document.getElementsByTagName("button")[0].addEventListener("click", function () { ctx.drawImage(video, 0, 0); }, false); } </script> </head> <body onload="init()"> <button>撮影</button> <video autoplay></video> <p>▼ここからcanvas</p> <canvas></canvas> <p>▼ここからimg</p> <img alt="canvasから書き出された画像" /> </body>
</html>
<!DOCTYPE HTML>
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>カメラの映像を映す!</title> <style> html, body, video { margin: 0; padding: 0; } video, canvas, button { display: block; } </style> <script> function init() { var video = document.getElementsByTagName("video")[0]; var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); navigator.getUserMedia("video", function (s){ video.src = s; }); document.getElementsByTagName("button")[0].addEventListener("click", function () { ctx.drawImage(video, 0, 0); document.getElementsByTagName("img")[0].src = canvas.toDataURL("image/jpeg"); }, false); } </script> </head> <body onload="init()"> <button>撮影</button> <video autoplay></video> <p>▼ここからcanvas</p> <canvas></canvas> <p>▼ここからimg</p> <img alt="canvasから書き出された画像" /> </body>
</html>
Opera MobileでgetUserMedia from Hideki Akiba on Vimeo.
<!DOCTYPE HTML><html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>カメラの映像を映す</title> </head> <body> <video autoplay> <script> var video = document.getElementsByTagName("video")[0]; navigator.getUserMedia("video", function (s){ video.src = s; // カメラ接続が成功したら、ストリームをvideo要素に接続 }); </script> </body></html>
Opera MobileでgetUserMedia2 from Hideki Akiba on Vimeo.
<!DOCTYPE HTML><html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <script src="../common/js/jquery-1.7.1.min.js"></script> <title>カメラの映像を映す</title> <style> html, body, video { margin: 0; padding: 0; } </style> </head> <body> <video autoplay> <script> var video = document.getElementsByTagName("video")[0]; var stream = null; navigator.getUserMedia("video", function (s){ video.src = stream = s; }); $(window).bind('load orientationchange resize', function(e){ // デバイスの向きが変わったら... video.src = null; //一旦ストリームを解除する if(Math.abs(window.orientation) === 90){ video.width = window.innerWidth; //video要素のサイズを調整 }else{ video.height = window.innerHeight; //video要素のサイズを調整 } video.src = stream; //再度ストリームを接続する }); </script> </body></html>
以前も記事に書いたデザイナー主体のハッカソンプロジェクト「Designers Hack」で作っているモックをちょっと作り込みましたので、テストバージョンサンプルと動画をあげておきます。
DEMOはこちら（iPhone, Androidで見てください、PCブラウザでは動作しません）
TimeFlickerJS + iPhone4S
TimeFlickerJS + GALAXY S2
iPhoneのUIで見かける、数字を縦にフリックできる日付用のドラムっぽいあのUI。
あれ、HTMLのフォームなどで作ってほしいという要望がありがちです。
でも、「時」と「分」を同時にクルクル指でフリックさせて数字を合わせるHTMLのUIが無いので、作ってみました。
jQueryのプラグインみたいにしてます。
使い方は簡単です。
http://ecoloniq.jp/TimeFlickerJS/timeflickerjs.zip
<head>
<link rel="stylesheet" type="text/css" href="common/css/timeflicker.css">
<script src="common/js/jquery-1.7.min.js"></script>
<script src="common/js/jquery.timeflicker.js"></script>
<script>
$(function (){
$("#timefrom").TimeFlickerJS();
});
</script>
</head>
<body>
<div id="timefrom">
<span class="TimeFlickHour">4</span>
<span class="TimeFlickMinite">10</span>
</div>
</body>
以上です。
必要なのはHTML上でspan.TimeFlickHourを「時」として、span.TimeFlickMiniteを「分」とします。
これだけは必須なので忘れないように。
あとはその親divをjQueryな書き方でTimeFlickerJS()を付けるだけで準備はOKです。
親div（"4時10分"と表示されている部分）をタップすると、ドラムっぽいUIが降りてきたら成功です。
一応、OKボタンが押されたタイミングでイベントを発火できます。
var jikan = $("#timefrom").TimeFlickerJS();
jikan.change(function (e, v1, v2){ console.log(v1+" "+v2); });
とすると、v1に「時」が、v2に「分」が帰ってきますので、
例えばform要素の中で使う際、
<input type="hidden" name="jikan" value="ここにv1とv2を入れてサブミット" >
とかするとお問い合わせフォームでも使えるので良いでしょう。
Designers Hackのフロントエンドエンジニアのメンバーと話していると、Android大丈夫？的な声が。。。
確かにiPhoneはレンダリングも強力なので割とフリックなど滑らかなんですが、GALAXY S2やXPERIA ARCなどで試したら結構厳しいところもあります。
クオリティを考えるとAndroidはもっと別のUIを考え、振り分けた方がいいのでは？という意見が続いています。
あと、このUIは今は横幅320pxとハードコーディングしてます。解像度のちがうAndroidではCSSを触らないといけなくなりそうです、というよりボツになりそうです。
例えばhtcとかの機種では横が空いてしまいますので。。。
これはもうちょっと改善できたらいいなと。
ただ、このようなUIの制作を色んな仲間の意見をもとに作れ、勉強しているって恵まれてるなあと感じます。
精進精進。
このあいだも、Googleのハッカソンに呼ばれて東京に行って思ったんですが、「知識が豊富なエンジニア達の中にデザイナーを投入してハッカソンを行おう」と、最近そんなことを企画するところが増えだしたな、という気がします。
しかし、企画側の理想は分かるんですが、今までのハッカソンの感覚でやるとまったく意味がないと感じています。
むしろデザイナーを投入するだけ時間の無駄とも言えます。
エンジニアの会話というのは、エンジニア同士でないとなかなか伝わりません。
だから、その場にデザイナーが入り込むと誰とも会話が出来なくなります。
ただし、アプリ全体の完成度を考えると、デザイナーという分野の力は欠かせません。
なぜなら、単に動くだけでは、コンシューマにとって魅力を感じないからです。
まず、アイデアソン（アイデアを話し合う）に完成のイメージを明確にしないとデザインは出来ません。
つまり、そのフェーズを踏まない以上、「デザイナーハッカソンは不可能」と考えて下さい。
では、そのアイデアソンのフェーズなんですが
さらに、「これは守りましょう」というルールを設けるのもいいでしょう。
・アイデアが出来ないうちに、誰かひとりでもコードを書き始めるとNG（多少の検証はしょうがないとして）
・エンジニアもチーム内すべてが、デザイン面のアイデアソンに加わること
実際の仕事（案件）でも最低限これだけはないと、デザイナーが動けません。
むしろ、将来の私達の業界は、手を動かす人（デザインする人だろうがコードを書く人だろうが）すべてプロジェクトのゴールを明確に見据えるために、発案から参加するスタイルがどんどん必要とされています。
すでにシリコンバレーなど、先進的なITの現場では、このスタイルを導入しています。
「指示が降ってくる」なんて言葉は過去の言葉になるのでしょう。
つまり、この流れを実際にハッカソンで行う事が、私達の制作現場の将来のスタイルを想定しているわけで、私達が5年後、10年後、もっと周囲からの評価が高い仕事を続けていくためには、いまからこのコミュニケーションという難題に触れ、経験し、可能であればその問題解決のすべを自分なりの方法で得なければなりません。
簡単に考えている人は、やってみるときっと頭を打たれるほどの難しさを肌で感じる事でしょう。
とてもシンプルなWebアプリケーションを作るだけでも、リリースまで想定するのであればなんらかの「設計上のデバッグ」が必要となります。
当初のやりとりでうまくいくと想定しても、一つの仕様変更で次々と連鎖的にやり直しとなるでしょう。
でも、ここで見つかったバグをつぶさないと進めてはいけないので、とても進まない事にジレンマを感じます。
デザインのアイデアから設計にいたるまで、チーム全員が参加する必要があるのはそういった理由があるからです。
徹底すると質の高いイベントとなるでしょう。
実はハッカソンに参加したデザイナーの力作が、アプリに反映出来なかったらとても残念な気持ちになり、その気持ちがチームのみんなに伝わらないのは余計つらいんです。
こういった経緯があって、「じゃあ、自分達で企画しよう」ということになりました。
先日和歌山の和歌浦アートキューブに泊まりがけで合宿を行ってきたんですが、これがとても良かったです。
一日目はとにかく誰も実装ベースの作業は禁止！
ペンと紙と会話で「完成を想定する」ことで精一杯です。
アプリは「勤怠アプリ」にしました。私達クリエイターにとっては少々くだらないと思えるアイデアも、一般の人にはモチベーションが上がるようなものもあります。
単にアルバイトのスケジュール帳ではなく、稼ぐ毎にアバターが成長／変身していくというもの。
iPhoneのSafariで動くことを想定したWebアプリです。最終的にはAndroidでも使えるようにしたいと考えています。
【アプリの概要】
・アルバイトのスケジュールをカレンダーに記帳できる。
・複数のバイト先を新規登録／管理でき、次からスケジュールを記帳しやすいようにする。
・アルバイト先の職種（力仕事やコンパニオンなど）を勤務先単位で登録する。
・職種ごとにアバターが成長していく
【目的】
スケジュール帳として厳密なものではなく、ビジュアルで楽しめる、モチベーションが上がるアプリを目指す。「なんじゃこのアバター？」と思えるようなユルいキャラから変なキャラまで用意。
【メンバー】
・フロントエンドエンジニア...2名
・ビジュアル／UIデザイナー...1名
・キャラクターデザイナー......2名
・HTMLコーダー.....................4名（上記から3名が兼任）
・マネージャー.....................1名
というメンバーで、実はエンジニアがあと2人参加予定だったんですが、風邪と社員旅行で参加出来ず、タイムオーバーとなり、一部実装は持ち越し。
単純なアプリと思っていても、結構大変なコストがかかるという事に打ちのめされます。
あと数回の顔合わせをして完成するというスケジュールになります。
このプロジェクトを企画した目的は、僕らデザイナーが良いと思った色やレイアウトを、クライアントという「素人判断」に覆されないためにも、このチームで意図して出来上がったものの価値で、本当に良いものに理由を付けたいと思ったから。
「よいと思うものに言葉はいらない」という人もいるし、すごく分かるけど、ビジネスとしてお金をもらってデザインをする立場だったらそこには説得させる材料が必要。
僕らのハッカソンプロジェクトはそれを実現させて、参加したメンバーが将来本当の意味で良いデザイナーの仕事を続けられるように今から出来る事をしたい、そう思って作りました。
もう「上から仕様変更が...」といって、リリース前に中身のコードをツギハギにしてグチャグチャでも「なんとか動いた」の状態でリリースするような仕事をしなくてもいい将来を作りたいです。
]]>
インスタンス名.getMesh()[41].x += 40; // ------------- 頂点座標の移動
インスタンス名.draw(); // ------------- 再描画実行
インスタンス名.stroke(false);
スライドはこちらです。
赤い点をドラッグしてみてください。
あくまで基礎中の基礎なので、もっと詳しい方はこちらのほうがおすすめです。
「2009-02-11 - 最速チュパカブラ研究会」
http://d.hatena.ne.jp/gyuque/20090211#1234364019
例えば正面を向いている画像が上を向いているように見せるにはどうすればよいでしょう？
それは、画像を台形にして上辺が狭くなれば、立体的に上を向いているように見えますよね？
今回はcanvas要素を使ってこういった画像を変形させることにします。
しかし、現在仕様が固まりつつあるcanvasの2Dレンダリング方式では、こういった画像に奥行を与える直接的な機能を持っていません。
つまり長方形のカタチから台形に変形させるのは簡単にできないというべきです。
Flash Playerはvar10からムービークリップ等を3D的に回転させたりすることが可能になりましたが、canvasの場合は何らかの方法で実現しないといけません。
（canvas、ではなく、正式には「CanvasRenderingContext2Dというcanvas内のオブジェクト」なんですが、便宜上canvasと言うことにします。）
画像が3D的に見えるように台形に変形させる前に、canvasでできる変形とはどういうものか、おさらいしておきましょう。
ここでいう「変形」というのは、以下のとおりで、これらは全てcanvasに直接備わっているので簡単に変形が可能です。
しかし、先ほども言いましたとおり、台形みたいに、あるいはもっと不規則な四角形に変形する命令（メソッド、といいます）は直接canvasには備わっていません。
例えば以下のような台形や不規則な形状の変形は簡単にはいきません。
よって、直接できないこれらの変形は次の方法を使うことで実現できます。
1枚の長方形を台形に変形させるには、左上と右下で三角形を作って2つに割ってしまいます。
三角形はマスク領域となり、左上と右下のそれぞれの三角形にクリッピングマスクするように画像を処理していきます。
なぜこういうことをするかというと、2つの三角形にそれぞれ別の変形を与えると、おおよそどんなカタチの四角形でも作ることが可能になります。
下図では、それぞれの三角形に対し、拡大または縮小、傾斜、移動といった、canvasで簡単にできるメソッドを使って別々の変形を与えてます。
まずは呼び方、座標のルールから決めましょう。
左上の三角形を「セグメント1」、右下の三角形を「セグメント2」と呼ぶことにします。
セグメント1、セグメント2の頂点は当然それぞれ3箇所あります。（三角形ですから）
この中で2つのセグメントは2つの頂点を共有しないといけません。
どこでしょう？
右上と左下ですね、これがくっついているべきですよね？
便宜上、ポイント0を左上、ポイント1を右上、ポイント2を左下、ポイント3を右下、
と、呼ぶことにしましょう。
ここまでが呼び方と座標のルールです。
そして今回使う画像のサイズは横400px、縦300pxとしましょう。
先ほど、canvasで簡単にできる変形として、拡大または縮小、傾斜、移動などがあると言いましたが、実はこれらを一回で行うメソッド、今回はsetTransformというメソッドを使います。
こちらにて解説されています。
http://www.html5.jp/canvas/ref/method/transform.html
計算方法は基本的な算数なので、苦手な僕でも何とか理解できました。
では実際画像を描画してみましょう。
セグメント1の「変形の基準点」、つまりどこを中心に変形していくかを決定するのはとても重要です。
これができないと、カタチ自体は変形できても、三角形の外にはみ出したりします。
セグメント1の「変形の基準点」はポイント0の位置にします。
その指定のやり方は、setTransformの第5,6番目の引数に、ポイント0のXとY座標を指定します。
例えば、画像のポイント0（左上）の位置がcanvasの左上からXが80px, Yが40pxだとしたら、
画像のdrawImage(img, 0, 0)にしておいて、setTransform(1, 0, 0, 1, 80, 40)とします。
ここ、大事です。
間違ってdrawImage(img, 80, 40)にすると、変形の基準点がポイント0基準になりません。
drawImageする座標は、canvasの左上の座標にしましょう。
setTransformによって 80px, 40pxの位置にちゃんと移動してくれます。
setTransform(1.3, 0, 0, 1, 80, 40)
とすることで、画像の横の長さがポイント0から移動後のポイント1まで拡大されます。
この計算方法を使って、画像の縦の拡大および縮小率も応用することができます、値はsetTransformの第4引数にいれます。
セグメント1はあと傾斜させて完成です。
ポイント1（右上）が下に40px動いたとします。
この時点で画像は右下下がりに傾斜しないといけません。
縦方向の傾斜の計算方法はこれだけです。
40（移動距離） ÷ 400（画像の横幅） = 0.1
この結果をsetTransformの第2引数にいれます。
この流れで横方向の傾斜も行ってみましょう、縦方向の傾斜と考えは同じです。
例えばポイント2（左下）が左に60px動いたとしましょう。
横方向の傾斜の計算方法は、移動距離が左（負の方向）なのでマイナスとなり、
-60（移動距離） ÷ 300（画像の縦の長さ） = -0.2
これをsetTransformの第3引数にいれます。
これで変形完了です。
三角形にするので、Illustratorでおなじみ「クリッピングマスク」と同じような機能をもつ、clip()というメソッドがあるので、それを使います。
canvasでパスによる図形を描くことができますので、moveToやlineToなどのメソッドで三角形を描いたあと、clipを実行してsetTransformで変形させて最後にdrawImageすると、画像は三角形の形で切り取られた格好になります。
原則、clipメソッドを使うときは、処理の前後にsaveメソッドとrestoreメソッドを使います。
例えばrestoreしないと、clip領域（マスク領域）が解除されません、状態をsaveメソッド実行時に戻すという繰り返しを行いましょう。
ここまでの結果にするには、以下のようなコードになります。
http://akibahideki.com/blog/2011/09/24/html5west.pdf
ctx.save(); //描画状態を記憶しておく（※1）
ctx.beginPath(); //パスを描画開始
ctx.moveTo(80,40); //ポイント0の座標
ctx.lineTo(600, 80); //ポイント1の座標
ctx.lineTo(20, 340); //ポイント2の座標
ctx.closePath(); //パスを閉じる、三角形の形が決まる
ctx.clip(); //上記のパス領域をクリッピング領域とする
ctx.setTransform(1.3,0.1,-0.2,1,80,40); //変形を実行
ctx.drawImage(img,0,0); //画像（写真）を描画、すでに変形されている
ctx.restore(); //クリップ領域を解除（※1）
ctx.strokeStyle = "red"; //線の色を赤にする（最終的に不要）
ctx.stroke(); //三角形の「線」を描く（最終的に不要）（※2）
(※1)
サンプルではこのコードが繰り返し実行されるため、クリップ領域も毎回解除しなければなりません。
saveによって、クリップ領域が存在しない状態を記憶しておき、restoreでsave時の状態に戻す作業をします。
この考え方はclipしながらアニメーションを行う際は必須のテクニックです。
(※2)
clipはstrokeして図形の線や塗りを描かないといけないと思われがちですが、closePathした時点でクリップ領域が決まるので、stroke（線）やfill（塗り）をする必要はありません。
↓↓このボタンを押して、クリップ状態と非クリップ状態を見比べてください。
セグメント2も基本はセグメント1と一緒です、応用は利きます。
ただ、大きく注意するべき点が1点、それは「変形の基準点」をどこにするか？です。
先ほどのセグメント1は分かりやすく、左上が基準点になれば良かったんですが、
『セグメント2にとってポイント0（左上）の座標は全く意味がない』
ということです。
セグメント2の持つ座標はポイント1から3までです。
ポイント０がどこに行こうが、セグメント2の三角形は影響を受けない（変形しない）というわけです。
要するにセグメント2になったら変形の基準点を別のどこかに指定し直さないといけないということです。
一番分かりやすかったのが、ポイント2（左下）の位置を基準として、そこから伸縮や傾斜を行おうと思います。
よってsetTransformの5,6引数目には、ポイント2のXとY座標をいれるのですが、ここでdrawImage(img, 0, 0)にすると、ポイント2から画像が描画されるので、ポイント2の下に画像が配置されます。
なので、drawImageの第3引数のY座標を画像の高さ分上に配置します。
つまり、今回の画像の高さが300pxなので、drawImage(img, 0, -300)とすることで、画像の左下が基準点にぴったり合った状態になります。
これまでが、セグメント1との基準点を考える上での違いです。
↓↓このボタンを押して、クリップ状態と非クリップ状態を見比べてください。
さて、いよいよ結果を見ることができます。
セグメント1とセグメント2にそれぞれ別の変形を与えて表示させてみましょう。
これを見てどうでしょう？
満足しました？
僕はとても不満というか残念です、なんでしょう？この継ぎ目。
各ブラウザともどうやらこのような仕様になっているようで、クリップの痕が残ってしまい、継ぎ目に隙間が出ます。
三角形を継ぎ合わすだけでは解決できません。
ここは一つ、簡単な方法で解決してみましょう。
アイデアとしては、セグメント1のクリップ領域を、三角形ではなく、四角形にしようという単純なものです。
つまり、セグメント1の『左上→右上→左下』だった三角形を、『左上→右上→右下→左下』にして、四角形にしてしまい、上にセグメント2を「乗せる」ように見せて隙間をなくすという方法。
ただし、セグメント1は無駄な領域までレンダリングしてしまうので、パフォーマンス的に良いかどうかは、実用レベルだと別な方法も検討しないといけないかもしれません。
こういったことをやってくれるライブラリはあるんですが、HTMLをベースとしたPCやスマートフォンの描画系アプリケーションの開発のためには、原理くらいはある程度おさえておいた方がいいかな？と思ってたんですが、結構難しいですね。
何でもライブラリに頼ろうとすると、案件仕様によっては実現困難になりそうなので、画像を変形させる基本中の基本だけでも学んでおきたかったわけです。
もちろん、このままでは何にもなりません。
今回は一つの画像を2個の三角形で分割しましたが、例えば、画像を布やゴムのようにグニャグニャにしたり、扇形にしたり、3D形状にしたり、となると、今回の写真をもっと多く分割していかないといけません。
すると、今回の方法から違う計算方法などを使って実装しないといけなくなるかもしれません。
とにかくまだまだ勉強することはあるってことで。
以上、夏休みの自由研究でした。
]]>