ツール開発で思いついたこと、技術的内容のまとめBlog

2014
Feb 15

Flotr2を使いこなしてアクセス解析をしてみる

以前ブログで紹介したグラフ描画のためのJavaScriptライブラリ「Flotr2」。

Flotr2でブログに訪れる方が多いようなので、使い方をさらに詳しくまとめました。
ソースコードを覗くと実際にどのように使っているか具体的に分かるかもしれません。

Flotr2 サンプル
SQLiteとFlotr2でアクセスログ解析

ついでに自前のアクセス解析ツールの表示を更新してみました。
ログを表示してみたサンプルはこちら。



グラフが並ぶと実際、高度な解析をしているわけじゃないのに
いかにも解析している感じがしてテンションだけは上がりますね。



・ビーコン型ログ解析ツールのパフォーマンス向上

サーバーからアクセスログが収集できることが分かったので、CGIで取得していたビーコン型のツールを廃止しました。

現在はログ収集用のURLを用意しそのURLへのアクセスがあった場合、
mod_rewriteで常時「204 No Content」を返すようにしています。

解析ツールはログからそのURLのリクエストを拾い上げて表示しています。

一見すると無駄なHTTPリクエストを発生させているような気がしますが、
CGIでログ取得することに比べればレスポンスが早く、むしろサーバーの負荷が少ないはずなのでパフォーマンスは向上したと言えます。
レスポンスはざっくりと以下のようになりました。

・旧CGI版(ファイル書込)約140ms
・旧CGI(SQLite) 約200ms
・現方式(mod_rewrite) 約90ms

CGI版では悩みの種だったデータベースの同時アクセスの問題(ファイルのロックとか)が mod_rewrite方式で関係なくなったのが嬉しいところです。

運用されているサーバーのログ取得が一日おきに行われるという仕様上、集計結果を即時反映するような用途には向きませんが 使いようによってはいろいろなことができそうです。

2014
Feb 13

ページのキャッシュコントロールを使いこなす

キャッシュについて調べる機会があったのでメモしておきます。


1.毎回サーバーにリクエストさせる場合

ログの解析などでブラウザのリクエストを収集する場合、
ブラウザにキャッシュをさせたくない場合があります。

この場合レスポンスのヘッダーに
CacheControl: no-cache

をつけることが考えられますが、
ブラウザによっては無視されてキャッシュが使用されたり、あまり有効な手段ではないようです。

そこで、実際他のサイトでよく使われている方法。
「呼び出す側(コンテンツ)のURLにクエリ文字を入れる」

これが何より手っ取り早い。
例えば、content.jsというものがあったとすれば、呼び出すURLを以下のようにする。、

content.js?[ここに一意の文字列]

異なるURLを指定することでブラウザを「騙す」わけですね。

毎回リクエストさせるためには、毎回異なる値を指定する必要があるわけで、
そうなると手動では不可能です。

JavaScriptで動的にURLを出力することを考えたくなります。

function getUID(){
    var d = new Date();
    return d.getTime()+""+Math.random();
}

上のような時間とランダム値で限りなく一意に近い値を返すような関数を作って、
これをクエリ文字に使いましょう。

ひとまず目的は果たせるはず。


2.キャッシュさせる方法

手っ取り早いのはヘッダ部分にCacheControlのmax-ageを追加する方法。

CacheControl: max-age=[秒]

Expiresヘッダを設定する方法もあるが、Expires自体HTTP1.0にしか対応していないブラウザのものなので、
CacheControl: max-ageが指定してあればほぼ事足りるらしい。

別にすべてのブラウザでキャッシュされるとは思っていないので、本サイトでは設定する手間よりも省略を選びました。


3.キャッシュさせつつ更新したタイミングを管理したい

要するに合わせ技ですね。
更新したいタイミングでクエリ文字を変える仕組みを作れば、リクエストを減らしつつキャッシュ更新を管理できます。

膨大なアクセスを処理するブラウザゲームなどで使われている手法らしいです。

2013
Dec 21

クリックするとポイントがたまる「にゃんくる!ボタン」を設置

最近、CGIで面白いことができないかと考えた結果、
にゃんくる!ボタンを設置してみました。

まだ、データの集計部分は一切手をつけていませんが……
そのうちアクセスランキングと同様な形で人気度を測るツールとして役立てていこうかと思います。
ひとまず、厨二病系ページに貼り付けてみました。


・実装

サイトの規模の程にあったシンプルな設計となっています。

フキダシ部分はCSSの埋め込み画像を使っています。
DataURLで画像を埋め込み、CSS Spriteの要領でフキダシを作っています。
CSSは画像埋め込みで5kB程度に抑えました。
PCじゃ気づかなかったですが、iPodTouchで確認したら画像荒いですね。
スクリーンから遠く離れてご覧になってください。

・htaccessでハマる

今回、mod_rewriteを利用してリクエストを捌いています。
タグを出力する際にページごとに処理を振り分けるのに用いました。

mod_rewriteの動作が理解できずにかなり苦労しましたが、理解した部分をまとめたものを作成しました。
参考までに。
mod_rewriteのRewriteCondメモ

最新の更新

更新情報(Atomフィード)
このエントリーをはてなブックマークに追加
カテゴリ
プロジェクト進捗

二次小説執筆

アクセスランキング