メイン

「MashUp」のアーカイブ

2008年1月13日

Yahoo! Pipes と jQuery で1年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その2

昨日のエントリの続き。

作ったPipeを使って、1年前のはてぶ人気エントリを表示するガジェットの作成に取りかかったのですが、Pipeを作る際に参考にさせてもらったてっく煮のにとよんさんから

「1年前のはてブを表示。1年に限らず、数年まとめて見れたら面白いかもしれん。」

と、はてぶコメントをいただきました。それもそうだなと思い、軌道修正。

N年前の人気エントリをタブで分けて表示するガジェットにしてみました。

↓とりあえず完成系。

表示件数は「設定」から10~50の間で選択可能です。

はてぶが始まったのが、2005年2月10日なので、2月10日を超えると、タブが3つになります。

ガジェットのソースは↓こんな感じ。

xml : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past_hagena.xml

js : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past-hatena.js

var retryNum = 0;
var retryMaxNum = 10;
function init(){
	for(var i =0,len = days.length;i<len;i++){
		tabs.addDynamicTab(getDispDate(days[i]), callbackGenerator(days[i]));
	}
}
function callbackGenerator(day) {
	return function(tabId) {
		callbackTab(tabId, day);
	}
}
function callbackTab(tabId,day){
	retryNum ++;
	var feed_url = getURL(day);
	_gel(tabId).innerHTML = '<div class="feed">Loading...</div>';
	_IG_FetchFeedAsJSON(feed_url,function(feed) {
		var html ='';
		try{
		html = '<div class="feed"><span class="subtitle">'+getDispDate(day)+'の人気エントリ</span><ul>';
		for (var i = 0; i < feed.Entry.length; i++) {
			html += '<li><a target="_blank" href="'+feed.Entry[i].Link+'">'+feed.Entry[i].Title+'</a>'+createBookmarkNum(feed.Entry[i].Link,feed.Entry[i].Summary)+'</li>';
		}
		html = html + '</ul></div>';
		$(_gel(tabId)).html(html);
		_IG_AdjustIFrameHeight();
		retryNum = 0;
		}catch(e){
			if(retryNum <= retryMaxNum){
				callbackTab(tabId,day)
			}else{
				_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
				retryNum = 0;
			}
		}
	}, prefs.getInt("num_feed"),true);
	_IG_AdjustIFrameHeight();
}
function getURL(d){
	var m = d.getMonth() + 1;
	((''+m).length == 2)? m = ''+m:m = '0' + m;
	var da = d.getDate();
	((''+da).length == 2)?da=''+da:da='0'+da;
	var ds = (d.getFullYear())+ m + da;
	return 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=rss';
}
function getDispDate(d){
	return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + '';
}
function createBookmarkNum(link,desc){
	var num = parseInt($(desc).text().split('/')[0]) ;
	var img = '<img src="http://b.hatena.ne.jp/entry/image/' + link + '" onload="_IG_AdjustIFrameHeight();">';
	return ' <a class="bookmarknum" target="_blank" href="http://b.hatena.ne.jp/entry/'+link+'">'+num+' users</a>';
}
_IG_RegisterOnloadHandler(init);

特殊なことをしているのは、

}catch(e){
	if(retryNum <= retryMaxNum){
		callbackTab(tabId,day)
	}else{
		_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
		retryNum = 0;
	}
}

の部分。

ガジェットからFeedを取得しに行くと、最初の取得でタイムアウトが発生してるっぽいんですね。一度アクセスすると、Google側のキャッシュが効いて大丈夫みたいなんですが。そういうわけで、最大10回までリトライするようにしています。

でもって、タイトルの「jQueryで」ってことだったんですが、ガジェットの関数とか使ってたらjQueryの使いどころがなくなっちゃいました。使っているのは以下の2箇所ですが、どちらも無理から感がありありですね。

$(_gel(tabId)).html(html);

これは、_gel(tabId).innerHTML = html でOKだし。

var num = parseInt($(desc).text().split('/')[0]) ;

この部分は、今回Pipeで取得しているDiscrition 部分が<a><strong> XXX / XXX users</strong></a>という文字列なので、$関数に渡してjQuery オブジェクトにして、text() と split()を使って、登録ユーザ数を取得しています。

なんかjQueryを使っている感がなくなっちゃったので、jQueryをふんだんに使ったガジェットは、また別途作ってみることにします。

 

できあがったガジェットを観られる、1年、2年前の人気エントリを眺めていると、流行ものあったり、今でもブクマされるような普遍的なものがあったりして楽しいです。是非、iGoogleのお供にどうぞ。

2008年1月12日

Yahoo! Pipes と jQuery で1年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その1

昨年末にYahoo! Pipes で任意のページをスクレイピングできるようになったという記事があり、気になっていました。

ってことで、そのすごさを実感するためにガジェットを作ってみることに。

ガジェットは、「1年前のはてブホッテントリ(人気エントリ)を表示する」という内容。前からちょっと考えていたネタです。

クライアント側では、これまた最近お気に入りのjQueryを使ってみることにします。

手順は、以下の通り。

  1. Yahoo! Pipes で、日付を渡すとその日の人気エントリをRSS返してくれるAPIを作成
  2. そのAPIを利用して、クライアント側で情報を表示

 

Yahoo! Pipes で、日付を渡すとその日の人気エントリをRSS返してくれるAPIを作成

なるべく簡単に、ということで、てっく煮さんで作成されている「Shinya talkをRSS化」というPipeをコピーさせてもらいます。(※海外Yahoo!のIDが必要になるので、Yahoo! Pipes を利用したい方はIDを取得してください。)

リンク先で、「Clone」リンクをクリックすると、yp_hb_gd_0001.png

Shinya talkモジュールが自分のPipesとして登録されます。

 

yp_hb_gd_0002.pngここで「Edit Source」をクリックすると、Pipeの編集画面になります。

yp_hb_gd_0003.png

オリジナルのPipeの流れは、

http://www.fujiwarashinya.com/talk/index.phpをFetchPageモジュールで取得し、<div id="center">以降を、<a id= をdelimiterとして分割」→「item.content をitem.title / item.description にコピーし、item.content を item.linkにリネーム」→「各title / link / description を正規表現でそれぞれにマッチした値に変更」→「Feed から < が含まれたものを削除」

というものです。

僕が作ろうとしているのは、http://b.hatena.ne.jp/hotentry?mode=daily&date=20050210のような動的に変更するパラメータをもったURLにアクセスし、スクレイピングしたいので、ユーザ入力としてdateを受け取り、モジュールの中でURLを組み立てます。

 

yp_hb_gd_0004.png

あとは、ページの内容にしたがって、Regexモジュールの正規表現を書き換えればOKです。

正規表現を適当に書いてしまうと、モジュールの実行速度にも影響がでるので気を付けましょう。実際、僕も最初に作ったPipeは、1回の実行に24secほどかかっていましたが、正規表現を修正することで 3sec 程度まで短くなりました。

↓完成したPipeはこちらです。

Pipes: Past Hatebu API

ちなみに各モジュールでの実行時間は画面下のDebugger の右上に表示されます。実行時間が遅いときは、各モジュールをクリックして、ここの値をチェックし、ボトルネックを見つけます。

 

yp_hb_gd_0005.png

 

そのAPIを利用して、クライアント側で情報を表示

今度は、作成したAPIをJavaScriptから利用してみます。

ガジェットを作る前に、まずは普通のhtmlから呼び出すことにしてみました。

ってことで、jQueryのgetJSON を利用してJSONを取得しようとしたのですが、ここで問題が。

jQueryのgetJSONを利用すると、アクセスするURLに自動的にnew Date().getTime() の値が付加されちゃいます。そうすると、Yahoo! Pipes 側でのキャッシュが効かなくなってしまうんですね。

このAPI でスクレイピングする先のページの情報は、基本的に変わらないものなので、都度アクセスしてしまうと無駄が多いし、レスポンスも悪くなってしまいます。

で、今度は↓こんなコードにしてみました。

s.src = 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=json&_callback=cb'
s.charset = 'UTF-8';
s.type = 'text/javascript';
s.id = 'jsonp';
$(document.body).append(s);

これで大丈夫だろうと思ったら、アクセスしているURLに変化がない(getTime()の値がついたまま)なんですね。なんでだろうと思ったら、$(document.body).append(s)で勝手にjQuery.ajaxが呼ばれていて、結果getJSONと同じ動きになっていました。

意味がなかったので、ソースを以下のように修正。

s.src = 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=json&_callback=cb'
s.charset = 'UTF-8';
s.type = 'text/javascript';
s.id = 'jsonp';
document.body.appendChild(s);

かなりべたな感じですが、しょうがないですね。

ということで、今日はここまで。連休中にはガジェット作るところまでいけると良いな。 

2007年12月21日

× はてブガジェット 2つ追加 --- はてなセリフ & amazon.co.jp

昨日のエントリで「はてなハイク × はてブ iGoogle ガジェット」を公開しましたが、同じノリでガジェットを2つ追加しました。

↓はセリ × はてブのガジェットです。


はてなセリフも、はてなハイク同様の性質を持っているので、はセリ好きな人には良い感じのガジェットなんじゃないかと思います。


もう一つは、↓amazon.co.jp × はてブのガジェットです。

amazon.co.jpのページではてブされたページを見ることができます。

新着のタブが結構おもしろいです。

こっちはアフィリエイトID入ってるので、そういうのちょっとって人はスルーしてください。

2007年12月20日

はてなハイク × はてブ iGoogle ガジェット作った

はてなの新サービス「はてなハイク」が個人的にかなりヒットしていて、「エンジニアがやたら使う言葉 - はてなハイク」とか更新を楽しみにしてたりします。

でも、ログが早くて、なかなかおもしろいところに出会えなかったり。まあ、「Keywords - はてなハイク」のページから見たら良いんですけどね。

で、ふと「おもしろいページははてブされてるんじゃないか」とか思って見てみたら、やっぱりそこそこの人たちがぶくましていて。

じゃあそれを見るガジェットでも作ろうかなと思ったわけです。

↓で、とりあえずこんな感じで作ってみましたよ。

まあ、ちょいちょいいじるんで、ブクマボタンとかできるかもしれませんが、取り急ぎ公開することに。

よろしければ左下の追加ボタンからiGoogle へ追加してやってください。

2007年11月16日

iGoogle ガジェットコンテスト授賞式レポート

iGoogle ガジェットコンテストの授賞式に行って来ました。

受賞者は17:30からリハーサルとのことだったので、職場の人に無理言って早めに退社させてもらいました。

会場は渋谷のGoogle Japan 本社、セルリアンタワーです。


拡大地図を表示

↓ひときわ目立つ豪華なビルで、東急ホテルと一緒になってるんですね。

↓17:30で結構暗い感じ。もう冬ですね。

↓授賞式の会場はこんな感じ。普段は休憩室兼食堂だそうです。

↓軽食がちょっとお洒落な感じで並べてありました。(サランラップかかってますが;)

↓別角度から。なんかお洒落なんだけどアットホームな感じです。

食事の盛りつけとか、よく見たら普通に使うコップを台にしていたり、透明なガラス皿をひっくり返して使っていたりと、新しいモノを使わずに普段あるモノでしゃれた感じで演出してあって驚きました。

↓会場には数台のPCが設置されていて、今回の応募作品すべてが試せる状態になっていました。

↓Google オリジナルブレンドのコーヒー発見。飲んでみたかったなぁ。

式が始まったのは18:30過ぎ。Google Developer Day でも挨拶をされていたマグラスみづ紀さんの挨拶で始まりました。続いて、共同開催のR&Dの方が挨拶。ベーシックの1行プログラミングコンテスト以来の衝撃を受けたとか。

で、各賞の受賞。

一人ずつ壇上に呼ばれ、トロフィーや盾を受け取りました。

↓これはグランプリに輝いたQR Editを作られた方。まだ学生さんだそうです。恐れ入ります。

しばらくの歓談の後、グランプリ、準グランプリ、特別賞、インプレス賞の6名がそれぞれ自分のアプリを紹介して、Googleの人からコメントをもらうコーナーに。

僕は、ガジェットを作ったきっかけを、Google Developer Day でiGoogle を説明していたソフィアさんがかわいかったから、と説明したら、インプレス賞を取ったToshi Hayashi さんが後のコメントで同意してくれてました。

グランプリ、準グランプリ、もう一つの特別賞作品が結構まじめ系の使えるアプリだったのに対し、僕のはちょっと脱力系のアプリだったのですが、Google の方もその点は外さず認識していただいていたみたいで良かったです。あと、U.T.では「愛」とか特別な言葉で検索すると、特殊な文言を返すような仕様にしていたんですが、そこに気づいてくれていたのも嬉しかったですね。ちゃんと使ってくれたんだなぁ。

歓談の席では、他の受賞者の方とお話ができてかなり刺激になりました。次のガジェットのアイデアも固まったし、いつ作ろうかなとか思っています。


で、賞品なんですが、僕の特別賞はYouTube グッズ。

ニット帽に、腹巻き、トートバッグにUSBメモリでした。

インプレス賞のiPod touch はちょっとうらやましかったけど、YouTubeグッズもレアものだから嬉しかったです。


↓腹巻きを早速息子に着せてみました。結構ご満悦です。

↓グッズ全体はこんな感じ。

↓USBメモリが、メタルな感じで意外とカッコイイです。

↓こんな風になります。


授賞式の模様はYouTubeとかにアップされるみたいなので、興味のある方はそちらも見てみてください。

2007年11月 7日

iGoogle ガジェットコンテストで入賞しました!

iGoogle ガジェットコンテストで入賞しました!

iGoogleガジェットコンテスト|受賞作品決定! 審査結果の発表

受賞したのは、mash up award 3rd (MA3)にも出品していた「U.T. (Unique Translator) --- 英和・和英辞書サイト」です。

発表が10月下旬となっていたのに、なかなか発表がなかったので、やきもきしていました(毎日サイトをチェックしてましたよ・・・)。

特別賞には、MA3 で受賞していたstart command さんの名前が。この開発者の方には、マッシュアップ・カフェでお会いしたことがあって、熱くstart commandのサービスを語る姿が印象深かったです。おめでとうございます!

授賞式&パーティーが来週あるらしいので、これも楽しみ。

レポート書きたいと思います。

==2007.11.8 6:20 追記==
他にも入賞された方がブログに書かれていたのでリンクをはっておきます。
マッシュな日々 ≫ Blog Archive ≫ iGoogleガジェットコンテスト入賞!
2007-11-08 - 雑記・オブ・チョイチョイ

2007年10月 6日

MashupChallenge

MashupChallenge - quarterly mashup contest

MashupChallenge というMashup のコンテストが開催されています。

期間は、2007/10/1から年末までの3ヶ月間。

商品はWii とか iPod touch が用意されているようですが、一番の商品は「栄誉」だそうです。

おもしろいのはそのコンテストの仕組み。

参加登録をすると、コンテスト対象のAPIからランダムで5つのAPIが指定されるので、その中から少なくとも2つのAPIを利用してmashup サービスを作るのです。

僕も早速参加登録をしてみました。

指定されたのは、Twitter、YouTube、del.icio.us、JotSpot、BBCの5つ。

Twitter 、YouTube 、del.icio.us と3つもメジャーなサービスが入っているのが、ラッキーなのかどうか。

しばらくネタを考えることにします。

2007年9月27日

Tech総研にMash up award 関連の記事

Mash up award 3rd の結果発表の前ですが、Tech総研にMash up award にAPIを提供している企業の記事が掲載されました。

MashツꀀupツꀀAward発!Webの裏ワザ大公開/Tech総研

紹介されているのは、SAGOOL、kakaku.com、Place engine の3つ。

それぞれのサービスのおもしろさが紹介されてます。

あと、MA2で最優秀賞を取った黒田さん、独立されてたんですね。公務員を辞めて独立とはおどろき。

そんでもって未踏プロジェクトに選ばれてるんだものなぁ。流石ですね。

2007年9月25日

マッシュアップ・カフェの様子が公開されました。

Mashupedia にて第3回マッシュアップ・カフェの様子が公開されました。

第5回 マッシュアップカフェ・第3回 「ブログ検索」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup
第6回 マッシュアップカフェ・第3回 「ブログ検索」後半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup

僕が登場するのは後半の方ですね。

↓こちらではアンケートの結果も公開されています。
第三回 ブログ検索 : アンケート : マッシュアップカフェ : Wiki : MASHUPEDIA - マッシュペディア - : Web API x Mashup


僕の発表もそれなりに楽しんでいただけたようで、良かったです。

2007年9月24日

Mash up award 3rd 受賞逃す

MA3で受賞した人には24日までに受賞の報告があるということでしたが、その類の連絡がなかったので、今回は受賞できなかったようです。残念。

まあ世の中そんなに甘くないってことで(MA2で受賞してだいぶ良い思いさせていただきましたからね)。

とりあえずは受賞作の発表を楽しみにすることにします。


これで2007年上期は一区切りついたので、しばらくはこれまで作ったモノの整理・メンテナンスや、勉強に注力しようかなぁと思ったり。

2007年9月14日

マッシュアップ・カフェ 第3回「ブログ検索」レポート

Mashupedia が企画・運営するオフラインの勉強会「マッシュアップ・カフェ」に行ってきました。

第3回のテーマは「ブログ検索」。僕はasso-ball.net でmash up 側のスピーカとしての参加です。

当日の進行は↓こんな感じ。

18:30-18:35 はじめに(中津川、リクルートMTL 八木様)
18:35-18:50 kizapi / 株式会社きざしカンパニー様
18:50-19:05 Technorati api / 株式会社テクノラティジャパン様
19:05-19:20 BLOGRANGER API / NTT、NTTレゾナント(goo)様
19:20-19:30 休憩
19:30-19:45 asso-ball / 栗栖
19:45-20:00 Zakuraいい幹事 / 株式会社ザクラ様
20:00-20:10 休憩、バー準備
20:10-21:30 マッシュアップバー
参照:オフラインイベント「マッシュアップカフェ 第三回」開催のお知らせ : お知らせ一覧 : MASHUPEDIA - マッシュペディア - : Web API x Mashup

発表資料は近々、Mashupedia のサイトで公開されるそうです。

ということで、各発表について思ったことなどを。

kizapi / 株式会社きざしカンパニー様

僕が、asso-ball.networdarium.netとかでお世話になっている Kizapi。

発表の内容はKizasi.jpのサービス内容から、API の簡単な紹介まで。

Kizasi.jp は、「ブログ検索」ではなく、「ブログから、話題を知る、きざしを見つける」サービスであることを強調されてました。

Kizasiのサービスは、かなりおもしろいと思うんですが、ユーザがサイトに見に来るタイミングが良く見えないんですよね。

話題を見つけたいときはみんなヤフーやはてブに行くだろうし、話題になりそうなキーワードのきざしを見つけるには、それなりに苦労が必要だし。

voxの「今日の質問」やmixi のmixiニュースのように、各ブログサービスに話題を提供するインターフェースがあっても良いかもとか思ったり。あるかもしれないけど。

あと、Google trends がAPI を公開しだしたら、おもしろいmash up が作れそうだなぁ。trends は「検索された数」が出て、kizasi で「ブログで実際に書かれている数」とか取れたら、そのギャップが需要と供給の差になるわけで、そこから何かおもしろいものが作れそうかも。

発表の後、「スパムエントリをどうやって排除してるか?」という質問が出て、苦労しながらもそれなりに対応しているようでした。対応方法は当然企業秘密ってことで。


Technorati api / 株式会社テクノラティジャパン様

ブログ検索で有名なテクノラティジャパンの発表は、シンプルにTechonorati api に関するものでした。

その他のブログ検索エンジンとは違い、巨人Googleに対して、切り口の違うデータやAPIを提供して差別化を図ろうとしている印象でした。

API の事例として、アメリカの法律トラッキングサイトが紹介されて、このサービスはかなり面白いなぁと思いました(URLをメモるのを忘れちゃう失態。発表資料のupを待つか・・・)。

議会に提出された法律に対して、一般の人が意見を書いたりできるサイトらしく、アメリカで法律に関するサイトのデファクトスタンダードになっているのだとか。

日本でもこの手のサイト作ってみたら意外と流行るかもね。

質問コーナーでは、API の利用制限についての質問が出てました。

今、technorati の API は一日に500回までという制限がかけられているので、ちょっと大きめのサイトで利用しようと思ってもすぐに上限が来てしまうらしいのです。

この点については、サイトの内容や主旨を個別に相談すれば、便宜を図ってもらえると担当の方が言っていました。

API に利用回数の制限をかけているのは、スパムとして利用される(悪用される)のがとても多いからだそうで、利用回数制限のないRSSフィードは一日に相当な数アクセスされているそうです。業者は、それらのデータから、Adsenseを貼り付けたスパムエントリを自動生成します。すると、スパムフィルタをすりぬけて、それがTechnorati のランキング等々のデータに影響を与えて負のフィードバックサイクルができあがる(できあがっている)そうなのです。恐るべしスパム。

やはりこの世界はスパムとの戦いなのですね。


BLOGRANGER API / NTT、NTTレゾナント(goo)様

API側最後の発表はgoo のBLOGRANGER API 。

このAPI を僕は知らなかったのですが、特徴としては、JavaScript が提供されて、そのJavaScriptをりようしてAPI にアクセスするのだそうです。

一見便利そうですが、Mash up として利用するには癖がありすぎるなぁと思いました(そういう意見の人が結構たくさんいました)。

なんでJavaScript なのかというと、これまたスパム的にAPI にアクセスされるのを防ぐためらしいです。

うーん、とはいえ、結局はhttpのアクセスが発生するわけで、どんなリクエストが発生しているかは、割と簡単に見ることができますからねぇ。スパム的に利用しようと思ったとき、JavaScriptでラップしているからってのはあまり効果がないような気もします。むしろ、普通の人たちに利用されないという不都合を生み出すかも。

BLOGRANGER API はもうすぐサービスが終わって、その後新しいサービスが始まる予定らしいので、そのAPI はもう少し使い勝手が良い形にして欲しいですね。


さて、ここまでがAPI 側の発表。休憩を挟んでmash up 側の発表へ。

僕の発表は、そのうち発表資料を貼ります。

過去のマッシュアップ・カフェの内容を見ても、僕みたいな日曜プログラマ的なmash up が発表した回がなく、ちょっと浮いてたかもしれません。

でも、後のマッシュアップ・バー(懇親会)では、何名かの人に「おもしろいUIですね」と褒めていただけて嬉しかったです。


Zakuraいい幹事 / 株式会社ザクラ様

最後の発表はZakuraいい幹事様。

前半はサイトの説明で、飲み会をやるときのスケジュール管理からお店選び、投票、チャットなど便利機能が紹介されました。

僕が普段利用している「ちょー助」は、ログイン不要ってところが魅力なんですが、お店は別途選ばなきゃいけないんですよね。

いい幹事はその点を大きくクリアしていて魅力的。乗り換えたいんですが、ログインが必要ってのがちょっとなぁ。まあユーザ登録すれば良いんですけどね。あと、ケータイのインターフェースは用意されてるのかな(未調査)。

お店選びの部分を、ホットペッパーとぐるなびのAPIで実装しているそうなのですが、やっぱりそれなりに苦労が多いそうで。

データの絞り込み条件や登録件数にそれぞれくせがあって、使い勝手が良いとは言い切れないみたいです。

確かにその点は激しく同意。とりあえずAPI公開すればいいや的なところが最近増えてますからね。厳しく利用制限を設けていたりして、使ってほしんか使ってほしくないのか、どっちなんだい!(by なかやまきんに君)と突っ込みたくなります。


ここまでの発表で、前半のマッシュアップ・カフェが終了。この後、懇親会のマッシュアップ・バーへ。

マッシュアップ・バーの食べ物飲み物は、API提供会社の方からの差し入れ。ビールにワインにケータリングにと結構たくさんありました。参加費が無料ってことを考えると、飲み食いできて、他の開発者と交流できてとほんと良いイベントですね。

マッシュアップ・バーの間、飛び入りで自作のサイトを紹介することができて、何名かの方がプレゼンしてました。

僕もみんなが酔っぱらってきたころを見計らって、をプレゼン。反応が心配でしたが、ZAKURA の方々を中心に楽しんでいただけたようです。

また来月あたりに企画されるそうなので、興味がある方は是非参加してみてください。

2007年9月13日

Mash up Award 3rd 出品作品一覧公開

Mash up Award 3rd の出品作一覧が公開されました。

Mash up Award 3rd - 全応募作品 - サン・マイクロシステムズ

今回は193作品応募されたそうですよ。すげーなぁ。

やっぱ会社として取り組んでいたりするところは作りがしっかりしてそうだし、友達同士で集まってわいわいがやがや作ったのは楽しげな雰囲気が出ていて良い感じですね。

↓僕も今回以下の5作品を出品しているので、是非ともお試しください。楽天トラベルホテル検索Mappletとかベタに便利ですよ。

U.T. (Unique Translator) --- 英和・和英辞書サイト
age-surfin'
timer gadget
楽天トラベルホテル検索Mapplet

あと、会社の同期や知り合いが出品しているのが↓こちら。

楽Raku ショッピング
くるま漬け

それぞれ、特徴ある面白いアプリなので、こちらも是非お試し下さい。

2007年8月31日

マッシュアップ・カフェでプレゼンします。

マッシュペディアさんが主催するイベント「マッシュアップ・カフェ」に出演することになりました。

マッシュアップ・カフェは、API提供会社とそのAPIを利用してるマッシュアッパーがサービス内容や構築運用時の裏話などをプレゼンするというオフラインイベント。

出演する第3回のテーマは「ブログ検索」ということで、MA2でサグール賞ときざし賞をいただいたasso-ball.netについてお話させていただきます。

第3回の概要は↓こちらで。

オフラインイベント「マッシュアップカフェ 第三回」開催のお知らせ : お知らせ一覧 : MASHUPEDIA - マッシュペディア - : Web API x Mashup


また、過去2回の様子は↓こちらで見ることができます。
第1回 「位置情報」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup
第3回 「画像」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup


申し込みは↓こちらのページからできます。

第三回「ブログ検索」参加希望スレッド : マッシュアップ・カフェ : フォーラム : MASHUPEDIA - マッシュペディア - : Web API x Mashup


プレゼンの後は懇親会も企画されていますので、お時間ある方は是非ご参加ください。

2007年8月25日

wordarium.net を Google ガジェット & ブログパーツ化

前からやろうやろうと思っていた wordarium.net のブログパーツ & Google ガジェット化にやっと手を付けました。

Google ガジェットは、以下のアドレスを「URLを指定して追加」すればOKです。

http://www.wordarium.net/wordarium.xml


Google ガジェットを自分のページに貼り付けるときは、↓このページでカスタマイズして、生成されたコードをはりつけてください。

自分のサイトにガジェットを追加 --- wordarium mini

↓こういう雰囲気になります。


あと、Googleガジェットの外枠がださいという人は、↓以下のコードを貼り付けてください。


↓もう一つ小さいサイズ(200x160)も。


サーバの負荷軽減のため、オリジナル版のように魚が魚を食べると関連語を検索する機能は外しています。

魚も微妙にうねうねさせてみましたが、あまりうまくいっていないかも。

またそのうちバージョンアップしてみます。

魚の種類を増やすとか。あと英語版対応もしたいなぁ。

2007年8月21日

wordarium.netがこんなところに!

なんとなーくwordarium.netのアクセスログを見ていたら、見慣れないアドレスがありました。

そのアドレスに行ってみたんですが、ぱっと見どこにもwordarium.netへのリンクが貼っていないんですね。

あれー、なんでだろー、とか思っていたら、iframeでページのパーツの一部として扱われていました!

↓そのサイトはこちら。

ホームページとイラスト制作のGOWAS DESIGN*/STUDIO(ゴワスデザインスタジオ)


こういう使い方もあるのねと、ちょっと驚き。

おもしろい使い方を考える人がいるもんですね。

2007年7月13日

orz

楽天トラベルのホテル検索Mappletをバージョンアップしようと、ソースを修正したら、エラーで動かなくなりまして。

なんだろうなんだろうと、原因を探っていたら、変数名「 rakuten 」を「 rakutan 」って書いてましたよ・・・。


落胆・・・。


orz

2007年6月30日

MA3の開発に着手

mash up award 3rd に向けて開発に着手しました。

とりあえず、3つほどいけそうなアイデアが浮かんだので、個人で作れるシンプルなものから着手することに。

言語は、PHP、ActionScript(Flash)、Pythonを利用する予定です。

色々触ってきて良かった。

どの言語も適材適所。仕事ではこういう言語を利用する機会があまりないので、楽しんで作ることにします。

2007年6月27日

mash up award 3rd 開催! そして「つくるぶ」公開!

Sun × Recruit mash up award 3rd が早くも開催されます。

Mash up Award 3rd - 開催概要 - サン・マイクロシステムズ

今度の award はまた規模が一段と大きくなっています。

なんと優勝賞金 100万円! これはでかい!

さらに利用可能APIは70以上。前回以上におもしろそうなAPIが提供されています。

サーバなどの実行環境も提供されるようで、これまで「アイデアはあるけど、サーバがないんだよねぇ」と二の足を踏んでいた方も参加しやすくなってます。

この開催発表に合わせて、リクルートさんが「つくるぶ」というサイトを公開しました。

つくるぶ -デベロッパー応援プロジェクト

開発者の情報交換コミュニティサイトですね。

award に向けて有効活用できそうです。

ちなみに、先日のmash up award 2nd の座談会記事も公開されています。

つくるぶ -デベロッパー応援プロジェクト | MA3応援座談会


こんな日に、はてなブックマークで「もっと失敗しよう:江島健太郎 / Kenn's Clairvoyance - CNET Japan」というエントリがホッテントリ入りしてました。


ものごとはホップ・ステップ・ジャンプなんだから、今ホップさえしてない人は、小さくてもいいから、まず跳んでみようよ。


まさしくその通り。

僕は早速参加申し込みしちゃいました。

締め切りは9月10日。良いもの作ります。はい。

2007年6月18日

Yahoo! が日本語形態素解析Webサービスを開始!

Yahoo! がおもしろいWebサービスを公開しました。

Yahoo!デベロッパーネットワーク - テキスト解析 - 日本語形態素解析

形態素解析については以下を参照。

形態素解析 - Wikipedia

GETパラメータで文字列を渡すと、名詞や品詞に分解して解析した結果をXMLで返してくれます。

これはなかなか面白いAPIですね。

アイデア次第でかなりユニークなアプリが作れそうな気がします。

例えば、自分が書いたブログのエントリを解析したりとか、「どこでもいっしょ。」のトロのように、ユーザと対話する形のミニアプリとか。

週末ちょっと触ってみることにします。


<関連ニュース>
ITmedia Biz.ID:Yahoo!の日本語形態素解析エンジンAPIを公開
ヤフー、文章を解析できるAPI「日本語形態素解析Webサービス」を公開:ニュース - CNET Japan
CodeZine:Yahoo!、異質なWeb API「日本語形態素解析Webサービス」を公開(Webサービス)
Japan.internet.com Webテクノロジー - Yahoo! デベロッパーネットワークの「日本語形態素解析 Web サービス」

2007年6月16日

マッシュアップ・カフェ

マッシュアップのポータルサイト「マッシュペディア」が、「マッシュアップ・カフェ」というイベントを企画しているようです。

オフラインイベント「マッシュアップ・カフェ」開催のお知らせ : お知らせ一覧 : MASHUPEDIA - マッシュペディア - : Web API x Mashup


イベントの趣旨としましては、Web API提供企業様、Mashup開発者の方をお呼びして、その魅力を語っていただく「マッシュアップ・カフェ」と、Web API企業様やWeb開発者の方々同士の交流を深めていただく、マッシュアップ・バー(懇親会)の二段構成になっています。


昨日、他の開発者の方との交流を通じて刺激を受けた僕としては、こういうイベントがもっと開催されれば良いなぁと思ったり。

mash up award 3rd ももうすぐ開催されますし、位置情報を使って何かアプリを作ってみたいなぁと言う方は是非ともご参加ください。

2007年6月15日

mash up award 2nd 座談会

mash up award 2nd の座談会に参加してきました。

もうすぐ mash up award 3rd が開催されるらしく、開催の発表にあわせて座談会の内容も公開されるそうです。

↓mash up award 2nd のときも前回受賞者を集めて座談会が開かれてましたね。

SDC SQUARE March 2007

僕を含め8名の方が集まって、プログラミングを始めたきっかけとか、受賞後の周りの評価とかを楽しくお話ししました。

皆さん、バックグラウンドやmash up に対する想いも様々で、個人的にかなり刺激になりました。

さて、今年の夏は プログラミングコンテストが数多く実施されます。


・mash up award 3rd
iGoogleガジェットコンテスト
Amazon.co.jp アソシエイト・プログラム: コンテスト
マッシュアップコンテスト - タグ検索ならTAGGY
トップ-Drecom Award on rails 2007


個人的に上の3つは何か出してみようかなと思ってます。

今年の夏は忙しくなりそう。

2007年5月22日

Google Ajax Feeds API を使って日本版 popurls もどきを作ってみた。

Google Ajax Feeds API を使って何か作ってみようかなと思い、以前100SHIKIさんで紹介されていた(巡回サイト (POPURLS.com) | 100SHIKI.COM)POPURLS.com の日本版みたいなのが作れないかなぁと。

ってことで、さくっと↓こんな感じで作ってみました。

Japanese Popular URLS (α)

URLの後ろに ?n= とパラメータを指定することで、表示件数を50件まで制御することができます。

例 30件

この手のサイトがサーバサイドのCGIなしに作れるのが Google Ajax Feeds API の良いところですね。

(ちなみにサイトに関しては、「それiGoogle で!」の世界なので実用性はあまりありませんが)


ここで、Google API を利用する際のTISP を一つ。

API の利用キーはURLのドメインに対して発行されるので、例えばローカルで動作確認したファイルをそのままUPするとエラーになってしまいます。

ということで、PHP 上でAPIを利用するときは、以下のようにしてkeyを動的に変更してみましょう。

<?php
if("localhost"==$_SERVER['SERVER_NAME']){
  $key = '(localhost用のKey)';
}else{
  $key = '(実サイト用のKey)';
}
?>
<script type="text/javascript" src="http://www.google.com/jsapi?key=<?=$key?>"></script>

こんな感じ。

これでいちいちAPIのキーを書き換えることなくサイトを更新できます。

また、これと同様の手法で、localhost上ではadsenseを表示させない、ということができます。

2007年5月20日

TAGGY マッシュアップコンテスト

TAGGY がマッシュアップコンテストを開催するようです。

タグ検索ならTAGGY - マッシュアップコンテスト - 開催要項

開催期間は以下の通り。

開始日時:2007年4月26日(木) 10:00(日本時間)
終了日時:2007年6月30日(土) 24:00(日本時間)

開催内容を読んでみると、あまり魅力を感じないんですよねぇ。

提供APIが1つで、プラットフォームもブラウザ上に限られているというのがちょっと気になります。

TAGGY API って用は検索APIなわけで、検索APIのマッシュアップと言えば、先日Yahoo! Japan が開催したばかりですしね。

とは言うものの、まあちょっとネタを考えてみようかな。良いの思いついたら応募してみようかしら。

2007年5月14日

Google 経由で来たとき、どの検索語で来たか、簡単なブログの紹介、関連情報などを表示するブログツール

pop*popにて以下の記事が紹介されていました。

Searchblogで採用された『Search Referral Widget』は業界標準になるか?! | P O P * P O P

どなたか作ってくれないですかね・・・。

と書いてあったので、頼まれてもいませんが作ってみることに。

MovableTypeのプラグインの形で作ると、MTユーザしか使えないので、JavaScriptを利用して実装してみました。

「それJSで!」ですね。

作ったもの

javascript で location.referrer で取得できる「遷移元」アドレスが、Google.co.jpとGoogle.com だったとき、サーバに置いてある静的なテキストを取得し、画面に表示する。
(シンプル版)静的なテキストのみ
(テクニカル版)Google Ajax feeds API と Google Blog Search RSS Feed を利用して、referrer から検索文字列を取得し、当サイト内で他に該当するページがあれば表示する。

表示イメージ

↓通常の場合

↓Google 経由の場合

※ソース中のHTMLに独自のスタイルを指定することができます。

デモ
本サイトの個別エントリのテンプレートに埋め込んでいるので、以下のGoogle検索の結果から当サイトを再訪してみてください。

でぃべろっぱーず redMine - Google 検索


使い方
(シンプル版)
1.ここからソースをダウンロード。
2.解凍後、docsフォルダ内のsearch.txtの中身を修正。(ここに書いたものがそのまま出力されます)
3.フォルダをドメイン直下にアップロード。
4.以下のソースを自分のブログテンプレート内の表示させたい位置にコピペ。

5.Google で自分のブログを検索して、Google 経由でサイトを表示して文字が出力されていることを確認。
以上

(テクニカル版)
1.ここからソースをダウンロード。(シンプル版とはソースが異なるので注意)
2.解凍後、docsフォルダ内のsearch.txtの中身を修正。
以下のタグを入力すると、それぞれ「検索キーワード」と「Google Blog Search での検索結果」が表示されます。
<!-- search word -->
<!-- search result -->
3.フォルダをドメイン直下にアップロード。
4.ここから Google AJAX Feed API のKey を取得
5.以下のソースをコピーし、テキストエディタなどで、Google Ajax Feed API の Key を自分のサイトのものに変更

6.上記、変更後のソースを、自分のブログテンプレート内の表示させたい位置にコピペ。
7.Google で自分のブログを検索して、Google 経由でサイトを表示して文字が出力されていることを確認。
以上


特徴
・MTだけじゃなく、色んなブログに使えます。
・検索を Google さんにまかせているのでサーバに負荷をかけないです。


感想とか要望とか、不具合の連絡とか受け付けてますので、メールでも当エントリへのコメントでも良いので遠慮なくお寄せください。

要望があれば、Google だけでなく他の検索エンジンへの拡張とか色々やります。


<関連エントリ>
showyou --- HTML に Ajax でドキュメントを出力 (でぃべろっぱーず・さいど)
Google AJAX Feed API でほってんとりーだ作ってみたよ (でぃべろっぱーず・さいど)

2007年5月10日

Google AJAX Feed API でほってんとりーだ作ってみたよ

Google AJAX Feed API を利用してはてなブックマークと livedoor clip のほってんとりを表示する超簡易ほってんとりーだを作ってみました。


超簡易ほってんとりーだ(はてなブックマーク + livedoor clip)


↓ソースはこんな感じ。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAat9qFQZa7HeqZ7vfzuZ_lRS_JephM1q8o_Xk0mMCpFGq9IoW5xTEBj6jwM9jRmq16iASlY6jsLhajA"></script>
<script language="javascript">
google.load("feeds", "1");
function initialize() {
  makearea('http://b.hatena.ne.jp/hotentry?mode=rss','news');
  makearea('http://clip.livedoor.com/rss/hot','news2');
}
function makearea(feed,idn){
  var feed = new google.feeds.Feed(feed);
  feed.setNumEntries(30);
  feed.load(function(result) {
    if (result.error) {
      return;
    }
    var container = document.getElementById(idn);
    var ul = document.createElement("ul");
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var div = document.createElement("div");
      var a = document.createElement("a");
      a.setAttribute('href', entry.link);
      a.setAttribute('target', '_blank');
      a.setAttribute('title',entry.content);
      div.appendChild(document.createTextNode(entry.title));
      a.appendChild(div);
      container.appendChild(a);
    }
  });
}
google.setOnLoadCallback(initialize);
</script>
</HEAD>
<BODY style="font-size:14px;line-height:200%">
<div style="width:100%;font-size:18px;font-weight:bold;border-bottom:1px solid #999999;">超簡易ほってんとりーだ<span style="padding-left:10px;font-size:14px;">(はてなブックマーク + livedoor clip)</span></div>
<div id="news"  class="entrya"></div>
<div id="news2" class="entrya"></div>
<div style="font-size:12px;border-top:1px solid #999999;width:100%;text-align:center;">powered by はてなブックマーク,livedoor Clip,Google Ajax Feeds.</div>

RSSをだらだらと出しているだけなんで、あんまりおもしろみはないです。

ちょっとだけ工夫したところは、既読/未読管理。

aタグのvisitedを利用して、すでに閲覧したページは表示しないようにするという手抜き。

RSSをAjaxで利用するとき、クロスドメインの制約でわざわざサーバを経由したりするのが面倒だったので、このGoogle AJAX Feed API はかなり楽チンです。

他にも色々とちょっとしたアプリが作れそうなので、週末にチャレンジしてみようかな。

2007年4月25日

世界を実感できる Google Maps × Twitter な mash up サービス --- twittervision

Twitter に登録してみたは良いものの、なかなかおもしろさが分からなかったのですが、このmash up サービスでそれが分かった気がします。

twittervision

Twitter で書き込まれた内容が、マップ上にマッピングされて、次々と発言が出ては消えていくだけのサイトなんですけど、なんかぼーっと見ちゃうんですよね。

ブラウザをめいっぱい広げて、なるべく大きな地図で見るのが吉。

東京での発言の後、ロンドンとかニューヨークとかで発言が出ると、「世界って広いんだなぁ」としみじみ実感します。

ワールドワイドなインターネットとはいえ、普段はなかなか日本以外のサイトを見ることが少ないので、こうやって見せられると、驚きと楽しさで新鮮な気持ちになれますね。

2007年4月 9日

Google Maps ライクに操作・設置できる timeline

Ajax で Google Maps ライクに動作するタイムラインです。

SIMILE | Timeline


070409_01.jpg


Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.

(勝手訳)
Timeline は時系列の事象を可視化するための、DHTMLを基にしたAJAXなヴィジェットです。時系列の情報のための Google Maps のようなものです。以下に、操作して遊べるサンプルがあります。水平方向にドラッグしてタイムラインを動かしましょう。
(訳ここまで)


以下の How to ページを見ると、設置方法も Google Maps に良く似ています。

SIMILE | Timeline | Documentation | How to Create Timelines

javascript を include して、timeline を create して。

ただ、タイムライン上にポイントなどをマッピングするところが、若干面倒そうな雰囲気です。

mash up ネタとして知っておくのは良いかも知れませんが、使いどころが難しそう。他の API との相性もそれほど良い感じでもなさそうですし。


タイムラインと言えば、@nifty の「ソーシャル・タイムライン」が記憶に新しいところ。

@nifty Timeline - ソーシャル・タイムライン

こちらは、上記サイトでタイムラインを作成して、それを YouTube ライクにブログに貼り付けます。

Flash ベースなので、SMILE のタイムラインよりグラフィカルですし、ブラウザ上での動作も軽快。時間の幅もラジオボタン1つで切り替えられるので良い感じです。

@nifty Timeline のU/I がmash up 的に利用できたら言うことないんだけどなぁ。

まぁそれでもやっぱり使いどころは難しいわけですが。

2007年3月23日

mash up award 2nd 出品作品を振り返る --- その2

mash up award 2nd 出品作品を振り返る (でぃべろっぱーず・さいど)

昨日の続き。

チームプレイで停滞

第1回 award で登録だけして出品できなかった経緯をふまえ、チームを組んで応募することにしました。

チームでやるのはモチベーションが維持できる反面、一緒に作業する時間をうまくやりとりしないと作業がまったく進まないというデメリットもあります。

今回はまさしくそのパターンでした。

魚っぽい動きを実現すると言っていたプログラミング担当の Kojima の作業がなかなかはかどらず、また互いに働いている場所が別の場所だったので連絡が取りづらく、ただ時間だけが過ぎていきました。

音楽を担当してくれた会社の上司 Inoue さんにも、作品そのものを見せたかったのですが、イメージだけしか伝えることができず、結構無茶なお願いだったと思います。

個人でも出品することに

このままだと出品すら危ういと思ったので、個人でもアプリを出品することにしました。

Webマスターをしている劇団スロウライダーのコンテンツを FLASH で作っていく中で、最近スライダーの動きを実装してなかなか面白かったので、それを取り入れた何かという線で考え始めました。

Kizasi.jpで関連語を拾えるから、ある言葉を中心にして関連語を広げていったら面白そう。

そんな感じでasso-ball.netの構想が出来上がっていきました。

ちなみに、最初は蜘蛛の巣状に言葉が広がっていくアプリを考えていて、名前も word wide web でした。これはこれでおもしろそうなんですが、時間的に蜘蛛の巣的な描画を突き詰めるのが難しそうだったので、没案にしました。

後は空いている時間を見つけてはひたすら実装。この期間、妻にはだいぶ迷惑かけちゃいました。

あ、もちろんドメイン名は思いつたときすぐに取得しました。

試作品で意見収集

土日でとりあえずの試作版が完成したので、会社の人に触ってもらい、意見をもらいました。

Kizasi.jpだけでは、クリックしていくうちに汎用的な言葉ばかりになるとのことだったので、ワカールから今誰かが検索している言葉を取得するようにし、毎クリック一個はランダム的な言葉が出るようにしました。

また、ボールが重なったときに二語検索できたらおもしろいかもとの意見もあったのでもりこみました。

あと、右クリックをしたときのメニューに出す文言が、最初「『○○』をGoogleで検索」みたいな記述だったのですが、これは「しっかり検索」とか「辞書を見る」とかにした方が良いのでは、という意見も採り入れました。

結果、ここで得たフィードバックを実装したことが吉と出たと思います。

土曜日に頑張ってくれてたものを突貫工事で合体

そんなこんなで、出品は自分のアプリだけで良いかなーなんて思っていたら、Kojima が土日に時間を取ってちゃんと実装していることが判明。でかした!ってことで、締め切り前日の日曜日、うちに来てもらって、Kojima が作成した動きのロジックと僕が作成した画像を合体させました。

本当は作品のイメージは、水槽を「横」から見た感じにしたかったのですが、できあがった動きがそれっぽくなかったので、急遽「上」から見たイメージに変更。

動きに微調整を加えてなんとか完成させました。

自作の振り返り

両作品とも、当初のコンセプト通りの作品にすることができたと思っています。

@IT(いま見ておくべきマッシュアップの最先端事例 - @IT)でも褒めていただいていましたし。

まあ実際は、書いてきたように、「UIの再定義だー」なんて使命感は全くなくて、登録とか入力の必要がない見ていて楽しく美しいアプリを作りたい、って気持ちだけだったので、なんかくすぐったい感じがしますね。

はてぶのコメントとか見てると、そこそこ気に入ってくれた人がいるみたいなので、ブログパーツとか作ってみようかと相談しているところです。

さて、夏に開催されるという mash up award 3rd に向けてネタをどう仕込もうかな。

2007年3月22日

mash up award 2nd 出品作品を振り返る

※数回 mash up award ネタで書きます。(と先に宣言しておくメソッド)

mash up award 2nd の授賞式に行って来ました。 (でぃべろっぱーず・さいど)

上記エントリで書いているように、今回評価していただいて賞をいただいたのですが、今回出品したアプリをどういう風に思いついて、どういう製作過程で作ったのかを記しておきます。自分用のメモ、そして次回参加される方の何らかの参考になればと思います。


着想

主催者も指摘されていますが、第一回の mash up award の受賞作を使ってみて、以下の点に気づきました。

・Google Maps と mash up しているアプリが多い。
・U/I(ここでは見た目のこと)に凝った作品が少ない。
・Flashを使った作品が少ない。
・CGM系のアプリが多い。
・ユーザ登録を求めるものが多い。
・レスポンスが思いものが多い。(Ajax多用でブラウザが重くなったり、サーバ側での処理が重かったり)

ということで、この気づいた点をクリアするものとして、作るもののコンセプトを決めました。

・Google Maps は使わない。
・U/Iにちょっと凝る。
・Flashを使う。
・CGMのアプリにはしない。
・ユーザ登録は求めない。
・レスポンスはなるべく軽くする。

今回提示されたAPIを見て、kizasi.jpとsagoolのAPIが面白そうでしたし、ちょっと工夫しなければ使いどころが難しそうでもあったので、出品作品はこれらのAPIを組み合わせて「言葉」を使って何かしようと決めました。

いっそ「言葉」を「眺める」だけで良いなー。「眺める」と言えば「水槽」かな。「水槽」って電子アクアリウムみたいなのがあったよな。言葉のアクアリウムを作るか。じゃあ word + aquarium でwordariumだな。

こんな感じで会社の同期とチャットをしてコンセプトを決めました。その10分後にはドメイン名も取得しました。(この辺の勢いはウノウラボさんの「ウノウラボ Unoh Labs: 個人でWebサービスを作る時に一番大変なこと」に通じるものがあります)


イメージをふくらませる

とりあえず実装のことは置いといて、「言葉の水槽」というキーワードから連想する「動き」や「仕様」を洗い出してみました。以下に一部公開しますが、ほとんど実装されていないものばかりです。

・重要度とかそんなので魚の大きさが変わる。
・言葉の属性で動きが変わる。
・最初に1つの言葉を登録して、その言葉がどんどん育つ。
・「feed」ボタンがあって、ボタンを押すとえさをやれる。(RSS feedとかけてある)
・小魚は群れる
・魚が死ぬ
・魚が産まれる
・魚をクリックすると、画面に「意味」や「URL」が表示される。
・オリジナルの音楽を付ける

こんな感じで、がーっと書き出したりして、イメージをふくらませるだけふくらませました。


(明日に続く)

2007年3月21日

mash up award 2nd の授賞式に行って来ました。

サンとリクルートが主催するmash up award 2ndで、見事トリプル受賞することができました!

サン・マイクロシステムズ - Mash up Award 2nd - 開催概要

個人出品の「asso-ball.net」が「きざし賞」と「サグール賞」を、チーム出品の「wordarium」が「特別賞」を、それぞれ受賞。やったー!


070321_02.jpg


評価ポイントは、ユニークなユーザインタフェースと見た目の綺麗さだったようです。

asso-ball.net」も「wordarium」も、選考の休憩時に選考員の人が楽しく遊んでいましたというコメントをいただき、嬉しかったです。

これで、賞金5万円×2 + 1万5千円(チーム作成分はこういう配分でした)と副賞をいただきました。

副賞と会場で配られたグッズは↓こんな感じです。

070321_03.jpg

<会場で全員に配られたもの>
・BIコラボのタンブラー
・USB充電器
・castellaのトランプ

<サグール賞>
・サグールのTシャツ2枚
・サグールとwaccaのバッチ
・チームラボのストラップ

<きざし賞>
mylo

myloはかなり嬉しいですね。賞金でワイヤレスLANを家に導入しようかな。


さて、授賞式の様子などを。

今回の授賞式は、リクルート銀座8丁目ビルで執り行われました。

入り口には↓こんなPOPまで立ててあって、かなり本格的。前回の授賞式をイメージしていたので、なんか本格的になってるなーとちょっとびびりました。

070321_01.jpg

今回の授賞式は、自分が何の賞を受賞したのか分からないまま参加するという仕組みになっていまして、会場に行くまでドキドキ。まさか参加賞の「マウス」の受賞ってことじゃないよなー、とか心配してました。

会場についたら、思っていた以上に受賞者がいました。「うわー、こりゃ参加賞って線も十分ありうるなー」と思ったんですがよくよく考えたら、今回は対象APIがたくさんあるわけで、それぞれの部門賞を考えると結構たくさんの受賞者がいるわけです。

会場にはプレスの人とかもいて、かなり本格的でした。

授賞式はリクルートの八木さんの司会で開始されました。

最初にリクルートの長友さんが挨拶。

超要約すると、こんな感じでした。

第一回は手探り状態だったが、なかなか手応えがあった。今回も100を超える作品が集まり、クオリティも高く、盛り上がりを感じた。この火を絶やさないようにしたい。

続けてサンの藤井さんが挨拶と総評。こちらも超要約。

今回は前回に比べクオリティが高くなっている。前回はgoogle maps+何かという形のマッシュアップが多かったが、今回はユニークなもの、実用的なものが多かった。マッシュアップが新しい開発スタイルとして確立している。

ここから受賞作の発表。

部門賞が19、特別賞が4、サン・マイクロシステムズ賞と優秀賞と最優秀賞がそれぞれ1ずつと、かなり賞の数は多かったです。それぞれの部門賞には副賞が用意されてました。ネットプリント賞のデジカメやPlaceEngine賞のPSPは普通に欲しかったです。

受賞作の詳細は公式ページで近日中に公開されると思いますので、ここで書くのは控えておきます。

その代わりと言ってはなんですが、今回のプレゼンツールがかなりユニークだったのでそれをご紹介。

授賞式の受付をしたとき、↓こんなカードを配られました。

070321_04.jpg

中を見ると↓こんな電子回路が。(暗いときに撮影したので色が変です)

070321_05.jpg

↓名前を呼ばれた受賞者は、壇上に設置されたセンサーにカードを置きます。

070321_06.jpg

↓すると、モニタに受賞作のスクリーンショットと賞の名前、講評が映し出されます。(映し出されているときの写真を取り忘れました)

070321_07.jpg

プレゼン資料の「次のページ」「前のページ」も、写真にかすかに映っているセンサーの上で手をかざすと、入力情報がPCへ通知されるというなかなか凝った仕掛けになっていました。

授賞式の後は、同じ会場で懇親会が催されました。

ビール片手に参加者や主催者、プレスの方達とざっくばらんに会話を楽しみました。

ここで名刺を家に忘れて来るという社会人としてはあるまじき痛恨のミスを!

せっかく色々と顔を売るチャンスだったのになぁとちょっと後悔。次回、こういう場に出るときは忘れないようにしないと。

今日はここまで。

そのうち、気になる作品がいくつかあったので、受賞作のレビューとか書くかもしれません。

※以下の情報は随時更新します。(最終更新:2007/4/1 16:00)

<その他受賞者のブログ>
TECHSPOT ≫ Mash up Award 2nd 受賞!
Mashup Award 2nd 部門賞受賞! - SecondLife is beautiful
GOGA - 毎日走る社長のブログ: Sun × RECRUIT Mash up Award 2nd
Mi manca qualche giovedi`? - Mash Up Award 2nd にて "PlaceEngine賞" を授賞しました
hktr.jp: Mash up Award 2nd 特別賞受賞! アーカイブ
「テクノラティ賞」を受賞しました! (SurfThis)
TEDDY-G本家: Mash Up Awardで二度目の受賞
FromB betaオフィシャルブログ:Mash up Award 2nd で受賞しました! - livedoor Blog(ブログ)
CALTA Project ≫ Blog Archive ≫ Mash MaxがMash up Award 2nd 特別賞受賞
「声探」が Mash up Award 2nd で「スカイプ賞」を受賞しました : 僕は発展途上技術者
zuzara : 拙作 HANAABI!!がMashUpAward 2ndでワカール賞をいただきました
using API; Mash up Award 2ndの授賞式開催
うだうだ日記('07年前半)
たんきゅうラボ | Mash up Award 2nd イースト賞、GREE賞 ダブル受賞しました
ロカポ ブログ: Mash up Award 2ndに入賞してしまいました!
Mash up Award 2nd 「NTTデータ賞」を受賞しました (convivial-weblog)

<主催者・関係者のブログ>
Mash up Award 2nd 審査結果発表!! (BIコラボレーション委員会ブログ)
日々是新 Akihito Fujii's Weblog
NextReality - Consumer Generated Servicesの時代? (Mash up Award 2nd)
Mash Up Award 2nd - fumi's blog
blogSetomits : Mash up Award 2nd 授賞式
FreeNPS: Mash up Award 2nd 審査結果発表
Mash Up Award 2nd表彰式に参加しました。|blog|たたみラボ
hayashihがOSをインストールする日記
.:: the electreal by むぎばやしひろこ ::.: Mash up Award 2nd 授賞式


<その他ニュースサイトの記事など>
いま見ておくべきマッシュアップの最先端事例 - @IT
TOP SECRET MASHUPEDIA
マッシュアップ時代が到来――リクルートのMash up Award 2ndに108作品集まる:ITpro
Mash up Award 2nd審査結果が発表--最優秀賞は「出張JAWS」 - CNET Japan
Mash Up Award 2nd - fumi's blog
YouTube - BlogTV #38 2/3 (3月30日OA)


<関連エントリ>
Mashup Award 2nd 締め切り! (でぃべろっぱーず・さいど)
asso-ball.net 機能追加 002 (でぃべろっぱーず・さいど)
amazon の関連商品をグラフィカルに楽しく検索! (でぃべろっぱーず・さいど)
asso-ball.net 機能追加 (でぃべろっぱーず・さいど)
mash up award 2nd 出品アプリ第一弾公開 (でぃべろっぱーず・さいど)

2007年3月12日

Mashup Award 2nd 締め切り!

本日17:00にSun×Recruit の Mashup Award 2nd の応募が締め切られました。

結果発表は21日の夕方だそうです。

前回は登録だけして応募しなかった僕ですが、今回は結構がんばって作りました。

ということで、他の人がどんなものを作っているのか気になるところ。Google ブログ検索やテクノラティを駆使して、応募したという人のブログを検索してみました。

・「ゆーすけべー日記: カーセンサーとYouTubeのマッシュアップサイト作ってみた
サービス:CarTube / カーチューブ

・「たんきゅうラボ | Mash up 2nd 応募作品 『単語カードツクール』
サービス:単語カードツクール

・「気ままな話: マッシュアップアワード2ndにエントリー
サービス:ひまつぶし

・「KiGreTube :: キグリツベ とは?? - QUELTIDE
サービス:KiGreTube :: キグリツベ

・「zuzara : HANAABI!!:wacaal APIで情報の花火を打ち上げてみた
サービス:HANAABI!!

・「TECH SPOT ≫ Mash up Awardエントリー!
サービス:グルメ検索比較サイト グルメマーカー


みなさん面白いこと思いつくものですねぇ。

前回が割と Google Maps との Mashup や CGM系のサイトが多かったのに比べて、今回はバリエーションに富んでますね。これは選考が楽しみです。

ちなみに僕が応募したのは↓これ。さて、どうなることやら。

・「でぃべろっぱーず・さいど: 「asso-ball」のアーカイブ
サービス:asso-ball.net --- 関連する「言葉玉」で遊ぼう!

2007年2月 9日

Yahoo! Pipe すげぇ

ヤフー、「Yahoo Pipes」リリース--マッシュアップ開発用ホスティング型環境 - CNET Japan
Pipes: Rewire the web

米Yahoo!がイケてるサービスを発表してくれました。

その名も「Yahoo! Pipes」。

ネット上のRSSやATOMSのフィードを、取得したり、マージしたり、整形したり、キーワードを与えたり、なんてことをWeb上でグラフィカルに生成し、自分なりのオリジナルのフィードを作ることができるというサービスです。

Web版Plaggerと言ったところでしょうか。

何がすごいかって?

例えば、Amazonの売り上げランキングフィードを取得してきて、その本のタイトルで検索APIを実行して、売り上げの良い本について言及しているページのRSSフィードを取得する、とか。

ソーシャルブックマークの人気ページをそれぞれのサービスから取得してマージする、とか。

アイデア次第でおもしろいフィードを生成することができそうです。

現在、アクセス集中のためサーバが激重ですが、落ち着いてきたら遊んでみようと思います。

今度のMash up Awardsはこれを使おうかな。

2007年1月28日

mash up award 2nd

Mash up Award 2nd トップページ - 株式会社リクルート FIT BIコラボレーション委員会

サンとリクルートが再び mash up award を企画しました。

利用必須APIがリクルートの4つだけだった前回に比べ、今回は多種多様なAPIが30個も出ています。

前回は申し込みだけして出品しませんでしたが、今回は会社の同期と組んで出品まで持っていこうと思っています。

まだここには書けませんが、すでに企画コンセプトはできあがっている状態。

利用した人がおもしろいと思えるようなものができたらいいなぁ。

3月12日の締め切りまで、あまり時間がありませんが、がんばりたいと思います。

2006年10月29日

ありそうでなかった? 音楽と運動をマッシュアップ!

ナイキ+iPod 為末選手も「気持ちいいです」-ITニュース:イザ!
アップル - Nike+iPod

AppleとNikeが組んで、Nike+iPodというサービスを始めたようです。

ただ単にランニング中に音楽が聴けるだけでなく、走行距離とかのデータがiPodに蓄積され、それがiTuneと連携するそうです。

AppleもNikeもスタイリッシュなブランドイメージがあるので、ただ機能が繋がっているというだけでなく、それぞれのデザインが相乗して良い効果を出しています。

マッシュアップというと、インターネット上のサービス同士の組み合わせを想像しがちですが、こういうコラボレーションもなかなか刺激的ですね。

2006年8月18日

プロ野球ぶっとび改造計画/Tech総研

エンジニアが勝手に進言!プロ野球ぶっとび改造計画/Tech総研

Tech総研でおもしろい記事がアップされてました。

エンジニア視点でプロ野球を面白くしようと言う対談です。これも、広い意味でのMashUpなのかなぁと。

やれWebサービスだ、XMLだと言っていても、所詮パソコンの中のお話。思い切ってパソコンの外と繋ぐことを考えるとより一層発想が飛躍するんじゃないかと思います。

記事中のドームの天井に映像を映し出すというアイデアは是非とも実現して欲しいですね。

アーティストのライブとかでも利用できそう。

あと、最近ライブ中継にCG映像を合成するってのを最近やっていますが、あれを実際の芝生や空気中に映せたら面白いですね。

あと、サッカー日本代表の試合では、球場でパブリックビューイングに使われますが、そのときにスクリーンに映し出すんじゃなくて、3D映像でグラウンドに直接映し出しちゃうとか。

現実的ではないかもしれませんが、こういうことを考えているときはかなり楽しいですね。

2006年6月15日

フロム・エー ナビAPIの緯度経度情報をGoogleMapsにマッピング

RECRUITさんがやっているMASHUPコンテスト関連の話。

フロム・エー ナビのAPIで提供される情報の中に、緯度経度情報があるのですが、これをGoogleMapsにマッピングしてみようとしました。

GoogleMapsを表示する方法はそこかしこに(というかGoogleのページに)記述があるので割愛します。

で、GoogleMaps上には、

point = new GLatLng(ido,keido);
map.addOverlay(new GMarker(pointi));

こんな感じでido、keidoに値を書いてやったらマーカーが置けるんですが、この緯度経度情報が世界測地系じゃなければ駄目らしいのです。

一方、フロム・エー ナビAPIで提供されているのは、どうやら日本測地系くさい。さらに、「N35.39.24」こんなフォーマットのデータが帰ってきます。これをゴリゴリとGoogleMaps上に置けるように変換してみました。

日本測地系から世界測地系への変換は、こちらのページを参考にしました。

実際に作成したソースは↓こちら。

      ido = getTudeData("取得した緯度");
      keido = getTudeData("取得した軽度");
      addPointToMap(ido,keido);

function getTudeData(str){
    leng = str.length;
    tmpStr = str.substring(1,leng);
    leng2 = tmpStr.lastIndexOf(".");
    leng3 = tmpStr.indexOf(".");
    addNum = tmpStr.substring(leng2+1,tmpStr.length) / 3600;
    addNum2 = tmpStr.substring(leng3+1,leng2) / 60;
    addNum3 = tmpStr.substring(0,leng3)
    rtnStr = eval(addNum) + eval(addNum2) + eval(addNum3);
    return rtnStr;
}

function addPointToMap(ido,keido) {
    newido = eval(ido) - (eval(ido) * 0.00010695) + (eval(keido) * 0.000017464) + 0.0046017;
    newkeido = eval(keido) - (eval(ido) * 0.000046038) - (eval(keido) * 0.000083043) + 0.010040;
    point = new GLatLng(newido,newkeido,true);
    map.addOverlay(new GMarker(pointi));
}

みっともないくらいゴリゴリ書いちゃってますが、これで合っているのかちょっと不安だったりします。

それにしても、フロム・エー ナビのAPI仕様ですが、MashUpを謳うのであれば世界測地系で出して欲しかったなぁ。

2006年6月11日

Sun×RECRUIT Mash up Award

Sun×RECRUIT Mash up Award

リクルートさんがサンさん(←なんか変;)が組んでちょっと面白そうなことをやってます。

マッシュアップ・アワード。

リクルートさんが提供するWebサービス(カーセンサーラボ、Smatch、じゃらん.net、フロム・エー・ナビ)を組み合わせて、何か面白いWebページを作るコンテストです。

早速申し込みしてみました。今のところカーセンサーラボのAPIだけ公開されているようで、他のAPIは随時公開のようです。

面白いものができると良いなぁ。

でぃべろっぱーず・さいど http://dev.chrisryu.com/ 鹿児島出身子持ちSEのディベロッパーとしての一面 ja Copyright 2013 Sun, 13 Jan 2008 23:42:09 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss Yahoo! Pipes と jQuery で1年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その2 昨日のエントリの続き。

作ったPipeを使って、1年前のはてぶ人気エントリを表示するガジェットの作成に取りかかったのですが、Pipeを作る際に参考にさせてもらったてっく煮のにとよんさんから

「1年前のはてブを表示。1年に限らず、数年まとめて見れたら面白いかもしれん。」

と、はてぶコメントをいただきました。それもそうだなと思い、軌道修正。

N年前の人気エントリをタブで分けて表示するガジェットにしてみました。

↓とりあえず完成系。

表示件数は「設定」から10~50の間で選択可能です。

はてぶが始まったのが、2005年2月10日なので、2月10日を超えると、タブが3つになります。

ガジェットのソースは↓こんな感じ。

xml : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past_hagena.xml

js : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past-hatena.js

var retryNum = 0;
var retryMaxNum = 10;
function init(){
	for(var i =0,len = days.length;i<len;i++){
		tabs.addDynamicTab(getDispDate(days[i]), callbackGenerator(days[i]));
	}
}
function callbackGenerator(day) {
	return function(tabId) {
		callbackTab(tabId, day);
	}
}
function callbackTab(tabId,day){
	retryNum ++;
	var feed_url = getURL(day);
	_gel(tabId).innerHTML = '<div class="feed">Loading...</div>';
	_IG_FetchFeedAsJSON(feed_url,function(feed) {
		var html ='';
		try{
		html = '<div class="feed"><span class="subtitle">'+getDispDate(day)+'の人気エントリ</span><ul>';
		for (var i = 0; i < feed.Entry.length; i++) {
			html += '<li><a target="_blank" href="'+feed.Entry[i].Link+'">'+feed.Entry[i].Title+'</a>'+createBookmarkNum(feed.Entry[i].Link,feed.Entry[i].Summary)+'</li>';
		}
		html = html + '</ul></div>';
		$(_gel(tabId)).html(html);
		_IG_AdjustIFrameHeight();
		retryNum = 0;
		}catch(e){
			if(retryNum <= retryMaxNum){
				callbackTab(tabId,day)
			}else{
				_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
				retryNum = 0;
			}
		}
	}, prefs.getInt("num_feed"),true);
	_IG_AdjustIFrameHeight();
}
function getURL(d){
	var m = d.getMonth() + 1;
	((''+m).length == 2)? m = ''+m:m = '0' + m;
	var da = d.getDate();
	((''+da).length == 2)?da=''+da:da='0'+da;
	var ds = (d.getFullYear())+ m + da;
	return 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=rss';
}
function getDispDate(d){
	return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + '';
}
function createBookmarkNum(link,desc){
	var num = parseInt($(desc).text().split('/')[0]) ;
	var img = '<img src="http://b.hatena.ne.jp/entry/image/' + link + '" onload="_IG_AdjustIFrameHeight();">';
	return ' <a class="bookmarknum" target="_blank" href="http://b.hatena.ne.jp/entry/'+link+'">'+num+' users</a>';
}
_IG_RegisterOnloadHandler(init);

特殊なことをしているのは、

}catch(e){
	if(retryNum <= retryMaxNum){
		callbackTab(tabId,day)
	}else{
		_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
		retryNum = 0;
	}
}

の部分。

ガジェットからFeedを取得しに行くと、最初の取得でタイムアウトが発生してるっぽいんですね。一度アクセスすると、Google側のキャッシュが効いて大丈夫みたいなんですが。そういうわけで、最大10回までリトライするようにしています。

でもって、タイトルの「jQueryで」ってことだったんですが、ガジェットの関数とか使ってたらjQueryの使いどころがなくなっちゃいました。使っているのは以下の2箇所ですが、どちらも無理から感がありありですね。

$(_gel(tabId)).html(html);

これは、_gel(tabId).innerHTML = html でOKだし。

var num = parseInt($(desc).text().split('/')[0]) ;

この部分は、今回Pipeで取得しているDiscrition 部分が<a><strong> XXX / XXX users</strong></a>という文字列なので、$関数に渡してjQuery オブジェクトにして、text() と split()を使って、登録ユーザ数を取得しています。

なんかjQueryを使っている感がなくなっちゃったので、jQueryをふんだんに使ったガジェットは、また別途作ってみることにします。

 

できあがったガジェットを観られる、1年、2年前の人気エントリを眺めていると、流行ものあったり、今でもブクマされるような普遍的なものがあったりして楽しいです。是非、iGoogleのお供にどうぞ。

]]>
http://dev.chrisryu.com/2008/01/yahoo_pipes_jquery.html http://dev.chrisryu.com/2008/01/yahoo_pipes_jquery.html MashUp Sun, 13 Jan 2008 23:42:09 +0900
Yahoo! Pipes と jQuery で1年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その1 昨年末にYahoo! Pipes で任意のページをスクレイピングできるようになったという記事があり、気になっていました。

ってことで、そのすごさを実感するためにガジェットを作ってみることに。

ガジェットは、「1年前のはてブホッテントリ(人気エントリ)を表示する」という内容。前からちょっと考えていたネタです。

クライアント側では、これまた最近お気に入りのjQueryを使ってみることにします。

手順は、以下の通り。

  1. Yahoo! Pipes で、日付を渡すとその日の人気エントリをRSS返してくれるAPIを作成
  2. そのAPIを利用して、クライアント側で情報を表示

 

Yahoo! Pipes で、日付を渡すとその日の人気エントリをRSS返してくれるAPIを作成

なるべく簡単に、ということで、てっく煮さんで作成されている「Shinya talkをRSS化」というPipeをコピーさせてもらいます。(※海外Yahoo!のIDが必要になるので、Yahoo! Pipes を利用したい方はIDを取得してください。)

リンク先で、「Clone」リンクをクリックすると、yp_hb_gd_0001.png

Shinya talkモジュールが自分のPipesとして登録されます。

 

yp_hb_gd_0002.pngここで「Edit Source」をクリックすると、Pipeの編集画面になります。

yp_hb_gd_0003.png

オリジナルのPipeの流れは、

http://www.fujiwarashinya.com/talk/index.phpをFetchPageモジュールで取得し、<div id="center">以降を、<a id= をdelimiterとして分割」→「item.content をitem.title / item.description にコピーし、item.content を item.linkにリネーム」→「各title / link / description を正規表現でそれぞれにマッチした値に変更」→「Feed から < が含まれたものを削除」

というものです。

僕が作ろうとしているのは、http://b.hatena.ne.jp/hotentry?mode=daily&date=20050210のような動的に変更するパラメータをもったURLにアクセスし、スクレイピングしたいので、ユーザ入力としてdateを受け取り、モジュールの中でURLを組み立てます。

 

yp_hb_gd_0004.png

あとは、ページの内容にしたがって、Regexモジュールの正規表現を書き換えればOKです。

正規表現を適当に書いてしまうと、モジュールの実行速度にも影響がでるので気を付けましょう。実際、僕も最初に作ったPipeは、1回の実行に24secほどかかっていましたが、正規表現を修正することで 3sec 程度まで短くなりました。

↓完成したPipeはこちらです。

Pipes: Past Hatebu API

ちなみに各モジュールでの実行時間は画面下のDebugger の右上に表示されます。実行時間が遅いときは、各モジュールをクリックして、ここの値をチェックし、ボトルネックを見つけます。

 

yp_hb_gd_0005.png

 

そのAPIを利用して、クライアント側で情報を表示

今度は、作成したAPIをJavaScriptから利用してみます。

ガジェットを作る前に、まずは普通のhtmlから呼び出すことにしてみました。

ってことで、jQueryのgetJSON を利用してJSONを取得しようとしたのですが、ここで問題が。

jQueryのgetJSONを利用すると、アクセスするURLに自動的にnew Date().getTime() の値が付加されちゃいます。そうすると、Yahoo! Pipes 側でのキャッシュが効かなくなってしまうんですね。

このAPI でスクレイピングする先のページの情報は、基本的に変わらないものなので、都度アクセスしてしまうと無駄が多いし、レスポンスも悪くなってしまいます。

で、今度は↓こんなコードにしてみました。

s.src = 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=json&_callback=cb'
s.charset = 'UTF-8';
s.type = 'text/javascript';
s.id = 'jsonp';
$(document.body).append(s);

これで大丈夫だろうと思ったら、アクセスしているURLに変化がない(getTime()の値がついたまま)なんですね。なんでだろうと思ったら、$(document.body).append(s)で勝手にjQuery.ajaxが呼ばれていて、結果getJSONと同じ動きになっていました。

意味がなかったので、ソースを以下のように修正。

s.src = 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=json&_callback=cb'
s.charset = 'UTF-8';
s.type = 'text/javascript';
s.id = 'jsonp';
document.body.appendChild(s);

かなりべたな感じですが、しょうがないですね。

ということで、今日はここまで。連休中にはガジェット作るところまでいけると良いな。 

]]>
http://dev.chrisryu.com/2008/01/yahoo_pipes_jquery_past_hatebu_gadget_part1.html http://dev.chrisryu.com/2008/01/yahoo_pipes_jquery_past_hatebu_gadget_part1.html MashUp Sat, 12 Jan 2008 23:40:33 +0900
× はてブガジェット 2つ追加 --- はてなセリフ & amazon.co.jp 昨日のエントリで「はてなハイク × はてブ iGoogle ガジェット」を公開しましたが、同じノリでガジェットを2つ追加しました。

↓はセリ × はてブのガジェットです。


はてなセリフも、はてなハイク同様の性質を持っているので、はセリ好きな人には良い感じのガジェットなんじゃないかと思います。


もう一つは、↓amazon.co.jp × はてブのガジェットです。

amazon.co.jpのページではてブされたページを見ることができます。

新着のタブが結構おもしろいです。

こっちはアフィリエイトID入ってるので、そういうのちょっとって人はスルーしてください。

]]>
http://dev.chrisryu.com/2007/12/hatebu_x_gadget_2.html http://dev.chrisryu.com/2007/12/hatebu_x_gadget_2.html MashUp Fri, 21 Dec 2007 23:28:09 +0900
はてなハイク × はてブ iGoogle ガジェット作った はてなの新サービス「はてなハイク」が個人的にかなりヒットしていて、「エンジニアがやたら使う言葉 - はてなハイク」とか更新を楽しみにしてたりします。

でも、ログが早くて、なかなかおもしろいところに出会えなかったり。まあ、「Keywords - はてなハイク」のページから見たら良いんですけどね。

で、ふと「おもしろいページははてブされてるんじゃないか」とか思って見てみたら、やっぱりそこそこの人たちがぶくましていて。

じゃあそれを見るガジェットでも作ろうかなと思ったわけです。

↓で、とりあえずこんな感じで作ってみましたよ。

まあ、ちょいちょいいじるんで、ブクマボタンとかできるかもしれませんが、取り急ぎ公開することに。

よろしければ左下の追加ボタンからiGoogle へ追加してやってください。

]]>
http://dev.chrisryu.com/2007/12/hatena_haiku_igoogle_gadget.html http://dev.chrisryu.com/2007/12/hatena_haiku_igoogle_gadget.html MashUp Thu, 20 Dec 2007 22:29:20 +0900
iGoogle ガジェットコンテスト授賞式レポート iGoogle ガジェットコンテストの授賞式に行って来ました。

受賞者は17:30からリハーサルとのことだったので、職場の人に無理言って早めに退社させてもらいました。

会場は渋谷のGoogle Japan 本社、セルリアンタワーです。


拡大地図を表示

↓ひときわ目立つ豪華なビルで、東急ホテルと一緒になってるんですね。

↓17:30で結構暗い感じ。もう冬ですね。

↓授賞式の会場はこんな感じ。普段は休憩室兼食堂だそうです。

↓軽食がちょっとお洒落な感じで並べてありました。(サランラップかかってますが;)

↓別角度から。なんかお洒落なんだけどアットホームな感じです。

食事の盛りつけとか、よく見たら普通に使うコップを台にしていたり、透明なガラス皿をひっくり返して使っていたりと、新しいモノを使わずに普段あるモノでしゃれた感じで演出してあって驚きました。

↓会場には数台のPCが設置されていて、今回の応募作品すべてが試せる状態になっていました。

↓Google オリジナルブレンドのコーヒー発見。飲んでみたかったなぁ。

式が始まったのは18:30過ぎ。Google Developer Day でも挨拶をされていたマグラスみづ紀さんの挨拶で始まりました。続いて、共同開催のR&Dの方が挨拶。ベーシックの1行プログラミングコンテスト以来の衝撃を受けたとか。

で、各賞の受賞。

一人ずつ壇上に呼ばれ、トロフィーや盾を受け取りました。

↓これはグランプリに輝いたQR Editを作られた方。まだ学生さんだそうです。恐れ入ります。

しばらくの歓談の後、グランプリ、準グランプリ、特別賞、インプレス賞の6名がそれぞれ自分のアプリを紹介して、Googleの人からコメントをもらうコーナーに。

僕は、ガジェットを作ったきっかけを、Google Developer Day でiGoogle を説明していたソフィアさんがかわいかったから、と説明したら、インプレス賞を取ったToshi Hayashi さんが後のコメントで同意してくれてました。

グランプリ、準グランプリ、もう一つの特別賞作品が結構まじめ系の使えるアプリだったのに対し、僕のはちょっと脱力系のアプリだったのですが、Google の方もその点は外さず認識していただいていたみたいで良かったです。あと、U.T.では「愛」とか特別な言葉で検索すると、特殊な文言を返すような仕様にしていたんですが、そこに気づいてくれていたのも嬉しかったですね。ちゃんと使ってくれたんだなぁ。

歓談の席では、他の受賞者の方とお話ができてかなり刺激になりました。次のガジェットのアイデアも固まったし、いつ作ろうかなとか思っています。


で、賞品なんですが、僕の特別賞はYouTube グッズ。

ニット帽に、腹巻き、トートバッグにUSBメモリでした。

インプレス賞のiPod touch はちょっとうらやましかったけど、YouTubeグッズもレアものだから嬉しかったです。


↓腹巻きを早速息子に着せてみました。結構ご満悦です。

↓グッズ全体はこんな感じ。

↓USBメモリが、メタルな感じで意外とカッコイイです。

↓こんな風になります。


授賞式の模様はYouTubeとかにアップされるみたいなので、興味のある方はそちらも見てみてください。

]]>
http://dev.chrisryu.com/2007/11/igoogle_gadget_contest_party.html http://dev.chrisryu.com/2007/11/igoogle_gadget_contest_party.html MashUp Fri, 16 Nov 2007 22:17:22 +0900
iGoogle ガジェットコンテストで入賞しました! iGoogle ガジェットコンテストで入賞しました!

iGoogleガジェットコンテスト|受賞作品決定! 審査結果の発表

受賞したのは、mash up award 3rd (MA3)にも出品していた「U.T. (Unique Translator) --- 英和・和英辞書サイト」です。

発表が10月下旬となっていたのに、なかなか発表がなかったので、やきもきしていました(毎日サイトをチェックしてましたよ・・・)。

特別賞には、MA3 で受賞していたstart command さんの名前が。この開発者の方には、マッシュアップ・カフェでお会いしたことがあって、熱くstart commandのサービスを語る姿が印象深かったです。おめでとうございます!

授賞式&パーティーが来週あるらしいので、これも楽しみ。

レポート書きたいと思います。

==2007.11.8 6:20 追記==
他にも入賞された方がブログに書かれていたのでリンクをはっておきます。
マッシュな日々 ≫ Blog Archive ≫ iGoogleガジェットコンテスト入賞!
2007-11-08 - 雑記・オブ・チョイチョイ

]]>
http://dev.chrisryu.com/2007/11/winning_a_prize_in_a_igoogle_gadget_contest.html http://dev.chrisryu.com/2007/11/winning_a_prize_in_a_igoogle_gadget_contest.html MashUp Wed, 07 Nov 2007 22:24:43 +0900
MashupChallenge MashupChallenge - quarterly mashup contest

MashupChallenge というMashup のコンテストが開催されています。

期間は、2007/10/1から年末までの3ヶ月間。

商品はWii とか iPod touch が用意されているようですが、一番の商品は「栄誉」だそうです。

おもしろいのはそのコンテストの仕組み。

参加登録をすると、コンテスト対象のAPIからランダムで5つのAPIが指定されるので、その中から少なくとも2つのAPIを利用してmashup サービスを作るのです。

僕も早速参加登録をしてみました。

指定されたのは、Twitter、YouTube、del.icio.us、JotSpot、BBCの5つ。

Twitter 、YouTube 、del.icio.us と3つもメジャーなサービスが入っているのが、ラッキーなのかどうか。

しばらくネタを考えることにします。

]]>
http://dev.chrisryu.com/2007/10/mashupchallenge.html http://dev.chrisryu.com/2007/10/mashupchallenge.html MashUp Sat, 06 Oct 2007 23:07:53 +0900
Tech総研にMash up award 関連の記事 Mash up award 3rd の結果発表の前ですが、Tech総研にMash up award にAPIを提供している企業の記事が掲載されました。

MashツꀀupツꀀAward発!Webの裏ワザ大公開/Tech総研

紹介されているのは、SAGOOL、kakaku.com、Place engine の3つ。

それぞれのサービスのおもしろさが紹介されてます。

あと、MA2で最優秀賞を取った黒田さん、独立されてたんですね。公務員を辞めて独立とはおどろき。

そんでもって未踏プロジェクトに選ばれてるんだものなぁ。流石ですね。

]]>
http://dev.chrisryu.com/2007/09/airticle_of_mash_up_award_on_tech_soken.html http://dev.chrisryu.com/2007/09/airticle_of_mash_up_award_on_tech_soken.html MashUp Thu, 27 Sep 2007 23:31:07 +0900
マッシュアップ・カフェの様子が公開されました。 Mashupedia にて第3回マッシュアップ・カフェの様子が公開されました。

第5回 マッシュアップカフェ・第3回 「ブログ検索」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup
第6回 マッシュアップカフェ・第3回 「ブログ検索」後半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup

僕が登場するのは後半の方ですね。

↓こちらではアンケートの結果も公開されています。
第三回 ブログ検索 : アンケート : マッシュアップカフェ : Wiki : MASHUPEDIA - マッシュペディア - : Web API x Mashup


僕の発表もそれなりに楽しんでいただけたようで、良かったです。

]]>
http://dev.chrisryu.com/2007/09/report_of_mashup_cafe.html http://dev.chrisryu.com/2007/09/report_of_mashup_cafe.html MashUp Tue, 25 Sep 2007 23:17:26 +0900
Mash up award 3rd 受賞逃す MA3で受賞した人には24日までに受賞の報告があるということでしたが、その類の連絡がなかったので、今回は受賞できなかったようです。残念。

まあ世の中そんなに甘くないってことで(MA2で受賞してだいぶ良い思いさせていただきましたからね)。

とりあえずは受賞作の発表を楽しみにすることにします。


これで2007年上期は一区切りついたので、しばらくはこれまで作ったモノの整理・メンテナンスや、勉強に注力しようかなぁと思ったり。

]]>
http://dev.chrisryu.com/2007/09/dont_win_mash_up_award_3rd.html http://dev.chrisryu.com/2007/09/dont_win_mash_up_award_3rd.html MashUp Mon, 24 Sep 2007 23:36:44 +0900
マッシュアップ・カフェ 第3回「ブログ検索」レポート Mashupedia が企画・運営するオフラインの勉強会「マッシュアップ・カフェ」に行ってきました。

第3回のテーマは「ブログ検索」。僕はasso-ball.net でmash up 側のスピーカとしての参加です。

当日の進行は↓こんな感じ。

18:30-18:35 はじめに(中津川、リクルートMTL 八木様)
18:35-18:50 kizapi / 株式会社きざしカンパニー様
18:50-19:05 Technorati api / 株式会社テクノラティジャパン様
19:05-19:20 BLOGRANGER API / NTT、NTTレゾナント(goo)様
19:20-19:30 休憩
19:30-19:45 asso-ball / 栗栖
19:45-20:00 Zakuraいい幹事 / 株式会社ザクラ様
20:00-20:10 休憩、バー準備
20:10-21:30 マッシュアップバー
参照:オフラインイベント「マッシュアップカフェ 第三回」開催のお知らせ : お知らせ一覧 : MASHUPEDIA - マッシュペディア - : Web API x Mashup

発表資料は近々、Mashupedia のサイトで公開されるそうです。

ということで、各発表について思ったことなどを。

kizapi / 株式会社きざしカンパニー様

僕が、asso-ball.networdarium.netとかでお世話になっている Kizapi。

発表の内容はKizasi.jpのサービス内容から、API の簡単な紹介まで。

Kizasi.jp は、「ブログ検索」ではなく、「ブログから、話題を知る、きざしを見つける」サービスであることを強調されてました。

Kizasiのサービスは、かなりおもしろいと思うんですが、ユーザがサイトに見に来るタイミングが良く見えないんですよね。

話題を見つけたいときはみんなヤフーやはてブに行くだろうし、話題になりそうなキーワードのきざしを見つけるには、それなりに苦労が必要だし。

voxの「今日の質問」やmixi のmixiニュースのように、各ブログサービスに話題を提供するインターフェースがあっても良いかもとか思ったり。あるかもしれないけど。

あと、Google trends がAPI を公開しだしたら、おもしろいmash up が作れそうだなぁ。trends は「検索された数」が出て、kizasi で「ブログで実際に書かれている数」とか取れたら、そのギャップが需要と供給の差になるわけで、そこから何かおもしろいものが作れそうかも。

発表の後、「スパムエントリをどうやって排除してるか?」という質問が出て、苦労しながらもそれなりに対応しているようでした。対応方法は当然企業秘密ってことで。


Technorati api / 株式会社テクノラティジャパン様

ブログ検索で有名なテクノラティジャパンの発表は、シンプルにTechonorati api に関するものでした。

その他のブログ検索エンジンとは違い、巨人Googleに対して、切り口の違うデータやAPIを提供して差別化を図ろうとしている印象でした。

API の事例として、アメリカの法律トラッキングサイトが紹介されて、このサービスはかなり面白いなぁと思いました(URLをメモるのを忘れちゃう失態。発表資料のupを待つか・・・)。

議会に提出された法律に対して、一般の人が意見を書いたりできるサイトらしく、アメリカで法律に関するサイトのデファクトスタンダードになっているのだとか。

日本でもこの手のサイト作ってみたら意外と流行るかもね。

質問コーナーでは、API の利用制限についての質問が出てました。

今、technorati の API は一日に500回までという制限がかけられているので、ちょっと大きめのサイトで利用しようと思ってもすぐに上限が来てしまうらしいのです。

この点については、サイトの内容や主旨を個別に相談すれば、便宜を図ってもらえると担当の方が言っていました。

API に利用回数の制限をかけているのは、スパムとして利用される(悪用される)のがとても多いからだそうで、利用回数制限のないRSSフィードは一日に相当な数アクセスされているそうです。業者は、それらのデータから、Adsenseを貼り付けたスパムエントリを自動生成します。すると、スパムフィルタをすりぬけて、それがTechnorati のランキング等々のデータに影響を与えて負のフィードバックサイクルができあがる(できあがっている)そうなのです。恐るべしスパム。

やはりこの世界はスパムとの戦いなのですね。


BLOGRANGER API / NTT、NTTレゾナント(goo)様

API側最後の発表はgoo のBLOGRANGER API 。

このAPI を僕は知らなかったのですが、特徴としては、JavaScript が提供されて、そのJavaScriptをりようしてAPI にアクセスするのだそうです。

一見便利そうですが、Mash up として利用するには癖がありすぎるなぁと思いました(そういう意見の人が結構たくさんいました)。

なんでJavaScript なのかというと、これまたスパム的にAPI にアクセスされるのを防ぐためらしいです。

うーん、とはいえ、結局はhttpのアクセスが発生するわけで、どんなリクエストが発生しているかは、割と簡単に見ることができますからねぇ。スパム的に利用しようと思ったとき、JavaScriptでラップしているからってのはあまり効果がないような気もします。むしろ、普通の人たちに利用されないという不都合を生み出すかも。

BLOGRANGER API はもうすぐサービスが終わって、その後新しいサービスが始まる予定らしいので、そのAPI はもう少し使い勝手が良い形にして欲しいですね。


さて、ここまでがAPI 側の発表。休憩を挟んでmash up 側の発表へ。

僕の発表は、そのうち発表資料を貼ります。

過去のマッシュアップ・カフェの内容を見ても、僕みたいな日曜プログラマ的なmash up が発表した回がなく、ちょっと浮いてたかもしれません。

でも、後のマッシュアップ・バー(懇親会)では、何名かの人に「おもしろいUIですね」と褒めていただけて嬉しかったです。


Zakuraいい幹事 / 株式会社ザクラ様

最後の発表はZakuraいい幹事様。

前半はサイトの説明で、飲み会をやるときのスケジュール管理からお店選び、投票、チャットなど便利機能が紹介されました。

僕が普段利用している「ちょー助」は、ログイン不要ってところが魅力なんですが、お店は別途選ばなきゃいけないんですよね。

いい幹事はその点を大きくクリアしていて魅力的。乗り換えたいんですが、ログインが必要ってのがちょっとなぁ。まあユーザ登録すれば良いんですけどね。あと、ケータイのインターフェースは用意されてるのかな(未調査)。

お店選びの部分を、ホットペッパーとぐるなびのAPIで実装しているそうなのですが、やっぱりそれなりに苦労が多いそうで。

データの絞り込み条件や登録件数にそれぞれくせがあって、使い勝手が良いとは言い切れないみたいです。

確かにその点は激しく同意。とりあえずAPI公開すればいいや的なところが最近増えてますからね。厳しく利用制限を設けていたりして、使ってほしんか使ってほしくないのか、どっちなんだい!(by なかやまきんに君)と突っ込みたくなります。


ここまでの発表で、前半のマッシュアップ・カフェが終了。この後、懇親会のマッシュアップ・バーへ。

マッシュアップ・バーの食べ物飲み物は、API提供会社の方からの差し入れ。ビールにワインにケータリングにと結構たくさんありました。参加費が無料ってことを考えると、飲み食いできて、他の開発者と交流できてとほんと良いイベントですね。

マッシュアップ・バーの間、飛び入りで自作のサイトを紹介することができて、何名かの方がプレゼンしてました。

僕もみんなが酔っぱらってきたころを見計らって、をプレゼン。反応が心配でしたが、ZAKURA の方々を中心に楽しんでいただけたようです。

また来月あたりに企画されるそうなので、興味がある方は是非参加してみてください。

]]>
http://dev.chrisryu.com/2007/09/mashup_cafe_3.html http://dev.chrisryu.com/2007/09/mashup_cafe_3.html MashUp Fri, 14 Sep 2007 23:20:21 +0900
Mash up Award 3rd 出品作品一覧公開 Mash up Award 3rd の出品作一覧が公開されました。

Mash up Award 3rd - 全応募作品 - サン・マイクロシステムズ

今回は193作品応募されたそうですよ。すげーなぁ。

やっぱ会社として取り組んでいたりするところは作りがしっかりしてそうだし、友達同士で集まってわいわいがやがや作ったのは楽しげな雰囲気が出ていて良い感じですね。

↓僕も今回以下の5作品を出品しているので、是非ともお試しください。楽天トラベルホテル検索Mappletとかベタに便利ですよ。

U.T. (Unique Translator) --- 英和・和英辞書サイト
age-surfin'
timer gadget
楽天トラベルホテル検索Mapplet

あと、会社の同期や知り合いが出品しているのが↓こちら。

楽Raku ショッピング
くるま漬け

それぞれ、特徴ある面白いアプリなので、こちらも是非お試し下さい。

]]>
http://dev.chrisryu.com/2007/09/mash_up_award_3rd.html http://dev.chrisryu.com/2007/09/mash_up_award_3rd.html MashUp Thu, 13 Sep 2007 23:44:10 +0900
マッシュアップ・カフェでプレゼンします。 マッシュペディアさんが主催するイベント「マッシュアップ・カフェ」に出演することになりました。

マッシュアップ・カフェは、API提供会社とそのAPIを利用してるマッシュアッパーがサービス内容や構築運用時の裏話などをプレゼンするというオフラインイベント。

出演する第3回のテーマは「ブログ検索」ということで、MA2でサグール賞ときざし賞をいただいたasso-ball.netについてお話させていただきます。

第3回の概要は↓こちらで。

オフラインイベント「マッシュアップカフェ 第三回」開催のお知らせ : お知らせ一覧 : MASHUPEDIA - マッシュペディア - : Web API x Mashup


また、過去2回の様子は↓こちらで見ることができます。
第1回 「位置情報」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup
第3回 「画像」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup


申し込みは↓こちらのページからできます。

第三回「ブログ検索」参加希望スレッド : マッシュアップ・カフェ : フォーラム : MASHUPEDIA - マッシュペディア - : Web API x Mashup


プレゼンの後は懇親会も企画されていますので、お時間ある方は是非ご参加ください。

]]>
http://dev.chrisryu.com/2007/08/presentation_on_mash_up_cafe_3rd.html http://dev.chrisryu.com/2007/08/presentation_on_mash_up_cafe_3rd.html MashUp Fri, 31 Aug 2007 23:55:54 +0900
wordarium.net を Google ガジェット & ブログパーツ化 前からやろうやろうと思っていた wordarium.net のブログパーツ & Google ガジェット化にやっと手を付けました。

Google ガジェットは、以下のアドレスを「URLを指定して追加」すればOKです。

http://www.wordarium.net/wordarium.xml


Google ガジェットを自分のページに貼り付けるときは、↓このページでカスタマイズして、生成されたコードをはりつけてください。

自分のサイトにガジェットを追加 --- wordarium mini

↓こういう雰囲気になります。


あと、Googleガジェットの外枠がださいという人は、↓以下のコードを貼り付けてください。


↓もう一つ小さいサイズ(200x160)も。


サーバの負荷軽減のため、オリジナル版のように魚が魚を食べると関連語を検索する機能は外しています。

魚も微妙にうねうねさせてみましたが、あまりうまくいっていないかも。

またそのうちバージョンアップしてみます。

魚の種類を増やすとか。あと英語版対応もしたいなぁ。

]]>
http://dev.chrisryu.com/2007/08/wordariumnet_google_gadget_and_blog_parts.html http://dev.chrisryu.com/2007/08/wordariumnet_google_gadget_and_blog_parts.html MashUp Sat, 25 Aug 2007 09:20:13 +0900
wordarium.netがこんなところに! なんとなーくwordarium.netのアクセスログを見ていたら、見慣れないアドレスがありました。

そのアドレスに行ってみたんですが、ぱっと見どこにもwordarium.netへのリンクが貼っていないんですね。

あれー、なんでだろー、とか思っていたら、iframeでページのパーツの一部として扱われていました!

↓そのサイトはこちら。

ホームページとイラスト制作のGOWAS DESIGN*/STUDIO(ゴワスデザインスタジオ)


こういう使い方もあるのねと、ちょっと驚き。

おもしろい使い方を考える人がいるもんですね。

]]>
http://dev.chrisryu.com/2007/08/usecase_of_wordariumnet.html http://dev.chrisryu.com/2007/08/usecase_of_wordariumnet.html MashUp Tue, 21 Aug 2007 22:22:43 +0900
でぃべろっぱーず・さいど: アーカイブ

アーカイブ

/* Base Weblog (base-weblog.css) */ /* basic elements */ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { margin: 0; /* setting border: 0 hoses ie5 win window inner well border */ padding: 0; font-family: verdana, 'trebuchet ms', sans-serif; font-size: 12px; } form { margin: 0; padding: 0; } a { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote { margin-top: 10px; margin-bottom: 10px; } /* standard helper classes */ .clr { clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */ /* page layout */ body { text-align: center; } /* center on ie */ #container { position: relative; margin: 0 auto; /* center on everything else */ width: 720px; text-align: left; } #container-inner { position: static; width: auto; } #banner { position: relative; } #banner-inner { position: static; } #pagebody { position: relative; width: 100%; } #pagebody-inner { position: static; width: 100%; } #alpha, #beta, #gamma, #delta { display: inline; /* ie win bugfix */ position: relative; float: left; min-height: 1px; } #delta { float: right; } #alpha-inner, #beta-inner, #gamma-inner, #delta-inner { position: static; } /* banner user/photo */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display: block; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* content */ .content-nav { margin: 10px; text-align: center; } .date-header, .entry-content { position: static; clear: both; } .entry, .trackbacks, .comments, .archive { position: static; overflow: hidden; clear: both; width: 100%; margin-bottom: 20px; } .entry-content, .trackbacks-info, .trackback-content, .comment-content, .comments-open-content, .comments-closed { clear: both; } .entry-excerpt, .entry-body, .entry-more-link, .entry-more { clear: both; } .entry-footer, .trackback-footer, .comment-footer, .comments-open-footer, .archive-content { clear: both; margin: 5px 10px 20px 10px; } .comments-open label { display: block; } #comment-author, #comment-email, #comment-url, #comment-text { width: 240px; } #comment-bake-cookie { margin-left: 0; vertical-align: middle; } .comments-open-header { clear: both; } #comment-post { font-weight: bold; } img.image-full { width: 100%; } .image-thumbnail { float: left; width: 115px; margin: 0 10px 10px 0; } .image-thumbnail img { width: 115px; height: 115px; margin: 0 0 2px 0; } /* modules */ .module { position: relative; overflow: hidden; width: 100%; } .module-content { position: relative; margin: 5px 10px 20px 10px; } .module-list, .archive-list { margin: 0; padding: 0; list-style: none; } .module-list-item { margin-top: 5px; margin-bottom: 5px; } .module-presence img { vertical-align: middle; } .module-powered .module-content { margin-bottom: 10px; } .module-photo .module-content { text-align: center; } .module-wishlist .module-content { text-align: center; } .module-calendar .module-content table { border-collapse: collapse; } .module-calendar .module-content th, .module-calendar .module-content td { width: 14%; text-align: center; } .typelist-thumbnailed { margin: 0 0 20px 0; } .typelist-thumbnailed .module-list-item { display: block; clear: both; margin: 0; } /* positioniseverything.net/easyclearing.html */ .typelist-thumbnailed .module-list-item:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .typelist-thumbnailed .module-list-item { display: inline-block; } /* no ie mac \*/ * html .typelist-thumbnailed .module-list-item { height: 1%; } .typelist-thumbnailed .module-list-item { display: block; } /* */ .typelist-thumbnail { float: left; min-width: 60px; width: 60px; /* no ie mac \*/width: auto;/* */ margin: 0 5px 0 0; text-align: center; vertical-align: middle; } .typelist-thumbnail img { margin: 5px; } .module-galleries .typelist-thumbnail img { width: 50px; } .typelist-description { margin: 0; padding: 5px; } .module-featured-photo .module-content, .module-photo .module-content { margin: 0; } .module-featured-photo img { width: 100%; } .module-recent-photos { margin: 0 0 15px 0; } .module-recent-photos .module-content { margin: 0; } .module-recent-photos .module-list { display: block; height: 1%; margin: 0; border: 0; padding: 0; list-style: none; } /* positioniseverything.net/easyclearing.html */ .module-recent-photos .module-list:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .module-recent-photos .module-list { display: inline-block; } /* no ie mac \*/ * html .module-recent-photos .module-list { height: 1%; } .module-recent-photos .module-list { display: block; } /* */ .module-recent-photos .module-list-item { display: block; float: left; /* ie win fix \*/ height: 1%; /**/ margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item a { display: block; margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item img { width: 60px; height: 60px; margin: 0; padding: 0; } /* mmt calendar */ .module-mmt-calendar { margin-bottom: 15px; } .module-mmt-calendar .module-content { margin: 0; } .module-mmt-calendar .module-header { margin: 0; } .module-mmt-calendar .module-header a { text-decoration: none; } .module-mmt-calendar table { width: 100%; } .module-mmt-calendar th { text-align: left; } .module-mmt-calendar td { width: 14%; height: 75px; text-align: left; vertical-align: top; } .day-photo { width: 54px; height: 54px; } .day-photo a { display: block; } .day-photo a img { width: 50px; height: 50px; } /* Vicksburg II (theme-vicksburg.css) */ /* basic page elements */ body { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; font-size: 12px; } a { color: #666666; text-decoration: underline; } a:hover { color: #66cc33; } #banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; } .module-content a { color: #666666; } .module-content a:hover { color: #66cc33; } h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; } .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: x-small; border-bottom: 1px dashed #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; } .module-header a, .module-header a:hover, .trackbacks-header a, .trackbacks-header a:hover, .comments-header a, .comments-header a:hover, .comments-open-header a, .comments-open-header a:hover .archive-header a, .archive-header a:hover { color: #fff; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 11px; } .commenter-profile img { vertical-align: middle; } /* page layout */ body { min-width: 720px; color: #333; background: #FFFFFF; } #container { width: 720px; margin-bottom: 20px; background: #fff; } #container-inner { border-width: 0 5px 5px 5px; border-style: solid; border-color: #FFFFFF; } #banner { width: 710px; /* necessary for ie win */ background: #66cc33; } #banner-inner { padding: 15px 13px; border-width: 0px 0px 0 0px; border-style: solid; border-color: #fff; } .banner-user { width: 70px; margin-top: 5px; font-size: 10px; } .banner-user-photo { border: 1px solid #fff; } #banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #666666 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; line-height: 1.125; text-shadow: #666666 0 1px 2px; } #alpha { margin: 15px 15px 0 15px; width: 480px; } #beta { width: 200px; background: #e6ecf2; } #gamma, #delta { width: 180px; background: #dddddd; } #beta-inner, #gamma-inner, #delta-inner { padding: 10px 10px 0 10px; border-width: 0px 0px 0px 0; border-style: solid; border-color: #fff; } .date-header { margin-top: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; } .entry-header { margin-top: 0; border-left: 5px solid #66CC33; padding: 0 0 0 10px; color: #000000; font-size: 18px; font-weight: bold; } .entry-content, .comment-content, .trackback-content { margin: 0; line-height: 1.5; } .entry-tags { margin: 0 0 10px 10px; } .entry-tags-header, .entry-tags-list, .entry-tag { display: inline; } .entry-tags-list { list-style:none; padding: 0px; } .entry-footer, .comment-footer, .trackback-footer { margin: 0 0 20px 0; border-top: 1px solid #DDDDDD; padding-top: 3px; color: #666; font-size: 10px; text-align: right; } .comment-content, .trackback-content, .comment-footer, .trackback-footer { margin-left: 10px; } .content-nav { margin-top: 0; } #trackbacks-info { margin: 10px 0; border: 1px dashed #66cc33; padding: 0 10px; color: #292e33; font-size: 11px; text-align: center; background: #dddddd; } .comments-open-footer { margin: 10px 0; } /* modules */ .module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #DDDDDD; } .module-content { margin: 0 0 10px 0; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; } .module-search input { font-size: 10px; } .module-search #search { width: 100px; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 10px; } .module-powered { border-width: 0; } .module-powered .module-content { margin-bottom: 0; border: 1px dashed #66cc33; padding-bottom: 10px; color: #292e33; background: #fff; } .module-photo { background: none; } .module-photo img { border: solid 1px #fff; } .module-list { margin: 0 15px 10px 15px; list-style: disc; } .module-list .module-list { margin: 5px 0 0 0; padding-left: 15px; list-style: circle; } .module-list-item { margin-top: 0; color: #666; line-height: 1.2; } .typelist-thumbnailed .module-list { margin: 0 0 10px 0; list-style: none; } .typelist-thumbnailed .module-list-item { margin: 1px 0; padding: 0; background: #f3f6f9; } .typelist-thumbnail { background: #fff; } .module-photo img { border: 1px solid #fff; } .module-featured-photo { width: 398px; } .module-featured-photo .module-content { margin: 0; border-width: 0; padding: 0; } .module-featured-photo img { width: 398px; } .module-recent-photos .module-content { padding: 10px 0 0 19px; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 10px 10px 0; padding: 0; background: none; } .module-recent-photos .module-list-item a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .module-recent-photos .module-list-item a:hover { border-color: #666666; background: #fff; } .module-tagcloud .module-list {text-align: center; } .module-tagcloud .module-list { list-style: none; } .module-tagcloud .module-list-item { display: inline; } .module-tagcloud li.taglevel1 { font-size: 19px; } .module-tagcloud li.taglevel2 { font-size: 17px; } .module-tagcloud li.taglevel3 { font-size: 15px; } .module-tagcloud li.taglevel4 { font-size: 13px; } .module-tagcloud li.taglevel5 { font-size: 11px; } .module-tagcloud li.taglevel6 { font-size: 9px; } /* calendar tweaks */ .layout-calendar #alpha { width: 260px; } .layout-calendar #beta { width: 420px; } .layout-calendar #gamma, .layout-calendar #delta { width: 190px; } .layout-calendar #gamma-inner, .layout-calendar #delta-inner { border: 0; padding: 0; } .module-mmt-calendar { width: 398px; } .module-mmt-calendar .module-content { margin: 0; border-width: 0; padding: 10px; } .module-mmt-calendar table { width: 378px; background: #66cc33; } .module-mmt-calendar th { color: #fff; border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: bold; } .module-mmt-calendar td { border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: normal; background: #dddddd; } th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42 { border-right: none; } .module-mmt-calendar td { height: 70px; } .day-photo { width: 49px; height: 49px; } .day-photo a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .day-photo a:hover { border-color: #666666; background: #fff; } .day-photo a img { width: 45px; height: 45px; } /* artistic tweaks */ .layout-artistic #alpha { width: 260px; } .layout-artistic #beta { width: 420px; } .layout-artistic #gamma, .layout-artistic #delta { width: 190px; } .layout-artistic #gamma-inner, .layout-artistic #delta-inner { border: 0; padding: 0; } /* moblog1 tweaks */ .layout-moblog1 #alpha { margin: 0; width: 180px; background: #dddddd; } .layout-moblog1 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog1 #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-moblog1 #beta-inner { padding: 0; border-width: 0; } .layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; } /* moblog2 tweaks */ .layout-moblog2 #alpha { margin: 0; width: 86px; background: #dddddd; } .layout-moblog2 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog2 #beta { margin: 15px 15px 0 15px; width: 260px; background: none; } .layout-moblog2 #beta-inner { padding: 0; border-width: 0; } .layout-moblog2 #delta { width: 154px; } .layout-moblog2 .module-recent-photos { border: 0; background: none; } .layout-moblog2 .module-recent-photos .module-content { padding: 0; border: 0; } .layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; } /* timeline tweaks */ .layout-timeline #alpha { width: 260px; } .layout-timeline #beta { width: 420px; } .layout-timeline #gamma, .layout-timeline #delta { width: 190px; } .layout-timeline #gamma-inner, .layout-timeline #delta-inner { border: 0; padding: 0; } /* one-column tweaks */ .layout-one-column body { min-width: 520px; } .layout-one-column #container { width: 520px; } .layout-one-column #banner { width: 510px; } /* necessary for ie win */ /* two-column-left tweaks */ .layout-two-column-left #alpha { margin: 0; width: 200px; background: #dddddd; } .layout-two-column-left #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-two-column-left #beta { margin: 15px 15px 0 15px; width: 480px; background: none; } .layout-two-column-left #beta-inner { padding: 0; border-width: 0; } /* three-column tweaks */ .layout-three-column #alpha { margin: 0; width: 180px; background: #DDDDDD; } .layout-three-column #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-three-column #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-three-column #beta-inner { padding: 0; border-width: 0; } /* * Preliminary styles added by Jay for Vicksburg II * for review by Luke/Walt and rest of team */ /* All or multiple templates Suppress underlines on linked entry titles */ .entry-header a { text-decoration: none; } /* Suppress the prev/next nav */ .content-nav { margin: 0px; display: none; } /* Search results templates */ .mt-search-results .search-results-header { border: 2px solid #669; background-color: #666666; color: #eee; padding: 5px; } .mt-search-results .search-results-container { margin-left:10px; } .mt-search-results form#search-form { width: 400px; margin: 0px auto 20px auto; } .mt-search-results form#search-form input#search { width: 80%; } .mt-search-results form#search-form p#search-options { text-align:center; } /* Entry tag display */ div.entry-tags { margin:0 0 10px 10px; } ul.entry-tags-list { list-style:none; padding: 0px; } h4.entry-tags-header, ul.entry-tags-list, li.entry-tag { display: inline; } /* Main index styles Suppress date header on main index */ .main-index .date-header { display: none; } /* Comment preview and individual entry Widen the comment form */ form textarea#comment-text { width:400px; } /* All archive templates Informational "where am I?" module at top of sidebar */ .module-welcome p { font-size: 12px; } .module-content p.first { margin-top:0px; } /* Date-based and category archives Archive title banner at top of page, below blog banner */ .master-archive-index #archive-title, .individual-entry-archive #archive-title, .date-based-archive #archive-title, .category-archive #archive-title { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 10px solid #66cc33; padding: 5px; color: #fff; background: #666666; } /* Experimental comment styles Not currently in use anywhere in default templates For testing only... */ #comments-experimental .comment, #comments-experimental .comment .comment-inner { width:36em; } #comments-experimental .comment { padding: 0px; margin: 10px 15px; background-color:#eef; border:2px solid #bbb; } #comments-experimental .comment .comment-inner { position:relative; margin:-5px 0 0 -3px; background:#f3f3ff; border:1px solid #003; } #comments-experimental .comment:hover .comment-inner { border:1px solid #000; background-color: #fff; } #comments-experimental .comment a { text-decoration: none; border-bottom: 1px dotted #666666; } #comments-experimental .comment:hover a { color: #333; border-bottom: 1px solid #666; } #comments-experimental .comment .comment-footer, #comments-experimental .comment .comment-content { margin-right: 25px; margin-left: 25px; margin-bottom: 15px; } #comments-experimental .comment .comment-header { font-size: 16px; margin: 5px auto 5px 10px; text-shadow: #99A 2px 2px 1px #66F; color: #666; } #comments .comment-header { display: none; } #comments .comment-footer-experimental { display: none; } #comments-experimental .comment-footer { display: none; } でぃべろっぱーず・さいど: コメントの保留

コメントを受け付けました。

コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。

エントリーのページに戻る