Windows 8 で魅力的なWeb サイトを作る

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

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

• スタート画面
• ライブタイル
• Web サイト / Web アプリも
ピン留めできます

• スタート画面の良い場所に配置
• タップ（クリック）されやすい
• サイト / アプリの利用率向上

• すぐできる
• すごくおいしい
• すぐ効く
• Web サイトの Windows 8 対応

• ブランディングされた
カラーデザイン
• サイト / アプリを象徴する
グラフィック
• サイトのアクティビティを
ユーザーに通知

• http://www.buildmypinnedsite.com/
(日本語版)
http://www.buildmypinnedsite.com/
ja-jp
• タイル用のデータとコードが
簡単に生成できるサイト

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

• <meta name="msapplication-TileImage"
content="(URI)"/>
• msapplication-TileImage meta タグで指定
• content 属性で画像の場所を指定
• 画像の仕様
• 144 ピクセル× 144 ピクセル
• png 形式
• 画像はキャッシュされる

• <meta name="msapplication-TileColor"
content="(color)"/>
• msapplication-TileColor meta タグで指定
• content 属性で色指定
• 色指定の方法
• #rrggbb
• CSS 色名
• CSS rgb() 関数

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

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

• <meta
name="msapplication-badge"
content ="frequency=(mm);
polling-uri=(URI)" />
• msapplication-badge meta タグで指定
• content 要素で更新間隔と更新 URI を設定
• frequency : 更新間隔（分）
• polling-uri : 更新情報の XML の URI

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

• 更新情報を含む XML ファイルの URI
• 絶対 URI / 相対 URI のいずれも可
• XML ファイルの内容
• <?xml version="1.0"
encoding="utf-8" ?>
<badge value="(value)"/>

値表示例値表示例
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()

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

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

• 色指定と画像でタイルをブランディング
• バッジの通知でユーザーに情報提供
• 使いたくなる、良い場所に配置したく
なるタイルを作成しましょう

• 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

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

• 明示的な共有
• ページ内で範囲選択されていた場合
• 共有される対象 :
選択されているコンテンツ
• 暗黙の共有
• 何も選択されていない場合
• 共有される対象 :
URL または "リンクプレビュー"

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

プロパティ 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)" /> 2,048 (画像 URI の制限)
画像4 <meta name="thumbnail" content="(URI)" /> 2,048 (画像 URI の制限)

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

• 共有 (Share) したくなる
• よく共有される
• 共有のインフルーエンス効果を
強化する

• リンクプレビュー
• http://msdn.microsoft.com/ja-
jp/library/ie/hh920760.aspx
• Windows 8 で IE10 からリンクを共有する
• http://blogs.msdn.com/b/ie_ja/archive/2012/05/1
8/get-your-sites-ready-for-sharing-with-ie10.aspx
• Sharing Sites with Windows 8
• http://ie.microsoft.com/testdrive/Browser/Window
s8Share/

• 魅力的なタイル
• 魅力的なリンクプレビュー
• Windows 8 の特色を活用して
ユーザーに働きかける
Web サイト / アプリケーションを!

Windows 8 で魅力的なWeb サイトを作る

More Related Content

Viewers also liked

Similar to Windows 8 で魅力的なWeb サイトを作る

More from 彰 村地

Windows 8 で魅力的なWeb サイトを作る

More from 彰村地