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

jrsyo's diary(仮)

とりあえず使ってみなきゃw

爆速JSONPは本当に爆速だった(ブログパーツを作ってみた)

久しぶりの投稿なのではてなBlogのインターフェースの変わり具合に驚愕している所存でありますが、
今日は、面白いフレームワークを見つけたのでご紹介致します。


その名も、
'爆速JSONP'


ネーミングセンスに多少の難あり感が否めないという声も上がっていますが、


この素晴らしいフレームワーク
公開元はYahooのDeveloperチームのようで、つい最近公開されたらしく、その存在すら知りませんでした。

リンク:JSONP WebAPIを爆速で使いこなせるフレームワーク - Yahoo! JAPAN Tech Blog

で、こいつを使って何ができるかっていうのは上のリンクを見てもらったほうが早いかもしれませんが、(;´Д`)


ま、簡単に言うと、このフレームワーク(javascript)使えばプログラミングできなくてもJSONPに対応したAPIと超カンタンにデータのやり取りを実現できる!っていうことですわ。
JSONPの説明は割愛

じゃあ具体的に例えば何ができんねん!

ってなるんですが、

今回はJSONPを使うことを前提に考えて、
APIを使わせてもらうWebサービスを決めてみました。

で、決まったサービスは、
Twitterアカウントがあれば誰でもすぐにライブ配信を初められる、若者に大人気のあのサービス、
TwitCasting:Connecting your friends with live communication - TwitCasting


今回作った物は、ライブ配信の状態を可視化する簡易ブログパーツです。
↓こんな感じ↓(実際に使う時はブログのサイドバーなんかに入れるといいかも)

f:id:jrsyo:20120821025913p:plain



説明をすると、TwitCasting(以後ツイキャスと表記)は、誰でもすぐにライブ配信が初められる為、例えばいつも誰かの配信(通称:モイ)を見て応援しているリスナーさんは、どうにか頑張ってその人がライブ配信を始めた事を知る必要があります。

ほとんどの場合、配信者が事前にTwitter等で配信時間をつぶやき、リスナーはそれを見て急いでツイキャスに見に行くのが大抵の場合ほとんどだと思います。

とにかく配信を見逃したくない人の為に、ツイキャスから公式のアプリケーションとして登録した配信者が配信を始めたら通知してくれるPC用のアプリケーションも存在します。


で、逆に配信者の立場で考えると、
そういったソーシャルメディアの他に配信者へ配信を開始した事を伝える手段がないんですよね。

まぁこのご時世なんで、ブログはやっててTwitterFacebookはやってないって人のほうが希少かもしれませんが、

ツイキャスにもTwitterFacebookみたいにブログパーツがあればいいのになーと、思ったわけです。

で、ツイキャス+ブログパーツで思いつくって言ったらライブ配信状況のチェックくらいしか思いつかなかったわけですわ(笑)

ブログにたまたま訪れた人、いつもブログを見てくれる人が、特になんのリンクも踏まずにひと目でツイキャスで配信やってるかどうか、その状況が分かるブログパーツを作ってみます。


まず、ツイキャスが公開している公式のAPI群がこちら
Developer API - TwitCasting

さて、今回は特定のユーザの配信状況のみが分かれば問題ない軽ーいパーツを作るので、
ライブステータスAPIを使います。

ライブステータスAPIの説明を読むと、

URIスキームが
http://api.twitcasting.tv/api/livestatus?param=value

必要なパラメータは
user=userid

これだけですな。

なので、まずはブラウザのアドレスバーに直打ちで(useridは任意のIDに変更してください)
http://api.twitcasting.tv/api/livestatus?user=userid

でアクセス。
すると、以下のような結果が返ってきますね。(各々の値はもちろんIDによって変わります。)

callback({"islive":false,"protected":false,"movieid":6037264,"comments":0,"viewers":0,"total":0,"duration":11,"subtitle":"","typing":"","hashtag":false,"title":"\u30e9\u30b8\u30aa\u914d\u4fe1 #6037264"});

で、今回は配信状況が分かればいいので、この返ってきた結果のうち、

"islive":false(or true)

だけを使えばいいことになります。

isliveは、そのユーザが配信中であればtrue、そうでなければfalseを返すだけの単純なものです。

これを、さきほど説明した爆速JSONPで取得してみましょう。

コードはたったこれだけです。

※ここで注意※
このYahooのフレームワークを使用するには、YahooのDeveloperネットワークでアプリケーションIDを登録、取得しないといけません。
5分もかからずにIDはすぐに取得できますので、この機会に是非取得してみてください。

取得はこちらから:Yahoo!デベロッパーネットワーク - アプリケーションの管理

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>爆速JSONP</title>
</head>
<body>

<script src="http://i.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js"
  data-url="http://api.twitcasting.tv/api/livestatus"
  data-p-appid="YahooのDeveloperネットワークで取得したAPPLICATION_IDを貼付"
  data-p-user="任意のユーザID"
  data-p-output="json"
  >
  {{islive}}</script>
 
</body>
</html>

これを動かすと、見事にブラウザにはisliveの結果(true or false)が寂しく表示されているかと思います。
どうですか、これであの難しそうに見えたJSONPの通信が行えたことになります。
わりとガチで爆速。(習得時間的な意味で)


さすがにこのままでは話にならないので、
せっかくならこの返ってきたデータを読み取って、Off Air、On Airの画像をページ表示時に自動的に表示するようにしましょう。

爆速JSONPには取得したデータを加工する関数を指定できます。

今回はその関数にisliveの結果を投げ、そこで単純に値がtrueなのかfalseなのかを判断し、
それによってJqueryを使用して画像を表示してみます。

説明よりもコードを見たほうが早いので、まずはコードを、

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>爆速JSONP</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
 <div id="twicas">
 </div>
 
 <script>
 
   result = '';
   function calc(data){
   
   result = data.islive;
   $(function() {
     $('#twicas').empty();
     var output = '';
     if(result == true){
       output += '<a href="http://twitcasting.tv/任意のユーザID" target="_blank"><img src="http://任意のサーバ/onair.png" /></a>';
     }else{
       output += '<a href="http://twitcasting.tv/任意のユーザID" target="_blank"><img src="http://任意のサーバ/offair.png" /></a>';
     }
     $('#twicas').append(output);
  });
  return result;
}
</script>

<script src="http://i.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js"
  data-url="http://api.twitcasting.tv/api/livestatus"
  data-p-appid="YahooのDeveloperネットワークで取得したAPPLICATION_IDを貼付"
  data-p-user="任意のユーザID"
  data-p-output="json"
  data-filter="calc"
  >
  {{islive}}</script>
 
</body>
</html>

こちらもこれだけです。
あまりいいコードではないですが、必要な機能を満たせる最小限構成ということで。

まず、注目してほしいのが、

data-filter="calc"

の部分です。
このfilterに加工用のjavascript関数を指定します。
今回はcalcという関数を用意しました。

で、calc関数の中で行なっている処理は至って初歩的な事で、
まずfunction calc(data)としたことで、calc関数でもJSONPで受け取ったデータを参照できるようになりました。

よって次の行でresultにdata.isliveとしてisliveの結果を代入しています。

これで当然resultにはtrueもしくはfalseが入っていますので、引き続きif文で処理をします。
Jqueryを使って、trueであればbody直後のid='twicas'のdiv要素にOn Airの画像をaタグ付きで表示、
falseならbody直後のid='twicas'のdiv要素にOffAirの画像をaタグ付きで表示、

という処理を行なっているだけです。

画像は任意の物を用意してどこかのサーバへアップロードしたものをsrc指定してあげれば大丈夫ですね。


あとはこの処理をブログパーツとして貼り付けるだけです。

参考までに、
もしGoogleのブログサービスであるBloggerを使用しているなら、
ブログの管理画面から、「レイアウト」→「HTML/JavaScript」を編集して、
以下の部分のコードだけ貼り付けて、必要な部分だけ入力すれば動くと思います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="twicas">
</div>
 
<script>
  result = '';

  function calc(data){
    result = data.islive;
    $(function() {
      $('#twicas').empty();
      var output = '';
      if(result == true){
        output += '<a href="http://twitcasting.tv/任意のユーザID" target="_blank"><img src="http://任意のサーバ/onair.png" /></a>';
      }else{
        output += '<a href="http://twitcasting.tv/任意のユーザID" target="_blank"><img src="http://任意のサーバ/offair.png" /></a>';
      }
      $('#twicas').append(output);
  });
  return result;
}
</script>

<script src="http://i.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js"
  data-url="http://api.twitcasting.tv/api/livestatus"
  data-p-appid="YahooのDeveloperネットワークで取得したAPPLICATION_IDを貼付"
  data-p-user="任意のユーザID"
  data-p-output="json"
  data-filter="calc"
  >
  {{islive}}</script>


いかがだったでしょうか。
比較的簡単にAPIを使ったブログパーツの作成が出来たのではないでしょうか。
応用すればかなり色んな事ができそうです。

でわでわ。