カメリアの記事

意味があることやないことを綴ります

ウェブ開典占い

ウェブ開典占いを作りました。サービスとしては公開はしていません。ウェブ開典占いは、辞書を適当に開いて適当に指して語を得る占いです。寝転んだままやりたかったので作りました。

開典占いには辞書が必要です。フリーで開くことのできる辞書が見つからなかったので、辞書は「 google辞書・グーグル日本語入力に導入したい辞書データ集」で購入しました。国語辞典が 700 円です。今後フリーの辞書が見つかったら使用できるウェブサービスとして公開するつもりです。見つかったらね。

コードはしたのとおりです。

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  text-align: center;
}
#panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height :200px;
  margin: auto;
  overflow-x: visible;
}
#word {
  font-size: 32px;
}
#button {
  width: 200px;
  height: 80px;
  font-size: 32px;
  letter-spacing: 0.2em;
  line-height: 80px;
}
.hidden {
  display: none;
}
@media (prefers-color-scheme: dark) {
  body {
    color: #f1eee9;
    background-color: #1e1f1c;
  }
  #button {
    color: #f1eee9;
    background-color: #41443a;
    border-color: #30312c;
  }
}
</style>
<script>
loadDic()
.then(r => {
  button.classList.remove("hidden")
  update(r)
  button.onclick = () => {
    update(r)
  }
})
async function loadDic() {
  return (await fetch("japanese-dic.json")).json()
}
function update(src) {
  word.innerText = src[Math.round(Math.random() * (src.length))]
}
</script>
<main id="panel">
  <p id="word"></p>
  <button id="button" class="hidden">更新</button>
</main>

最新のコードは GitHub を参照してください。

github.com