2013/06/25

ガーミンAPIを動かしてみた

※今日の話はランにまったく関係ないです。興味がない方にはちんぷんかんぷんなはずなので、飛ばしてください・・・。


月間走行距離を表示するブログガジェット(ウィジェット)を画面右下に入れてみました。
(追記:現在は外しています)

 

こういうウィジェットって日本ではJogNote、英語圏ではdailymileをよく見る気がしますが、それぐらいしかないんですかね?dailymileだとガーミンのデータをそのまま吸い出せて入力が手間いらずなので、とりあえずdailymileを入れてみました。(他にいいのあったら教えて下さい。)

dailymileはサイドバーに入れるとデザインが崩れるのが難点です。それにアメリカでは走行距離は普通週単位で管理するので、月間じゃなくて週間走行距離表示だったりもします。あとちょっとUIが味気ないので、FBの「フィットネス」の棒グラフとかJogNoteのカレンダーみたいなのも選べるようにしてほしい・・・。

そんなフィードバックをdailymile開発チームに投げてみたところ、TODOリストに入れてみるよ、とフレンドリーなメールが来ました。実装されるといいな...。


ここから先はプログラミングな話になってしまいますが、dailymileがどうやってガーミンデータを読み込んでいるかというと、どうやらガーミンはAPIを公開していて、ブラウザ上でJavaScriptによるAPIを叩くことでGPS端末からデータを読めるようにしているみたいです。
Garmin Communicator Plugin API
http://developer.garmin.com/web-device/garmin-communicator-plugin
上のページにAPIのチュートリアルがあったので、軽くサンプルコードを動かしてみました。ガーミン端末がパソコンにつながっている状態で下の「ガーミンプラグインAPIデモ開始」ボタンをクリックすると、ガーミン内の履歴を読み込み、日付ごとにプルダウンリストに表示します。ほんとそれだけで、なんの役にも立たないですが、ガーミン愛好家プログラマーで試してみたい方はどうぞ。
※読んだデータはどこにも保存したりされないので安心してください



<input type="button" value="ガーミンプラグインAPIデモ開始" onclick="demo()">
<div id="garminDisplay" style="display:none"></div>

<style type="text/css" media="all">@import "http://developer.garmin.com/web/communicator-api/garmin/device/style/communicator.css";</style>
<script type="text/javascript" src="http://developer.garmin.com/web/communicator-api/prototype/prototype.js"></script>
<script type="text/javascript" src="http://developer.garmin.com/web/communicator-api/garmin/device/GarminDeviceDisplay.js"></script>
<script type="text/javascript">
function demo() {
  document.getElementById('garminDisplay').style.display = '';
  var display = new Garmin.DeviceDisplay("garminDisplay", {
    pathKeyPairsArray: ["http://www.sc-runner.com","21a8cac2f9deb96a8e7599cb8e756820"],
    autoFindDevices: true, //start searching for devices
    showStatusElement: true, //basic feedback provided
    showReadDataElement: true, //don't offer to read data
    showProgressBar: true,
    showReadWaypointsSelect: false,
    showDetailedStatus: true,
    showActivityDirectoryElement: true,
    showFindDevicesElement: false,
  });
}
</script>

上はソースコードです。もし別サイトで走らせる場合は、pathKeyPairsArrayのところだけはAPIキーを取得して入れ替えてください。localhostで動かす分には不要です。

一応ブログ上でも動いたので、これを改造したら、なんか面白いツールができそうです・・・。例えば、前々回の記事の散布図をGoogle Chartsを使って自動生成とか。。。

ほんとはGarmin Connect Web Services APIっていうの使ってガーミンコネクトからデータ取りたいんですけど、APIのページはcoming soonになったまま4、5年経つんですよね・・・(笑)
▼記事がお役にたったら、いいね!お願いします♪




0 件のコメント:

コメントを投稿