質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

GPS

GPSは、Global Positioning Systemの略です。衛星信号を使用して受信機の地上又は空中内の居場所を特定するナビゲーションシステムです。"GPS"は受信機のことも指します。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Q&A

解決済

2回答

3276閲覧

Webアプリで送迎バスの現在地を表示する方法はありますか?

horisuke3232

総合スコア109

Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

GPS

GPSは、Global Positioning Systemの略です。衛星信号を使用して受信機の地上又は空中内の居場所を特定するナビゲーションシステムです。"GPS"は受信機のことも指します。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

0グッド

1クリップ

投稿2016/02/06 15:43

送迎バスの現在地をWebアプリで実現することは可能でしょうか?

私はHTML,cssを使ってホームページを作った時がありますが、php,javascript,等のプログラムをするのは初めてです。

先日こちらで質問させていただきました。
https://teratail.com/questions/26472

先ほどWebアプリ開発の仕組みという本を読んだところ、Webアプリで送迎バスの現在地を表示させる事ができるのではないか?と思いました。

1 androidスマホを送迎バスで起動させて、現在地情報をサーバーに送る(androidアプリ)
2 サーバーで現在地情報を保存、更新
3 ホームページでサーバーにある最新の現在地情報をgooglemapに表示

イメージはこちらで間違いないでしょうか?

使用する言語は
1 Java
2 PHP
3 HTML , CSS , javascript

と考えています。

先ほどこれらを実現するために書店で参考書を探したのですが、JavaについてはJavaの参考書、PHPはPHPの参考書と単独での参考書はたくさんあったのですが、JavaとPHPとJavascriptを1冊でそれぞれの送受信の仕組みを解説しているような参考書はあるのでしょうか?
初心者ということもあり、それぞれの繫がりの面が具体的にイメージできません。

長文で失礼しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

  1. androidスマホを送迎バスで起動させて、現在地情報をサーバーに送る(androidアプリ)
  2. サーバーで現在地情報を保存、更新
  3. ホームページでサーバーにある最新の現在地情報をgooglemapに表示

それでもいいですが、プログラミングは未経験とのことですし、単に現在位置がわかればいいわけですから、もっとシンプルな構成をおすすめします。(2)を、PHPとPostgreSQLやMySQL(MariaDB)などのデータベースで実現する代わりに、既存のウェブサービス Google Docsのスプレッドシートで実現してはいかがでしょうか?

Google スプレッドシートは、Excelに似たスプレッドシートを、ウェブブラウザーで作成できるウェブサービスです。が、これにはウェブ APIというものが用意されており、(1)のAndroidアプリからスプレッドシートにデータ(現在時刻と位置情報)を追加したり、(3)でAndroidやiOS端末のウェブブラウザーにダウンロードされたJavaScriptスクリプトから読みだしたり、といったことができます。

この方法なら、(3)のホームページ上の送迎バス現在値表示ページのHTMLは、静的なもの(内容が固定のもの)でよくなるので、すでにお使いのホームページを置いているサーバーに、このHTMLも置けそうです。つまり、新たに、PHPとデータベースをホスティングするためのサーバーを探さなくて済みますし、PHPやデータベースについて学ぶ必要もなくなります。

また、Googleスプレッドシートは、クライアントの認証に対応しているので、(1)は書き込みの権限をもったアカウントで行い、(3)は読み出し専用の権限を持ったアカウントで行えば、セキュリティの面でも安心でしょう。

技術面で一点だけ確認が必要なのは、(3)でJavaScriptのスクリプトがGoogle Docsにアクセスする時に、クロスサイトスクリプティングの制限を解除できるかということです。これはどういうことかというと、このシステムでは、JavaScriptのスクリプトは既存のウェブサーバーからダウンロードされますが、そのスクリプトが、Google Docsという別のサイトにアクセスします。すると、ウェブブラウザーがその「別のサイトへのアクセス」を拒否する仕組みになっているのです。(正確には Google Docsから戻ってきたレスポンスを、ウェブブラウザーが破棄します) クロスサイトスクリプティングという、よくある攻撃からユーザーを守るために、このような仕組みになっています。

この制限を解除するには、サーバー側(多分、Google Docs側)に、CORSという設定が必要になります。恐らくGoogle DocsのAPIのドキュメントのどこかに、そのやり方が書いてあると思います。

もし、この技術的な点がクリアーされたなら、Googleスプレッドシートを以下のように使えばいいと思います。

(1)のAndroidアプリ:

  1. 現在の日時と位置情報を取得
  2. 1で取得した情報を、Gooleスプレッドシートの1行目に挿入する。
  3. Gooleスプレッドシートの2行目(前回の位置情報)を削除する。
  4. 一定時間休む(例:1分間)
  5. 1に戻って繰り返す。

(3)のAndroidやiOS端末:

  1. ウェブブラウザーで、送迎バス現在値表示ページを開く。→ HTMLとJavaScriptのスクリプトがダウンロードされる
  2. JavaScriptのスクリプトが、Googleスプレッドシートの1行目の情報を読み込む
  3. JavaScriptのスクリプトが、Googleマップにアクセスし、周辺の地図を、送迎バスの現在位置と共に表示する
  4. 一定時間休む(例:30秒間)
  5. 2に戻って繰り返す。

まあ、私もこのようなシステムを作ったことはないので、これらの情報は、大体こんな感じでできるだろう、という感覚で書いてます。実際にやってみると、ディテールは変わるかもしれません。

投稿2016/02/07 06:07

編集2016/02/07 10:31
tatsuya6502

総合スコア2035

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unau

2016/02/07 18:53

横から失礼します。 Googleドライブの利用、ということであれば、Googleスプレッドシートよりも Google Fusion Tables の方が向いているかもしれません。手作業でデータをいじる可能性があるなら Googleスプレッドシートにアドバンテージがありますが、ここで書かれているような使い方なら Google Fusion Tables で十分ですし、Googleマップとの親和性は Google Fusion Tables の方が高いですし。 以下、適当にググって見つけた、参考になりそうなサイトです。 http://shimz.me/blog/map/2670 http://www.infoscoop.org/blogjp/2014/09/20/google-apps-script-google-fustion-tables-sample-app/
unau

2016/02/07 19:03

もう一度失礼します。 ご提案の方法だと、データの格納先は Googleスプレッドシートではなくて、Googleドライブ上のテキストファイルでも十分そうです。 メンテナンスなど手動での情報確認や修正などの用途を考えると、Googleスプレッドシートを使う利点はありますので、その場合は (3) のマップ表示を全部 Google Apps Script で書くといいのかもしれません。HTML の中の javascript から Googleスプレッドシートを呼ぶのではなく、Google Apps Script でデータを読んで HTML を吐き出すように作り、WEB アプリケーションとして公開する、と。その中間的な方法(Google Apps Script で、現在地情報を返す WEB API を作る)もあります(私はよく使います)。
horisuke3232

2016/02/08 11:34

tatuya6502 さん 回答ありがとうございました。 グーグルスプレッドシートをWebサーバーにできるなんて知りませんでした。 グーグルスプレッドシートを使えればグラフ化等簡単にできちゃいそうですね。 >サーバー側(多分、Google Docs側)に、CORSという設定が必要になります。恐らくGoogle DocsのAPIのドキュメントのどこかに、そのやり方が書いてあると思います。 この辺が難しそうですね。 勉強してみます。
horisuke3232

2016/02/08 11:42

unau さん 回答ありがとうございました。 Google Fusion Tables初めて聞きました。 >Google Apps Script でデータを読んで HTML を吐き出すように作り、WEB アプリケーションとして公開する、と イメージできました。やり方覚えてみます。 スプレッドシートではなくて、テキストファイルでもいいんですね。 グーグルのみで完結できるんですね。しかもcss html javascriptのみでできてしまう。
tatsuya6502

2016/02/08 11:57

unau さん、情報ありがとうございました。Google Fusion Tables、Google Apps Script、共に知りませんでした。たしかに、これらを使う方がずっと簡単にできそうです。勉強になりました。
unau

2016/02/08 19:14

拙作の、Googleスプレッドシートでデータを管理して、WEB API でアクセスするアプリの動きを YouTube に上げてあります。 https://youtu.bu/-NosLl57FAc これは doGet() や doPost() というグローバル関数を定義した Google Apps Script を「ウェブアプリケーションとして公開」できるのを利用しています。「ウェブアプリケーションとして公開」した場合、html を返せばそのまま WEB アプリとして動くわけですが、今あげた例では json で内容だけを返すように作ってあります (先にコメントしたときの「中間的な方法」)。Excel からはこの API を叩いて json を受け取り、シートを作ったりしています。 これを開発していた頃の記事が次になります。 http://qiita.com/unau/items/ad68ace6323121a617bf この記事だけ見ても必要な情報は得られませんが、雰囲気と、ググるのに必要な用語はわかるかな、と。 今では Execution API という、「Google Apps Script を WEB API として使う」仕組みが提供されたりとか、ちょっと状況が変わってきています。  Google Fusion Tables と Googleマップの連携もずっと試してみたいと思っているので、そのうち試して何か記事にまとめられるといいのですが。
tatsuya6502

2016/02/09 00:49 編集

unau さん、素晴らしいです。もしよかったら unau さんの今までのコメントを抜き出して、別の新しい回答にしていただけないでしょうか? 私から「+」を差し上げたいのと、できれば、ベストアンサーに選ばれてほしいので。ぜひ、お願いします!
guest

0

回答ではなく参考資料になりますが、自治体がお金を出して作っているところはあります。

ばす日和
塩尻市内を走るバスが今どこを走っているのかスマホで簡単に知ることができるアプリです。
http://code4shiojiri.org/mobileapps/

構成はサーバー+Javaだったと思います。開発はサーバー屋さんとデザイナーさんの2名です。

投稿2016/02/06 18:27

chinyato

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

horisuke3232

2016/02/08 11:30

参考資料ありがとうございました。 リンク先を参照したのですが、App Storeで確認できませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問