whywaitterを作ってみようとして諦めた話

この記事は、whywaita Advent Calendar 2019 - Adventar の15日目の記事です。
昨日はid:jackson58 (staybuzz)さんの千早さんの話でした。
アイマスってよく知らないんですけど、コブラってアニメと関係性が深いらしいです。
千早さんは毎回出てくるらしいです。

なにをしようとした

Twitterの見た目を変えて、全部WhywaitaなTwitterを作ろうと考えました。
時間がなく、無謀な挑戦だったので、ここにはそれを諦めるまでの話をしたいと思います。

始まり

このAdvent Calendarに登録したのは先週のことでした。
この時点では何を書くのか全く決まっていませんでした。

月曜日、ふとした瞬間に浮かんできたのが、「Whywaitter」って単語でした

仕様策定

まずは仕様を考えることにしました。
最初に浮かんできたのはこれでした

• ユーザー登録をして利用できるTwitterライクなSNSツール
• 全員ユーザーネームと画像がTwitterのWhywaitaのもので固定
• リプライは全員に飛ぶ
• Whywaita本人が登録すると、Twtterで言うところの認証マーク✔がつく

流石に開発工数的に厳しいなってことになり、没になりました。

次に考えついたのはこれでした。

• Twitterの見た目を変更する
• Chrome拡張やFirefoxのプラグインで実装し、ユーザーのアイコンと名前を読み込むたびに書き換える

これならなんとかなるだろうと思った

作成

気がついたら15日の17時でした。起きたらこの時間でした。コードは0行です。
Chrome拡張も作ったことないし、JavaScriptも全くわからんけど、なんとかなるやろガハハとこの時間から作り始めて、Twitterのソースを見てしんどくなりました。
開発ツールを開いて見ればわかります。

<div dir="auto" class="css-901oao css-bfa6kz r-hkyrab r-gwet1z r-a023e6 r-vw2c0b r-ad9z0x r-bcqeeo r-3s2u2q r-qvutc0">why/橘和板</div>

そう、classに可読性がなかったのである。
一瞬でしんどくなりました。

ひとまず2時間くらいかけて、ここまで実装して諦めました。

function replace_why(){
    console.log("test");
    var section = document.getElementsByTagName('section'); 
    var tweets = section[0].getElementsByTagName('article');
    console.log(tweets);
    Array.prototype.forEach.call(tweets, function(element) {
        var names = element.getElementsByClassName("css-901oao css-bfa6kz r-hkyrab r-gwet1z r-a023e6 r-vw2c0b r-ad9z0x r-bcqeeo r-3s2u2q r-qvutc0");
        console.log(names[0].textContent);
        names[0].textContent = 'why/橘和板';
    });
}

function ObserveStream(){
    var observer = new MutationObserver(replace_why);
    var target = document.getElementsByTagName('section')[0];
    console.log(target);
    if(!target){ setTimeout(ObserveStream, 500); return;} 
    observer.observe(target, {
        attributes: true,
        childList:  true
    });
    replace_why();
} 

var observer = new MutationObserver(ObserveStream);
observer.observe(document.getElementsByTagName("body")[0], {
    attributes: true
});

このコードでなにができるかというと、ユーザーのプロフィール画面でツイートのユーザー名が「why/橘和板」に書き換わります。
ただそれだけです。
ホーム画面や検索画面では動きません。
あと、メニュー移動しても動かなくなります。
全部forEachで処理してしまうので、読み込めば読み込むほど重くなります。

一番下のツイートは名前が書き換わってないです。
ObserverでNodeの変更を監視しているのですが、どうやら検知されるタイミングが遅いみたいです。なんもわからん。

仕組みについて

Twitterの画面がこうなっていて、あとはコードを読めばわかるとおもいます。 あとはツイートの表示されているsectionを監視して、sectionが変更されたら、articleの中身を書き換えるだけですね

なぜホーム画面で動かないか

ホーム画面では「トレンド」の位置がちがい、若干上になっています。 そのためなのかはわかりませんが、ツイートのsectionより、早くロードされます。
この状態になってしまうと、トレンドがObserverに登録されてしまい・・・
きちんとロードが終われば、section[0]はツイートになるのですが・・・。
多分画面かsection2つのロードがキチンと終わるまで、待つべきでしょう。

おわりに

ちゃんと見通しを立ててから作業しようね！
あとはもうちょっとウェッブの知識がほしいなって感じました。
Webプログラミング関係、検索しんどくない？どこ見ても書いてること違うんだけど

多分Why君は強いので、これくらい朝飯前で実装できることでしょう

明日はuronさんのwaitawhyの滑らない話です。