LGTMはいやだ

#はじめに
みなさんご存知の通り、QiitaのUIの仕様がいきなり変わりました。
「いいね」ボタンから「LGTM」ボタンに。
twitterでは賛否両論ありましたが、"否"の方が多かった気がします。
そこで、これをいいねボタンに直すchrome拡張を作ります。

大急ぎで作ったので、記事も適当かつ未実装の部分もありますが、ご了承ください。

#意外と一筋縄では戻せない
twitterや他のQiitaの記事で、同じような試みをされている方がいました。
基本的には、LGTM要素を取得して`innerHTML`で**Fontawesomeのthumbs-up**に変えるだけで良いです。
しかしながら、それだけではクリック後の「✔︎」が表現できません。

今回その辺の仕様をいろいろ調べてみて考えた結果、javascriptだけではなくcssも使っていじる方が良さそうです。

#実装

```javascript
//必須（fontawsomeのcdn）
var head = document.querySelector("head");
head.insertAdjacentHTML('beforeend', '<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">');
head.insertAdjacentHTML('beforeend', '<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">');

//css読み込み
var linkElement = document.createElement("link");
linkElement.type = "text/css";
linkElement.rel = "stylesheet";
linkElement.href = "style.css";
head.appendChild(linkElement);

//likeボタン復活
try {
    var LGTM = document.getElementsByClassName('likable')[0].children[1].children[0];
    LGTM.insertAdjacentHTML('beforebegin','<div id="likebtn"></div>');
    LGTM.remove();
    var likebtn = document.getElementById('likebtn');
    likebtn.innerHTML = '<i class="fa fa-thumbs-up" aria-hidden="true"></i>';
} catch(e){
    ;
}

try {
    //自分の記事のlikeボタン復活
    var LGTM_mine = document.getElementsByClassName('notLikable')[0].children[1].children[0];
    LGTM_mine.insertAdjacentHTML('beforebegin','<div id="likebtn"></div>');
    LGTM_mine.remove();
    var likebtn_mine = document.getElementById('likebtn');
    likebtn_mine.innerHTML = '<i class="fa fa-thumbs-up" aria-hidden="true"></i>';
} catch (e) {
    ;
}

//知り合いのいいね部分復活
try {
    var friend_lgtm = document.getElementsByClassName('it-Header_like')[0].children[0].children[0];
    friend_lgtm.insertAdjacentHTML('beforebegin', '<div id="friendlike"></div>');
    friend_lgtm.remove();
    var friend_like = document.getElementById('friendlike');
    friend_like.innerHTML = '<i class="fa fa-thumbs-up" aria-hidden="true" id="friend-like-icon"></i>';
} catch (e) {
    ;
}

//記事末尾のいいねボタン復活
try {
    var LGTM_tail = document.getElementsByClassName('it-Footer_like')[0].children[0].children[0].children[0];
    LGTM_tail.insertAdjacentHTML('beforebegin', '<span class="fa fa-fw fa-thumbs-up"></span>');
    LGTM_tail.insertAdjacentHTML('beforebegin', '<span>いいね</span>');
    LGTM_tail.remove();
    document.getElementsByClassName('it-Footer_like')[0].children[0].style.borderRadius = "4px";
} catch (e) {
    try {
        var LGTM_tail_mine = document.getElementsByClassName('it-Footer_like')[0].children[0];
        LGTM_tail_mine.insertAdjacentHTML('beforebegin', '<i class="fa fa-fw fa-thumbs-up" style="margin-left: 5px"></i>');
        LGTM_tail_mine.insertAdjacentHTML('beforebegin', '<p style="margin-left: 10px;">いいね</p>');
        LGTM_tail_mine.remove();
        document.getElementsByClassName('it-Footer_like')[0].style.display = "flex";
        
        document.getElementsByClassName('it-Footer_like')[0].style.border = "1px solid #55c500";
        document.getElementsByClassName('it-Footer_like')[0].style.borderRadius = "4px";
        document.getElementsByClassName('it-Footer_like')[0].style.color = "#55C500";
    
    } catch (e) {
        ;
    }
}

//コメント欄のlikeボタン復活
const comments = document.getElementById('comments');
function LGTM2Like() {
    var LGTMs_comment = document.getElementsByClassName('co-Item_like');
    for (var i = 0; i < LGTMs_comment.length; i++){
        var LGTM_comment = LGTMs_comment[i].children[0].children[0];
        LGTM_comment.insertAdjacentHTML('beforebegin','<div id="likebtn' + String(i) + '" class="likebtn-comment"></div>');
        LGTM_comment.remove();
        var likebtn_comment = document.getElementById('likebtn' + String(i));
        likebtn_comment.innerHTML = '<i class="fa fa-thumbs-up" aria-hidden="true"></i>';
    }
}
var mo = new MutationObserver(LGTM2Like);
mo.observe(comments, { childList: true });

```

```css
.liked > button > #likebtn > i{
    display: none;
}

.liked > button > #likebtn::before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
}

.liked > button > .likebtn-comment > i{
    display: none;
}

.liked > button > .likebtn-comment::before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
    color: white;
}

#friend-like-icon{
    font-size: 1.42923077em;
    color: #777;
}
```

#簡単な解説
Qiitaは基本的にFontawesome4を使っているようです。
その関係で、Fontawesome5のみをcdnで読み込むとTwitterアイコンやfacebookアイコンで不具合が生じます。
したがって、先にバージョン５を読み込んでから４を再度読み込ませることで両バージョンを共存させています。
Fontawesome5をどうしても使いたかった理由は、cssからfontawesomeを使う方法をバージョン５以外で知らなかったからです。

基本的な仕組みとしては、クリック（いいねされる）と、ボタンの親要素のclassに`liked`が追加されます。
今回は`liked`が追加されたらthumbs-upアイコンを消してcheckアイコンを描画させるようにしました。

#Chrome拡張にする
chrome拡張に上記のファイル以外に`manifest.json`が必要です。

```
{
    "name": "UntiLGTM",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Sample Chrome Extension",
    "content_scripts": [{
        "matches": ["https://qiita.com/*"],
        "js": [ "UntiLGTM.js"],
        "css":["style.css"]
    }],
    "permissions": ["activeTab"]
}
```

#Chromeに追加
[以前の記事](https://qiita.com/HirosuguTakeshita/items/fd1da5f6b727fbe611e4)を参考に。

#追記
機能を追加し次第、この記事に書き加えていこうと思います。

#更新記録
###2020/3/13 1:08
コメント蘭のいいねに対応しました。

**該当コード**

```javascript
const comments = document.getElementById('comments');
function LGTM2Like() {
    var LGTMs_comment = document.getElementsByClassName('co-Item_like');
    for (var i = 0; i < LGTMs_comment.length; i++){
        var LGTM_comment = LGTMs_comment[i].children[0].children[0];
        LGTM_comment.insertAdjacentHTML('beforebegin','<div id="likebtn' + String(i) + '" class="likebtn-comment"></div>');
        LGTM_comment.remove();
        var likebtn_comment = document.getElementById('likebtn' + String(i));
        likebtn_comment.innerHTML = '<i class="fa fa-thumbs-up" aria-hidden="true"></i>';
    }
}
var mo = new MutationObserver(LGTM2Like);
mo.observe(comments, {childList: true});
```
```css
.liked > button > .likebtn-comment > i{
    display: none;
}

.liked > button > .likebtn-comment::before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
    color: white;
}
```

**簡単な解説**
コメント欄は、ページを遷移してから読み込むのでHTMLの生成が遅れます。
したがって`window.load`タイミングの処理ではDOMの取得がうまく行きません。
このような問題は**MutationObserver**でDOMの変化を監視し、HTMLが生成されてから要素を取得していいねボタンに変更します。



###2020/3/13 1:32
知り合いがいいねしていた場合に出る表示に対応しました。
![スクリーンショット 2020-03-13 1.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333871/b1818f60-c77f-e22c-9887-fa9608fb3e27.png)

**該当コード**

```javascript
//知り合いのいいね部分復活
try {
    var friend_lgtm = document.getElementsByClassName('it-Header_like')[0].children[0].children[0];
    friend_lgtm.insertAdjacentHTML('beforebegin', '<div id="friendlike"></div>');
    friend_lgtm.remove();
    var friend_like = document.getElementById('friendlike');
    friend_like.innerHTML = '<i class="fa fa-thumbs-up" aria-hidden="true" id="friend-like-icon"></i>';
} catch (e) {
    ;
}
```
```css
#friend-like-icon{
    font-size: 1.42923077em;
    color: #777;
}
```

**簡単な解説**
特に特別なことはしていません。
cssは、本家とサイズを合わせるために計算しました。

###2020/3/13 2:17
記事末尾のいいねボタンの表示に対応しました。
![スクリーンショット 2020-03-13 1.37.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333871/bbc9d63f-f5ff-5c0b-5bf5-af24020eca46.png)
（このLGTMの部分）

この部分に関しては、自分がいいねを押していない状態は復元できましたが、いいねを押した後の表示をうまく戻すことができませんでした。

**該当コード**

```javascript
//記事末尾のいいねボタン復活
try {
    var LGTM_tail = document.getElementsByClassName('it-Footer_like')[0].children[0].children[0].children[0];
    LGTM_tail.insertAdjacentHTML('beforebegin', '<span class="fa fa-fw fa-thumbs-up"></span>');
    LGTM_tail.insertAdjacentHTML('beforebegin', '<span>いいね</span>');
    LGTM_tail.remove();
    document.getElementsByClassName('it-Footer_like')[0].children[0].style.borderRadius = "4px";
} catch (e) {
    try {
        var LGTM_tail_mine = document.getElementsByClassName('it-Footer_like')[0].children[0];
        LGTM_tail_mine.insertAdjacentHTML('beforebegin', '<i class="fa fa-fw fa-thumbs-up" style="margin-left: 5px"></i>');
        LGTM_tail_mine.insertAdjacentHTML('beforebegin', '<p style="margin-left: 10px;">いいね</p>');
        LGTM_tail_mine.remove();
        document.getElementsByClassName('it-Footer_like')[0].style.display = "flex";
        
        document.getElementsByClassName('it-Footer_like')[0].style.border = "1px solid #55c500";
        document.getElementsByClassName('it-Footer_like')[0].style.borderRadius = "4px";
        document.getElementsByClassName('it-Footer_like')[0].style.color = "#55C500";
    
    } catch (e) {
        ;
    }
}
```
**簡単な解説**
特に特別なことはしていません。
もとの「いいねボタン」は若干丸みを帯びていて、その値は`4px`だったので、js側からcssで追加しています。
自分の記事と他人の記事で若干処理が違います。自分のページはcatchの方に書いてあります。