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

SinatraTwitterBootstrapMongoDB

で書籍管理Webシステム

13年8月19日月曜日

書籍管理システム

• 所持している書籍を管理

• 借りたい本・欲しい本を共有

• 誰がどのスキルを有しているか共有


ベース技術

• Sinatra

• Twitter Bootstrap

• MongoDB


Sinatra

• Ruby製Webフレームワーク

• MCモデル

• ちょー簡単

• 第１回で発表


Hello World

require ‘sinatra’

get ‘/’ do

p ‘Hello World!’

end


Ruby : Web Server

• WEBrick

• Mongrel -> thin (<= Heroku推奨)

• Phusion Passenger (Standalone)

• Unicorn

old

new


WSGI -> Rack

FW

server

FW

server

FW

server

✕


WSGI -> Rack

FW

server

FW

server

FW

server

WSGI


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

endend

引数を１つ持つcallメソッドを実装

•ステータスコード•レスポンスヘッダ(Hash)

•レスポンスボディ(Array)

を返す


Rackup

require ‘app.rb’run App.new

$ROOT

- app.rb

- config.ru

$> rackup config.ru


Twitter Bootstrap

• 簡単に綺麗なWebサイトが作れる

• Bootstrap 3 RC 1

• レスポンシブデザイン強化

• 後方互換なし

• 没個性


サンプル


ドキュメント


MongoDB

• NoSQL

• Not Only SQL != RDBMS

• MongoDBはドキュメント指向型

• JSON形式でデータを保存

• スキーマレス


NoSQL

• Key-Value型

• Redis / Riak / Memcached

• ドキュメント指向型

• MongoDB / CouchDB

• カラム指向型

• HBase / Cassandra


✕ テーブル◯ コレクション

{ "_id" : ObjectId("47cc67093475..."), "username" : "bob", "address" : { "street" : "123 Main Street", "city" : "Springfield", "state" : "NY" }　}

> db.users.find({"address.state" : "NY"})

User collection


ROADMAP


開発の流れ

• サンプルHTML作成

• Sinatraで静的Webシステム化

• MongoDB連携

• Amazonとの連携


サンプルHTML作成

• Bootstrapのサンプルをベースに

• 大まかなレイアウトを決めるレベル


上部メニュー

サイドメニュー

メインコンテンツ

アクティビティ欲しいなぁ…

(RSS配信してみたい)

メインはこんな感じで表示？

とりあえず実装が楽なASIN使って登録する形で。


静的Webシステム化

• Sinatra使って表示

• Webシステムの雛形を作るレベル

• bundler

• haml

• layout.haml

• git


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>


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 :asinend


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


heroku

• RubyのPaaS

• 最近Javaも行けるらしい

• gitでデプロイ

• heroku toolbeltでコマンド操作

• 公式からダウンロード推奨


herokuでハマる①

• カレントディレクトリがロードパスに含まれない

• ✕ require ‘app.rb’

• ◯ require ‘./app.rb’


herokuでハマる②

• sinatra/reloader

• sinatra/reloaderはdev環境でのみ動くようにすべきらしい

require ‘sinatra/reloader’ if development?

configure :development do Bundler.require :development register Sinatra::Reloaderend


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動かない…


でけた

http://blooming-inlet-2675.herokuapp.com/index




vagrant/chef

• 時間が…


今後

• ログインシステム

• セション管理

• Chefレシピ


読む


まとめ• 色々触ってみるの大事

• 便利なものは広まる(Rack / gem)

• だるいのがどこか分かる(heroku logs)

• Google先生は偉大

• Shut the fuck up, write some code.


https://github.com/kaakaa/BookManager






Technology

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