From ed25c1cd6f3ae6b8aaf4003e6b786295912b5ba9 Mon Sep 17 00:00:00 2001 From: "yama@muteki" Date: Tue, 3 May 2016 20:35:37 +0900 Subject: [PATCH] Add about page --- app/assets/javascripts/about.coffee | 3 + app/assets/stylesheets/about.scss | 3 + app/assets/stylesheets/application.scss | 9 ++ app/controllers/about_controller.rb | 4 + app/helpers/about_helper.rb | 2 + app/helpers/application_helper.rb | 7 + app/views/about/index.html.erb | 122 ++++++++++++++++++ .../_bus_stop_search_form.html.erb | 3 + app/views/home/index.html.erb | 12 +- app/views/layouts/application.html.erb | 10 +- config/routes.rb | 2 +- test/controllers/about_controller_test.rb | 9 ++ 12 files changed, 175 insertions(+), 11 deletions(-) create mode 100644 app/assets/javascripts/about.coffee create mode 100644 app/assets/stylesheets/about.scss create mode 100644 app/controllers/about_controller.rb create mode 100644 app/helpers/about_helper.rb create mode 100644 app/views/about/index.html.erb create mode 100644 test/controllers/about_controller_test.rb diff --git a/app/assets/javascripts/about.coffee b/app/assets/javascripts/about.coffee new file mode 100644 index 0000000..24f83d1 --- /dev/null +++ b/app/assets/javascripts/about.coffee @@ -0,0 +1,3 @@ +# Place all the behaviors and hooks related to the matching controller here. +# All this logic will automatically be available in application.js. +# You can use CoffeeScript in this file: http://coffeescript.org/ diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss new file mode 100644 index 0000000..fda2fc2 --- /dev/null +++ b/app/assets/stylesheets/about.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the about controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index d997800..eb2500c 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -55,6 +55,10 @@ h1, .h1, h2, .h2, h3, .h3 { vertical-align: middle; } +.sub-title { + font-size: 40%; +} + .reference-info { font-size: 50%; color: #ccc; @@ -62,6 +66,11 @@ h1, .h1, h2, .h2, h3, .h3 { padding-left: 20px; } +.gravatar { + margin-top: 20px; + margin-bottom: 20px; +} + .map { width: 100%; height: calc(100vh - 120px); /* iPad対応のためJSで調整 */ diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb new file mode 100644 index 0000000..a14c528 --- /dev/null +++ b/app/controllers/about_controller.rb @@ -0,0 +1,4 @@ +class AboutController < ApplicationController + def index + end +end diff --git a/app/helpers/about_helper.rb b/app/helpers/about_helper.rb new file mode 100644 index 0000000..68e69ae --- /dev/null +++ b/app/helpers/about_helper.rb @@ -0,0 +1,2 @@ +module AboutHelper +end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 58de734..60ad7f4 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -15,6 +15,7 @@ def build_markers(bus_stops, position = nil) end hash end + def build_routes_hash(bus_routes) tracks = bus_routes.flat_map do |bus_route| bus_route.bus_route_tracks.map do |track| @@ -24,4 +25,10 @@ def build_routes_hash(bus_routes) end end end + + def gravatar_for(email, size) + gravatar_id = Digest::MD5::hexdigest(email.downcase) + gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}" + image_tag(gravatar_url, class: 'gravatar') + end end diff --git a/app/views/about/index.html.erb b/app/views/about/index.html.erb new file mode 100644 index 0000000..f2a4d2b --- /dev/null +++ b/app/views/about/index.html.erb @@ -0,0 +1,122 @@ +
+
+

chi-bus.jpについて

+ <%= gravatar_for('yama@muteki.com', 200) %> +

+ yama@muteki
+ 千葉県千葉市在住
+ 会社員 +

+

このバス停に来るバスは、
どこから来て、
どこへ行くのだろう？

+
+
+
+
このサービスは何ですか？
+
+

+ chi-bus.jp（チーバス・ジェイピー）は選択したバス停を通過する全てのバス路線を地図上で一度に表示出来る便利なサービスです。 + 2016年4月に千葉県対応でサービスインし、現在、東京都、神奈川県にも対応しています。 +

+
+
+
+
どうしてこのサービスを作ろうと思ったのですか？
+
+
+ 「このバス停にくるバスは、どこから来て、どこに行くのだろう？」 +
+

+ バス路線は電車と違って一般の地図では簡単に確認できません。 + 千葉のバス路線は複雑で、最寄りのバス停でさえどこからバスが来てどこへ行くのか把握するのは困難を極めます。 + オープンデータとGoogle Maps APIを使えば、最寄りのバス停に来るバスがどこから来てどこへ行くのか簡単に把握出来るのでは？ + そんな想いがこのサービス開発のきっかけです。 +

+
+
+
+
他のサービスとはどう違いますか？
+
+

+ 他のサービスとの最も大きな違いは、選択したバス停を通過するバス路線を簡単に一覧出来る点です。 + 他のサービスで提供しているような時刻表や乗換案内に関するサービスは今のところ提供していません。 +

+
+
+
+
スマートフォンやタブレットでも利用できますか？
+
+

+ PCの他、スマートフォンやタブレットにも対応しています。 + 動作テストはiPhone5SとiPad mini 4で行っています。 +

+
+
+
+
このサービスはどうやって使うのですか？
+
+

+ 以下の手順を参考にお使いください。 +

+
    +
  1. 検索欄にバス停名を入力して検索してください。
    2. +
  2. 一覧からバス停を選択すると、選択したバス停を通過する全てのバス路線が一覧表示されます。
    3. +
  3. 一覧からバス路線を選択すると、そのバス路線で停車するバス停が一覧表示されます。
    4. +
+
    +
  • バス停名を省略すると現在地を取得して付近のバス停が一覧表示されます。
    • +
  • 地図をスクロールしてから「中心付近を検索」を押すと中心付近のバス停を検索できます。
    （スマートフォンでは地図のロックを解除してください）
    • +
+
+
+
+
バス停及びバス路線の情報はいつのものですか？
+
+

+ 本サービスで利用しているバス停及びバス路線の情報は、国土交通省国土政策局国土情報課GISホームページの国土数値情報ダウンロードサービスで公開されている以下のオープンデータを利用しています。 +

+
    +
  • 国土数値情報バス停留所データ（データ作成年度平成22年度）
    • +
  • 国土数値情報バスルート（データ作成年度平成23年度）
    • +
+
+
+
+
このサービスを使う上での注意事項はありますか？
+
+

+ 以下の点にご注意ください。 +

+
    +
  • このサービスは個人の趣味で運営されています。
    • +
  • 時刻表や乗換案内は今のところ提供していません。時刻表に関するオープンデータが提供されていないためです。
    • +
  • Google Maps APIのアクセス数制限により地図が表示されない場合があります。時間を空けてご利用ください。
    • +
  • バス路線選択時に表示されるバス停一覧の表示順序は停車順序ではありません。これは上記のデータに停車順情報が含まれないためです。独自のアルゴリズムによって停車順序を予測していますが完全ではないため、地図上の表示で判断してください。
    • +
+
+
+
+
今後はどのようにバージョンアップしていきますか？
+
+

+ 今後の課題として、バス停は複数のバス運営会社で共用されているのに、掲示されている時刻表は各社別々のため、そのバス停を次に通過するバスがどこへ行くのか非常にわかりにくいという問題がります。 + ソーシャルログインを使ってユーザの皆さんから時刻表情報を収集し、その情報をバス停毎にまとめて、統合時刻表のようなものを作れたら素敵だと思っています。 +

+
+
+
+
もっと詳しい仕組みを知りたいのですが？
+
+

+ 本サービスはオープンソースとしてソースコードを公開しています。 + 下記のリンクからソースコードをご覧ください。 +

+
+
GitHub プロジェクトページ
+
https://github.com/yamamuteki/chi-bus.jp
+
GitHub 作者プロフィールページ
+
https://github.com/yamamuteki
+
+
+
+
+
diff --git a/app/views/application/_bus_stop_search_form.html.erb b/app/views/application/_bus_stop_search_form.html.erb index 827ada8..5416fe7 100644 --- a/app/views/application/_bus_stop_search_form.html.erb +++ b/app/views/application/_bus_stop_search_form.html.erb @@ -5,6 +5,9 @@ + + + <% end %> <%= text_field_tag :q, params[:q], placeholder: 'バス停名を省略すると周辺を検索します', class: 'form-control' %> diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 3984da3..1a95f62 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -3,13 +3,14 @@
<%= image_tag 'chi-ba-kun-small.png'%>

- chi-bus.jp
- チーバス・ジェイピー +
チーバス・ジェイピー
+ chi-bus.jp

- 千葉のカオスを解消する
- 千葉県民のためのバス停情報サイト
- （こっそり東京都、神奈川県にも対応） + このバス停に来るバスは、
+ どこから来て、
+ どこへ行くのだろう？
+ （千葉県、東京都、神奈川県に対応）

@@ -21,6 +22,7 @@ $(".home-parent #q").focus();
  • 本サービスでは国土交通省国土政策局の平成22年度バス停留所データ及び平成23年度バスルートデータを利用しています。
  • 千葉県PRマスコットキャラクター　チーバくん
    • +
    diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 434b0ee..3619aa0 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -4,11 +4,11 @@ - chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サイト - - - - + chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サービス + + + + " /> diff --git a/config/routes.rb b/config/routes.rb index 58362e9..42b4379 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,7 +1,7 @@ Rails.application.routes.draw do resources :bus_routes, only: [:show] resources :bus_stops, only: [:index, :show] - get 'home/index' + get 'about', to: 'about#index' root 'home#index' # The priority is based upon order of creation: first created -> highest priority. diff --git a/test/controllers/about_controller_test.rb b/test/controllers/about_controller_test.rb new file mode 100644 index 0000000..78a4985 --- /dev/null +++ b/test/controllers/about_controller_test.rb @@ -0,0 +1,9 @@ +require 'test_helper' + +class AboutControllerTest < ActionController::TestCase + test "should get index" do + get :index + assert_response :success + end + +end