Edited at

飲みたみを支える技術🍺🍺🍺


はじめに

クソアプリ2 Advent Calendar 2018 21日目の記事です。

飲みたい盛りの多感な30歳@kuronekopunkです。

毎日の飲みたみが過ぎるのでTL上で『飲みたみ』を可視化し欲望を満たすためのChrome拡張機能を作りました。


開発動機


  • なんだか飲みたい

  • どうしても飲みたい

  • 同じ飲みたみを抱えている仲間を見つけたい

そうしたアツい思いがありこのツールは生まれました。


作ったもの

Web版Twitterで「飲みたい」「のみたみ」などの言葉を見つけやすくなります。

Nomitami for Twitter - Chrome ウェブストア

Image from Gyazo

これだけ!

はい!解散!


技術的な話

Chrome拡張のためJSで実装されています。

毎回Chrome拡張を作るときはフロント側のJsをTampermonkeyで軽く実装して動きを確かめてからChrome拡張に移植しています。


Tampermonkeyとは

Tampermonkey - Chrome ウェブストア

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();

引用元:MutationObserver | MDN


おわりに

そして私は気づいてしまったのです。

TLで「飲みたい」と検索すれば済むことに。

多感な30歳の戦いは続く…!