ustreamer with IRC

☆

最終更新: 2007年8月10日

他宅警備員向けツール ustreamer に IRC も一緒に表示するのを作ってみました。ベースにしたのは「Ustreamerをゴニョゴニョさせてもらった - Libelablog」(kei-sさん)の ustreamer です。

以下、kei-sさんバージョンの ustreamer のソース一式のうち、index.html にあてるパッチ(context diff 形式)。ついでに、IE7 でも動くようにしてみました(たぶん、IE6 でも動くと思います)。

*** index.html.orig	Sun Jul 29 00:14:48 2007
--- index.html	Fri Aug 10 01:32:27 2007
***************
*** 24,30 ****
  var current_width = 300;
  var init_load_limit = 5;
  var use_innerhtml = (navigator.userAgent.match(/Safari/) || window.opera) ? true : false;
! var default_channels = 'libelabo,kei-s,june29';
  
  var buddies = [];
  
--- 24,31 ----
  var current_width = 300;
  var init_load_limit = 5;
  var use_innerhtml = (navigator.userAgent.match(/Safari/) || window.opera) ? true : false;
! var default_channels = '';
! var withIRC = true; // IRC 不要のときは false にしてね
  
  var buddies = [];
  
***************
*** 50,55 ****
--- 51,69 ----
    document.getElementById("selector-" + buddy.id).setAttribute("style", "background-color: yellow;")
  }
  
+ function entryListener(elem, eventType, func, useCapture) {
+     if (arguments[3] == null)
+         useCapture = false;
+     if (elem.attachEvent) {
+         // IE
+         elem.attachEvent("on" + eventType, func);
+     }
+     else if (elem.addEventListener) {
+         // FireFox, Safari
+         elem.addEventListener(eventType, func, useCapture);
+     }
+ }
+ 
  function addNewSelector(buddy){
  	var selectors = document.getElementById("channel-selector");
  	var div = document.createElement('div');
***************
*** 64,70 ****
  	onAirImg.src = "images/off.png";
  	onAirImg.alt = "off";
  	div.appendChild(onAirImg);
! 	div.addEventListener("click",toggleBuddy, false);
  	div.appendChild(document.createTextNode(buddy.name))
  	selectors.appendChild(div);
  }
--- 78,85 ----
  	onAirImg.src = "images/off.png";
  	onAirImg.alt = "off";
  	div.appendChild(onAirImg);
!      // div.addEventListener("click",toggleBuddy, false);
!         entryListener(div, "click", toggleBuddy, false);
  	div.appendChild(document.createTextNode(buddy.name))
  	selectors.appendChild(div);
  }
***************
*** 95,100 ****
--- 110,140 ----
  }
    container.appendChild(document.createElement('br'));
  
+ if ( withIRC ) {
+   // IRC
+   if(use_innerhtml){
+   container.innerHTML = [
+       '<embed ',
+       ' width="', current_width, '"',
+       ' height="200"',
+       ' type="application/x-shockwave-flash" ',
+       ' flashvars="channel=#', buddy.name, '" ',
+       ' src="http://ustream.tv/IrcClient.swf" ',
+       ' title="', buddy.name, '"/>'
+     ].join("");
+   } else {
+   var el = document.createElement('embed');
+   el.width = current_width;
+   el.height = 200;
+   el.src = "http://ustream.tv/IrcClient.swf";
+   el.type = "application/x-shockwave-flash";
+   el.wmode = "transparent";
+   el.flashvars = "channel=#" + buddy.name;
+   el.title = buddy.name;
+   container.appendChild(el);
+   }
+ }
+ 
    var caption = document.createElement('div');
    caption.className = "caption";
    caption.innerHTML = "<a href='http://ustream.tv/watch/channel/" + buddy.id + "' target=_blank>" + buddy.name + '</a> ';
***************
*** 328,348 ****
  <div>
  <p><a href="http://bulknews.net/tmp/ustream2.html">miyagawa様のustreamer</a>と
  <a href="http://bulkneets.net/tmp/ustream2.html">mala様のustreamer</a>を
! <a href="http://tech.yappo.jp/tmp/ustream/ustream2.html">Yappo様がマージしたもの</a>に，さらに手を入れてみました．
! やや詳しい説明は<a href="http://blog.libelabo.jp/2007/07/28/ustreamer-gonyo2/">こちら</a>
  </p>
  
! <p>※ Firefox 2.0.0.5 と Safari(Windows版) 3.0.2 のみで動作確認しています．</p>
  
! <p>ステキなツールを作成された先人の皆様に感謝です．ありがとうございます！です！</p>
  <p>
  inspired by <a href="http://bulknews.net/tmp/ustream2.html">ustreamer</a>,
  <a href="http://bulkneets.net/tmp/ustream2.html">ustreamer</a>,
! <a href="http://tech.yappo.jp/tmp/ustream/ustream2.html">ustreamer</a> /
  
  thanx to <a href="http://twitter.1x1.jp/search/" target="_blank">Twitter検索</a>,
  <a href="http://code.google.com/apis/ajaxfeeds/" target="_blank">Google AJAX Feed API</a> /
  icons by <a href="http://www.famfamfam.com/lab/icons/" target="_blank">famfamfam.com</a> / arranged by <a href="http://d.hatena.ne.jp/kei-s">kei-s</a> &amp <a href="http://june29.jp/">june29</a> in libelabo</p>
  </div>
  
  </body>
--- 368,392 ----
  <div>
  <p><a href="http://bulknews.net/tmp/ustream2.html">miyagawa様のustreamer</a>と
  <a href="http://bulkneets.net/tmp/ustream2.html">mala様のustreamer</a>を
! <a href="http://tech.yappo.jp/tmp/ustream/ustream2.html">Yappo様がマージしたもの</a>に，
! <a href="http://blog.libelabo.jp/2007/07/28/ustreamer-gonyo2">kei-s様がさらに手を入れたもの</a>に対して、
! IRC 同時表示を追加してみました．
! やや詳しい説明は<a href="http://watcher.moe-nifty.com/memo/2007/08/ustreamer_with_.html">こちら</a>
  </p>
  
! <p>※ Firefox 2.0.0.5 と Safari(Windows版) 3.0.2 と Internet Explorer 7.0.5730.11 のみで動作確認しています．</p>
  
! <p>ステキなツールを作成された先人の皆様に感謝です．ありがとうございます！です！ですの！</p>
  <p>
  inspired by <a href="http://bulknews.net/tmp/ustream2.html">ustreamer</a>,
  <a href="http://bulkneets.net/tmp/ustream2.html">ustreamer</a>,
! <a href="http://tech.yappo.jp/tmp/ustream/ustream2.html">ustreamer</a>,
! <a href="http://libelabo.jp/ustreamer/">ustreamer</a> /
  
  thanx to <a href="http://twitter.1x1.jp/search/" target="_blank">Twitter検索</a>,
  <a href="http://code.google.com/apis/ajaxfeeds/" target="_blank">Google AJAX Feed API</a> /
  icons by <a href="http://www.famfamfam.com/lab/icons/" target="_blank">famfamfam.com</a> / arranged by <a href="http://d.hatena.ne.jp/kei-s">kei-s</a> &amp <a href="http://june29.jp/">june29</a> in libelabo</p>
+ / 'with IRC' edition by <a href="http://watcher.moe-nifty.com/">tsupo</a>
  </div>
  
  </body>

あとは、default_channels の値を自分がよく見るチャンネルに書き換えれば、いいんじゃないかな。自分で管理できるサーバを持っている人は、channel2json.cgi とか onairstatus2json.cgi を自分のサーバに設置して、index.html の頭の方にある path_to_api と path_to_onair_api の値を書き換えれば、さらにいいと思います。

ということで、上記のパッチをあてれば、IRC が一緒に表示されるようになるので、ustream でTV会議ってことも簡単に実現できると思います。最近は、複数のチャンネルを同時に視聴しつつ、それぞれの IRC も同時に見てないと話についていけないという場面が増えてきてますよね。

おまけ

自分の ustream チャンネルを持っている人は、「夏のお嬢さん」を使ってみるのもおすすめです。 ただし、IRC の代わりに Twitter で会議をすることになるので、会議の内容が各々の follower な人たちに見えまくりということになりますけどね!

追記

なぜかpatchに失敗してIRCチャンネル名の取得にも失敗したけど。

ustreamグループ - worrisの日記 - チャット付きustreamer

確かに、1箇所、パッチあてに失敗するようです。なんかミスってる(→ 最初のパッチを作るときにベースにしたソース一式と、いま配布されているソース一式が微妙に変わっているのが原因みたいです)ようなので、パッチを作り直しました。 せっかくなので、ライナーノーツというか注意書きっぽい部分も書き直しています。

試しに、LaCoocan に設置してみようとしたんですが、LaCoocan にインストール済みの perl モジュールが足りないようで、channel2json.cgi が 500 Internal Server Error で動きませんでした。どの辺が足りないのかというと

use Cache::FileCache;
use URI::Fetch;
use JSON::Syck;

の辺り。仕方がないので、自分のローカルPC上で動かしてます。

関連リンク

• ustreamer
• 他宅警備
• ustreamグループ - worrisの日記 - チャット付きustreamer worrisさんとネタがかぶっていることが判明