milkcocoaを使ってページカウンターを作る

動機

ふと、一昔前にブログや簡単な自作Webページにページカウンターを入れようとしたときに、CGI作ってテキストの文字をカウントアップして・・・みたいなことを考えていた時期があったのを思い出したのですが、milkcocoaを使えば簡単にできそうな気がしてやってみました。

登録まで

milkcocoa（こちら）からユーザ登録をして、Dashboardからアプリを登録しておきます。名称は任意で、分かりやすい名前をつけておきます。難しいUIでもないので迷うことはないと思います。

アプリの登録が完了すると次のような画面がでてきます。

ここのコードは次節で使います。

実際に書いてみる

難しいことはないのでコードだけ載せておきます。こんな感じです。

milkcocoaに保存した現在のカウント数を取得して、1足して再度milkcocoaに保存しているだけです。
dataStoreのidを分ければ例のコードのように「今日のカウント」と「トータルのカウント」を分けたりもできます。

milkcocoaを使うために、対象のHTMLにscriptタグを埋め込んでおきます。

index.html

	<script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>

script.js

$(document).ready(function() {

    // この行はdashboardからコピペして置き換えてください
    var milkcocoa = new MilkCocoa("[your-app-id].mlkcca.com");

    var countDataStore = milkcocoa.dataStore('count');

    countDataStore.get('todayCount', function(err, datum) {
        var todayCount = datum.value.count * 1;
        todayCount++;
        console.log(todayCount);

        countDataStore.set('todayCount', {'count' : todayCount.toString(10)});
        
        // あとはDOMで自由に
        // $('.classname').text = todayCount;
    });

    countDataStore.get('totalCount', function(err, datum) {
        var totalCount = datum.value.count * 1;
        totalCount++;
        console.log(totalCount);

        countDataStore.set('totalCount', {'count' : totalCount.toString(10)});
    });
});

クライアントの処理に依存するところもあるので、アクセスが集中すると正確に計測できないとかあるかもしれないですが、JavaScriptで書いておけるので GitHubやAWS S3等の静的ホスティングサービスを使うときにも使えて便利ではないでしょうか。

案の定とても簡単にできたので、個人サイト運営しているけどサーバいじるのもなぁという方には結構おすすめだと思います。

注意点

これは何か良い解決策があるのかもしれませんが、一番最初、milkcocoaサーバ上にdataStoreが存在していない状態で、countDataStore.get('todayCount', function(err, datum) {}を実行すると0ではなくNaNが返ってきてうまくカウントアップできないので、始め実行するときは使用するidを含むdataStoreを初期値0で作成しておきます。

そのままにしておくと、２回目以降も0で初期化してしまって永遠カウントアップできないので、一度データストアが作成されたことを確認できたら消してしまいます。
データストアに任意のデータが入れられているかどうかは、Webのdashboardのアプリ管理画面からも確認できます。

（もちろんNaNのときだけ新しくデータセットにセットするような条件分岐で書いてもよさそうです）

script.js

$(document).ready(function() {

    // この行はdashboardからコピペして置き換えてください
    var milkcocoa = new MilkCocoa("[your-app-id].mlkcca.com");

    var countDataStore = milkcocoa.dataStore('count');

	countDataStore.set('todayCount', {'count' : '0'}); // ここ
	countDataStore.set('totalCount', {'count' : '0'}); // ここ

    countDataStore.get('todayCount', function(err, datum) {
        var todayCount = datum.value.count * 1;
        ...

リンクなど

• milkcocoa