SlideShare a Scribd company logo
1 of 34
Download to read offline
Getting Started with
Ruby on Rails4 + Bootstrap3
Clwit, Inc.
Yukimitsu Izawa
2013/11/23 Kanazawa.rb #15

「安心・安全・安定・信頼」できるインターネットサービスを
じこしょうかい
•

井澤  志充  (いざわゆきみつ)

•

(株)クルウィットの取締役  兼  北北陸陸⽀支社⻑⾧長  
博⼠士(情報科学)

•

•

ネットワークの委託研究・⾃自社サービス開発など  

「安心・安全・安定・信頼」できるインターネットサービスを

!2
What is Ruby on Rails?
Ruby on Rails, often simply Rails, is an
open source web application framework
which runs on the Ruby programming
language.
• Ruby on Rails emphasizes the use of
well-known software engineering patterns
and principles, such as active record
pattern, convention over configuration
(CoC), don't repeat yourself (DRY), and
model–view–controller (MVC).



- wikipedia.org
•

「安心・安全・安定・信頼」できるインターネットサービスを

!3
What is Ruby on Rails?

「安心・安全・安定・信頼」できるインターネットサービスを

!4
Ruby on Rails tutorial

「安心・安全・安定・信頼」できるインターネットサービスを

!5
What is Twitter bootstrap?
Bootstrap is a free collection of
tools for creating websites and web
applications. It contains HTML and
CSS-based design templates for
typography, forms, buttons, navigation
and other interface components, as
well as optional JavaScript
extensions.


•




- wikipedia.org

「安心・安全・安定・信頼」できるインターネットサービスを

!6
What is Twitter bootstrap?

「安心・安全・安定・信頼」できるインターネットサービスを

!7
pre requirements
ruby

•

•

rails gem

twitter bootstrap


•




In this document,
!

ruby 2.0.0
• rails 4.0.1
• twitter bootstrap 3.0
•

「安心・安全・安定・信頼」できるインターネットサービスを

!8
Getting start
•

create rails project, named “myapp”

% rails new myapp
% cd !$

「安心・安全・安定・信頼」できるインターネットサービスを

!9
Edit Gemfile
•

add bootstrap gem to Gemfile.

% vi Gemfile
:
gem 'anjlab-bootstrap-rails', '~> 3.0.2.0', :require => ‘bootstrap-rails'
:

「安心・安全・安定・信頼」できるインターネットサービスを

!10
Bundle libraries
•

execute bundle install.

!

% bundle install --path vendor/bundle

「安心・安全・安定・信頼」できるインターネットサービスを

!11
Edit application css for BS
•

to use bootstrap, edit app/assets/
stylesheets/application.css

!

% mv app/assets/stylesheets/application.css{,.scss}
% vi app/assets/stylesheets/application.css.scss
(delete all line, and add two lines below.)

!

@import "twitter/bootstrap";
body { padding-top: 70px; }

「安心・安全・安定・信頼」できるインターネットサービスを

!12
Edit application.js
•

to use bootstrap, edit app/assets/
javascript/application.js

!

% vi app/assets/javascripts/application.js

!

//=
//=
//=
//=
//=

•

require jquery
require jquery_ujs
require turbolinks
require twitter/bootstrap
require_tree .

← add this line.

Initial setup was completed.
「安心・安全・安定・信頼」できるインターネットサービスを

!13
App example
•

at the top directory of rails project,
scaffolding blog post application.




!

% rails g scaffold Post title:string description:text
% rake db:migrate
•

You can check your app, access to http://localhost:3000/posts/ .

Invoke rails server.

!

% rails s

「安心・安全・安定・信頼」できるインターネットサービスを

!14
「安心・安全・安定・信頼」できるインターネットサービスを

!15
Decorate app (all view)
•

!

Edit app/views/layouts/application.html.erb

% vi app/views/layouts/application.html.erb
→ Continue to the next page.

「安心・安全・安定・信頼」できるインターネットサービスを

!16
app/views/layouts/application.html.erb
!

:
<body>
<div id="wrap">
<!-- header navigation part -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menucollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyApp<sup>devel</sup></a>
</div>
<div class="navbar-collapse collapse navbar-menu-collapse">
c
<ul class="nav navbar-nav">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"></a></li>
</ul>
</div>
</div>
<!-- main contents -->
<div class="container">
<%= yield %>
</div>
c </div>
</body>
</html>
「安心・安全・安定・信頼」できるインターネットサービスを

!17
「安心・安全・安定・信頼」できるインターネットサービスを

!18
「安心・安全・安定・信頼」できるインターネットサービスを

!19
Decorate app (posts#index)
•

edit post's view.

<table>
↓
<table class="table table-striped">
<td><%= link_to 'Show', post %></td>
↓
<td><%= link_to 'Show', post, class:"btn btn-primary btn-sm" %></td>
<th>Description</th>
↓
<th class="hidden-xs">Description</th>
<td><%= post.description %></td>
↓
<td class="hidden-xs"><%= post.description %></td>

「安心・安全・安定・信頼」できるインターネットサービスを

!20
「安心・安全・安定・信頼」できるインターネットサービスを

!21
Bootswatch

「安心・安全・安定・信頼」できるインターネットサービスを

!22
Cerulean theme

「安心・安全・安定・信頼」できるインターネットサービスを

!23
How to use bootswatch(cerulean)
•

Fetch css from official site.

% mkdir vendor/assets/stylesheets/bootswatch
% cd !$
% curl -O http://bootswatch.com/cerulean/bootstrap.css
•

Edit application css.

% vi app/assets/stylesheets/application.css.scss
@import 'twitter/bootstrap';
← remove this line.
@import ‘bootswatch/bootstrap'; ← add this line.

「安心・安全・安定・信頼」できるインターネットサービスを

!24
「安心・安全・安定・信頼」できるインターネットサービスを

!25
「安心・安全・安定・信頼」できるインターネットサービスを

!26
How to use pagination(kaminari) with BS3
•

Edit Gemfile.

!

:
gem ‘kaminari'
:

•

re-bundle.

!

% bundle install --path vendor/bundle

「安心・安全・安定・信頼」できるインターネットサービスを

!27
Generate pagination's view

% rails g kaminari:views bootstrap
•

This generator will create BS2 view,
patch below:

app/views/kaminari/_paginator.html.erb
- <div class="pagination">
<ul>
+ <div>
+
<ul class="pagination">

「安心・安全・安定・信頼」できるインターネットサービスを

!28
Pagination example
•

!
!
!

Edit post controller.

% vi app/controllers/posts_controller.rb
def index
@posts = Post.all
end
↓
def index
@posts = Post.all
@posts = @posts.page(params[:page]).per(3) # 3 posts/page
end

「安心・安全・安定・信頼」できるインターネットサービスを

!29
Pagination example
•

!

Edit post index view.

% vi app/views/posts/index.html.erb

<%= paginate @posts %> ← add this line to bottom of listing.

「安心・安全・安定・信頼」できるインターネットサービスを

!30
「安心・安全・安定・信頼」できるインターネットサービスを

!31
「安心・安全・安定・信頼」できるインターネットサービスを

!32
References
•

Ruby on Rails
•
•

•

Twitter bottstrap
•

•

http://getbootstrap.com/

bootstrap-rails Gem
•

•

http://rubyonrails.org/
http://ruby.railstutorial.org/

https://github.com/anjlab/bootstrap-rails

kaminari
•

https://github.com/amatsuda/kaminari

「安心・安全・安定・信頼」できるインターネットサービスを

!33
•

Thank  You!  
•

If  you  have  any  comments,  
•

please  send  to:  
•

Mail:  izawa@izawa.org  /  izawa@clwit.co.jp  

•

Twitter:  @Yukimitsu_̲Izawa

「安心・安全・安定・信頼」できるインターネットサービスを

!34

More Related Content

What's hot

What's hot (20)

Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
 
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼうRESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
 
すこやかRails
すこやかRailsすこやかRails
すこやかRails
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
Osc2013 kansai@kyoto ZABBIX-JP クラウド環境監視効率化
Osc2013 kansai@kyoto ZABBIX-JP クラウド環境監視効率化Osc2013 kansai@kyoto ZABBIX-JP クラウド環境監視効率化
Osc2013 kansai@kyoto ZABBIX-JP クラウド環境監視効率化
 
Jawsug chiba API Gateway
Jawsug chiba API GatewayJawsug chiba API Gateway
Jawsug chiba API Gateway
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
 
Spring I/O 2017での拡張のお話
Spring I/O 2017での拡張のお話Spring I/O 2017での拡張のお話
Spring I/O 2017での拡張のお話
 
Getting started with Handoff
Getting started with HandoffGetting started with Handoff
Getting started with Handoff
 
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたいはじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
 
ゲーム会社でのRuby : rails活用事例
ゲーム会社でのRuby : rails活用事例ゲーム会社でのRuby : rails活用事例
ゲーム会社でのRuby : rails活用事例
 
ベンチャーCTO、AWSエバンジェリストを経て考える、クラウド時代に向き合うエンジニア像のこれから
ベンチャーCTO、AWSエバンジェリストを経て考える、クラウド時代に向き合うエンジニア像のこれからベンチャーCTO、AWSエバンジェリストを経て考える、クラウド時代に向き合うエンジニア像のこれから
ベンチャーCTO、AWSエバンジェリストを経て考える、クラウド時代に向き合うエンジニア像のこれから
 
2015/06/27 sakuraclub LT @nullpopopo
2015/06/27 sakuraclub LT @nullpopopo2015/06/27 sakuraclub LT @nullpopopo
2015/06/27 sakuraclub LT @nullpopopo
 
Building Scalable Application on the Cloud
Building Scalable Application on the CloudBuilding Scalable Application on the Cloud
Building Scalable Application on the Cloud
 
CloudSearchによる全文検索 - CM:道 2014/08/01
CloudSearchによる全文検索 - CM:道 2014/08/01 CloudSearchによる全文検索 - CM:道 2014/08/01
CloudSearchによる全文検索 - CM:道 2014/08/01
 
20150207 amazon elasticache
20150207 amazon elasticache20150207 amazon elasticache
20150207 amazon elasticache
 
初めてのDirect Connect 四国クラウドお遍路2014&JAWS-UGの現状
初めてのDirect Connect 四国クラウドお遍路2014&JAWS-UGの現状初めてのDirect Connect 四国クラウドお遍路2014&JAWS-UGの現状
初めてのDirect Connect 四国クラウドお遍路2014&JAWS-UGの現状
 
Smart fxでのsocketio活用事例
Smart fxでのsocketio活用事例Smart fxでのsocketio活用事例
Smart fxでのsocketio活用事例
 
Yesod勉強会
Yesod勉強会Yesod勉強会
Yesod勉強会
 
Zaim 500万ユーザに向けて
Zaim 500万ユーザに向けてZaim 500万ユーザに向けて
Zaim 500万ユーザに向けて
 

Viewers also liked (6)

短絡的に作るRuby DSL 公開版
短絡的に作るRuby DSL 公開版短絡的に作るRuby DSL 公開版
短絡的に作るRuby DSL 公開版
 
Pow
PowPow
Pow
 
IoTタグで遊んでみよう
IoTタグで遊んでみようIoTタグで遊んでみよう
IoTタグで遊んでみよう
 
RubyでDSL
RubyでDSLRubyでDSL
RubyでDSL
 
Ruby with My Life
Ruby with My LifeRuby with My Life
Ruby with My Life
 
Scala DSLの作り方
Scala DSLの作り方Scala DSLの作り方
Scala DSLの作り方
 

Similar to Getting Started with Ruby on Rails4 + Twitter Bootstrap3

Realm platform2019
Realm platform2019Realm platform2019
Realm platform2019
昌桓 李
 
実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン
Hiroyasu Suzuki
 
Backlogでの Perlのつかいかた
Backlogでの PerlのつかいかたBacklogでの Perlのつかいかた
Backlogでの Perlのつかいかた
Ryuzo Yamamoto
 
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
Yuki KAN
 

Similar to Getting Started with Ruby on Rails4 + Twitter Bootstrap3 (20)

Tech fun rails_workshop
Tech fun rails_workshopTech fun rails_workshop
Tech fun rails_workshop
 
Scala: Mobile Backend on AWS
Scala: Mobile Backend on AWSScala: Mobile Backend on AWS
Scala: Mobile Backend on AWS
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
 
AWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャAWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャ
 
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略
 
Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門Ruby開発者のためのHeroku入門
Ruby開発者のためのHeroku入門
 
Realm platform2019
Realm platform2019Realm platform2019
Realm platform2019
 
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
 
実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン
 
About rails 3
About rails 3About rails 3
About rails 3
 
OpsWorks aws-cli#11
OpsWorks aws-cli#11OpsWorks aws-cli#11
OpsWorks aws-cli#11
 
Dockerホスティング「Arukas」について(「さくらインターネット」のDockerホスティング「Arukas」と「Docker Machine」ドラ...
Dockerホスティング「Arukas」について(「さくらインターネット」のDockerホスティング「Arukas」と「Docker Machine」ドラ...Dockerホスティング「Arukas」について(「さくらインターネット」のDockerホスティング「Arukas」と「Docker Machine」ドラ...
Dockerホスティング「Arukas」について(「さくらインターネット」のDockerホスティング「Arukas」と「Docker Machine」ドラ...
 
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン 【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
 
Backlogでの Perlのつかいかた
Backlogでの PerlのつかいかたBacklogでの Perlのつかいかた
Backlogでの Perlのつかいかた
 
サーバーレスで ガチ本番運用までやってるお話し
サーバーレスで ガチ本番運用までやってるお話しサーバーレスで ガチ本番運用までやってるお話し
サーバーレスで ガチ本番運用までやってるお話し
 
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
 
今日から使えるCouchbaseシステムアーキテクチャデザインパターン集
今日から使えるCouchbaseシステムアーキテクチャデザインパターン集今日から使えるCouchbaseシステムアーキテクチャデザインパターン集
今日から使えるCouchbaseシステムアーキテクチャデザインパターン集
 
Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
 
BPStudy20121221
BPStudy20121221BPStudy20121221
BPStudy20121221
 

More from Yukimitsu Izawa

NTPを使ったDDoSについて
NTPを使ったDDoSについてNTPを使ったDDoSについて
NTPを使ったDDoSについて
Yukimitsu Izawa
 

More from Yukimitsu Izawa (15)

docxをmdで書こう
docxをmdで書こうdocxをmdで書こう
docxをmdで書こう
 
最新プロトコル HTT/2 とは
最新プロトコル HTT/2 とは最新プロトコル HTT/2 とは
最新プロトコル HTT/2 とは
 
RubyとEyeTribeで視線追跡をする
RubyとEyeTribeで視線追跡をするRubyとEyeTribeで視線追跡をする
RubyとEyeTribeで視線追跡をする
 
Rubyでオートマトン
RubyでオートマトンRubyでオートマトン
Rubyでオートマトン
 
Ghissuesのご紹介
Ghissuesのご紹介Ghissuesのご紹介
Ghissuesのご紹介
 
Log-modeのご紹介
Log-modeのご紹介Log-modeのご紹介
Log-modeのご紹介
 
Octopress簡単スタートガイド
Octopress簡単スタートガイドOctopress簡単スタートガイド
Octopress簡単スタートガイド
 
RubyからFFIを使ってみた
RubyからFFIを使ってみたRubyからFFIを使ってみた
RubyからFFIを使ってみた
 
NTPを使ったDDoSについて
NTPを使ったDDoSについてNTPを使ったDDoSについて
NTPを使ったDDoSについて
 
テストとは
テストとはテストとは
テストとは
 
RVM with Server Environment
RVM with Server EnvironmentRVM with Server Environment
RVM with Server Environment
 
Try
TryTry
Try
 
rvm でbundlerと仲良くする
rvm でbundlerと仲良くするrvm でbundlerと仲良くする
rvm でbundlerと仲良くする
 
SWIGでRubyバインディング
SWIGでRubyバインディングSWIGでRubyバインディング
SWIGでRubyバインディング
 
MacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみたMacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみた
 

Recently uploaded

Recently uploaded (9)

LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 

Getting Started with Ruby on Rails4 + Twitter Bootstrap3

  • 1. Getting Started with Ruby on Rails4 + Bootstrap3 Clwit, Inc. Yukimitsu Izawa 2013/11/23 Kanazawa.rb #15 「安心・安全・安定・信頼」できるインターネットサービスを
  • 2. じこしょうかい • 井澤  志充  (いざわゆきみつ) • (株)クルウィットの取締役  兼  北北陸陸⽀支社⻑⾧長   博⼠士(情報科学) • • ネットワークの委託研究・⾃自社サービス開発など   「安心・安全・安定・信頼」できるインターネットサービスを !2
  • 3. What is Ruby on Rails? Ruby on Rails, often simply Rails, is an open source web application framework which runs on the Ruby programming language. • Ruby on Rails emphasizes the use of well-known software engineering patterns and principles, such as active record pattern, convention over configuration (CoC), don't repeat yourself (DRY), and model–view–controller (MVC).
 
 - wikipedia.org • 「安心・安全・安定・信頼」できるインターネットサービスを !3
  • 4. What is Ruby on Rails? 「安心・安全・安定・信頼」できるインターネットサービスを !4
  • 5. Ruby on Rails tutorial 「安心・安全・安定・信頼」できるインターネットサービスを !5
  • 6. What is Twitter bootstrap? Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
 • 
 - wikipedia.org 「安心・安全・安定・信頼」できるインターネットサービスを !6
  • 7. What is Twitter bootstrap? 「安心・安全・安定・信頼」できるインターネットサービスを !7
  • 8. pre requirements ruby • • rails gem twitter bootstrap
 • 
 In this document, ! ruby 2.0.0 • rails 4.0.1 • twitter bootstrap 3.0 • 「安心・安全・安定・信頼」できるインターネットサービスを !8
  • 9. Getting start • create rails project, named “myapp” % rails new myapp % cd !$ 「安心・安全・安定・信頼」できるインターネットサービスを !9
  • 10. Edit Gemfile • add bootstrap gem to Gemfile. % vi Gemfile : gem 'anjlab-bootstrap-rails', '~> 3.0.2.0', :require => ‘bootstrap-rails' : 「安心・安全・安定・信頼」できるインターネットサービスを !10
  • 11. Bundle libraries • execute bundle install. ! % bundle install --path vendor/bundle 「安心・安全・安定・信頼」できるインターネットサービスを !11
  • 12. Edit application css for BS • to use bootstrap, edit app/assets/ stylesheets/application.css ! % mv app/assets/stylesheets/application.css{,.scss} % vi app/assets/stylesheets/application.css.scss (delete all line, and add two lines below.) ! @import "twitter/bootstrap"; body { padding-top: 70px; } 「安心・安全・安定・信頼」できるインターネットサービスを !12
  • 13. Edit application.js • to use bootstrap, edit app/assets/ javascript/application.js ! % vi app/assets/javascripts/application.js ! //= //= //= //= //= • require jquery require jquery_ujs require turbolinks require twitter/bootstrap require_tree . ← add this line. Initial setup was completed. 「安心・安全・安定・信頼」できるインターネットサービスを !13
  • 14. App example • at the top directory of rails project, scaffolding blog post application. 
 ! % rails g scaffold Post title:string description:text % rake db:migrate • You can check your app, access to http://localhost:3000/posts/ .
 Invoke rails server. ! % rails s 「安心・安全・安定・信頼」できるインターネットサービスを !14
  • 16. Decorate app (all view) • ! Edit app/views/layouts/application.html.erb % vi app/views/layouts/application.html.erb → Continue to the next page. 「安心・安全・安定・信頼」できるインターネットサービスを !16
  • 17. app/views/layouts/application.html.erb ! : <body> <div id="wrap"> <!-- header navigation part --> <div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menucollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">MyApp<sup>devel</sup></a> </div> <div class="navbar-collapse collapse navbar-menu-collapse"> c <ul class="nav navbar-nav"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"></a></li> </ul> </div> </div> <!-- main contents --> <div class="container"> <%= yield %> </div> c </div> </body> </html> 「安心・安全・安定・信頼」できるインターネットサービスを !17
  • 20. Decorate app (posts#index) • edit post's view. <table> ↓ <table class="table table-striped"> <td><%= link_to 'Show', post %></td> ↓ <td><%= link_to 'Show', post, class:"btn btn-primary btn-sm" %></td> <th>Description</th> ↓ <th class="hidden-xs">Description</th> <td><%= post.description %></td> ↓ <td class="hidden-xs"><%= post.description %></td> 「安心・安全・安定・信頼」できるインターネットサービスを !20
  • 24. How to use bootswatch(cerulean) • Fetch css from official site. % mkdir vendor/assets/stylesheets/bootswatch % cd !$ % curl -O http://bootswatch.com/cerulean/bootstrap.css • Edit application css. % vi app/assets/stylesheets/application.css.scss @import 'twitter/bootstrap'; ← remove this line. @import ‘bootswatch/bootstrap'; ← add this line. 「安心・安全・安定・信頼」できるインターネットサービスを !24
  • 27. How to use pagination(kaminari) with BS3 • Edit Gemfile. ! : gem ‘kaminari' : • re-bundle. ! % bundle install --path vendor/bundle 「安心・安全・安定・信頼」できるインターネットサービスを !27
  • 28. Generate pagination's view % rails g kaminari:views bootstrap • This generator will create BS2 view, patch below: app/views/kaminari/_paginator.html.erb - <div class="pagination"> <ul> + <div> + <ul class="pagination"> 「安心・安全・安定・信頼」できるインターネットサービスを !28
  • 29. Pagination example • ! ! ! Edit post controller. % vi app/controllers/posts_controller.rb def index @posts = Post.all end ↓ def index @posts = Post.all @posts = @posts.page(params[:page]).per(3) # 3 posts/page end 「安心・安全・安定・信頼」できるインターネットサービスを !29
  • 30. Pagination example • ! Edit post index view. % vi app/views/posts/index.html.erb <%= paginate @posts %> ← add this line to bottom of listing. 「安心・安全・安定・信頼」できるインターネットサービスを !30
  • 33. References • Ruby on Rails • • • Twitter bottstrap • • http://getbootstrap.com/ bootstrap-rails Gem • • http://rubyonrails.org/ http://ruby.railstutorial.org/ https://github.com/anjlab/bootstrap-rails kaminari • https://github.com/amatsuda/kaminari 「安心・安全・安定・信頼」できるインターネットサービスを !33
  • 34. • Thank  You!   • If  you  have  any  comments,   • please  send  to:   • Mail:  izawa@izawa.org  /  izawa@clwit.co.jp   • Twitter:  @Yukimitsu_̲Izawa 「安心・安全・安定・信頼」できるインターネットサービスを !34