本が無事発売されて、出版記念イベントが開催されました。

（写真は左からマイコミ角竹さん、秋葉、小山田さん、外村さん）

「CSS3 デザインプロフェッショナルガイド」

著者は以下の人たちです。

秋葉秀樹, 秋葉ちひろ, 小山田晃浩, 外村和仁, 蒲生トシヒロ, 宮澤了祐 

僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトやその一部を紹介する実践的なセクションです。

アイデアを織り交ぜ、全てのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので思い入れのある作品になっています、よかったら是非手に取ってみてくださいね。

さてさて、先日5/28には東京に行ってきました、この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。

USTREAMでセミナーの内容を見れます。

前編

後編

◎外村さんセッション-前編-

トップバッターは外村さん、CSS3のtransitionとanimationを解説しています。

書籍には詳しく解説出来なかったイージングの濃い話もあります。

両方ともアニメーションができるプロパティなんですが、動きをtransitionとanimationの違い、記述の方法などを実際作ったデモで解説しています。

■Transitionsプロパティの解説（外村さんセッション）

transition-durationはアニメーションする時間を指定出来ます、例えば...

　transition-duration: 2s:

とすると2秒かけてアニメーションします。

transition-propertyとは、どのプロパティの値をアニメーションするのか？という指定が出来ます。

例えば...

　transition-property: left;

にすると、leftの値に限定してアニメーションします。

　他にもdelay（遅延）やイージングをコントロールできます。

■Animationプロパティの解説（外村さんセッション）

Transitionsと似ているのですが、大きな違いはいくつもあります。

・キーフレームを指定して、例えば開始から50%のタイミングでCSSの数値状態を細かく指定します。

・無限ループが可能です。

・繰り返す回数が指定できます。

animation-directionとは、アニメーション終了時に繰り返しが指定されていると巻き戻しすることも指定出来ます。

　animation-direction: alternate;

にすると、今までのアニメーションの軌道を巻き戻し再生するという変わったプロパティです。

■イージング（外村さんセッション）

・アニメーションの動き方を指定できます。

・「ずっと等速」「最初ゆっくり、だんだん早く」など

CSSでアニメーションさせるのは簡単にできますが、内部でどういう処理が行われているか？という原理をJavaScriptに置き換えて解説してくださいました。

JavaScriptが分からない人でも、できるだけ短いソースで細かく解説してますので興味のある方は動画を停止しながら一つ一つ確認してみてください。

◎小山田さんセッション

まずはCSS3のサポート状況の説明。

古いブラウザへの問題。

■Graceful Degradation（小山田さんセッション）

基準を新しいブラウザに持っていき、古いブラウザには妥協するという考え方。

実際にはTwitterのホームページなどは、角丸やシャドウ、グラデーションなどをCSS3で表現していますが、IE8以前では諦める。

デザインが劣化するけど情報閲覧は可能、機能性も問題ないようにする、といった考え方です。

■Regressive Enhancement（小山田さんセッション）

手法としてPolyfillという方法を使うのですが、Graceful Degradationと違いは古いブラウザへの対応を諦めない、という言い方が正しいかもしれませんが、古いIEなどへの対応を正規のCSS3以外の手法で対応するというもの。

PIEというCSSエミュレータ使って、IE6でもborder-radiusなどを実現できるというもの。

http://www.lawson.co.jp/

などが代表的な例です。

元々背景画像などを指定してPIEで角丸などを使うと、深度の問題で隠れてしまうのでその対策なども紹介しています。くわしくは映像をみてください。

■SVGとSessionStrageを使った実際のサイトの紹介（小山田さんセッション）

http://www.kirishima.co.jp/aji/2011/spring/01/

PolyfillとはCSSだけでなく、HTML5の技術にも対応する考え方です。

例えばこのあたりのライブラリを使うことで古いIEにもHTML5の技術を使うことが可能になります。

◎秋葉のセッション

この言葉を使わなかったんですがHTML5の「Web Socket」を使ってアンケート投票をしました。

双方向通信の面白さが伝わったらうれしいなあ、と。

こちらはスライドも用意しましたので、USTREAMとあわせて見てみてください。

スライドURL（PDF: 3.9MB）

それでは、本をぜひ、よろしくお願いします！！

以下は参考サイト[ http://css-3d.org/space-cube-1.htm ]をスクリーンショットしてみました。

Chrome13.0.767.1 devで確認、CSS3 3D transformsが効いています。

amazonではすでに公開されています。

どういうコンセプトかというと、大きく3つの章に分けられています。

入門的な章と、リファレンス的な章と、ビジュアルサンプルの章。

僕はビジュアルサンプルを担当しました。

始めは、そもそもCSS3ってどんなものか？とか、どんな場面でうまく使うべきか？などを主に蒲生さんが担当してます。

これはどちらかというと、私たちフロント周りの制作をしている人やデザイナーさん向けなので、

今までの書籍などを読んで、どうしても難しく考えがちな人に読んでもらいたいです。

そして小山田さんや外村さんはとてもCSS3周りの仕様書などに詳しく、CSS3のリファレンスを担当しています。

彼らの実績豊富な知識と常に新しい情報を発信しているCSS3の最新の動向などを、分かりやすく解説したものです。

そして僕が担当したビジュアルサンプルでは、実際CSS3で作ったサンプルを公開してます。

単に画像を使わずにボタンを作ったり、アニメーションや3Dゲームの応用を解説したり、商品ギャラリーの見せ方だったり、フォームをカスタマイズしてもっと便利にしたり、出来るだけ分かりやすく、マニアックにならないように作ったつもりです。

実は、執筆途中でFirefoxのバージョンが4になったり、Operaのバージョンが11になったり、それによって書き直しが発生したところが大変でした。

例えばFirefox、3.6までは遷移（アニメーションのようなもの）を行うtransitionプロパティがサポートされてなかったけれど、4でサポートされだした、とか。

OperaではCSS3グラデーションが11から直線グラデーションだけサポートされたとか。

対応ブラウザの確認をしたり、不具合やクセがないか確認したり。

そんな中こんどはInternetExploler 10の発表があって、Platform Previewがダウンロード出来るようになってるので、そっちも調べたり。

本当に過渡期なんですね、まさにまっただ中。

さてさて、今日はとても簡単なサンプルなんですが、Safariで実装されているCSS3の3Dトランスフォームを試したいと思います。

書籍では、3Dカードゲームのサンプルを執筆していますが、これはもっと簡単なもの。

平面の広大な地図を上空に見おろし、視点を回転させるようにしてみましょう。

CSS3にカメラオブジェクトなんてないですね。だから地図を立体回転させて、自分が回っているようにみせます。

ただ、この画像はちょっと使用上問題があるので、実際のサンプルでは「白地図、世界地図、日本地図が無料【白地図専門店】」さんからダウンロードさせていただきました、ありがとうございます。

これだけ、つまり地図をdivタグで囲っただけです。

そこでCSSにより、横軸（X軸）を50度回転させます。

Safariで見るとこんな感じです。

これでは、縦がつぶれて見えるだけです。

ではこれに「遠近感」をつけます。

CSS側で、まずbody要素に遠近感をつけます。

結果、Safariではこう見えます。

気になるのは、300pxという数値ではないでしょうか？

この数値、実は大きくなればなるほど、平面的に近づいていきます。

ゼロだと、まともに見えることが出来ません、数値が小さければ、遠近感もキツくなります。（このあたりは書籍を読んでいただけたら。）

さて、それではキーボードの左右（←と→）で視点を360度回転するようにしましょう。

回転させる対象はdiv.worldです。

そして回転する軸ですが、これはrotateZになります。

これは元々地図を真っ正面から見るとZ方向の奥に軸を置いて回転させることになりますよね？

それが親のbody要素にperspectiveがかかっているせいで、Y軸と勘違いしそうですが、Z軸を回転させることが正しいのです。

この値を4度ずつ足したり引いたりすると、地図が回ります。

サンプルはこちら

サンプル(Safariで見ましょう)

では、カクカク動くのは毎回、角度が更新されているので、瞬間で角度が変わるのではなく、それをつなげるようにアニメーションさせたいので、ここではCSS3のtransitionプロパティを使います。

CSSファイルにはdiv.worldに以下を記述します。

上記は「linear」がポイントです、イージングすると「くいっくいっ」と、変な動きになるので、ここはイージングなしでいきます。

今度はカクカクせず、動きます。transitionが効いているからですね。

サンプル(Safariで見ましょう)

でも、これだとキーを押したタイミングで一回回転したら止まります。

ここは一つ、transitionを使わずに、JavaScriptで一定間隔で数値を入れ替えた方が良さそうです。

角度が入っている変数に、プラスかマイナスのスピードを都度加算するといいかな？と。

サンプル(Safariで見ましょう)

こちらになります。

CSS3 Easy Gradation Editor "Grad2" < http://grad2.ecoloniq.jp/ >

最近Webkit系とMozilla系のCSS3グラデーションの記述がW3Cの規定に統一されるらしく、もうすぐ記述がひとつにまとまるって話を聞きました。

なので、近いうち、吐き出されるコードを見直す必要があるんですが、、、

以前、CSS3グラデーションを生成するサイト「Grad? Gradient!」を作って公開しましたが、使ってみると非常に使いづらい点がいくつかあり、悶々していたので以下の点を改善点として新しく作り直しました。

で、以下のように手段を変更しました。

サンプルはこちら。

といった感じで、キーワードで色を指定すると、その通りに変わってくれます。 さらに、もっと細かく設定したい場合、CSSのカラー値（#ff0000で赤、など）を指定してください。 原色に近いほど効果が得られやすいでしょう。

僕のMac Safari 5.0.2で、「http://html5test.com/」にアクセスしてみた所、「Ogg Theora support」に「Yes」のチェックが入っていました。

だから、Ogg形式の動画をHTML5のVideoで試した所、SafariでOggが再生出来ました。

これは他のMac主要ブラウザ、全部がOgg対応、ワンビデオ、マルチユースだ！と、ぬか喜びをしてしまってたんです。。

で、デジクリの連載でご一緒させてもらっている古籏一浩さん[http://www.openspc2.org/]（大先生！）に「SafariでOggはサポートしてないよ〜」と言われて拍子抜けしてたんですが、そう言われても動いているし。。。

［撮影：飯田昌之］（写真は顔出しNGの方のため、お顔にボカシを入れています。）

11月30日に大阪で行われる、マイクロソフト特集のCSS Nite in OSAKA, Vol.25に登壇することになりました。（実は1年以上ぶり）

マイクロソフトさんはH.264のパテントグループの一員なんですよね、たしか。

これについてはまた後日。。

ついに今週になりました。東京のCSS Niteに出演するのは初めてです。

平日のお忙しい時間となりますが、出来たら銀座でお会いしましょう！！

ではでは！

すごい人の数だった。（写真はOperaのダニエル・デイビスさん）
2010年11月5日〜6日の2日間にわたって、大阪南港ATCで開催された関西オープンソースフォーラム。
僕はなぜか、HTML5のライブコーダーとして出演。

Operaのエバンジェリスト、ダニエル・デイビスさん、Googleの北村英志さんとも仲良くさせていただき、「また今度大阪で！」と伝えておきましたが、果たして伝わっているでしょうか？？

さて僕のセッションは簡単ではありますが、HTML5 canvasで作るお絵かきアプリを作ってみました。
本編ではもっと簡単なんですが、ここでは「もうちょっと書いたらこんなのも出来ますよ」という、黒板付き、色をドロップダウンで選べて、線の太さもスライダーで変更出来るアプリのコードを書いておきます。
これが当日来ていただいた方に見てもらった、例のヤツです。

Operaのダニエルさんに教えてもらった大事な事。
JavaScript内にclear()というメソッドを使ったらダメだよ、予約されているから。という事でした。ありがとうございます！！

この画像をクリックしたらデモに飛ぶよ！試してみてね〜。

↓↓↓↓↓

デモも交えてみました。

さて、来てくれた宮崎の人だけでなく、熊本や福岡や鹿児島など、九州から駆けつけてくれた人たち、ほんとにお疲れさまでした！

カタい椅子に座りっぱなしだと疲れますね。

ホント、みなさん熱心。

レポートはくろ。さんという素敵な女性の方で、カメラウーマンも担当されてました。

彼女のブログでレポートされてます。すばらしい！！

↓↓↓

さてさて、フォローアップは実行委員の方から行くでしょうけど、僕がセミナーの始めに、カオにマーカーを付けて東国原知事に変身したFlashのAR版。

FLARToolKitを使って是非みなさんもハナにマーカーをテープで貼付けて変身してください。

※Webカメラが付いている、接続されている環境が必要です。

【手順1】

PDFをダウンロード。→　marker.pdf

プリントアウトするか、スマートフォンのカメラなどでマーカーを撮影。

【手順2】

プリントアウトした場合、うまく切って、セロテープでハナに貼付け（しなくてもいいけど）

こちらのURLに行ってください。

自分の顔を映し出すと、はい、アナタも東さん。

以上です。

また今後もよろしくお願いします！

ありがとうございました！！

フォーム関係のHTML5実装ってOperaしかほとんど実装してないんでない？って思ってたけど、Chrome, Safariでも表示された、おお〜。

input要素のtypeをrangeに、min属性に0を指定しといて、デフォルトの場合だとツマミが真ん中なので、valueに0を入れておきます。

ここで気をつけないといけないのは、DOMが読み込み終わった段階だけではvideoの長さは取れないので、本来はvideoのロード完了を待ってから

range.max = video.duration;

しないとダメですね。ネットにあげてから気づいたけど、気づけよ、、、って感じですね。

JavaScriptには、videoをaddEventListener("timeupdate",・・・で監視しておけば、再生中に断続的にイベントが発生するのでこれをキャッチしつつ、input要素のvalueの値を入れ直すことで動いているように見えます。

このファイルは、videoのロード完了イベントが設定されてないので、秒数のところがNaNになる、当然ですが、このままあげておきます。

これを基に

と直して、次回の読書会にて報告することにしよう。

今回の勉強で僕として分かった事。

ブラウザがvideo, audioのどのコーデックを実装しているかどうか。

調べる方法。

そして、webkitがwebMを実装していた（訂正：Firefox 4 beta、Opera 10.6、Chrome 6以降でwebMを採用）って言われたんですが、ここはちゃんと調べないといけないな。

@ryuoneさん、@yoshikawa_tさん情報ありがとうございます！

※ちなみにMiro Video Converter [http://www.mirovideoconverter.com/]を使って、動画をTheoraに変換すると、ogg拡張子のファイルが生成された。

これをhtmlで使ってみた。

これ、Mac版のSafari5, Chrome8, Firefox4Beta全部で生成された。

びっくり。

Windows版のメジャーブラウザとIE9はどうなるだろう？

IE9BetaはH.264をサポートしているらしく、WebMのVP8コーデックは、コーデックそのものをインストールしないと見れないらしい。

ちょっと自分なりにマッピングだけ試してみます。結構簡単に出来ます。

詳しくは英語ですが

デモはこちら　→　http://acko.net/files/projective/index.html

原理はcanvasのコンテキストが持つメソッドtransformメソッドを使っているようです。

各頂点にアクセスしたりして座標を入れ替え出来たら、布みたいにユラユラと揺らせたり3D表現も可能ですね、そういえば布のように画像を揺らすデモもありますね。

js cloth

やはりアフィン行列変換は理解しとかないと使いこなすのは難しそう、さらに悩みは続く、、、。