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
© Murachi Akira / Community Open Day 20134
Windows 8 といえば……
•スタート画面
•ライブ タイル
•Web サイト / Web アプリもピン留めできます
11 May 2013
© Murachi Akira / Community Open Day 20135
スタート画面は陣取り合戦
•スタート画面の良い場所に配置
•タップ(クリック)されやすい
•サイト / アプリの利用率向上
11 May 2013
© Murachi Akira / Community Open Day 20136
今日の課題
•すぐできる
•すごくおいしい
•すぐ効く
•Web サイトの Windows 8 対応
11 May 2013
© Murachi Akira / Community Open Day 20137
Web サイト / アプリのタイル•ブランディングされたカラー デザイン
•サイト / アプリを象徴するグラフィック
•サイトのアクティビティをユーザーに通知
11 May 2013
© Murachi Akira / Community Open Day 20138
Create a Windows 8 tile for your site• http://www.buildmypinnedsite.com/
( 日本語版 )http://www.buildmypinnedsite.com/ja-jp
•タイル用のデータとコードが簡単に生成できるサイト
11 May 2013
© Murachi Akira / Community Open Day 20139
既定の動作
• タイルのグラフィック大きいサイズ (32px×32px) のお気に入りアイコン (Favicon)• タイルの配色お気に入りアイコン (Favicon) 内でもっとも面積の多い色をタイルの背景色に設定• タイルのタイトルWeb ページのタイトル (<title>)
11 May 2013
© Murachi Akira / Community Open Day 201310
タイルのグラフィック
• <meta name="msapplication-TileImage"
content="(URI)"/>
• msapplication-TileImage meta タグで指定• content 属性で画像の場所を指定• 画像の仕様• 144 ピクセル × 144 ピクセル• png 形式• 画像はキャッシュされる11 May 2013
© Murachi Akira / Community Open Day 201311
タイルの背景色
• <meta name="msapplication-TileColor"
content="(color)"/>
• msapplication-TileColor meta タグで指定• content 属性で色指定• 色指定の方法• #rrggbb• CSS 色名• CSS rgb() 関数11 May 2013
© Murachi Akira / Community Open Day 201312
タイルのタイトル
• <meta name="application-name" content="(Title)" />
• application-name meta タグで指定• content 属性でタイトルを指定• タイトル指定の方法•文字列として指定•日本語も問題なし
11 May 2013
© Murachi Akira / Community Open Day 201313
タイルの通知
• " バッジ "Web サイト / アプリケーションの状態をユーザーに通知する•タイルに表示される• " バッジ " は更新できる•あらかじめ指定した間隔での更新•Web サイト / アプリケーションからの能動的な更新
11 May 2013
© Murachi Akira / Community Open Day 201314
" バッジ " の表示
• <metaname="msapplication-badge" content ="frequency=(mm);
polling-uri=(URI)" />
• msapplication-badge meta タグで指定• content 要素で更新間隔と更新 URI を設
定• frequency : 更新間隔(分)• polling-uri : 更新情報の XML の URI
11 May 2013
© Murachi Akira / Community Open Day 201315
frequency の設定
• 更新間隔 ( 分 ) / 省略可能• 次のいずれかの値•30 30 分•60 1 時間•360 6 時間•720 12 時間•1440 24 時間 ( 既定 )
11 May 2013
© Murachi Akira / Community Open Day 201316
polling-uri の設定
• 更新情報を含む XML ファイルの URI• 絶対 URI / 相対 URI のいずれも可• XML ファイルの内容•<?xml version="1.0"
encoding="utf-8" ?><badge value="(value)"/>
11 May 2013
© Murachi Akira / Community Open Day 201317
value 属性の設定
11 May 2013
値 表示例 値 表示例
0 (クリア) busy
1 ~ 99 ま で の整数 5 newMessage
100 以上の整数 99+ paused
none (無表示) playing
activity unavailable
alert error
available attention
away
© Murachi Akira / Community Open Day 201318
バッジの動的更新
• ピン留めされたタイルから開かれたページ( site mode )からのみ更新可能
• バッジ通知のクリアwindow.external.msSiteModeClearBadge()
• バッジの更新要求window.external.msSiteModeRefreshBadge()
11 May 2013
© Murachi Akira / Community Open Day 201319
site mode の確認
• window.external.msIsSiteMode()• site mode かどうか調べる• site mode の場合 : true• site mode でない場合 : false
11 May 2013
© Murachi Akira / Community Open Day 201320
ジャンプ リストの追加
• <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
© Murachi Akira / Community Open Day 201321
まとめ
• 色指定と画像でタイルをブランディング
• バッジの通知でユーザーに情報提供
• 使いたくなる、良い場所に配置したくなるタイルを作成しましょう
11 May 2013
© Murachi Akira / Community Open Day 201322
参考情報 ( サイトのピン留め )• 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
© Murachi Akira / Community Open Day 201323 11 May 2013
まだ終わりじゃないよ
© Murachi Akira / Community Open Day 201324
もう一つの Windows 8 対応
• " 共有 " (Share) への対応
11 May 2013
© Murachi Akira / Community Open Day 201325
IE から " 共有 " を呼び出す
• 明示的な共有•ページ内で範囲選択されていた場合•共有される対象 : 選択されているコンテンツ
•暗黙の共有•何も選択されていない場合•共有される対象 : URL または " リンク プレビュー "
11 May 2013
© Murachi Akira / Community Open Day 201326
リンク プレビュー
•現在のページのイメージが含まれるHTML データ•ページの URL •ページ タイトル •説明文 •ページの画像 • Windows ストア アプリで共通したデータ形式
11 May 2013
© Murachi Akira / Community Open Day 201327
リンク プレビューの生成プロパティ 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 の制限 )
11 May 2013
http://msdn.microsoft.com/ja-jp/library/ie/hh920760.aspx
© Murachi Akira / Community Open Day 201328
プロパティの優先順位
• タイトル 1 > タイトル 2• 画像 1 > 画像 2 > 画像 3 > 画像 4•優先度の高いプロパティから順に利用される
11 May 2013
© Murachi Akira / Community Open Day 201329
リンク プレビューの効果
• 共有 (Share) したくなる
• よく共有される
• 共有のインフルーエンス効果を強化する
11 May 2013
© Murachi Akira / Community Open Day 201330
参考情報 ( リンク プレビュー )• リンク プレビュー• 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
© Murachi Akira / Community Open Day 201331
もう一度まとめ
• 魅力的なタイル
• 魅力的なリンク プレビュー
• Windows 8 の特色を活用してユーザーに働きかけるWeb サイト / アプリケーションを !
11 May 2013