Home > Python | Radio | Webサービス > Ustream 録画動画のviewsをはてブ風に表示する

Ustream 録画動画のviewsをはてブ風に表示する

  • 2009-12-30 (水) 15:39
  • Python | Radio | Webサービス
  • このエントリーをはてなブックマークに追加
この記事の所要時間: 237

Ustreamで録画した動画のviews数をはてブ風に表示するサービスを作りました。

ust録画動画のURLを渡すと以下のように表示します。

64views

使い方

1. views数を表示する

このサービスではviews数をHTMLタグ+JavaScriptで出力します。views数を表示したいページで、以下のscriptタグを記述します。src属性のURLでviews数を表示したいust録画動画のURLを指定します。

CODE:
  1. <script type="text/javascript" src="http://www.u-st.tv/views?url=%ust録画動画のURL"></script>

ブラウザで見ると以下のタグが表示されます。

CODE:
  1. <span class="ust_views_10">64 views</span>

今はタグ表示だけですが、要望があればJSON出力とかも考えます。

2. CSS読み込み

はてブ風に表示するスタイルシートを用意しています。以下のスタイルシートを任意の場所に記述するなり、外部ファイルにして読み込むなりして下さい。

CODE:
  1. span.ust_views_1 {
  2.   color: #f00;
  3.   font-weight: normal;
  4.   background-color: #fcc;
  5. }
  6. span.ust_views_10 {
  7.   color: #f00;
  8.   font-weight: bold;
  9.   background-color: #fcc;
  10. }

viewsが10未満なら「ust_views_1」、10以上なら「ust_views_10」がspanタグのclass属性に割り当てられます。見た目を変えたい方はスタイルシートで調整して下さい。

ブックマークレット

簡単なブックマークレットを作りました。ブラウザのブックマークツールバー等にドラッグして利用して下さい。

[views表示タグ]

使い方ですが、まずviewsを表示したいustページをブラウザで開きます。

http://www.ustream.tv/recorded/3535672

その状態でブックマークレットをクリックします。すると以下のようなHTMLタグが別窓に表示されます。

CODE:
  1. <a href="http://www.ustream.tv/recorded/3535672" target="_blank">第0回 Webなんたらかんたら 2009.12.28., shin1x1 on USTREAM. Radio</a><script type="text/javascript" src="http://www.u-st.tv/views?url=http://www.ustream.tv/recorded/3535672"></script>

あとはこのタグをblog等に貼れば、views数が表示されます。

第0回 Webなんたらかんたら 2009.12.28., shin1x1 on USTREAM. Radio

GAE+Pythonでさくっと

作りました。

独自ドメイン(u-st.tv)をGAEサイトに割り当てています。実はnaked domain(http://u-st.tv)にしたかったのですが、GAEでは割り当てができないようで、www.u-st.tvにしています。

あと表示の度にustream.comにリクエストを投げるのは非効率なので一定時間キャッシュするようにしているので、ご注意を。

使い方も簡単なので、ust動画リンクのお供に使ってみて下さい。

トラックバック:0

このエントリーのトラックバックURL
http://www.1x1.jp/blog/2009/12/u-st_tv_views.html/trackback
Listed below are links to weblogs that reference
Ustream 録画動画のviewsをはてブ風に表示する from Shin x blog

Home > Python | Radio | Webサービス > Ustream 録画動画のviewsをはてブ風に表示する

検索
フィード
メタ情報

Return to page top