DropboxのPublicフォルダをjsonファイル置き場にしてたが2017年3月15日で廃止したので代替としてFC2ホームページを使うことにした

DropboxのPublicフォルダにはWebホスティング機能があり、そこにファイルを置いて置くだけで世界に公開できるという便利なものだったのですが、
無料ユーザーはとうとう廃止になってしまいました。
私はjsonファイルを置いて検証用のサーバーみたいな使い方をしていたんですが、今回の変更でこの使い方は出来なくなってしまいました。
代替としてブログでおなじみのFC2のサービスの中から「ホームページ」のサービス（「ブログ」ではありませんよ）を使ってjson置き場にすることにしました。

jsonファイルをアップロードして開くとブラウザのURLのBOXのところにURLが表示されるのでそれを使います。

fc2.com

1Gフリースペースがあるので私みたいな使い方なら余裕です。

Material Design Lite for SassでRailsアプリケーションにGoogleのMaterial Design LiteとMaterial IconsとRobotoフォントを導入する

Google製のマテリアルデザインとマテリアルアイコンとRobotoフォントをRubyアプリケーションで使うための「Material Design Lite for Sass」というgemを使います。

github.com

このgemはgoogle製Material Design LiteのSaasバージョンです。

github.com

導入

Gemfileに次のように記述します。

gem 'material_design_lite-sass'

bundle install しておきます。

/app/assets/stylesheets/application.scss に次のように記述します。

@import 'material';

Attention! デフォルトでは.cssの拡張子でファイルが作成されます。.scssに変更し、*= require_tree . と *= require_selfを削除する必要があります。
オリジナルのapplication.cssをそのままにしたい場合、同じフォルダにcustom.scssを作成し@import 'material'する方法もあります。

app/assets/javascripts/application.js に次のように記述します。

//= require material

TurbolinksについてはMaterial Design Liteはサポートしてないので、READMEを見て下さい。

デフォルトではマテリアルデザインの全てのコンポーネントがimportされていますが、個別に指定する方法もあります。

Material Iconの使い方

<i class="material-icons">info</i>

上の例では"info"のところにマテリアルアイコンの名前を入れます。
マテリアルアイコンの名前は↓のリストにあるものです。
material.io

Saasバージョンで使える変数はこちら↓
material_design_lite-sass/_variables.scss at master · rubysamurai/material_design_lite-sass · GitHub

変数の内容をoverrideする場合は、@importする前に記述する必要があります。↓が例です。

$layout-header-bg-color: rgb(128,128,128) !default;
@import 'material';

ransackでRailsアプリケーションに検索機能をつける

Railsを勉強中です。

ransackというgemを使用して、検索機能を実装する一連の処理をメモします。

github.com

下準備

サンプルのアプリケーションを新しく作ります。
railsのバージョンは5.0.1です。

$ rails new _5.0.0.1_ new exm-ransack
$ cd exm-ransack

以前書いたエントリーと同じモデルを作り、同じデータを投入します。
↓以前のエントリ
sakura-bird1.hatenablog.com

サンプルデータ(csvデータ)をdbフォルダに入れておきます。
postal_code_tokyo_with_header.csv - Google ドライブ

今回はscaffoldでアプリケーションのひな型を作ります。

$ rails g scaffold PostalCode local_goverment_code:integer postal_code_old:integer postal_code:integer prefecture_katakana:string ward_katakana:string town_katakana:string prefecture:string ward:string town:string

$ rails db:migrate

db/seeds.rb に次のように記述します。

require 'csv'

PostalCode.delete_all

csv_data = CSV.read('db/postal_code_tokyo_with_header.csv', headers: true)
csv_data.each do |data|
  PostalCode.create!(data.to_hash)
end

$ rails db:seed
を実行します。
$ rails s
を実行します。
http://localhost:3000/postal_codes
にアクセスするとうまくデータが投入できているのがわかります。

検索機能を実装する

Gemfileに以下を追加する

gem ‘ransack'

$ bundle install
を実行します。

controllerのindexを次のように書き換えます。
postal_codes_controller.rb

# GET /postal_codes
# GET /postal_codes.json
def index
  # 検索フォームの入力内容で検索する
  @q = PostalCode.search(params[:q])

  # 重複を排除
  @postal_codes = @q.result(distinct: true)
end

viewに検索フォームを付けます。
app/views/postal_codes/index.html.erb

<%= search_form_for @q do |f| %>
    <%= f.label :town_cont %>
    <%= f.search_field :town_cont %>

    <%= f.submit %>
<% end %>

search_form_forというヘルパーメソッドが用意されており、検索フォームを生成してくれます。
:town_cont というのはtownフィールドに含まれている(contain)ものを検索するという意味です。

http://localhost:3000/postal_codes
にアクセスすると検索フォームが上の方に出来ていることがわかります。

検索フォームを次のようにフィールド名を_or_でつなげて書いたとすると、このフィールドのどこかで検索文字を含むものを結果に表示します。
フィールド名1_or_フィールド名2_（中略）_cont

<%= search_form_for @q do |f| %>
    <%= f.label :prefecture_katakana_or_ward_katakana_or_town_katakana_or_prefecture_or_ward_or_town_cont %>
    <%= f.search_field :prefecture_katakana_or_ward_katakana_or_town_katakana_or_prefecture_or_ward_or_town_cont %>

    <%= f.submit %>
<% end %>

以上です。