明日もデザインで食べていこう![11]見た、聞いた、IE9とWP7(Windows Phone7)/秋葉秀樹

投稿:  著者:  読了時間:7分(本文:約3,200文字)


IE9RC版、出ましたね。つい先日大阪で行われた某イベントで、日本マイクロソフトのUXエバンジェリスト春日井さんと共演というカタチで出演させていただきました。テーマはIE9とWP7(Windows Phone7)です。

まだ2つとも正式リリースがはっきりしてないのですが、参加されたみなさんは日本でもまだ触る機会がなかなかないWP7に興味津々だったようで、WP7を取り囲み列が出来ていたくらいです。

WP7はおしゃれ、カッコいいです。はっきり言ってマイクロソフトらしからぬ、と春日井さん本人もそう言っておられたくらいです。今後は、アプリのマーケットをしっかりと充実させることに重点を置いてプロジェクトを進めていくらしいです。確かに! まずはこれがないと、どんだけOSがしっかりしていても売れない...かもしれないから。

ちなみにデベロッパー的には、年間約1万円弱の開発者登録料がかかります。僕はiPhoneのデベロッパーとして年間アップルに10800円ほど払っていますが、そんなに変わらない感じですね、若干安いくらい。それと、学生さんは無料らしいです。

スクール通いの皆さんは、通われているスクールがマイクロソフトの「指定」した教育機関かどうかを確認して、そうであったらWindows Phone7アプリの開発者を目指してみると良いのでは!?



●WP7にはIE9が搭載されるということ

現在HTML5で策定されているAPIの中でも、PC版のIE9と同等の機能が備わるらしく、IE9の大きなウリ(?)でもあるハードウェアアクセラレーションがWP7用IE9でも採用されているらしいです。

まあ、スマホでハードウェアアクセラレーションを駆使すると心配なのは電池のような気がしますが、そのへんどうなんでしょうね?

CSS3に関してもPCのIE同等、後で書くけどtransitionが採用されていません。残念ながらちょっとしたCSSでのアニメーションも出来ないということです。

WP7の発売時期は、今年の後半ということをおっしゃられてました。結構遅いと感じています。理由としては、日本語版のOSに関する情報がまだないらしく、この時点で「日本語のフォントは何を使うんだろう」という事すら? らしいです。

さて、IE9ですが、やはり制作者、デザイナーとして気になるところはCSS3の対応状況と表示の安定性などではないでしょうか? というわけでIE9セッションではこんな話をしました。

●CSS3 2Dtransformを採用

2Dですが、CSS3の変形が可能になったということです。
CSSの部分だとこんな感じで変形が可能になります。

section.demo:nth-of-type(2) img {
-ms-transform: scale(1.2,1);
}

section.demo:nth-of-type(3) img {
-ms-transform: rotate(-10deg);
}

section.demo:nth-of-type(4) img {
-ms-transform: skew(10deg);
}

section.demo:nth-of-type(5) img {
-ms-transform: matrix(1,.2,-.2,1.3,20,30);
}

scaleは、縦と横別々に拡大縮小ができます、サンプルでは横方向に120%拡大しています。
rotateは回転、サンプルでは10度回転しています。
skewは傾斜、10度傾斜させて平行四辺形のような形になります。
matrixはちょっと複雑で、変形なしのデフォルトだとこんな感じです。

-ms-transform: matrix(1,0,0,1,0,0)

カッコの中をカンマ区切りにしますが、6つの数値が必要です、それぞれの役割は以下のようになります。
1番目 ... 横方向の拡大縮小率、scaleと数値の考え方は同じです。
2番目 ... 縦方向の拡大縮小率、scaleと数値の考え方は同じです。
3番目 ... 縦方向に傾斜します、例えば200pxの画像だと20px÷200px=0.1の値を入れると20px下に傾斜します。
4番目 ... 横方向に傾斜します、計算方法は3番目と一緒です。
5番目 ... 横方向の移動距離、上記サンプルにはありませんが、translateの考え方と同じです。
6番目 ... 縦方向の移動距離、上記サンプルにはありませんが、translateの考え方と同じです。
ちなみに5、6番目の場合最新のOperaではpxの単位を付けないと動きません。

●WebMコーデックを採用

Video要素には、マイクロソフトだけあってH.264は外せないな、と思っていましたがココに来て「WebMを採用しました」と春日井さん。

しかし「< http://html5test.com/ >」では、WebMをサポートしていないと表示されましたので、このあたりはしっかり調べてみないといけませんね。

マイクロソフトは、ChromeにもH.264を対応させようとChrome extensionをリリースしたりという状況で、次第にTheora Oggがなくなっていきそうな感じがします。果たして特許ライセンス料金問題は今後どうなっていくか? まだまだ混沌としている問題かもしれないですね。

●ハードウェアアクセラレーション

IE9はcanvasによる描画に対し、ハードウェアアクセラレーションを使ってのデモを披露されていました。確かにChromeと比較してだいぶ速いように見えます。ただ、疑問は「ブラウザごとにだいぶ速度が違ってくるんじゃない?」という制作者側やユーザとしては逆に疑問や心配があったんですが、つい最近、Chromeの次期バージョンもハードウェアアクセラレーションに対応するという記事が出ましたね。

ChromeのGPU H/Wアクセラレーションを試す〜IE 9の優位性もなくなった〜(オルタナティブ ブログ)
< http://blogs.itmedia.co.jp/kichi/2010/10/chromegpu-hwie-.html >

今後は各ブラウザがGPUに対応していくことになりそうだというお話も聞けました。

●対応を見送ったAPIについて

Web SocketやWeb Workersなど、IE9RCでは実装されませんでした。おそらくこのまま正式リリースということになりそうです。これらについては、「(策定されている)仕様自体が不安定な機能を搭載するということになるので見送った」ということです。

これはこれで分かるような気がします。おそらく一部仕様が変更になりました、というのは今後あるでしょうし。他のブラウザのように先行実装は抑えているような気もしますが、今後は安定した機能を採用していくブラウザを目指すIEということらしいので、注目しています。

さて、東京版が来週あります。今回の大阪版と引き続き、もっとIE9をデザイナー視点で切り込んでいきます。それではそれでは。

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

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