はじめに
@Nemesis氏の書かれたJavaで湯婆婆を実装してみるをJavaScriptで実装するやつです。
本人に口頭で許可は得たのでヨシ！
コード
ひとまずこんな感じで書いてみた。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="keiyakusyo">
<p id="result"></p>
<script>
let input = document.querySelector("#keiyakusyo")
input.addEventListener("change", (event) => {
input = document.querySelector("#keiyakusyo")
const result = document.querySelector("#result")
const random = Math.round(Math.random() * input.value.length) - 1
let newName = input.value.substr(random, 1)
result.innerHTML = "フン。"+input.value+"というのかい。贅沢な名だねぇ。<br>今からお前の名前は"+newName+"だ。いいかい、"+newName+"だよ。分かったら返事をするんだ、"+newName+"!!"
})
</script>
</body>
</html>
inputに名前を入れさせてchangeイベントで発火。名前を奪うところはrandomとsubstrで完成。randomの数字に最後に-1がかかっているのは、substrは指定された番目の文字の一つ後から取り出してしまうため。
substringで切り取る時は起点と終点の位置を指定せねばならないのに対して、substrは起点とそこからの文字数で切り取れる。恥ずかしながら今日までsubstrの存在を知らなかった。なんでこんなネタ記事で学びが生まれているのか。
動かすとこんな感じ。
See the Pen
YzWjpEm by HATO (@hatopoppo)
on CodePen.
とりあえずここまで出来たので元記事の執筆者、Nemesisに見せてみた。
Nemesis「契約書出せ」
クレーム対応
一瞬恐喝か何かかと思ったら元記事の湯婆婆はまず契約書を出して、そこに名前を書かせるという原作の流れを踏襲している。
そこ拘る必要あるかなとも思いつつも、ネタを借りた身として一応対応はせねばならないので契約書を出してみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="message"></p>
<input type="text" id="keiyakusyo">
<script>
let message = document.querySelector("#message")
let input = document.querySelector("#keiyakusyo")
window.onload = function () {
message.innerHTML = "契約書だよ。そこに名前を書きな。"
}
input.addEventListener("change", (event) => {
input = document.querySelector("#keiyakusyo")
const random = Math.round(Math.random() * input.value.length) - 1
let newName = input.value.substr(random, 1)
message.innerHTML = "フン。" + input.value + "というのかい。贅沢な名だねぇ。<br>今からお前の名前は" + newName + "だ。いいかい、" + newName + "だよ。分かったら返事をするんだ、" + newName + "!!"
})
</script>
</body>
</html>
See the Pen XWKBNxP by HATO (@hatopoppo) on CodePen.
pタグの初期値にmessageを入れてもよかったが発言という体を取るためにonloadで発火してpタグが書き換わる形にした。
さぁ文句はない筈だ。元記事の執筆者、Nemesisのお墨付きでももらって記事を締めよう。
Nemesis「それ空欄はちゃんとエラー吐く？」
僕「…」
そうだ、元記事のオチは名前が空欄だと湯婆婆がクラッシュするという衝撃的なものだった。
お墨付きなんかで円満にニコニコ終わらせるなど良いわけがない。
元記事に勝るとも劣らないイカれた記事でなければ。
一筋の光
ここまで書いた私は、とある盲点に気がついた。
湯婆婆の発言に手っ取り早くbrを使うために、innerHTMLを使ったが、そうすると、inputにタグでも書かれると大変なことになる。仕方ないから改行は別の方法d…
タグ…?
最後に
結局コードは上のままで完成となった。
最後に、下のコードをinputに入れて欲しい。既にネタバレMAXみたいな状態でお見せしているが仕方ない。
<iframe width="560" height="315" src="https://www.youtube.com/embed/etiQRSOkOIg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
ここまで読んでいただきありがとうございました。
JavaScriptで湯婆婆を実装してみる、ということでJa婆婆を実装してみました。
ネタで内容が全て終わりましたが読んでいただけて幸いです。
ジブリファンか黒柳徹子さんにぶっ殺されたら骨だけは拾ってください