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

が、 MandrillをつかてJavaScriptだけでメールを送るで書いたように、 Mandrill というサービスを使うとそれが簡単に解決できたので GitHub Pagesにある様な静的なサイトでも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;
        }
    }
    var title = document.title;
    var  url = location.href;
    $.ajax({
      type: "POST",
      url: "https://mandrillapp.com/api/1.0/messages/send.json",
      data: {
        'key': 'YOUR_API_KEY',
        'message': {
          'from_email': 'your_sender@example.com',
          'to': [
            {
              'email': 'your_receiver@example.com',
              'name': 'your receiver',
              'type': 'to'
            }
          ],
          'subject': 'Copied at ' + title,
          'html': '<div><a href="' + url + '">' + title + '</a></div><br><br><div>' + selected + '</div>'
        }
      }
    });
  });
});

基本、自分で作るスクリプトは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="/javascripts/utils.js"></script>
</head>
...

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

from_email: 送り主メアド。メアドの形をしてれば(~@XXX.YYY)なんでも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でなくてもどんなとこでも使えるものなので一度やってみると面白いと思います。

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

Notice a copy event on your blog by email only by JavaScript (In English)

rcmdnk’s blog

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

Mandrillの準備

JavaScript

まとめ