【Django】Bootstrap4を使って リダイレクト先でメッセージを表示する

Djangoでデフォルトで用意されているmessages framework + Bootstrap4を使って、CRUD操作の際のリダイレクト先でメッセージを表示させる手順のメモです。

実行環境

環境はこちらです。

構成はこのようになります。今回、編集/追加するファイルのみ記載しています。

上記のディレクトリにダウンロードした、bootstrap.min.css と jquery-3.3.1.min.js を配置します。
https://getbootstrap.com/docs/4.1/getting-started/download/
https://jquery.com/download/

実装

次のコマンドでbootstrap4をインストールします。

Settings

settings.pyに’bootstrap4′, を追記します。’django.contrib.messages’はデフォルトで入っています。

mydir/myproject/settings.py

一時的なメッセージを保存するための、ストレージはデフォルトで’FallbackStorage’になっています。変更する場合は、以下のように、指定します。
本家ドキュメント参照

mydir/myproject/settings.py

Views

ビューにメソッド・メッセージを記述していきます。メッセージタグは’debug’, ‘info’, ‘success’, ‘warning’, ‘error’を指定できます。

mydir/blog/views.py

Templates

共通テンプレートで bootstrap4, css , js を読み込み、メッセージを表示する記述を加えます。

mydir/templates/base.html

jQueryで自動的に非表示にする

アラート・メッセージは表示し続けるより、さりげなく、フェードアウトさせる方がいい!という方は、jQueryのsetTimeout関数を使うと実現できます。今回はオプションをfadeOut(‘slow’)、タイミングは「3000」で3秒後としてみました。

CSSでスタイル調整

ブートストラップ感に飽きてきたら、CSSで上書きしましょう!大雑把ですが(汗)。

mydir/static/css/style.css

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

【Bootstrap】Jambotron(ジャンボトロン)の画像がRails本番環境で表示されない問題の対処

Rails開発でBootstrapのJambotronを使って、画像を配置したとき、開発環境では問題なく表示されましたが、Herokuで本番環境にpushして、確認をしてみると、うまく表示されていなかったので、そんな時の対処方法をメモいたします。

対処前の状態

views

画像はapp/assets/images/配下に置いています。

css

これで、開発環境では画像が表示されていました。

本番ではエラー

しかし、本番でも確認しようとHerokuにpushして、ブラウザを見てみると、画像が表示されていなかったので、$ heroku logs -tコマンドでログを確認してみると、、、

RoutingErrorが出ていました!

対処方法

image_urlというRailsメソッドで呼び出してやることで、本番環境でも、問題なく表示されるようになりました!

css

ログにもエラーは出なくなりました。

その他の解決方法としては、app/assetsではなくて、public/assetsに画像を配置するという方法があります。ですが、これではRailsの推進するAssetPipelineが適用されません。よって、AssetPipelineの仕組みを使って、よりブラウザからの読み込み速度を上げるためにはapp/assets/images ディレクトリに画像を置くことが良いと言えます。

以上です!
どなたかのお役に立てば幸いです!!

【CSS】inputのフォーカス時の青い光を消す

実行環境

これのことです!⬇︎ フォームにもれなくついてくる青いヤツ!消したくても原因はborderでもないしshadowでもないし、一体何者なんだとずっと思っていました!

rails bootstrap input focus css

正体ははoutlineでした!以下の通りに指定すると青い光は消えて、borderをくっきり上書きすることができました。
outlineのリファレンスはこちらです。
http://www.htmq.com/style/outline.shtml

rails bootstrap input focus css

また、事前にbackground-colorを少し暗くしておくことで、フォーカスした時にinputフィールドが明るくなった感じがしますね!

また、上記のデモでは適用していませんが、フォーカス時のplaceholderのcolorを変える場合はこちらです。

この青いヤツから解放された時は、すがすがしい開放感に浸れました!
以上です。ご覧いただき、ありがとうございました😁

【Rails】Bootstrap + FontAwesome でモーダルウィンドウを作る

rails modale bootstrap font-awesome

Railsでは link_to メソッドの引数に data: {confirm: ‘メッセージ’ } と指定するだけで、簡単に確認ダイアログを表示する仕組みが用意されていますが、さらにbootstrapのdata-confirm modalを使うことで使い勝手の良いモーダルウィンドウを作ることができます。
背景のオーバーレイをクリックすると、モーダルウィンドウを閉じれるのもうれしいです。あとは好みによりますが、本記事ではfont-awesomeも設置しています。

Data-Confirm Modal
https://github.com/ifad/data-confirm-modal
FontAwesome
https://fontawesome.com/

環境はこちらです

準備

必要なgemはこちらです。bootstrap3を使っていますが、bootstrap4でも大丈夫です。

Gemfile

app/assets/javascripts/application.js

app/assets/stylesheets/application.css.scss

Views

viewはこのままでも、モーダルウィンドウは適用されています。

オプションの設定

あとはドキュメントにもあるようにオプションを設定していきます。本記事ではfont-awesomeも設置して、スタイルシートで調整しています。

スタイルシート

今回追加したスタイルシートを載せておきます。シンプルにするためにtitle部分をdisplay:noneにしています。

以上です!参考になれば幸いです!ご覧いただきありがとうございました!!😊

【Rails】Flashメッセージに「閉じるボタン」をつける

Flashメッセージはブラウザをリロードすれば消えますが、メッセージ横に×ボタンを設置してクリックしたらcloseできるようにしました。
アラートはBootstrap3のalert-infoとalert-dangerを使用して、若干cssを追加しています。

rails alert info

rails alert danger

レイアウトにアラートを設置する

レイアウト毎に共通して同じアラートを使う場合ですが、レイアウトのヘッダーの下部にアラートのパーシャルを読み込むようにしました。

app/views/layouts/application.html.erb

テンプレートの方は次の通りです。noticeかalertかで分岐しています。×ボタンはHTML-特殊文字を使用しています。

app/views/layouts/_alert.html.erb

スタイルシート

一応、今回加えたcssも載せておきます。

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

【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

環境はこちらです

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でkaminari + faker + bootstrap を使ってページネーションを作成する。

kaminariというgemを使ってページネーションを実装していきます。ある程度データが必要なのでダミーデータはFakerを使って投入します。kaminariにはあらかじめテーマがいくつかあるようですが、今回はbootstrapを適用したいと思います。i18nで日本語化もします。

Kaminari
https://github.com/kaminari/kaminari
Faker
https://github.com/stympy/faker
https://remonote.jp/rails-gem-faker

バージョンはこちらです

準備

scaffoldでユーザーを作って進めていきます。

Gemfile

application.cssの方はScssを使うのでリネームします。
application.css => application.scss (application.css.scssとしてもOK!)

app/assets/stylesheets/application.scss

fakerでseedデータを入れる

db/seeds.rb

kaminariを適用する

次のコマンドでkaminariの設定ファイルが生成されます。

config/initializers/kaminari_config.rb

config.default_per_page = 5で全体として1ページ辺りの項目数を設定するか、モデル毎に設定する場合は次のように書きます。

app/models/user.rb

app/controllers/users_controller.rb

一覧表示するデータの上と下の2箇所に、kaminariのヘルパーを一行づつ追記します。

app/views/users/index.html.erb

これで5件づつ表示できるようになりました。
railsでbootstrapとkaminariでpagenationする

i18nで日本語化

config.i18n.default_locale = :jaを以下のあたりに記述します

config/application.rb

config/locales/ja.yml

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

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でsimple_form、bootstrap-sass、rails-i18n日本語化でメッセージフォームを作り込む

前回の記事では確認ページ付きのメッセージ送信フォームを実装しました。https://remonote.jp/rails-confirm-form
本記事ではそのフォームをsimple_form、 bootstrap-sassで作り込み、バリデーションのエラーメッセージをrails-i18nで日本語化します。

Simple form
https://github.com/plataformatec/simple_form
Bootstrap for Sass
https://github.com/twbs/bootstrap-sass
Rails i18n
https://github.com/svenfuchs/rails-i18n

環境はこちらです

準備

Gemfile

$ bundle install を実行

application.cssの方はScssを使うのでリネームします。
application.css => application.scss (application.css.scssとしてもOK!)

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

Install

simple_formのインストールにbootstrapオプションをつけます。(bootstrapを使わない場合は–bootstrapは不要)

simple_form_for

simple_form導入前のviewsはこちらでしたが、、、

simple_form_forに変えて、だいぶスッキリしました!

simple_formのoption

いろいろとオプションをつけていきます。 file_fieldにはas: :fileです。

はい、こんな感じになりました。
simple_formとboostrap

simple_formのvalidation error

モデルにバリデーションを指定して、エラーメッセージを出します。
今回はDBを使わずActiveModelを使っています。

app/models/message.rb

エラー時のスタイルを追加します。

scss

エラーを出してみるとこのようになります。
smile_formでerror。validation

i18nで日本語化

エラーメッセージの日本語化をするには、Railsにデフォルトで入っているrails-i18nというライブラリを使います。
config.i18n.default_locale = :jaを以下のあたりに記述します。

config/application.rb

modelのカラム名は、ymlファイルに書いていきます。注意点として、今回はactivemodelを使っているところです

config/locales/models.ja.yml

サーバーを再起動させて、もう一度エラーを出してみると、、、
simple_formでerror messsageをi18n日本語化

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