CALTA Project

なんでも今日は、東京で皆既月食が見られるとか・・・。とっても楽しみです。

そして、明日から２日間、WEB 2.0 EXPO Tokyoに行ってきます。

「バスでお出かけMAP」もちょこっとですがここに登場します（私は会場で聴講者として見守るだけですが）。MAの輪のみなさんも何名か登場しますので応援してきます。

ほかにもいくつかイベントがありバタバタしておりますが、帰ってきたら、いろいろと結果をレポートしたいと思います。

written by k-matsu
この記事へのトラックバックURL

職業プログラマでもあるし、マッシュアップエンジニアでもあるので、それほど、自分自身がデジタルデバイドを感じたことはないのですが、こんなものをふと、スーパーで見つけて、物珍しさもあって買ってみました。

カップ焼きそばは、お湯を注いで数分間、麺を戻して、湯切りするのが一般的ですが、これは、水を入れて電子レンジで加熱して麺を戻すと同時にお湯を蒸発させてしまい、湯切りが不要という商品です。

パッケージを開けると、説明書きがあり、水の入れ方や、あふれた水のこぼし方、加熱時間などが書いてあります。（こちらのサイトでレビューされてましたので、こちらもご覧ください）。

ところが、説明書を読みながら、調理に挑んだものの、これが思った以上に難しい。思うに、容器の形状もそれように設計されているので、未知の物体、すべてが初めての体験なんです。

水の量の加減も微妙な感じで、結局、多く入れすぎたかも、と思い、何回かこぼしたりして、電子レンジの加熱時間もうちのレンジのワット数だったら何分かは書いてなくて、計算したり・・。

そんなこんなで、レンジの加熱が終わって見てみると、まだお湯が蒸発しきっていなくて、結局湯きりするはめに・・（でも、おいしかったです）。

この商品が「NEXT GENARATION」というキーワードを商品名に入れているので、次世代の商品というコンセプトなのでしょう。

もともと新しいもの大好き人間なので、いつものように、次世代の商品に挑んではみたものの、見事に敗北し、こうして、年とるごとに、新しい技術についていけなくなるのでは、と心配になったりもして、ある意味デバイドを感じ寂しくなった深夜の出来事でした。

written by k-matsu
この記事へのトラックバックURL

Javascriptのデバッグって、おそらく多くの方が、FirefoxのFirebugアドオンを使って行っていると思います。このデバッガは強力ですからね。で、デバッグが終わって、Firefoxで動作確認をしたものをIEで実行してみると、動かなかったってケースって多くないですか？
有名なケースでは、これ。

1
2
3
4
5

var  data ={
    item1 : "string1",
    item2 : "string2",
    item3 : "string3",
};

「”string3″」の後の「,」が元凶です。最後の「,」があると、IEでは動きません。この「,」を入れてしまったばっかりに、Firefoxではちゃんと動いていたものがまったく動かなくなってしまって、はまったという人は、ものすごく多いと思います。

ほかにも、いくつかの事例があると思いますが、ちょっとレアなものを発見したのでご紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
//< ![CDATA[
var  data ={
    item1 : "string1",
    item2 : "string2",
    item3 : "string3"
};
 
for  ( item in data ) {
    document.write ( data[item] + '＜br/＞' );
};
//]]>;
</script>

これってIEだと動きません。 もちろん、「”string3″」の後ろに「,」はありません。
for ～ in構文 は、オブジェクトのプロパティ名を列挙します。つまり、data.item1, data.item2, data.item3を順に出力することを意味してます。したがって、”string1″, “string2″, “string3″ という文字列が出力されます。

でも、IEだと動きません。オブジェクトエラーとなります。Firefox、Operaでは問題なく動くのですが。

こうしてみましょうか？

1
2
3

for  ( itm in data ) {
    document.write ( data[itm]　+ '＜br/＞' );
};

itemをitmに変えただけです。これは動きました。
# itemをitmに変えようという発想にいたるまで、かなり時間を要しました。

では、これはどうでしょう？

1
2
3
4

var item;
for  ( item in data ) {
    document.write ( data[item]　+ '＜br/＞' );
};

itemという変数を局所化してみました。
・・・動きます。

つまり、IEでは、大域変数itemが示すオブジェクトが存在するということにほかなりません。大域変数itemにオブジェクトのプロパティ名をセットしようとすると、オブジェクトエラーになるのですから。

では、このitemというオブジェクトの中身は何なのでしょう？さきほどの、for ～ in構文を使って、itemのプロパティを列挙してみました。

1
2
3

for  ( property in item ) {
    document.write( property + ':' + item[propery] + '＜br/＞' );
};

当然ですが、このコードはIEのみでしか動きません。
出力した結果をちょっと整形したら、itemはこのようなオブジェクトであることがわかります。

注）DontEnum 属性を持つプロパティはfor ～in構文では列挙できないため（詳しい解説）、これがitemの全貌ではないかもしれません。

このような事例にであうケースはそうそうないと思いますが、itemという変数を使用する際は注意した方がよいですね。

written by k-matsu
この記事へのトラックバックURL

昨日、大垣市のソフトピアジャパン（バスでお出かけ情報）で開催されたスイートバレー推進協議会「Web2.0の現状と動向セミナー」にパネリストとして出演させていただきました。
大垣はこれまで行ったことはなかったのですが、松尾芭蕉の奥の細道の終着点とのこと（←そうそう、私、日本文学専攻で卒業論文は芭蕉について書いたんでしたっけ・・）。

MAチーム（？）からは、リクルートの川崎さん、ONGMAPのyukiさんと私が登壇。その模様を客席からけひんさんがdoodleしているというナイス連携。

ディスカッションでご一緒させていただいたSFCの熊坂先生、牧先生からもバスでお出かけＭＡＰに対する貴重なご意見をいただきました。ありがとうございました。

このような講演に出演させていただくのは初めてだったのですが、いろいろと刺激になりました。
講演後のスイートバレー推進協議会交流会では、地元の企業の方ともいろいろとお話をさせていただき、その中で今後のCALTA Projectの活動についてヒントのようなものをいただいたような気がします。今後に活かせたらと思います。
ソフトピアジャパンの皆様、また関係者の皆様、貴重な場を提供いただきありがとうございました。

川崎さんが言っていましたが、岐阜からのMA受賞がまだないとのこと。ぜひぜひ、次回のAwardでは岐阜からの受賞作品の輩出を期待しております。

その後、大垣駅で、yukiさん、けひんさんと２次会。
まだまだ話足りなかったんですが、最終の新幹線の時間の関係で今回は軽めに。
次は、Web2.0 EXPOでお会いしましょう。

とっても濃い一日でした。

written by k-matsu
この記事へのトラックバックURL

明日は、岐阜入りです。大垣駅についたら駅前のバス停の写真を撮ってdoodleして・・・と。大垣駅からバスで10分。バスの路線名は「ソフトピア線」。ソフトピアジャパン下車。

written by k-matsu
この記事へのトラックバックURL

バス停の時刻表を写真に撮って投稿されたdoodleを発見したので、バスでお出かけMAPのみんなのスポットに登録しました。

http://calta.jp/bybus/spot/6477-17.html

こういった使い方は予想していませんでした。なるほど、これはとっても便利です。

written by k-matsu
この記事へのトラックバックURL

doodleデビューしてから、doodleの愛さんから毎週メルマガが届くようになりました。doodle開発記のけひんさんのおっしゃってる通り、とっても癒されます（てっきり、けひんさんが書いていると思ってました^^;)

さて、 「doodle meets バスでお出かけMAP & ONGMAP !」でご紹介いただきましたように、11月1日に、岐阜の大垣市で開催されるスイートバレー推進協議会「Ｗｅｂ２．０の現状と動向セミナー」にパネリストとして出演させていただくことになりました。このセミナーは、リクルートの川崎さんとONGMAPのyukiさんも出演されます。

マッシュアップの開発事例と新しいサービスについての発展性というテーマで、ディスカッションさせていただく予定ですが、バスでお出かけMAPの紹介と、今回のMAの輪の成果についてもお話させていただく予定です。

もうひとつ、11月15～16日Web2.0EXPOが開催されますが、16日のセッションT4セッションでdoodle開発記のけひんさんが、「日本発！WebAPI」をテーマに講演されます。そこで、「doodle meets バスでお出かけMAP & ONGMAP !」についてプレゼンされる予定です。バスでお出かけMAPもWeb2.0 EXPOという大舞台に登場でき、感慨無量です！

バスでお出かけMAPはWEB2.0EXPO入りが決まりましたが、肝心の私がWeb2.0 EXPO入りできるか・・・鋭意調整中です(人´∀｀)。
また、このWeb2.0EXPOでは、S21セッションでONGMAPのyukiさんやSunのnabejunさん、バスでお出かけMAPでマッシュアップさせていただいたCARWINGSの日産自動車さん、S7セッションではメディアテクノロジーラボさんなど、MAの輪のみなさんが登場します。参加できる方は、ぜひ足を運んでいただければと思います。

written by k-matsu
この記事へのトラックバックURL

ちょっと書き留めておきます。

その１.　IEの場合、DOMを使って動的にTBLタグを使う場合、TBODYタグを作ってあげないと表示されない。

1
2
3
4
5
6

var tbl = document.createElement("table");
var tr = document.createElement("tr");
var td= document.createElement("td");
td.appendChild(document.createTextNode("バスでお出かけ楽しいな"));
tr.appendChild(td);
tbl.appendChild(td);

↓

1
2
3
4
5
6
7
8

var tbl = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td= document.createElement("td");
td.appendChild(document.createTextNode("バスでお出かけ楽しいな"));
tr.appendChild(td);
tbody.appendChild(tr);
tbl.appendChild(tbody);

その２.　IEの場合、colspanをsetAttibuteで設定する場合、colspanでなくcolSpanとしないとダメ(Sは大文字) 。

1

td.setAttribute("colspan","2");

↓

1

td.setAttribute("colSpan","2");

その３.　Iframeのフレームの枠線を消す場合は、frameborderを0にすればよいが、IEの場合は、IframeをDOM で動的に作った場合、frameBorderにしないとダメ（Bは大文字)。

1
2
3

var  iframe = document.createElement("iframe");
iframe.src="http://example.com/hoge.html";
iframe.frameborder = 0;

↓

1
2
3

var  iframe = document.createElement("iframe");
iframe.src="http://example.com/hoge.html";
iframe.frameBorder = 0;

3つ目のやつは、ネット上からリソースが見つけられずはまった。

written by k-matsu
この記事へのトラックバックURL

doodle開発記のこちらのエントリにあるとおり、バスでお出かけMAPのdoodleのマッシュアップを強化しました。

バスでお出かけMAPの 右側のサイドバーに「落書き」という検索エリアがあります。

表示を検索したいエリアに地図を移動して、落書きの種類を選択してから「検索ボタン」を押します。

検索ボタンを押すと、地図で表示しているエリアにあるdoodleの情報を検索して表示します。

これらの情報は、doodleのユーザが実際にその場所に行って、GPSケータイで投稿したものです。

落書きらしく、黒板っぽいデザインにしてみました。

MAPには、こんな感じでアイコンがプロットされます。一応、駅なんかにある掲示板（黒板）をイメージして、doodleの「d」の字をあしらってみました。

そして、[掲示板]と書かれたリンクをクリックすると、その落書きの掲示板が表示されます。

これは、doodleの掲示板と同じものですので、ここからこの掲示板に対して書き込みや写真や動画などの投稿ができてしまいます。

さらに、もうひとひねり。「この落書きをみんなのスポットにする」という機能があります。これはどういうことかというと、バスでお出かけMAPには「みんなのスポット」というスポット情報を登録できて、そのスポットを表示すると、そこにバスでお出かけするための情報を表示する仕組みがあります。

「みんなのスポット」として登録された情報は、MAPをドラッグしたり移動したりすると、 検索ボタンなどを押さなくても、自動的にMAPにアイコンがプロットされます。つまり、この機能を使って、「みんなのスポット」にしてあげたdoodleの情報は、「みんなのスポット」と同じようにMAPを移動するだけでプロットされるようになり、バスでお出かけするための情報もあわせて表示されるわけです。

みんなのスポット化されたdoodle情報もバスでお出かけMAPでの固定リンクが割り当てられます。http://calta.jp/bybus/spot/6459-15.html

doodleのユーザが書き込んだスポットへバスでお出かけが可能になるだけでなく、バス停やバス停周辺の写真などを撮って投稿してもらえれば、バス停情報にも広がりが出てきます。いろいろな応用が可能なマッシュアップになりました。

written by k-matsu
この記事へのトラックバックURL

Mash up Award 3rd でチャンプに輝いた、ONGMAPのコンセプトです。

• ONGMAP：　　　「検索したい場所が決まっている」→「選択」→「地図上に表示」
• Google Map ：　「検索したいものが決まっている」→「検索」→「地図上に表示」

思えば、Mash up Award 2ndでCALTA Projectは21のAPIを使いまくった異色作「Mash Max」を発表し、API詰め込み過ぎのサービスとして破綻寸前でギリギリセーフ、特別賞をいただきました。

実は、バスでお出かけMAPは2006年の7月にサービスを開始してるんですね。しかし、Google Mapがあってバス停が登録できて、という単純なサービスでした。もともとCALTA Projectの発足のきっかけは、バスの情報を充実させたサイトを作ろうということから始まったので、このサービスをよりよいものにしたいという思いがありました。

そして、2ndの表彰式の帰りの電車の中、次はバスでお出かけMAPを本格的なマッシュアップサイトとして完成させて、3rdに挑むことが決まりました。

そして、「次回はAPIの数では勝負しません！マッシュアップの王道ともいえる作品で勝負します」と宣言。

でも。。。。そんなことを言いながらも、しっかりとExcelでAPIリストを作成し、いくつマッシュアップが完了したかをチェックしていたのです。「APIの数にこだわらず、王道を貫いた結果、結局、APIの数がMashMaxを超えちゃいました～」というコメントを話せる日を想像しながら・・・ 。やらしいですね～^^;

結果、バスでお出かけMAPは、現在18のAPIをマッシュアップしました。21まで後3つ届きませんでした・・・。

話を戻しましょう。ONGMAPです。ONGMAPは、バスでお出かけMAPをマッシュアップしてくれています。

バスでお出かけMAPは、今回近隣のバス停情報をAPIでも提供しています。API公開とともに、MashupediaさんでAPIが紹介され、それからまもなく、ONGMAPのyukiさんからAPIを使わせてもらいましたのメールを受け取りました。APIを公開したものの、誰も注目してもらえなかったらさびしいですからね。そういった意味では、MA3の参加企業であるMashupediaさんと最優秀賞を受賞したONGMAPがバスでお出かけ APIに興味を持っていただけたのはとてもうれしかったです。

まぁ、そういう経緯もあって、ONGMAPは最優秀賞に輝く前から、いじらさせていただいたわけです。見て思ったのは、APIの数が云々の話じゃないなぁと。少なくともCALTA Projectとしては、Mash Maxで、マッシュアップしまくったわけですが、そういう次元をはるかに超えちゃってる。

Mash Maxを作った経験から言うと、詰め込んで詰め込んで、でもサービスとして成り立っている、というさじ加減ってとっても難しいんです。それと開発にかけるモチベーションを維持し続けないと、このようなサービスは作れないですね。それはきっとyukiさんの緯度経度情報に対する情熱とか執念とか、怨念とか・・・。きっと、このようなものをベンダーに開発させたら、「その機能はほんとに必要か？」「その機能作るのに工数どんだけかかるんだ」とかなっちゃって、絶対作れっこない。

CALTA Projectのサービスだって、すっごくつまんなくて意味がないところに、変なこだわりを持って時間かけて作ってたりしてます。

みんなの水遊びMAPでは、Ajaxで通信してるときには、上の絵の砂浜の所にカニが出てくるとか・・。ストリートミュージシャンのためのStreamer’s Map というサービスでは、地図の初期表示が、伊勢佐木町の松坂屋前だったりする・・・。

そういった意味でも、Mash up Awardに集まる作品は、デベロッパーたちのこだわりや情熱があるからこそ、輝いているんだなぁと思います。

さて、最初に話を戻すと、ONGMAPのコンセプトは、「検索したい場所が決まっている場面での利用」とあります。これは、バスでお出かけMAPも同じ考え方です。 検索したい場所に地図を移動して、そこからリアルな何かを見つけ出してもらう。同じ地図のサービスを開発している輪の仲間として、共感、です。

written by k-matsu
この記事へのトラックバックURL