橋本商会

去年作ったSinatra+Haml+jQuery入門のテンプレ、なにげにしょっちゅうアップデートしている。
内容は↑にも書いてあるがおみくじを引くだけの超単純なアプリだ。
新規プロジェクトを開始する時はコレをcloneして使うので、余計な物を付けない様にしている。

githubのリポジトリはここ https://github.com/shokai/sinatra-template


■使っている部品
今はこういう構成になっている

• Ruby 1.8.7
• Sinatra 1.3
• Haml + sinatra-content-for
• Sass
• jQuery
• foreman
• bundler

master以外のブランチにmongoidとdm-mysqlの2つがある。
それぞれDataMapper+MySQLと、Mongoid+MongoDBをバックエンドにしたやつ。


DataMapper+MySQL版はこんなファイル構成にしている。（Mongoidもほぼ同じ）

.

├── Gemfile  # 必要なGEMを書いておくファイル。bundle installで一気にインストールされる。

├── Procfile  # webサーバーと同時に起動するプロセスを書いておく

├── README.md

├── bin

│   ├── console.rb  # DB接続してModel読み込んだ状態でIRBが起動する

│   ├── db_migrate.rb  # DBを初期化するツール

│   └── db_upgrate.rb  # model更新した時にDBスキーマを更新するツール

├── bootstrap.rb  # これを読み込むとconfig.ymlを読んだりmodels/controllers/hellpersを一括読み込みしたりできる

├── config.ru  # RackUp用の設定

├── config.yml  # 設定ファイル

├── controllers  # sinatraのルーティングメソッドを書いたファイルを入れるディレクトリ

│   ├── css.rb

│   └── main.rb

├── helpers  # 便利関数を入れるディレクトリ

│   └── helper.rb

├── inits  # DB接続とか、一番最初に実行すべき処理を書く

│   └── db.rb

├── models

│   └── omikuji.rb  # DBのQueryとかを集約する

├── public

│   └── js

│       ├── jquery.js

│       └── main.js  # index.hamlから読まれるJS

├── sample.config.yml  # config.ymlにリネームして使う

└── views

    ├── index.haml  # レイアウト抜きのメインコンテンツ部分

    ├── layout.haml  # レイアウト

    └── main.scss  # cssのテンプレ

■DataMapperとMySQLを使う
MySQL版はこんなの（デモ）

MySQLのセットアップは以前書いた

• MacにhomebrewでMySQL5.1.58インストールした
• UbuntuにMySQL5.1.62インストールした
• DataMapperでMySQLを使ってみる

この下に書いてある事はREADMEにも書いてある。


cloneしてくる

% git clone git://github.com/shokai/sinatra-template.git

% cd sinatra-template

% git branch -a

% git checkout -b dm-mysql remotes/origin/dm-mysql

設定

% cp sample.config.yml config.yml

config.ymlのMySQLのパスワード等を変更する


DB作る。最初のDB作る部分はログインして自分で作らないとならない。

% mysql -u your_name -p

mysql> create database sinatra_template

% ruby bin/db_migrate.rb

DB初期化するけどいいか？と訊かれるのでYesと答えよう。


起動

% gem install foreman bundler

% bundle install

% foreman start

http://localhost:8080 で起動する。


なんかすごい当たり前の話なんだけど、単純なWebアプリではなく、クローラとか色々と組み合わせたアプリを書くことが多い。
クローラとWebアプリが同じModelを読み込んで、同じ設定ファイルを読んで同じDBに接続するようにすると、綺麗に実装できる。

conosle.rbみたいな書き方をすると良い。

#!/usr/bin/env ruby

require 'rubygems'

require 'bundler/setup'

require File.dirname(__FILE__)+'/../bootstrap'

Bootstrap.init :inits, :models

これだけでDB接続してModelを読み込めるので、あとは普通に書けばいい。

設定ファイル(config.yml)の中身も、main.rbでやっているように

@title = Conf['title']

result = Conf['omikuji'].choice

みたいに取り出せる。

NFCタグサーバーにもクロスドメインでAjaxできるようにするためにHTTP HeaderにAccess-Control-Allow-Originを追加した。
JavaScriptだけでNFCタグリーダーを使える。

これ → IO-DATAのNFCタグリーダーをHTTP、WebSocket、Socketから使えるようにした

Eventmachine HttpServerが軽量で使いやすいので、sinatraを使うほどでもないプロジェクトでよく使っている。

class NfcHttpServer  < EM::Connection

  include EM::HttpServer

  

  def process_http_request

    res = EM::DelegatedHttpResponse.new(self)

    puts "* http #{@http_request_method} #{@http_path_info} #{@http_query_string} #{@http_post_content}"

    res.headers['Access-Control-Allow-Origin'] = '*'

    res.headers['Access-Control-Allow-Headers'] = 'Content-Type'

    res.headers['Access-Control-Allow-Methods'] = 'PUT,DELETE,POST,GET,OPTIONS'

    res.status = 200

    res.content = @@tag.to_s

    res.send_response

  end

end

Eventmachine HttpServerはドキュメント全然書かれてないけど、コードが読みやすいのでどうにでもできる。cometとかもできるし。


■参考にした
Ajaxのクロスサイト通信をJSONPを使わないでやってみよう – Back yard : yuya_lush’s report

SerialPort Serverを使うと、HTMLとJSをArduinoに直結できる。JavaScriptを少し書くだけでArduinoに「カーテン開けろ」とか「部屋の明るさよこせ」とか命令を送れるわけだ。
Web系の技術とハードウェアの技術を同時に使うには、間に「つなぎ」が必要なので、必要な機能を全部入れたサーバーを作ってみた感じです。
（github pagesでプロジェクトページ作ってみたんだけど楽でいいですね）


こういうこと。


シリアルポートサーバーはrubygemsでインストールできる。

gem install serialport-server

which serialport-server

serialport-server --help

serialport-server /dev/tty.デバイス名

–helpでヘルプが出る。デバイス名を引数にして起動できる。
Macならsudo gem installで一発でインストールできるはず。

起動するとHTTPサーバー(http://localhost:8783)、WebSocketサーバー(ws://localhost:8784)、TCP Socketサーバー(localhost:8785)の3つが同時に起動する。

HTTPのサーバーはajaxのクロスドメイン制限を超えてデータのやりとりができるようにしてある。シリアルポートサーバーを動かして、HTMLとJavaScriptを書けばArduinoとJavaScriptが直接通信できるというわけだ。
（response headerにAccess-Control-Allow-Originを付ければ良いとyuisekiのはてブを見ていて知ったのでやってみた。）


■デモ
SerialPort Serverのページにも英語で書いたが、簡単なサンプルプロジェクトを日本語でも解説しておく。


1. Arduinoにプログラムを書き込む

2. ArduinoのDigital13番ピンにLEDを、Analog0番ピンにCdSと10kΩの抵抗を接続する



3. SerialPort Serverを起動する

4. Ajax版サンプルを開いて試してみる

5. WebSocket版サンプルを開いて試してみる


WebブラウザからLEDを点灯消灯したり、CdSの明るさの値がリアルタイムにスライダーに反映されているはずだ。
実際にAjaxサンプルのJavaScriptのコードを見てみると簡単さがわかると思う。17行でLEDとCdSを制御できている。



もちろんWebサーバーなので、複数のWebブラウザがSerialPort Serverから同時にデータを読み出そうとしても大丈夫。
増井研で1年以上、遠隔操縦ロボットの制御に使っていたプログラムを元に使っているのでプロセスを起動してたぶん3ヶ月ぐらい放置していても動き続けるぐらいに安定していると思う。

いままでsinatra使う時にconfig.ruに

set :environemt, :production

とか

set :environemt, :development

って書いてたんだけど、httpd.confに

RackBaseURI /app_path

RackEnv production

って書けばいいのだった。

研究会のskype chatで存在感がない人を忘れないために、研究会のtwitterアカウントでfollowしている人の最近の発言をランダムに投稿するようにしている

3時間ごとに投げる。


ここにコードおいてある
https://github.com/shokai/skype-chat-gateway-mac/tree/master/tools/twitter


skypeへの投稿はSkype Chat Gatewayと、WebブラウザからSkypeチャットできるやつ作ったに書いたskype-chat-gatewayを使っている。HTTPでskype chatが使えるスゴイ奴だよ