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 機 能 バージョン 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
オーバーレイアイコン ユーザーへの 通 知 や 進 行 状 況 を 表 示 する 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); </script> 21
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 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> 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"> <!-- Only shown when browser doesn t support video --> <!-- You Could Embed Flash or Silverlight Video Here --> </video> 24
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> 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
32 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.