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

意外にカンタン。

Internet Explorer 9 の新機能を

実装してみる

Pinned Site - Integrating Your Site With Windows 7

鈴木 章太郎

アーキテクトエバンジェリスト / HTML5 Champ

日本マイクロソフト株式会社

デベロッパー & プラットフォーム統括本部

自己紹介

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

バンド活動 (Gt. を担当) 。 _{Blogs: http://blogs. msdn.com/b/shosuz}

アジェンダ

PAGE 3

ピン留めサイトとは？対応済みサイトご紹介

カスタムジャンプリスト作成

まずは基本から

スタートメニューへの追加

ジャンプリストの追加

ユーザーへの通知を提供しよう

夢中にさせる

快速な

収束された

クリーンな

一貫性のある

Web サイトをアプリケーションのように

Web はどこまでアプリケーションに近づいていくのか? PAGE 4

ジャンプリスト

カスタムジャンプサイト

サムネールボタン

ユーザーへの通知

ブラウザー UI カスタマイズ

Site Mode の特長

PAGE 5

A Real World Pinned Site – 対応済みサイトご紹介

まずは基本から



メタ要素を使いカスタム

の詳細を提供する

 ファビコンを作成し追加 ※  独自のファビコンができた ら、当該Webサイトがその ファビコンを認識している ことを確認  アプリケーション名、ツー ルヒント及びいくつか他の プロパティを設定可能 ※ http://www.xiconeditor.com

Enhancing Your Site: まずは基本から

まずは基本から

メタ要素を使いカスタムの詳細を提供する

<link rel="shortcut icon" href="/favicon.ico" />

<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" /> PAGE 9

スタートメニューへの追加

 window.external.msAddSiteMode()  スタートメニューに追加可能  どのような HTML 要素からも JavaScript で キックできる  当該サイトが、ピン留めサイトから起動さ れたのかどうかを window.external.msIsSiteMode メソッドで判断可能（Boolean型） True = ピン留めサイト、False＝通常

Enhancing Your Site:スタートメニューへの追加

スタートメニューへの追加

window.external.msAddSiteMode()

<a onclick="window.external.msAddSiteMode();“

href="#">Add Website</a><br />

window.external.msIsSiteMode

PAGE 12

ジャンプリストを追加しよう

 ユーザーに最もよく使用される機能であり、 ユーザーに提供すべきと判断した、アプリ ケーションの特定のリンク  これらは他のピン留めサイトの構成と同じ ように、meta 要素で定義

 meta nameは msapplication-task

 下記を含むデータを提供する必要あり  Name – ジャンプ リスト中でユーザーに表示 される内容  Action-uri –実行されるURIで、プロトコルと しては、 HTTP 、HTTPS 、そしてFTP だけを 使用可能  Icon-uri –表示するアイコン ファイルを取得 する場所

Enhancing Your Site: ジャンプリストを追加しよう

ジャンプリストの追加

<meta name="msapplication-task" content="name=これは「タスク」に一覧表示されます; action-uri=Page1.html;icon-uri=./images/calc.ico"/> <meta name="msapplication-task" content="name=これも「タスク」に一覧表示されます; action-uri=Page2.html;icon-uri=./images/cashregi.ico"/> PAGE 15

ユーザーへの通知を提供しよう

 MsSiteModeSetIconOverlay メソッドでオーバーレイアイコンを表示可能  タスク バー ボタンに追加できる  ブラウザーのウィンドウが最小化または別のウィンドウによってブロックされて いるときにも、Web サイトに注目を集めることが可能  重要で長期にわたる状態、ネットワークの状態、例えばオンライン ステータス、 新着メールの通知を提供可能  注意点  適切な通知の頻度を検討すべき  あまりにも頻繁だと、多くの場合、ネガティブなユーザー体験を作成する危険性 が高まり、ユーザーが通知を無視しはじめる

Enhancing Your Site:ユーザーへの通知を提供しよう

ユーザーへの通知を提供しよう

window.external.msSiteModeSetIconOverlay

('http://host/star.ico', 'Complete');

window.external.msSiteModeClearIconOverlay();

カスタムジャンプリスト作成

 通常のジャンプリストは、プログラムから変更できない  5 つ以上の項目を追加することができない  独自にカスタム ジャンプ リスト カテゴリーを追加し、JavaScript を 使って動的に追加したりリストから項目を削除できる  カスタムジャンプ リストを追加するには  カテゴリの作成 - 関数の作成 例: addItems()  アイテムの追加 - getElementsByTagName で個別アイテム追加  一覧の表示 - msSiteModeShowJumpList()の呼び出し  当該ジャンプ リストをオフにするメソッドの追加  msSiteModeClearJumpList() の呼び出し

Enhancing Your Site: カスタムジャンプリスト作成

カスタムジャンプリスト作成 (1)

function onCreateCustomJumplist() { // カスタムリストのタイトルを設定します // カスタムリストは１つだけ定義できます。 window.external.msSiteModeCreateJumplist ("サンプルのカスタムリスト"); window.external.msSiteModeClearJumplist(); PAGE 21

カスタムジャンプリスト作成 (2)

// カスタムリスト中には最大10個までアイテムを追加できます // 並び順は、最後に追加したものが、一番上に表示されます window.external.msSiteModeAddJumpListItem

("JavaScriptで追加したメニューその３", "Page5.html", "./images/reportChart.ico"); window.external.msSiteModeAddJumpListItem

("JavaScriptで追加したメニューその２", "Page4.html", "./images/note.ico");

window.external.msSiteModeAddJumpListItem(new Date().toLocaleString() + "更新", "Page3.html", "./images/chair.ico");

// ジャンプリストの内容を更新します。

window.external.msSiteModeShowJumplist(); } PAGE 22

カスタムジャンプリスト作成 (3)

function onClearCustomJumplist() { window.external.msSiteModeClearJumplist(); // ジャンプリストの内容を更新します。 window.external.msSiteModeShowJumplist(); } PAGE 23

まとめ



ピン留めサイト機能は、IE9の特長である“洗練”の一つ



Windows 7 との統合により、アプリケーションとしての

位置づけを高める



自分のWeb サイトへの滞在時間もアクセス率もアップ



実装も難しくないので、ぜひやってみましょう！

PAGE 24

リソース

 Internet Explorer Developer Center

http://msdn.com/ie

 Pinned Site Guide

http://msdn.microsoft.com/library/gg131029(VS.85).aspx  Windows User Experience Interaction Guidelines

http://msdn.microsoft.com/en-us/library/aa511446.aspx

 Channel 9 Taskbar Related Videos

http://channel9.msdn.com/tags/Taskbar/  Icon Guidelines http://msdn.microsoft.com/en-us/library/aa511280.aspx  Icon Editor http://www.xiconeditor.com/ PAGE 25

© 2011 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.