enumerizeで検索select box

ransack で検索フォームを作成する場合のenumerize を利用したselect boxの作成について。

github.com

github.com

課題

enumerize で検索用のselect boxを作成したいが options メソッドだと、

> Product.kind.options
=> [["キット", "kit"], ["おもちゃ", "toy"]]

となってしまう、やりたいことは enumerize の in で指定したvalueを利用したい。

理想は、

[["キット", 1], ["おもちゃ", 2]]

としたい。

解決方法

locale

ja:
  enumerize:
    product:
      kind:
        kit: キット
        toy: おもちゃ

モデル

class Product < ApplicationRecord
  extend Enumerize

  enumerize :kind, in: { kit: 1, toy: 2 }, predicates: { prefix: true }, scope: true
end

ヘルパー

module ProductsHelper
  def select_kinds
    Product.kind.find_values(*Product.kind.values.map(&:to_sym)).map { |kind| [kind.text, kind.value] }
  end
end

view

<%= f.select(:kind_eq, select_kinds) %>

<select name="q[kind_eq]" id="q_kind_eq">
<option value="1">キット</option>
<option value="2">おもちゃ</option>
</select>

となる。

最後に

enumerize :kind, in: { kit: 1, toy: 2 } の in で指定しているhashを定数にするという案もあるが、localeのこととかを考えると、この実装が良いと感じた。

デザイン知識がないプログラマーが「見つけやすさのデザイン」を考える

ここまで で Railsアプリケーション構築のフロントエンドの設定まで完了。ここからはWebアプリケーションのサイト構成とページ構成を検討する。

l-chika.hatenablog.com

検討にあたっては、サイト・ページ構成をーから構築した経験がないので、取っ掛かりとして 情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計 の内容を参考に進めてみた。

最初のサイト・ページ構成案 (「シンプルすぎる」情報モデル)

ザックリ前提・要件

• だれ向け：電子工作に興味がある人が訪れるサイト
• どんなサイト：電子工作にまつわる製品が網羅できるページがある

サイト構成

ページ

Bootstrapを学習するついでに、ワイヤーフレームではなく、いきなりviewを作成。

メイン

---

製品一覧

---

製品詳細

---

と、これでは全然イケてないので改修を試みる。

ユーザの「情報ニーズ」を考える

「ユーザーが何を求めているのか？」を考え、その特性を分類し整理してみる。

それにより、

ユーザーの主要情報ニーズと情報探索行動の典型を知ること。ユーザがシステムに何を求めているかの理解。

を体感。

本書から引用。

• 既知情報検索：探しているものが何か、誰に聞けばいいか、どこで探せばいいのかを知っている
• 探求探索：自分が本当に探しているものを把握してない。ユーザは検索やブラウジングのプロセスで自分が何を求めているかを知る。「正しい」答えに対する明確な期待もなければ、探しているものをはっきりと知る必要もない。ユーザはいくつかよい結果を得られれば満足で、それを踏み台として次の検索を繰り返す
• 全数探索：「あらゆる物を手に入れたい」。ユーザーは特定のトピックに関する何もかも、一つ残らず探している。ユーザーは多様な言い方で探しているものを表現でき、さまざまな用語を駆使して忍耐強く検索を続ける。他の情報ニーズに比べてより多くの検索結果を辛抱強く渡り歩く
• 再検索：これまでに見つけた便利な情報の断片を再検索する。「あとで読む」サービスを使って、もっと時間のある時にページに戻る

で、そこから自分なりに解釈。

分類	ザックリと表現	必要な機能
既知情報検索	能動的な人	フリーワード検索
探求探索	目的がふんわり	選択肢や何かの括りでの検索
全数探索	とにかく見る	???
再検索	再訪者	お気に入り

当初の自分が想定したユーザーとその動きを考えると、「探求探索」が該当するユーザーのような気がしてきた。 本来は全分類について検討するのだろうが、まずは「探求探索」に対してどうすれば良いかを考える。

そこで、

1. オーガニック検索で「電子工作 キット 入門」のようなワードで流入
2. メイン or 製品一覧にランディング。
3. 興味が湧く製品詳細に導く

というアウトラインを決めて、「探求探索」のユーザーの目的(ゴール)を設定する。

そうした時に、現状の構成では、製品に興味をもってもらい、サイトを回遊するたのフックが弱いと感じた。 そこで製品の「括り」のような取っ掛かりが良い気がした。

改変後

製品を「特徴」で分類し、分類での絞込ができるようにしてみる。

• メインに「特徴」導線を追加。特徴での絞込結果に遷移
• 製品一覧に「特徴」での検索を追加

サイト構成

ページ

メイン

---

製品一覧

---

という、大したことない改修ですが、なんか漠然と導線を作ったのではなく、体系的に自分で考えて実装をしたことで「 構成を真剣に考える 」良い経験になった気がする。

最後に

ユーザーの主要情報ニーズと情報探索行動の典型を知ること。ユーザがシステムに何を求めているかの理解。

とりあえず、情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計 からヒントをえて、気づいた点から対応。 これから更に読み進めて

• 情報の組織化
• ラベリング
• ナビゲーション
• 検索

という要素を検討していく。

本書は若干内容が発散的にも感じる部分もあるが、情報アーキテクチャという観点から、サイトを構成する前提、要素整理やアプローチの方法等のアイデアを得るには良い本だと思った。

こういった事に疎かった自分にとっては新たな気づきが得られた。

近い内容で 情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計 も参考になりそう。

関連する本

情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計

IAシンキング Web制作者・担当者のためのIA思考術

rails generateコマンドで忘れがちな事「rails g -h」

rails generate コマンドで、よく使うけど忘れてしまいがちな以下をメモ。

• generateが可能な事・オプション。Rails標準でgenerateできるものは大体理解しているが、追加した gem のgenerate方法
• 生成されるものを制限するskipオプションについて
• モデルを作成するgenerateで指定する型
• limit の長さでRDBの型が異なる場合の長さの指定

---

generate

Rails標準に加え、generateを提供しているgemを調べるとき。 モデルを生成した後からrspec や factory_girl のgemを追加して、対応するモデルのspec・factory_girlのファイルをそれぞれ追加生成する場合に、いちいち自分でいちから生成するのでなく generate で生成する場合の調べ方。

以下、rspec 、factory_girl をインストールして、rails g -h した結果。

$ ./bin/rails g -h
-- 中略 --
Rails:
  assets
  channel
  controller
  generator
  helper
  integration_test
  jbuilder
  job
  mailer
  migration
  model
  resource
  scaffold
  scaffold_controller
  task

FactoryGirl:
  factory_girl:model

Js:
  js:assets

Rspec:
  rspec:controller
  rspec:feature
  rspec:helper
  rspec:install
  rspec:integration
  rspec:job
  rspec:mailer
  rspec:model
  rspec:observer
  rspec:request
  rspec:scaffold
  rspec:view

TestUnit:
  test_unit:controller
  test_unit:generator
  test_unit:helper
  test_unit:integration
  test_unit:job
  test_unit:mailer
  test_unit:model
  test_unit:plugin
  test_unit:scaffold

例えば、Userモデルのfactory_girlを生成する場合

./bin/rails g factory_girl:model user

さらにgenerate ごとの詳細を知りたければ、そのヘルプを見ることが可能。

$ ./bin/rails g scaffold -h

skip

scaffoldで assets や helper を生成したくないとき。

$ ./bin/rails g scaffold product name:string url:string --skip-assets --skip-helper
      invoke  active_record
      create    db/migrate/20170202010817_create_products.rb
      create    app/models/product.rb
      invoke  resource_route
       route    resources :products
      invoke  scaffold_controller
      create    app/controllers/products_controller.rb
      invoke    erb
      create      app/views/products
      create      app/views/products/index.html.erb
      create      app/views/products/edit.html.erb
      create      app/views/products/show.html.erb
      create      app/views/products/new.html.erb
      create      app/views/products/_form.html.erb
      invoke    jbuilder
      create      app/views/products/index.json.jbuilder
      create      app/views/products/show.json.jbuilder
      create      app/views/products/_product.json.jbuilder

qiita.com

利用可能な型

rails generate model NAME [field[:type][:index] field[:type][:index]] [options]

等で、カラムのtypeを指定する場合の利用可能な型

$ ./bin/rails g model -h
- 中略 -
    You can use the following types:

        integer
        primary_key
        decimal
        float
        boolean
        binary
        string
        text
        date
        time
        datetime

qiita.com

limitの長さ

integerとtextは limit オプションの長さによってRDBの型が変わる

qiita.com

関連するおすすめ本

Ruby on Rails 5 超入門

Railsのモダンなフロントエンド環境とか良く分からないので、ひとまずRails5+npm+sprockets+bootstrap4

Railsのフロントエンドといえば、ES6をES5へ変換してくれるBabelの利用や、WebPackを利用したフロントエンド環境の構築等がよく記事になっているが、そこらへんの流れについていくのが辛い。

今後はRailsでもnpm・yarnとかを標準で利用していく流れもあるとか。 他にも色々な便利Gemがあるが、どれを利用して良いかわからない。

ということで、ここではひとまず個人サイトなので、 「ES6をサポートしてくれるブラウザでみてね」 という前提(モダンブラウザはほんとんどES6まではサポートしてるみたいだけど)で、自分の「やりたい事」を満たしてくれる、自分なりのフロント環境を構築。

Railsの開発環境の前提はこちらで。

l-chika.hatenablog.com

やりたい事

• ライブラリ等のjavascript,cssの利用はgemやjsファイルを自分で/assetsに配置でなくnpmで管理したい。
• jquery_ujsは利用したい
• sprocketsはそのまま利用
• CoffeeScriptは不要
• Sassを利用
• bootstrap4を利用したい
• 運用をできるだけ簡素にしたい

前提

• Ruby: 2.3.3
• Bundler: 1.13.7
• Rails 5.0.1
• Node: 6.9.4
• npm: 3.10.10

不要なGemを削除

$ vim Gem

以下を削除

• coffee-rails
• jquery-rails

$ rm -rf  vendor/bundle
$ bundle install --path=vendor/bundle

npmでフロントのライブラリ追加

$ npm init -y
$ npm install jquery --save
$ npm install jquery-ujs --save
$ npm install bootstrap@4.0.0-alpha.6 --save

.gitignoreに以下を追加

• /node_modules/
• /public/assets/

application.js、application.cssを変更

application.js

//= require jquery_ujs
//= require_tree .

↓

//= require jquery-ujs
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap

jquery_ujsとjquery-ujs がアンダースコアとハイフンの違いに嵌った

application.css

ファイル名を変更

application.css -> application.scss

application.scssを修正

*= require_tree .
*= require_self

↓

@import 'bootstrap/scss/bootstrap';

sprockets設定

config/initializers/assets.rb の変更

Rails.application.config.assets.paths << Rails.root.join('node_modules')

を設定

productionモード確認

precompileと表示の確認

$ RAILS_ENV=production ./bin/rails assets:precompile assets:clean
$ vim config/database.yml
$ SECRET_KEY_BASE={HASH} RAILS_SERVE_STATIC_FILES=true ./bin/rails s -e production

確認が終わったら

/public/assets/ を削除

$ ./bin/rails assets:clobber

関連本

Ruby on Rails 5 超入門

Ubuntu 16.04.1 LTSでCloudWatch Logs(awslogs)インストール

手順

$ curl https://s3.amazonaws.com/aws-cloudwatch/downloads/latest/awslogs-agent-setup.py -O
$ sudo python ./awslogs-agent-setup.py --region ap-northeast-1
$ sudo vim /var/awslogs/etc/awslogs.conf

$ sudo service awslogs status

Failed to start awslogs.service: Unit awslogs.service not found.

と表示される

$ sudo systemctl enable awslogs
$ sudo systemctl start awslogs

で、OK

参考

qiita.com

docs.aws.amazon.com

RailsでExpected string default value for '....'

Rails5で開発していたら、generateで Expected string default value for というメッセージが表示された。

$ ./bin/rails g controller pages main --no-helper --no-assets
Expected string default value for '--test-framework'; got false (boolean)
Expected string default value for '--jbuilder'; got true (boolean)
Expected string default value for '--test-framework'; got false (boolean)
Expected string default value for '--helper'; got true (boolean)
Expected string default value for '--assets'; got true (boolean)
      create  app/controllers/pages_controller.rb
       route  get 'pages/main'
      invoke  erb
      create    app/views/pages
      create    app/views/pages/main.html.erb

調べると、thor が原因。バージョンを明示して、bundle installをすれば、メッセージが表示されなくなる

$ vim Gemfile

gem 'thor', '0.19.1'

参考

stackoverflow.com

qiita.com

Railsアプリケーション構築時に初期にしたこと

Railsでアプリケーション作成後に、ついつい忘れがちになるのでメモ。

前提

環境、Railsアプリケーションの作成はこちら。

l-chika.hatenablog.com

手順

やったこと

• Timezone： アプリケーションとDB保存時の時間を日本時間にする
• I18n：文言の日本語対応

変更前

$ ./bin/rails c
> helper.number_to_human(1234) 
=> "1.23 Thousand"

> Time.current
=> Tue, 24 Jan 2017 01:32:15 UTC +00:00

> ActiveRecord::Base.default_timezone
=> :utc

> MyApp::Application.config.active_record.default_timezone
=> nil

TimeZone

$ vim  config/application.rb

  class Application < Rails::Application
    config.time_zone = 'Tokyo'
    config.active_record.default_timezone = :local

    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
  end

locale

$ vim Gemfile

gem 'rails-i18n', '~> 5.0.0'

$ bundle install --path=vendor/bundle/

確認

$ ./bin/rails c
> helper.number_to_human(1234) 
=> "1.23 千"
> Time.current
=> Tue, 24 Jan 2017 10:31:46 JST +09:00

> ActiveRecord::Base.default_timezone
=> :local

> MyApp::Application.config.active_record.default_timezone
=> :local

ちなみに

この設定をしても、ActiveRecordの保存等がJSTにならない場合は、OSのタイムゾーンがUTCになっている可能性が高い。 その場合は、OSのTimeZoneをJSTに変更する。

Ubuntu_14.04の場合はこちらを参考。

www.server-world.info

関連する書籍

はじめての「Ruby on Rails」5 (I・O BOOKS)