この記事は クソアプリ Advent Calendar 2025 の18日目です。
まずは、こちらのデモをご覧ください。
これはなに？
テキストが16進数に変換され、色が列挙されるアプリです。
下記リンクから実際にお試しいただけます！
なぜ作ったのか？
文字列を色に変換したら、何となく楽しそうだと思ったので……
深い理由なし！
何の役にも立たない／何も生み出さないアプリでいいじゃないか！！
クソアプリ万歳！！！🙌
仕様・処理の流れ
- 入力として任意の文字列を受け取る
- 各文字をUTF-8でエンコードしてバイト列として扱う
- UTF-8バイト列を16進数に変換する（変化ないはずなので不要なことに気づいた）
- できあがった16進数たちを、先頭から6個区切りにし、HEXカラーコードとして扱う
といった流れになっています。
具体例を少々。
# 「あ」が入力された場合
e3 81 82
e38182
#e38182
# 「あ0baい」が入力された場合
e3 81 82 30 62 e3 81 84
e38182 3062e3 8184
#e38182 #3062e3
上記2つ目の例で、余った 8184 は使われずに切り捨てられています。
技術面
IME変換を確定しないと画面に色が反映されない問題に遭遇しました。
下記のように、入力確定を押すまでは色が出ないため、少し使い心地が悪かったのです。
これは、IMEイベントの（？） compositionupdate を拾ってあげることで改善できました。
<script setup>
const input = ref("こんにちは、世界！Hello, World!你好世界！👏");
function handleInput(e) {
input.value = e.target.value;
}
function handleCompositionUpdate(e) {
input.value = e.target.value;
}
</script>
<template>
<!-- 略 -->
<textarea
:value="input"
@input="handleInput"
@compositionupdate="handleCompositionUpdate"
/>
<!-- 略 -->
</template>
余談: 文字種別ごとに色の傾向が存在する面白さ
UTF-8の仕様上、近い文字種別は、値も似たものになります。
例えば、E38181 から E3829F までに属するひらがなのみで文章を書くと、下記のように似通った色ばかりになります。
半角英数記号のみで構成された文字列だと、今度は黒っぽい色になりますね。
ちなみに、ひらがな文字列群に改行を含めると、だいぶ色味が変わって面白いです。
さいごに
類似アプリありそう〜〜〜！
でも、勢いで開発したクソアプリなので真面目に調査してません！！
似て非なるものとして「文字列をある1色に変換するライブラリ」である https://github.com/zenozeng/color-hash という良さげなものは見つけました。
以上！
おそらく役には立たないですが、触っていて楽しめそうなクソアプリでした。