ブックマークレット集
はじめに
こんにちは。Xで主にガジェットのことを呟いている者です。最近はブックマークレット作りにハマってます。といってもJavaScriptもhtmlも全く触れたことがなく、全てChat GPTに作らせてます(笑)
なので、不具合が生じても対処できません（ごめんなさい）
ブックマークレットの使い方は適当なサイトをブックマーク登録し、URLを消して、コピーしたJavascriptを貼り付けてください。
あと、詳しい方にお聞きしたいのですが、モバイル版ブラウザのurlの文字数制限がPC版と比べて短く、その対策としてGithubから呼び出す方法が有効だと知り、Githubにリポジトリを作り、JSファイルをアップロードして、Pagesでnoneからmainに変更して、そのURLからJavaScriptを呼び出すブックマークレットを作ったのですがうまく機能しませんでした。よく分からないので、このサイトにブックマークレットとして登録したJavaScriptをそのまま貼り付けてJSファイルを作成し、Githubにアップロードして、そのリンクを使ってブックマークレットを作ったのですがうまく機能しませんでした。JSファイルの作り方やそれを呼び出すブックマークレットの作り方に詳しい方はコメントで教えて下さい。
注意
以下のブックマークレットは基本PC版のブラウザで起動することを想定しています。スマホのブラウザでも使えるものは、説明欄に書きます。
X(Twitter)用
X詳細検索
検索コマンドを使わず、簡単に高度な検索ができます。
調べたい人のプロフィールページから起動してください。
javascript:(function() { function createInput(labelText, placeholderText, required) { var wrapper = document.createElement('div'); var label = document.createElement('label'); label.textContent = labelText; label.style.color = 'black'; var input = document.createElement('input'); input.type = 'text'; input.placeholder = placeholderText; input.style.color = 'black'; input.style.backgroundColor = 'lightgrey'; if (required) input.required = true; wrapper.appendChild(label); wrapper.appendChild(input); return wrapper; } function createDateInput(labelText) { var wrapper = document.createElement('div'); var label = document.createElement('label'); label.textContent = labelText; label.style.color = 'black'; var yearInput = createInput('年', 'YYYY', false); var monthInput = createInput('月', 'MM', false); var dayInput = createInput('日', 'DD', false); wrapper.appendChild(label); wrapper.appendChild(yearInput); wrapper.appendChild(monthInput); wrapper.appendChild(dayInput); return wrapper; } function createSelect(labelText, options) { var wrapper = document.createElement('div'); var label = document.createElement('label'); label.textContent = labelText; label.style.color = 'black'; var select = document.createElement('select'); select.style.color = 'black'; select.style.backgroundColor = 'lightgrey'; options.forEach(function(optionText) { var option = document.createElement('option'); option.value = optionText.value; option.text = optionText.text; select.add(option); }); wrapper.appendChild(label); wrapper.appendChild(select); return wrapper; } function createCheckbox(labelText) { var wrapper = document.createElement('div'); var label = document.createElement('label'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.style.color = 'black'; checkbox.style.backgroundColor = 'lightgrey'; label.textContent = labelText; label.style.color = 'black'; wrapper.appendChild(checkbox); wrapper.appendChild(label); return wrapper; } function getUserName() { var pathArray = window.location.pathname.split('/'); return pathArray[1] || ''; } var user = getUserName(); if (!user) { alert('Twitterプロフィールページでこのブックマークレットを実行してください。'); return; } var form = document.createElement('form'); form.style.position = 'fixed'; form.style.top = '10px'; form.style.left = '10px'; form.style.backgroundColor = 'white'; form.style.padding = '10px'; form.style.border = '1px solid black'; form.style.zIndex = '9999'; var closeButton = document.createElement('button'); closeButton.textContent = '×'; closeButton.style.position = 'absolute'; closeButton.style.top = '5px'; closeButton.style.right = '5px'; closeButton.style.backgroundColor = 'lightgrey'; closeButton.style.border = 'none'; closeButton.style.fontSize = '16px'; closeButton.style.cursor = 'pointer'; closeButton.onclick = function() { form.remove(); }; form.appendChild(closeButton); var searchMethodLabel = createSelect('検索方法', [ { value: '', text: '選択しない' }, { value: 'AND', text: 'AND検索' }, { value: 'OR', text: 'OR検索' } ]); var keyword1 = createInput('キーワード1', 'キーワード1', false); var keyword2 = createInput('キーワード2', 'キーワード2', false); var keyword3 = createInput('キーワード3', 'キーワード3', false); var sinceLabel = createDateInput('いつから ※任意'); var untilLabel = createDateInput('いつまで ※任意'); var postLabel = createSelect('ユーザーが投稿/ユーザーへのリプライ ※任意', [ { value: '', text: '選択しない' }, { value: 'from', text: 'ユーザーが投稿' }, { value: 'to', text: 'ユーザーへのリプライ' } ]); var followerOnly = createCheckbox('フォロワーのみ'); var imagesOnly = createCheckbox('画像のみ'); var videosOnly = createCheckbox('動画のみ'); var minFaves = createInput('いいねの数', '以上', false); var minReplies = createInput('リプライの数', '以上', false); var exactPhrase = createInput('完全に一致するワード', '', false); var excludeWords1 = createInput('除外ワード1', '除外ワード1', false); var excludeWords2 = createInput('除外ワード2', '除外ワード2', false); var excludeWords3 = createInput('除外ワード3', '除外ワード3', false); var langLabel = createSelect('言語', [ { value: '', text: '選択しない' }, { value: 'ja', text: '日本語' }, { value: 'en', text: '英語' }, { value: 'zh', text: '中国語 (簡体字)' }, { value: 'zh-TW', text: '中国語 (繁体字)' }, { value: 'ko', text: '韓国語' }, { value: 'es', text: 'スペイン語' }, { value: 'fr', text: 'フランス語' }, { value: 'de', text: 'ドイツ語' }, { value: 'it', text: 'イタリア語' }, { value: 'pt', text: 'ポルトガル語' }, { value: 'ru', text: 'ロシア語' } ]); var excludeLang = createCheckbox('除外指定'); var submit = document.createElement('button'); submit.textContent = '検索'; submit.type = 'submit'; submit.style.color = 'black'; submit.style.backgroundColor = 'lightgrey'; form.appendChild(searchMethodLabel); form.appendChild(keyword1); form.appendChild(keyword2); form.appendChild(keyword3); form.appendChild(sinceLabel); form.appendChild(untilLabel); form.appendChild(postLabel); form.appendChild(followerOnly); form.appendChild(imagesOnly); form.appendChild(videosOnly); form.appendChild(minFaves); form.appendChild(minReplies); form.appendChild(exactPhrase); form.appendChild(excludeWords1); form.appendChild(excludeWords2); form.appendChild(excludeWords3); form.appendChild(langLabel); form.appendChild(excludeLang); form.appendChild(submit); document.body.appendChild(form); form.onsubmit = function(e) { e.preventDefault(); var baseUrl = 'https://twitter.com/search?q=%27; var query = %27%27; var keywordList = [ keyword1.querySelector(%27input%27).value, keyword2.querySelector(%27input%27).value, keyword3.querySelector(%27input%27).value ].filter(Boolean); var searchMethod = searchMethodLabel.querySelector(%27select%27).value; var sinceYear = sinceLabel.querySelectorAll(%27input%27)[0].value; var sinceMonth = sinceLabel.querySelectorAll(%27input%27)[1].value; var sinceDay = sinceLabel.querySelectorAll(%27input%27)[2].value; var untilYear = untilLabel.querySelectorAll(%27input%27)[0].value; var untilMonth = untilLabel.querySelectorAll(%27input%27)[1].value; var untilDay = untilLabel.querySelectorAll(%27input%27)[2].value; var post = postLabel.querySelector(%27select%27).value; var filters = []; if (followerOnly.querySelector(%27input%27).checked) filters.push(%27filter%3Afollows%27); if (imagesOnly.querySelector(%27input%27).checked) filters.push(%27filter%3Aimages%27); if (videosOnly.querySelector(%27input%27).checked) filters.push(%27filter%3Avideos%27); var minFavesVal = minFaves.querySelector(%27input%27).value; var minRepliesVal = minReplies.querySelector(%27input%27).value; var exactPhraseVal = exactPhrase.querySelector(%27input%27).value; var excludeWordList = [ excludeWords1.querySelector(%27input%27).value, excludeWords2.querySelector(%27input%27).value, excludeWords3.querySelector(%27input%27).value ].filter(Boolean); var lang = langLabel.querySelector(%27select%27).value; var excludeLangChecked = excludeLang.querySelector(%27input%27).checked; if (post) { query += post === %27from%27 ? %27from%3A%27 : %27to%3A%27; } query += encodeURIComponent(user); if (keywordList.length > 0) { var joinedKeywords = keywordList.join(searchMethod ? ` ${searchMethod.toLowerCase()} ` : %27 %27); query += %27 %27 + joinedKeywords; } filters.forEach(function(filter) { query += %27 %27 + filter; }); if (minFavesVal) { query += %27 min_faves%3A%27 + encodeURIComponent(minFavesVal); } if (minRepliesVal) { query += %27 min_retweets%3A%27 + encodeURIComponent(minRepliesVal); } if (exactPhraseVal) { query += %27 "%27 + encodeURIComponent(exactPhraseVal) + %27"%27; } excludeWordList.forEach(function(word) { query += %27 -%27 + encodeURIComponent(word); }); if (lang) { query += excludeLangChecked ? %27 -lang%3A%27 + lang : %27 lang%3A%27 + lang; } if (sinceYear && sinceMonth && sinceDay) { query += %27 since%3A%27 + sinceYear + %27-%27 + sinceMonth + %27-%27 + sinceDay; } if (untilYear && untilMonth && untilDay) { query += %27 until%3A%27 + untilYear + %27-%27 + untilMonth + %27-%27 + untilDay; } window.open(baseUrl + query, %27_blank%27); };})();
引用リツイート検索
引用リツイートを簡単に検索できます。
調べたいツイートを表示した状態で、起動してください。
アプリ版のXは引用リツイートを簡単に調べられますが、Web版はポストのエンゲージメントから検索する必要があり、覚えるのが面倒だったので作りました。
javascript:(function() { var url = window.location.href; if (!url.endsWith('/quotes')) { window.location.href = url + '/quotes'; }})();今見てるページをXに投稿
投稿したいページを表示した状態で起動してください。
javascript:tt=document.title;window.open('https://twitter.com/intent/tweet?url=%27+encodeURI(location.href)+%27&text=%27+encodeURI(tt),%27_blank%27)Youtube用
動画ダウンロード(スマホも可)
ダウンロードしたいYoutubeの動画ページを開いた状態で起動してください。ページのリンクが自動的に動画ダウンロードサイトy2mateに入力されます。
javascript:(function(){ var url = window.location.href; var videoId = url.match(/v=([^&]+)/)[1]; window.location.href = 'https://www.y2mate.com/youtube/' + videoId;})();コメントフィルター
Youtubeのコメントで検索したいキーワードを含むコメントを上位に表示させます。これはPC版のみ使えます。
javascript:(function() { let searchBox = document.createElement('div'); searchBox.style.position = 'fixed'; searchBox.style.top = '10px'; searchBox.style.right = '10px'; searchBox.style.background = '#fff'; searchBox.style.padding = '10px'; searchBox.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'; searchBox.style.zIndex = '10000'; let input = document.createElement('input'); input.type = 'text'; input.placeholder = '検索するキーワード'; let closeButton = document.createElement('button'); closeButton.innerText = 'x'; closeButton.style.marginLeft = '10px'; closeButton.onclick = function() { searchBox.remove(); }; searchBox.appendChild(input); searchBox.appendChild(closeButton); document.body.appendChild(searchBox); input.oninput = function() { let keyword = input.value.toLowerCase(); document.querySelectorAll('#comments #content-text').forEach(function(comment) { if (comment.innerText.toLowerCase().includes(keyword)) { comment.closest('ytd-comment-thread-renderer').style.display = ''; } else { comment.closest('ytd-comment-thread-renderer').style.display = 'none'; } }); };})();字幕ダウンロード(スマホも可)
Youtubeの字幕全体を簡単に閲覧、ダウンロードできます。字幕サイトDOWNSUBにYoutubeのリンクが自動で入力されます。Youtubeの動画ページを開いた状態で起動してください。
javascript:(function(){window.location.href='https://subtitle.to/' + window.location.href;})();ビデオスピードコントローラー(スマホも可)
動画の細かい速度調整、繰り越し、巻き戻しができます。
ｘボタンで、簡単に消せます。
スマホでも使えるように画面の下に表示されるようにしました。
javascript:(function() { if (document.getElementById('videoControlPopup')) { document.getElementById('videoControlPopup').remove(); return; } const popup = document.createElement('div'); popup.id = 'videoControlPopup'; popup.style.position = 'fixed'; popup.style.bottom = '0'; popup.style.width = '100%'; popup.style.backgroundColor = '#fff'; popup.style.borderTop = '2px solid #000'; popup.style.padding = '10px'; popup.style.zIndex = '9999'; popup.style.display = 'flex'; popup.style.flexDirection = 'column'; popup.style.alignItems = 'center'; const header = document.createElement('div'); header.style.display = 'flex'; header.style.justifyContent = 'center'; header.style.alignItems = 'center'; header.style.width = '100%'; header.style.marginBottom = '10px'; const maximizeButton = document.createElement('button'); maximizeButton.textContent = '最大化'; maximizeButton.style.marginRight = '10px'; maximizeButton.onclick = function() { const video = document.querySelector('video'); if (video) { video.requestFullscreen().catch(console.error); } }; const playButton = document.createElement('button'); playButton.textContent = '再生'; playButton.style.marginRight = '10px'; playButton.onclick = function() { const video = document.querySelector('video'); if (video) video.play(); }; const stopButton = document.createElement('button'); stopButton.textContent = '停止'; stopButton.style.marginLeft = '10px'; stopButton.onclick = function() { const video = document.querySelector('video'); if (video) video.pause(); }; const closeButton = document.createElement('button'); closeButton.textContent = 'x'; closeButton.style.marginLeft = '5px'; closeButton.onclick = function() { popup.remove(); }; header.appendChild(maximizeButton); header.appendChild(playButton); header.appendChild(stopButton); header.appendChild(closeButton); popup.appendChild(header); const speedControls = [0.25, 0.5, 1, 2, 3]; const speedContainer = document.createElement('div'); speedContainer.style.display = 'flex'; speedContainer.style.justifyContent = 'center'; speedControls.forEach(speed => { const button = document.createElement('button'); button.textContent = %60x${speed}%60; button.style.margin = '5px'; button.onclick = function() { const video = document.querySelector('video'); if (video) video.playbackRate = speed; }; speedContainer.appendChild(button); }); popup.appendChild(speedContainer); const skipTimes = [-30, -10, -5, 5, 10, 30]; const skipContainer = document.createElement('div'); skipContainer.style.display = 'flex'; skipContainer.style.justifyContent = 'center'; skipTimes.forEach(time => { const button = document.createElement('button'); button.textContent = %60${time > 0 ? '+' : ''}${time}%60; button.style.margin = '5px'; button.onclick = function() { const video = document.querySelector('video'); if (video) video.currentTime += time; }; skipContainer.appendChild(button); }); popup.appendChild(skipContainer); document.body.appendChild(popup);})();
その他
Wayback Machine自動入力(スマホも可)
Wayback Machineに調べたいサイトのリンクが自動で入力されます。Wayback Machineは、インターネット上のウェブサイトの履歴を保存し、過去の状態を閲覧できるので（運良く保存されていた場合は）、調べたいサイトが消えていた時に使ってください。調べたいサイトが開いた状態で起動してください。
javascript:(function(){location.href='https://web.archive.org/web/*/' + location.href;})();原神交換コード自動入力(スマホも可)
コードを入力してくださいと表示されるので、交換コードを入力して、確認ボタンを押してください。交換コードが自動で入力されます。
javascript:(function() { var existingPopup = document.getElementById('genshin-code-popup'); if (existingPopup) existingPopup.remove(); var popup = document.createElement('div'); popup.id = 'genshin-code-popup'; popup.style.position = 'fixed'; popup.style.top = '50%'; popup.style.left = '50%'; popup.style.transform = 'translate(-50%, -50%)'; popup.style.padding = '20px'; popup.style.backgroundColor = 'white'; popup.style.border = '1px solid #ccc'; popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)'; popup.style.zIndex = '10000'; var message = document.createElement('p'); message.textContent = 'コードを入力してください'; popup.appendChild(message); var input = document.createElement('input'); input.type = 'text'; input.style.width = '100%'; input.style.marginBottom = '10px'; popup.appendChild(input); var button = document.createElement('button'); button.textContent = '確認'; button.style.width = '100%'; button.onclick = function() { var code = input.value.trim(); if (code) { var url = 'https://genshin.hoyoverse.com/ja/gift?code=' + encodeURIComponent(code); window.open(url, '_blank'); } else { alert('コードを入力してください'); } }; popup.appendChild(button); var closeButton = document.createElement('button'); closeButton.textContent = '閉じる'; closeButton.style.marginTop = '10px'; closeButton.style.width = '100%'; closeButton.onclick = function() { popup.remove(); }; popup.appendChild(closeButton); document.body.appendChild(popup);})();