Webサービスプロジェクト　～　GPSデータのビューワー


Silicon Valley Super Ware

2019年8月21日
GPSデータのビューワー

GPSデータのビューワ

TCX形式のファイルに読み込めたので、それを表示するための仕組みを作ります。
表示はHTML／CSSで書きます。

jQueryを利用して、動的にページを作る事も出来ますが、
まずは、簡単にHTMLとCSSで作ってみる事にします。

HTMLで基本の表示を作る

基本の画面では
  • ファイルの選択
  • 読み込んだデータの表示
を行います。
  • ファイルの選択は「input」(タイプはファイル)
  • GPSの各レコードは「select」を利用して選択できるようにします
  • 各レコードのデータは「input」(タイプはテキスト)
  • 画面の操作のイベントは「jQuery」で行う事にします
という方針でHTMLを書いてみました。こんな感じです。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"/>
    <link href="gps.css" rel="stylesheet"/>
    <script src="./jquery-3.4.1.min.js"></script>
  </head>
  <body>
    <div id="sv_title_logo">
      <h1><a href="https://www.siliconvalleysw.com/">Silicon Valley Super Ware</a></h1>
    </div>
    <div id="sv_app_content">
      <h2>GPSデータビューワー</h2>
      <table class="sv_main_table">
        <tr>
          <th class="sv_table_index" id="sv_file_selection_index">GPS File：</th>
        </tr>
        <tr>
          <td><input type="file" id="sv_gps_file_selection"/></td>
        </tr>
      </table>
      <table class="sv_main_table">
        <tr>
          <th class="sv_table_index">時間［秒］</th>
          <th class="sv_table_index">記録</th>
        </tr>
        <tr>
          <th>
            <select id="sv_gps_item_selector" size="10">
            </select>
          </th>
          <td>
            <table>
              <tr>
                <td>時刻：</td>
                <td><input id="sv_time_field" class="sv_item_field" type="text" readonly/></td>
              </tr>
              <tr>
                <td>日時：</td>
                <td><input id="sv_date_field" class="sv_item_field" type="text" readonly/></td>
              </tr>
              <tr>
                <td>距離：</td>
                <td><input id="sv_distance_field" class="sv_item_field" type="text" readonly/>［ｍ］</td>
              </tr>
              <tr>
                <td>標高：</td>
                <td><input id="sv_altitude_field" class="sv_item_field" type="text" readonly/>［ｍ］</td>
              </tr>
              <tr>
                <td>心拍数：</td>
                <td><input id="sv_hr_field" class="sv_item_field" type="text" readonly/>［回／分］</td>
              </tr>
              <tr>
                <td>緯度：</td>
                <td><input id="sv_lati_field" class="sv_item_field" type="text" readonly/>［度］</td>
              </tr>
              <tr>
                <td>経度：</td>
                <td><input id="sv_longi_field" class="sv_item_field" type="text" readonly/>［度］</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <footer>Copyright(c) 2019 by Silicon Valley Super Ware<br>All rights reserved.</footer>
    <script src="./gps.js"></script>
  </body>
</html>

体裁はCSSで整えます！

これで基本の画面は出来たので、少し見栄えが良くなるようにCSSで整えます。
一応モバイルでも見やすいようにしてみました。
/********************************************************************* 
Default CSS file for GPS data analysis service
Version 0.0 / August 21, 2019
Copyright(c) 2019 Silicon Valley SW, all right reserved.
**********************************************************************/

 body {
  width: 750px;
  
}
h1,h2,h3,h4,h5,h6,p {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
}
table {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: lightgray;
  border-radius: 5px;
  padding: 10px;
}
input {
  font-family: 'Noto Sans JP', sans-serif;
  border-radius: 3px;
}
select {
  font-family: 'Noto Sans JP', sans-serif;
}
button {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: dodgerblue;
  color: white;
  border: 1px solid dodgerblue;
}
footer {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
#sv_title_logo a {
  text-align: center;
  background-color: black;
  color: white;
  border: 1px solid black;
  border-radius: 5px;
  display: block;
  padding: 5px;
  text-decoration: none;
  width: 400px;
  margin: 20px auto;
  line-height: 50px;
}
#sv_app_content h2{
  border-bottom: 5px solid dimgray;
  margin: 50px 20px;
}
#sv_app_content .sv_main_table {
  width: 400px;
  margin: 20px auto;
  font-size: 15px;
}
#sv_app_content .sv_table_index {
  border-bottom: 2px solid dimgray;
}
#sv_gps_file_selection {
  margin: 20px 50px;
  width: 300px;
  
}
#sv_file_selection_index {
  width: 300px;
}
#sv_app_content select {
  width: 70px;
  text-align: right;
}
#sv_app_content .sv_item_field {
  width: 100px;
  text-align: right;
}
/*
For mobile devices
*/
@media screen and (max-width:600px) {
  body {
    width: 98vw;
  }
  #sv_title_logo a {
    width: 90vw;
    font-size: 6vw;
    margin: 3vw auto;
  }
  #sv_app_content h2{
    margin: 4vw 3vw;
  }
  #sv_app_content .sv_main_table {
    width: 90vw;
    margin: 5vw auto;
    font-size: 3vw;
  }
  #sv_gps_file_selection {
    width: 50vw;
    font-size: 3vw;
  }
  #sv_file_selection_index {
    width: 50vw;
  }
  #sv_app_content select {
    width: 20vw;
    font-size: 3vw;
  }
  #sv_app_content .sv_item_field {
    width: 20vw;
    font-size: 3vw;
  }
  footer {
    font-size: 3vw;
    margin-bottom: 2vw;
    margin-top: 3vw;
  }
}

モバイルではこんな感じです。
モバイルでの画面

最初の段階はこんな感じです！

これで、一応簡単なアプリケーションの体裁は整いました。Javascriptのソースコードは後日、会員サイトで公開します。
GarminのサイトからTCX形式のファイルをダウンロードすれば、記録された全部のGPSのデータを簡単に見れるようになりました。

これをベースに少し、データの解析機能を付けて行きます。
実際に表示させるうえで幾つか大事な事があるので次回はその辺を紹介します。

Webアプリを試したい方はこちら！

お問い合わせはこちら！

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む