Home > Archives > 2011-06

2011-06

東京てら子Vol.16 での発表内容を掻い摘んで


6/25日(土)に開催された東京てら子Vol.16 『ドキッ、javaScriptだらけの240分』で発表した内容を、掻い摘んで…

GPSロガーを買ったよ!

僕が買ったGPSロガーは、igotU GT-800というヤツです。

使い勝手などは、また別の機会にエントリすることに…

付属品として、記録したログデータをGoogleMap上にサクッと表示してくれるソフトが付いていたんですが、今回のてら子のテーマがJavaScriptだったので、ちょっと作ってみようかと…

Google先生のお世話になる

付属のソフトを使うと、GPSログが、gpxとcsvのファイル形式で書き出すことが可能です。

で、gpxを扱うにはどうしたらいいか、まずはGoogle先生のお世話になりました。

僕が見た記事は、gpxをxmlに変換して、それをJSで読み込むというものでした。

XMLを読み込んでみる

記事の通り、xmlに変換し、それをjqueryで読み込んでみました。

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "20110619.xml",
        dataType: "xml",
        success: LoadXml
    });
});

function LoadXml(xml) {

    $(xml).find("trkpt").each(function () {
	//latのみ表示させる
	alert($(this).attr("lat"));
    });
}

こんな感じにすると、データを取得出来ました。

gpxの中を見てみると、データの形式はXMLで書かれているので、わざわざXMLに変換しなくても扱えるんじゃない? と思ったので、やってみることに…

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "20110619.gpx",
        dataType: "xml",
        (略)

読み込むファイルを変えてあげるだけで、あとは問題なさそうでした。

データを間引きする

さて、GoogleMapで表示してみようかと思ったんですが、gpxファイルを見てみると、かなりボリュームがあります。

試しに表示してみる感じなので、データを間引きしちゃえと…

僕が使ったのは、『轍(わだち)』というフリーのソフトです。

それを使って、2700→20までデータをガッツリ間引きしちゃいました。

GoogleMapで表示してみる

当初は外部gpxを読み込んで、それを使ってほげほげする…ことを予定していたんですが、実際やってみると、(僕のやり方が悪いからだと思いますが)何だか読み込みに時間が掛かったので、今回はベタな手法(一つ一つ値を登録)を使いました。

あとチャートの作成には、Google Visualization APIを使っています。

Visualization APIは、緯度と経度を登録してあげると、そこから高度(elevation)を自動算出してくれるという、何とも便利な機能が!

画面下のチャートは、クリックした箇所の高度を別ウィンドウで表示してくれるのですが、小数点以下は切り捨てちゃっています。

あとはGoogleMapとStreetViewを組み合わせて、見た目に変化をという感じでしょうか…

データは僕のノートPCでいい感じに表示されるようにしてあるので、そこらあたりはご了承を。

Mt.Flashに行ってきました!


かなり日にちが経過してしまいましたが、6/19(日)にMt.Flashに行ってきました。

Mt.Flashって何?
都内近郊の山に登ってマイナスイオンを浴び、帰りに温泉入って、風呂上がりには(牛乳ではなく)ビールを飲んで、まったりするイベント

第一回目は、洞窟探検&沢登りでした。

今回デジカメを持って行くのを忘れたので、@kappaLabさんが撮影された写真を使わせて頂いています。

いざ、尾須沢鍾乳洞へ!

東京に住んで十数年経つんですが、西武池袋線を利用したのは、今回が初めてだったり…

池袋駅から電車に揺られること、約50分、飯能駅に到着。

そこからさらにバスに揺られること、約40分。ようやく名栗に着きました。

そこから尾須沢鍾乳洞の入り口まで徒歩で移動し、登山開始です!

歩き始めて暫くしてから、GPSロガーを持って行きながら、電源を入れ忘れていることに途中で気がつくなど…

尾須沢鍾乳洞までの風景・その1

Photo by @kappaLabさん

鍾乳洞の外では、クライミングをしている人がいました。

尾須沢鍾乳洞の外でクライミング

Photo by @kappaLabさん

棒ノ嶺

洞窟の探検を終えると、棒ノ嶺に移動。

棒ノ嶺・その1

Photo by @kappaLabさん

TVCMにでも出てきそうな景色を堪能しながらの、沢登りでした。

滝は3つ見れたのですが、時間的に山頂まで行くのはちょっと無理そうだったので、途中で引き返すことに…

下山後は、近くの温泉に入り、風呂上がり後は、もちろんビールで乾杯!

本物の山ガールや蛇や熊出没注意の看板を見たり、大満足の一日でした!

Elevation Profile
20110619_GPSLogData

東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』


東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』

東京てら子Vol.16を、6月25日(土)に開催します。

今回のテーマは『JavaScript』です。

スマートフォンなどの開発、便利なJavaScriptライブラリ、JavaScriptでこんなの作ってみました! もちろんJavaScriptとActionScriptを絡めた発表も、ウェルカム。

今回はいつもより人数が多くなりそうなので、全員発表ではありません

「てら子は敷居が高い…」と言われているみたいなんですが、「仕事で必要になって、自分なりに勉強してみた事」とか「ここが分からないので、教えて!」とか「暇だったから、こんなことしてみた!」とか、そういったゆる~い発表でもOKです!

勇気を持って一歩を踏み出しましょう!

今回は株式会社サイバーエージェント様のご厚意により、セミナールームを使わせて頂けることになりました。

サイバーエージェント様、ありがとうございます!

という訳で、開催場所がいつもと異なりますので、参加される皆様はご注意ください!

詳細&参加表明はこちらからどうぞ!

Home > Archives > 2011-06

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top