Wassr(ワッサー)で自分のひとことと参加チャンネル内のひとことをマージして表示(JavaScript)

2008/11/14

Wassr(ワッサー)では自分のひとことと講読中の人のひとことが混ざって表示されます。

自分のひとことだけ表示するにはhttp://wassr.jp/user/<ユーザID>とすればいいわけですが、これだと今度は参加チャンネル内のひとことが一緒に表示されなくなるので不便です。

そこで、自分のひとことと参加チャンネル内のひとことを時系列にマージして表示するプログラムを作ってみました。

使用するAPIは以下の3種類です。

自分のひとこと取得
http://api.wassr.jp/user_timeline.json?id=<ユーザID>
参加チャンネル一覧取得
http://api.wassr.jp/channel_user/user_list.json?login_id=<ユーザID>
指定チャンネル内でのひとこと
http://api.wassr.jp/channel_message/list.json?name_en=<チャンネル名>

処理の流れを示します。

1. 自分のひとこと取得APIを使用して指定ユーザのひとこと一覧を取得。コールバック関数get_timeline()で必要なデータを取り出す。

2. 参加チャンネル一覧取得APIを使用して指定ユーザの参加チャンネル一覧を取得。コールバック関数get_channel()でチャンネル毎ひとこと一覧取得APIのパラメータを設定。

3. 上記API定義時のコールバック関数get_channel_timeline()で指定チャンネル内のひとこと一覧を取得。

4. 1.と3.で取得したひとことをマージして時系列に表示。

尚、epoch timeを日付文字列に変換する関数は以前紹介したWassr(ワッサー)のAPI使用例(JavaScript)のepoch2date()を使用しています。

<head>
:
<script type="text/javascript">

  my_id = "l_w_i";                              // 対象ユーザID

  timeline_list = new Array();                  // ひとこと格納配列
  epoch_list    = new Array();                  // ひとこと投稿日時格納配列

  //
  // ひとこと一覧取得
  //
  function get_timeline(result)
  {
    for (var i = 0; i < result.length; i++)
    {
      var text  = result[i]['text'];            // ひとこと
      var epoch = result[i]['epoch'];           // 投稿日時

      timeline_list[epoch] = text;              // ひとこと保存
      epoch_list.push(epoch);                   // ひとこと投稿日時保存
    }
  }

  //
  // 参加チャンネル一覧取得
  //
  function get_channel(result)
  {
    for (var i = 0; i < result.channels.length; i++)
    {
      var channel = result.channels[i]['name_en'];  // チャンネル名

      // チャンネル内ひとこと一覧取得指示
      var element = document.createElement('script');
      element.setAttribute('type', 'text/javascript');
      element.setAttribute('src', 'http://api.wassr.jp/channel_message/list.json?name_en=' + channel + '&callback=get_channel_timeline');
      document.getElementsByTagName('head')[0].appendChild(element);
    }
  } 

  //
  // チャンネル内ひとこと一覧取得
  //
  function get_channel_timeline(result)
  {
    for (var i = 0; i < result.length; i++)
    {
      var id = result[i].user['login_id'];                  // ID
      if (id == my_id)                                      // IDが指定したユーザの場合のみひとこと取得
      {
        var text    = result[i]['body'];                    // ひとこと
        var date    = result[i]['created_on'];              // 投稿日時(Thu, 06 Nov 2008 23:30:44 +0900)
        var epoch   = Date.parse(date) / 1000;              // 投稿日時 -> epoch time変換
        var channel = result[i].channel['name_en'];         // チャンネル
        timeline_list[epoch] = '#' + channel + ' ' + text;  // ひとこと保存
        epoch_list.push(epoch);                             // ひとこと投稿日時保存
      }
    }
  }

  //
  // ひとこと出力
  //
  function disp_timeline()
  {
    epoch_list.sort();                          // ひとこと投稿日時ソート

    var out = '<ul>\n';

    for (var i = epoch_list.length - 1; i >= 0; i--)
    {
      key  = epoch_list[i];                     // ひとこと投稿日時
      text = timeline_list[key];                // ひとこと
      date = epoch2date(key);                   // epoch time -> YYYY/MM/DD HH:MM:SS変換

      out += '  <li>' + date + ' ' + text + '</li>\n';
    }

    out += '</ul>\n';

    document.getElementById('wassr').innerHTML = out;
  }
</script>

</head>

<body>
  <div id="wassr"></div>

  <!-- ひとこと取得 -->
  <script type="text/javascript" src="http://api.wassr.jp/user_timeline.json?id=l_w_i&callback=get_timeline"></script>

  <!-- 参加チャンネル情報取得 -->
  <script type="text/javascript" src="http://api.wassr.jp/channel_user/user_list.json?login_id=l_w_i&callback=get_channel"></script>

  <!-- ひとこと出力 -->
  <script type="text/javascript">disp_timeline();</script>
:
</body>

(結果)

<ul>
  <li>2008/11/13 22:23:43 #livedoor livedoorラボ「EDGE」で僕の作ったコードが紹介されました。 http://l-w-i.net/m/20081102_01.txt</li>
  <li>2008/11/13 17:34:26 GREEも上場ですね。 http://www.tse.or.jp/listing/new/200812/12gree.html</li>
  <li>2008/11/09 22:49:21 #livedoor iPhoneアプリ紹介(AeroReader) ... livedoor Reader http://limechat.net/aeroreader/ja.html </li>
  :
</ul>