バックエンドを持つブックマークレットを作った #mlkcca

Posted at 2015-12-06

作ったもの

今見ているページを、ページのタイトル、URL、メモとともにバックエンド(Milkcocoa)へ送信するブックマークレットを作りました。
なにが面白いかというと、バックエンドを持つブックマークレットが簡単に作れるということなんです。

動機

会社と家で別のGoogleアカウントを使っていて、会社で見てるページを家のほうでブックマークに入れたいということがよくありました。しかし共有する手段がなく困った。
そのときブックマークレットの作り方を見かけて、**これとMilkcocoa組み合わられるかな？**と思い作りました。
「でもそういうサービスとかEvernoteとかTwitterに残しておけばよくね？？」とか言われそうですが、そんなの関係ないんです。Milkcocoaで作りたかったんです。

Milkcocoaの面白さ

ブックマークレットでなにか永続的に記録する仕組みをつくるには、これまではJSでXMLHttpRequestを使ってバックエンドと通信してDBに書き込むという流れでした。
しかしMilkcocoaを使うと、バックエンドと通信する部分だけ書けばよく、あとはやらなくて済みます。
つまりこういう小さいツールを作るのに非常に向いているんです。

作り方

ブックマークのURL欄にjavascript:ってつけてJSを書きます。なんですが、JSから外部のライブラリを読み込むにはそのままでは無理です。なのでJSでscriptタグを生成して、そのsrc属性にmilkcocoaのCDNを指定、onLoadで処理を書くという作りになります。

コード

javascript: (function () {
    'use strict';

    var scriptTag;
    scriptTag = document.createElement('script');
    scriptTag.src = "https://cdn.mlkcca.com/v2.0.0/milkcocoa.js";
    scriptTag.onload = function () {
        var mk = new window.MilkCocoa('{YourAppId}.mlkcca.com'),
            ds = mk.dataStore('website'),
            memo = window.prompt("メモ", "");
        ds.push({
            "title": document.title,
            "url": location.href,
            "memo": memo
        }, function (err, pushed) {
            window.console.log(pushed);
        });
    };
    document.body.appendChild(scriptTag);
}());