Leap Motion の JavaScriptライブラリ（leap.js）のプラグイン「leap-plugins.js」を試す： Hand Entry のお試し（p5.js Web Editor上で）

以下の記事で書いた JavaScript で Leap Motion を扱う話の続きの記事です。
この記事では、ライブラリの「leap.js」と合わせて、プラグインを使ってみるというのをやっていきます。

●バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用） – Qiita
　https://qiita.com/youtoy/items/efc4da1feee26186f565

## leap.js について
Leap Motion用の JavaScriptライブラリを使った話は、冒頭で掲載した記事を書いた時より前に書いた、以下の記事で扱ったことがありました。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う – Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

この記事では詳細は割愛しますが、以下に公式のリポジトリと

Markdownエディタ Webアプリを作成する

# 書籍

バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用）

最近だと、昨年末に以下の記事を書いたりして扱った「Leap Motion」の話題です。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う – Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

↓ Leap Motion はこちら

そして上記の記事と同じで、JavaScript で扱う話です。しかし、今回の内容が上記の記事と違っている点は公式ライブラリ「leap.js」を利用せずに情報を取得する部分です。

## Leap Motion の情報を WebSocket で取得するための接続先
冒頭の記事でも少し触れていた部分があったのですが、PC向けの Leap Motion用

saveAsJSONL.js【JSON Lines】

“`javascript
function saveAsJSONL(data, name=new Date().toLocaleString(‘sv’).replace(‘ ‘,’T’).replaceAll(‘:’,’_’)+’.jsonl’) {
const a = document.createElement(‘a’)
a.download = name
a.href = URL.createObjectURL(new Blob([data.map(JSON.stringify).join(‘\n’)], {type: ‘application/jsonlines+json’}))
a.click()
}
“`
### JavaScriptのデータを保存する
Usage
“`javascript
saveAsJSONL([‘pen’, ‘pineapple’, ‘apple’, ‘pen’])

// ファイル名を指定
saveAsJSONL([‘pen’, ‘pineapple’, ‘apple’, ‘pen’], ‘hoge.jsonl’)
“`

!

Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【ソースコード編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連）

以下の記事で書いていた仕組みについて、「【概要編】」では　ソースコードに関する部分に触れていなかったため、この記事ではその辺りの話を書いていきます。

●#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可） – Qiita
　https://qiita.com/youtoy/items/db6d34a9985eb182042f

## 動作している様子の再掲
「【概要編】」の記事でも掲載していた、この記事で扱う仕組みが動いている時の様子の動画です。

公式版 #Scratch （https://t.co/0fqczChNyX）で作成したプロジェクトと、公式の #toioDo で作成したプロジェクトの間をつないでシンクロさせる（ちょっと遅延が発生しますが…）、
という少し変わった試作をやってみました。

思いつきで作ってみたネタです。#toio pic.twitter.com/guFrSSHScO

— you (@youtoy) May 3, 2022

構成の話などは、「[【概要編】の記事](https://qiita.com/youtoy/items/db6d34a9985eb182042f)」をご参照ください。　

## 準備手順
この後に、いくつかのプログラムのソースコード等が出てくるのですが、それらをどのような順番で動作させていく

【ajax】”CORSポリシーによってブロックされています” によりデータが取得できない

# １．実現したいこと

jQuery + Ajax で YouTube Data APIを使用し、特定のキーワードで検索を行い、動画のサムネイル、タイトル、URLを取得したい。
そのためにボタンを押した際、下記コードでサーバーにリクエストを送信した。

“`javascript
$button.on(“click”, function () {
let url = “https://www.googleapis.com/youtube/v3/search”;
url += “?key=” + KEY;
url += “&part=snippet”;
url += “&type=video”;
url += “&q=%20筋トレ%20ジム” + $(this).data(“parts”);
url += “&maxResults=6”;
$.ajax({
url: url,
type: “GET”,
dataType: “json”,
})
.done(function (

Python の input( ) と同様の挙動を JavaScript, Node.js で再現する

私と同じ悩みを持つ方のために、共有させていただきます。
以下のQAにてご指導頂いた内容ですので、経緯等は以下のページを参照ください。

https://qiita.com/watanabe-tsubasa/questions/07131f97fa0a48897ab2#answer-7d6b619e11e5876f6023

## 動作

実行すると数字１を聞かれます（今回は10を入力）。

入力すると数字2を聞かれます（今回は20を入力）。

【個人開発】ディベート掲示板作ってみた！

初めに

この度
Avis
というwebアプリを開発しました。
ディベートに特化したSNSです。
本日も叫ばれる様々な社会問題（SDGsなど）、人それぞれが抱える人生の悩み、そして些細な日常の言い争いまで…様々な論題についてユーザー参加型のディベートを行い、何が正しいのかを模索してくサービスです。

https://avis.city/slist.php?mode=sdgs

Avisの機能

ディベート作成

ユーザーによりディベートを作成することができます。
作成されたディベートは東軍西軍いずれかが目標ポイント（250or500）に到達するとプログラムにより勝敗が確定します。

![senkyou.png](https://qiita-image-store.s3.ap-northea

発した言葉の中にGとWがあれば祝福してくれるブラウザアプリをブラウザのみで作ってみた

## 作ったもの

#protoout #gw 発した言葉の中

変数の巻き上げ｜ハンズオン

# 変数の巻き上げ
JavaScriptでは変数の巻き上げが裏で起こっています。
以下のソースを実行してみると

“`javascript
console.log(a);
var a = 20;
“`

エラーにならずundefinedが返ってきます。
これは定義前のaという変数を参照しているからです。

裏側では以下のように変換されて解釈されています。

“`javascript
var a;
console.log(a);
a = 20;
“`

var aがスコープの先頭で生成されています。
初期値を設定しないvar変数の値はundefinedですので納得な結果ですね。
ただこのようにアバウトに書いてもエラーで停止せず動作してしまうということは
バグを生みやすいということにもつながります。

# 巻き上げはconstでもletでも起こっている
巻き上げはconstでもletでも実は起こっています。
ただvarとは一点違いがあります。それは初期化のタイミングです。
varは巻き上げが発生した時点でundefinedが代入され初期化されています。
ですから前述のようにunde

Twitchのチャットを翻訳するChrome拡張を作ってみた

Twitchの英語チャットを日本語に自動翻訳するChrome拡張を作ってみました。
「作ってみた」程度のレベルなので、きちんと翻訳したい方は回れ右してください。
## 概要
* Chrome Extension Manifest V3で開発
* Google App Script経由でGoogle Translation APIを利用
* Mutation observerでDOM要素の変更を監視、チャットが追加されたら自動で翻訳

## リポジトリ
[mimonelu/twitch-chat-translator](https://github.com/mimonelu/twitch-chat-translator)

## 詳細
### 翻訳APIの準備
まずは翻訳APIです。当然のようにGoogle Translation APIを使いますが、ご存

Alfred Workflowで煩わしいショートカットを辞書的に使う

# TL;DR
Alfred のPowerpack（47ドル）で使うことができるWorkflowで、Linuxコマンド（Unixコマンド、bashコマンド）を辞書的に管理する方法を紹介。

覚えにくいLinuxコマンドの辞書的管理↓↓↓

commandを押下しながらクリックするとオプションも表示される

クリップボードにコマンドがコピーされている。

# Alfred Workflowとは
Mac OSで使用可能なランチャーアプリ
![image.png](https://qiita-image-st

ReactのTutorialをやってみよう

今回はReactのチュートリアルをやっていこうと思います。
# そもそもReactって何？
ReactはwebアプリのUI(ユーザーインターフェイス)を効率的に開発できる、Facebookが開発したオープンソースのJavaScriptライブラリ(便利な機能のひとまとまりにしたもの)です。

ReactはJavaScriptの中にHTMLタグをじかに埋め込むことができる**JSX記法**という独自の書き方を採用しています。

ReactはUIを **コンポーネント(部品)** 化して、コンポーネントを組み合わせてページを構成することができ、共通のUIを使いたい時などに役立ちます。

# 開発環境
– ubuntu (20.04)
– node.js (v 16.14.2)
– npm (v 8.5.0)
– React (v 18.0.0)

# Reactの開発環境
Reactのチュートリアルでは、CodePenというサービスを使って開発をしているんですが、今回はローカル環境でやってみたいと思います。

そのため、**Node.js** と **VScode**の環境が必要になり

ゲーム開始ボタンがスペースキーに反応しないように設定

タイピングゲームを製作中。
スタートボタンを押して、キーを打つとゲームが開始するが

ボタンを押した後、スペースキーに反応してしまう為（スペースキーを押すたびに開始ボタンが押される挙動になってしまう）
こちらの問題を解消するための設定を施す。

“`ruby
window.document.onkeydown = function(evt){
if ((evt.which == 32)
){ evt.which = null;
return false;}
}
“`

任意の場所に上記のように記述すると反応しなくなった！
且つ出題されたタイピングフレーズに対しては反応してくれたので、タイピングゲームと

#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可）

デフォルトでは外部と自由に通信をする機能がない
　「公式版の Scratch（ https://scratch.mit.edu/ ）」
や、
　「toio Do（ https://toio.github.io/toio-visual-programming/beta/?category=do ）」
を、以下のようにリアルタイム通信で連動させることができたりする仕組みの話を、この記事で取り扱います。詳細は続きの記事で書こうと思っていて、今回は概要を記事化してみます。

公式版 #Scratch （https://t.co/0fqczChNyX）で作成したプロジェクトと、公式の #toioDo で作成したプロジェクトの間をつないでシンクロさせる（ちょっと遅延が発生しますが…）、
という少し変わった試作をやってみました。

思いつきで作ってみたネタです。#toio pic.twitter.com/guFrSSHScO

— you (@youtoy) May 3, 2022

今回の仕組みに関係してくる主なキーワードは、以下のとおりです。

– ブラウザの開発者ツール（の中のコンソール）
– JavaScript（Node.js を使うもの、ブラウザ上で動かすバージョン）
– リアルタイム通信（WebSocket のサーバー・クライアント）

ちなみに、1つ前に書いていた以下の記事の内容も、今回の話に少し関連していたりします。

●#Scratch 3.0 のキー入力イベントをブラウザの

Google Apps Script (GAS) で楽天カードのお知らせメールをスプレッドシートに自動反映してみた

## やろうと思ったきっかけ
生活費は夫婦でほとんど折半しているのですが、固定費とか雑費とかを支払う際に使用する家族共有カードを楽天カードで作成してました。

毎月お互い決めている一定金額を入金し、さらに雑費分はその都度入れてたつもりだったんですけど、ふと残額を確かめてみると

「あれ！？結構余裕持って入れてたつもりなのに結構ギリギリになってるやん、、！」

という事態に遭遇しました。
確かめてみたところ雑費も折半しているのですが、とりあえず買っちゃってお金は後から振り込む〜みたいな感じでそのまま忘れるケースがお互い多々あり、それがちりつもでギリギリになっていたみたいです。

これちょっと改善せないかんな〜と思い、とりあえずカード使用したらスプレッドシートに記載していこう！ということになった訳ですが、そもそも毎回毎回書き込むのも面倒すぎるから自動化できないかな〜と考え、ググってみるとGoogle Apps Scriptとかいうやつがあることを知り試しにつくってみるか〜となったのでした。
(前置き長くてすみません笑)

## Google Apps Script の始め方
スプレッドシー

【Javascript】〇〇実行の前にalert()が先に表示されてしまう

javascriptって上から順番に実行されるのでは？
でも実際にalertの前に書いているコードがalert表示後にしか実行されない、何故だか分からない、、

まずは下記コードを試して頂ければと思います。


alertを1秒遅らせるだけで回避できました。

調べて見る限り、alert云々の優先順位ではなくjavascript > HTML renderという優先順位になっているらしいで

JavaScript初心者に伝えたい、一番最初に守って欲しい3つのこと

## 誰に読んで欲しいか

– 初学者を指導するにあたり、どこまで拘って指導したらいいか、最低限守るべきラインに悩む人
– JavaScriptを学び始め、少しキレイなコードを目指したい人

## なぜ記事を書いたか

会社の初級エンジニアにフロントエンドの指導をしている時、指摘したいことは多くあるけどどこまで細かく指摘したらいいのか、、、悩みに悩みました。そこで、“`チョット難しいけど絶対意識して欲しいし、それだけで品質が変わること“`を自分なりに振り返ったのでJavaScriptをどうやって学習しようか悩む人や指導の仕方で悩む人の一助になればと思い纏めました。

## 本題

### 1. 変数宣言でconst以外は使わない

JavaScriptの変数宣言にはvar, let, constが存在します。
極力constを使うことは変数の意味が一意に決まり、全ての開発メンバーがプログラムを理解することに役立ちます。
２番以降の守るべきことを実践していくと、自ずとconstだけで通用するようになります。

– varは絶対に使わないでください。グローバルスコープが汚れてしまいます

JavaScriptでAzure Table Storageを操作する

JavaScriptでAzure Table Storageを使用するには、2022年5月現在、[**@azure/data-tables**](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/tables/data-tables)というライブラリを使用します。（従来は、[**azure-storage**](https://github.com/Azure/azure-storage-node)というライブラリを使用していましたが、現在は非推奨となっています。）

# 利用可能な環境

[GitHub](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/tables/data-tables#prerequisites)には、

> Currently supported environments:
> * LTS versions of Node.js
> * Latest versions of Safari, Chrome, Edge and Firefo

【jQuery】vTickerで垂直スクロールのティッカー作成

# はじめに
「[このwebサイト](https://elderaffairs.org/)のように自動縦スライドをヘッダーに入れたい！」と、Google先生に尋ねまわったところ、jQuaryプラグイン「vTicker」で実装可能なことが判明。
あわせてこのような表示形式をティッカーと呼ぶことも判明（以下引用参照）。
さっそく設定してみました。

#### ティッカーとは 　
>特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。
ティッカーの代表的な例としては、新幹線の車内や看板、証券取引所などにある電光掲示板がある。Webページにおいても、左右に文字の流れるティッカー表示が用いられる場合が珍しくない。
（引用元：[IT用語辞典バイナリ](https://www.sophia-it.com/content/%E3%83%86%E3%82%A3%E3%83%83%E3%82%AB%E3%83%BC)）

# 基本設定
### vTickerをGith