0

Sinatra+Haml+jQueryテンプレートにDataMapper版とMongoid版を追加した

去年作った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以外のブランチにmongoiddm-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のセットアップは以前書いた


この下に書いてある事は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
みたいに取り出せる。

0

NFCタグサーバーもJavaScriptだけで使えるようにした

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

0

HTML+JavaScriptをArduinoに直結できるシリアルポートサーバーを作った

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Ωの抵抗を接続する
SerialPort Server sample
SerialPort Server sample

3. SerialPort Serverを起動する

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

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


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



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

0

Apache+Passengerでenvironmentの設定

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

set :environemt, :production
とか
set :environemt, :development
って書いてたんだけど、httpd.confに
RackBaseURI /app_path
RackEnv production
って書けばいいのだった。

0

twitterの発言をskypeに投げる

研究会の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が使えるスゴイ奴だよ