SlideShare a Scribd company logo
Sinatra
TwitterBootstrap
MongoDB
で書籍管理Webシステム
13年8月19日月曜日
書籍管理システム
• 所持している書籍を管理
• 借りたい本・欲しい本を共有
• 誰がどのスキルを有しているか共有
13年8月19日月曜日
ベース技術
• Sinatra
• Twitter Bootstrap
• MongoDB
13年8月19日月曜日
Sinatra
• Ruby製Webフレームワーク
• MCモデル
• ちょー簡単
• 第1回で発表
13年8月19日月曜日
Hello World
require ‘sinatra’
get ‘/’ do
p ‘Hello World!’
end
13年8月19日月曜日
Ruby :Web Server
• WEBrick
• Mongrel -> thin (<= Heroku推奨)
• Phusion Passenger (Standalone)
• Unicorn
old
new
13年8月19日月曜日
WSGI -> Rack
FW
server
FW
server
FW
server
✕
13年8月19日月曜日
WSGI -> Rack
FW
server
FW
server
FW
server
WSGI
13年8月19日月曜日
Rack実装
class App
def call(env)
case env[‘REQUEST_METHOD’]
when ‘GET’
[
200,
{ ‘Content-Type’ => ‘text/html’ },
[‘<html><head></head><body>hello</body></html>]
]
end
end
end
引数を1つ持つ
callメソッドを実装
•ステータスコード
•レスポンスヘッダ(Hash)
•レスポンスボディ(Array)
を返す
13年8月19日月曜日
Rackup
require ‘app.rb’
run App.new
$ROOT
- app.rb
- config.ru
$> rackup config.ru
13年8月19日月曜日
Twitter Bootstrap
• 簡単に綺麗なWebサイトが作れる
• Bootstrap 3 RC 1
• レスポンシブデザイン強化
• 後方互換なし
• 没個性
13年8月19日月曜日
サンプル
13年8月19日月曜日
ドキュメント
13年8月19日月曜日
MongoDB
• NoSQL
• Not Only SQL != RDBMS
• MongoDBはドキュメント指向型
• JSON形式でデータを保存
• スキーマレス
13年8月19日月曜日
NoSQL
• Key-Value型
• Redis / Riak / Memcached
• ドキュメント指向型
• MongoDB / CouchDB
• カラム指向型
• HBase / Cassandra
13年8月19日月曜日
✕	

 テーブル
⃝	

コレクション
{
"_id" : ObjectId("47cc67093475..."),
"username" : "bob",
"address" : {
"street" : "123 Main Street",
"city" : "Springfield",
"state" : "NY"
}
 }
> db.users.find({"address.state" : "NY"})
User collection
13年8月19日月曜日
ROADMAP
13年8月19日月曜日
開発の流れ
• サンプルHTML作成
• Sinatraで静的Webシステム化
• MongoDB連携
• Amazonとの連携
13年8月19日月曜日
サンプルHTML作成
• Bootstrapのサンプルをベースに
• 大まかなレイアウトを決めるレベル
13年8月19日月曜日
上部メニュー
サイドメニュー
メインコンテンツ
アクティビティ欲しいなぁ…
(RSS配信してみたい)
メインはこんな感じで表示?
とりあえず実装が楽な
ASIN使って登録する形で。
13年8月19日月曜日
静的Webシステム化
• Sinatra使って表示
• Webシステムの雛形を作るレベル
• bundler
• haml
• layout.haml
• git
13年8月19日月曜日
layout.haml
%html
%head
%body
= yield
index.haml
%h1
Hello World!
app.rb
require ‘sinatra’
get ‘/’ do
haml :index
end
<html>
<head>
</head>
<body>
<h1>
Hello World!
</h1>
</body>
</html>
13年8月19日月曜日
DB連携
• mongoid
• Object Document Mapper
• mongoid3の情報が少ない…
• 画像保存方法
• Base64文字列として保存
• 文字列として画像表示
class Book
include MongoID::Document
field :title, type: String
field :author, type: String
field :asin
validates_uniqueness_of :asin
end
13年8月19日月曜日
Base64
• Base64エンコード
CGI.escape(Base64.encode64(open(‘hoge.jpg’).read))
• 表示
<img src=”data:image/png;base64,IVFHODIUEE....”/>
13年8月19日月曜日
Amazon連携
• 書籍情報をAmazonから取得
• gem ‘amazon-ecs’
• ASINコードベース
• Amazon Product Advertising API
• AWSアカウント
• Amazonアソシエイトアカウント
13年8月19日月曜日
デプロイ
• heroku
• vagrant / chef
13年8月19日月曜日
heroku
• RubyのPaaS
• 最近Javaも行けるらしい
• gitでデプロイ
• heroku toolbeltでコマンド操作
• 公式からダウンロード推奨
13年8月19日月曜日
herokuでハマる①
• カレントディレクトリがロードパスに
含まれない
• ✕ require ‘app.rb’
• ⃝ require ‘./app.rb’
13年8月19日月曜日
herokuでハマる②
• sinatra/reloader
• sinatra/reloaderはdev環境でのみ動くよ
うにすべきらしい
require ‘sinatra/reloader’ if development?
configure :development do
Bundler.require :development
register Sinatra::Reloader
end
13年8月19日月曜日
herokuでハマる③
• Webrick -> thin
• config.ru
• Procfile(foreman)
• modular style -> classic style
web: bundler exec config.ru -p $PORT
class App < Sinatra::Base
get ‘/’ do
‘hello world’
end
end
get ‘/’ do
‘hello world’
end
• なぜかmodularだとforeman動かない…
13年8月19日月曜日
でけた
http://blooming-inlet-2675.herokuapp.com/index
13年8月19日月曜日
vagrant/chef
• 時間が…
13年8月19日月曜日
今後
• ログインシステム
• セション管理
• Chefレシピ
13年8月19日月曜日
読む
13年8月19日月曜日
まとめ
• 色々触ってみるの大事
• 便利なものは広まる(Rack / gem)
• だるいのがどこか分かる(heroku logs)
• Google先生は偉大
• Shut the fuck up, write some code.
13年8月19日月曜日
https://github.com/
kaakaa/BookManager
13年8月19日月曜日

More Related Content

PDF
Rubyで作るクローラー Ruby crawler
PDF
20150523
PDF
my unite plugins
PDF
20130909 sacloudの薄い本
PDF
暗号化したまま計算できる暗号技術とOSS開発による広がり
PDF
サーバ構築実践入門
PPTX
Microsoft open technologies の ross gardler さんを囲む会 改め 『microsoft open technolo...
PPTX
MS open technologies の ross gardler さんを囲む会 改め 『MS open technologies に必ず伝えてほしい...
Rubyで作るクローラー Ruby crawler
20150523
my unite plugins
20130909 sacloudの薄い本
暗号化したまま計算できる暗号技術とOSS開発による広がり
サーバ構築実践入門
Microsoft open technologies の ross gardler さんを囲む会 改め 『microsoft open technolo...
MS open technologies の ross gardler さんを囲む会 改め 『MS open technologies に必ず伝えてほしい...

What's hot (10)

PPTX
2015 12-04 about_neovim
PDF
RVM with Server Environment
PDF
Unite vim
PDF
20130216 magical record
PDF
Railsチュートリアル(second)を終えて
PPTX
Railsのフロントエンド開発を考える
PDF
リアルタイムweb入門
PDF
mrubyボードを使って こんなことしてみました Kansai.mrb 2014 dec
PPT
20091119_sinatraを使ってみた
PPTX
Vagrant×Rails セットアップ講習会資料
2015 12-04 about_neovim
RVM with Server Environment
Unite vim
20130216 magical record
Railsチュートリアル(second)を終えて
Railsのフロントエンド開発を考える
リアルタイムweb入門
mrubyボードを使って こんなことしてみました Kansai.mrb 2014 dec
20091119_sinatraを使ってみた
Vagrant×Rails セットアップ講習会資料
Ad

More from Nemoto Yusuke (9)

PDF
Mattermost Plugin Bounty Programについて
PDF
Gradle布教活動
PDF
Gradle handson
PDF
Scalaを触ってみた
PDF
SVG事始め
PDF
実践プログラミング DSL
PDF
ブログる
PDF
社内勉強会 - chef
PDF
Sinatra slideshare
Mattermost Plugin Bounty Programについて
Gradle布教活動
Gradle handson
Scalaを触ってみた
SVG事始め
実践プログラミング DSL
ブログる
社内勉強会 - chef
Sinatra slideshare
Ad

社内勉強会 - 書籍管理Webシステム