【DeviantArt】エンゲージメント率を計算するブックマークレット

うみゅ

概要

DeviantArt - Discover The Largest Online Art Gallery and Communityのページのいいね数、コメント数、閲覧数からエンゲージメント率を算出し、クリップボードにコピーするブックマークレットを作りました。

対象読者

DeviantArtに投稿している方

ブックマークレットについて

ブックマークレットとは、ウェブブラウザのブックマーク機能を使って動作する小さなJavaScriptプログラムのことです。通常のブックマークはURLを保存しますが、ブックマークレットはJavaScriptプログラムを保存し、そのコードを実行することで、閲覧中のウェブページに対して特定の動作を行うことができます。詳しくはブックマークレット - Wikipedia を参照してください。

ブックマークレットの使い方

ブックマークレットを使うには、２つの手順が必要です。

  1. ブックマークレットをブックマークに登録します。

  2. 登録したブックマークをクリックします。

それぞれ手順を追って説明します。

1, ブックマークレットをブックマークに登録します。

a, Chromeの場合、ブラウザで chrome://bookmarks/ を開きます。
b, 右上の「︙」をクリック、「新しいブックマークの追加」をクリックします。
c, 名前：DeviantArt ブックマークレット　※他の名前でも問題ありません。
    URL：下記の黒い部分の文字列を全部貼り付けます。

【参考】下記の黒い部分にカーソルを当てると右上のコピーボタンを押せます。押す事で、クリップボードに内容をコピーします。

javascript:(() => {
	const targetUrl = 'https://www.deviantart.com/studio/published';
	if (location.href !== targetUrl) {
		location.href = targetUrl; /* 現在表示しているページがpublishedページではない場合、publishedのページに移動します。 */
		return;
	}
	
	function getContent() {
    	const searchKeyword = "Search";
		const pageText = document.documentElement.innerText;
		const searchIndex = pageText.indexOf(searchKeyword);

		if (searchIndex === -1) {
			/* "Search"が見つからなかった場合に例外を発生させる */
			throw new Error(`The keyword '${searchKeyword}' was not found in the page text.`);
		}
		return pageText.substring(searchIndex + searchKeyword.length);
	}
	
	function parseViewCount(viewString) {
		let multiplier = 1;
		if (viewString.endsWith('K')) {
			multiplier = 1000;
			viewString = viewString.slice(0, -1);
		} else if (viewString.endsWith('M')) {
			multiplier = 1000000;
			viewString = viewString.slice(0, -1);
		}
		return parseFloat(viewString) * multiplier;
	}
	
	function extractTagCount(tagString) {
		/* "Tags (3)" や "Tags (4)" のような文字列からタグ数を抽出 */
		const match = tagString.match(/Tags \((\d+)\)/);
		return match ? parseInt(match[1], 10) : 0;
	}
	
	function processLine(line) {
		/* 行を処理し、エンゲージメント率を計算して行を更新します */
		const columns = line.split('\t');
		const tags = extractTagCount(columns[2]) || 0;
		const likes = parseInt(columns[3], 10) || 0;
		const comments = parseInt(columns[4], 10) || 0;
		const views = parseViewCount(columns[5]) || 0;
		const privately_collected = parseInt(columns[6], 10) || 0;
		
		const engagementRate = (likes === 0) ? 0 : ((likes + comments + privately_collected) * 100 / views).toFixed(3);
		return columns[0] + '\t' + columns[1] + '\t' + tags + '\t' + likes + '\t' + comments + '\t' + columns[5] + '\t' + privately_collected + '\t' + engagementRate;
	}
		
	try {
		let pageText = getContent();
		/* テキストから文字列を削除 */
		pageText = pageText.replace(/Mature|Created with AI|NoAI|Favourites?|Comments?|Views?/g, '');
        
		pageText = pageText.replace(/^\s*\n/gm, '');
		/* 改行だけの行をタブに置き換えます */
		pageText = pageText.replace(/\n/g, '\t');
		
		pageText = pageText.replace(/Edit\t/g, '\n');
		
		/* 各行のエンゲージメント率を計算して追加 */
		let lines = pageText.split('\n');
		let footer = lines.pop(); /* 最終行を削除 */
		lines = lines.map(processLine);
		pageText = lines.join('\n');
		
		const header = 'タイトル\t投稿日\tタグ数\tいいね数\tコメント数\t閲覧数\tプライベートコレクション数\tエンゲージメント率\n';
		pageText = header + pageText + '\n';
		
		function copyToClipboard(resultText) {
			const dummy = document.createElement("textarea");
			document.body.appendChild(dummy);
			dummy.value = resultText;
			dummy.select();
			document.execCommand("copy");
			document.body.removeChild(dummy);
			
			alert("エンゲージメント率をコピーしました。");
		}

		copyToClipboard(pageText);
	} catch (error) {
		/* 例外を捕捉してメッセージボックスに表示します */
		alert(error.message);
	}
})();
【参考】ブックマーク追加画面

d, 保存ボタンを押すと登録が完了します。

2, ブックマークレットを実行します。

a, 登録したブックマークを押すとDeviantArt - Discover The Largest Online Art Gallery and Communityに移動します。
b, もう一度、登録したブックマークを押すとクリップボードにエンゲージメント率をコピーします。
正常終了時は、メッセージボックスに「エンゲージメント率をコピーしました。」が表示されます。

以上で実行は完了です。

ブックマークレットの仕様

  • 最大25件（Published)のページの制約です。

アンインストール方法

登録したブックマークを削除してください。

補足事項

Androidスマホでブックマークレットを実行する方法

Androidスマホでブックマークレットを実行する場合は、以下の手順で登録を行い実行します。

a, ブックマークレットを登録します。
登録は、任意のページをブックマークした後に「︙」のブックマークよりブックマークのURLを変更します。

b, ブックマークレットを実行します。

  1. ブラウザでPublishedのページ DeviantArt - Discover The Largest Online Art Gallery and Communityを開きます。

  2. 右上の「︙」より「PC版サイト」を選択し、PC版サイト表示に変更します。

  3. URLバーをタップします。そうすると「検索またはURLを入力」と表示されます。

  4. 登録したブックマークレットの名前 (の一部)を入力しブックマークレットを実行します。
    ※ブックマークの判断方法
    ブックマークの場合、先頭に☆マークが付きますので、それで判断してください。

🔹まとめ

deviantArtでエンゲージメント率を算出するブックマークレットの実行方法についての説明を行いました。

🔹🔹🔹
最後まで読んで頂き、ありがとうございます。

もしこの記事が少しでも参考になりましたら
左下の❤いいねを押して頂けると、更新のモチベーションが上がります。


この記事が気に入ったらサポートをしてみませんか？