search
LoginSignup
8

More than 5 years have passed since last update.

posted at

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

作ったもの

今見ているページを、ページのタイトル、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);
}());

解説

  1. scriptタグを生成します
  2. scriptタグのsrcにmilkcocoaのCDNを指定します
  3. onLoadの中に処理を書きます
  4. Milkcocoaインスタンスをnewします(YourAppIdにはあなたのMilkccoaのを使ってください)
  5. メモはプロンプト出して記入してもらいます
  6. ds.pushでページタイトル、URL、メモをwebsiteという名前のデータストアに送ります
  7. 完了したら確認のためコンソールにpushしたデータを表示します

以上。これでMilkcocoaに今見ているページのタイトル・URL・メモを送ることができます。

使い方

ブックマークのURLにコードを貼り付けて保存します。
image

ブックマークレットを押してみます。
無題.png

Milkcocoaを確認してみます。
無題2.png

ページのタイトル、URL、メモを送れました!

あとはMilkcocoaの管理画面から直接データを見るなり、自分で専用のページをつくってds.stream()で一覧表示するなりしてご利用ください。

注意

ブックマークレットのコードの中で//でコメントしちゃうと、ブックマークレットにしたとき1行になってそれ以降のコードが読めなくなります。コメントするときは/**/でしましょう。

あとtwitterとかgoogleとかみたいにContent-Security-Policyをちゃんと設定してあるところだと使えないようです。回避策あるのかわかりませんが、まぁそういうところでは使わないものを作ろう、作るならブラウザ拡張でやろうってことでお願いします。

雑感等

Milkcocoa(ないしBaaS)を基点にWeb技術を眺めていると、お?こんなことできるんじゃない?と思うことがけっこうあります。しかも手軽に作れてしまいます。今回のも骨格は15分かからずで作りました。覚えることも少なく、非常に親しみやすい技術だと思います。オススメです。

以上、アドベントカレンダー7日目でした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8