本日の内容 Internet Explorer 9 のご紹介固定サイト (Pinned Site) のご紹介その他の開発者向け新機能のご紹介 2

Size: px

Start display at page:

Download "本日の内容 Internet Explorer 9 のご紹介固定サイト (Pinned Site) のご紹介その他の開発者向け新機能のご紹介 2"

みりあぜんじゅう
7 years ago
Views:

1 Internet Explorer 9 の Web 制作者向け新機能の活用マイクロソフト株式会社デベロッパー & プラットフォーム統括本部田辺茂也

2 本日の内容 Internet Explorer 9 のご紹介固定サイト (Pinned Site) のご紹介その他の開発者向け新機能のご紹介 2

3 Windows Internet Explorer 9 Platform Preview #6 3

が際立つ新しいユーザーインターフェースワンクリックナビゲーション Windows 7 に最適化業界最高水準のセキュリティ抜群の安定性

4 IE9 の開発コンセプト PC のハードウェアリソースを最大活用主役はブラウザーではなく Web サイト安全性安定性プライバシーの向上同一のマークアップの実現レイアウトエンジングラフィックとテキストの表示を GPU で高速化新しい JavaScript エンジン Web が際立つ新しいユーザーインターフェースワンクリックナビゲーション Windows 7 に最適化業界最高水準のセキュリティ抜群の安定性ユーザーによるプライバシー管理 HTML 5 をはじめとする次世代 Web 標準規格に準拠 W3C のワーキンググループに積極的に参加し仕様策定に協力テストキットを提供 4

5 主役はブラウザーではなく Web 5

6 固定サイト (Pinned Site) 6

7 7

8 固定サイトとはサイトをピン止めするためのコンテンツの変更は不要固定サイトによる拡張スタートメニューへの登録アイコンのカスタマイズジャンプリストの登録サムバーボタンの追加 8

9 固定サイトとは目指すものユーザーとお気に入りの距離を縮めるブラウザー外でウェブサイトのブランドを表示できるウェブサイトとデスクトップの違いを意識させないシームレスな操作性 Windows アプリケーションと同様のユーザーとの対話ウェブサイト側でユーザーとの対話やナビゲーションをコントロールどのウェブサイトでも利用可能技術的特徴一般の Internet Explorer と別のプロセスツリーサイトごとに Application ID を生成 BHO やその他のツールバーはロードされない 9

10 Windows 7 のタスクバージャンプリスト縮小表示ターゲットカスタムカテゴリー縮小表示ツールバータスクアイコン進行状況バーアイコンオーバーレイデスクバンドタスクバー 10

固定サイトのカスタマイズ全ユーザーに共通なカスタマイズを Meta タグで設定アプリケーション名デスクトップツールチップ開始 URLs ウィンドウサイズ戻る進むボタンの色 <meta name="application-name" content="pinned Name" /> <meta name="msapplication-tooltip" content="start

11 固定サイトのカスタマイズ全ユーザーに共通なカスタマイズを Meta タグで設定アプリケーション名デスクトップツールチップ開始 URLs ウィンドウサイズ戻る進むボタンの色 <meta name="application-name" content="pinned Name" /> <meta name="msapplication-tooltip" content="start Site" /> <meta name="msapplication-starturl" content=" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" content="#ff3300" /> IE9, IE8 モードで有効 11

ico"/> <meta name="msapplication-task" content= name= カレンダー ; action-uri=http://host2/newappt.

12 ジャンプリストの追加 Windows 7 への統合 12 <meta name= msapplication-task content= name= 電子メールの作成 ; action-uri= icon-uri= <meta name="msapplication-task" content= name= カレンダー ; action-uri= icon-uri= Name msapplication-task Content name = タスク名 action-uri = URI ( 絶対 / 相対 ) icon-uri = URI ( 絶対 / 相対 )

13 アイコンのカスタマイズ標準的な方法でアイコンを指定標準的な方法でアイコンを指定 <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

14 アイコンエディター X-Icon Editor HTML5 アプリ 16x16, 24x24, 32x32, 64x64 サイズのアイコンを一度に作成可能画像読込編集確認保存 14

ジャンプリストのカスタマイズジャンプリストカテゴリーの追加 15 利用例ユーザーごとのタスク通知利用方法 Create Category List Create List Items Display List Clear List window.external.mssitemodecreatejumplist('list1'); window.

15 ジャンプリストのカスタマイズジャンプリストカテゴリーの追加 15 利用例ユーザーごとのタスク通知利用方法 Create Category List Create List Items Display List Clear List window.external.mssitemodecreatejumplist('list1'); window.external.mssitemodeaddjumplistitem('item 1', ' ' window.external.mssitemodeshowjumplist(); window.external.mssitemodeclearjumplist();

16 ジャンプリストと API の対応 mssitemodecreatejumplist('trendline') mssitemodeaddjumplistitem( TRENDLINE, ) <META name="msapplication-task content="name=trendline.> 16

17 オーバーレイアイコンユーザーへの通知や進行状況を表示する利用例通知ステータス利用方法オーバーレイのセットオーバーレイのクリア window.external.mssitemodeseticonoverlay( ' 'Complete'); window.external.mssitemodecleariconoverlay(); 17

ico', 'button 1'); document.addeventlistener('msthumbnailclick', handler1, false); window.

18 サムネイルツールバーボタン利用例ウィンドウに戻ったり表示させずにサイトの操作が可能クライアントのスクリプトにコマンド送信利用方法ボタンの追加表示更新イベントハンドラーのセットボタンスタイルの追加表示 18 btn1 = window.external.mssitemodeaddthumbbarbutton ( 'button 1'); document.addeventlistener('msthumbnailclick', handler1, false); window.external.mssitemodeshowthumbbar(); window.external.mssitemodeupdatethumbbarbutton(btn1, false, true);

19 タスクバーアイコンの点滅利用例注意を喚起したい時ユーザー対応が必要な時利用方法アクティベートユーザー操作によりクリア window.external.mssitemodeactivate(); 19

20 制限事項ジャンプリストタスク 5 つまでジャンプリストカテゴリーカテゴリーは 1 つのみアイテムは 20 個まで既定では 10 個まで縮小表示ツールバーボタンボタンは 7 個まで 20

21 21 その他の開発者向け新機能

22 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

23 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

24 Scalable Vector Graphics (SVG) XML で 2D のベクターグラフィックを作成描画特徴ピクセルではなくベクターイメージを生成 SVG 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=" <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg> 24

25 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> 25

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

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

27 WOFF クライアントにないフォントでも自由に利用可能に Web Open Font Format で宣言によりフォント指定 OpenType や TrueType フォントを再パッケージ W3C Fonts Working Group により策定 <style { 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.

28 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

29 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

30 CSS3 背景とボーダー CSS3 背景とボーダー border-radius プロパティによる丸いコーナー複数の背景画像 box-shadow プロパティ div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; } 30

31 F12 開発者ツール DOM へのビジュアルインターフェイスを内蔵素早い検証 IE9 での新機能ネットワーク UA 文字列ピッカーコンソールタブ SVG サポート JavaScript 整形 (PP6) 31

32 参考資料 Internet Explorer デベロッパーセンター Internet Explorer 9 Beta 開発者ガイド IEBlog: User Experiences: Customizing Pinned Sites Pinned Sites ( 英語 ) 32

33 参考サイト Beauty of the Web 新しい Web を体感 Internet Explorer Test Drive 各新機能をチェック 33

34 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.

自己紹介公共営業部門のアーキテクトとして 2003 年入社.NET の技術啓発活動に従事 2006 年現在の部署に異動しエバンジェリストとして UX/Cloud プラットフォームの採用推進と技術啓発活動を担当早稲田大学大学院国際情報通信研究科と中央大学総合政策学部で非常勤講師趣味は久しぶ

自己紹介公共営業部門のアーキテクトとして 2003 年入社.NET の技術啓発活動に従事 2006 年現在の部署に異動しエバンジェリストとして UX/Cloud プラットフォームの採用推進と技術啓発活動を担当早稲田大学大学院国際情報通信研究科と中央大学総合政策学部で非常勤講師趣味は久しぶ意外にカンタン Internet Explorer 9 の新機能を実装してみる Pinned Site - Integrating Your Site With Windows 7 鈴木章太郎アーキテクトエバンジェリスト / HTML5 Champ 日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部 http://blogs.msdn.com/b/shosuz/ 自己紹介公共営業部門のアーキテクトとして

本日の内容 Internet Explorer 9 のご紹介 固定サイト (Pinned Site) のご紹介 その他の開発者向け新機能のご紹介 2

本日の内容 Internet Explorer 9 のご紹介固定サイト (Pinned Site) のご紹介その他の開発者向け新機能のご紹介 2