複数行対応のjQuery三点リーダ 「trunk8」をRailsアプリに組み込む

長いテキストやはみ出したテキストを「・・・」といった3点リーダに置き換える場合、1行であれば、CSSで事足りるのですが、複数行になると webkit-line-clamp で、できますが、IE(Internet Explorer)に対応してないので、jQueryのtrunk8というプラグインで対応しました。その他にも同様のプラグインがありましたが、ブラウザ幅の可変への対応など、個人的にはこちらが一番しっくりきましたので、Railsサイトにも導入してみました。

本家デモサイトはこちらです。
http://jrvis.com/trunk8/

Scaffoldでデモアプリを作ってみる

jQueryを使うためにこれらを読み込みます。

Gemfile

assets/javascripts/application.js

$ bundle install を実行します

サンプルデータを入れる

seed.rbに適当なデータを投入してみます。

db/seed.rb

$ rails db:seedを実行します

trunk8の導入

こちらのページからダウンロードしてtrunk8.jsというファイルをapp/assets/javascripts配下に配置します。

1箇所ならid指定でいいですが 動的に複数となるのでclassセレクタにして、該当箇所にあてます。

app/views/users/index.html.erb

オプションはlinesで行数を指定、tooltipは全文が隠れていてもツールチップで全文を表示してくれます。デフォルトでは true 担っています。「…」以外をあてたい場合は、fill: ”で指定します。デフォルトは’&hellip’です。
ブラウザ幅の可変対応には、window.onresizeイベントです。

jQuery

IE ではインライン要素に使った場合に、正常に動作しませんので、CSSなどでブロック要素にしておきましょう。

以上となります!!ご覧いただき、ありがとうございました!!😁

【Rails5】Select2で複数選択可能なセレクトボックスを作る

rails multi select2 jquery

jQueryのselect2を導入することで複数選択可能な、セレクトボックスを簡単に実装することができます。また、セレクトボックス内の検索も可能なので、項目が多い場合は便利です。今回はrailsのライブラリとして、gem “select2-rails”がありましたので、導入いたします。

Select2 for rails asset pipeline
https://github.com/argerim/select2-rails

環境はこちらです

select2-railsのインストール

app/assets/javascripts/application.js

app/assets/stylesheets/application.scss

モデルにサンプルデータを定義

本記事のサンプルデータはintegerのprefecture_codeをenumで用意しています。

app/models/user.rb

ビューでセレクトボックスの作成

本記事ではsimple_formを使ってセレクトボックスを作成しています。

app/views/users/_form.html.erb

jqueryは以下の記述だけで検索可能なセレクトボックスができます。

app/assets/javascripts/select2.js

また、multiple: trueを指定することで複数選択可能になります。

app/views/users/_form.html.erb

オプションの設定

オプションはこちらを参考に設定することができます。

app/assets/javascripts/select2.js

ブートストラップ テーマを利用する場合

bootstrapを使用している場合はテーマを使うことができます。

app/assets/stylesheets/application.scss

app/assets/javascripts/select2.js

以上です!ご覧いただき、ありがとうございました!!

【Rails5】アップロードした画像を即時プレビューする

rails upload preview jquery

Deviseのregistrations#editで画像をアップロードするの続きです。前回、carrierwaveを使ってUserのavatar画像をアップロードしました。今回はこのアップロードの際に、すぐにプレビューできるようにjQueryを追加しました。rails5ではturbolinksの挙動が変わったので$(document).on ‘turbolinks:load’としないとイベントが発火しないので注意が必要です。

元のフォーム

前回からのフォームです。current_userはサインインしているユーザーを取得するdeviseのヘルパーメソッドです。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。既存の画像がない場合はno_avatar.pngという画像をあてています。

app/views/devise/registrations/edit.html.erb

フォームを修正する

次に必要な記述を追加していきます。avatar_img_prevでプレビューを表示します。通常はhiddenです。avatar_present_imgは現在の画像です。post_imgがイベントが発火のフックになります。

app/views/devise/registrations/edit.html.erb

jQuery

Rails5ではここでTurbolinksをロードしてからのイベントです。ファイル選択をフックに、#avatar_img_prevのhiddenと.avatar_present_imgを取り除いてデータ取得を実行しています。
読み込みが完了したらFileReader.onloadイベントが発火して、readAsDataURLでファイルを読み込んでいます。

以上です!ご覧いただきありがとうございました!!☺️もっと良い方法があれば教えていただけると幸いです!

Railsアプリにdrawer.jsで横から出てくるドロワーメニューを導入する

rails drawer js hamburger

横から出てくるハンバーガーメニューの drawer です。タップするとアニメーションでハンバーガーメニューが × ボタンに変わります。閉じるときは × ボタンの他にメニュー領域以外をタップしても閉じます。

Drawer
https://github.com/blivesta/drawer/
http://git.blivesta.com/drawer/

読み込み

CDNを読み込む方法で行いました。iScrollはメニュー部分のスクロールを行うプラグインです。jqueryを使えるように ‘jquery-rails’を入れています。

app/views/layouts/application.html.erb

bodyタグに “drawer drawer–left” クラスを指定しています。ここを ‘drawer–right’ にすると右から、 ‘drawer–top’ にすると上からドロワーメニューが出てきます。 https://github.com/blivesta/drawer/blob/master/scss/_position-right.scss

Gemfile

app/assets/javascripts/application.js

ヘッダー

app/views/layouts/_header.html.erb

レスポンシブなヘッダーになっていて、デフォルトのブレイクポイントは次の通りです。

jQuery

基本はこれだけで動作します。

app/assets/javascripts/drawer.js

その他オプションは次の通りです。

簡単ですが以上です!ありがとうございました!!

【Rails】gem ‘bxslider-rails’ でスライドショーを作成する

bxslider rails
レスポンシブルでオプションも豊富なコンテンツ・スライダーの “bxSlider” が Ruby on Rails の gem でもありましたので使ってみました。

本記事ではあらかじめ Article モデルに 画像を格納する image カラムがあって、 数件データが入っていることを前提にすすめていきます。

bxSlider Rails
https://github.com/manfe/bxslider-rails

環境はこちらです

準備

Gemfile

app/assets/javascripts/application.js

app/assets/stylesheets/application.css.scss

Controllers

ここではシンプルに全件取得とします。

app/controllers/top_controller.rb

Views

ここでは each で 取り出された article の image と title を link_to do ~ end で囲っています。

app/views/top/index.html.erb

jQuery

ここでは適当な js ファイルを作成しています。こちらのオプションは本記事のサンプルとして動作させているものです。

app/assets/javascripts/bxslider.js

boxSlider オプション デフォルト値

以上です!ご覧いただきありがとうございました!!

【Rails】Deviseのsign_upフォームにjQuery-Validation-Engine-railsを導入する

rails validation engine

エラーメッセージをPost送信する前に、ユーザーに知らせるために、本記事では ‘jQuery-Validation-Engine-rails’ を導入します。ユーザ認証機能には ‘devise’、CSSフレームワークには’devise-bootstrap-views’を使っています。

jQuery.validationEngine
https://github.com/posabsolute/jQuery-Validation-Engine
Devise
https://github.com/plataformatec/devise
Devise Bootstrap Views
https://github.com/hisea/devise-bootstrap-views

環境はこちらです

Scaffold

本記事ではサンプルとして新規プロジェクトを作るところから進めていきます。

Gemfile

以下のコマンドでdeviseのインストールから、セットアップまで行います。

Assets

必要なアセットを読み込ませていきます。

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

jQuery

基本形はこちらですが、その他オプションはドキュメントをどうぞ。

Views

フォームにidを設定し、それぞれの入力フィールドにバリデーションを設定していきます。

ちなみにsimple_formを使っている場合は、このような感じなるかと思います。

あとはhttps://localhost:3000/users/sign_upにアクセスして、動作を確認して下さい。

エラーメッセージの日本語化

jQuery-Validation-Engine-railsのエラーメッセージの日本語化は、次のリンクから「jquery.validationEngine-ja.js」をダウンロードして app/assets/javascripts/ 配下に配置します。
https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js

以上です。ご覧いただき、ありがとうございました!😊

【Rails5】setTimeoutを使ってflash messageを自動的に非表示にする

rails flash message
Ruby on Railsでredirect_toを使ってフラッシュメッセージを表示させた際に、そのフラッシュメッセージを表示させたままにせずに、一定の時間が経過後に自動でフェードアウトして非表示にさせたいと思うことがありました。本記事ではそれをjQueryのsetTimeoutを使った遅延処理で実現したいと思います。

合わせて、本記事ではサンプルを兼ねて、bootstrapをflashメッセージを使いたいと思います。

環境はこちらです

準備

Gemfile

$ bundle install を実行

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

Controllers

redirect_toからのflashメッセージは、application_controller.rbに以下のadd_flash_typesを追記すれば簡単に使えます。

app/controllers/application_controller.rb

使用したいクラスのアクションにflash_typeを書きます。ここではredirect_toにsuccessを追記しました。

Views

送られたフラッシュメッセージをビューで表示します。nameに先ほどのsuccessが入ります。以下の記述はapplication.html.erbに書いてlayoutの全共通にしてもいいですが、ここではパーシャルにして、必要な箇所にだけ埋め込めるようにしました。

app/views/layouts/_flashes.html.erb

jQuery

最後に本記事のメインとなるsetTimeoutをセットします。今回はフラッシュメッセージをゆっくり非表示にしたいので、オプションをfadeOut(‘slow’)としています。動作のタイミングはミリ秒表示なので、「1000」の場合は1秒後、「10000」の場合は10秒後となります。本記事では「3000」で3秒後としていますが、この辺りはお好みで変えてみてください。

以上で、動作するかと思います。
ご覧いただきありがとうございました。😄

【Rails5】ajaxでcheck_boxのboolean値を切り替える

rails boolean ajax

チェックボックスのboolean値をajaxリクエストでデータベース更新を手軽にするやり方です。

準備

Gemfile

bundle install します

assets/javascripts/application.js

サンプルとしてscaffoldでユーザーを作ります。

Boolean型のカラムにデフォルト値と、null: falseを追加します。

db/migrate/20xxxxx_create_users.rb

$ rails db:migrate を実行します。

Routes

post送信するためのルートを追加します

config/routes.rb

Controllers

特にrenderの記述はしなくても勝手にやってくれます。後からカラムを追加した方はprivateをストロングパラメータに追加することを忘れないように

app/controllers/users_controller.rb

Views

app/views/users/show.html.erb

remote: trueを指定します。これでajaxリクエストになりますね。

アクションと同名のjs.erbファイルをレンダーしてくれます。

app/views/users/user_private.js.erb

分かりやすくするためにクラスをつけています。

app/views/users/private_boolean.html.erb

app/assets/stylesheets/users.scss

以上です。間違っていたら教えていただけるとありがたいです。

Rails5でbootstrap tooltipを動的に使う

rails tooltip

リンクにちょっとしたツールチップもあったら、ユーザビリティが上がりますね!さらにrailsなら動的にデータが変わった場合、ツールチップの表示内容も変わります。今回はbootstrap tooltipを使って簡単に実装してみたいと思います。これはhover時に動作するものですが、クリック時に動かしたいならpopoversというものもあります。
また、ダミーのデータはFakerというライブラリを使って投入します。

bootstrap-tooltip-rails
https://github.com/brandonhilkert/bootstrap-tooltip-rails
Documentation
https://getbootstrap.com/docs/4.1/components/tooltips/
Faker
https://github.com/stympy/faker

環境はこちらです

準備

準備としてScaffoldでユーザーと、ダミーデータを入れるカラムも生成します。カラム名は適当に変えてください。

Gemfile

bundle install します

assets/javascripts/application.js

assets/stylesheets/application.scss

fakerでダミーデータ作成

Userテーブルに20件のnameとbookのダミーデータを作成する内容のファイルをseed.rbに書きます。

db/seed.rb

次のコマンドでseedデータが入ります。

コンソールで入っているのが確認できました。

jQuery

オプションのplacementはtop,bottom,right,leftでツールチップのでる向きが変わります。
その他のオプションはこちら

Views

title属性にRubyコードを入れます。

これで動きました!
ご覧いただき、ありがとうございました!😆

Rails5でjp_prefectureとjpostal.jpを使って郵便番号から住所を自動入力する

rails jp_prefecture jpostal

ユーザーに住所を入力してもらう時、郵便番号を入力したら、住所も自動で入るフォームをjp_prefectureとjpostal.jsで作っていきます。
都道府県はプルダウンメニューにします。また、formはsimple_formで書いています。

JpPrefecture
都道府県コードと都道府県名を変換するGemです。
https://github.com/chocoby/jp_prefecture
jquery.jpostal.js
郵便番号から住所を自動入力してくれるjQueryプラグインです。
https://github.com/ninton/jquery.jpostal.js/

環境はこちらです

準備

はじめにScaffoldでユーザーを作っておきます。

$ bundle install を実行します

jpostal.jp – GitHubからダウンロードしてjquery.jposta.jsというファイルを、app/assets/javascripts/に配置します。

assets/javascripts/application.jsにこれを入れないとrails5ではjQueryが動きません。

Migration

郵便番号や住所を入れるカラムを追加していきます。

できたマイグレーションファイルに次のようにカラムを書き足します。
ちなみにprefecture_codeはintegerです。

$ rails db:migrate を実行します。

Model

prefecture_codeからprefecture_nameに変換するメソッドをモデルに書いておきます。

app/models/user.rb

View

シンプルフォームで書いていきます。都道府県はプルダウンにするので、collectionです。include_blankで空のオプションを先頭に追加しています。

app/views/users/_form.html.erb

jQuery

CoffeeScriptでjpostalメソッドを呼んでいます。それぞれのフィールドのID属性を指定しておきます。

app/assets/javascripts/user.coffee

これで郵便番号を入力すると、住所が自動で入るかと思います。

Controller

忘れずにストロングパラメーターを追加しておくことで、create, updateができるかと思います。

app/controllers/users_controller.rb

以上です!
また、gemを使わずに都道府県データを持つ実装方法の記事はこちらをご覧ください。
ありがとうございました。😊