Add about page

yamamuteki · May 3, 2016 · ed25c1c · ed25c1c
1 parent e4e3095
commit ed25c1c
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 11 deletions.
diff --git a/app/assets/javascripts/about.coffee 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
@@ -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
@@ -55,13 +55,22 @@ h1, .h1, h2, .h2, h3, .h3 {
   vertical-align: middle;
 }
 
+.sub-title {
+  font-size: 40%;
+}
+
 .reference-info {
   font-size: 50%;
   color: #ccc;
   margin-top: 20px;
   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
@@ -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
@@ -0,0 +1,2 @@
+module AboutHelper
+end
diff --git 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
@@ -0,0 +1,122 @@
+<div class="row">
+  <div class="col-xs-12 col-sm-4 text-center">
+    <h2>chi-bus.jpについて</h2>
+    <%= gravatar_for('yama@muteki.com', 200) %>
+    <p>
+    yama@muteki<br />
+    千葉県千葉市在住<br />
+    会社員
+    </p>
+    <p class="lead">このバス停に来るバスは、<br />どこから来て、<br />どこへ行くのだろう？</p>
+  </div>
+  <div class="col-xs-12 col-sm-8 list-window">
+    <div class="panel panel-default">
+      <div class="panel-heading">このサービスは何ですか？</div>
+      <div class="panel-body">
+        <p>
+        chi-bus.jp（チーバス・ジェイピー）は選択したバス停を通過する全てのバス路線を地図上で一度に表示出来る便利なサービスです。
+        2016年4月に千葉県対応でサービスインし、現在、東京都、神奈川県にも対応しています。
+        </p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">どうしてこのサービスを作ろうと思ったのですか？</div>
+      <div class="panel-body">
+        <blockquote>
+          「このバス停にくるバスは、どこから来て、どこに行くのだろう？」
+        </blockquote>
+        <p>
+        バス路線は電車と違って一般の地図では簡単に確認できません。
+        千葉のバス路線は複雑で、最寄りのバス停でさえどこからバスが来てどこへ行くのか把握するのは困難を極めます。
+        オープンデータとGoogle Maps APIを使えば、最寄りのバス停に来るバスがどこから来てどこへ行くのか簡単に把握出来るのでは？
+        そんな想いがこのサービス開発のきっかけです。
+        </p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">他のサービスとはどう違いますか？</div>
+      <div class="panel-body">
+        <p>
+        他のサービスとの最も大きな違いは、選択したバス停を通過するバス路線を簡単に一覧出来る点です。
+        他のサービスで提供しているような時刻表や乗換案内に関するサービスは今のところ提供していません。
+        </p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">スマートフォンやタブレットでも利用できますか？</div>
+      <div class="panel-body">
+        <p>
+        PCの他、スマートフォンやタブレットにも対応しています。
+        動作テストはiPhone5SとiPad mini 4で行っています。
+        </p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">このサービスはどうやって使うのですか？</div>
+      <div class="panel-body">
+        <p>
+        以下の手順を参考にお使いください。
+        </p>
+        <ol>
+          <li>検索欄にバス停名を入力して検索してください。</li>
+          <li>一覧からバス停を選択すると、選択したバス停を通過する全てのバス路線が一覧表示されます。</li>
+          <li>一覧からバス路線を選択すると、そのバス路線で停車するバス停が一覧表示されます。</li>
+        </ol>
+        <ul>
+          <li>バス停名を省略すると現在地を取得して付近のバス停が一覧表示されます。</li>
+          <li>地図をスクロールしてから「中心付近を検索」を押すと中心付近のバス停を検索できます。<br />（スマートフォンでは地図のロックを解除してください）</li>
+        </ul>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">バス停及びバス路線の情報はいつのものですか？</div>
+      <div class="panel-body">
+        <p>
+        本サービスで利用しているバス停及びバス路線の情報は、国土交通省国土政策局国土情報課GISホームページの国土数値情報ダウンロードサービスで公開されている以下のオープンデータを利用しています。
+        </p>
+        <ul>
+          <li>国土数値情報バス停留所データ（データ作成年度平成22年度）</li>
+          <li>国土数値情報バスルート（データ作成年度平成23年度）</li>
+        </ul>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">このサービスを使う上での注意事項はありますか？</div>
+      <div class="panel-body">
+        <p>
+        以下の点にご注意ください。
+        </p>
+        <ul>
+          <li>このサービスは個人の趣味で運営されています。</li>
+          <li>時刻表や乗換案内は今のところ提供していません。時刻表に関するオープンデータが提供されていないためです。</li>
+          <li>Google Maps APIのアクセス数制限により地図が表示されない場合があります。時間を空けてご利用ください。</li>
+          <li>バス路線選択時に表示されるバス停一覧の表示順序は停車順序ではありません。これは上記のデータに停車順情報が含まれないためです。独自のアルゴリズムによって停車順序を予測していますが完全ではないため、地図上の表示で判断してください。</li>
+        </ul>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">今後はどのようにバージョンアップしていきますか？</div>
+      <div class="panel-body">
+        <p>
+        今後の課題として、バス停は複数のバス運営会社で共用されているのに、掲示されている時刻表は各社別々のため、そのバス停を次に通過するバスがどこへ行くのか非常にわかりにくいという問題がります。
+        ソーシャルログインを使ってユーザの皆さんから時刻表情報を収集し、その情報をバス停毎にまとめて、統合時刻表のようなものを作れたら素敵だと思っています。
+        </p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">もっと詳しい仕組みを知りたいのですが？</div>
+      <div class="panel-body">
+        <p>
+        本サービスはオープンソースとしてソースコードを公開しています。
+        下記のリンクからソースコードをご覧ください。
+        </p>
+        <dl>
+          <dt>GitHub プロジェクトページ</dt>
+          <dd><a href="https://github.com/yamamuteki/chi-bus.jp">https://github.com/yamamuteki/chi-bus.jp</a></dd>
+          <dt>GitHub 作者プロフィールページ</dt>
+          <dd><a href="https://github.com/yamamuteki">https://github.com/yamamuteki</a></dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/application/_bus_stop_search_form.html.erb b/app/views/application/_bus_stop_search_form.html.erb
@@ -5,6 +5,9 @@
         <a title="ホーム" href="<%= root_path %>" class="btn btn-default">
           <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
         </a>
+        <a title="chi-bus.jpについて" href="<%= about_path %>" class="btn btn-default">
+          <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
+        </a>
       </span>
     <% 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
@@ -3,13 +3,14 @@
     <div class="col-xs-12 text-center">
       <%= image_tag 'chi-ba-kun-small.png'%>
       <h1>
-        chi-bus.jp<br />
-        <small>チーバス・ジェイピー</small>
+        <div class="sub-title">チーバス・ジェイピー</div>
+        chi-bus.jp
       </h1>
       <p class="lead">
-      千葉のカオスを解消する<br />
-      千葉県民のためのバス停情報サイト<br />
-      <small>（こっそり東京都、神奈川県にも対応）</small>
+      このバス停に来るバスは、<br />
+      どこから来て、<br />
+      どこへ行くのだろう？<br />
+      <small>（千葉県、東京都、神奈川県に対応）</small>
       </p>
     </div>
     <div class="col-xs-12 col-sm-offset-4 col-sm-4">
@@ -21,6 +22,7 @@ $(".home-parent #q").focus();
         <li>本サービスでは国土交通省国土政策局の平成22年度バス停留所データ及び平成23年度バスルートデータを利用しています。</li>
         <li>千葉県PRマスコットキャラクター　チーバくん</li>
       </ul>
+      <br />
     </div>
   </div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,11 +4,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サイト</title>
-    <meta name="description" content="千葉のカオスを解消する、千葉県民のためのバス停情報サイトです。">
-    <meta property="og:title" content="chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サイト" />
-    <meta property="og:site_name" content="chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サイト" />
-    <meta property="og:description" content="千葉のカオスを解消する、千葉県民のためのバス停情報サイトです。" />
+    <title>chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サービス</title>
+    <meta name="description" content="千葉のカオスを解消する、千葉県民のためのバス停情報サービスです。">
+    <meta property="og:title" content="chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サービス" />
+    <meta property="og:site_name" content="chi-bus.jp（チーバス・ジェイピー）｜千葉県民のためのバス停情報サービス" />
+    <meta property="og:description" content="千葉のカオスを解消する、千葉県民のためのバス停情報サービスです。" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="<%= root_url %>" />
     <meta property="og:image" content="<%= image_url("chi-ba-kun-ogp.png") %>" />

diff --git 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
@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class AboutControllerTest < ActionController::TestCase
+  test "should get index" do
+    get :index
+    assert_response :success
+  end
+
+end