この前Fluentdの勉強会参加してお話を聞いたその翌日に
Fluentd→MongoDBでログ集約＆加工してSinatraでJSONなデータ生成。 @goando さんが作ったグラフモジュール（ bit.ly/MtoNau ）使ってTitanium MobileでそのJSONデータをグラフ化するとか妄想してみた
— hiroshi oyamada (@h5y1m141) May 19, 2012
ということをつぶやいていました。折角妄想したので、ひとまず作ってみました。
サーバ側でJSON生成
Fluentdの設定はこんな感じにしました。
<source> type tail path /var/log/apache2/access.log tag apache.access format apache </source> <source> type tail path /var/log/auth.log tag syslog.access format syslog </source> <match **.access> # plugin type type mongo # mongodb db + collection database apache collection access # mongodb host + port host localhost port 27017 # interval flush_interval 10s </match>
上記設定で、MongoDBにログが集約されたので、JSONを生成するSinatraアプリをこんな具合にしました。
require 'sinatra'
require 'mongo'
require 'json'
def connect_mongo(db,collection)
db = Mongo::Connection.new("localhost", 27017).db(db)
entries = db.collection(collection)
return entries
end
def convert_to_json(items)
items.each_with_index do |item,i|
content_type :json
body.push(item.to_json)
end
result = '[' + body.join(',') + ']'
return result
end
get '/mongo' do
access = connect_mongo('apache','access')
items = access.find()
return convert_to_json(items)
end
Titanium Mobile＋グラフモジュール使ってiPhone側でグラフ表示
以下2つをポイントに作成しました
- @goando さんが作成されたグラフモジュール（詳しくはこちら）があるのでそれを活用
- 取得したJSONに対してiPhone側であれこれ加工した方が使い勝手良さそう＆勉強のためにunderscore.jsを使って条件抽出
出来たソースはこんな感じ
var win = Ti.UI.createWindow({backgroundColor:"#CCC"});
var _ = require('lib/underscore');
var Charts = require('com.gnddesign.prettycharts');
httpClient('http://website/mongo',function(result){
var statusCode200 = _.chain(result)
.filter(function(item){return item.code ==='200';}).value();
var statusCode404 = _.chain(result)
.filter(function(item){return item.code ==='404';}).value();
var statusCode500 = _.chain(result)
.filter(function(item){return item.code ==='500';}).value();
var chartData = Charts.createChart({
leftChartType:0,
leftChartColor:2,
leftDataTitle:"status code",
leftDataUnit:'件',
leftDataArray:[statusCode200.length,statusCode404.length,statusCode500.length],
width:320,
height:480,
top:0,
left:0
});
win.add(chartData);
win.open();
});
function httpClient(url,callback){
if(Titanium.Network.online===true){
var xhr = Ti.Network.createHTTPClient();
xhr.open('GET',url);
xhr.onload = function(){
var result = JSON.parse(this.responseText);
callback(result);
};
xhr.error = function(){
var dialog = Ti.UI.createAlertDialog({
title: "ネットワーク接続エラー",
message: "ネットワーク接続が確立されていません。再度お試しください"
});
dialog.show();
myApps.ui.actInd.hide();
};
xhr.send();
}else{
var dialog = Ti.UI.createAlertDialog({
title: "ネットワーク接続できていません"
});
dialog.show();
myApps.ui.actInd.hide();
}
}
作ってみた感想とか課題
- あまり細かい条件抽出してないのでここまでは意外と簡単に出来た
- 時間帯別でログの表示をしたいので、MongoDB側でdb.apache.find({time:{$gt:xxx}})みたいな処理を考えないとダメ
- グラフをタッチした時に、関連の詳細情報を表示するView/TableViewへ画面遷移というようなことがprettychartsだと出来なそう？（間違っていたらゴメンナサイ）
- MarketPlaceにCharts Moduleがあって、15日間試用出来るけど、$29.99 /Seat /Month となんとなく高く感じる
当面やらないといけないことが多いけど、気が向いたら続きのエントリ書くかも
