尊いツイートに、何万回でも押せる「尊いボタン」をつける

この記事は、 [Ateam Brides Inc. Advent Calendar 2019](https://qiita.com/advent-calendar/2019/a-t-brides) 19日目の記事です。
本日は新卒2年目、デザイナの ＠pyonsomi が担当いたします。


# 尊いということ

> こ、これは尊い...🙏🙏🙏🙏🙏！！！

↑Twitterで、好みのイラスト・グッとくる漫画・推してるアイドルの写真・猫などのツイートに出会った時の私です。
（[尊いとは](https://career-picks.com/business-yougo/toutoi/)）

私はそんな時、高ぶる思いを発散することができず...
> **たった1回のいいねやリツイートじゃ足りないんだ！！！**

と画面の前で悶えること幾千の時を乗り越えて参りました。


**だがしかし！今ここで！この気持ちをぶつけたい！**


そこで今回は、chromeの拡張機能を使って、PC版Twitter.comで使える
**尊いツイートに気持ちが高ぶった時、何万回でも押せる「尊いボタン」**
をjQueryやJsの学習を踏まえて作ってみました。



# 準備物

- パソコン
- テキストエディタ


があれば大丈夫です。


# 完成
うおおおおおおお〜〜〜〜〜〜〜！！！！！！！！

![前半.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472676/3d086cd9-6c6d-213e-16e3-bd9ae41bf068.gif)


この気持ちを表現できる日が来るとは。。。。
これいつかツイッターに実装されないかな。。。
一生押せる気がする。。。


今回かなりつまずきましたが、先輩方に手助けいただき完成できました😭
お世話になったみなさん、本当にありがとうございました🙇‍♂️


以下実装内容です。


# プロセス

1. chrome拡張機能を設定
2. DOMの読み込み方法を設定
3. 尊いボタンを追加
4. 尊いボタンを隣にカウンターを追加

# コード全て

```javascript:jquery-3.4.1.min.js
//公式からダウンロード
```

```json:manifest.json
{
  "name": "ThisIsToutoi",
  "author": "pyonsomi",
  "description": "chrome extension for customize CSS and JS.",
  "version": "1.0.0",
  "manifest_version": 2,
  "web_accessible_resources": ["*"],
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "css": ["toutoi.css"],"js": ["jquery-3.4.1.min.js","toutoi.js"]
    }
  ]
}
```
```javascript:toutoi.js
jQuery(function(){
  var setIntervalId,
      toutoiCounter = function(){
          var parentElem = $("[aria-label='いいね']").parent();


          if (parentElem.length > 0) {
              parentElem.after('<div id="toutoi">🙏<span id="t_counter"></span></div>');

              var countUp = 0,
                  toutoiElm = $('#toutoi');

              function countNumber(){
                  countUp++;

                  return countUp;
                }

              toutoiElm.on('click',function(){
                  toutoiElm.find('span#t_counter').html(countNumber());  
                });

              clearInterval(setIntervalId);
              delete setIntervalId;
          }
  };

  setIntervalId = setInterval(toutoiCounter,100);

});

```
```css:toutoi.css
#toutoi{
  padding: 0.85rem;
  -webkit-user-select: none;
  user-select: none;
}

#t_counter{
  color: rgb(136, 153, 166);
}
```


# 1 chromeの拡張機能を設定
何番煎じ感ありますがまずはchrome拡張機能の設定から。

#### その1：デスクトップにフォルダを作成。
今回読み込むファイルたちを格納するフォルダです。
名前は「ThisIsToutoi」とします。


#### その2：manifest.jsonを作成
`ThisIsToutoi`ファイルの中に、`manifest.json` を作成し、下記コードを書きます。
nameには拡張機能の名前、authorには制作者の名前を入れます。

```javascript:manifest.js
{
  "name": "ThisIsToutoi",
  "author": "pyonsomi",
  "description": "chrome extension for customize CSS and JS.",
  "version": "1.0.0",
  "manifest_version": 2,
  "web_accessible_resources": ["*"],
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["https://hoge.com/*"],
      "css": ["style.css"],"js": ["script.js"]
    }
  ]
}
```

#### その3：対象サイトを指定
'content_scripts'でTwitterのURLを指定。
またURLのおしりには * をつけました。
ツイッター全てのページで読み込まれるようにするためです。。

```javascript:manifest.js
{
  "content_scripts": [
    {
      "matches": ["https://www.twitter.com/*”],
      "css": [“style.css"],"js": ["script.js"]
    }
  ]
}
```

#### その4：関係するファイルを読み込ませる
cssファイルとjsファイルを作成+jQueryをダウンロード。
全てThisIsToutoiフォルダへ追加し、'manifest.js'で指定。

```javascript:manifest.js
{
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "css": ["toutoi.css"],"js": ["jquery-3.4.1.min.js","toutoi.js"]
    }
  ]
}
```

#### その4：Chromeに読み込ませる
Chrome の拡張機能ページ (  chrome://extensions/  )にて
ThisIsToutoiファイルを読み込ませます。

`デベロッパーモードをon ＞「パッケージ化されていない拡張機能を読み込む」からフォルダを選択`

読み込まれました。これで完了です。

<img width="417" alt="image_extension.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472676/c1fe5ec3-a547-b22c-2d85-1be175bea36a.png">


ここから気をつけることは以下です。
ファイルを変更した場合、更新はリアルタイムで反映されないため、拡張機能ページで再読込する必要があります。
何か変更を加えた場合は、拡張機能のrefreshアイコンをクリックし再読み込みのうえ、対象ページの再読み込みも行いましょう。


ここまででchromeの設定は完了です。
ここから`toutoi.js`に処理を書きます。


## 2 DOMの読み込み方法を設定
jQueryより先にDOM（HTML）を読み込むための処理をします。
どんな通信環境でも適応できるように

- 要素が0のとき(DOMを読み込めていないとき)、0.1秒ごとに再読み込みする
- 要素を読み込めたら、終了させる。

```javascript:toutoi.js
jQuery(function(){

  //DOM読み込みを設定
  var setIntervalId,
    toutoiCounter = function(){

        //いいねボタンの親要素を定義

        //親要素がひとつでもみつかった場合 = DOMが読み込めた場合
        if (parentElem.length > 0) {

            //尊いボタンを追加
            //カウンタの初期値を設定
            //カウントアップする関数 countUp を定義 
            //クリックイベント
              
            //DOMが読み込めたので、チェック終了
              clearInterval(setIntervalId);
              delete setIntervalId;
          }
  };

  //DOMがすべて読み込み完了したことを0.1秒ごとにチェックする
  setIntervalId = setInterval(toutoiCounter,100);

});
```

## 3 尊いボタンを追加

今回使ったのは「🙏」です。
いいねの隣に入れたいので、絶妙なところにいますがまず`[aria-label='いいね']`をチョイス。

<img width="1328" alt="Twitterの構成.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472676/9e7d7431-2925-95e9-6599-4bdd7b4d081e.png">


そして`[aria-label='いいね']`の親の直後に🙏を入れます。

```javascript:toutoi.js
jQuery(function(){

  //DOM読み込みを設定
  var setIntervalId,
    toutoiCounter = function(){

        //いいねボタンの親要素を定義
        var parentElem = $("[aria-label='いいね']").parent();

        //親要素がひとつでもみつかった場合 = DOMが読み込めた場合
        if (parentElem.length > 0) {

            //尊いボタンを追加
            parentElem.after('<div id="toutoi">🙏<span id="t_counter"></span></div>');

            //カウンタの初期値を設定
            //カウントアップする関数 countUp を定義 
            //クリックイベント

            //DOMが読み込めたので、チェック終了
              clearInterval(setIntervalId);
              delete setIntervalId;
          }
  };

  //DOMがすべて読み込み完了したことを0.1秒ごとにチェックする
  setIntervalId = setInterval(toutoiCounter,100);

});
```


## 4 尊いボタンの隣にカウンターを追加
最後に、カウンターの処理を書いて完成です。

```javascript:toutoi.js
jQuery(function(){

  //DOM読み込みを設定
  var setIntervalId,
    toutoiCounter = function(){

        //いいねボタンの親要素を定義
        var parentElem = $("[aria-label='いいね']").parent();

        //親要素がひとつでもみつかった場合 = DOMが読み込めた場合
        if (parentElem.length > 0) {

            //尊いボタンを追加
            parentElem.after('<div id="toutoi">🙏<span id="t_counter"></span></div>');

            //カウンタの初期値を設定
            var countUp = 0,
                toutoiElm = $('#toutoi');

            //カウントアップする関数 countUp の定義
            function countNumber(){
                //カウンタに 1 を加算
                countUp++;
                //返り値を設定
                return countUp;
            }

            //クリックイベント
            toutoiElm.on('click',function(){
              toutoiElm.find('span#t_counter').html(countNumber());  
            });

            //DOMが読み込めたので、チェック終了
              clearInterval(setIntervalId);
              delete setIntervalId;
          }
  };

  //DOMがすべて読み込み完了したことを0.1秒ごとにチェックする
  setIntervalId = setInterval(toutoiCounter,100);

});
```


# ここで驚愕の事実
今回使っていたこの絵文字、てっきり顔の前で拝む仕草だと思っていたら

>`🙏「Folded Hands（組まれた手）」`
>2つの手が固く合わさった絵文字で、日本文化における「お願い」や「ありがとう」を意味している。 また、「祈る人」・「お祈りしている手」という意味や「ハイタッチ」の意味でもよく使われている。

とのこと。まさかのハイタッチらしいです。

ま　じ　か



# さいごに
最後まで読んでくだった方、ありがとうございました！

今回のTwitter拡張機能、いろいろ遊べそうだと思ったので
「私はこんなの作ったで！！」という方がいたらぜひ教えてください🍺

カウントのデータをちゃんと保持したりなどのクオリティを高めるもありますし、はたまた「クソリプにたくさん💩を投げるボタン」にするとか「ボタンを推したらサイリウムを持った自分が出てくる」とかも考えてました（笑）反響があったらブラッシュアップしたい。


# 多彩な人たちが活躍する私達のチームで働きませんか？

[エイチーム](https://www.a-tm.co.jp/)は、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける**名古屋の総合IT企業**です。
そのグループ会社である**株式会社エイチームブライズ**では、一緒に働く仲間を募集しています！

- [ハナユメ サイト開発グループ](https://jobs.qiita.com/employers/brides-a-tm/development_teams/138)
- [HIMARI開発チーム](https://jobs.qiita.com/employers/brides-a-tm/development_teams/147)
- [技術開発部](https://jobs.qiita.com/employers/brides-a-tm/development_teams/148)

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずは気軽にお話しましょう！
技術的な話だけでなく、私たちが大切にしていることや、一緒にやっていくお仕事についてなど、詳しくお伝えいたします。

[Qiita Jobs](https://jobs.qiita.com/)よりメッセージお待ちしております！