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><he...
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"...
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
<htm...
DB連携
• mongoid
• Object Document Mapper
• mongoid3の情報が少ない…
• 画像保存方法
• Base64文字列として保存
• 文字列として画像表示
class Book
include Mongo...
Base64
• Base64エンコード
CGI.escape(Base64.encode64(open(‘hoge.jpg’).read))
• 表示
<img src=”data:image/png;base64,IVFHODIUEE......
Amazon連携
• 書籍情報をAmazonから取得
• gem ‘amazon-ecs’
• ASINコードベース
• Amazon Product Advertising API
• AWSアカウント
• Amazonアソシエイトアカウント...
デプロイ
• 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...
herokuでハマる③
• Webrick -> thin
• config.ru
• Procfile(foreman)
• modular style -> classic style
web: bundler exec config.ru -p...
でけた
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年...
https://github.com/
kaakaa/BookManager
13年8月19日月曜日
Upcoming SlideShare
Loading in...5
×

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

1,004

Published on

社内勉強会用資料

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,004
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Sinatra TwitterBootstrap MongoDB で書籍管理Webシステム 13年8月19日月曜日
  2. 2. 書籍管理システム • 所持している書籍を管理 • 借りたい本・欲しい本を共有 • 誰がどのスキルを有しているか共有 13年8月19日月曜日
  3. 3. ベース技術 • Sinatra • Twitter Bootstrap • MongoDB 13年8月19日月曜日
  4. 4. Sinatra • Ruby製Webフレームワーク • MCモデル • ちょー簡単 • 第1回で発表 13年8月19日月曜日
  5. 5. Hello World require ‘sinatra’ get ‘/’ do p ‘Hello World!’ end 13年8月19日月曜日
  6. 6. Ruby :Web Server • WEBrick • Mongrel -> thin (<= Heroku推奨) • Phusion Passenger (Standalone) • Unicorn old new 13年8月19日月曜日
  7. 7. WSGI -> Rack FW server FW server FW server ✕ 13年8月19日月曜日
  8. 8. WSGI -> Rack FW server FW server FW server WSGI 13年8月19日月曜日
  9. 9. 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日月曜日
  10. 10. Rackup require ‘app.rb’ run App.new $ROOT - app.rb - config.ru $> rackup config.ru 13年8月19日月曜日
  11. 11. Twitter Bootstrap • 簡単に綺麗なWebサイトが作れる • Bootstrap 3 RC 1 • レスポンシブデザイン強化 • 後方互換なし • 没個性 13年8月19日月曜日
  12. 12. サンプル 13年8月19日月曜日
  13. 13. ドキュメント 13年8月19日月曜日
  14. 14. MongoDB • NoSQL • Not Only SQL != RDBMS • MongoDBはドキュメント指向型 • JSON形式でデータを保存 • スキーマレス 13年8月19日月曜日
  15. 15. NoSQL • Key-Value型 • Redis / Riak / Memcached • ドキュメント指向型 • MongoDB / CouchDB • カラム指向型 • HBase / Cassandra 13年8月19日月曜日
  16. 16. ✕ テーブル ⃝ コレクション { "_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日月曜日
  17. 17. ROADMAP 13年8月19日月曜日
  18. 18. 開発の流れ • サンプルHTML作成 • Sinatraで静的Webシステム化 • MongoDB連携 • Amazonとの連携 13年8月19日月曜日
  19. 19. サンプルHTML作成 • Bootstrapのサンプルをベースに • 大まかなレイアウトを決めるレベル 13年8月19日月曜日
  20. 20. 上部メニュー サイドメニュー メインコンテンツ アクティビティ欲しいなぁ… (RSS配信してみたい) メインはこんな感じで表示? とりあえず実装が楽な ASIN使って登録する形で。 13年8月19日月曜日
  21. 21. 静的Webシステム化 • Sinatra使って表示 • Webシステムの雛形を作るレベル • bundler • haml • layout.haml • git 13年8月19日月曜日
  22. 22. 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日月曜日
  23. 23. 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日月曜日
  24. 24. Base64 • Base64エンコード CGI.escape(Base64.encode64(open(‘hoge.jpg’).read)) • 表示 <img src=”data:image/png;base64,IVFHODIUEE....”/> 13年8月19日月曜日
  25. 25. Amazon連携 • 書籍情報をAmazonから取得 • gem ‘amazon-ecs’ • ASINコードベース • Amazon Product Advertising API • AWSアカウント • Amazonアソシエイトアカウント 13年8月19日月曜日
  26. 26. デプロイ • heroku • vagrant / chef 13年8月19日月曜日
  27. 27. heroku • RubyのPaaS • 最近Javaも行けるらしい • gitでデプロイ • heroku toolbeltでコマンド操作 • 公式からダウンロード推奨 13年8月19日月曜日
  28. 28. herokuでハマる① • カレントディレクトリがロードパスに 含まれない • ✕ require ‘app.rb’ • ⃝ require ‘./app.rb’ 13年8月19日月曜日
  29. 29. herokuでハマる② • sinatra/reloader • sinatra/reloaderはdev環境でのみ動くよ うにすべきらしい require ‘sinatra/reloader’ if development? configure :development do Bundler.require :development register Sinatra::Reloader end 13年8月19日月曜日
  30. 30. 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日月曜日
  31. 31. でけた http://blooming-inlet-2675.herokuapp.com/index 13年8月19日月曜日
  32. 32. vagrant/chef • 時間が… 13年8月19日月曜日
  33. 33. 今後 • ログインシステム • セション管理 • Chefレシピ 13年8月19日月曜日
  34. 34. 読む 13年8月19日月曜日
  35. 35. まとめ • 色々触ってみるの大事 • 便利なものは広まる(Rack / gem) • だるいのがどこか分かる(heroku logs) • Google先生は偉大 • Shut the fuck up, write some code. 13年8月19日月曜日
  36. 36. https://github.com/ kaakaa/BookManager 13年8月19日月曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×