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

Size: px

Start display at page:

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

しまなしげまつ
5 years ago
Views:

1 意外にカンタン Internet Explorer 9 の新機能を実装してみる Pinned Site - Integrating Your Site With Windows 7 鈴木章太郎アーキテクトエバンジェリスト / HTML5 Champ 日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部

プラットフォームの採用推進と技術啓発活動を担当早稲田大学大学院国際情報通信研究科と中央大学総合政策学部で非常勤講師

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

3 アジェンダピン留めサイトとは? 対応済みサイトご紹介まずは基本からスタートメニューへの追加ジャンプリストの追加ユーザーへの通知を提供しよう PAGE 3 カスタムジャンプリスト作成

4 Web サイトをアプリケーションのように Web はどこまでアプリケーションに近づいていくのか? 夢中にさせる快速な収束されたクリーンな一貫性のある PAGE 4

5 Site Mode の特長ジャンプリストカスタムジャンプサイトサムネールボタンユーザーへの通知ブラウザー UI カスタマイズ PAGE 5

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

7 まずは基本からメタ要素を使いカスタムの詳細を提供するファビコンを作成し追加独自のファビコンができたら当該 Web サイトがそのファビコンを認識していることを確認アプリケーション名ツールヒント及びいくつか他のプロパティを設定可能

8 Demo Enhancing Your Site: まずは基本から

9 まずは基本からメタ要素を使いカスタムの詳細を提供する <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=" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" PAGE 9 content="#ff3300" />

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

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

12 スタートメニューへの追加 window.external.msaddsitemode() <a onclick="window.external.msaddsitemode(); href="#">add Website</a><br /> window.external.msissitemode PAGE 12

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

13 ジャンプリストを追加しようユーザーに最もよく使用される機能でありユーザーに提供すべきと判断したアプリケーションの特定のリンクこれらは他のピン留めサイトの構成と同じように meta 要素で定義 meta name は msapplication-task 下記を含むデータを提供する必要あり Name ジャンプリスト中でユーザーに表示される内容 Action-uri 実行される URI でプロトコルとしては HTTP HTTPS そして FTP だけを使用可能 Icon-uri 表示するアイコンファイルを取得する場所

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

15 ジャンプリストの追加 <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

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

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

18 ユーザーへの通知を提供しよう window.external.mssitemodeseticonoverlay (' 'Complete'); window.external.mssitemodecleariconoverlay(); PAGE 18

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

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

21 カスタムジャンプリスト作成 (1) function oncreatecustomjumplist() { // カスタムリストのタイトルを設定します // カスタムリストは1つだけ定義できます window.external.mssitemodecreatejumplist (" サンプルのカスタムリスト "); window.external.mssitemodeclearjumplist(); PAGE 21

22 カスタムジャンプリスト作成 (2) // カスタムリスト中には最大 10 個までアイテムを追加できます // 並び順は最後に追加したものが一番上に表示されます window.external.mssitemodeaddjumplistitem ("JavaScript で追加したメニューその 3", "Page5.html", "./images/reportchart.ico"); window.external.mssitemodeaddjumplistitem ("JavaScript で追加したメニューその 2", "Page4.html", "./images/note.ico"); window.external.mssitemodeaddjumplistitem(new Date().toLocaleString() + " 更新 ", "Page3.html", "./images/chair.ico"); // ジャンプリストの内容を更新します } PAGE 22 window.external.mssitemodeshowjumplist();

23 カスタムジャンプリスト作成 (3) function onclearcustomjumplist() { window.external.mssitemodeclearjumplist(); // ジャンプリストの内容を更新します window.external.mssitemodeshowjumplist(); } PAGE 23

24 まとめピン留めサイト機能は IE9 の特長である洗練の一つ Windows 7 との統合によりアプリケーションとしての位置づけを高める自分の Web サイトへの滞在時間もアクセス率もアップ実装も難しくないのでぜひやってみましょう! PAGE 24

25 リソース Internet Explorer Developer Center Pinned Site Guide Windows User Experience Interaction Guidelines Channel 9 Taskbar Related Videos Icon Guidelines Icon Editor PAGE 25

2011 Microsoft Corporation. All rights reserved.

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

1. 電子メールカレンダー連絡先の統合 Outlook は受信箱の操作方法が一貫している点が何も考えなくても自然に操作できるとお客様に好評です Gmail では操作性に影響する機能更新が頻

1. 電子メールカレンダー連絡先の統合 Outlook は受信箱の操作方法が一貫している点が何も考えなくても自然に操作できるとお客様に好評です Gmail では操作性に影響する機能更新が頻 1. 電子メールカレンダー連絡先の統合 Outlook は受信箱の操作方法が一貫している点が何も考えなくても自然に操作できるとお客様に好評です Gmail では操作性に影響する機能更新が頻繁に行われているため新しい操作方法を頻繁に習得する必要があります