Qiitaでいいねを押した時に、IFTTTのMakerEventを発生させるChrome拡張機能

# Qiitaでいいねを押した時に、IFTTTのMakerEventを発生させるChrome拡張機能

## はじめに
GitHubのリポジトリにスターを付けると、Twitterにつぶやく[IFTTT](https://ifttt.com/)[^1]のアプレット　
https://ifttt.com/applets/112730p-post-github-star-to-twitter　
<img width="640" alt="スクリーンショット 2017-02-06 9.23.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/72f448a6-b701-466e-fb2c-129d10a6f4c2.png">
があるのですが、これをQiitaのいいねでもやりたい！と思って作ってみました。

[^1]: IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス（Facebook、Evernote、Weather、Dropboxなど）同士で連携することができるWebサービスである。(Wikipedia)

## 拡張機能の作成
ファイル構成

```
qiita_like_observer
├── manifest.json
├── icons
│   ├── icon128.png
│   ├── icon48.png
│   ├── icon19.png
│   └── icon16.png
├── content.js
└── embeded-script.js
```

今回、Qiitaのページでいいねが押されたのをハンドリングするために、ページにjavascriptを送り込む必要がありました。
この部分に関して、以下の記事を参考にさせていただきました。

> Chrome拡張開発: 拡張からページにJavaScriptを送り込みたい - Qiita
> http://qiita.com/suin/items/5e1aa942e654bce442f7

今回用意した、`content-script.js`及び、`embed-script.js`の役割を上記の参考記事から引用します。

> **content-script.js**

> ページを開いた時に実行するスクリプト。このスクリプトはChrome拡張の閉じた環境で実行されるので、ページの Windowオブジェクトにオブジェクトを追加することはできない。そのため、ページに \<script> タグを描画することで、Window オブジェクトを変更するスクリプトを送り込む。

<br>

> **embeded-script.js**

> 送り込まれるスクリプト。このスクリプトは Window オブジェクトを操作できる。


## 実装
```json:manifest.json
{
  "name": "QiitaLikeObserver",
  "version":"0.1.0",
  "manifest_version": 2,
  "description": "Qiitaの記事にいいねを押した時に、IFTTTのMaker Eventを発生させます。",
  "icons": {
   "16": "icons/icon16.png",
   "48": "icons/icon48.png",
   "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://qiita.com/*"],
      "js": ["content-script.js"]
    }
  ],
  "web_accessible_resources": [
    "embeded-script.js"
  ],
  "permissions": [
    "http://qiita.com/*"
  ]
 }

```

`web_accessible_resources`に`embeded-script.js`を設定することで、ページ上で拡張のJSを読み込めるようになるようです。

```Javascript:content-script.js
var injectScript;

injectScript = function(file, node) {
  var s, th;
  th = document.getElementsByTagName(node)[0];
  s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', file);
  return th.appendChild(s);
};

injectScript(chrome.extension.getURL('/embeded-script.js'), 'body');
```

```Javascript:embeded-script.js
const EVENT_NAME = "Your Maker event name"
const SECRET_KEY = "Your Maker chanel key"

$("button.p-button").on('click', function () {
  if($("button.p-button").first()[0].innerText == "いいね"){
    var trigger_url = "https://maker.ifttt.com/trigger/" + EVENT_NAME + "/with/key/" + SECRET_KEY;

    var user_name = $("a.u-link-unstyled:not(.TagList__label)")[0].innerText;
    var article_title = $("h1.ArticleMainHeader__title")[0].innerText;
    var page_url = window.location.href;
    var param =  "value1=" + user_name + "&value2=" + article_title + "&value3=" + page_url

    var request = new XMLHttpRequest();
    request.open("GET", trigger_url + "?" + param, true);
    request.send("");
  }
});
```

やや強引な実装ですが、Qiitaのいいねボタンはp-buttonというクラスを持っていたので、
p-buttonクラスのボタンがクリックされた時に処理を実行するようになっています。
また、「いいね済み」ボタンをクリックして、いいねを取り消した場合は動作してほしくないので、
ボタンのinnerTextが「いいね」の時だけ実行されるようになっています。

IFTTTのMaker Eventでは、`value1`,`value2`,`valu3`というkeyに値を入れることで、パラメータを3つまで受け取ることができます。
上の例では

|     key     |     value    |
|:-----------:|:------------:|
|   value1    |    投稿者名   |
|   value2    |  記事のタイトル |
|   value3    |   記事のURL   |

を設定しました。

## IFTTTのMaker Eventを作成
IFTTTのMaker Event Keyと、Event　Nameが必要なので、先にMakerEventを作成します。

## IFTTTのWebサイトから、New Appletを選択してアプレットを作成

<img width="1037" alt="スクリーンショット 2017-02-06 10.16.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/c0d95704-2a69-00cf-bbd6-fe4199d9c81b.png">

`this`の部分にMakerを指定します。

<img width="522" alt="スクリーンショット 2017-02-06 10.12.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/4973bbe2-161d-4535-6584-e5512c941e1d.png">

`Receive a web request`を指定して、`Event Name`のフォームにイベント名を指定します。
ここで指定したイベント名を以下の部分に指定してください。

```Javascript:embeded-script.js
const EVENT_NAME = "Your Maker event name"
```

<img width="1035" alt="スクリーンショット 2017-02-06 10.17.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/96685d66-ecbf-dceb-61c9-ad9ca737fee3.png">

`that`の部分に、動作させるサービスを設定してください。
今回はTwitterを指定したいと思います。

<img width="499" alt="スクリーンショット 2017-02-06 10.15.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/03c07ea4-46a2-b4c7-7517-cb3a8eb1c218.png">

`Post a tweet`を指定して、`Tweet text`を上記のようにしてみました。

## Maker Event Keyを確認
My Servicesから、Makerを選択します。
Makerのsettingを開くと

<img width="1054" alt="スクリーンショット 2017-02-06 10.38.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/aa70ee3e-10a6-cf83-7a20-f970f5d1b27c.png">

このように表示されます。
URLの`https://maker.ifttt.com/use/`以降の部分がEvent Keyになるので、対応する以下の部分を書き換えてください。

```Javascript:embeded-script.js
const SECRET_KEY = "Your Maker chanel key"
```

## 使い方
`chrome://extensions/`
にアクセスして、`パッケージ化されていない拡張機能を読み込む`から、フォルダを指定すれば利用できます。

## 完成したもの
<img width="527" alt="スクリーンショット 2017-02-06 9.27.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/84888/0775a6e0-833c-8d38-e554-1c986946942c.png">

## あとがき
GitHubにソースを載せていますので、必要であれば参照してください。
https://github.com/natmark/qiita_like_observer


今回、Qiitaのいいねをハンドリングするにあたって、最初はChrome拡張ではなく、Qiitaのいいね一覧をAPIやRSSで取得しようとしていたのですが、

- QiitaAPIにlike一覧を取得するAPIがなかった
- user/likeがRSSに対応していない
- RSSgeneratorの更新頻度が低すぎて使い物にならなかった

などの問題があり、APIやRSSでの実現を諦めました。Chrome拡張を使用しているため、Chromeでしか使えません。スマートフォンから「いいね」しても、Twitterには投稿されません。Qiitaのlikeもfeedに対応してほしいなぁ。と思います。