Rails覚書2: 実用的なRailsサービスを作ろう
01:プロジェクトとウェルカムページを作ろう
このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリをRuby on Railsで作ってみましょう。まず初めに、プロジェクトとウェルカムページを作ります。
今回使ったLinuxコマンド
現在のディレクトリ(フォルダ)の位置を確認する。
pwd
ファイルやディレクトリの情報を表示する。
ls
lunchmapディレクトリに移動する。
cd lunchmap
今回使ったRailsコマンド
lunchmapプロジェクトを作成する。
rails new lunchmap
Rails用のWebサーバーを起動する
rails s -b 0.0.0.0
ウェルカムページを生成する
rails generate controller welcome index
ウェルカムページを修正する
cat
<h1>Lunch Map</h1>
<p>Tasty meal on your place!</p>
config/routes.rbに追加
Rails.application.routes.draw do
get 'welcome/index'
root 'welcome#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
02:カテゴリリストとお店リストを作ろう
ここでは、ランチマップのカテゴリリストとお店リストを作成します。そして、このお店リストに、カテゴリ名を表示するよう設定します。
今回使ったRailsコマンド
カテゴリリストを自動生成する
rails generate scaffold category name:string
rails db:migrate
お店リストを自動生成する
rails generate scaffold shop category_id:integer name:string address:string
rails db:migrate
03:カテゴリリストとお店リストを関連付けよう
ここでは、ランチマップのカテゴリリストとお店リストを関連付けて、このお店リストに、カテゴリ名を表示するよう設定します。
相互にリンクする
自動生成した掲示板の間で相互にリンクを貼るには、次のように記述します。
<%= link_to 'New Shop', new_shop_path %> <%= link_to 'Show Categories', categories_path %>
<%= link_to 'New Category', new_category_path %> <%= link_to 'Show Shops', shops_path %>
登録時に、カテゴリを選択できるようにする
登録・修正フォームで、カテゴリを選択できるようにするには、次のように記述します。
app/views/shops/_form.html.erb
カテゴリを表示
お店リストの一覧表示と詳細表示にカテゴリ名を表示するには、次のように記述します。
<td><%= shop.category.name %></td>
<%= @shop.category.name %>
04:検索機能を追加しよう
ここでは、ランチマップのためにお店の名前の検索機能を作成します。そのために、検索フォームを追加します。
Viewに検索フォームを追加
<%= form_tag('/shops', method: 'get') do %>
<%= label_tag(:name_key, 'Search name:') %>
<%= text_field_tag(:name_key) %>
<%= submit_tag('Search') %> <%= link_to 'Clear', shops_path %>
<% end %>
<br>
Controllerにindexメソッドを修正
def index
if params[:name_key]
@shops = Shop.where('name LIKE ?', "%#{params[:name_key]}%")
else
@shops = Shop.all
end
end
ウェルカムページからリンクする
<h1>Lunch Map</h1>
<p>Tasty meal on your place!!</p>
<p><%= link_to 'Show shops', shops_path %></p>
05:Googleマップを組み込む
ここでは、ランチマップに地図を追加します。そのために、このRailsアプリケーションにGoogleマップを組み込みます。
APIとは
APIとは、Application Programming Interfaceの略で、プログラムから別のプログラムの機能を呼び出すために
用意された命令や関数のこと。
Google MAP API
Google Maps API | Google Developers
https://developers.google.com/maps/Google Maps JavaScript API スタートガイド | Google Developers
https://developers.google.com/maps/documentation/javascript/tutorialGoogle Maps Embed APIの使い方まとめ！カスタム地図を埋め込もう
https://syncer.jp/google-maps-embed-api-matomeGoogle Maps Embed API
https://developers.google.com/maps/documentation/embed/guide
自分でウェブサービスを公開する場合には、以下の手順を参考に取得してください。
- Google Developers Consoleにアクセスする
Google Developers Console
https://console.developers.google.com/
- プロジェクトを作成を選択
- Google APIが表示されたら、Google Maps APIから「Google Maps Embed API」を選択
- 「有効にする」をクリック
- 「認証情報を作成」をクリックして、「必要な認証情報」ボタンをクリック
- 表示されたAPIキーを記録する
※特定のWebサービスだけから利用できるよう、「API利用制限」を設定することをお勧めします。
※この手順や利用範囲はGoogle側で変更される場合があります。
ビューに、マップエリアを追加
<%= content_tag(:iframe, 'map', src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q=' + @shop.address, width: 800, height: 400, frameborder: 0) %>
<br>
課題のRailsプロジェクト作成手順
演習課題1「Railsプロジェクトを作成する」
rails new catmap
演習課題1「Railsサーバーを起動する」
rails server -b 0.0.0.0
演習課題1「ページを追加する」
このプロジェクトに「https://xxx.paiza-app.cloud:3000/start/index」というWebページを作る
rails generate controller start index
演習課題2「掲示板を作成しよう」
「catmap」プロジェクト内に「feed」という掲示板を作る。
rails generate scaffold feed name:string
rails db:migrate
演習課題2「掲示板をさらに追加しよう」
「catmap」プロジェクト内に「cat」という以下の3カラム掲示板を作る。
- feed_id : integer
- name : string
- address : string
rails generate scaffold cat feed_id:integer name:string address:string
rails db:migrate
演習課題3「ネコの種別を選択できるようにしよう」
右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られています。また、この2つの掲示板は、すでに関連付けてあります。
エディタを使って、app/views/cats/_form.html.erbを修正して、catの登録／修正フォームで、catのfeedを選択できるようにしてください。
#ラベルとセレクトボックスを記述する
<div class="field">
<%= f.label :feed_id %>
<%= f.select :feed_id, Feed.all.map{|o| [o.name, o.id]} %>
</div>
演習課題4「検索機能を作成しよう」
右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られています。
また、この2つの掲示板は、すでに関連付けてあります。
エディタを使って、app/views/cats/index.html.erbを修正して、ネコ一覧(cats)で猫の名前を検索できるようにしてください。
検索するためのコードは、すでにapp/controllers/cats_controller.rbに記述してあります。
<p id="notice"><%= notice %></p>
<h1>Cats</h1>
#ラベルとテキストフィールド、登録ボタンを記述する
<%= form_tag('/cats', method: 'get') do %>
<%= label_tag(:name_key, 'Search name:') %>
<%= text_field_tag(:name_key) %>
<%= submit_tag('Search') %> <%= link_to 'Clear', cats_path %>
<% end %>
<br>
<table>
<thead>
<tr>
<th>Feed</th>
<th>Name</th>
<th>Address</th>
<th colspan=3></th>
</tr>
</thead>
<tbody>
<% @cats.each do |cat| %>
<tr>
<td><%= cat.feed.name %></td>
<td><%= cat.name %></td>
<td><%= cat.address %></td>
<td><%= link_to 'Show', cat %></td>
<td><%= link_to 'Edit', edit_cat_path(cat) %></td>
<td><%= link_to 'Destroy', cat, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Cat', new_cat_path %>
<%= link_to 'Show Feeds', feeds_path %>
演習課題5「地図を表示しよう」
Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られています。また、この2つの掲示板は、すでに関連付けてあります。
エディタを使って、app/views/cats/show.html.erbを修正して、ネコの居場所(address)をGoogleマップで表示できるようにしてください。
なお、Googleマップに必要なライブラリや設定は、すでに記述してあります。
content_tagで、Googleマップを表示するエリアを記述する
<%= content_tag(:iframe, 'map', src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q=' + @cat.address, width: 800, height: 400, frameborder: 0) %>
<br>