rcmdnk's blog
Last update

English ver.: Notice a copy event on your blog by email only by JavaScript
Mandrill

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

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

Sponsored Links

Mandrillの準備

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

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

JavaScript

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

source/javascript/utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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を使うと見出しからセクションに飛んだ時とかに ハッシュ部分(#...)が残ってしまって違うページとカウントされてしまうので、

1
2
-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
1
2
3
4
5
6
7
8
...
<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: 送り主メアド。メアドの形をしてれば([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でなくてもどんなとこでも使えるものなので 一度やってみると面白いと思います。

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

追記: 2014/12/30

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

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

と送ってくれましたlaughing

追記ここまで

追記: 2015/01/05

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

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

追記ここまで

追記: 2015/08/11

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

追記ここまで

Sponsored Links
Sponsored Links

« Mandrillを使ってJavaScriptだけでメールを送る ソーシャルボタンを自作に変更 »