windows 8 で魅力的なweb サイトを作る

Windows 8 で魅力的な Web サイトを作るブラウザー勉強会　村地彰

About me

• 村地　彰（ aka hebikuzure ）• 株式会社シーピーエス代表取締役• Twitter : @hebikuzure• Facebook : https://www.facebook.com/amurachi• Web site : http://www.hebikuzure.com/• Blog : http://hebikuzure.wordpress.com/• Mail :

© Murachi Akira / Community Open Day 20133

ブラウザー勉強会

ブラウザー勉強会は東京近辺で開催する Web ブラウザーについての勉強会です。

ブラウザー勉強会では、開発者と IT プロフェッショナルそれぞれのニーズに向き合い、参加者相互の情報交換やディスカッション、ベンダーや専門家のプレゼンテーションなどを通じて、より有効で有益な情報に接する機会が得られることを目指しています。

11 May 2013


Windows 8 といえば……

•スタート画面

•ライブタイル

•Web サイト / Web アプリもピン留めできます

11 May 2013


スタート画面は陣取り合戦

•スタート画面の良い場所に配置

•タップ（クリック）されやすい

•サイト / アプリの利用率向上

11 May 2013


今日の課題

•すぐできる

•すごくおいしい

•すぐ効く

•Web サイトの Windows 8 対応

11 May 2013


Web サイト / アプリのタイル•ブランディングされたカラーデザイン

•サイト / アプリを象徴するグラフィック

•サイトのアクティビティをユーザーに通知

11 May 2013


Create a Windows 8 tile for your site• http://www.buildmypinnedsite.com/

( 日本語版 )http://www.buildmypinnedsite.com/ja-jp

•タイル用のデータとコードが簡単に生成できるサイト

11 May 2013


既定の動作

• タイルのグラフィック大きいサイズ (32px×32px) のお気に入りアイコン (Favicon)• タイルの配色お気に入りアイコン (Favicon) 内でもっとも面積の多い色をタイルの背景色に設定• タイルのタイトルWeb ページのタイトル (<title>)

11 May 2013


タイルのグラフィック

• <meta name="msapplication-TileImage"

content="(URI)"/>

• msapplication-TileImage meta タグで指定• content 属性で画像の場所を指定• 画像の仕様• 144 ピクセル × 144 ピクセル• png 形式• 画像はキャッシュされる11 May 2013


タイルの背景色

• <meta name="msapplication-TileColor"

content="(color)"/>

• msapplication-TileColor meta タグで指定• content 属性で色指定• 色指定の方法• #rrggbb• CSS 色名• CSS rgb() 関数11 May 2013


タイルのタイトル

• <meta name="application-name" content="(Title)" />

• application-name meta タグで指定• content 属性でタイトルを指定• タイトル指定の方法•文字列として指定•日本語も問題なし

11 May 2013


タイルの通知

• " バッジ "Web サイト / アプリケーションの状態をユーザーに通知する•タイルに表示される• " バッジ " は更新できる•あらかじめ指定した間隔での更新•Web サイト / アプリケーションからの能動的な更新

11 May 2013


" バッジ " の表示

• <metaname="msapplication-badge" content ="frequency=(mm);

polling-uri=(URI)" />

• msapplication-badge meta タグで指定• content 要素で更新間隔と更新 URI を設

定• frequency : 更新間隔（分）• polling-uri : 更新情報の XML の URI

11 May 2013


frequency の設定

• 更新間隔 ( 分 ) / 省略可能• 次のいずれかの値•30 30 分•60 1 時間•360 6 時間•720 12 時間•1440 24 時間 ( 既定 )

11 May 2013


polling-uri の設定

• 更新情報を含む XML ファイルの URI• 絶対 URI / 相対 URI のいずれも可• XML ファイルの内容•<?xml version="1.0"

encoding="utf-8" ?><badge value="(value)"/>

11 May 2013


value 属性の設定

11 May 2013

値表示例値表示例

0 （クリア） busy

1 ～ 99 までの整数 5 newMessage

100 以上の整数 99+ paused

none （無表示） playing

activity unavailable

alert error

available attention

away


バッジの動的更新

• ピン留めされたタイルから開かれたページ（ site mode ）からのみ更新可能

• バッジ通知のクリアwindow.external.msSiteModeClearBadge()

• バッジの更新要求window.external.msSiteModeRefreshBadge()

11 May 2013


site mode の確認

• window.external.msIsSiteMode()• site mode かどうか調べる• site mode の場合 : true• site mode でない場合 : false

11 May 2013


ジャンプリストの追加

• <meta name="msapplication-task"content="name=IE Blog;

action-uri=http://blogs.msdn.com/b/ie/;icon-uri=ieblog.ico" />

• msapplication-task meta タグで指定• content 属性で詳細を指定• name : 表示名• action-uri : 移動する URI• icon-uri : アイコンの URI

11 May 2013


まとめ

• 色指定と画像でタイルをブランディング

• バッジの通知でユーザーに情報提供

• 使いたくなる、良い場所に配置したくなるタイルを作成しましょう

11 May 2013


参考情報 ( サイトのピン留め )• Windows 8 のピン留めサイト• http://blogs.msdn.com/b/ie_ja/archive/

2012/04/12/pinned-sites-in-windows-8.aspx

• ピン留めされたサイトの開発者向けドキュメント• http://msdn.microsoft.com/ja-jp/library/ie/

gg491731.aspx

• バッジ通知の使用方法• http://msdn.microsoft.com/ja-jp/library/

jj152142.aspx

• Windows 8 でのピン留めされたサイトの通知• http://msdn.microsoft.com/ja-jp/library/ie/

hh880842.aspx

11 May 2013


もう一つの Windows 8 対応

• " 共有 " (Share) への対応

11 May 2013


IE から " 共有 " を呼び出す

• 明示的な共有•ページ内で範囲選択されていた場合•共有される対象 : 選択されているコンテンツ

•暗黙の共有•何も選択されていない場合•共有される対象 : URL または " リンクプレビュー "

11 May 2013


リンクプレビュー

•現在のページのイメージが含まれるHTML データ•ページの URL •ページタイトル •説明文 •ページの画像 • Windows ストアアプリで共通したデータ形式

11 May 2013


リンクプレビューの生成プロパティ HTML タグ文字数制限

タイトル 1<meta name="title" content=" タイトル” /> 160

タイトル 2 <title> タイトル </title> 160

説明 <meta name="description" content=" 説明” /> 253

画像 1 <meta property="og:image" content="(URI)" />

2,048 ( 画像 URI の制限 )

画像 2 <link rel="image_src" href="(URI)" />2,048 ( 画像 URI の制限 )

画像 3 <meta name="image" content="(URI)" />


画像 4 <meta name="thumbnail" content="(URI)" />


11 May 2013

http://msdn.microsoft.com/ja-jp/library/ie/hh920760.aspx


プロパティの優先順位

• タイトル 1 > タイトル 2• 画像 1 > 画像 2 > 画像 3 > 画像 4•優先度の高いプロパティから順に利用される

11 May 2013


リンクプレビューの効果

• 共有 (Share) したくなる

• よく共有される

• 共有のインフルーエンス効果を強化する

11 May 2013


参考情報 ( リンクプレビュー )• リンクプレビュー• http://msdn.microsoft.com/ja-jp/library/ie/hh920760.aspx

• Windows 8 で IE10 からリンクを共有する• http://blogs.msdn.com/b/ie_ja/archive/2012/05/18/get-your-sites-ready-for-sharing-with-ie10.aspx

• Sharing Sites with Windows 8• http://ie.microsoft.com/testdrive/Browser/Windows8Share/

11 May 2013


もう一度まとめ

• 魅力的なタイル

• 魅力的なリンクプレビュー

• Windows 8 の特色を活用してユーザーに働きかけるWeb サイト / アプリケーションを !

11 May 2013

windows 8 で魅力的なweb サイトを作る

Documents