公開済み記事の文字数をカウントするツールを作ったよ
はじめに
noteで沢山記事を書いていると、いままで俺ってどれくらいの文字数の記事を書いていたのだろうな、累計で書いた文字数を知りたいなという需要があると思います
今まではどうやって調べようかな～
人力でやるとクッソしんどいよな～と思っていましたが、本日気が付きました
そうだ！
ChatGPTにプログラム書かせたらええやん
ということで、ChatGPTにツールを作らせてみたら結構使えるものができたので、そのツールの内容と使い方をご紹介します
文字数カウンターツール
まずはしゃべるよりも完成形を見せた方が早いので、完成形をお見せします
僕がnoteでいままで書いた記事の本文の文字数が表で出力されます
そして、公開している記事の本文の累計文字数も集計させて表示させています
コレのツール使ってめちゃくちゃ驚いたことですが、僕の公開記事の累計文字数はなんと60万字でした
公開している記事は335記事だったので、僕の記事の平均文字数は大体2000字です
長文記事ですねぇ笑
想像以上にめちゃくちゃ文章書いていました
（ちなみに下書きを含むと80万字でした）
文字数カウンターツールの中身
それでは、お待ちかね
皆さんもお使いになりたいと思うので、ツールの中身であるコードをこちらに記しておきます
counterXML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WordPress XML Export Analyzer</title>
</head>
<body>
<input type="file" id="xmlFileInput" accept=".xml">
<button onclick="analyzeWordPressExport()">Analyze WordPress Export</button>
<p id="totalLength"></p>
<table id="resultTable" border="1">
<thead>
<tr>
<th>Title</th>
<th>Content Length</th>
<th>Status</th>
</tr>
</thead>
<tbody id="resultTableBody"></tbody>
</table>
<button onclick="downloadCSV()">Download CSV</button>
<script>
let csvContent = "Title,Content Length,Status\n";
function analyzeWordPressExport() {
const fileInput = document.getElementById('xmlFileInput');
const resultTableBody = document.getElementById('resultTableBody');
const totalLengthElement = document.getElementById('totalLength');
const file = fileInput.files[0];
if (!file) {
alert('Please select a WordPress XML export file.');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const xmlString = event.target.result;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
const items = xmlDoc.querySelectorAll('item');
let totalContentLength = 0;
resultTableBody.innerHTML = '';
csvContent = "Title,Content Length,Status\n";
items.forEach(item => {
const title = item.querySelector('title').textContent;
const content = item.querySelector('encoded').textContent;
const status = item.querySelector('status').textContent;
const contentWithoutTags = stripHtmlTags(content);
const contentLength = contentWithoutTags.length;
totalContentLength += (status === 'publish') ? contentLength : 0;
const row = document.createElement('tr');
const titleCell = document.createElement('td');
const lengthCell = document.createElement('td');
const statusCell = document.createElement('td');
titleCell.textContent = title;
lengthCell.textContent = contentLength;
statusCell.textContent = status;
row.appendChild(titleCell);
row.appendChild(lengthCell);
row.appendChild(statusCell);
resultTableBody.appendChild(row);
csvContent += `"${title}","${contentLength}","${status}"\n`;
});
totalLengthElement.textContent = 'Total Content Length (Published): ' + totalContentLength;
};
reader.readAsText(file);
}
function stripHtmlTags(html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}
function downloadCSV() {
const blob = new Blob([csvContent], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'wordpress_export_analysis.csv';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>こちらのコードを手元でHTMLファイルにコピーして、ブラウザで表示させたら使えるようになります
そして、noteのエクスポート機能で出力させたXMLファイルを食わせれば上記で見せたような表が出力されます
かなりシンプルではありますが、かなり便利ではないでしょうか？
願わくばnoteの機能に追加しておいてほしいな～と思ったりします
まあ運営の手を煩わせるつもりはないですが、要望としては、ダッシュボード等の画面で記事本文の文字数が確認出来たら最高です
さて、まあnoteの機能として実装されるのは、いつになるかわかりませんので、上記の説明だけでは使い方が分からなかったよ～って人のために、詳しく使い方をご紹介しようと思います
詳細な使い方の手順説明
IT音痴の人にも優しく解説いたします
まずは初歩的なことですが、PCでnoteを開いてくださいね
次に、過去記事のバックアップをエクスポートで出力します
ダウンロード出来たら、xmlファイルがあると思います（※下のフォルダ内のファイルの数が違うのは気にしないでください）
次に、counterXML.htmlのような名前は適当でいいのでhtmlファイルを作ってください
その後、メモ帳でHTMLファイルを開いて、上記で紹介したコードをコピペして保存して閉じます
その後、そのHTMLファイルをダブルクリックか、ブラウザにドラッグアンドドロップをする等してブラウザで表示させてください
こんな画面が表示されるはずです
後の操作は大体ご想像通りです
「ファイルを選択」のボタンのところにxmlファイルを取り込ませて、「Analyze Word…….」ボタンを押すと、表が出力されます
簡単でしたね
ちなみに、CSVも出力できるようになっています
分析に役立ちそうですね
おわりに
いかがでしょうか？
この過去記事の文字数カウンターツールは意外と欲している人が沢山いたのではないのかなと思われます
是非お使いください
お役に立てれば幸いです
こいつはちなみにChatGPTで出力させました
コードの中身はちゃんと見てないのでもしかすると予期せぬ挙動をするかもしれませんがその時はお許しください
この記事が気に入ったらサポートをしてみませんか？