「RubyOnRails」の記事 - Crieit

Railsでモーダルの出し分けを管理する

2020-05-01T22:32:30+09:00

Railsでモーダルの表示処理をまとめて衝突しないように管理する方法を紹介します。

背景

ツクリンクを運営する中でモーダルが少しづつ増え、衝突することがあったためモーダルの優先順位を付け、衝突しないよう実装をしました。

実装

前提

以下の３つのモーダルがあるとします。

A: 初回ログインで出すモーダル（全ページ）
B: 特定のユーザーにだけお知らせを出すモーダル（全ページ）
C: 特定のページで出すモーダル（Posts#show）

コードサンプル

全ページに出すモーダルはApplicationControllerで該当ユーザーか判断しモーダルに必要な情報をセットします。

# controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :set_modal_A
  before_action :set_modal_B

  def set_modal_A
    return if cookies['modal_A'].present? # 表示済みなら何もしない
    if is_first_signed_in? # 初回ログインか？
      @modal_A = { title: '表示に必要な情報など' }
    end
  end

  def set_modal_B
    return if cookies['modal_B'].present? # 表示済みなら何もしない
    if show_notice? # お知らせを出すユーザーか？
      @modal_B = true
    end
  end
end

Viewごとに出るモーダルは provide でモーダルをセット

# views/posts/show.html.erb
<% provide :modal, render('modal/C') %>

レイアウトのView（もしくはそれに準ずるパーシャル）でモーダルの出し分けを行います。
ifの上位にあるものが優先され、モーダルが複数renderされるのを防いでいます。

# views/layouts/application.html.erb
<% if yield(:modal).present? %>
  <%= yield(:modal) %>

<% elsif @modal_B.present? %>
  <%= render 'modal/B' %>
<% elsif @modal_A.present? %>
  <%= render 'modal/A' %>
<% end %>

各モーダルのViewでは表示を管理するCookieを保存するなどの処理をしています。

# views/modal/A.html.erb
<% cookies.permanent['modal_A'] = { value: true, expires: 1.day } %>
お知らせだよ！

Windows+Docker+Railsでsprocketsのエラーが出る時

2020-02-14T10:00:08+09:00

Docker for Windowsのコンテナ内でRailsを動かしていると、 Errno::EEXIST in Sessions#new というエラーが出るようになった。バージョンはRails5.1、sprockets3。具体的にはこんなエラー。

File exists @ dir_s_mkdir - /app/tmp/cache/assets/sprockets/v3.0/ta

何かよくわからないが、ファイルが作れないというエラー。そのパスを見てみても同じファイルはない。…と思いきや、Windowsの場合、大文字小文字を区別していないので大文字のファイルが見つかった。

ということでWindows環境特有の問題らしい。調べてみるとすでにissueが立っていた。

FileStore cache patch in v3.6 causes directory name collisions in Windows · Issue #283 · rails/sprockets

解決方法

で、上記のissueにとりあえず動かせる方法を書いてくれてる人がいた。デフォルトだとアプリケーションのtmpフォルダ内にファイルが作られてしまうが、それを変えてしまう方法。

config/initializers/assets.rb に下記を追記。

Rails.application.config.assets.configure do |env|
  env.cache = Sprockets::Cache::FileStore.new(
    ENV.fetch("SPROCKETS_CACHE", "#{env.root}/tmp/cache/assets"),
    Rails.application.config.assets.cache_limit,
    env.logger
  )
end

あとは.envでもdocker-compose.ymlでもいいので、キャッシュを保存したい、Windowsのフォルダをマウントしていないコンテナ内のフォルダをSPROCKETS_CACHEという環境変数で指定するだけ。コンテナ作成後の初回だけすごく時間がかかるので、docker-comose.yml内にこんな感じでボリュームを作っておくと早い。

web:
  environment:
    - SPROCKETS_CACHE=/cache
  volumes:
    - .:/app
    - cache:/cache

volumes:
  cache:

Rails6 ビューファイルにRubyのコード書く時の<% %>と<%= %>の違い

2019-12-18T23:02:34+09:00

<% %>と<%= %>の違い

: この中に書いたコードは表示されない。変数定義やif文などの記載に使う。
: この中に書いたコードは表示される。ビューファイル上に変数の値を表示したい時などに使用する

Faradayで変数内のデータをファイルとして送信する

2019-07-09T21:24:53+09:00

Faradayを使うと簡単にファイルをmultipart形式でPOSTしてアップロードしたりすることができる。

具体的にはUploadIOを使うことで簡単に指定できる。

params = {
  file: Faraday::UploadIO.new("file.txt", "text/plain")
}

ただ、送信したいデータを元々変数で持っている場合、この方法だとわざわざ一度ファイルに保存して送信しなければならない。テキストやRuby上で生成したCSV、ネットワーク経由で画像などはファイルでなく変数に持っているだけの場合も多いと思う。その場合はなんとなく面倒だし冗長。

この場合、UploadIOのソースを見てみたところIOであれば問題ないようなので下記のようにして文字列をそのまま送信することもできる。

params = {
  file: Faraday::UploadIO.new(StringIO.new(text_value), 'text/plain')
}

ソースはこのへん？　あとファイル名必要な時どうするのかは知らない。（と思ったらここのソースになんか書いてある）

https://github.com/socketry/multipart-post/blob/master/lib/composite_io.rb#L75

Web未経験から100日でリリース！「お笑いライブの検索サイト」をつくりました【個人開発】

2018-11-14T03:32:24+09:00

こんにちは、かしい（@rubys8arks）と申します。
SIerで働いていましたが、WEB業界への転職を目指しプログラミングの勉強を始めました。
データベースなどの知識は少しあったものの、Webアプリケーションの開発は今回が完全に初めてです!

作ったもの

お笑いライブの検索サイトです。日付やキーワードで東京近郊のお笑いライブを横断検索できます。
- ワラリー! - お笑いライブ検索(東京)

🎊Web系未経験の初心者が100日間で初めてのrailsサービスをリリース🎊👉https://t.co/qL6fAtOi5i首都圏のお笑いライブを日付やキーワードで横断検索できるサービスです！・5秒で使えるTwitterログイン・わかりやすいUI・13サイトからデータを毎日スクレイピングよかったら見てください〜✨ pic.twitter.com/7js7F9Bs8p
— かしい@お笑いSNSつくった (@rubys8arks) 11 novembre 2018

データはプレイガイドや劇場のサイトから自動でスクレイピングするほか、誰でもライブ情報を登録できるようになっています。

* ビジモ図鑑で配布されているキットをお借りしました。

サービスを作ったきっかけ

もともと「Walive!」というお笑いライブの検索サイトがあったのですが、そのサイトが2017年9月で突然閉鎖してしまったことがきっかけです。
せっかくお笑いファンの間で愛されているサイトだったのにもったいないなと思い、同じ機能(+α)を持った新しいサイトを作ろうと考えました。

どういう技術で動いてるか

初心者なのであまり凝った技術は使っていません！

バックエンド

Ruby on Rails

webスクレイピング用にMechanizeのgemを使ってます。サービス層は悪！と言われてることもあるのですが、コントローラーやモデルが見やすくなるのでサービス層、ヘルパー層も使いました。

サーバー

Heroku

手軽にデプロイできるHerokuのサーバーを使っています。
アクセスできない時間ができるのが嫌だったので、Herokuの有料プランにしています。
- Hobby Dyno $7/月 (システムダウンタイムなし、独自ドメインのかんたん設定）
- Heroku Postgres Premium ＄9/月(1000万行まで保存できる)

Herokuの有料プランは使わずにもっと安くする方法もあるみたいなんですが、一旦は設定のしやすさを優先しています。

フロントエンド

JQuery

さんざん「JQueryはオワコン」と言われていますが、ぐぐったときに出てくる情報が多いので一旦JQueryで実装しました。
日付の選択をカレンダ(flatpickr)で行えるようにしたり、アンケート結果をアコーディオンでぬるっと表示させたりしています。

fontawesome

みんな大好きfontawesomeです。
フォームのplaceholderにも使っています。

こだわったこと

UIとデザイン

「とにかく人に使ってほしい」という思いからUIとデザイン（特にライブの入力フォーム回り）にこだわりました。
実際にサービスへの反応も「デザインがいい！」というものが多く、ありがたい限りです。
CSSのフレームワークは使わず、TumblrのEstenテーマ、Twitter、InstagramなどのSNSを参考にしました。

URLを貼り付けたらogp情報を取ってライブの説明や出演者、画像などを自動入力できるように
会場をセレクトボックスで選択できるようにしつつ、自由入力欄も作ったり
フォーム数が多くなると入力したくなくなるので、重要でない項目はモーダルで分けたり

自分にとってはだいぶ使いやすくなったのですが、フォームはまだまだ改善の余地があるなと思っています。

SNSログイン

お笑いファンはだいたいTwitterで情報収集しているので、既にアカウントを持っているであろうTwitterアカウントで登録・ログインできるようにしました。
知らないサービスにいきなり「メールアドレスで登録できます！」と言われてもユーザー登録しないなと思ったので、SNS連携としました。

旧サイト「Walive!」にはなかった機能として、ライブへのいいね機能を2種類実装しました。
ライブに行く人あるあるとして、自分のスケジュールを把握できずに同じ日の同じ時間帯のライブ(いわゆる『被り』)のチケットを間違えて買っちゃったりします。
そういうのを防止したいなと思い、すでにチケットを買った・予約したライブは『絶対いく』、まだ買ってないけど行けたら行きたいライブは『気になる』で管理できるようにしました。

Webサービスをつくってみた感想

最初の1ヶ月はプログラミングスクールでhtml/cssとruby/Ruby on Railsを学んだのですが、スタッフの「1ヶ月ですぐ作れるよ！」という甘い声をうのみにして痛い目にあいました…。
スクールを終えた知識で作ってみても「え、いいねボタン自動で切り替わらないの？(JQueryが必要)」、「孫モデルまでアソシエーションしてデータ取るのどうやるの？」などなどわからないことだらけ。
最初の頃、家で同じエラーに1週間くらいわんわん言ってた私に「macbookを買え、もくもく会に行け」と言いたいです。
Twitter、Slack、もくもく会などでド初心者の質問に親切に答えてくださった皆さん、本当にありがとうございました！！

エンジニアの方にはあまりお笑いライブに馴染みはないかもしれませんが、せっかく作ったのでちら見してもらえれば幸いです。
出演者ですぐ探せるので、「こないだテレビで見た芸人面白かったな」というときはぜひ使ってみてください！

ワラリー! - お笑いライブ検索(東京)