Slide 1

Slide 1 text

東京都立多摩科学技術高等学校 1年 小山智之 スマートフォンにおける 気象データの可視化

Slide 2

Slide 2 text

はじめに −背景 ● スマートフォンを使って 気象データを簡単に見た い。 ● 自分のいる場所の近くに あるセンサーのデータを 見たい。 −目的 ● スマートフォンで気象デ ータを見やすくする ● 端末から取得した情報を 気象データの可視化に活 用する。 −概要 ● レスポンシブWebデザイン o スマートフォン対応 o タブレット対応 o パソコン対応 ● テキストでの可視化 o 不快指数、1日の雨量 o 湿度、気圧、雨量 o 温度、風向、風速 ● SNSを用いたデータ公開 o Twitter、Facebook ● GPSを用いたセンサー検索 o 周囲の5地点を検索 ● 地点・住所検索システム o 地点名、住所から検索

Slide 3

Slide 3 text

研究方法 −環境 ● 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を 用いてデバックを 行う。

Slide 4

Slide 4 text

動作状況1 タブレット スマートフォン Twitter/Facebook API 連携 日時 2013-08-07 08:05:01 気温 25.2℃ 湿度 80.4% 気圧 997.5hPa レスポンシブデザイン パソコン Live E!サーバーへの負荷軽減 ● cronを使用し一定周期でデータをデ ータベースへ保存する。 ● データベースからデータを取得し直 接アクセスによる負荷を軽減する。

Slide 5

Slide 5 text

動作状況2 GPS位置情報 地点・住所検索 パラメータ で渡す 検索 表示 処理ファイ ル パラメータ で渡す 検索 読み込み 検索クリッ ク 処理ファイ ル Ajax Ajax Geolocation API

Slide 6

Slide 6 text

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