• Save
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)

  • 4,378 views
Uploaded on

Internet Explorer 9 の新機能の一つ、固定サイト (Pinned sites) について解説します。

Internet Explorer 9 の新機能の一つ、固定サイト (Pinned sites) について解説します。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,378
On Slideshare
3,670
From Embeds
708
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 708

http://blogs.technet.com 705
http://webcache.googleusercontent.com 2
http://207.46.192.232 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Internet Explorer 9 のWeb制作者向け新機能の活用マイクロソフト株式会社デベロッパー&プラットフォーム統括本部田辺茂也
  • 2. 本日の内容• Internet Explorer 9 のご紹介• 固定サイト (Pinned Site) のご紹介• その他の開発者向け新機能のご紹介2
  • 3. Windows Internet Explorer 9 Platform Preview #63
  • 4. IE9 の開発コンセプトPC のハードウェア 主役はブラウザーでは 安全性、安定性、プラ 同一のマークアップのリソースを最大活用 なくWebサイト イバシーの向上 実現• レイアウトエンジン • Web が際立つ新しいユーザー • 業界最高水準のセキュリティ • HTML 5 をはじめとする次世代 インターフェース • 抜群の安定性 Web 標準規格に準拠• グラフィックとテキストの表示 を GPU で高速化 • ワンクリックナビゲーション • ユーザーによるプライバシー管 • W3C のワーキンググループに 理 積極的に参加し、仕様策定に協 • Windows 7に最適化• 新しい JavaScript エンジン 力 • テストキットを提供4
  • 5. 主役はブラウザーではなく Web5
  • 6. 固定サイト (Pinned Site) 6
  • 7. 7
  • 8. 固定サイトとは サイトをピン止めするための コンテンツの変更は不要 固定サイトによる拡張 スタートメニューへの登録 アイコンのカスタマイズ ジャンプリストの登録 サムバーボタンの追加8
  • 9. 固定サイトとは• 目指すもの – ユーザーとお気に入りの距離を縮める – ブラウザー外で、ウェブサイトのブランドを表示できる – ウェブサイトとデスクトップの違いを意識させない、シー ムレスな操作性 – Windows アプリケーションと同様の、ユーザーとの対話 – ウェブサイト側で、ユーザーとの対話やナビゲーションを コントロール – どのウェブサイトでも利用可能• 技術的特徴 – 一般の Internet Explorer と別のプロセスツリー – サイトごとに Application ID を生成 – BHO やその他のツールバーはロードされない9
  • 10. Windows 7 のタスクバー ジャンプリスト 縮小表示 ターゲット カスタムカテゴリー タスク 縮小表示 ツールバー アイコン 進行状況バー アイコン オーバーレイ デスクバンド タスクバー10
  • 11. 固定サイトのカスタマイズ全ユーザーに共通なカスタマイズを 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
  • 12. ジャンプリストの追加Windows 7 への統合 <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 (絶対/相対)12
  • 13. アイコンのカスタマイズ標準的な方法でアイコンを指定 標準的な方法でアイコンを指定  <link rel="shortcut icon" href="/favicon.ico" /> ベストプラクティス  アイコンのサイズ  推奨: 16x16, 32x32, 48x48  最適: 16x16, 24x24, 32x32, 64x64 機能 バージョン 96dpi 120dpi 144dpi 新しいタブ IE9 32x32 40x40* 48x48 Pinned Site: タスクバー、 IE9 32x32 48x48 64x64 スタートメニュー Pinned Site: フレーム IE9 24x24 32x32 48x4813 タブ、お気に入り IE8, IE9 16x16 24x24 24x24
  • 14. アイコンエディター• 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();15
  • 16. ジャンプリストと API の対応 msSiteModeCreateJumplist(TRENDLINE) msSiteModeAddJumpListItem(‘TRENDLINE‘, …) <META name="msapplication-task“ content="name=TRENDLINE….>16
  • 17. オーバーレイアイコンユーザーへの通知や進行状況を表示する • 利用例 • 通知 • ステータス • 利用方法 • オーバーレイのセット • オーバーレイのクリア 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);18
  • 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 1.1 2nd 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
  • 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"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --></video> 25
  • 26. 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
  • 27. 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
  • 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 (max- width: 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 デベロッパーセンター – 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/user- experiences-customizing-pinned-sites.aspx• Pinned Sites (英語) – http://msdn.microsoft.com/en-us/ie/dd797411.aspx32
  • 33. 参考サイト Beauty of the Web Internet Explorer Test Drive http://www.beautyoftheweb.com/ http://ietestdrive.com/ 新しい Web を体感 各新機能をチェック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.34