Rails覚書2: 実用的なRailsサービスを作ろう

#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

### ウェルカムページを修正する

```app/views/welcome/index.html.erb
cat
<h1>Lunch Map</h1>
<p>Tasty meal on your place!</p>
```

config/routes.rbに追加

```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:カテゴリリストとお店リストを関連付けよう 
ここでは、ランチマップのカテゴリリストとお店リストを関連付けて、このお店リストに、カテゴリ名を表示するよう設定します。

### 相互にリンクする
自動生成した掲示板の間で相互にリンクを貼るには、次のように記述します。

```app/views/shops/index.html.erb

<%= link_to 'New Shop', new_shop_path %> <%= link_to 'Show Categories', categories_path %>
```

```app/views/categories/index.html.erb
<%= link_to 'New Category', new_category_path %> <%= link_to 'Show Shops', shops_path %>
```

### 登録時に、カテゴリを選択できるようにする
登録・修正フォームで、カテゴリを選択できるようにするには、次のように記述します。

app/views/shops/_form.html.erb

<div class="field">
  <%= f.label :category_id %>
  <%= f.select :category_id, Category.all.map{|o| [o.name, o.id]} %>
</div>


### カテゴリを表示
お店リストの一覧表示と詳細表示にカテゴリ名を表示するには、次のように記述します。

```app/view/shops/index.html.erb

<td><%= shop.category.name %></td>
```

```app/view/shops/show.html.erb
<%= @shop.category.name %>
```


-----------------------------------------------------
##04:検索機能を追加しよう 
ここでは、ランチマップのためにお店の名前の検索機能を作成します。そのために、検索フォームを追加します。

### Viewに検索フォームを追加
```/app/views/shops/index.html.erb

<%= 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メソッドを修正

```/app/controllers/shops_controller.rb

def index
  if params[:name_key]
    @shops = Shop.where('name LIKE ?', "%#{params[:name_key]}%")
  else
    @shops = Shop.all
  end
end
```

###ウェルカムページからリンクする

```app/views/welcome/index.html.erb

<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/tutorial

- Google Maps Embed APIの使い方まとめ！カスタム地図を埋め込もう
https://syncer.jp/google-maps-embed-api-matome

- Google Maps Embed API
https://developers.google.com/maps/documentation/embed/guide



自分でウェブサービスを公開する場合には、以下の手順を参考に取得してください。

1. Google Developers Consoleにアクセスする

Google Developers Console
https://console.developers.google.com/

2. プロジェクトを作成を選択
3. Google APIが表示されたら、Google Maps APIから「Google Maps Embed API」を選択
4. 「有効にする」をクリック
5. 「認証情報を作成」をクリックして、「必要な認証情報」ボタンをクリック
6. 表示されたAPIキーを記録する

※特定のWebサービスだけから利用できるよう、「API利用制限」を設定することをお勧めします。
※この手順や利用範囲はGoogle側で変更される場合があります。

### ビューに、マップエリアを追加

```app/views/shops/show.html.erb

<%= 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を選択できるようにしてください。


```app/views/cats/_form.html.erb
#ラベルとセレクトボックスを記述する
  <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に記述してあります。



```app/views/cats/index.html.erb
<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マップを表示するエリアを記述する

```app/views/cats/show.html.erb
<%= 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>
```