DropboxのPublicフォルダをjsonファイル置き場にしてたが2017年3月15日で廃止したので代替としてFC2ホームページを使うことにした
DropboxのPublicフォルダにはWebホスティング機能があり、そこにファイルを置いて置くだけで世界に公開できるという便利なものだったのですが、
無料ユーザーはとうとう廃止になってしまいました。
私はjsonファイルを置いて検証用のサーバーみたいな使い方をしていたんですが、今回の変更でこの使い方は出来なくなってしまいました。
代替としてブログでおなじみのFC2のサービスの中から「ホームページ」のサービス(「ブログ」ではありませんよ)を使ってjson置き場にすることにしました。
jsonファイルをアップロードして開くとブラウザのURLのBOXのところにURLが表示されるのでそれを使います。
1Gフリースペースがあるので私みたいな使い方なら余裕です。
Material Design Lite for SassでRailsアプリケーションにGoogleのMaterial Design LiteとMaterial IconsとRobotoフォントを導入する
Google製のマテリアルデザインとマテリアルアイコンとRobotoフォントをRubyアプリケーションで使うための「Material Design Lite for Sass」というgemを使います。
このgemはgoogle製Material Design LiteのSaasバージョンです。
導入
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を見て下さい。
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を使用して、検索機能を実装する一連の処理をメモします。
下準備
サンプルのアプリケーションを新しく作ります。
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 %>
以上です。