日記
CSS Nite LP 9.2 (reprise) フォローアップ
6 月 5 日に行われた CSS Nite LP 9.2 で HTML5 についてのセッションで益子さんと共に登壇をいたしました。
4 月に行われた CSS Nite LP 9 の内容に加え、文書構造とその関連要素型の解説、canvas や svg、math などの埋込み要素型についても触れました。
アンケートのコメントとしていくつか質問をいただきましたので以下にまとめました。補足として参考にしていただけば幸いです。
a 要素などに音をつけたりすることは可能でしょうか ?
可能です。audio 要素は JavaScript と連携することができるので、例えば a 要素のマウスオーバー時に特定の音声を再生するといったことができます。もちろん、 a 要素以外に再生イベントを割り当てることも可能です。簡単な demo を作成しましたのでご参考にどうぞ。
マウスオーバー時に音声を再生する demo (Fx, Opera, Webkit (Desktop, iPad))
ただ、現在の iPhone では video や audio の再生が Safari 内で実行されないので iPhone, iPod touch への応用はいまのところ難有りです。iPad は問題ありません。
video 要素は IE で再生できるのでしょうか ? また、それぞれの Web ブラウザーでサポートされているファイル形式は ?
video 要素は現状、Fx, Opera, Webkit 系で対応しています。また IE 9 から対応予定です。残念ながら IE 6, 7, 8 では video 要素で動画を再生することはできませんが、JavaScript と SWF を組み合わせた フォールバック (代替手段) は既にいくつか知られています。例えば flowplayer を利用した html5media や Video JS、JW Player を利用した Video For Everybody などが存在します。
また、現時点で各 Web ブラウザーが対応している動画の形式は以下のとおりです。
| Firefox | Opera | Safari | Chrome | IE9 | IE6~8 | |
|---|---|---|---|---|---|---|
| H.264 (mp4,mov) | × | × | ○ | ○ | ○ | × |
| Ogg Theora | ○ | ○ | × | ○ | ×? | × |
| WebM | ○ | ○ | × | ○ | △? | × |
video 要素、audio 要素のコントロール部分をデザインすることは可能でしょうか ?
はい。可能です。JavaScript で video や audio に命令することができるので JavaScript と CSS を組み合わせて実現できます。video 要素を例にとって demo を作成してみましたのでご参考にどうぞ。
Dreamweaver に機能拡張などを追加していますか ?
はい。Adobe Dreamweaver CS5 HTML5 Pack をインストールしています。この機能拡張を使うことで、HTML5 の要素型と属性や CSS3 入力補完が追加されたり、Multiscreen Preview panel の機能を利用できます。
また、セッションとは直接関係ないのですが「ゲーム好きですか ?」という質問もいただきました。反応していただいてありがとうございます。一応…Fantasy Earth Zero というゲームをやっています !
「佐藤可士和 × 優クリエイト特別講演会」に参加してきました
先日、「佐藤可士和 × 優クリエイト特別講演会」に参加してきました。講演でお話をお聞きし、やっぱりすごい人だなと。
講演の前半はユニクロでの仕事に関するお話がありました。
「ほとんどユニクロの人です」
- 佐藤可士和氏はユニクロがニューヨーク時にはパッケージや商品名から UT、+J などの事業、ロゴ、フォント、地図、ショッピングバッグ、セロテープ、店員が使用するペンにいたるまで、ほとんどすべての物をデザイン。
- この成功の後、「これからは作るのをやめましょう」といわれた。全世界のユニクロを作るのは無理。今はプロデュースをしてる。
「僕が見なくても僕がやったように見える」グラフィックデザインのシステム
全部を作らないけど全部同じトーンに見えるシステム。どうやったらビジュアルのコントロールのシステムをつくれるかに興味がある人のこと。
- ユニクロではロゴ、フォント、完璧なマニュアルを用意し、これにより上記のシステムを作ることができた。
- フォントはモリサワと協力しレギュラー、ボールドなどのファミリーやロシア語なども用意
- マニュアルとしてものすごくきっちり作った余白の取り方などのデザインルール
- 一つづつを作っていってもなかなか解決しない。これから大切なのは考え方をデザインすること。
- 今やってるのはユニクロの財産になっていく一部のアイコンなど。これを押さえておけば展開していける。
後半はふじようちえんでのお仕事に関するお話がありました。
思ったこと
大きな仕事であればあるほどトンマナはすごく大切だと思いました。あと、デザインはただ作ることなのではなくて、コンセプトの考え方と情報の整理を具現化することなんだろうなー。すごく勉強になりました。
新宿プログラマーズカフェナイト : SVG ネタで LT に参加しました
新宿御苑前 IDC フロンティア 10F セミナールームで行われた新宿プログラマーズカフェナイトのライトニングトークに参加しました。
自分はあまり興味はもっていただけないだろうと思いつつも SVG をネタを語らせていただきました。
参加者の皆様、フロントエンドなネタに反応していただきありがとうございました。
- 使用したスライド : <SVG/> (PDF)
- 使用した demo (今のところ Firefox 3.6以上専用。)
- 使用しわすれた demo (スライダーのみ。IE 9 PP, Opera, Fx, Webkit で動作)
demo について
demo の見所を以下にまとめてみました。
- スライダーを SVG で再現
- canvas と違い、SVG は描いた図形一つずつが DOM として維持される。また、それらの図形にはイベントを登録することができる。なので UI のパーツなどに向いている。transform による傾きなども可能。
- HTML とシームレス
- Flash などと違い、HTML とシームレスに扱うことができる。HTML の中に SVG を書くこともできるし、foreignObject により、SVG の中に HTML を書くこともできる。この demo では、 SVG 中に video 要素および p 要素を表示している。なお、この demo では foreignObject に SVG Filter を適用することで、間接的に HTML の要素にも Filter 効果を適用できているが、Fx 3.6 からは HTML の要素にも SVG Filter を適用することができる。これについては以前 post した『SVG の filter, mask, clip を HTML の要素に適用する (Fx 3.5 用)』を参照していただきたい。
- SVG の Filter effect
- SVG には Filter という効果がある。これは SVG の CSS を使い、SVG の要素に適用することができる。SVG の Filter は原始フィルターの組み合わせにより実現することができる。これにより、応用で様々な効果を作ることができる。例えば、ドロップシャドウの場合、
- 自分のアルファチャンネルをコピー
- コピーしたアルファチャンネルをずらす
- コピーしたアルファチャンネルをぼかす
また、懇親会では引き続きライトニングトークとして SVG を HTML 上に表示する方法を 7 つ紹介させていただきました。これについてもまたの機会に post したいと思います。
やっぱり技術者の人の前で話すのおもしろいなぁ。いい経験になりました ! 開催側の方、そして hisasue さん、ありがとうございました !
CSS Nite LP, Disk 9 Coder’s Higher に出演します + 「第 2 回コーディングコンテスト」
アナウンスが遅れてしまったのですが 2010 年 4 月 17 日に CSS Nite LP, Disk 9 というコーディング / マークアップに関するイベントが行われるのですが、このイベントに出演することになりました。
内容は
- ワークフロー
- パフォーマンス
- HTML5
- HTML5 周辺 API
- CSS3
- jQuery
などが中心です。
この記事を書いている時点で残席がすでに 10 ほどとなっておりますので参加をお考えの方はお早めにどうぞ。
このイベントに合わせて『第 2 回コーディングコンテスト』が開催されます。今回は弊社主催で、HTML5 と CSS3 を存分に使うことができる内容です。
業務等ではまだ実用段階ではありませんが、この機会に勉強 + 腕試しをしてみてはいかがでしょうか。
ちなみにこの告知サイト、自分が実装しました。もしよかったらソースコードもみてくださいね !
第13回 Sugamo.css
いろいろな都合で雪山ツアーに行けなくなってしまったので sugamo.css に参加してきました。今回は ルノアール 新宿区役所横店 6号室 の大部屋で行われ、30人弱の人が参加されていました。人が多い分ライトニングトークが多くてよかったかも。でも濃い雑談は少なめでした。
以下ライトニングトークのメモ
hokaccha さん
Ajax、Comet、WebSocket で実装したチャット 3 種の Demo。動く Demo を見ながらそれぞれの特徴などの紹介がありました。
- いままで:リクエストに対してレスポンス。単方向 / プル型
- リアルタイムウェブ:双方向 / プッシュ型。サーバ側、クライアント側で同期できる
- polling
- XHRとかでリクエストを連発する。実際はpull
- Comet
- コネクションを張りっぱなし。リクエストを送ってもイベントがあるまでレスポンスを返さない。擬似的プッシュ型
- flash
- 普通にSocket通信
- WebSocket
- JS でできる Socket。現在は Chome でサポート
doke さん
Photoshop 用のレイヤー分の PNG 書き出しスクリプトと Flash 用の PNG 読み込みスクリプトの Demo。マクロとか作っておくのっていいことだよなぁと再確認しました。
neotag さん
border-radius などを用いて HTML の要素で時計を作り、transform で時計の針にあたる要素を回すといった Demo。:target に対して transition を割り当てていたところになるほど ! と感じました。
hitoyam さん
SVG + SMIL Animation の Demo。Abode Illutrator を使い SVG で書き出したベクターグラフィクスを動かしていました。
自分
いろいろな SVG を background-image に適用する Demo。実用的ではないですが近々ブログ記事として。
IMAGEDRIVE さん
MT のテンプレートに Microformats の自動埋め込みを入れ込んだ Demo。メタデータは CMS とか使わないとめんどくさそうなのでよさそうですしね ! でもいろんな形式があって自分はどれを使うか悩んでいつまでも実装できないでいます…。これは別の勉強会で論議できるといいなぁ。
Takazudo さん
CSS3 の Demo。特にレイアウト関連のプロパティが勉強になりました。まとめがすっきりまとまっていていい感じでした。CSS Nite が楽しみです。