JavaScriptだけでブログがコピーされた時にその内容をメールで送る

だいぶ前に WordPress：誰かが記事をコピーしたら教えてくれるプラグインCCC(Check Copy Contents)を作ってみた。着ぐるみ追い剥ぎペンギンというのを見て、これ面白そうだな、と思ってたんですが、このブログはOctopress+GitHub Pagesで出来ていて結果をメールで送ったりするの無理かな？と思ってました。

が、 MandrillをつかてJavaScriptだけでメールを送るで書いたように、 Mandrill というサービスを使うとそれが簡単に解決できたので GitHub Pagesにある様な静的なサイトでもJavaScriptだけでコピペを知らせられるようにしてみました。

Mandrillの準備
JavaScript
まとめ

Mandrillの準備

Mandrill でサインアップしてAPIのキーを取ってきます。

MandrillをつかてJavaScriptだけでメールを送る

JavaScript

以下の様なJavaScriptを用意します。

source/javascript/utils.js

jQuery(function($){
  $(document).on('copy', function(e) {
    var selected = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            selected = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            selected = document.selection.createRange().htmlText;
        }
    }
    if (!selected) return;
    var title = document.title;
    var url = 'http://' + location.host + location.pathname;
    $.ajax({
      type: "POST",
      url: "https://mandrillapp.com/api/1.0/messages/send.json",
      data: {
        'key': 'YOUR_API_KEY',
        'message': {
          'from_email': '[email protected]',
          'to': [
            {
              'email': '[email protected]',
              'name': 'your receiver',
              'type': 'to'
            }
          ],
          'subject': 'Copied at ' + title,
          'html': '<div><a href="' + url + '">' + title + '</a></div><br><br><div>' + selected + '</div>'
        }
      }
    });
  });
});

追記: 2015/08/10

location.hrefを使うと見出しからセクションに飛んだ時とかにハッシュ部分(#...)が残ってしまって違うページとカウントされてしまうので、

-var url = location.href;
+var url = 'http://' + location.host + location.pathname;

と変更しました。

追記ここまで

基本、自分で作るスクリプトはsource/javascript/utils.jsに入れているのでこの中に。

これはsource/_includes/head.htmlで<head>ブロックの最後で読み込んでいます。また、これを使うためにはjQueryを読み込む必要があります。

source/_includes/head.html

...
<head>
...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...
  <script src="{{root_url}}/javascripts/utils.js"></script>
</head>
...

上のスクリプトの中のkeyを自分のものを入れて、後は

from_email: 送り主メアド。メアドの形をしてれば([email protected])なんでもOK。
email: メールの送り先。
name: 送り先人の名前。

を適宜自分用に設定してあげるだけです。

これで、copyイベントが起こった時にこの関数が呼ばれるので、 Ctrl-C(Cmd-C)でも右クリックからのコピーでも呼ばれます。

コピー時に選択している部分をwindow.getSelection()で取ってきて渡してますが、document.selectionの部分は古いIE用です。

getselection - How to get selected html text with javascript? - Stack Overflow

API Keyを公開することになるのでどうなの、と言う話もありますが、取り敢えずこれに使うためだけに登録したものなので余程の事がない限りは問題ないかな、と。

How to send an email from JavaScript - Stack Overflow

まとめ

という感じで、思ったよりも簡単に出来ました。

特にOctopressでなくてもどんなとこでも使えるものなので一度やってみると面白いと思います。

実際結構コピーされてて面白いです。ただのミスっぽい良くわからないところのコピーも多いですが

追記: 2014/12/30

だれかがこの設定を使って Mandrillを使ってJavaScriptだけでメールを送るの方のポスト上で

「こ」「ン」「に」「ち」「は」

と送ってくれました。

追記ここまで

追記: 2015/01/05

Google Analyticsへ送るバージョンもやってみました。

ブログがコピーされた事をGoogle Analyticsでチェックする

追記ここまで

追記: 2015/08/11

ここ最近ブログでよくコピーされる物

追記ここまで