joppot

コピペで絶対動く。説明を妥協しない

プログラミング

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する

投稿日:2014年5月27日 更新日:

Pocket

e6bf84a5e6c74FA105122bef10f7af86a8

概要

みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。

scaffoldとはご存知のようにいわゆるwebアプリケーションのIO(インプットアウトプット)の基礎を取り扱った機能で、ひとまず、これさえできれば後は応用と言う感じのものです。

scaffoldには主に「新規作成、編集、更新、一覧、詳細、削除」という機能が搭載されています。この項目を見ても分かるように、確かに、webアプリケーションの基本的な機能が盛り込まれていますね。

scaffoldは別段twitterbootstrapを使わなくても作れますが、やはり見栄えが違うので、業務アプリや適当な管理ツールなどでありましたら、積極的に使っていきましょう。

twitterbootstrap3を取り扱いますが、twitterbootstrap2が未だに主流っぽいです。twitterbootstrap自体はデザイン系のライブラリ群なので、2だから古いとかはありません。多少、3の方が機能が豊富?くらいに思っておけばよいかと。


前提

railsの環境が整っている。

railsプロジェクトを作成する

ではrailsプロジェクトを作成しましょう。
適当なフォルダに移動します。私はホームディレクトリにあるrailsディレクトリの中で新しくbootstrap3プロジェクトを作ります。

cd ~/rails

下のコマンドでbootstrap3というプロジェクトを作ります。

rails new bootstrap3

プロジェクトが作成されたら、移動します。中身を確認しましょう。

cd bootstrap3
ls ./

bootstraprailsproject

プロジェクト出来ました。

Gemfileを編集してbootstrap3をインストールする

Gemfileを開きます。

下の内容を書き加えます。

gem 'twitter-bootstrap-rails', github: 'seyhunak/twitter-bootstrap-rails', branch: 'bootstrap3'

1. Emacs

bootstrap3ではtherubyracerも使うので、Gemfileにもともと書かれて、コメントアウトされているtherubyracerの項目をコメントインします。
無かったら、たし加えましょう。

gem 'therubyracer', platforms: :ruby

rubyracer

Gemfileを保存します。

バンドルインストールしますが、rails4らしくパスをvendorに指定して、そこにgem関連を置きます。

bundle install --path vendor/bundle

therubyracerを使うとbundleインストールに時間がかかります。辛抱強く待ちましょう。

インストールが無事終わったら下のコマンドを実行して、bootstrapをインストールします。

bundle exec rails generate bootstrap:install static

installbootstrap

無事にクリエイトされたら、bootstrapのインストール完了です。


scaffoldを作成する

次にscaffoldを作成します。概要でも説明した通り、標準的なwebアプリケーションのIOみたいなものです。

試しに、メモ書く為のscaffoldを作ります。下のコマンドを実行しましょう。ちなみにこれはtwitterbootstrap gemのexampleにあるものを使用しています。

rails g scaffold Memo title:string description:text

scaffoldmemo

scaffoldで必要なファイルが作成されます。

作成されたマイグレーションファイルをデータベースに反映させます。

rake db:migrate

memomigrate

これでscaffoldが完成しました。まだ、bootstrapのテーマが反映されていないので、このままサーバを起動させて、サービスを見るとデフォルトのシンプルな感じになっています。

defaultscaffold


bootstrapのテーマを反映させてサーバを起動する

bootstrapのレイアウトを適応させます。
あまり良い選択肢ではないかもしれませんが、面倒なのでapp/views/layouts/application.html.erbにbootstrapのレイアウトを上書きします。

rails g bootstrap:layout application

もちろん、application.html.erbを上書きしてよいのか聞いてきますので「y」と入力して許可しましょう。

bootstraplayout

bootstrapのテーマをscaffoldのviewに反映させるには下のコマンドを打ちます。今回はMemoモデルを作ったので、Memosを指定します。

rails g bootstrap:themed Memos

これを実行すると、テーマが自動的に書き込まれます。
実行すると分かる様に、すでにファイルが存在するので、コンフリクト(衝突)が起きてしまいます。上書きを許可しましょう。質問されたら「y」と答えれば良いです。
bootstraptheme

bootstrap3のテーマが反映されました。

サーバを起動する

サーバを起動させます。

bundle exec rails s

startserver

ブラウザでURLに移動します。

http://localhost:3000/memos/

下の様に表示されれば成功です。

Bootstrap3site

newを押して新しいmemoを作りましょう。

newmemo

「Create Memo」を押せば新しいメモが作られます。

memoindex

こんな感じです。

後は適宜カスタマイズして使い易くしていきましょう。

まとめ

scaffoldする時はbootstrapを使うと、ソースコードすらいじらずにいっちょまえのサービスを書けます。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

fabricを使ってgit のdiffで指定のバージョンからのファイルをアップロード

概要 皆さんこんにちはcandleです。今回はfabricを使ってgit のpush pullを使わないデプロイを実装します。 一般にgit管理されているプロジェクトのデプロイは下の様な図式でデプロイ …

railsのform_forとstrong parametersを使用してpdfをアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリにpdfファイルをアップロードしてみましょう。 form_forは …

C++のopencvでhelloworld

概要 みなさんこんにちはcandleです。インストールできたopencvを使ってhelloworldを行いましょう。 opencvでhelloworldとはなんぞや、と感じるかもしれませんが、open …

wysiwygエディタのSquire editorのサンプルを作成する

概要 みなさんこんにちはcandleです。 今回オープンソースのsquireエディタをhtmlに手動で導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタマ …

ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

概要 みなさんこんにちはcandleです。今回はruby on railsのckeditorという素晴らしいgemを使って見たいと思います。 ckeditorとはweb版の高機能なwordとかテキスト …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ