Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

4.341 visualizaciones

Publicado el

2013年5月11日開催 "Conunity Open Day 2013" のセッション「Windows 8 で魅力的な Web サイトを作る
」のスライドです。

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

  1. 1. • 村地 彰(aka hebikuzure)• 株式会社シーピーエス 代表取締役• Twitter : @hebikuzure• Facebook : https://www.facebook.com/amurachi• Web site : http://www.hebikuzure.com/• Blog : http://hebikuzure.wordpress.com/• Mail :
  2. 2. ブラウザー勉強会は東京近辺で開催する Webブラウザーについての勉強会です。ブラウザー勉強会では、開発者と IT プロフェッショナルそれぞれのニーズに向き合い、参加者相互の情報交換やディスカッション、ベンダーや専門家のプレゼンテーションなどを通じて、より有効で有益な情報に接する機会が得られることを目指しています。11 May 2013 © Murachi Akira / Community Open Day 20133
  3. 3. • スタート画面• ライブ タイル• Web サイト / Web アプリもピン留めできます11 May 2013 © Murachi Akira / Community Open Day 20134
  4. 4. • スタート画面の良い場所に配置• タップ(クリック)されやすい• サイト / アプリの利用率向上11 May 2013 © Murachi Akira / Community Open Day 20135
  5. 5. • すぐできる• すごくおいしい• すぐ効く• Web サイトの Windows 8 対応11 May 2013 © Murachi Akira / Community Open Day 20136
  6. 6. • ブランディングされたカラー デザイン• サイト / アプリを象徴するグラフィック• サイトのアクティビティをユーザーに通知11 May 2013 © Murachi Akira / Community Open Day 20137
  7. 7. • http://www.buildmypinnedsite.com/(日本語版)http://www.buildmypinnedsite.com/ja-jp• タイル用のデータとコードが簡単に生成できるサイト11 May 2013 © Murachi Akira / Community Open Day 20138
  8. 8. • タイルのグラフィック大きいサイズ (32px×32px) のお気に入りアイコン (Favicon)• タイルの配色お気に入りアイコン (Favicon) 内でもっとも面積の多い色をタイルの背景色に設定• タイルのタイトルWeb ページのタイトル(<title>)11 May 2013 © Murachi Akira / Community Open Day 20139
  9. 9. • <meta name="msapplication-TileImage"content="(URI)"/>• msapplication-TileImage meta タグで指定• content 属性で画像の場所を指定• 画像の仕様• 144 ピクセル× 144 ピクセル• png 形式• 画像はキャッシュされる11 May 2013 © Murachi Akira / Community Open Day 201310
  10. 10. • <meta name="msapplication-TileColor"content="(color)"/>• msapplication-TileColor meta タグで指定• content 属性で色指定• 色指定の方法• #rrggbb• CSS 色名• CSS rgb() 関数11 May 2013 © Murachi Akira / Community Open Day 201311
  11. 11. • <meta name="application-name"content="(Title)" />• application-name meta タグで指定• content 属性でタイトルを指定• タイトル指定の方法• 文字列として指定• 日本語も問題なし11 May 2013 © Murachi Akira / Community Open Day 201312
  12. 12. • "バッジ"Web サイト / アプリケーションの状態をユーザーに通知する• タイルに表示される• "バッジ" は更新できる•あらかじめ指定した間隔での更新•Web サイト / アプリケーションからの能動的な更新11 May 2013 © Murachi Akira / Community Open Day 201313
  13. 13. • <metaname="msapplication-badge"content ="frequency=(mm);polling-uri=(URI)" />• msapplication-badge meta タグで指定• content 要素で更新間隔と更新 URI を設定• frequency : 更新間隔(分)• polling-uri : 更新情報の XML の URI11 May 2013 © Murachi Akira / Community Open Day 201314
  14. 14. • 更新間隔 (分) / 省略可能• 次のいずれかの値• 30 30 分• 60 1 時間• 360 6 時間• 720 12 時間• 1440 24 時間 (既定)11 May 2013 © Murachi Akira / Community Open Day 201315
  15. 15. • 更新情報を含む XML ファイルの URI• 絶対 URI / 相対 URI のいずれも可• XML ファイルの内容• <?xml version="1.0"encoding="utf-8" ?><badge value="(value)"/>11 May 2013 © Murachi Akira / Community Open Day 201316
  16. 16. 11 May 2013 © Murachi Akira / Community Open Day 201317値 表示例 値 表示例0 (クリア) busy1~99までの整数 5 newMessage100以上の整数 99+ pausednone (無表示) playingactivity unavailablealert erroravailable attentionaway
  17. 17. • ピン留めされたタイルから開かれたページ(site mode)からのみ更新可能• バッジ通知のクリアwindow.external.msSiteModeClearBadge()• バッジの更新要求window.external.msSiteModeRefreshBadge()11 May 2013 © Murachi Akira / Community Open Day 201318
  18. 18. • window.external.msIsSiteMode()• site mode かどうか調べる• site mode の場合 : true• site mode でない場合 : false11 May 2013 © Murachi Akira / Community Open Day 201319
  19. 19. • <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 : アイコンの URI11 May 2013 © Murachi Akira / Community Open Day 201320
  20. 20. • 色指定と画像でタイルをブランディング• バッジの通知でユーザーに情報提供• 使いたくなる、良い場所に配置したくなるタイルを作成しましょう11 May 2013 © Murachi Akira / Community Open Day 201321
  21. 21. • 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.aspx11 May 2013 © Murachi Akira / Community Open Day 201322
  22. 22. 11 May 2013 © Murachi Akira / Community Open Day 201323
  23. 23. • "共有" (Share) への対応11 May 2013 © Murachi Akira / Community Open Day 201324
  24. 24. • 明示的な共有• ページ内で範囲選択されていた場合• 共有される対象 :選択されているコンテンツ• 暗黙の共有• 何も選択されていない場合• 共有される対象 :URL または "リンク プレビュー"11 May 2013 © Murachi Akira / Community Open Day 201325
  25. 25. • 現在のページのイメージが含まれるHTMLデータ• ページの URL• ページ タイトル• 説明文• ページの画像• Windows ストア アプリで共通したデータ形式11 May 2013 © Murachi Akira / Community Open Day 201326
  26. 26. プロパティ 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 © Murachi Akira / Community Open Day 201327
  27. 27. • タイトル1 > タイトル2• 画像1 > 画像2 > 画像3 > 画像4• 優先度の高いプロパティから順に利用される11 May 2013 © Murachi Akira / Community Open Day 201328
  28. 28. • 共有 (Share) したくなる• よく共有される• 共有のインフルーエンス効果を強化する11 May 2013 © Murachi Akira / Community Open Day 201329
  29. 29. • リンク プレビュー• 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 201330
  30. 30. • 魅力的なタイル• 魅力的なリンク プレビュー• Windows 8 の特色を活用してユーザーに働きかけるWeb サイト / アプリケーションを!11 May 2013 © Murachi Akira / Community Open Day 201331

×