明日もデザインで食べていこう![07]最もIE6を撲滅したい企業はマイクロソフトである
── 秋葉秀樹 ──

投稿:  著者:


いきなりですが、観てきました、「SPACE BATTLESHIP ヤマト」。ネタバレするといけないので、トレーラーのシーンだけに触れるけど、キムタクって何やらせてもキムタク、ある意味スゴいキャラクターだと思う。古代進がターゲットスコープを睨みつけて引き金を引いて、波動砲を発射させる。これをキムタクがやると、古代進役なのにやっぱり「キムタクが波動砲を打ってる」ってイメージが勝っちゃうのはすごい。

で、この映画、やっぱり賛否両論あるけど僕は良かったと思う。ちなみに、まつむらまきお先生と先日呑みながら話をしていると、「あれはだめだ!」とおっしゃってました。もちろん彼は全てを否定されている訳ではないけど、まつむら先生の話は難しすぎてよくわかりませんでしたわ。。やっぱり初代ヤマトからファンだった同士、それぞれの想いがあるってことですね。

CG制作にはMayaを主に使用しているらしいけど、ヤマトが地面を突き破っていくシーンは別の物理崩壊シミュレーションを使ったらしい。3DS MAXだったかな? たしか。しばらくMayaを触ってないなあ、、、CGの仕事も最近してないせいか、多分すごく忘れていると思う。

●マイクロソフトでプレゼンしてきました

先月の末にマイクロソフト関西支店のセミナールームを借りて、マイクロソフトの特集をやってきました。InternetExplorer 9の話題に興味があった人も多かったんじゃないでしょうか? 平日にも係わらず多くの人が来てくれました。お忙しいところありがとうございました!

マイクロソフトさんより、お二人に登壇してもらいました。UXエバンジェリストの春日井良隆さんと、デベロッパーエバンジェリストの物江修さん。

そして、ユーザを代表して使ってみた感想やデモを交えるセッションを、わたし秋葉とHTML5-WEST.jpコミュニティから村岡正和さん、VisualStudio 2010のユーザセッションには田中朋也さんが出演。

最近、僕は村岡さんとよく「ライブコーディング」を行っています。こないだの関西オープンソースフォーラムでも、京都で開催されたオープンソースカンファレンスでも、コンビで出演して、「またコイツらかよ」と思ってらっしゃる方もいるのでは?(笑

主な製品として「InternetExplorer 9 Beta」と「VisualStudio 2010」。両方とも、まずマイクロソフトのエバンジェリストの方が説明をして、次にユーザレビューを発表するという流れでした。InternetExplorer 9(IE9)は、IEで初めてHTML5やCSS3(※)をサポートし始めたバージョンです。独自実装という路線を突っ走ってきていたIEが「標準」に目を向けているのは良い事だと思います。よね?
(※厳密にはちょっとだけ違い、例えばWebfontなどは現バージョンのIEでもサポートされています)



●InternetExplorer 9 マイクロソフト春日井さんのセッション

僕が受けた印象としては、とても良いブラウザだと思います。所々に「みなさんの嫌いなIE6が、、、」という、マイクロソフトさんの控え目な発言が好印象? でもないか。

この記事のタイトルでもあるとおり、あのIE6を早くなくしたいのは僕ら制作者だけではなく、より強く思っているのはマイクロソフトだということであり、今回のIE9を見ると、その努力が見えてくるはず。

▼高速レンダリングについて

IE9はGPUを使うから、ハードウェア・アクセラレーションによって高速に描画処理を行うというデモを見せてもらった。canvasによる3D描画を他のブラウザと比較してもらったけど、確かに速い、IE9。まあ、ハードの力を借りて動かしてるから比較するとアレだけど、逆にパワーの弱いマシンだとそんなに効果も出ないのかも。

▼ジャンプリストについて

これを見た時、内心「また独自実装か?」と思ったけど、多様化するデバイス(スマートフォンなど)を考えると、何とも言えないか......ココ最近。

画面下のタスクバーに、IE9で開いているページのタブをドラッグすると、そのページのファビコンが表示、収納される。面白いのは、そのページをあらためて開き直してみると、ブラウザの「戻る」ボタンの色が、ファビコン画像内で多く使われている色に合わせて、変色しているという、細かい気の使いよう。(例えばYahoo! Japanのファビコンは「赤」。この場合、「戻るボタン」が赤に変わります)

このファビコンに、マウスを合わせるとポップアップメニューが現れます(これをジャンプリストという)。このポップアップメニューに、このページから、ユーザに誘導させたい主なリンクを表示することが出来ます。クリックして遷移させる事が出来るので、導線確保の助けにもなるでしょうね。

head要素内にmetaタグを使ってこんな風に書きます。
<meta name="msapplication-task" content="name=「リンク先のページ名」 ; action-uri=「リンク先URL」; icon-uri=「ファビコンのURL」">

これを必要な数だけ書けばいいんですね。くわしくは「ie9 ジャンプリスト」で検索!

▼Videoコーデックは現在H.264のみ

ですが、正式リリースまでに、もしかしたらWebMをサポートするかも?
IE9はOggはサポートしないでしょう、とのこと。(実はMacの主要ブラウザは全部Oggに対応)
SafariはOggに正式には対応していません、ただし、コンポーネントをインストールする事でSafariにてOgg形式の動画を再生することが可能です。
記事を書いておきました、こちらをご参照ください。
< http://www.akibahideki.com/blog/htmlcss/safariogghtml5-video.html
>
(2010年12月8日訂正及び追記)



●InternetExplorer 9 Betaを使ったユーザセッション

中身を掘り下げてみると、いっぱいありすぎて時間がないぞ。というわけで、CSS3の一部実装確認と、HTML5ではvideo要素とSVGの対応について、僕と村岡さんでデモをさせてもらいました。

▼CSS3のborder-radiusや複数の背景画像表示

いずれも全く問題なく、他のブラウザと同じように表示されました。あと、疑似クラスと呼ばれるやつ、例えば、リストや表などの「偶数行だけに色をつける」とか、「最後の行だけ色を変える」とか。

例えば「3行目のli要素の背景を赤にする」場合。
li:nth-child(3) { background: red; }

うまくいきました。さらに、偶数行だと
li:nth-child(even) {○○}

これもOK。こんな事も出来るんです。
li:nth-child(2n+5) { background: blue; }

↑カッコの中に注目。
2飛びで繰り返し、背景色を青にするんですが、開始行を5行目からにする場合、上記の通り、なので、、、
li:nth-child(3n+2) { background: blue; }
↑3飛びで背景を青に、2行目からスタート。

ということになります。ただし、プログラミングな人は注意が必要! 通常インデックス番号は0を起点としてカウントしますが、この場合1から始まります。もひとつ、これはDOMの中にあるli全部を全部カウントしてしまうのですが、「同じ親要素の中にある要素だけを対象としたい」場合、
○:nth-of-type(2) {○○}
とする場合もあります。

▼IE9イジメ? 負荷をかけて検証!?

「本当に速くなったのかなあ〜?」と村岡さん。まずはvideo要素。
JavaScriptによるvideo要素を複数生成して、同時にvideoを再生させるデモ。当然多ければ多いほど負荷がかかり処理落ちするだろうと見込んで、再生させたわけですが、3個ぐらいなら全然平気で再生します。

村岡:じゃ、6個いこうか?
秋葉:おいっ! いきなり倍かよ??

再生、おお、問題無し。
マイクロソフトさん、余裕の表情(多分)。

村岡:じゃ、9個いこうか?
秋葉:(Sだな、あんた)←心の中で

さすがGUIのパワー。9個同時再生でもさくさく動いていました。さすがハードもパワーがあるからだろう。こんなIE9のレンダリングに貢献出来るパワーのあるWindows 7を搭載したマシンは、、なんと!!!!???

MacBook。

え〜〜〜〜〜〜!?
そうです、マイクロソフトのセミナールームで、IEのプレゼン使用マシンはMacだったのです! まあ、問題ないそうです。マイクロソフトさんはPC作ってないよね? 多分。だからいいよね。汗

最後にSVGテストなんですが、今回はRaphael.jsを使って、1,000個の円をアニメーションするデモをされてました。他のブラウザと比較しても圧倒的にIE9は速かったです。

●最後に名言(迷言)......「認識しています」とのこと

CSS3のデモを僕がやったときに、まだIE9 Betaでは、text-shadowやCSS3グラデーションがサポートされていませんでした。これは残念です、と春日井さんに伝えたところ、「認識しています」と答えられました。

「分かっているよ、いわれなくても大丈夫だよ、必ず実装するからね」と、いわれているように思えてちょっと安心(自分勝手に解釈)。とにかくココまで頑張っているんだから、悔いのない正式バージョンをリリースしてほしい!

「最もIE6がなくなって欲しいと願う企業はマイクロソフトです」。
打ち上げ中に聞いたこの言葉は印象的だった。

誰かが言ってた。
「IE6でしか動かないシステムを開発し、それを今でも使い続ける企業。あるいはIE6対応から抜けきれない僕らのようなWeb制作者がこのままでは、いつまでたってもIE6を非難するだけで何も変わらない」

「IE6対応は除外、あるいは別料金」とするのであれば、それはそれで革命的なことでしょう。少なくとも業界全体がそう簡単には変われないほど大変だけど、そう願っている人は多いでしょうね。

今後もっと必要とされる技術を学ばないといけないから大変。今はちょっとずつでも試してみることも大事、というわけでもっと色んな事を学んでみます。また色々な勉強会報告させてもらいます。ではでは。

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

・こないだ、こんな気になる記事が出ていました。
「Internet Explorer on Mac」
< http://www.favbrowser.com/internet-explorer-on-mac/
>
これに関して、僕が「これ、知ってます?」って春日井さんに聞いたら、「マイクロソフトでは関与していません」という事でした! 正式に関与を否定、ということですね。

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。