【配布】名前ランダム機能（非簡易版）の導入方法

12/12/2020 yumesenya 0 Comments

Contents

1 ご注意
2 名前ランダム機能とは
3 仕様
4 導入方法
5 最後に

ご注意

この記事は名前ランダム機能（非簡易版）の導入方法を紹介する記事です。

JavaScriptの詳細やらあれこれの漫談、また、簡易版の配布は今後執筆予定の別の記事をお待ち下さい。

名前ランダム機能とは

名前ランダム機能とは文字通り、まとめサイトに於いて、各レスの投稿者の名前をランダムで表示するものです。2ch系掲示板の一部の板で、プロレスの技名や猫の種類がランダム？に表示されるものがありますが、あの機能をまとめサイトでも「ブラウザ側で」やってもらおうというわけです。

詳しくはこちら？を参考になさって下さい。

仕様

作るにあたっての仕様は悩ましいところですが、とりあえず

まとめくすさんを使って
デフォルトのままHTMLを生成した場合に機能する

の2つを推奨環境としました。この機能のためにまとめくす側での特別なカスタムが必要だとして、そんなものを誰が採用するのか、これまでの過去の資産に適用出来なくていいのかという点を考えると、カスタムによって確実に適用できるとか、コードが単純で済むとかいった部分は利用者にとって殆ど意味のないことですので仕方がありません。

次に具体的な機能は、

同一IDに対しては同一の名前を振る
ページのリロード毎に、同じIDでも別の名前を振る
名前の候補はCSVから読み込めるようにしておく

とします。外部からファイルを読み込むと、ファイルの読み込み待ち云々で多少の面倒があるのですが、利用する側には関係ありません。少しだけ、クライアント側での処理が重くなるかもしれません。

導入方法

STEP1.スクリプトの保存

はじめに、以下のソースを randName.js として、お手元のPCに保存して下さい。

document.addEventListener("DOMContentLoaded", function() {
  //外部にCSVファイルを置かないなら空欄に。
  const src = 'nameList.csv';
  //最低限の名前リスト。CSVファイルを置かない場合、ここに名前を列挙する。
  let nameList = ['名無しの研究員', '名無しのペンギン'];

  //対象となるヘッダ部分にセットされるクラス名を指定
  const targetClass = 't_h';
  const idRExp = /ID:[\.a-zA-Z0-9]{3,}/;

  //以下は処理
  rename(src);

  async function getNameList(src) {
    return new Promise((resolve, reject) => {
      let list = [];
      let req = new XMLHttpRequest();
      req.open("get", src, true);
      req.send();
      req.onload = function() {
        if (200 == req.status) {
          list = req.responseText.split(/[\r\n|\n|\r|,]+/);
        }
        resolve(list);
      };
      req.onerror = (error) => {
        reject(error);
      };
    });
  }

  async function rename(src) {
    if ('' == src) {
      setHeaderClass();
      setName();
    } else {
      try {
        nameList = nameList.concat(await getNameList(src));
        setHeaderClass();
        setName();
      } catch (e) {
        console.log(e);
      }
    }

    function setName() {
      const geta = Math.floor(Math.random() * nameList.length);
      let postHeaders = document.getElementsByClassName(targetClass);
      for (let postHeader of postHeaders) {
        if (idRExp.test(postHeader.textContent)) {
          let id = postHeader.textContent.match(idRExp)[0].replace('ID:','').replaceAll(/\./g, '');
          let key = (parseInt(id, 36) + geta) % nameList.length;
          postHeader.firstElementChild.textContent = nameList[key];
        }
      }
    }

    function setHeaderClass() {
      let dts = document.getElementsByTagName('dt');
      for (let dt of dts) {
        dt.setAttribute('class', targetClass);
      }
    }
  }
});

設定箇所はあまり多くありませんので、ゆっくりと以下の手順を追って下さい。

STEP2.名前リストの準備

名前の候補を「,（半角カンマ）」で区切って列挙したファイルを用意して、nameList.csvの名前で保存して下さい。このとき、文字コードはUTF-8を指定して下さい。具体的には以下のようなテキストファイルになります。

候補0,候補1,候補2

このファイルを用意することで、候補0~2の3つの名前を候補に加えることが出来ます。スクリプト内のリストは空でも構いません。ただし、何らかの理由でこのファイルが見つからなかった場合に、それでもスクリプト自体は正しく動いていることを確認するために、まとめくすが吐き出すデフォルトの名前とは異なる名前を指定しておくと便利です。例えば、CSVファイルを用意するかどうか、お使いのブログ環境でこのスクリプトが正しく動くことを確認してから決めたいという場合、スクリプト内のリストが2つあれば、ひとまずランダムな名前が割り振られることの確認ができるでしょう。

CSVファイルを利用しないまたは、データファイルのアップロードが出来ない環境の場合は、先程のJavaScriptファイルの5行目に、直接追加して下さい。次のように名前の候補を各々「’’」で囲み、「,」で区切る必要があります。もちろん、始めから書かれている2つの名前候補は消していただいても構いません。

	let nameList=['名無しの研究員','名無しのペンギン','追加0','追加1',...];

このようなファイルは、元となる名前一覧さえ何処かから手に入れてしまえば、置換の出来るテキストエディタを使って割と簡単に作成出来ます。

例えば、こんなページから人名の一覧を取ってきて、人名と人名に挟まる要素を正規表現で「,」に置換すればCSVファイルは完成です。JavaScript内部に埋め込みたい場合、「,」を「’,’」に置き換え、後は先頭と末尾に「’」を追加するだけです。

ちなみに、名前を百単位で用意する際、エディタによっては一行にずらっとデータが並んではみ出る、処理が重くなる等があるようなので、適当なところで改行をしていても問題なく読み込むようにしています。厳密にCSVの規則に従っていないわけですが、特に問題はないでしょう。まとめブログを作りたい誰もがCSVエディタや、CSVの扱いに適したエディタを使っているべきだとは到底思えません。

STEP3.スクリプトの修正

名前のリストが準備出来たら、スクリプトの記述を修正して下さい。

CSVファイルを利用しない場合は３行目を、

//外部にCSVファイルを置かないなら空欄に。保存先
	const src = '';

こんな風に、ファイル名を消して下さい。実は消さなくても問題なく動くようにしてありますが、消してあればサーバとユーザへの処理が軽減されます。

CSVファイルを利用する場合は、スクリプトをアップロードできるディレクトリと、CSVファイルをアップロードできるディレクトリとを確認し、相対パスまたは絶対パスでファイル名を指定して下さい。LivedoorBlogならばどちらも任意のフォルダに置けるため、ファイル名だけでも構いません。

STEP4.1アップロード可能な場合

スクリプトの修正が終わったら、JavaScriptのアップロードが可能な場合はサイト運営社の指示に従ってアップロードして下さい。次に、JavaScriptの読み込みを指定するために、

<script type="text/javascript" src="./js/randName.js"></script>

のような記述を行います。「記事に共通して反映される<head></head>内の要素」のような設定項目から設定するとよいでしょう。素直なサイトならばこれで、過去の記事も未来の記事も、全てに名前ランダム化が適用されるはずです。

ただし、LivedoorBlogではスマートフォン版とPC版とで共通して読み込ませることの出来る記述というものがないようです。そのため、上の記述を定型文に登録しておき、新しい記事を書く度にページ先頭、あるいは末尾に貼り付けるという手で対処することになるでしょうか。過去記事が多ければ多いほど、全てに対応させるのは困難です。スマートフォン版での利用は諦めるか、あるいは過去記事についてだけは諦めるかの必要があるでしょう。

STEP4.2アップロード不可能な場合

はてなブログのようにJavaScriptをファイルとしてアップロードして読み込ませることができない場合は、header や footer のカスタマイズの項目に、

<script type="text/javascript">
……
……
</script>

のようなタグを用意し、ここに修正を終えたスクリプトをまるごとコピーして下さい。個別記事の表示時に読み込んでくれる場所に設定できたら、晴れて設置の完了です。

最後に

今回の機能は、まとめブログのパーツとして、特に狭いコミュニティで閲覧されることの多いだろう趣味領域のまとめブログで活躍するものと思います。

動物をメインで扱うなら動物の名前を入れたり、野球や特定の球団を応援するブログなら球団OBの名前をランダムに表示してみたりすると、なかなか面白いことになるかもしれません。

いやいや、そんな機能いらんがなという方もいらっしゃるでしょうが、大して重い機能でもなし、普段意識して見ることさえないだろう味気ない投稿の名無し部分がちょっぴり変化するだけなので――よほど不快な名前を登録しない限りは――さほど気に障るものでもないでしょう。

名前のリストさえ作れてしまえば導入も難しくありませんので、是非ご利用頂ければ嬉しい限りです。

では、お互いに、素敵なおーぷんまとめサイトの管理人ライフを。

それから相変わらず宣伝ですが、フラワーナイトガールを遊んでみることを断固！オススメします！