ustreamer with IRC

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] kei-sさんバージョンの ustreamer をベースに、IRC も同時に表示するものを作ってみました。ついでに、IE でも動くようにしました。
[キーワード] ustream,IRC

« Twitter クライアント chirrup 1.43版 ― Twitter の JSON フォーマット変更(2007年7月末実施)に対応 | トップページ | 右クリックで英和、和英(powered by 『英辞郎 on the Web』) »

2007.08.09

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上で動かしてます。

関連リンク

投稿者: tsupo 2007.08.09 午後 05:29 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


プログラミング」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/16058122

この記事へのトラックバック一覧です: ustreamer with IRC:

コメント

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場