はじめに
クソアプリ2 Advent Calendar 2018 21日目の記事です。
飲みたい盛りの多感な30歳@kuronekopunkです。
毎日の飲みたみが過ぎるのでTL上で『飲みたみ』を可視化し欲望を満たすためのChrome拡張機能を作りました。
開発動機
- なんだか飲みたい
- どうしても飲みたい
- 同じ飲みたみを抱えている仲間を見つけたい
そうしたアツい思いがありこのツールは生まれました。
作ったもの
Web版Twitterで「飲みたい」「のみたみ」などの言葉を見つけやすくなります。
Nomitami for Twitter - Chrome ウェブストア
これだけ！
はい！解散！
技術的な話
Chrome拡張のためJSで実装されています。
毎回Chrome拡張を作るときはフロント側のJsをTampermonkeyで軽く実装して動きを確かめてからChrome拡張に移植しています。
Tampermonkeyとは
Jsを登録して任意のURLで動かすことが出来るChrome拡張です。
画像だけを開いているときに回転させるJsなどを登録して横向き画像を見やすくしたりなんかもできます。
Gistに上げておけば一発で登録もできるので簡単なツールの共有にも使えます。
https://gist.github.com/akinov/96c1c5c95460412f9eb29d958ac88a49
DOMの変化を監視する
新しいツイートが増えた際の対応でDOMの変化を監視するためにMutationObserverを使いました。
監視対象のノードを指定し、コールバックを設定するだけの簡単仕様に感動。
オプションで監視対象の子孫ノードや属性値を指定できるため使いまわしやすそう。
// 対象とするノードを取得
const target = document.getElementById('some-id');
// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation.type);
});
});
// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };
// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);
// 後ほど、監視を中止
observer.disconnect();
おわりに
そして私は気づいてしまったのです。
TLで「飲みたい」と検索すれば済むことに。
多感な30歳の戦いは続く…！