追記
-
2024/5/8
- 長押しするとガイドが突破するとのコメントをいただいたので修正とその原因を追記
#動機
- Vue3系とCompositon APIの練習
- モールスの受信側はアプリやwebであったが、送信側は自分が思ってるようのものがなかったため
-
・と-のボタンが分かれているものはあったが、一つのボタンを押す長さで・と-を出し分けたかった
-
つくったもの・デモ
ここから遊べます→https://suechon.github.io/learn_morse_code/
-
PC版
SPACEキーの短押し長押しで動きます -
携帯版
ボタンの短押し長押しで動きます
環境
- Vue3
- Vuetify3
- Vite
技術的な話
携帯のタッチ判定
vueでは@{event}でイベント発火できるのでそれを使って実装してましたが、これだとラグがあったので、jsのeventListener使いました。
- ダメだったほう
<button
v-wave
class="btn-circle"
@touchstart="btnPush"
@touchend="btnUp">
<v-icon size="x-large">mdi-waveform</v-icon>
</button>
- よかったほう
<script setpu>
const touch = document.getElementsByClassName("btn-circle");
onMounted(() => {
touch.addEventListener("touchstart", () => {
// 押したときの処置
});
touch.addEventListener("touchend", () => {
// 離したときの処理
});
}
</script>
<template>
<button v-wave class="btn-circle">
<v-icon size="x-large">mdi-waveform</v-icon>
</button>
</template>
短(ドット)・長(ダッシュ)の判定
何ミリ秒以上押したら長で判定するよう判定してますが、気分や慣れによって判定が微妙なときがありました
なので長短判定のガイドをいれて思ったように判定されないストレスを軽減させました
-
ゲージが白の時に離せば短
-
ゲージが青の時に離せば長
Github Pagesへのデプロイ
Vue3ではGithub Pagesへのリリース初めてだったのでこちらを参考にしました。
大変簡単でよかったです
Vite + Vue3のプロジェクトをGithub Pagesを使って5分でデプロイする
感想
Vue3系とCompositon APIの練習目的もあったのでなんとなく使えるようになってよかったです
小さいものだと作りながらコンポーネント分けるのがめんどくさいな～～とおもってだらだら書いてるので気が向いたら清書したいです
追記
20240508:長押しするとガイドが突破してしまう
原因
- setIntervalを複数起動していた
キーを押す→setIntervalが呼ばれる→キーを離す→clearIntervalが呼ばれるを想定していたが、キーを速く押すなどするとclearIntervalが呼ばれる前にsetIntervalが起動し、多重に実行されていた - 複数起動しているときclearIntervalをしても一番最近起動したsetIntervalにのみ適用される
そのため、最初に起動したsetIntervalは残り続け、ガイドの限界を突破していた
修正
setIntervalを実行する前にclearIntervalを行って2重での起動を行わないようにする
const pushCommon = () => {
// 2重で起動しないようにする
+ clearInterval(interval.value);
interval.value = setInterval(() => {
if (barWidth.value >= 200) {
clearInterval(interval.value);
return;
}
bar.value.classList.remove("blue");
barWidth.value += 2;
bar.value.style.width = barWidth.value + "px";
if (barWidth.value >= blueBarSize) {
bar.value.classList.add("blue");
}
}, 1);
};
参考にしたサイト
ITガイド:JavaScript: タイマーの多重起動を防止する方法
Qiita:clearIntervalが効かない時