読者です 読者をやめる 読者になる 読者になる

がりらぼ

WindowsRuntimeの応援ブログ

4ステップでできる! はてなブログをWindows8のライブタイルに対応させる方法

ついにはてなブログがhead部分のmetaタグの編集が可能になりました。はてなさんGood Job!
ブログのhead部分にmetaタグなどを自由に追加できるようにしました - はてなブログ開発ブログ

これにより、私の作ったRss2LivetileAPIを用いることによって完全無料ではてなブログオンリーでWindows8.1のライブタイル機能を適応させることができます。

ライブタイル機能って?

Windows8から導入されたIE10には、Webサイトのスタート画面ピン止め機能が加わりました。
例えばMSN Japanをストアアプリ版IE10以降で開くとこのようにライブタイルのサイズを指定してピン止めすることができます。
(アプリバーの☆マーク→ピン止めマークでピン止めできます)
f:id:garicchi:20140219230417p:plain

ピン止めしたサイトは、タイルサイズを自由に変更できたり、更新情報をライブタイルによってスタート画面に表示することが可能となります。
f:id:garicchi:20140219230705p:plain

Windows8から導入されたスタート画面は、ユーザーとの対話の場であり、ユーザーは一度に更新情報を閲覧することができ、便利です。
逆に、Webサイト制作側にとっては、今後のWindowsのスタイルとなるライブタイルに更新情報を表示させて、PV数を上げたいところです。

ではどうやってこのようなスタート画面のピン止めにWebサイトを対応させているかというと、metaタグの記述を変更することによってピン止めに対応させることができます。
そこで、今回はてなブログがmetaタグ編集に対応したのでぜひ自身のはてなブログをスタート画面に対応させてPV数を上げましょう!

ステップ1 タイル画像を用意する

ライブタイルに表示させる画像をまずは用意しましょう。
今回私は透過pngの500×500ピクセルの画像を用意しました。
f:id:garicchi:20140219232254p:plain

この画像を元にしてタイルサイズごとの画像を作成しましょう。
f:id:garicchi:20140219232319p:plain
ライブタイルは
小サイズ、普通サイズ、ワイドサイズ、大サイズの4つを用意する必要があります。
必要な画像のピクセルは上図のようになっています。

普通に画像をつくってもいいのですが、今回は簡略化するためにWindows Store App Logo Makerを使いましょう。
このサイトにアクセスし、WindowsStoreAppLogoMaker.zipをダウンロードしましょう。
f:id:garicchi:20140219232709p:plain

zipを解凍できたら、中に入っているWindowsStoreAppLogoMaker.exeを起動しましょう。
画像を開くボタンを押し、先ほど作った画像を指定します。
100%LogoOnlyにチェックを入れます。
画像を指定できたら、アイコン保存ボタンを押して保存します。
f:id:garicchi:20140219234126p:plain

デスクトップのicon Icons for Win8というフォルダに大量の画像ができあがっていると思うので、
小さいタイルとして、StoreLogo.png
普通のタイルとして、Logo.png
ワイドタイルとして、WideLogo.png
大きいタイルとして、LargeLogo.png

の4つを使います。

これで必要な画像は揃いました。

ステップ2 画像をアップロードする

画像の保存場所として、今回ははてなフォトライフを使います。
はてなフォトライフにアクセスします。
はてなフォトライフ - 無料・大容量、写真や動画を共有できるウェブアルバム
アクセスできたらアップロードというところを押しましょう。
f:id:garicchi:20140219234946p:plain

アップロードできたら、アップロードした画像をひらき、右上の「リンク」というところをおします 
f:id:garicchi:20140219235238p:plain

リンクが取得できるようなダイアログが表示されるのでHTMLタグ内のsrc属性の.pngへのリンクを取得しましょう。
f:id:garicchi:20140219235445p:plain

これを4つの画像すべてについて行い、4つのリンクを取得します。
今回私はこのようになりました。(メモ帳で保存しておくと便利です)
f:id:garicchi:20140219235845p:plain

これで画像のリンクをすべて取得することができました。

ステップ3 metaタグを編集する

自身のはてなブログへのダッシュボードへアクセスします。
設定→詳細設定へと進みます。
下にスクロールするとheadに要素を追加という項目があります。
f:id:garicchi:20140220000232p:plain

ここに以下の記述をコピペしましょう。

<meta name="msapplication-TileColor" content=""/>
<meta name="application-name" content=""/>
<meta name="msapplication-square70x70logo" content=""/>
<meta name="msapplication-square150x150logo" content=""/>
<meta name="msapplication-wide310x150logo" content=""/>
<meta name="msapplication-square310x310logo" content=""/>
<meta name="msapplication-notification" content="frequency=1440; polling-uri=http://rss2livetile.azure-mobile.net/api/rss2livetile?url=; cycle=1"/>   

コピペできたら、タグを編集していきます。
nameがmsapplication-TileColorというタグのcontentには、ライブタイルの背景色を指定しましょう。私は#FFFFFFにしました。
nameがapplication-nameというタグのcontentにはWebサイトの名前を指定しましょう。
nameがmsapplication-square70x70logoというタグのcontentにはフォトライフにあげた小タイルの画像URLを指定しましょう。
nameがmsapplication-square150x150logoというタグのcontentにはフォトライフにあげた普通タイルの画像URLを指定しましょう。
nameがmsapplication-square310x150logoというタグのcontentにはフォトライフにあげたワイドタイルの画像URLを指定しましょう。
nameがmsapplication-square310x310logoというタグのcontentにはフォトライフにあげた大タイルの画像URLを指定しましょう。

nameがmsapplication-notificationというタグのpolling-uriにはhttp://rss2livetile.azure-mobile.net/api/rss2livetile?url=;という記述がありますが
=と;の間(urlクエリの引数)に、自身のはてなブログのRSSURLを入れましょう。
はてなブログの場合、
[はてなブログURL]/feed
で取得できます。
私の場合、ブログURLがhttp://garicchi.hatenablog.jpなのでhttp://garicchi.hatenablog.jp/feed
と指定しました。

ここまで出来たら変更するボタンを押して保存しましょう。
私の場合、このようなmetaタグとなりました。
f:id:garicchi:20140220002110p:plain

ここまでですべての設定は完了しました。
あとはユーザー側にピン止めしてもらいましょう。

ステップ4 スタート画面にピン止めする

ストアアプリ版IEでご自身のはてなブログにアクセスしましょう。

アクセスできたらまずは更新ボタンをおして、更新しましょう。キャッシュ表示されている可能性があります。
更新できたら、アプリバーから☆ボタン→ピン止めボタンを押すと、様々なタイルサイズに対応しているはずです。
ピン止めしてみましょう。
f:id:garicchi:20140220002810p:plain

ピン止めできました。もしライブタイルができなかったらIEで更新→ピン止めを繰り返すとライブタイルが表示されます。
f:id:garicchi:20140220003153p:plain

以上で終了です。おつかれさまでした。

はてなブログWindowsの開発者の方々が多く使っておられるサービスですのでたくさん使われるといいですね!