Internet Explorer 9 の Web 制作者向け新機能の活用 マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部田辺茂也
本日の内容 Internet Explorer 9 のご紹介 固定サイト (Pinned Site) のご紹介 その他の開発者向け新機能のご紹介 2
Windows Internet Explorer 9 Platform Preview #6 3
IE9 の開発コンセプト PC のハードウェアリソースを最大活用 主役はブラウザーではなく Web サイト 安全性 安定性 プライバシーの向上 同一のマークアップの実現 レイアウトエンジン グラフィックとテキストの表示を GPU で高速化 新しい JavaScript エンジン Web が際立つ新しいユーザーインターフェース ワンクリックナビゲーション Windows 7 に最適化 業界最高水準のセキュリティ 抜群の安定性 ユーザーによるプライバシー管理 HTML 5 をはじめとする次世代 Web 標準規格に準拠 W3C のワーキンググループに積極的に参加し 仕様策定に協力 テストキットを提供 4
主役はブラウザーではなく Web 5
固定サイト (Pinned Site) 6
7
固定サイトとは サイトをピン止めするためのコンテンツの変更は不要 固定サイトによる拡張 スタートメニューへの登録アイコンのカスタマイズジャンプリストの登録サムバーボタンの追加 8
固定サイトとは 目指すもの ユーザーとお気に入りの距離を縮める ブラウザー外で ウェブサイトのブランドを表示できる ウェブサイトとデスクトップの違いを意識させない シームレスな操作性 Windows アプリケーションと同様の ユーザーとの対話 ウェブサイト側で ユーザーとの対話やナビゲーションをコントロール どのウェブサイトでも利用可能 技術的特徴 一般の Internet Explorer と別のプロセスツリー サイトごとに Application ID を生成 BHO やその他のツールバーはロードされない 9
Windows 7 のタスクバー ジャンプリスト 縮小表示 ターゲットカスタムカテゴリー 縮小表示ツールバー タスク アイコン進行状況バーアイコンオーバーレイ デスクバンド タスクバー 10
固定サイトのカスタマイズ 全ユーザーに共通なカスタマイズを Meta タグで設定 アプリケーション名 デスクトップツールチップ 開始 URLs ウィンドウサイズ 戻る 進むボタンの色 <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
ジャンプリストの追加 Windows 7 への統合 12 <meta name= msapplication-task content= name= 電子メールの作成 ; action-uri=http://host/newmail.htm; icon-uri=http://host/mail.ico"/> <meta name="msapplication-task" content= name= カレンダー ; action-uri=http://host2/newappt.htm; icon-uri=http://host2/appt.ico"/> Name msapplication-task Content name = タスク名 action-uri = URI ( 絶対 / 相対 ) icon-uri = URI ( 絶対 / 相対 )
アイコンのカスタマイズ 標準的な方法でアイコンを指定 標準的な方法でアイコンを指定 <link rel="shortcut icon" href="/favicon.ico" /> ベストプラクティス アイコンのサイズ 推奨 : 16x16, 32x32, 48x48 最適 : 16x16, 24x24, 32x32, 64x64 機能バージョン 96dpi 120dpi 144dpi 13 新しいタブ IE9 32x32 40x40* 48x48 Pinned Site: タスクバー スタートメニュー IE9 32x32 48x48 64x64 Pinned Site: フレーム IE9 24x24 32x32 48x48 タブ お気に入り IE8, IE9 16x16 24x24 24x24
アイコンエディター X-Icon Editor http://www.xiconeditor.com/ HTML5 アプリ 16x16, 24x24, 32x32, 64x64 サイズのアイコンを一度に作成可能 画像読込編集確認 保存 14
ジャンプリストのカスタマイズ ジャンプリストカテゴリーの追加 15 利用例 ユーザーごとのタスク 通知 利用方法 Create Category List Create List Items Display List Clear List window.external.mssitemodecreatejumplist('list1'); window.external.mssitemodeaddjumplistitem('item 1', 'http://host/item1.html', 'http://host/images/item1.ico'); window.external.mssitemodeshowjumplist(); window.external.mssitemodeclearjumplist();
ジャンプリストと API の対応 mssitemodecreatejumplist('trendline') mssitemodeaddjumplistitem( TRENDLINE, ) <META name="msapplication-task content="name=trendline.> 16
オーバーレイアイコン ユーザーへの通知や進行状況を表示する 利用例 通知 ステータス 利用方法 オーバーレイのセット オーバーレイのクリア window.external.mssitemodeseticonoverlay( 'http://host/star.ico', 'Complete'); window.external.mssitemodecleariconoverlay(); 17
サムネイルツールバーボタン 利用例 ウィンドウに戻ったり表示させずに サイトの操作が可能 クライアントのスクリプトにコマンド送信 利用方法 ボタンの追加 表示 更新 イベントハンドラーのセット ボタンスタイルの追加 表示 18 btn1 = window.external.mssitemodeaddthumbbarbutton ( http://host/images/button1.ico', 'button 1'); document.addeventlistener('msthumbnailclick', handler1, false); window.external.mssitemodeshowthumbbar(); window.external.mssitemodeupdatethumbbarbutton(btn1, false, true);
タスクバーアイコンの点滅 利用例 注意を喚起したい時 ユーザー対応が必要な時 利用方法 アクティベート ユーザー操作によりクリア window.external.mssitemodeactivate(); 19
制限事項 ジャンプリストタスク 5 つまで ジャンプリストカテゴリー カテゴリーは 1 つのみ アイテムは 20 個まで 既定では 10 個まで 縮小表示ツールバーボタン ボタンは 7 個まで 20
21 その他の開発者向け新機能
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); </script> 22
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> 23
Scalable Vector Graphics (SVG) XML で 2D のベクターグラフィックを作成描画 特徴 ピクセルではなくベクターイメージを生成 SVG 1.1 2 nd 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> 24
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"> <!-- Only shown when browser doesn t support video --> <!-- You Could Embed Flash or Silverlight Video Here --> </video> 25
HTML5 <audio> HTML5 <audio> タグをサポート 属性 業界標準の MP3 と AAC audio DOM 経由でスクリプト操作可能 src ソースファイルの場所を指定 autoplay 準備でき次第自動再生 controls コントロールパネルの表示 preload ページロード時に オーディオのロードも開始 <audio src="audio.mp3" id="audiotag" autoplay controls> <!-- Only shown when browser doesn t support audio --> <!-- You could embed Flash or Silverlight audio here --> </video> 26
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> 27
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" /> 28
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; } 29
CSS3 背景とボーダー CSS3 背景とボーダー border-radius プロパティによる丸いコーナー 複数の背景画像 box-shadow プロパティ div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; } 30
F12 開発者ツール DOM へのビジュアルインターフェイスを内蔵 素早い検証 IE9 での新機能 ネットワーク UA 文字列ピッカーコンソールタブ SVG サポート JavaScript 整形 (PP6) 31
参考資料 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 32
参考サイト Beauty of the Web http://www.beautyoftheweb.com/ 新しい Web を体感 Internet Explorer Test Drive http://ietestdrive.com/ 各新機能をチェック 33
34 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.