JavaScript関連のことを調べてみた2022年04月25日

IoT機器が手に入ったので推しを動かしてみた

## IoTって面白い
この度、obnizというIoT機器が手に入ったので色々触ってみました。
これまで自分でコードを書いたりしても画面の中で動作するのを見るのみだったのですが、IoTは現実世界で自分の作ったものが動作しているのを見ることができるので、その点が本当に面白いなと感じました。

## 推しを動かしてみたい
obnizには色々なセンサーやモーター、LEDといったパーツがありますが、これらの触り方を一通り知って真っ先に思ったことがあります。

**「推しを動かしてみたい」**
…はい。何を言っているか分からない方もいらっしゃると思いますが、obnizを使えば光と音と動きを簡単に制御できる、ということは推しキャラクターのフィギュアやアクリルスタント(以下、アクスタ)を使ってライブを再現できるのではないかと思い至ったわけです。

## 実際にやってみた
思い立ったら後は行動するのみ。という訳で実際に作ったものが以下になります。

自分が電子工作の部品と最低限の知識を得て真っ先にやりたかったこと、それは「推しを動かす」ことである
#obniz
#protoout pic.twitter.com/8ziy2GerTF

— KendoLab (@kelab_8) April 25, 2022

「ライブを再現」ということで、ペンライトの

「いま何時？」「ReactとTypeScriptで時計を作っといたで」

というわけで、下記のように現在時刻をアナログ・デジタルの両方で表示する時計を作りました。特段、スゴイことを書いてあることではありませんのご承知おきください。


## 利用技術
– emotion/react 11.8.2
– emotion/styled 11.8.1
– react 17.0.2
– typescript 4.6.3
– dayjs 1.11.0

## リンク先について
[GitHub](https://github.com/Naughty1029/React-Clock)でソースを公開しています。issue/プルリク募集しています！
またデモについては[こちら](https://react-clock.cocoroworks.net/)で公開しています。

## ソースコードについて
とくに特別なところもないですが、自分

Javascript スワイプ検出

javascriptバニラで十分なプログラムだけど、スワイプ入力したいと言われた時に書いたコード。
何かしらライブラリとかフレームワーク使う時には、たいがい含まれてるんじゃないかな…しらんけど。

# スワイプ検出する君

* 検出するエレメントを指定してもらう。
* そのエレメントに対するtouch系のイベント ( touchstart, touchend, touchmove, touchcancel ) を見張る。
* この動きってスワイプ？ と思ったら、swipe.xxx というイベントを作って発生させる。
* マルチタッチとか気にしない

“`javascript
// スワイプ検出
const SwipeTracker = function(elem, direction=””) {

let x = 0;
let y = 0;
let target = null;
let startX = 0;
let startY = 0;
let moveX = 0;
let moveY = 0;
le

距離センサを使ってポケモンをゲットしてみた

## ポケモンを3次元でゲットしてみたい
前回の投稿を見ていただいた方はお気づきだろうが今回もポケモンに関する記事だ。前回はクイズに正解をするとポケモンを捕まえられるという仕様になっていたのだが、 **『現実世界でポケモンを捕まえたい！』** という小学生からの夢を実現するために、現実世界でポケモンを捕まえた気分になれるようなプロトタイプを作成した。

https://qiita.com/kosuke0517lab/items/7fbe11c337ea3e8c7d16

## 遊び方
– 『ポケモン』とLINEへ送信すると、捕まえる対象のポケモンの画像がLINEへ送られてくる。
– モンスターボール（？）をポケモンに向けて投げる。
– 『ゲーム』とLINEへ送信をすると、距離センサでモンスターボールとの距離を計測する。
　 　3~5cmの間にモンスターボールが止まればポケモンをゲットできる。
– ポケモンがゲットできた際には『やった～！　○○を捕まえた！』とLINEへ送信。

## どんなプロトタイプ？
まずは下記の動画を見ていただきたい。

https://youtu.be/9ES0

[JavaScript]thisのスコープ理解していない人がいるわけない。（私は知らなかった）

# はじめに

画像アップロード機能を実装していたときにスコープに苦しめられた話です。

FileReaderやImageオブジェクトを使って苦手な非同期処理をしていたので、ハマっている原因が整理できずに泥沼化してました。。。

# できごと

## やりたいこと

– ``で画像選択時にリアルタイムで選択した画像が表示される
– 最終的に選択した画像のbase64の値をサーバーに送信したいので、ファイルが選択されたらcanvas→blob→base64の流れでデータを変換する

## 参考にした記事

[‘input type=file’から’canvas’への転写]([https://qiita.com/_shimizu/items/7df9add540984eba8786](https://qiita.com/_shimizu/items/7df9add540984eba8786))

ほぼこちらのソースコードをコピーで実装

## ソースコード

upload-component.vue

“`vue