この記事は、 Ateam Brides Inc. Advent Calendar 2019 19日目の記事です。
本日は新卒2年目、デザイナの ＠pyonsomi が担当いたします。
尊いということ
こ、これは尊い...🙏🙏🙏🙏🙏！！！
↑Twitterで、好みのイラスト・グッとくる漫画・推してるアイドルの写真・猫などのツイートに出会った時の私です。
（尊いとは）
私はそんな時、高ぶる思いを発散することができず...
たった1回のいいねやリツイートじゃ足りないんだ！！！
と画面の前で悶えること幾千の時を乗り越えて参りました。
だがしかし！今ここで！この気持ちをぶつけたい！
そこで今回は、chromeの拡張機能を使って、PC版Twitter.comで使える
尊いツイートに気持ちが高ぶった時、何万回でも押せる「尊いボタン」
をjQueryやJsの学習を踏まえて作ってみました。
準備物
- パソコン
- テキストエディタ
があれば大丈夫です。
完成
うおおおおおおお〜〜〜〜〜〜〜！！！！！！！！
この気持ちを表現できる日が来るとは。。。。
これいつかツイッターに実装されないかな。。。
一生押せる気がする。。。
今回かなりつまずきましたが、先輩方に手助けいただき完成できました😭
お世話になったみなさん、本当にありがとうございました🙇♂️
以下実装内容です。
プロセス
- chrome拡張機能を設定
- DOMの読み込み方法を設定
- 尊いボタンを追加
- 尊いボタンを隣にカウンターを追加
コード全て
//公式からダウンロード
{
"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"]
}
]
}
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);
});
#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には制作者の名前を入れます。
{
"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のおしりには * をつけました。
ツイッター全てのページで読み込まれるようにするためです。。
{
"content_scripts": [
{
"matches": ["https://www.twitter.com/*”],
"css": [“style.css"],"js": ["script.js"]
}
]
}
その4：関係するファイルを読み込ませる
cssファイルとjsファイルを作成+jQueryをダウンロード。
全てThisIsToutoiフォルダへ追加し、'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 ＞「パッケージ化されていない拡張機能を読み込む」からフォルダを選択
読み込まれました。これで完了です。
ここから気をつけることは以下です。
ファイルを変更した場合、更新はリアルタイムで反映されないため、拡張機能ページで再読込する必要があります。
何か変更を加えた場合は、拡張機能のrefreshアイコンをクリックし再読み込みのうえ、対象ページの再読み込みも行いましょう。
ここまででchromeの設定は完了です。
ここからtoutoi.jsに処理を書きます。
2 DOMの読み込み方法を設定
jQueryより先にDOM（HTML）を読み込むための処理をします。
どんな通信環境でも適応できるように
- 要素が0のとき(DOMを読み込めていないとき)、0.1秒ごとに再読み込みする
- 要素を読み込めたら、終了させる。
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='いいね']をチョイス。
そして[aria-label='いいね']の親の直後に🙏を入れます。
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 尊いボタンの隣にカウンターを追加
最後に、カウンターの処理を書いて完成です。
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拡張機能、いろいろ遊べそうだと思ったので
「私はこんなの作ったで！！」という方がいたらぜひ教えてください🍺
カウントのデータをちゃんと保持したりなどのクオリティを高めるもありますし、はたまた「クソリプにたくさん💩を投げるボタン」にするとか「ボタンを推したらサイリウムを持った自分が出てくる」とかも考えてました（笑）反響があったらブラッシュアップしたい。
多彩な人たちが活躍する私達のチームで働きませんか？
エイチームは、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！
上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずは気軽にお話しましょう！
技術的な話だけでなく、私たちが大切にしていることや、一緒にやっていくお仕事についてなど、詳しくお伝えいたします。
Qiita Jobsよりメッセージお待ちしております！