Skip to content

Instantly share code, notes, and snippets.

@glassesfactory
Last active August 29, 2015 14:14
Show Gist options
  • Save glassesfactory/063fda84c07680c08c35 to your computer and use it in GitHub Desktop.
Save glassesfactory/063fda84c07680c08c35 to your computer and use it in GitHub Desktop.

#現在位置から天気予報を取って糧にする

技術的な文章を書いていなかったので気まぐれに。

今更感甚だしいけど最近のブラウザでは GPS が取得できる。

やり方はいくつかあるけど自分の中では以下に落ち着いた。

watchID = nav.geolocation.watchPosition (pos)=>
  #some callback do...
  nav.geolocation.clearWatch watchID
  return
  , null , {
    maximumAge: 0
  }

しかし、アプリでもないのに GPS なんかとって何が嬉しいのか? 現在位置をマッピングして頭よさげなビジュアライゼーションでも作るか?
という話になりがちだけれど、例えば天気情報取得して
表示したり、フォーム入力のサジェストとして使うことが出来る。

天気であれば、以下のサービスで位置情報から無料で天気データを取得することが出来る。

OpenWeatherMap - actual and forecast weather.

取得した位置情報から天気API をたたくには以下のようにする。

requrest = 'superagent'
nav = window.navigation
module.exports = React.createClass
  displayName: 'Weather'
  mixins: [React.addons.LinkedStateMixin]
    
  #位置情報から天気データを取る
  getCurrentWeather: (pos)->
    request
    .get 'http://api.openweathermap.org/data/2.5/weather'
    .query {lat: pos.coords.latitude, lon:pos.coords.longitude}
    .end (err, res)->
      console.log err, res
      return
    return
  
  loadCurrentAreaFromServer: ->
    watchID = nav.geolocation.watchPosition (pos)=>
      this.getCurrentWeather pos
      nav.geolocation.clearWatch watchID
      return
    , null , {
      maximumAge: 0
    }
    return
    
  # コンポーネントがマウントされた
  componentDidMount: ->
    this.loadCurrentAreaFromServer()
    return
    
  render: ->
    return weatherTemplate()

なんかさり気なく最近流行りの view ライブラリを使っているが気にしないでほしい。
この作り方の場合、本来であれば ActionCreator とか Store とかを用意するのだが。
とりあえず天気情報が取れたら後は自前の API サーバーとかと連携して適切な現在地の天気を表示してやればいい。

この API 思ったよりも精度が悪くはないのでおおよそあってる。
潮来に釣りに行った時もちゃんと出てきた。
ので、PC であっても基地局レベルではあっているはず。
それなのに天気がずれるとか違うという場合はその辺に黒魔術師がいて攻撃を受けてる可能性が高いのですぐに避難するようサジェストすべきだろう。

ちょっとした一手間で1つでもユーザーが自力で入力すべき項目が減らせるのであればなかなか良いのではないだろうか。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment