Dojo 統計情報の一覧ページを作成し、個別ページとの導線も設置した

Author: yasulab

app/controllers/dojos_controller.rb

@@ -2,13 +2,13 @@ class DojosController < ApplicationController
 
   # GET /dojos[.json]
   def index
-    @dojo_data = []
+    @dojos = []
     Dojo.order(order: :asc).all.each do |dojo|
-      @dojo_data << {
+      @dojos << {
         id:          dojo.id,
         url:         dojo.url,
         name:        dojo.name,
-        logo:        "https://coderdojo.jp#{dojo.logo}",
+        logo:        root_url + dojo.logo[1..],
         order:       dojo.order,
         counter:     dojo.counter,
         is_active:   dojo.is_active,
@@ -21,8 +21,8 @@ def index
     respond_to do |format|
       # No corresponding View for now.
       # Only for API: GET /dojos.json
-      format.html { redirect_to root_url(anchor: 'dojos') }
-      format.json { render json: @dojo_data }
+      format.html # => app/views/dojos/index.html.erb
+      format.json { render json: @dojos }
     end
   end
 

app/helpers/application_helper.rb

@@ -78,11 +78,6 @@ def lazy_image_tag(source, options={})
     end
   end
 
-  # NOTE: Delete this helper to avoid overriding when /dojos routing is added.
-  def dojos_path(options={anchor: 'dojos'})
-    root_path(options)
-  end
-
   def welcome_path(options={anchor: 'welcome'})
     root_path(options)
   end

app/views/dojos/index.html.erb

@@ -0,0 +1,106 @@
+<% provide :title, "CoderDojo 一覧 - 統計情報" %>
+<% provide :desc,  "CoderDojo の公開されている統計情報をまとめたページです。" %>
+<% provide :url,   dojos_url %>
+<% provide :meta_image, asset_path('stats_cover.png') %>
+
+<section id='top' class='cover' style='background-color: white; max-width: 400px; margin: 0 auto;'>
+  <%= lazy_image_tag "stats_cover.png", alt: "Cover Photo" %>
+</section>
+
+<section id="index" class="text-center" style="margin-bottom: 100px;">
+  <br>
+  <h1>☯️
+    CoderDojo 一覧 - 統計情報<br><small>（公開情報のみ掲載）</small>
+  </h1>
+  <br>
+  <p style="margin: 0 0px 40px 10px; line-height: 1.5em;">
+    CoderDojo の公開されている統計情報をまとめたページです。
+    <br>
+    <div class='form__terms list'>
+      <ul style='list-style-type: "\2713\0020"; font-size: smaller;'>
+	<li><%= link_to '近日開催', events_path %>は含まず、<%= link_to '過去開催', stats_path %>のデータを使っています</li>
+	<li>現在は活動停止中 (Inactive) の道場も含まれています</li>
+	<li>下記表は <code><%= link_to dojos_path(format: :json), dojos_path(format: :json) %></code> で JSON に変換できます</li>
+      </ul>
+    </div>
+  </p>
+
+  <style type="text/css">
+    /* URL 用のセルにクラスを付けておく想定 */
+    table { table-layout: auto; }
+    td {
+      padding: 1px 10px 1px 10px;
+      text-align: right;
+      font-size: smaller;
+    }
+    td.url-cell {
+      white-space:   normal;         /* 改行を許可 */
+      word-wrap:     break-word;     /* 古めのブラウザ向け */
+      overflow-wrap: break-word;     /* 新しめのブラウザ向け */
+      word-break:    break-all;      /* 英数字が続く場合の保険 (必要に応じて) */
+      text-align:    left;
+    }
+    th {
+      padding: 10px;
+      text-align: center;
+    }
+  </style>
+
+  <div style="margin-top: 20px;" align="center">
+    <table border="1">
+      <tr>
+        <th>
+          <small>
+	    ☯️
+	    <br class='ignore-pc'>
+	    Dojo 名 / ID
+	  </small>
+        </th>
+        <th>
+          <small>
+	    🗓
+	    <br class='ignore-pc'>
+	    <a href='/signup'>掲載日</a>
+	  </small>
+        </th>
+        <th>
+          <small>
+	    📝
+	    <br class='ignore-pc'>
+	    URL
+	  </small>
+        </th>
+      </tr>
+      <% @dojos.each do |dojo| %>
+        <tr>
+          <td>
+	    <small>
+	      <%= link_to dojo_path(dojo[:id]) do %>
+		<%= dojo[:name] %><br>
+		<small>(ID: <%= dojo[:id] %>)</small>
+	      <% end %>
+	    </small>
+          </td>
+          <td>
+	    <small><%= dojo[:created_at].strftime("%F") %></small>
+          </td>
+          <td class="url-cell">
+            <small>
+	      <a href='<%= dojo[:url] %>'>
+		<span title="<%= dojo[:url] %>">
+		  <%= CGI.unescape dojo[:url].gsub('https://', '').gsub('http://', '').gsub('www.', '').chomp('/') %>
+		</span>
+	      </a>
+            </small>
+          </td>
+        </tr>
+      <% end %>
+    </table>
+
+    <div style='margin-top: 60px;'><a href='#top'>&uarr; 上に戻る</a></div>
+    <p>
+      <pre style='white-space: pre-wrap; margin-top: 60px; margin-bottom: 30px; color: #505050;'>
+	本ページにある統計情報は、現在 <a href='https://doorkeeper.jp/'>Doorkeeper</a> と <a href='http://connpass.com/'>connpass</a> にのみ対応しています。</pre>
+    </p>
+  </div>
+</section>

app/views/dojos/show.html.erb

@@ -25,6 +25,7 @@
 	</ul>
       </div>
     <% end %>
+    <small><%= link_to raw("&raquo; 他の Dojo 一覧を見る"), dojos_path %></small>
   </p>
 
   <style type="text/css">
@@ -98,5 +99,9 @@
 	統計情報は現在 <a href='https://doorkeeper.jp/'>Doorkeeper</a> と <a href='http://connpass.com/'>connpass</a> にのみ対応しています。</pre>
       </p>
     <% end %>
+
+    <div style='margin-top: 60px;'>
+      <small><%= link_to raw("&raquo; 他の Dojo 一覧を見る"), dojos_path %></small>
+    </div>
   </div>
 </section>