Internet Explorer 9 の Web制作者向け新機能の活用 - Microsoft

Internet Explorer 9 の
Web制作者向け新機能の活用
マイクロソフト株式会社
デベロッパー&プラットフォーム統括本部
田辺茂也
本日の内容
• 固定サイト (Pinned Site) のご紹介
• その他の開発者向け新機能のご紹介
2
3
IE9 の開発コンセプト
4
主役はブラウザーではなく Web
5
固定サイト (Pinned Site)
6
7
固定サイトとは
サイトをピン止めするための
コンテンツの変更は不要
固定サイトによる拡張
プログラムによるピン止め
アイコンのカスタマイズ
ジャンプリストの登録
サムバーボタンの追加
8
固定サイトの特徴
一般の Internet Explorer と別のプロセスツリー
サイトごとに Application ID を生成
BHO やその他のツールバーはロードされない
Windows アプリケーションと同様の操作性
9
Windows 7 のエクスプローラー
10
固定サイトのカスタマイズ
メタタグで必要な情報を提供
<meta name="application-name" content="Pinned Name" />
<meta name="msapplication-tooltip" content="Start Site" />
<meta name="msapplication-starturl"
content="http://host/page.htm" />
<meta name="msapplication-window"
content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#FF3300" />
※ IE9, IE8 モードで有効
11
プログラムでサイトをピン止め
if (window.external.msIsSiteMode) {
if (window.external.msIsSiteMode()) {
// we are already in site mode
}
else {
// Show HTML elements that will promote the
// addition of a pin site to the Programs menu
window.external.msAddSiteMode()
}
}
12
アイコンのカスタマイズ
標準的な方法でアイコンを指定
標準的な方法でアイコンを指定
 <link rel="shortcut icon" href="/favicon.ico" />
ベストプラクティス
 アイコンのサイズ
 推奨: 16x16, 32x32, 48x48
 最適: 16x16, 24x24, 32x32, 64x64
13
機能
バージョン
96dpi
120dpi
144dpi
新しいタブ
IE9
32x32
40x40*
48x48
Pinned Site: タスクバー、 IE9
スタートメニュー
32x32
48x48
64x64
Pinned Site: フレーム
IE9
24x24
32x32
48x48
タブ、お気に入り
IE8, IE9
16x16
24x24
24x24
オーバーレイアイコン
ユーザーへの通知や進行状況を表示する
window.external.msSiteModeSetIconOverlay(
'http://host/star.ico', 'Complete');
window.external.msSiteModeClearIconOverlay();
14
ジャンプリストの追加
Windows 7 への統合
<meta name="msapplication-task" content="name=New Message;
action-uri=http://host/NewMail.htm;
icon-uri=http://host/mail.ico"/>
<meta name="msapplication-task"
content="name=New Appointment;
action-uri=http://host2/NewAppt.htm;
icon-uri=http://host2/Appt.ico"/>
15
ジャンプリストのカスタマイズ
ジャンプリストカテゴリーの追加
window.external.msSiteModeCreateJumplist('Notifications');
window.external.
msSiteModeAddJumpListItem(
'Scrum (37 minutes overdue)',
'http://host/reminders.html',
'http://host/images/bell.ico');
window.external.
msSiteModeShowJumpList();
16
ジャンプリストと API の対応
msSiteModeCreateJumplist ( ‘Developer Goodies')
msSiteModeAddJumpListItem(‘IE on CodePlex‘, …)
<META name="msapplication-task“
content="name=IE TestDrive….>
サムネイルツールバーボタン
var but1 = window.external.msSiteModeAddThumbBarButton(
'http://host/speaker.ico', 'Mute');
document.addEventListener(
'msthumbnailclick', handler, false);
window.external.msSiteModeShowThumbBar();
- ボタンは7つまで
- 追加・削除・非表示・無効化はできない
- タスクと異なり、ウィンドウごと
- メニューやツールバーの機能に最適
18
ボタンの更新
ボタンのプロパティの変更
 window.external.msSiteModeUpdateThumbBarButton(
buttonID, Enabled, Visible)
ボタンのスタイルの変更
var style1 = window.external.msSiteModeAddButtonStyle(
buttonID, IconUrl, ToolTip)
window.external.msSiteModeShowButtonStyle(buttonID, styleID);
19
その他の開発者向け新機能
20
window.msPerformance
新しいパフォーマンス計測機能：W3C Web Timing に準拠
<script type="text/javascript">
var w = window;
var navStart = w.msPerformance.timing.navigationStart + "ms";
var navStartTime = Date(w.msPerformance.timing.navigationStart);
21
</script>
Canvas
 Javascript で 2D の図形を描くことができるブロック要素
 描画方法: path, box, circle, text, ラスターイメージ
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
22
Scalable Vector Graphics (SVG)

XML で 2D のベクターグラフィックを作成描画
 ピクセルではなくベクターイメージを生成
 SVG 1.1 2nd Edition Full specification に準拠

特徴
 SVG 要素に DOM アクセス
 Document structure, scripting, styling, paths, shapes, colors, transforms, gradients,
patterns, masking, clipping, markers, linking and views
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
23
HTML5 <video>

HTML5 <video> タグをサポート

業界標準の MPEG-4/H.264 動画

動画はページ上の他の要素と組み合わせ可能
 HTML コンテンツ、画像、SVG グラフィックス
 GPU 支援による再生

属性

src – ソースファイルの場所を指定

autoplay – 準備でき次第自動再生

controls – 操作パネルを表示

preload – ページロード時に動画のロードも開始

loop – ループ再生

height & width – プレイヤーのサイズを指定
<video src="video.mp4" id="videoTag" width="640px" height="360px">


</video>
24
HTML5 <audio>

HTML5 <audio> タグをサポート
 業界標準の MP3 と AAC audio
 DOM 経由でスクリプト操作可能

属性
 src – ソースファイルの場所を指定
 autoplay –準備でき次第自動再生
 controls – コントロールパネルの表示
 preload – ページロード時に、オーディオのロードも開始
<audio src="audio.mp3" id="audioTag" autoplay controls>


</video>
25
WOFF フォントと @font-face

クライアントにないフォントでも、自由に利用可能に

Web Open Font Format で、サイトごとにフォントを配布
 @font-face 宣言によりフォント指定
 OpenType や TrueType フォントを再パッケージ
 W3C Fonts Working Group により策定
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
This will render using MyFontName in FontFile.woff
</div>
26
CSS3 Media Queries

メディアのプロパティに応じて、スタイルを自動選択
<link href=“mobile.css" rel="stylesheet"
media="screen and (max-width:480px)" type=“
text/css" />
<link href=“netbook.css" rel="stylesheet"
media="screen and (min-width:481px) and (maxwidth: 1024px)"
type="text/css" />
<link href=“laptop.css" rel="stylesheet"
media="screen and (min-width:1025px)" type="text/css" />
27
CSS3 Colors

CSS3 Color
 rgba()、hsla()、アルファカラー関数
 opacity プロパティで、透明度を指定

CSS3 Color キーワード
 CSS3 color キーワードをサポート
 color プロパティ全般で利用可能
div.top {
background-color: rgba(0, 0, 0, 0.5);
color: azure;
}
div.bottom {
background-color: hlsa(0, 0%, 0%, 0.5);
color: cornsilk;
}28
CSS3 背景とボーダー

CSS3 背景とボーダー
 border-radius プロパティによる丸いコーナー
 複数の背景画像
 box-shadow プロパティ
div {
border-radius: 152px 304px 228px 152px;
border-style: double;
border-width: 42px;
padding: 12px;
}
29
F12 開発者ツール
DOM へのビジュアルインターフェイスを内蔵
素早い検証
IE9 での新機能
ネットワーク
UA 文字列ピッカー
コンソールタブ
SVG サポート
30
参考資料
• Internet Explorer デベロッパーセンター
– http://msdn.microsoft.com/ja-jp/ie/default.aspx
• Internet Explorer 9 Beta 開発者ガイド
– http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx
• IEBlog: User Experiences: Customizing Pinned Sites
– http://blogs.msdn.com/b/ie/archive/2010/09/17/userexperiences-customizing-pinned-sites.aspx
• Pinned Sites (英語)
– http://msdn.microsoft.com/en-us/ie/dd797411.aspx
31
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
32

Download Report