Enter!バッチを起動しようと勢いよくキーを叩いたら、それはシフトキーだった。itmammothTweetbootstrapにはもう飽きた方、もっとシンプルなデザインのCSSフレームワーク無いの?という方、一度Foundationをお試し下さい。Foundationbootstrapと同様に、レスポンシブなWebサイトの構築を助けてくれるCSSフレームワークです。デザイン的にはかなりシンプルなので、自分色に染めてあげるのも良しだと思います。5とsimple_formを使ったRailsアプリ開発のチュートリアルをやってみたいと思います。3.0.2セットアップまずはお約束のGemfileから。以下の4行をGemfileに追記してください。’foundation-icons-sass-rails’というのは、Foundationのアイコンを使用するために必要なgemです。installが完了したら、foundationをインストールします。foundation5続いて、simple_formのインストールです。foundationオプションをお忘れなく。--foundationセットアップはこれにて終了。レイアウト何か画面が必要ですね。お約束のPostモデルを作ってみましょう。db:migrateここらでrailsサーバを起動して、画面を見ておきましょう。http://localhost:3000/postsにアクセスします。スタイルが効いてます。あまりに味気ない画面なので、公式ページのようなトップバーを配置してみようと思います。レイアウトapplication.html.erbを編集します。</body></html>16行目でヘッダーをレンダリングしています。%>を11行目に移動しています。これはturbolink対策です(詳細を知りたい方はググってみてください)。次に、app/views/shared/_header.html.erbを作成しましょう。</nav></div>公式ページのをパクってるだけですが。華麗なトップバーが表示されるかブラウザで確認してみます。どこかで見たようなトップバーが見事完成しました。バーの内容は適宜変更してみてください。お次はサイドバー的な物をあしらえてみましょう。レイアウトapplication.html.erbを編集します。%>をdivでラップしています。class="row">が1行にあたり、それを12分割してレイアウトするのがFoundationのグリッドシステムの基本です。いうのがグリッドでbootstrapでいうところのspanXクラスにあたります。largeというのは高解像度向けを表しており、他にもmediumやsmallが用意されているので、各種デバイスに細やかに適応させたレスポンシブWebが構築できるようになっています。ブラウザをリロードして確認しましょう。それっぽくなってきました。フォームPostの入力画面を確かめる前に、Postにバリデーションを追加しておきます。trueendPostの登録画面を訪れ、何も入力せずにCreateボタンをクリックします。バリデーションエラーが見てみたいので・・ほお。して、いい感じじゃないか・・・。小さい上に黒字で、全然目立たないじゃない・・・。実は1箇所simple_formの設定ファイルを変更しなければならない箇所があります(おそらくまだfoundation5に対応できていないと思われる)。config/initializers/simple_form_foundation.rbというファイルを開き、以下の1行を変更します。“error”を追加しました。railsサーバを再起動して、もいちどバリデーションエラーを発生させます。すさまじいばかりの自己主張だが・・・草食系男子がはびこるこんな世の中じゃ、これぐらいガツガツ行ったほうがいいのかもしれない。ユーザーも二度とエラーを起こしたくなくなるだろう。カスタムインプットよく見ると、もう一つ気に喰わない箇所を見つけてしまいました。この日付入力は非常にイケてない。type="date"に対応できているので、そちらを利用することにします。日付を入力するコントロールはアプリケーションの各所で必要になってくると思うので、どこからでも呼び出せるようなカスタムインプットとして実装することにします。app/inputsディレクトリを作成し、その中にdatepicker_input.rbというファイルを作成します。endendSimpleForm::Inputs::StringInputを継承していますが、type=”date”としたいため、コンストラクタでinput_type(中身は:string)の代わりに:dateというシンボルを使っています。inputメソッド内でwrapper_htmlを指定しているのは、コントロールの幅を調整するためです。続いて、app/views/posts/_form.html.erbを編集しましょう。:datepickerを指定すれば、先程作成たカスタムインプットが使用されます。railsサーバを再起動して、最終確認といきませう。カスタムインプット便利だなあ。簡素ではありますが、アプリケーションの基本が完成しました。この他にも色々と色々にイケてるFoundation。公式ページのドキュメントも充実しているので、CSSフレームワークに悩んでいる貴男、選択肢の一つに加えてみてはいかがでしょうか。検索:プロフィールitmammothIT界のマンモスを目指しているフリーエンジニアです。麻婆豆腐/Ruby/Kotlin/麻婆春雨/Python好きです。最近カリフラワーも好きになりました。