技術話っぽい内容なのでこっちに。
ハッシュタグ管理めんどい！
別にタイッツーに限った話ではないんですけど、ハッシュタグ投稿って意外とサポートしてくれないですよね。
過去に使ったハッシュタグぐらい、どこかに一覧化してくれてもいいじゃんってよく思います（コストに見合ってないからそんな機能あるわけないだろ、というのはある）
だったら自分でつくりゃいいじゃん、ってことで作りました。
まあ大した機能ではないんですが、こんな感じ。
・タイッツーにサイドバーとしてよく使うハッシュタグ一覧を追加する機能
・チェック入れるとテキストエリアに自動登録される
・チェックを外すとテキストエリアから該当のハッシュタグが消える
・上にあるテキスト入力欄からよく使うハッシュタグを登録
・バツボタンを押すとそのハッシュタグが消える
・データはブラウザデータとして保存してあるので、次回ページ読み込み時もちゃんと一覧は残る
経緯
意外とハッシュタグを使うんですよね。
で、毎回自分で作ったお気に入りハッシュタグ一覧から入力してたんですが、めんどいなと思いまして。
そういえばchromeの拡張機能として作っちゃえば、タイッツーでハッシュタグサポート的な感じなの作れるのでは？ということで作りました。
機能としても大したことなさそうだし、パパっと作れるだろ、みたいなノリで。
初めてchrome拡張を作ったんですが、ファイルはWEB準拠で普通にjsとcssで構成されてるので楽でした。
自分の持ってる知識だけで作成できるというのは非常に楽。
使いたい人
もしほしい人がいたら下記からどうぞ。
右クリックで「リンク先を保存」でダウンロードできます。
ただ、危険なリンクとして認識されると思うので、改めて「保存」をしてください。
http://shimo-codex.com/wp/wp-content/uploads/2024/01/extension.zip
ダウンロードしたフォルダをどっかに展開してもらって、chromeの拡張機能画面を開いてください。
chrome://extensions/
これをchromeのURLの所に貼り付けて開けば、拡張機能画面に飛びます。
飛んだら右上にある「デベロッパーモード」をオンにして、「パッケージ化されていない拡張機能を読み込む」でさっきのextensionフォルダを選んでください。
そうすると自動的に使えるようになってると思います。
chrome拡張機能作成
本当に楽でした。
そんな大した機能を作ったわけでもないのもありますが、1時間ちょいでできてありがたい。
ゲーム別にハッシュタグを付けて投稿してるので、毎回「話題のハッシュタグ」を開いてたんですよね。
お気に入りリストをずっと私的利用してたので…。
ソースコード
別に困るものでもないので、ソースコード置いときますね。
jsファイルです。
// 特定のURLのみでサイドバーを表示する
if (window.location.href.startsWith('https://taittsuu.com/')) {
var sidebar = document.createElement('div');
sidebar.innerHTML = `
<div class="ex-codex-sidebar" id="ex-codex-hashtagBar">
<div class="ex-codex-btns">
<div class="ex-codex-add">
<label><input type="text"></label>
<button id="ex-codex-add-btn">追加</button>
</div>
</div>
<ul id="ex-codex-list">
</ul>
</div>
<div class="ex-codex-menuBtn" id="ex-codex-menu-btn">＃</div>
`;
document.body.appendChild(sidebar);
let savedItems = JSON.parse(localStorage.getItem('ex-codex-items')) || [];
const ul = document.getElementById('ex-codex-list');
savedItems.forEach(item => {
const li = createListItem(item);
ul.appendChild(li);
});
// メニューボタンのクリックイベント
document.getElementById('ex-codex-menu-btn').addEventListener('click', () => {
sidebar.classList.toggle('ex-codex-jsMenu');
localStorage.setItem('ex-codex-jsMenu', sidebar.classList.contains('ex-codex-jsMenu'));
});
if (localStorage.getItem('ex-codex-jsMenu') === 'true') {
sidebar.classList.add('ex-codex-jsMenu');
}
// 追加ボタンのクリックイベント
document.getElementById('ex-codex-add-btn').addEventListener('click', () => {
const input = sidebar.querySelector('input[type="text"]');
let text = input.value.trim();
if (text) {
text = '#' + text; // 単語の先頭に '#' を追加
const li = createListItem(text);
ul.appendChild(li);
savedItems.push(text);
localStorage.setItem('ex-codex-items', JSON.stringify(savedItems));
input.value = ''; // 入力フィールドをクリア
}
});
// リストアイテムを生成する関数
function createListItem(text) {
const li = document.createElement('li');
li.innerHTML = `
<label><input type="checkbox"><span>${text}</span></label>
<div class="ex-codex-delete"></div>
`;
// チェックボックスのイベントハンドラ
const checkbox = li.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', () => {
const textarea = document.getElementById('taiitsuInput');
if (checkbox.checked) {
// 単語を追加（先頭に改行を含む）
textarea.value += '\n' + text;
} else {
// チェックが外されたらテキストエリアから削除（改行も含めて）
removeWordFromTextarea(textarea, text);
}
});
// 削除ボタンのクリックイベント
li.querySelector('.ex-codex-delete').addEventListener('click', () => {
li.remove();
// ローカルストレージからも削除
savedItems = savedItems.filter(item => item !== text);
localStorage.setItem('ex-codex-items', JSON.stringify(savedItems));
});
return li;
}
}
// テキストエリアから単語とその前の改行を削除する関数
function removeWordFromTextarea(textarea, word) {
let words = textarea.value.split('\n');
const index = words.indexOf(word);
if (index > -1) {
words.splice(index, 1);
}
textarea.value = words.join('\n');
}
