« 2008年5月 | メイン | 2008年7月 »

2008年6月 アーカイブ

2008年6月29日

SIer向けの管理ツールが欲しい

最近SIer的な仕事に戻っているのですが、チームリーダなんてのを任される年次になってしまったので、せっかくだから新しいツールを色々と導入したいなぁと思っています。

Subversionでドキュメント(Word,Excel)を管理、ってのはまあ最近でも良く聞く話で。

TortoiseSVNを使ったら、変更履歴がちゃんとWordやExcelのファイルの中で見られますよ、と。かなり便利ですよね、これ。

あと、コミュニケーションとか議事録、メモ代わりに先日SKIPとしてオープンソース化された社内SNSを使うようにしました。

ただ、これだとうちの会社に来てもらっているパートナーさんは使うことができないんですね(社内限りの情報もあったりするので、うちの会社では社員限定なのです)。

ちょっとしたURLや情報やりとりは、Google Talksみたいなのでやって、後で検索できるようにしておきたいしなぁ。

バグ管理、不具合管理もいい加減Excelから卒業して、BTSを使いたいのですが、パートナー企業に開発をお願いしていたりすると、ソースの修正がBTSのチケットと紐付けるのが難しくなる、というより不可能になってしまうので、BTSのうま味を活かしきれないんですよねぇ。

みんなの予定を管理するスケジューラも、サイボウズとか、Google Calendar(もちろん非公開で、かつ登録する内容はぼかして)とか、色々選択肢はあるのですが、どれも帯に短し、たすきに長しになってしまうのです。

あと、使うツールを増やせば増やすほど、付いて来れない開発者も多くなってきますし・・・。

自分の中でぼんやりと出来上がっているツールが使えたら良いんだけどなぁ。まあ、開発者だったらそんなの愚痴ってないで作っちゃえ、という話ですよね。

2008年6月30日

お金をカウント

"Code Challenge: Change Dispenser"より、0.37ドルがコインだと何枚になるかカウントするロジック。

function makeChange (money) {
    var i, num,
        output = [],
        coins  = [
            [100, "dollar",  "dollars" ],
            [25,  "quarter", "quarters"],
            [10,  "dime",    "dimes"   ],
            [5,   "nickel",  "nickels" ],
            [1,   "penny",   "pennies" ]
        ];
    money = money * 100; // avoid float precision issues
    for (i = 0; i < coins.length; i++) {
        num = Math.floor(money / coins[i][0]);
        money -= num * coins[i][0];
        if (num) {
            output.push(num + " " + coins[i][num > 1 ? 2 : 1]);
        }
    }
    return output.join(", ");
}

makeChange(0.37); // "1 quarter, 1 dime, 2 pennies"

ポイントは、コインが複数のときは単位を複数形にするところですね。

これを応用して、日本のお金で。

日本円の場合、複数になっても単語が複数形にならないから、若干楽かも。

function makeChange (money) {
    var i, num,
        output = [],
        coins  = [
            [10000, "1万円札"],
            [5000,  "5000円札"],
            [2000,  "2000円札" ],
            [1000,   "1000円札" ],
            [500,   "500円玉" ],
            [100,   "100円玉" ],
            [50,   "50円玉" ],
            [10,   "10円玉" ],
            [5,   "5円玉" ],
            [1,   "1円玉" ]
        ];
    for (i = 0; i < coins.length; i++) {
        num = Math.floor(money / coins[i][0]);
        money -= num * coins[i][0];
        if (num) {
            output.push(coins[i][1]+ " × " + num );
        }
    }
    return output.join(", ");
}
makeChange(12057); // "1万円札 × 1, 2千円札 × 1,  50円玉 × 1, 5円玉 × 1, 1円玉 × 2"  

だからどうしたってロジックですね。

2008年6月28日

SKIP -オープンソースへの道-

先日のRuby Kaigiで発表された、倉貫さんによる「Ruby×AgileによるSNS構築事例~オープンソースへの道~」がニコニコ動画で観られるようになってます。

Ruby×Agileによる社内SNS構築事例〜オープンソースへの道〜‐ニコニコ動画(SP1)

大会社の中でオープンソース化するための難しさや、自分、会社、世界を変えていこうという強いメッセージが伝わってきます。

僕もこのSNSの恩恵にあずかった一人なので、倉貫さんやSKIPに対して恩返しをしていきたいなぁと思っています。

いつになるかは分かりませんが(まずはRuby覚えろって話かな)。

2008年6月27日

仕事が忙しくなると、ブログ更新が滞る

プライベートな時間が減るから当たり前と言えば当たり前なんですが。

書く時間が減ることよりも、インプットの時間が減るからという方が更新が滞る理由のような気がしますね。

Google Readerの未読フィードもなかなか消化できないしなぁ。

ブログ書いて発散していた何かが、もんもんと蓄積されてしまい、ストレスで通常の仕事がうまく回らないと言う悪循環になってます。

通勤時間とかもっと有効に使わねば。

2008年6月26日

OCNが転送量の制限

1日30GB以上も送信したら利用停止、OCNが8月1日よりヘビーユーザーの制限へ | ネット | マイコミジャーナル

おそらくファイル共有ソフトとかを使っているユーザへの対応なんでしょうね。

僕はその手のソフトを使っていないので、特に困らないとは思いますが・・・。

YouTubeとかニコニコとか、一日中見ていたら転送量ってどれくらいになるんだろ。それでも30Gにはいかないですよね、きっと。

MA4に参加しよう!

MASHUP AWARD事務局のSUN藤井さんのブログより。

リアルな親父のMashup : 日々是新 Akihito Fujii's Weblog

まだまだMashup Award 4th 知られてないようです(涙)。一応世界一のMashup Contestを目指していますので、是非みなさん参加&宣伝への協力をお願いします。Mashup Awardは、開発者が新たなステージに上るためのコンテストでもあります。是非参加登録だけでなく、blog, mailなどでの告知の協力をお願いします。宣伝費はありません(笑)。口コミ命です。ご協力をお願いします。文句のあるかたは藤井まで直接教えてください。いろいろなご意見歓迎です。

だそうです。

まだまだ参加登録者少ないのかな。

こういうのは、「あとで」と思っているといつの間にか忘れてしまうので、気が付いたときに脊髄反射で登録するのが良いと思います。参加費無料だし、参加登録して結局応募しなかったとしても何のペナルティもないわけだし。

1人で参加するのが自信ない人は、誰かと一緒に参加すればいいし。

「プログラミングしたいけど、仕事ではなかなかそういう機会がなくて・・・」と思っているエンジニア(特にSEの人)は、この機会を活用するべき。なんてったって出品すれば100万円もらえる可能性があるわけだからね。勉強にもなって、エンジニア同士のつながりができて、さらにお金ももらえたら最高じゃないですか。

さあ、今すぐ参加登録を!

※MAがらみでちょっと企画しているブログのネタがあるので、うまくまとまったら公開します。

2008年6月24日

Google Map Maker

GoogleがGoogle Map Makerをリリースしました。

Google Map Maker

ユーザが地図上に情報を登録することで、Google Maps本体へ地理情報をマッピングしていくサービスのようです。

これまでにキプロスなどの小さな国で実績があるようですね。

個人的には、日本の地図がゼンリンの地図ではなくGoogle提供の白地図になっているのがおもしろかったです。

2008年6月23日

MASHUP AWARD 4thカウントダウンガジェット

以前公開した「MASHUP AWARD 4thカウントダウンガジェット」をバージョンアップしました。

今回のバージョンアップで、MASHUP AWARD 4thのバナーを表示できるようになりました。表示するバナーはガジェットの設定から選択することができます。

↓ノーマルな設定だとこんな感じで、テキストの"MASHUP AWARD 4th"と締め切りまでの残日数を表示します。

↓ガジェットの「▼」をクリックして「設定を変更」をクリック。

ma4gadget_001.png

↓バナー画像は以下のプルダウンから選択できます。全4種類で、「ランダム」を選択すると4種類の中からランダムで表示します。

ma4gadget_002.png↓カウントダウンの表示を消すこともできます。

ma4gadget_003.pngブログに貼り付けるには、↓以下のページでコードを生成します。

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

↓生成されるコードで以下のようなガジェットを貼り付けることができます。

モチベーションの維持にご利用ください。

2008年6月22日

Google Trendsの新機能

Google Trendsで、ウェブサイトのトレンド(アクセス状況)も見られるようになったようです。

↓こちらが、chrisryu.comドメインのTrend。

Google Trends for Websites: chrisryu.com

零細ブログなので、アクセス数は表示されませんが、「Also visited」のところと「Also searched for」ってところが丸見えなのがおもしろいですね。

今のとこ、chrisryu.comドメインはredmineとjqueryで注目されているサイトのようです。

↓gihyo.jpとthinkit.co.jpとcodezine.jpを比較したものがこちら。

Google Trends for Websites: gihyo.jp,thinkit.co.jp,codezine.jp,

gihyo.jpが伸びてきているのが分かります。また、年末年始にアクセスが落ちているのもおもしろいです。

2008年6月21日

SKIP USER GROUP

TISが公開したオープンソース社内SNSのユーザグループが公開されています。

SUG

Skip User GroupでSUGですね。

このサイト自体がSKIPで運営されています。未ログイン状態でサイトを表示すると、ゲストアカウントでログインした状態になっています。この状態だと、機能がかなり制限されるので、SKIPを試してみようと思っている方は、是非ユーザ登録をして、使い心地を確かめてみてください。

2008年6月20日

Google Chart API の Google-o-meter

Google Chart APIにあるGoogle-o-meterってちょっとおもしろいです。

↓こんなURLで、

http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:80&chl=now

↓こんなグラフが取得できます。

パラメータの意味は以下の通り。

chs : グラフの大きさ(横 x 縦)

cht : グラフのタイプ(Google-o-meterのときはgom)

chd : グラフのデータ(,区切りで複数指定可)

chl : ラベル(|区切りで複数指定可)

↓ということで、こんな感じのグラフもできます。

http://chart.apis.google.com/chart?chs=400x200&cht=gom&chd=t:90,80,20&chl=today|yesterday|tomorrow

ラベルに日本語を指定できるようになって欲しいなぁ。

2008年6月19日

外部JavaScriptファイルをロードして、そこに書かれている関数を実行する。

Greasemonkey勉強会で紹介したJavaScriptのTips。

hoge.jsにhogeFuncが定義されていて、hoge.jsを読み込んですぐにhogeFuncを実行したいとき。

↓こんな風に書いちゃうと、エラーになってしまいます。

var s = document.createElement('script');
s.type='text/javascript';
s.charset = 'utf-8';
s.src = 'hoge.js';
document.getElementsByTagName('head')[0].appendChild(s);
hogeFunc();//この時点ではまだhoge.jsがロードされていない可能性が高い

hoge.jsのscriptタグをappendした後、実際にhoge.jsがダウンロードされ、JavaScriptが解釈されるまではhogeFuncは実行できません。

ということで、↓こんな風にしてsetIntervalで定期的に処理を実行してやればOK。

var s = document.createElement('script');
s.type='text/javascript';
s.charset = 'utf-8';
s.src = 'hoge.js';
document.getElementsByTagName('head')[0].appendChild(s);
var timerId = setInterval(timerFunc,100);//100msecごとにtimerFunc()を実行
function timerFunc(){
  if(window.hogeFunc){
    clearInterval(timerId);//100msecごとに実行している処理を停止
    hogeFunc();//ロードされているのでエラーが起こらない
  }else{
    //hogeFuncが定義されていない場合はここを通る。=何もしない
  }
}

2008年6月18日

グリモン勉強会

会社でGreasemonkey勉強会を開催してきました。

発端は、社内SNSに投稿された一つのGreasemonkeyに関するエントリ。これに「おもしろいね」「勉強会したいね」というコメントが付いていたので、「じゃあ開催しましょう」と。

そこから2週間後くらいに開催日を設定して、社内SNSのイベント機能(オープンソース版にはこれから移植)を使って、出席者を管理して。

うちの会社は、部署によって竹芝と芝浦ふ頭に分かれている(ゆりかもめで2駅)んですが、開催場所を芝浦ふ頭にしたにも関わらず、竹芝からも数名参加してくれました。というか半分くらいそうだったかな。

当初は、Greasemonkeyとはなんぞや的な発表とか、いわゆる勉強会的なノリを想定していたのですが、勉強会を前にして、社内SNSの掲示板に次から次へと「こんなグリモン作ったよ」という投稿が相次ぎ、勉強会を前に手の内を晒すことに。

それがかえって、「あいつがあんなの作ってるんだから、俺はこんなのを作るんだ」と、みんなの闘争心に火をつけたようで、おもしろいグリモンがいくつも誕生しました。

勉強会の場でも、それぞれが5分くらいで自分の作ったグリモンを紹介して、技術的に苦労したところや、分からなかったところを、他の参加者に意見を求める的な流れで、なかなか盛り上がりました。

僕が作ったのは、社内SNSのブログの投稿で、PREタグに対して、pretty-printを実行するグリモンと、社内SNSのアクセスランキングのページにGoogle Chart APIを使ってグラフを追加するというグリモン。

両方とも、ちょっとしたテクニックを使っていて、参加者には割と好評でした。

その他、アクセス数が3の倍数(ry のとき、プロフィール画像があほになるグリモンとか、ブログの投稿欄にガンダムの名言を差し込むグリモンとか、便利なキーボードショートカットを追加するグリモンとかとか。

技術的におもしろいものや、アイデアの着眼点がおもしろいものとか。ほんと刺激になりましたよ。

こういう技術的な勉強会を開催して、それぞれ手持ちのアイデアを持ち込んで楽しめるって、うちの会社のまだまだ捨てたもんじゃないなと思いました。

2008年6月17日

TIS発Rails製オープンソース社内SNS「SKIP」のダウンロード開始!

以前に紹介したTIS発のオープンソース社内SNS「SKIP」のダウンロードが開始されました。

まずはversion0.9がリリースされているようです。

SKIP - オープンソースSNS「SKIP」を公開しました。

ダウンロードはこちらから。

サイトはMovableTypeで、リポジトリはSubversion、ドキュメントはGoogle Site、Issue TrackingはRedmineですよ。今風ですねぇ(←この感想がすでに死語)。

今夜はFirefox3のダウンロード開始日だし、オープンソース界隈がにぎやかですなぁ。

明日は業務後に、SKIP開発者達も交えて、Greasemonkeyの勉強会を開催予定。

如何にTCポータル(社内でのSKIPの名称)をGreasemonkeyでHackするかというところに主眼を置いて、というかいつのまにか置かれていて、勉強会を前に、社内SNSの掲示板では「こんなの作った」「これおもろい!」みたいなやりとりがなされています。

ユーザのプロフィールや名前をすべて社長に置きかえるというグリモンを考えたんだけど、悪ふざけしすぎかなと思い自重。まあでも明日になったら勢いで作ってるかもね。

↓ダウンロード開始については開発者達も自分のブログで報告してます。

オープンソースSNS「SKIP」がリリースされました! - RX-7乗りの適当な日々

SKIPのバージョン0.9.0がリリース - maeda.na@はてな

2008年6月16日

Amazon.comの本をGoogle Maps風に閲覧する"Zoomii.com"

Amazon Web Services Blogで、Amazon.comの本を本棚風に閲覧できて、マウス操作でズームイン/アウト、商品の詳細表示等ができる「Zoomii.com - The "Real" Online Bookstore」が紹介されていました。

Amazon Web Services Blog: Zooming in on Innovation

動画は↓こちら。

あれ、なんか既視感が・・・と思ったら、自分が作った「Amazon ベストセラー ビューア」にコンセプトが似てましたよ。まあ、僕の方はベストセラーのRSS拾ってきて表示しているだけですが。

ちょうどAWSを使って、詳細表示やカートに追加、検索を実装しようかなと思っていたところだったので、若干意気消沈。やっぱ同じこと考える人いるよなぁと。キーボード操作は「Zoomii.com」にはまだないみたいなので、この点をもっとプッシュしていこうかな。

Zoomii.comは、Flashアプリかと思ったら、Ajaxアプリでした。細かい画像がいっぱいあるように見えますが、各ズームレベルで↓こういうタイルをいくつも生成して並べているようです。

なるほどねぇ。

Google App Engineでオフラインタスク(バッチ)が実行できるようになったら、似たような処理を書いてみようかな。

ちなみに、「Ajaxアプリでアンカーを使ってURLを一意にするテクニック (でぃべろっぱーず・さいど)」で書いた「URLのアンカーで、表示位置を表現する手法」もZoomii.comで使われています。

2008年6月15日

jQueryのテスティングフレームワークQUnit

jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。

QUnit - jQuery JavaScript Library

これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。

使い方は以下の通り。

提供されているメソッド

test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。

module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。

ok( state, message ) : stateがtrueならOK、falseならNGという判定になります。messageはテスト時に表示するメッセージです。

equals( actual, expected, message ) :actualとexpectedが同値ならOK、異なればNGという判定になります。messageは同上。

expect( amount ) : そのテスト(text(name,test)で引数に指定しているテスト関数)の中で実行されているok()/equals()の数をamountに指定します。テストの数が異なれば、エラーが表示されます。

start( ) : テストを再開します。

stop( ) : テストを中断します。Ajaxで非同期通信等のテストを行うとき、非同期処理前にstop()でテストを止め、非同期処理終了時のコールバック関数内でstart()を実行して、テストを再開します。

サンプル

実際のテストケースを見た方が早いと思うので、以下にQUnitのページで紹介されているサンプルコードを掲載します。

test("a basic test example", function() {
  ok( true, "this test is fine" );
  var value = "hello";
  equals( "hello", value, "We expect value to be hello" );
});

module("Module A");

test("first test within module", function() {
  ok( true, "all pass" );
});

test("second test within module", function() {
  ok( true, "all pass" );
});

module("Module B");

test("some other test", function() {
  expect(1);
  ok( true, "well" );
});

このテストの実行結果はこちらのページで確認できます。

テスト結果の行の最後の3つの数字は、それぞれ「エラー数」「成功数」「テスト総数」を意味しています。

結果の行をクリックすると、各テストのメッセージが表示されます。エラーが発生していた場合は、ここで、どのAssertでエラーが発生したかが分かります。

ということで、上記サンプルをちょっといじって、エラーが発生するパターンのページを作ってみました。

こちらでご確認ください。

equalsでエラーが発生した場合は、期待値と実際の処理結果の値が画面に表示されます。

非常にシンプルなフレームワークなので、さくっとテストを書くことができて便利です。

QUnitの基本的なHTMLは以下のようになります(DLはこちらから)。下記のページに、テストしたいjsを読み込んで、テストコードを書けばOKです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>QUnit sample</title>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://dev.jquery.com/view/trunk/qunit/testrunner.js">
        </script>
        <script type="text/javascript">
            $(function(){
                try {
                    //ここにテストを記述
                } 
                catch (e) {
                }
            });
        </script>
    </head>
    <body>
        <h1>QUnit example</h1>
        <h2 id="banner"></h2>
        <h2 id="userAgent"></h2>
        <ol id="tests">
        </ol>
        <div id="main">
        </div>
    </body>
</html>

テストケースを、どのように書いたら良いか分からない方は、本家のjQuery自身のテストケースを見てみることをおすすめします。以下にテストJavaScriptコードのリンクをいくつか紹介します。

2008年6月14日

Google Earth on Google Maps

Geekなページに、Google MapsのMap Typeを"G_SATELLITE_3D_MAP"にセットすると、Google Earthが表示できるというのでやってみました。

Geekなぺーじ : Google MapsでGoogle Earthを表示する

先日のBarNaviのAPIを使って、銀座コリドー街付近のバーの位置を表示しています。(簡易版なので、クリックしたらバー情報が見られるとかは実装してないです)

通常のGoogle Maps版

Map Typeが"G_SATELLITE_3D_MAP"版

Google EarthのAPIを見ると、Google Maps とはまた微妙に異なるAPIの使い方(書き方)になっているようですが、Google MapsのMap typeを変更する方法だと、マーカの表示はそのままのコードで動きました。

うまくすると、「Google Earthが使える人は3Dで、そうでない人は通常のMapで」という自動切り替えが実装できるのかも。

↓今回作ったコードはこちらです。

javascript

google.load("feeds", "1");
var map;
var map2;
function initialize() {
    init(G_NORMAL_MAP);
}
function initialize2() {
    init(G_SATELLITE_3D_MAP);
}
function init(type){
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.671051, 139.760535), 18);
        map.setMapType(type);
        var obj = {
            "key":"barnavi-api-key"
            ,"pattern":"1"
            ,"lat":"35.671051"
            ,"lng":"139.760535"
            ,"range":"1000"
            ,"datum":"world"
            ,"type":"0"
            ,"_callback":"cb"			
        }
        var url = getRequestUrl(obj);
        $.getScript(url);
    }
}
function getRequestUrl(obj){
    var base = 'http://pipes.yahoo.com/pipes/pipe.run?_id=7J43uok43RGoLtmxTqoASA&_render=json';
    var param = [];
    for(p in obj){
        param.push(p + '=' +obj[p]);
    }
    return base + '&' + param.join('&');
}
function cb(data){
    var shops = data.value.items;
    for(var i = 0,len = shops.length;i<len;i++){
        var point = new GLatLng(shops[i].lat_world,shops[i].lng_world);
        map.addOverlay(new GMarker(point));
    }
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="./css/main.css" type="text/css"><link>
        <title>Google Maps</title>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=apikey">
        </script>
        <script type="text/javascript">
        google.load("jquery", "1.2.6");
	google.load("maps","2.x");
        </script>
        <script type="text/javascript" src="./js/s.js">
        </script>
        <script type="text/javascript">
	$(initialize);//Earth風のときはinitialize2を使う
	$(window).unload(GUnload);
        </script>
		</head>
    <body>
<div id="map_canvas"></div>
    </body>
</html>

2008年6月13日

SIer向いてないな・・・

最近自分がSIerに向いていないとつくづく思っているわけですが。

SIerだからこそ体に染み付く本当に大切な事 - makoto_way’s Diary - Business/Marketing&AD

SIerだから身に付くもの、というのは確かにあると思います。大手のSIerだと、社内に仕事は標準化する、標準化のルールに従って行う、というイロハが当たり前のように行われているので、この手のルール化がいまいちなところに飛び込んでみると、「なんか自分っていつの間にか鍛えられていたな」と思うこともしばしば。

上記リンク先に書いてあることは、だいたい同意できるところだけど、↓この部分だけは理解することは無理だなと思いました。

3点目は、顧客が成果を出すために命を削ってコミットしていく

本質的な顧客志向。

タバコ吸わないのにタバコ部屋に行ってまでコミュニケーションをとっていた。

そう、どうせやるなら、顧客のために何かをやりたい。

自分のために命は削れても、顧客のためには削れないと思った。

世に言うデスマを立て直し、バリバリと案件を推進していく人ってのはきっと引用部分に書いてあることを実践・理解出来る人なんだろうなぁ。僕には無理ですわ。この時点でSIerに向いてないのかも。

2008年6月12日

SUNTORY BarNaviのYahoo Pipes

GDDが終わったので、気持ちを徐々にMA4へ切り替えていきます。

以前、Mashup Award 4thのエントリを書いたときに、SuntoryのBarNavi APIが気になっているということを書きました。

で、さっそくAPIの利用申請をして使おうとしたら、どうもフォーマットがXMLだけっぽい。なのでPipesでデータを取得できるようにしました。たいしたことはしてないのですが、まあ同じAPIを利用しようと思っている人がいたら、これを使うなりコピーするなりしてください。

Pipes: BarNavi

jQueryと使うならこんな感じすると良いかも↓

$(init);
function init(){
var obj = {
	"key":"your key"//BarNaviのAPIのKey
	,"pattern":"1"
	,"lat":"35.671051"
	,"lng":"139.760535"
	,"range":"1000"
	,"datum":"world"
	,"type":"0"
	,"_callback":"cb"//コールバック関数
}
var url = getRequestUrl(obj);
$.getScript(url);
}
function getRequestUrl(obj){
  var base = 'http://pipes.yahoo.com/pipes/pipe.run'
+'?_id=7J43uok43RGoLtmxTqoASA&_render=json'; var param = []; for(p in obj){ param.push(p + '=' +obj[p]); } return base + '&' + param.join('&'); } function cb(data){ //処理を記述 }

あくまで1例ですが。

さ、「おもろー!」なアプリのネタを考えようかな。

2008年6月11日

Google Developer Day 2008 Japan レポート

Google Developer Day 2008のレポートを基調講演からと思ったのですが、基調講演については色んなニュースサイトやブログで取り上げられているので、割愛します。

2年連続でGDDに参加しての感想と、僕が参加した「Google Data API」と「OpenSocialコードラボ」について書きます。

全体の感想

昨年のGDDでは、基調講演のときにMappletsやGoogle Gearsの発表があり、かなりわくわくドキドキさせられました。今年のGDDにも、なんとなくそんな「サプライズ」を期待していったのですが、その期待はあっさりと裏切られました。

GDDの親玉イベントであるGoogle I/Oが5月末に開催されたためか、まだどこにもリリースされていないニュースやAPIの発表はありませんでした。まあ、これは僕が勝手に期待していただけなので、だから今年のGDDはいまいちだった、なんていうつもりは全然ありません。

むしろ今後の開発やエンジニアライフへの影響を考えると、昨年以上の刺激やつながりを得られたと思います。

GDD全体のトーンは、Gears、OpenSocial、Android、Google App Engineという、Googleが力を入れているという3C (Client / Connectivity / Cloud)というコンセプトを軸にして、開発者にGoogle のAPIを紹介し、実際に使ってもらおうというもの。

Googleの及川さんが、基調講演の際、One more thing として4つめのCであるCommunityを挙げられていましたが、このコミュニティを育てること(もしくはそのきっかけを作る)こそがGDDの真の目的であるように思いました。

GoogleのAPIに慣れ親しんでいる開発者は「認定エキスパート」として、Google APIの初心者・中級者を引っ張る立場としてGDDに参加できるようにし、コードラボセッションのような上級者向けのセッションを用意する一方で、初心者向けのセッションも多数用意して門戸を広げていました。幅広いレベルのエンジニアが参加できて、それぞれに得るものがあるという場をGDDは実現しようとしていたのだと思います。

最後のSocial Talkという懇親会の場では、GDDに参加した人たちどうしがあちこちで名刺交換や話をしていて、活気にあふれていました。僕もOpenSocialセッションで説明していたGoogle社員のクリスさんに思い切って英語で話しかけてみました。下手な英語にもかかわらず、一生懸命聞いてくれて、「他に質問はないかい?何かあったら名刺のアドレスまでメールしてくれ」みたいなきさくな言葉もかけてもらいました。

ああいう場に行くと、知らない人に囲まれてついついしり込みしてしまいがちですが、積極的にいろんな人に話しかけてみることが楽しむこつですね。

来年も開催されるなら、また参加したいなと思っています。GoogleのAPIを使い倒して、認定エキスパートにしてもらえるくらいになっていると良いな。

では、僕が参加したセッションについての内容と感想を続けます。

Google Data API

Google CalendarやGoogle Healthなど、GoogleにストアしたデータをCRUDするためのAPIの総称がGoogle Data APIになります。

Google Data APIs - Google Code

AtomPubのプロトコルで実現されており、非常に簡単にデータを取り扱うことができます。

通常のRSSと違い、Googleの認証基盤を使うので、個人的なデータもhttpsで通信して安全に利用できます。

YouTubeやPicasaから動画・静止画データを取得したり、カレンダーやノートブックを使って便利なマッシュアップサイトを作ったりするのに便利そうでした。

Mashup Award 4th で使ってみよ。 

コードラボセッション「OpenSocial」

OpenSocialのハッカソン。

30名弱のエンジニアが集まって、OpenSocialのアプリを作るというもの。JavaScriptでお手軽に作れることもあってか、他のコードラボに比べて遅めの開催(14:00~)でした。

最初にGoogle社員のクリスさんから、OpenSocialについての説明(英語)が10分ほどあった後、ネタ出しブレストがあって、それぞれ自分が作りたいアプリに近いもので2~4名のグループを作りました。

僕のグループは、「友達リストにタグ付けしたり、タグで絞ってメッセージを送信できるようなアプリが作れたらいいねー」というグループ。このグループ分けの時点で15時だったので、実質アプリ構築の時間は2時間程度。

最初に自己紹介をしたのですが、なんとまずいことに、3人とも前日の夜にOpenSocialのチュートリアルやってみましたという状態。やりたいことに近いチュートリアルのコードを参考に作ってみましたが、いかんせん付け焼刃で、友達にタグをつけられるはずが、友達に「hoge」という固定のタグをつけるだけのアプリになってしまいました。むむー。

Googlerいわく、ハッカソンでアプリが完成することはあまりないとのことだったので、今後時間を見つけて続きを作っていけたらと思います。やっぱ事前の予習は超重要ですね。ちょっとガジェットが作れるもんだからっていい気になっていた自分のバカバカバカ。

部屋の後ろにコーヒーやパン、クッキーがあったのですが、プログラミングに熱中するあまり、それに気づきませんでした。もっと余裕をもってやらないとなー。

17:00からは、各チームの成果発表会。

友達リストでカバラ占いを作ったチームもあれば、ビデオチャット等サーバサイドアプリをがっつり使ったアプリを作ろうとしたチームもあり。個性があっておもしろかったです。GDDサポータの山下さんのチームは、Google App Engineのアプリと組み合わせて足跡アプリを作ってました。すごいっす。

少々不完全燃焼だったので、また機会があれば、こういうハッカソンに参加してみたいなと思いました。 

<関連エントリ>

2008年6月10日

Google Developer Day 2008 (写真編)

GDD08で、基調講演が始まる直前と、お昼ご飯、そして懇親会の様子の写真を撮ったので公開します。

※セッションの様子とか撮ってないです。肝心な部分が抜けていますね・・・。

 

桜木町駅から会場のパシフィコ横浜まで。

 

遠くに見えるバターナイフの形した建物が目的地。

 

まったく関係ないけど、金属製のくわがたが展示してあってかっこよかったです。BIG BUGS WORLDとして、展望のところに展示されているみたいでした。

 

駅から結構歩いてようやく到着。人の群れも、開発者っぽい雰囲気の人が多し。

 

GDD08のパネル。去年もこんなのがありました。

 

今年は、1Fと4F/5Fと会場が縦に分かれていました。

 

飲み物と簡単な食べ物はご自由に。

 

こんな風にGoogleカラーのボールが転がしてあって、自由に座って良い感じでした。

 

iGoogleをイメージした展示。去年より展示の小技がきいています。

 

iGoogleアーティストテーマのパンフレット。やっぱり去年よりオシャレ感が増してます。

 

基調講演の始まる前。画面では、昨年5月から今年5月までにリリースされたAPIのダイジェスト版VTRが。去年はリリースの年でしたね。

 

今年はお昼が出してもらえないと思っていたら、GDDのサポータにはスタッフ用のお弁当を出していただけました。ありがとうございました。

 

最後の懇親会会場。今年はこういうのやらないと行っていましたが、サポータからのヒアリングで、Googleの開発者達と話をする場所が欲しいという要望から、こういう企画も盛り込まれたんでしょうか。OpenSocialのクリスさんと話をして返ってきました。

 

帰り際、巨大Googleロゴにて記念撮影。持っているYouTubeトートバッグは、ガジェットコンテストの商品です。そして着ているTシャツは、昨年のGoogle Developer DayのTシャツです。

 

Google Developer Day 2008 レポート(速報版)

Google Developer Dayの会場に着きました。まとめは後でしますが、速報版としてリアルタイムに更新・追記していきます。

↓こっちでもつぶやきます。

http://twitter.com/chris4403

ちなみにこれは、サポータールームから書き込んでます。眺めが良いです。

基調講演

基調講演の前には昨年から1年間のAPIのリリースのダイジェストムービーが流れてました。改めて見ると、すごい量。昨年はリリースの年だったんですね。

GDD08の開催の挨拶はGoogle Japanの村上社長。

自社ポロシャツに綿パンで登壇するあたりがさすがGoogle。(褒め言葉です)

挨拶の後、駆け足でおりていく姿も素敵。

続いて、及川さんからのプレゼン。

去年はここで、GearsとかMappletとかのサプライズがあったんですが、今日は、OpenSocial / Android / Google App Engine のまとめ的な発表でした。

Googleが何を目指してこれらのAPIを提供しているのかの総括。

AndroidとGoogle App Engineについては、それぞれ別のエンジニアの方がデモをしていたのですが、Androidのデモはすごかった。

Mapを表示して、そこからGoogle Street Viewを表示。で、携帯の筐体を移動させると、その角度/方角を取得して、Street Viewの映像が動きます。これはかなりおもしろいアプリが作れそう。

コンテンツさえそろえば、○年前の今の地点からの風景とかを表示したりできるんじゃないかなぁ。夢が膨らむデモでした。

Google Maps API for Flashのデモは、GDDサポータであるあんどうさんのフライトシミュレータを、自作のオリジナルデバイスで操作するというのだったのですが、マップが表示されずデモは午後のセッションの中でということになりました。本番でのデモには悪魔が棲んでますね。

その他の内容は、また別途まとめエントリで書きます。

お昼ご飯

サポータには控え室を用意していただいていて、お弁当を食べながら他のサポータ達と意見交換しながらこのエントリを書いてます。

Google Data API

午後最初のセッションは、Google Data APIのセッション。

Google Apps やGoogle Calendar 等のアプリで蓄積されたデータを、APIを使ってCRUDできますというサービス内容の紹介でした。

使ったことがない人向けの内容ということで、それほど深くつっこんだ内容ではありませんでした。

要は、「こんなに便利で簡単だから、みんな使ってね」という内容。

確かに、他のAPIに比べてビジュアル的な要素がないAPIなので、目立たないんでしょうね。

ただ、普通に便利なAPIだと思うので、日本での開発者コミュニティのサポートで、もっともっと盛り上がっていくんじゃないでしょうか。

OpenSocial コードラボセッション

今からOpenSocialのコードラボセッションです。

最初に簡単な解説があって、作りたいもののブレストでいくつかリストアップ。挙げられた作りたいものの中から、自分の作りたい物に近いイメージの人たちが集まって、ハッカソンしました。

僕は、友人にタグ付けしたり、メッセージを送信したりするガジェットを作るチームに。3名チームでしたが、僕を含め全員がOpenSocial一夜漬けということもあり、結構基本的なところでつまづきを繰り返してしまいました。

が、最終的に、「hoge」タグをつけるガジェットまでこぎつけました。

なんとか形になって良かった。

その後、チーム毎に作った物の発表会。カバラ占いや、ビデオチャット、フィードリーダ、位置情報や足跡アプリなどなど。すごいなぁ。

というわけで、今から懇親会っぽいやつです。

2008年6月 9日

明日はいよいよGoogle Developer Day 2008 Japan !!!

明日はいよいよGDD08です。

基調講演でどんなことが発表されるのかなぁ。

OpenSocialの予習はそこそこできたので、コードラボが楽しみですね。

当日、Google Docsか、Twitterで色々と実況っぽいことができたらなぁと考えていますが、電源・ネットワーク事情次第では断念するかも。

お昼ごはんをどうしようかなぁ。基調講演の後の1時間で、近場で食べるか、晴れていたらテイクアウトして外で食べるのもありかなぁ。

会場で僕を見かけた方は話しかけてやってください。基本、寂しがり屋なので。

2008年6月 8日

Googleの映画情報検索って便利ですね

5月の中頃、Google検索に映画情報の検索が加わりました。

Google Japan Blog: Google ウェブ検索で映画検索が可能になりました。

検索語が映画のタイトルだと、検索結果のTOPにその映画の情報へのリンクが表示されます。

「ザ・マジックアワー」で検索したらこんな感じ↓。(地域を池袋に設定しました)

映画のレビュー情報に加えて、上映映画館と、上映時刻が表示されるのが超便利。

これで、映画の上映時間、劇場の場所、映画の評判をさっくりと知ることができます。

英語版には前からあった機能ですが、ようやく日本も対応してくれて良かったです。

2008年6月 6日

Googleの新しいfavicon

気づかれた方も多いと思いますが、先日、Googleのfaviconが新しくなりました。

以前の大文字Gのfaviconから、今度は小文字のgのfaviconへ。色も紫になり、結構大胆なイメージチェンジだと思いました。

Googleの公式ブログでは、このfavicon変更の経緯や、モバイル版、iPhone版のfaviconが公開されています。

Official Google Blog: One Fish, Two Fish, Red Fish, Blue Fish

また、これ以外に、デザイン制作の過程で出来上がったfaviconも公開されています。

結構色んなパターンを作ってるんですね。

faviconの変更はこれで終わりというわけではなく、今後ユーザのフィードバックを得ながら、改善できるものは改善していくみたいです。

↓faviconのアイデアがある人は、作成したファイルを下記ページからフィードバックとして送信できるみたいです。

Submit your Google favicon idea

2008年6月 5日

Google Developer Day 2008 Japan での発表を予測してみる

いよいよ来週の火曜日に開催がせまった「Google Developer Day 2008 Japan」。

先日のGoogle I/Oで、ブラウザ版のGoogle Earth等が発表され、前回のGDDのMappletのように、世界のGoogleに関係するようなサプライズはないんじゃないかと勝手に想像しています。

で、あるとしたら、mixiのオープンソーシャルAPIの公開が発表されるんじゃないかなぁ。

これまた、つい一昨日発表があった、MASHUP AWARD 4thのAPI提供企業の中に、mixiとGoogleの名前が挙がっていますが、具体的なAPIについてはまだページがありません。

mixi自体まだAPIを提供していないので、もし発表があるとしたら、これなんじゃないかと思っている次第です。

これが実現したら、コードラボセッションのときに、mixiのOpenSocialアプリを作れて、かなり楽しげなんだけどなぁ。

2008年6月 4日

Ajaxアプリでアンカーを使ってURLを一意にするテクニック

Amazon ベストセラー ビューア」の技術解説第2弾です。1回目はこちら

画面を部分的に書き換えることで、いちいち画面全体が再描画されるのを待たずに利用できるAjaxアプリケーションのデメリットとして、URLの管理が難しい、という点が挙げられます。

URLという点を何も気にせずにAjaxアプリケーションを作ってしまうと、ブラウザのアドレス欄に表示されているURLをコピー(あるいはブックマーク)して、別のブラウザ(ウィンドウ)でそのアドレスを表示したとき、表示されている内容が大きく異なってしまうということがあります。

たとえば、Google Maps で、地図をぐりぐりしながらお店を検索した後、「あ、ここだここだ」とついうっかりアドレス欄のURLをコピーしてしまい、後で、自分がまったく意図しなかった地域のURLをコピーしてしまったという経験はないでしょうか。

Google Mapsでは、この問題を、アプリ中に「このページのリンク」というリンクを配置し、このリンクを押下すると、現在表示している地図の状態が表示されるURLを取得できる、という仕組みにしています。

ここで生成されるURLは、↓こんな感じでGETパラメータに緯度経度、拡大率が指定されています。

http://maps.google.co.jp/?ie=UTF8&ll=35.670127,139.76532&spn=0.105707,0.125313&z=13

このURLをJavaScriptでdocument.location.hrefに代入すれば、ブラウザのアドレス欄が書き換わりますが、当然、ブラウザはURLが変わったと判断してページ全体を読み込んでしまいます。

そこで、ページのリロードは行わずに、URL上に情報を付加するために、#(アンカー)を利用します。

Amazon ベストセラー ビューア」では、#を使って、カテゴリ(大)、カテゴリ(小)、表示モードの情報を保持しています。

↓以下が、「本」>「すべて」を表示モード10×10で表示するURLです。

http://www.chrisryu.com/amazon_best_sellers/jp/#books/all/1/

#の後ろが、カテゴリ(大)、/(スラッシュ)で区切って、カテゴリ(小)、表示モードが続きます。

↓以下が、「DVD」>「アイドル」を表示モード5×5で表示するURLです(微エロ注意)。

http://www.chrisryu.com/amazon_best_sellers/jp/#dvd/562030/2/

ページ表示時に、#の値を取得して、表示すべきカテゴリ(大)(小)と表示モードをURLから取り出しています。

var data = window.location.hash.split('/');

このテクニックはGoogle Readerでも用いられています。

Google Readerのページを見ると、左のカテゴリを変更したりすると、URLの値が書き換わりますが、よく見ると#sream以下の値だけが書き換わっています。#streamの後ろに/があるので最初気がつきませんでした(汗。

この方法にも当然いくつか問題点(デメリット)がありますが、一番のデメリットは、「ページが縦方向にスクロールするページでは、URLのアンカー情報を書き換えた時点でページトップにスクロールしてしまう」ということです。

Google Readerで利用されていると書きましたが、Google Readerのページでは、画面デザインがページ全体が移動する縦方向のスクロールバーが表示されない(個々の要素内では縦スクロールが発生します)ように作られているので問題なく動作しています。

Amazon ベストセラー ビューア」のような閲覧系のAjaxアプリを作る場合は(例えばPhotoViewerなど)、このような方法で、現在見ているページをURL化しておくと良いかもしれません。

2008年6月 3日

MASHUP AWARD 4th 開催!

先日のJUIでさらっと開催がほのめかされていましたが、本日公式サイトがオープンしたようです。

MASHUP AWARD 4th / MA4

サイトにFlashとか使っていてかなりかっこいい感じ。

協力企業・団体には、Team Labやkizasi.jpなどの常連に加え、今回はGoogle やAdobe、CyberAgent、mixiと、ちょっと驚きのラインナップになってますね。いや、すごい。

利用できるAPIページは、参照できたりできなかったりで、まだすべてのAPIをチェックすることはできませんが、個人的には、SUNTORYのBarNaviのAPIがおもしろげだと思ってます。ページを見ると、MASHUP AWARDには珍しく、副賞を事前に発表しています。

シングルモルト・ウィスキーの10本詰め合わせってことで、ウィスキー好きにはたまらないですね。てか、山崎もあるよ。

Googleが提供するAPIが気になるところですが、この辺はもしかして、Google Developer Day 2008とかで発表とかあるのかもしれませんね。

で、GDD08のカウントダウンがジェットをさくっと改造して、MA4th用のカウントダウンガジェット作りました。

へぼへぼなのでそのうち改造すると思いますが、参加される方はご利用ください。

さて、どんなアプリを作ろうかなー。

2008年6月 2日

jQueryでダミーフォーカスの実装

昨日公開した「Amazon ベストセラー ビューア」では、左側の商品のサムネイルで、オレンジ色のカーソルを実装しています。キーボードの、hで左に移動、lで右に移動、jで下に移動、kで上に移動します。

今回は、こうしたダミーフォーカスの実装方法を解説します。

とっても、やり方は簡単で、フォーカスを表現するスタイルシートのクラスを定義して、そのクラスを付け外しするだけです。

Amazon ベストセラー ビューア」では、フォーカスを定義するスタイルシートのクラスとして、以下のようなクラスを定義しています。

#feed img{
    padding:3px;
}
#feed img.selected {
    background-color:#FF8C00;
}

id="feed"のエレメント(サイトではdiv)の下にあるimgは、すべてpadding:3pxとし、selectedというクラスが指定されているimgについては、背景がオレンジ色になります。これで、画像の周りにオレンジ色の枠ができ、フォーカスを表現しています。

以下に、上記スタイルを適用したimgを並べてみます。

selectedクラスが指定された2つ目の画像の周りがオレンジ色になっています。

さて、サイトでは、キーボード操作でフォーカスが移動できるようにしています。

これには、先日紹介したjQueryのキーバインドのプラグイン「js-hotkeys」を使っています。

このプラグインでは、キーに対して、動作させたい関数を以下のように割り付けます。

$.hotkeys.add('Ctrl+c', function(){ alert('copy anyone?');});

では、hキーを押すとフォーカスが左に移動するという機能を実装してみます。

「フォーカスが左に移動する」というのは、以下のように書くことができます。

$('#focus_test_000 img.selected').removeClass('selected')
.prev().addClass('selected');

id="focus_test_000"以下のselectedというクラスが指定されたimgタグから、selectedというクラスをremoveして、そのimg属性の前にある要素にselectedクラスを付加しています。

これをhキーに割り付けるので、以下のようなコードになります。

$.hotkeys.add('h',function(){
    $('#focus_test_000 img.selected').removeClass('selected')
    .prev().addClass('selected');
});

では、動きを見てみましょう。以下に、id="focus_test_000"を指定したpタグの中にimg属性を並べて、上記関数を実行してあります。

hキーを押下すると、オレンジ色のフォーカスが左へ移動していきます。

一番左側にある画像にフォーカスがあたっているときに、hキーを押すと、フォーカスが消えてしまいます。

ということで、先ほどの関数に「一番左側にフォーカスがあるときは、最も右側の(最後の)要素にselectedクラスを付加する」という処理を加えてやればOKです。

さて、フォーカスが移動する要素が少ない場合は、このような実装方法で問題ないかと思いますが、要素が多くなってくると動作が遅くなる可能性があります。

というのも、$('#hoge img.selected') と書いた場合、jqueryの内部では、getElementsByTagNamesでid="hoge"要素以下のimgタグを全て取得し、ループを回してclass名のチェックを行っているからです。

キーボード操作のように、連続して関数が実行される場合は、ライブラリ内部で実行される処理もなるべくコンパクトになるよう考えた方が良いです。

で、「Amazon ベストセラー ビューア」では、左側のサムネイル(imgタグが100個)のフォーカス移動については、selectedIdというグローバル変数でフォーカスが当たっている要素のid属性を管理しています。

つまり、以下のように書くことで、内部ではgetElementByIdが2回実行され、先ほどよりも早く処理することができます。

$.hotkeys.add('h',function(){
    $('#img_'+selectedId).removeClass('selected');
    selectedId -= 1;
    $('#img_'+selectedId).addClass('selected');
});

jQueryの魅力であるメソッドチェーン風の書き方を崩す形になりますが、こちらの方が快適に動作します。

2008年6月 1日

「Amazon ベストセラー ビューア」公開

Amazon ベストセラー ビューア」を作ってみました。

Amazonの各カテゴリのベストセラーランキングRSSを拾ってきて、表示します。

左側がサムネイル、右側が左でオレンジ色のカーソルがフォーカスされているアイテムの詳細です。

マウスでカーソルを移動し、クリックで下のエリアに一次保存(カートには追加されません)、ダブルクリックでAmazonの商品ページが開きます。

一般の方向けにマウスでの操作を実装しましたが、実はキーボードで操作できるというのが、このビューアのウリになります。

ページに書いていますが、viのように、h,j,k,lでカーソル移動、Enter,v で商品ページポップアップ、s でクリップ、c , x でカテゴリ切り替え、という操作になります。

最初戸惑うかもしれませんが、慣れてくると結構楽しいです。

初期表示が 10 x 10 の100個表示モードになっていますが、キーボードの2(注:テンキーは不可)で 5 x 5の表示モードに切り替わります。

クリップした商品も、i,oで青色のカーソル移動、uで青色で選択されている商品のページを表示する、というインターフェースになります。

気に入った方が多ければ、今後ベストセラーの表示ではなく、商品の検索やカートの追加、クリップしたアイテムの保存などの機能追加を検討していこうかと思います。

技術要素

このページには以下の技術を用いています。

この辺の要素をどういう風に使っているのかを、今後解説していこうかと思ってます(例えば、jQuery Hotkeys Pluginでフォーカス移動をどういう風に実装したか、とか)。

あと、実は英語版も同時に作っていて、javascriptファイルは共通で使えるようにしているので、その辺の実装についても書いていこうかと。まあ、しょせんJavaScriptなので、ソース見ろって話かもしれませんが。