▼ おーぷん ▼
コメント欄を見ていて、ふと思ったのですが
名前つけるの面倒ですよね
私はデフォルトがあるならそのままにするタイプです
でもそれって同じ名前であふれることになって誰が誰か分かりません
多くはログインしない自己申告なので他人を騙ることもできるものですが、そういうつもりのない人でも混ざります
自動で名前つけてくれるといいよねーと思って思いつきで作ってみました
ランダムな名前自体は外部から取得します
ゲームでランダムに名前つけてくれるものがありますが、そういうところで出てくるような候補は外部 API があるものとします
自分で候補を羅列したファイルを用意しておいてそれを取得するようにもできます
投稿ボタンを押したときに名前が未入力なら取得した名前の中からランダムに選んでその名前を設定します
取得に失敗したときのために、いくつかの候補はローカルにも持っておきます
ローカルの場合は数が少なくて重複率が高くなるので末尾にランダムな数字も追加します
末尾に数字付きのコメントが増えてたら取得に失敗してるので外部サービスが落ちてるか終了したってわかります
また、複数回コメントするときには同じ名前になってほしいです
投稿するときに名前を保存しておいて、投稿時に名前があればランダムではなくこっちを使うようにします
投稿者が自分で入力していればそっちを優先するので、意図的に名前を変えることはできるようにします
フォームはこんな感じ
HTML と CSS はサンプル用なので、適当なものに置き換えてよくて JS 部分がメインです
書き換えるところはコードのコメントに書いてるあたり
auto_names の取得方法と取得できないとき用の名前です
あとはフォームの名前を入れるところが name で、 localStorage のキーが last_name になってるので、 author などに変更したいならここも書き換えます
1 行に 1 つ名前を書いたファイルを用意するなら auto_names のロードはこんな感じ
自分で用意するなら数は多くないでしょうし、何千何万とかあるわけじゃないなら全部をソースコードに記載してもいいかも
あと、わざわざ名前の候補なんて取得せず「匿名001」みたいに「固定名＋ランダム数字」でも目的は果たせます
ただ面白みがないのとコメント欄に並ぶ名前がイマイチかなーと思って名前候補を使う方法にしました
といっても、このブログはコメントなんて年に数件程度
こんな工夫が必要なところでもないです
なのでここで紹介してますが、このブログにこの機能は入ってません
そんなものですが、設定しやすくしたほうがいいなと思って、モジュール化してみたりもしました
https://gist.github.com/989933e7aeeba9139d8d6b44866a3286
名前つけるの面倒ですよね
私はデフォルトがあるならそのままにするタイプです
でもそれって同じ名前であふれることになって誰が誰か分かりません
多くはログインしない自己申告なので他人を騙ることもできるものですが、そういうつもりのない人でも混ざります
自動で名前つけてくれるといいよねーと思って思いつきで作ってみました
ランダムな名前自体は外部から取得します
ゲームでランダムに名前つけてくれるものがありますが、そういうところで出てくるような候補は外部 API があるものとします
自分で候補を羅列したファイルを用意しておいてそれを取得するようにもできます
投稿ボタンを押したときに名前が未入力なら取得した名前の中からランダムに選んでその名前を設定します
取得に失敗したときのために、いくつかの候補はローカルにも持っておきます
ローカルの場合は数が少なくて重複率が高くなるので末尾にランダムな数字も追加します
末尾に数字付きのコメントが増えてたら取得に失敗してるので外部サービスが落ちてるか終了したってわかります
また、複数回コメントするときには同じ名前になってほしいです
投稿するときに名前を保存しておいて、投稿時に名前があればランダムではなくこっちを使うようにします
投稿者が自分で入力していればそっちを優先するので、意図的に名前を変えることはできるようにします
フォームはこんな感じ
HTML と CSS はサンプル用なので、適当なものに置き換えてよくて JS 部分がメインです
<!doctype html>
<style>
.container {
margin: 10px;
width: 400px;
}
.comment-form {
:is(h1) {
font-size: 1.2em;
}
:is(textarea) {
resize: vertical;
min-height: 3em;
}
}
.flex-col {
display: flex;
flex-flow: column;
gap: 8px;
}
</style>
<div class="container">
<section class="comment-form">
<form id="comment-form">
<div class="flex-col">
<h1>コメント</h1>
<input name="name" placeholder="なまえ">
<textarea name="body"></textarea>
<button>投稿</button>
</div>
</form>
</section>
</div>
<script type="module">
let auto_names = []
const url = null // 外部の名前を取得できるページを指定する
fetch(url).then(response => response.json()).then(data => {
// auto_names が名前の配列になるように必要なら変換
auto_names = data
})
// 取得できなかったとき用
// パターンが少ないので末尾に数字をつける
const local_names = ["さとう", "たなか", "すずき"]
const random = (arr_or_num) => {
const _random = (end) => Math.floor(Math.random() * end)
if (typeof arr_or_num === "number") {
return _random(arr_or_num)
} else {
const index = _random(arr_or_num.length)
return arr_or_num[index]
}
}
document.getElementById("comment-form").onformdata = (event) => {
const data = event.formData
let name = data.get("name")
if (name === "") {
if (localStorage.last_name) {
name = localStorage.last_name
} else {
if (auto_names.length) {
name = random(auto_names)
} else {
name = random(local_names) + String(random(1000)).padStart(3, "0")
}
}
}
data.set("name", name)
localStorage.last_name = name
}
</script>
書き換えるところはコードのコメントに書いてるあたり
auto_names の取得方法と取得できないとき用の名前です
あとはフォームの名前を入れるところが name で、 localStorage のキーが last_name になってるので、 author などに変更したいならここも書き換えます
1 行に 1 つ名前を書いたファイルを用意するなら auto_names のロードはこんな感じ
fetch(url).then(response => response.text()).then(data => {
auto_names = data.split("\n").map(x => x.trim()).filter(x => x)
})
自分で用意するなら数は多くないでしょうし、何千何万とかあるわけじゃないなら全部をソースコードに記載してもいいかも
あと、わざわざ名前の候補なんて取得せず「匿名001」みたいに「固定名＋ランダム数字」でも目的は果たせます
ただ面白みがないのとコメント欄に並ぶ名前がイマイチかなーと思って名前候補を使う方法にしました
といっても、このブログはコメントなんて年に数件程度
こんな工夫が必要なところでもないです
なのでここで紹介してますが、このブログにこの機能は入ってません
そんなものですが、設定しやすくしたほうがいいなと思って、モジュール化してみたりもしました
https://gist.github.com/989933e7aeeba9139d8d6b44866a3286
▲ くろーず ▲
