Enter!バッチを起動しようと勢いよくキーを叩いたら、それはシフトキーだった。bootstrapを使用する際のtipsをご紹介したいと思います。前回作成した画面を見てましょう。前回はTitleに必須バリデーションを付加しました。今回はReview項目を編集してみたいと思います。このReviewという項目には、本の評価を1〜5の数字で入力してもらうと仮定しましょう。models/book.rbにバリデーションを記述します。}endバリデーションとしてはこれでOKなのですが、フォーム画面はどうでしょうか。1〜5の数値しか登録できないのなら、他の値は入力できない方が良いですね。その仕様が不明記ではユーザーを混乱させてしまう可能性があります。これはヒントとして表示することにします。app/views/books/_form.html.erbを編集します。%>simple_formでは『hint』というオプションで、ヒント文を表示することができます。HTMLの属性を記述する場合は、『input_html』というオプションの中にハッシュで記述します。classを指定しています。『review』CSSクラスは・・・たいした定義ではありませんが、LESSの勉強も兼ねて一応見ておきましょう。}}LESSは階層的に定義を指定できるのが便利ですね。編集が完了したところで、実際に画面を表示させて確認してみましょう。1〜5の数値しか入力できなくなっています。ヒント文も表示されていて分かりやすいですね。ふぅーっ、ひと仕事終えた気分です。あなたが善良で怠惰なプログラマなら、ここで少し立ち止まってみましょう。他の画面のerbファイルにも同じコードを書かなければなりません。これは喜ばしいことではありません。真っ先に思いつくのは、当該コードをヘルパーに追いやることです。すれば、複数のViewから共有できるという目的は果たせそうです。railsのヘルパーはあまりオブジェクト指向的ではありません。simple_formにはそれを解決する方法が用意されています。カスタムインプットを作成する表題の通り、simple_formでは独自のカスタムインプットを定義することができるのです。Reviewインプットのために独自のカスタムインプットを作成してみましょう。inputsというディレクトリを作成します。この中にカスタムインプットに配置すれば、simple_formが勝手に読み込んでくれるようになっています。『review_input.rb』というファイルを作成します。endend『ReviewInput』というSimpleForm::Inputs::NumericInputのサブクラスを定義しています。クラス名とファイル名は重要です。クラス名は『XxxInput』、ファイル名は『xxx_input.rb』にする必要があります。コード自体は単純です。inputメソッドをオーバーライドして、必要なオプション値を差し込んでいるだけです。(詳しくはsimple_formのドキュメントを参照してください)Reviewインプットが完成したところで、これを呼び出すView側のコードも変更します。%>4行目の記述がポイントです。いうオプションでReviewインプットを指定しています。このように非常にスッキリと記述することができるようになるのがカスタムインプットの良い所です。修正が完了したら、画面での動作も確認しておきましょう。先程と同様、上手く動作しています。嬉しくて、全ての画面にReviewインプットを配置してしまいそうですよ!simple_formの設定を変更する完璧に仕上がった・・・と思いたいのですが、まだ『臭う』箇所があります。値を直接指定していることです。この値は、Bookモデルのバリデーション値と等しくなるはずなので、万が一バリデーションの値が変更された場合、このReviewInputクラスも変更しなければなりません。DRYではありません。この問題に対する解決策もsimple_formには用意されています。設定ファイルを変更することで、自動的にバリデーションのmin/max値をinputに反映することができるのです。設定ファイルを開きましょう。config/initializers/simple_form_bootstrap.rbというファイルです。いう記述を追加しました。これでバリデーションで指定している最小値・最大値が自動的にinputタグに反映されるようになります。続いて、ReviewInputクラスも変更します。maxの値は、simple_formが自動的にバリデーションから取得して設定してくれます。ここでは、input_html_optionsからその値を取得して、ヒント文に使用しています。これでDRYなコードになりました。試しに、Bookモデルのバリデーションを変更してみましょう。1〜3の数値しか受け付けいように変更します。(簡単だと思うのでコードは割愛)全ての変更が完了したら、再び画面を開いて確認してみましょう。誰も僕を止めることはできない。プロジェクトの当初からカスタムインプットを適切に作り続けていれば、View周りの開発効率は二次曲線的にアップしていくはずです。bootstrapのJavascriptを絡めたtipsなんかを紹介したいと思います。検索:プロフィールitmammothIT界のマンモスを目指しているフリーエンジニアです。麻婆豆腐/Ruby/Kotlin/麻婆春雨/Python好きです。最近カリフラワーも好きになりました。