アニメ『小林さんちのメイドラゴン』（2017）には、1話あたり2回、真ん中ちょっと過ぎと最後に近くなって、黄色い画面のアイキャッチが入ります。中央に5つの文字が左から順にピコピコと効果音とともに出てくる比較的単純な構成ですが、その文字列が微妙に興味深いのが特徴的です。
「小林さんちのメイドラゴンで出てきたコード（小林さんを探せ！）」で語られているように、この番組は主人公はPythonプログラマです（第二期にはC++も出てくるが）。そのため、アイキャッチには.name（なにかのプロパティかTLD）とかif(){（なぜかPythonではない）なんてのも出てきて、ソフトウェアエンジニアを喜ばせてくれます。
で、これをHTML/JavaScriptで再構築しました（上記の画像）。
追記：Githubにリポジトリ（https://github.com/stoyosawa/Kobayashi-San）を作成しました。こちらをクリックすれば動作が確認できます。
背景画面色、フォントサイズ、文字描画インターバルなどはある程度は再現できたと思いますが、フォントファミリがわからない。こういうのって、たいていはWindowsやUnix系のフォントが使われないというのもありますが。そこで、えいやっとFranklin Gothic Bookを使うことにしました。ご推奨があればお教えください。
効果音もどんなのがよいかわからないので、適当に決めています。音ファイルはご自分で用意してください（35行目）。文字描画インターバルは0.6秒に設定しているので、それ以内の長さの音源が推奨です。あと、ブラウザがオーディオの自動再生をデフォルトでオフにしていると思うので、それは解除します。
アイキャッチ文字列は次の5つ用意しました。お好きなのを選んでください。もちろん、他の文字列を組み込むのも大歓迎です。
let eyecatches = {
if: 'if(){',
name: '.name',
arrow: '↓↘→＋☆',
add: '1+1=2'
}
では、コード。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<style>
body.kobayashi {
background-color: #FDE93E;
}
div.screen {
width: 640px;
height: 360px;
position: relative;
/* border-style: dotted; */ /* 640x360 の枠。デバッグ用 */
border-color: gray;
}
p.eyecatch {
font-size: 62px;
font-family: FranklinGothicBook, sans-serif;
font-weight: bold;
letter-spacing: 43px;
margin: 0 0 0 0;
padding: 0 0 0 0;
position: absolute;
top: 138px;
left: 170px;
}
</style>
</head>
<body class="kobayashi">
<div class="screen">
<p class="eyecatch" id="eyecatch"></p>
</div>
<script>
let sound = new Audio('beep-6-96243.mp3');
let eyecatches = {
if: 'if(){',
name: '.name',
arrow: '↓↘→＋☆',
add: '1+1=2'
}
let pElement = document.getElementById('eyecatch');
let text = eyecatches['if']; /* Change me */
let letters = text.split('');
console.log(letters);
let counter = 0;
let timerId = setInterval(function() {
sound.currentTime = 0;
sound.play();
let sliced = letters.slice(0, counter+1).join('');
pElement.innerHTML = sliced;
counter ++;
if (counter >= text.length)
clearInterval(timerId);
}, 600); // 5文字で3秒くらい
</script>
</body></html>
またつまらぬものを書いてしまった。