手取り足取りプログラミング

cloud9、railsについて自分がつまずいた所を詳しく説明します。なぜなら一番読み返すのは自分だから。

【Rails】ページングを実装する「kaminari」

準備

ページングを実装する前にたくさんのデータと表示するページを作成します。

下記コマンドを実行してデータを表示するページを作成します。

rails g scaffold user name
rake db:migrate

1000件のデータを作成します。

db/seeds.rb

1000.times do |i|
  User.create!(
    name:    "名前#{i}",
  )
end

下記コマンドを実行してデータを投入します。

rake db:seed

実装

kaminariのインストール

kaminariをGemfileに追加します。

Gemfile
gem 'kaminari'

kaminariをインストールします。

bundle install

コントローラーの修正

users_controller.rb の index 部分を下記のように変更します。

app/controllers/users_controller.rb
  def index
    @users = User.page(params[:page])
  end

ビューの修正

erbの場合

3、23行目を追加します。

app/views/index.html.erb
<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<%= page_entries_info @users %>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<%= paginate @users %>
<br>
<%= link_to 'New User', new_user_path %>
slimの場合

2、17行目を追加します。

app/views/index.html.slim
h1 Listing users
= page_entries_info @users
table
  thead
    tr
      th Name
      th
      th
      th
  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, data: { confirm: 'Are you sure?' }, method: :delete
= paginate @users
br
= link_to 'New User', new_user_path

ついでにroutesを直しておく

config/routes.rb
root 'users#index'

デザイン

下記コマンドを実行します。

rails g kaminari:views bootstrap4

デザイン適応前

f:id:yonayonaru:20161029180758p:plain

デザイン適応後

f:id:yonayonaru:20161029181222p:plain

ソース公開

cloud9のソースを公開します。

【Rails】ActiveResourceを使ってAPIを利用する方法

RailsでActiveResourceを利用してAPI を使う方法をまとめます。
今回はホットペッパーのグルメサーチAPIを使用します。

この記事はCloud9で下記記事の通り設定した前提で進めます。
yonayonaru.hatenablog.com

リクルートWEBサービスに登録する

登録方法

リクルートWEBサービスページを開きます。
webservice.recruit.co.jp

画面左上の新規登録ボタンを押します。
f:id:yonayonaru:20161004000239p:plain


画面下の「上記の利用規約およびプライバシーポリシーに同意する」にチェックを入れます。
画面下のメールアドレス欄にメールアドレスを入力します。
送信ボタンを押します。
f:id:yonayonaru:20161003235913p:plain

届いたメールのURLをクリックすると登録完了ページに移動します。
f:id:yonayonaru:20161004004040p:plain

APIキー取得

再度メールが届きAPIキーが載っています。
このAPIキーがないと API実行できないので、大切に保管しておいてください。

ActiveResourceをインストールする

ActiveRecord ではなく、ActiveResource を使用するのでまずはインストールします。
Gemfileに下記内容を追記します。

Gemfile

gem 'activeresource'

下記コマンドを実行してインストールします。

bundle install

モデルを作成する

モデル作成コマンド

以下のコマンドを実行してモデルを作成します。

rails g model hotpepper

migrationファイル削除

モデルを作成するとmigrationファイルが作成されます。
いらないので作成されたmigrationファイルは削除してください。
削除するか、migration実行しないとプログラム起動時にエラーが出ます。

↓このファイルを削除(数字のところは作成日時です)
db/migrate/20161004141935_create_hotpeppers.rb

コーディング

モデルを以下のように変更します。
変更前

app/models/hotpepper.rb

class Hotpepper < ActiveRecord::Base
end

変更後(赤字部分忘れやすいので気をつけて)

app/models/hotpepper.rb

class Hotpepper < ActiveResource::Base
  self.site = "http://webservice.recruit.co.jp/"
  self.format = :json
  APIKEY = "xxxxxxxxxx" # ホットペッパー登録時のメールに記載されたAPIキーを入力してください

  def self.find_by_keyword(keyword)
    self.find(:one, from: '/hotpepper/gourmet/v1/',
      params: {key: APIKEY, format: 'json', keyword: keyword})
  end
end

プログラム内の説明
行数 名前 説明
2 self.site サイトURL
3 self.format jsonにする。デフォルトはxml
4 APIKEY ホットペッパーAPIキー
5 self.find :oneはよくわからない。調べて追記します。
fromにはself.siteに続くURL
6 params ホットペッパーAPIリファレンスのパラメータ。
KEYは必須。
(例)緯度・経度で検索したい場合
params: {key: APIKEY, format: 'json', lat: lat, lng: lng}

コントローラー作成

コントローラー作成コマンド

以下のコマンドを実行してコントローラーとviewを作成します。

rails g controller hotpeppers index

コーディング

コントローラーを以下のように記述してください。

app/controllers/hotpeppers_controller.rb

class HotpeppersController < ApplicationController
  def index
    h = Hotpepper.find_by_keyword('新宿')
    @count = h.attributes['results_available']
    @shops = h.attributes['shop']
  end
end

ビュー作成

controller作成と同時にindex.html.erb が作成されています。

コーディング

件数を表示し、お店のアイコン、店名(ホットペッパーへのリンク)、住所、営業時間を表示させます。
ホットペッパーAPIを利用するときはクレジット表記が必要なので、最後に追加しています。
htmlテンプレートがerbの場合(普通はこっち)

app/views/hotpeppers/index.html.erb

<%= @count %>
<table class="table table-striped">
  <% @shops.each do |shop| %>
    <tbody>
      <tr>
        <td rowspan="3">
          <%= image_tag(shop.logo_image) %>
        </td>
        <td>
          <%= link_to(shop.name, shop.urls.pc) %>
        </td>
      </tr>
      <tr>
        <td>
          <%= label_tag(shop.address) %>
      </tr>
      <tr>
        <td>
          <%= label_tag(shop.open) %>
        </td>
      </tr>
    </tbody>
  <% end %>
</table>
Powered by
<a href="http://webservice.recruit.co.jp/">ホットペッパー Webサービス</a>

htmlテンプレートがslimの場合

app/views/hotpeppers/index.html.slim

= @count
table.table.table-striped
  - @shops.each do |shop|
    tbody
      tr
        td rowspan="3"
          = image_tag(shop.logo_image)
        td
          = link_to(shop.name, shop.urls.pc)
      tr
        td
          = label_tag(shop.address)
      tr
        td
          = label_tag(shop.open)
| Powered by
a href="http://webservice.recruit.co.jp/"
  | ホットペッパー Webサービス

その他

ルーティング

ルートを作成したページにしておきましょう。
に以下を追記します。

config/routes.rb

root 'hotpeppers#index'

完成

起動して確認してみてください。
起動は画面上部真ん中の【Run Project】を押します。

完成イメージ

f:id:yonayonaru:20161004233439p:plain

サンプルソース

今回作成したソースは公開します。
下記リンクからどうぞ。APIキーは xxx... にしているので正しいキーを入力しないとデータ取得できません。
サンプル
サンプル slim

【Rails】Slimの使い方

slimの使い方まとめておきます。
と言っても使い始めたばかりなので後々追記していきます。
自分用メモレベルですので、他の人の記事見たほうが良い。

そもそもSlimって何?

一言で言うと便利なテンプレートエンジンのこと。
railsのデフォルトはerb形式で、viewフォルダ内のファイルは ファイル名.html.erb となっている。
Slimを使うと ファイル名.html.slim になる。
どちらもhtmlにプログラムを埋め込めるものだが、erbに比べて記述がとても楽。

どれくらい楽になるの?

どれくらい差があるのか下記のコマンドerb、slimeそれぞれで実行して自動生成される index.html.erb(slim)の差を比べてみます。
Slimをインストールしてコマンドを入力すると自動生成されるHTMLファイルもSlim形式になるよ。便利だね。

rails g scaffold user name email

下記のような登録したデータ一覧が表示されるファイルが自動生成されました。これで記述量を比較します。
f:id:yonayonaru:20161003075527p:plain

user.html.erb(空行は削除した)24行 477字

<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<br>
<%= link_to 'New User', new_user_path %>


index.html.slim(空行は削除した)19行 293文字

h1 Listing users
table
  thead
    tr
      th Name
      th Email
      th
      th
      th
  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = user.email
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, data: { confirm: 'Are you sure?' }, method: :delete
br
= link_to 'New User', new_user_path

Slimが圧倒的に書く量が少ない。

テンプレート 文字数
erb 24 477
slim 19 293

Slimの使い方

変換ツール

変換ツールがあるので困ったらこれで
html2slim.herokuapp.com

タグの書き方

HTMLのタグは<>でくくるけどいらない。閉じタグもなし。

<title>タイトル</title>

って書きたいときは

title タイトル

だけ。楽だね。

埋め込みプログラムの書き方

erbで

<% @users.each do |user| %>

となっているところは

- @users.each do |user|

となる<% が - になって閉じタグなし

erbで

<%= link_to 'New User', new_user_path %>

となっているところ(表示するもの)は

= link_to 'New User', new_user_path

となる。<%= が = になって閉じタグなし

yieldとrenderのときは == とする。
(これでしばらく詰まってた)

閉じタグはどこにいったの?

Slimはインデントで判断します。

body
  p テスト文章

上記のように書くと下記のようになります。

<body>
  <p>テスト文章</p>
</body>


インデントを同じにすると

body
p テスト文章
<body></body>
<p>テスト文章</p>

となり、pがbodyの中に含まれなくなります。


とりあえず以上。後々更新する。多分

【Cloud9】Railsワークスペースのテンプレートを作成する

Cloud9登録していない人は先に前回の記事を参考に登録してください。
yonayonaru.hatenablog.com

はじめに

Cloud9では簡単にワークスペースの作成ができます。
ですがワークスペースを作成するたびに初期設定するのは面倒です。そこでテンプレートのワークスペース作成し必要な設定(設定やGemfile)をしておきます。ワークスペースを新規作成するときは、テンプレートワークスペースをクローンして作成することで初期設定済みのワークスペースが作成されます。

無料版ではprivateワークスペース(他の人が閲覧できない)は1つのみですが、publicワークスペース(他の人が閲覧できる)は無制限で作成できます。そのためテンプレート用はpublicで作成します。

完成したワークスペースを公開しています。
https://ide.c9.io/yonayonaru/template

バージョンは下記の通り
ruby 2.3.0
Rails 4.2.5

Railsワークスペースを作成する

ワークスペースを作成を開始する

ダッシュボード(ログインしたら最初に表示されるページ)内の create a new workspace をクリック
f:id:yonayonaru:20161002165757p:plain

ワークスペースの設定をする

Workspace name
ワークスペース名。templateと入力します。わかりやすければ何でもいいよ。
Description
説明なので何でもいいよ。日本語OKです。
Hosted workspace
public(他の人から閲覧できる)を選択してください。
Choose a template
Raisを選択する。

全て入力したらCreate workspaceボタンを押します。
f:id:yonayonaru:20161002234705p:plain

作成中の画面

1、2分で出来るので少し待ってね。
f:id:yonayonaru:20161002165818p:plain

ワークスペースが作成完了

f:id:yonayonaru:20161003000800p:plain
テンプレート用のワークスペースが作成されたので、いくつか設定を行っていきます。

タブサイズの設定

rubyでは一般的にタブサイズは2です。
Cloud9のデフォルトの設定は4担っているので、2に変更しましょう。

設定画面を開く

画面右上の設定ボタンを押します。
f:id:yonayonaru:20161003001045p:plain

Soft tabsの設定変更

変更後閉じてください。設定保存のボタンとかは特にありません。
f:id:yonayonaru:20161003001224p:plain

bootstrapの適用

bootstrapという簡単にいい感じにデザインしてくれるCSSフレームワークを適用します。

bootstrapインストール

Gemファイルに下記を追記してください。

Gemfile

gem 'bootstrap-sass' 

下記コマンドを実行してbootstrapをインストールします。

bundle install

bootstrap使用準備

ファイル名の変更をします。
変更前)app/assets/stylesheets/application.css
変更後)app/assets/stylesheets/application.css.scss

application.css.scssに赤字部分を追記します。

app/assets/stylesheets/application.css.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";

application.jsに赤字部分を追記します。

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

bootstrapの設定は以上です。

slimの設定

slimはhtmlを簡単に書くためのツールです。
railsではデフォルトのhtmlテンプレートはerbですが、slimの方が楽です。
erbの方が良ければこの設定はしなくてOKです。

slimのインストール

下記の内容をGemfileに追加してください。

Gemfile
gem 'slim-rails'

下記コマンドを入力してSlimをインストールします。

bundle install

app/views/layouts/application.html.erb を application.html.slim にリネームします。
その後、下記のように修正してください。

app/views/layouts/application.html.slim

DOCTYPE
html
  head
    title Workspace
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    == yield

slimの設定は以上です。

ワークスペースをクローンして作成する

以上で、テンプレート用のワークスペースができました。
このワークスペースをクローンして新規ワークスペースを作成します。

ダッシュボード表示

画面右上のアイコンをクリックし、Dashboardをクリックするとダッシュボードに戻ります。
f:id:yonayonaru:20161003001752p:plain

テンプレートワークスペースのコピー

テンプレートワークスペースのCloneボタンを押します。
f:id:yonayonaru:20161003003458p:plain

ワークスペース設定

Workspace name、Descriptionを入力し、Create workspaceボタンを押します。
f:id:yonayonaru:20161003003630p:plain

ワークスペース完成

f:id:yonayonaru:20161003003936p:plain

ワークスペースをprivateにする

publicのワークスペースをクローンして作成するとpublicになっているのでprivateに変更します。
publicのままでいいならやらないでいいです。

ワークスペース設定画面を開く

ダッシュボードを開き、privateにするワークスペースをクリックします。CloneとOpneボタン以外の場所をクリックする。
f:id:yonayonaru:20161003010232p:plain

設定画面に遷移する

下記の設定ボタンを押します。
f:id:yonayonaru:20161003010326p:plain

privateに変更する

privateを選択して、saveボタンを押します。
f:id:yonayonaru:20161003010639p:plain

確認する

ダッシュボードに戻るとprivateワークスペースには鍵アイコンが表示されています。
f:id:yonayonaru:20161003010749p:plain

完成

以上でワークスペースの作成と初期設定は終わりです。
以降の記事はこのテンプレート用ワークスペースをクローンしている前提で進めていきます。

サンプルソース

今回作成したテンプレートワークスペースを公開します。
サンプル
サンプル slim

【Cloud9】Cloud9に登録する

そもそもCloud9ってなに?

一言で言うとクラウド型IDEです。

クラウド

普通はプログラムする前の準備として環境構築が必要なんだけど、結構つまずく。だってみんなパソコンの環境が違うから。
その面倒な環境構築をCloud9が用意してくれて、利用者はそれをブラウザで使うだけ。ちょー楽。

IDE

プログラムって極端に言えばメモ帳で出来るけど、それでは効率が悪い。
プログラムに命令する言葉ってたくさんあるけど、全部覚えている人はいない。多分。
そこでIDEを使うと、pって入力するとpから始まる命令(println とか)が出てきて選んだりできる。
漢字って書けって言われると分からないけど、パソコンの入力で候補があるとどれか判断できるでしょ。それと一緒。
それだけではなく色々と便利な機能が付いているので、使わない手はないです。

ついでに無料

でも、それだけ便利ならお高いんでしょ?
いや実は無料で使えるんです。
もちろん有料プランの方が便利に使えますが、無料でも十分に使えます。
私も数ヶ月間無料プランで利用しています。

では登録しよう

登録先のURLはこちらhttps://c9.io

メールアドレスを登録する

メールアドレスを入力して Sign Up ボタンを押します。
f:id:yonayonaru:20161001182845p:plain

名前を登録する

あなたのこと何て呼べばいい?みたいなこと言っています。
日本語も入力可で、後から変更できます。
f:id:yonayonaru:20161001182842p:plain

ユーザーネームを登録する

ユーザーを識別するIDなので変更はできないし、他の人と被ってもダメ。
ユーザープロファイルのURLにも使われます。
f:id:yonayonaru:20161001182839p:plain

自分のことを教えてあげる

What kind of developer are you?
あなたの開発者としての種類を聞いています。
適切な選択肢を選んでください。
だいたいの人は Hobbyist (趣味)と答えておけば大丈夫です。

How will you use Cloud9?
Cloud9の使い方を聞いています。
適切な選択肢を選んでください。
だいたいの人は Hobby Project (趣味)を選んでおけば大丈夫です。
f:id:yonayonaru:20161001182835p:plain

入力内容を確認する

そのまま。入力した内容が正しいか確認してください。
f:id:yonayonaru:20161001182832p:plain

クレジットカード情報を入力する

登録完了時点ではFreeプランが選択されるし、あなたが有料プランを登録しない限り請求しないので安心してって言ってます。

Full name (card holder)
カードに記載されている名前
Card number
カード番号
Expires
有効期限
CVC
セキュリティコード。カードの裏面に書いてある番号最後の3桁の数字です( AMEXは表面で4桁)
Postal code
郵便番号

f:id:yonayonaru:20161001182828p:plain

人間?ロボット?

あなたが人間であればチェックつけておいてください(ボット対策)
f:id:yonayonaru:20161001182826p:plain

アカウント登録完了

これでアカウント登録できました。
f:id:yonayonaru:20161001182823p:plain

パスワードの設定

登録完了のメールが届きパスワード設定のリンクがあるのでクリックしてください。
f:id:yonayonaru:20161001182818p:plain

Cloud9利用準備完了

これでCloud9の利用準備が整いました。
おめでとう