Upgrade to Pro — share decks privately, control downloads, hide ads and more …

スマートフォンにおける気象データの可視化 / Visualization of the weather data for the smartphone

スマートフォンにおける気象データの可視化 / Visualization of the weather data for the smartphone

Live E! サイエンスコンテスト 2013

Tomoyuki KOYAMA

September 14, 2013
Tweet

More Decks by Tomoyuki KOYAMA

Other Decks in Programming

Transcript

  1. はじめに −背景 • スマートフォンを使って 気象データを簡単に見た い。 • 自分のいる場所の近くに あるセンサーのデータを 見たい。

    −目的 • スマートフォンで気象デ ータを見やすくする • 端末から取得した情報を 気象データの可視化に活 用する。 −概要 • レスポンシブWebデザイン o スマートフォン対応 o タブレット対応 o パソコン対応 • テキストでの可視化 o 不快指数、1日の雨量 o 湿度、気圧、雨量 o 温度、風向、風速 • SNSを用いたデータ公開 o Twitter、Facebook • GPSを用いたセンサー検索 o 周囲の5地点を検索 • 地点・住所検索システム o 地点名、住所から検索
  2. 研究方法 −環境 • Ubuntu 13.04 • Xampp for Linux 1.8.1

    • gedit 3.6.2 • Google Chrome 26 • Mozilla Firefox 22.0 • Opera 12.16 • InternetExproler 8,9 • iOS6 - Safari 6 • Android 4.04 - ブラウザ −言語・サーバー等 • Apache 2.4.3 • PHP 5.3系 • MySQL 5.5.27 • JavaScript • Ajax −手順 Ubuntu上でgeditを 用いプログラムを 作成し、Xamppを 用いてデバックを 行う。
  3. 動作状況1 タブレット スマートフォン Twitter/Facebook API 連携 日時 2013-08-07 08:05:01 気温

    25.2℃ 湿度 80.4% 気圧 997.5hPa レスポンシブデザイン パソコン Live E!サーバーへの負荷軽減 • cronを使用し一定周期でデータをデ ータベースへ保存する。 • データベースからデータを取得し直 接アクセスによる負荷を軽減する。
  4. 動作状況2 GPS位置情報 地点・住所検索 パラメータ で渡す 検索 表示 処理ファイ ル パラメータ

    で渡す 検索 読み込み 検索クリッ ク 処理ファイ ル Ajax Ajax Geolocation API
  5. 1. フォームに入力されたワードと検索対象を 検索ボタンクリック時にjQueryで取得する。 2. Ajaxで取得したデータ(検索対象・ワー ド)を処理ファイル(PHP)へ渡す。 3. 受け取ったデータをデータベース上のセン サー情報(地点名または住所)から検索し 出力する。

    動作状況2 GPS位置情報 1. スマートフォンからGeolocation APIで位置情報(経度・緯度)を取 得する。 2. Ajaxで取得した位置情報を処理フ ァイル(PHP)へパラメータで渡 す。 3. データベース上の経度・緯度デー タと受け取ったデータとの差を求 め絶対値に変換し昇順に並べる。 4. 並べ替えたデータの上位5件のポイ ント情報を出力する。 地点・住所検索システム