【Vue.js】ディレクティブをいろいろ使ってみる

Vue.jsのディレクティブ(Directive)を学習を兼ねて jsfiddle でいろいろと使ってみました!よろしければ、動作させてみてください!

v-model

インプットデータをバインディングするディレクティブです。入力ボックスのデータをリアルタイムで同期できます。

次はtextareaで複数行入力する場合です。

checkboxの場合です。

SVGのデータバインディング

circleタグにおいて、中心からの半径を定義してる「r」の値を、DOM操作をしています。スライダーを動かすと”radius”の値と同期してcircleが変化します。

v-on

v-onディレクティブでは、DOMイベントを受け取ります。次の例ではクリックイベントでメソッドが呼ばれて、アラートが出ます。
v-on:clickは@clickに省略できます。

v-for, v-if

v-on:changeで _set_animal メソッドを呼んで、一つ目のセレクトに対して、二つ目のセレクトメニューの中身が変わります。v-forでは配列のインデックスを取得して、v-if=”selected_types.length > 0″のところで条件分岐しています。

v-transition

v-transitionディレクティブは、v-ifやv-showと組み合わせて状態を変化させます。vue.jsのトランジションには「enter」と「leave」の2つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。

次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。
同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。

参考にさせていただいたのはこちらの書籍です。


基礎から学ぶ Vue.js

【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

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

【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アプリに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】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

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