てがろぐ管理画面をちょっと便利に

20240901_ogp_image.png

てがろぐ管理画面をちょっと便利にするUserScriptです。以下のブラウザ拡張機能で動作確認しています。

FirefoxのTampermonkeyはAndoroidでも使えるようになったみたいですね~。上記の拡張機能を導入して以下にあるuser.jsのリンクを押すか、コードを各拡張機能のオプションを開いてエディタにコピペ、保存すると使えるようになると思います。

てがろぐ管理画面をちょっと便利に

  • ヘッダーバーをスクロール追従、ヘッダーバー内にてがろぐHOMEへのリンクを追加
  • 記事の編集・削除画面に公開状態で絞り込むセレクトボックスを追加

てがろぐ管理画面をちょっと便利に.user.js

コード

// ==UserScript==
// @name てがろぐ管理画面をちょっと便利に
// @namespace    https://10prs.com
// @description てがろぐ管理画面をちょっと便利に
// @match *://*/*mode=admin*
// @version 20240901
// @grant        none
// @run-at       document-end
// ==/UserScript==

// header 周り
(function() {
	document.getElementById('header').style.position ="sticky";
	document.getElementById('header').style.top ="0";
	
	const adminhome = document.querySelector('.adminhome');
	const tegahome = document.createElement('a');
	tegahome.href = '?';

	const style = tegahome.style;
	style.setProperty('right', '43px');
	style.setProperty('width', '4em');

	const tegahometxt = document.createTextNode('てがろぐHOME');
	tegahome.appendChild(tegahometxt);
	adminhome.prepend(tegahome);
})();

// 編集・削除画面で絞込セレクトボックス
(function createSelectBox() {
	const select = document.createElement('select');
	select.id = 'dynamicSelect';

	const options = [
		{ text: '公開状態で絞込', value: '' },
		{ text: '下げる', value: '?mode=admin&work=manage&q=$ps=rear' },
		{ text: '下書き', value: '?mode=admin&work=manage&q=$ps=draft' },
		{ text: '鍵付き', value: '?mode=admin&work=manage&q=$ps=lock' },
		{ text: '絞込解除', value: '?mode=admin&work=manage' },
	];

	options.forEach(option => {
		const opt = document.createElement('option');
		opt.text = option.text;
		opt.value = option.value;
		select.add(opt);
	});

	select.addEventListener('change', function() {
		const selectedValue = this.value;
		if (selectedValue) {
			window.location.href = selectedValue;
		}
	});

	const headFormDiv = document.querySelector('.headForm');
	headFormDiv.appendChild(select);
})();

てがろぐ画像管理画面

てがろぐ画像管理画面でmp3とmp4を表示します。

てがろぐ画像管理画面.user.js

コード

// ==UserScript==
// @name         てがろぐ画像管理画面
// @namespace    https://10prs.com
// @version      20240901
// @description  てがろぐ画像管理画面でmp3とmp4を表示
// @match        *://*/*mode=admin*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
	'use strict';

	document.querySelectorAll('img[src$=".mp3"]').forEach(function(img) {
		var audio = document.createElement('audio');
		audio.controls = true;
		audio.style.width = '200px';

		var source = document.createElement('source');
		source.src = img.src;
		source.type = 'audio/mp3';

		audio.appendChild(source);

		img.parentNode.replaceChild(audio, img);
	});

	document.querySelectorAll('img[src$=".mp4"]').forEach(function(img) {
		var video = document.createElement('video');
		video.controls = true;
		video.width = 200;
		video.height = 200;

		var source = document.createElement('source');
		source.src = img.src;
		source.type = 'video/mp4';

		video.appendChild(source);

		img.parentNode.replaceChild(video, img);
	});
})();

記事編集画面での公開状態で絞り込みあたりはてがろぐ公式で次バージョン以降に実装されそうな気もしますがとりあえず自分はこんな感じで便利に使わせていただいてますということで。