So-net無料ブログ作成
» スポンサーリンク
2009年11月 | 2009年12月 |2010年01月
- | 次の10件

Topsy's Otter APIを使ってTweet数の多い記事をブログから抽出してリスト表示
» 雑記・その他 

[追記] 2013/09/25
API の利用が有料になったため、この記事で書いた方法は使えなくなりました。

最近になって Twitter 上でもちらほら取り上げてもらえているようなので、Tweet 数(つぶやかれ数)の多い記事を抽出してリスト表示するようにしてみました。
API は本家のものではなく、Topsy で公開されているものを利用しました。



 反映の速さと収集率の高さでは TweetMeme に一日の長があって、Tweet カウンタの設置も簡単で API も充実しているのですが、ドキュメント(解説そのものよりも HELP ページの構成)が分かりにくい。

 あと、ウィジェットボタンを押して表示される履歴ページのレイアウトがごちごちゃしてて見難いのと、履歴が1週間分しか表示されないのがちょっと残念。(Twitter 的には1週間で十分?)

TOPSY



 他にもないかいろいろ調べてみると、比較的新しい(と思われる) Topsy という Tweet 検索サイトが良さそうな感じ。
 反映の速さは TweetMeme よりほんの少し遅いようですが、収集率の高さでは Topsy のほうが上回っているときもあるようでなかなか健闘しているようです。



 ウィジェットボタンも用意されていて飛んだ先の履歴ページも見やすいし、API (Topsy's Otter API) もシンプルで使いやすそうだったので、とりあえずしばらくの間は Topsy の API を使ってみることにしました。

Topsy's Otter API



 API は、http://otter.topsy.com の後ろに "/取得リソース名" + ".レスポンス形式" + "?q=クエリーパラメータ" の組み合わせで HTTP/GET でコールします。
 レスポンス形式は、JSON、JavaScript (JSONP) 、Text が選べます。

http://otter.topsy.com/search.js?q=site:[URL]&window=a&callback=[function]

 今回はブログ全体から Tweet 数が多い記事(人気の記事)のリストを取得したいのでリソース名は "search"、レスポンスは JavaScript からコールバックを使って JSONP として利用するので形式指定は ".js" になります。

 クエリー部分 (?q=) は、サイト内を対象にするので "site:" を付けてブログの URL を指定、集計時間の範囲 (window) は全 Tweet を対象にするので "a" を指定、レスポンス形式で ".js" を指定した場合は結果を受け取るコールバック関数名もあわせて指定します。

 取得する件数は何も指定しないと10件(1ページ分)になりますが、"&perpage=n" を追加してn件数分(最大50件)取得できます。件数が多い場合はページ指定 (page) を増やせば「最大10ページ×perpage」の件数を受け取ることもできます。

呼び出し例

<script type="text/javascript">
// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //    list[].trackback_total :Tweet数
  //    list[].title :引用された記事のタイトル
  //    list[].url :引用された記事のURL
  //   などが入ります
}
</script>

//  リクエスト
<script type="text/javascript" src="http://otter.topsy.com/search.js?q=site:sothis.blog.so-net.ne.jp&window=a&callback=topsyResult"></script>

 コールバック関数が呼ばれるタイミングは API のレスポンス任せなので、documemt.write では意図する場所に表示されない場合があるので注意。

 また、他の DOM 操作で div 要素の内容などを更新している場合は、配置する位置によってはコールバックのタイミングに注意する必要があります。
 より安全に更新したい場合は onload イベントで createElement と appendChild で API を呼び出してやります。

<script type="text/javascript">
// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //    list[].trackback_total :Tweet数
  //    list[].title :引用された記事のタイトル
  //    list[].url :引用された記事のURL
  //   などが入ります
}

//  リクエスト
function topsyScript(){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'UTF-8';
  script.src = 'http://otter.topsy.com/search.js?q=site:sothis.blog.so-net.ne.jp&window=a&callback=topsyResult';
  document.body.appendChild(script);
}

if (window.addEventListener){
  window.addEventListener("load", topsyScript, false);
}else if(window.attachEvent){
  window.attachEvent("onload", topsyScript);
}else{
  topsyScript();
}
</script>

 結果はコールバック関数の data.response.list[] に data.response.list.length 件数格納されています。
 ページが複数に分かれている場合は data.response[].list[] に data.response.length ページ数分格納されています。

 結果は Tweet 数の多い順 (.trackback_total) ではなく人気度の高い順 (.score) に並んでいるので、必要に応じて Array.sort などでソートしてやる必要があります。

 また、Tweet 数が多い記事でも人気度 (score) が他より低めに評価されている記事の場合、 デフォルトの10件分に入ってないことがあるので、クエリーパラメータの perpage を多めに指定したほうがよいかもしれません。

[追記]
 Tweet 数が多い記事 (URL) でも score の値が極端に低いと "window=a" を指定してもリストにあがってこないときがあります。その場合 "window=d" や "window=w" で検索してやるとヒットすることがあります。
[追記ここまで]

 他に似たような値の hits という項目があるのですが、レスポンスパラメータの解説がないので詳しいことは不明。



 コールバック関数の中で必要な項目を取り出して整形したものを DOM 操作で表示したいところに差し込んでやれば上のようなリストの出来上がりです。

Tweet カウンタ 兼 Retweet ボタン

表示したい位置に埋め込むだけで簡単に利用できます。
Topsy Labs に埋め込みコードと表示サンプルがあります。
右の例は big タイプで、small タイプもあります。
色 (Theme) は9種類から選択できます。

» head セクションに追加
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

» 表示したい箇所に追加 (URL、記事タイトルを " " で囲むのを忘れずに)
<div class="topsy_widget_data">
<!--
{
"url": "[URL]",
"title": "[記事タイトル],"
"style": "big",
"theme": "blue"
}
//-->
</div>


こんな記事書いておきながら Twitter アカウントはまだ持ってないんですよね…

[追記]
2010年6月末あたりに仕様変更があったのか、ウィジェットのパラメータの "title" に日本語が含まれているとエラーが発生してカウンタが表示されなくなってました。
原因は不明ですが、とりあえずパラメータの "title" を省略すれば回避できます。
title パラメータがない場合は HTML 内の title タグから引用されます。

[関連サイト]
 Topsy
 Topsy's Otter API
 Topsy Labs
 TweetMeme
nice!(1)  コメント(0)  トラックバック(1)   » カテゴリー:雑記・その他
permalink
trackback


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク

美しいラインアートのビジュアライズ : AMBIENT REEL by KU-SCHNEIDER
» 音楽系動画ネタ 

フランクフルトを中心に活躍するモーショングラフィックデザイナー Ku-Schneider 氏の作品。
曲は Alva Noto & 坂本龍一の Moon (アルバム Insen に収録)。

Loading...

う、うつくしい・・・
(フルスクリーンモードでも見てみてね)

[関連サイト]
 ku-schneider.com
 Alva Noto
 siteSakamoto
 ACHT FRANKFURT


Insen

Insen

  • アーティスト: Ryuichi Sakamoto,Ryuichi Sakamoto
  • 出版社/メーカー: Asphodel
  • 発売日: 2005/05/30
  • メディア: CD
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:音楽系動画ネタ
permalink
trackback


エレクトリック仕様に改造されたディジュリドゥ
» ハードウェア(楽器) 

Kyle Evans 氏によるアボリジニの民族楽器ディジュリドゥの自作エレクトリック仕様。
Bluetooth でワイヤレスになってます。


© Kyle Evans

 本体音声を内蔵マイクで拾って、6つのボタン、5つのトグルスイッチ、6つのノブのパラメータと共に Arduino を介して Bluetooth で Mac へ送られ Max/MSP を使って音声が加工されています。

実際に演奏したデモが公開されてます。
参考に3つ目以降にディジュリドゥの動画もいれときました。

Loading...

そのままのディジュリドゥでも十分テクノ、トランス的なんですが、さらにスペーシーでアンビエントな雰囲気になってます。

ついでにディジュリドゥについても少し解説しておきます。


 ディジュリドゥ (Didgeridoo) はオーストラリア北部のアボリジニによって約1000年前に作られた「世界最古の管楽器」といわれ、昔は主に宗教的儀式などで演奏されていたそうです。
 「ディジュリドゥ」という名前は発見した白人たちが「そういうふうに聴こえた」ことから後で名づけられたもので、現地では Mago (マゴ)、Yidaki (イダキ)、Yigi Yigi (イギイギ) などと呼ばれています。

 オリジナルの材料は主にユーカリの木で、中の空洞はシロアリに食われて自然に筒状になったものです。現在ではユーカリ以外にも竹や樹脂など他の素材で作られたものもたくさん作られています。

 演奏方法は管の片方に当てた唇を振動させて音を出しつつ循環呼吸で持続音を作ります。唇をリード代わりに使う唇簧(しんこう)楽器なので、木製ですが金管楽器の一種に分類されています。

[関連サイト]
 Yaktronix
 Arduino
 Max/MSP


決定盤!!ディジュリドゥの響き

決定盤!!ディジュリドゥの響き

  • アーティスト: マーク・アイトキンス,マーク・アトキンス
  • 出版社/メーカー: ポニーキャニオン
  • 発売日: 2009/10/07
  • メディア: CD
民族楽器 PVC製サイケデリックディジュリドゥ

民族楽器 PVC製サイケデリックディジュリドゥ

  • 出版社/メーカー: tirakita
  • メディア:
nice!(1)  コメント(2)  トラックバック(0)   » カテゴリー:ハードウェア(楽器)
permalink
trackback


DJアイテムをデザインしたシルバーアクセサリ : Darkcloud Silver
» ハードウェア(アイテム) 

読者の方から情報提供していただきました。(Yさんありがとうございました)

オーストラリアのシドニーを中心に活動するデザイナー Nathan Thomas が主宰するブランド Darkcloud Silver のシルバーアクセサリを紹介。
下で紹介しているのは一部で他にもいろいろあります。


© Nathan Thomas / Darkcloud Silver
connoisseur Turntable Pendant $540 / Old School Turntable Pendant $420


© Nathan Thomas / Darkcloud Silver
Crate Digger Pendant $420 / Earphones Pendant $450


© Nathan Thomas / Darkcloud Silver
Ghetto Blaster Pendant $750 / Speaker box Pendant $360


© Nathan Thomas / Darkcloud Silver
Small turntable ring with vinyl $350 / Studio Headphones Ring $430

 素材はスターリングシルバーにロジウムコーティングを施したもので、レコード盤の部分は本物のレコードから加工されたものが使われているそうです。

日本ではDMR オンラインショップ で一部取扱いしているようです。
connoisseur Turntable Pendant 40,980円
Earphones pendant 34,980円
Studio headphones pendant 32,980円


[関連サイト]
 Darkcloud Silver
 DMR オンラインショップ
nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:ハードウェア(アイテム)
permalink
trackback


JavaScriptでYouTubeをパネルクイズ風にするテスト
» 音楽ネタ全般 

JavaScript で YouTube プレイヤーを制御しつつ、上にボックスをランダムに置いてパネルクイズ風にするテスト。(とかいいつつ技術的にはたいしたとこはしてません)

再生ボタンと右側の効果ボタンをいろいろ押してみてください。

 ステータス: ロード中...
再生開始 最初から 一旦停止 再生終了 パネル切り替え フィルター切り替え フェード効果切り替え

 プレイヤーの制御はこの前やった方法と同じYouTube JavaScript Player API を使って JavaScript から制御しています。この部分は Google のサンプルコードとあまり変わってません (ていうかサンプルコードより単純です)。

 パネルとフィルターは CSS の z-zindex 属性と position 属性を利用してプレイヤーの上に置いています。
 z-index 属性を有効にするために、下になる YouTube プレイヤーは Flash のパラメータである wmode で "transparent" を指定しておく必要がありました。

 親の div で position:relative; z-index:0 を指定して、プレイヤー、フィルター、パネルの順番に position:abusolue;top:0px;left:0px として z-index で 1~3 を指定しています。

 パネルの表示はインターバルタイマー (setInterval) で一定間隔で呼び出して縦横のパネル1枚ずつ (div 要素の background 属性) をランダムに黒 (color:#000000) または透過 (transparent) に切り替えて、20秒ごとに少しずつ黒い部分を減らしています。

 フィルターは1ピクセル幅の黒い横縞(白い部分が透過)の GIF 画像を div 要素の background 属性に指定してプレイヤーとパネルの間に挟み込んでいます。
 フェード効果はパネルを表示したあとに Script.aculo.us の Effect.Appear jQuery の fadeOut を呼び出してるだけの単純なものです。(デフォルトは OFF)

こんなんできるかなと思いつきで適当にやってみました。
これを使って何か面白いものが作れないかと考えてるんですが・・・

[追記] 2010/11/26
ブログの拡大画像の表示で prototype.js (+Script.aculo.us) + lightbox 2 をやめて jQuery + ColorBox に替えたのにあわせて、ここのフェード処理も jQuery の fadeOut に替えました。

[関連サイト]
 Google YouTube JavaScript Player API
 Google AJAX Libraries API
 Prototype.js
 Script.aculo.us
 jQuery
 DJ Leonid Rudenko

nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:音楽ネタ全般
permalink
trackback


ハムスターのジャズバンド : The Clever Hamsters
» 音楽系動画ネタ 

こ、これはっ!(笑)

Loading...

なんだか微笑ましい。
和みますね。

上の3つ以外にもオーディション風の動画がたくさんあります。→YouTube

↓公式サイトもありました。


[関連サイト]
 Staydrenched
 YouTube - Staydrenched
nice!(3)  コメント(1)  トラックバック(0)   » カテゴリー:音楽系動画ネタ
permalink
trackback


手軽に構築できるフリーのMP3ストリーミングサーバ : Vibe Streamer
» ソフトウェア(音楽再生) 

Windows 2000/XP/2003server/Vista/2008server/7 に対応したフリーの MP3 ストリーミングサーバ Vibe Streamer を紹介。
現時点でのバージョンは 2009/11/26 に更新された ver.3.0.2 です。

 サーバ側の管理アプリケーションは Windows の実行ファイル形式で、クライアント側のプレイヤーはブラウザから操作する Web アプリケーションになっています。
 ストリーミング再生専用なので MP3 ファイルを直接ダウンロードする機能はありません。

» サーバ側の管理アプリケーション


» クライアント側の Web アプリケーション(ブラウザ上のプレイヤー) クリックで拡大


 再生形態は、SHOUTcast のようにサーバ側が一方的にストリーミングするものを受信して再生するのではなく、複数の PC で iTunes を共有して再生するやり方に似ていて、公開されたフォルダのなかからリスナーが聴きたい曲を選択して再生するオンデマンド形式になっています。

 再生ビットレートは個々の MP3 ファイルそのままなので、音質的にはローカルで再生しているのとほぼ同じになります。(ちなみに SHOUTcast では指定されたビットレートに再エンコードされる)

サーバ側の管理アプリケーションの設定項目

(1) Status : ステータス


 サーバを起動しても「Start」ボタンを押してサービスを開始しないとクライアントからはアクセスできません。

(2) Users and Groups : ユーザとグループの管理

↑クリックで拡大

 Vibe Streamer での「ユーザ」は1つのアカウントで複数のリスナーが(複数の IP アドレスで)ログインして再生することが想定されているので、必ずしも1つのユーザが1人のリスナーとは限りません。
 ユーザは複数のグループに属することができます。グループ設定を省略してユーザの登録だけで運用することも可能です。

 「General 」→「Administrator」を有効にするとクライアントプレイヤーの左下にある「Settings」ボタンが有効になります。(後述のクライアントプレイヤーの解説参照)

(3) Sharing : ライブラリの共有管理

↑クリックで拡大

 複数のディレクトリをフォルダ単位で登録することができます。ライブラリを登録するとインデックスの構築が行われます。インデックスは定期的に自動で再構築するように設定できます。
 パーミッションを細かく設定することでより複雑なアクセス制御をすることが可能です。

(4) Settings : 各種設定

↑クリックで拡大

 IP アドレスの項目はデフォルトの 0.0.0.0 (=任意の IP を表す)にしておけば LAN 上からは PC 割り振られているローカル IP アドレスと設定したポート番号 (例: http://192.168.XXX.XXX:8081 など)でアクセスすることができます。

 WAN で外向きに公開する場合はルータのポートフォワード(ポートマッピング)の設定で、サーバ PC のローカル IP アドレスとポート番号をルータのポートに関連付ける必要がありますが、ルータが UPnP に対応していて有効になっていればルータの設定はそのままで使えます。

 通常はプロバイダから割り振られるグローバル IP アドレスは固定されていない場合が多いので、無料のダイナミック DNS サービスなどを利用して仮ドメインを割り当ててやるのもよいかもしれません。

(5) Security : サイトパーミッションの設定

↑クリックで拡大

 ここでは Sharing で設定したパーミッションよりさらに上の段階(サイトの入り口にあたる)のアクセス設定を行います。例えば、特定の地域 (IPアドレスでフィルタリング) だけを対象にしたり、逆に制限したりすることが可能です。

クライアント側のプレイヤー

(1) ログイン


 指定の IP アドレスとポート番号 (http://XXX.XXX.XXX.XXX:NNNN) 、もしくは DNS で割り当てられた URL にポート番号をつけてブラウザからアクセスするとログインダイアログが表示されます。

(2) プレイヤー

クリックで拡大

 プレイヤーは XHTML、JavaScript、Flash の組み合わせで作られた Web アプリケーションで、ブラウザを介して操作・再生します。
 下段の「Explorer」に表示される公開フォルダにアクセスして、聴きたい曲のファイルもしくはフォルダを探して上段のプレイリストにドロップして登録します。

 左側に表示されるストリップはプラグイン形式になっていて、Ver 3.0.x ではプレイリスト管理、アートワーク表示、オンラインユーザ表示、Last.fm の ユーザ設定項目が用意されています。(初期状態では Last.fm のストリップは非表示)

(3) Settings : 管理者モードのときだけ有効


 サーバ側の「Users and Group」→「General」→「Administrator」を有効にすると、プレイヤーの左下にある「Settings」のボタンが有効になります。なぜかこの設定項目はサーバ側にはありません。

 左にチェックボックス、右に現在値が表示されますが、ダイアログが開いたときチェックボックスはすべて OFF になっていて状態が反映されてないのでちょっと分かりにくいかも。チェックを OF/OFF する以外に右側の項目欄に直接入力して変更することもできます。


最近流やりのクラウド系サービスとは方向性が逆で、これを使って配信したいという人はかなり限られそうではありますが、インストールも簡単で短時間でセットアップできて使い勝手もいいので、アイディア次第でいろいろ活用できるのではないでしょうか。

[関連サイト]
 Free MP3 streaming server - Vibe Streamer
nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:ソフトウェア(音楽再生)
permalink
trackback


- | 次の10件
2009年11月 |2009年12月 |2010年01月