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

しばやん雑記

ASP.NET とメイドさんが大好きなフリーランスのプログラマーのブログ

Windows Store oEmbed をリニューアルしました

Windows

f:id:shiba-yan:20140116235101p:plain

Windows Store oEmbed API

タイトルの通りですが、本日 Windows Store oEmbed のリニューアルが完了しました。

ASP.NET MVC 5 ベースに

地味ですが ASP.NET MVC 5 がリリースされているので、今回は 4 からのアップデートを行いました。

だから何だって話ですが、そんなことよりもアップデートすることに意義があるんですよ。

新しい埋め込み API

これまでは自分で iframe を記述する必要がありましたが、今回からは HTML5 の独自データ属性を使ってアプリケーション ID を指定して、専用の JavaScript を読み込めば自動で展開するようになりました。

<div class="wsoembed" data-appid="8289549f-9bae-4d44-9a5c-63d9c3a79f35"></div>
<script src="http://wsoembed.com/widget.js" async="async"></script>

このコードを実際に貼り付けた結果は以下のようになります。

Twitter for Windows の情報が表示されていると思います。ちなみに複数の埋め込み表示を行いたい場合には、最後に 1 回だけ JavaScript を読み込むだけで問題ないです。

デザイン変更、多言語対応

既に気が付いた人もいるかもしれませんが、新しい埋め込み API を利用して表示した場合には「ストアで表示」ボタンのデザインを変更し、一目で Windows ストアであることがわかるようになりました。

そして今回は利用者のブラウザ情報をベースにして、日本語と英語間での表示切替が行われます。

f:id:shiba-yan:20140117000120p:plain

優先言語を英語にした Chrome で表示した例ですが、全て英語表記になっていることがわかると思います。

スニペット生成フォームを用意

トップページの下の方に Windows ストアプレビューの URL を貼り付けて、簡単に埋め込み用の HTML タグを出力し、さらにプレビューを行うフォームを用意しました。

f:id:shiba-yan:20140117000712p:plain

今までは説明不足で貼り付け方が難しかったと思いますが、今後はフォームを使うだけで簡単にタグの生成が行えるようになりました。

Google Analytics 対応(実験中)

実験中の機能ですが、埋め込みタグに data-analytics 属性を使って Google Analytics のトラッキングタグを設定できるようになっています。

<div class="wsoembed" data-appid="8289549f-9bae-4d44-9a5c-63d9c3a79f35" data-analytics="UA-XXXXXX-XX"></div>
<script src="http://wsoembed.com/widget.js" async="async"></script>

まだトラッキングデータをどのように表示するようにすればいいかといった点や、ボタンのクリック数を取るべきかなど課題はありますが、どのくらい PV が発生しているかを解析出来るようになっています。

実験の結果次第では独自の PV 数とクリック数の表示を付けるかもしれません。