技術とエンタメと、その他・・・

主に、技術ネタ、エンタメ系のネタを書いていく予定です。また、自分が参加したイベントに関する記事も投稿予定。

技術雑誌向けに Node-RED と Teachable Machine に関する記事を執筆した話（2020年7月ごろ）

記事を書いた雑誌について

以下のツイートをしていた、月刊I/O 2020年8月号向けに技術記事（4ページ）を執筆した話について、関連する話や余談を含めて残した記録です。

公式の書籍情報ページはこちら
「http://www.kohgakusha.co.jp/books/detail/4615」
になります。

技術系のプライベートの活動について

プライベートの活動で、技術コミュニティを主催・運営したり、イベントでの LT・セッション登壇をやったり（※ ある時期以降のスライドは主に Speaker Deck にて）、オンラインで個人的に技術記事を書いたり（※ 主に Qiita にて）、あれこれやっていた中でいただいた話でした。

この前に、企業さんからの話・紙媒体の執筆という方向では、Seeed K.K. エンジニアブログに Seeedさんの製品を使った micro:bit（マイクロビット）に関する初心者向けの記事を書く話をいただいたり、有志で技術同人誌を作って技術書典というイベントに出したり（自分の記事の内容は micro:bit とロボットカーの話）、その紙媒体の本を Amazonでも電子版で出す、というようなことをやった話はあったのですが、技術雑誌の記事を書くという話はこの時が初めてでした。

リレー記事と執筆の話のきっかけ

この記事執筆の話の背景として、元々 Node-RED に関するリレー記事の企画が行われている流れがあり、それに関して「リレー記事の 1つを Teachable Machine 関連で書かないか？」という話を Tanaka Seigo さん（@1ft_seabass さん） からいただいて、記事を寄稿させていただくこととなったものでした。

この記事執筆の話をいただいたあたりの時点では、Teachable Machine の画像を対象にした機械学習よりも、音を対象にした機械学習をよく使っていました。例えば、その活用先としてはつくばで開催された Mini Maker Faire での展示作品がありました（余談ですが、この作品に手を加えたものは、同年開催の Maker Faire Tokyo 2020 にもブース出展して展示したりもしました）。

リレー記事で書いた内容など

自分が記事に書いた内容としては、フロー型のビジュアルプログラミング環境である Node-RED と、ブラウザ上で簡単に機械学習モデルが作れて出力等もできる Googleさん提供の Teachable Machine を組み合わせる、という話でした。

記事執筆、記事のスペースの制約がある中でコンパクトに内容を伝える文章・画像といった内容を試行錯誤したり、誌面では載せきれない・載せられない内容をどうするか考えたり（他のリレー記事執筆者の方から GitHub にリポジトリを作って、そこに置くという方法をアドバイスいただきました）、といったようなことをやりつつ進めていきました。

なお、誌面のスペースの話に関しては、当初は 3ページ分の内容を提出したのに紙面用にレイアウトしなおしていただいた段階で 4ページ分に増えるという流れがあって、最終的に 4ページの記事となりました（Googleドキュメントで提出したのですが、3ページ分いっぱいの分量で出すのではなく、少なめで出すのが良いという話を後で知ったりして...）。

元の記事データが誌面用のレイアウトになって送られてきた時も感慨深いものがありましたが（内容チェック用に電子版のデータを送っていただく流れがあった）、冒頭に掲載したツイートの実際の雑誌が手元に届いた時は、感慨もひとしおでした。

執筆後の余談

この記事を書いた時点で Teachable Machine は英語のページのみだったので、記事用にキャプチャした画像（＋ページのボタン・ラベルの表記等について触れた本文）は英語になっていたのですが、「記事を出版社宛に出した後のわりと早いタイミングで日本語化されたページが登場」なんてことがありました...

有志で技術同人誌を出した話についても、記事を印刷用に出した後の割と早いタイミングで、英語表記しかなかったプログラム用ブロックの日本語化が行われる、ということがあったりして...

#toio の #Doコン 用に作った #toioDo の作品のコードについて

はじめに

この記事は、ロボットトイ「toio」に関するコンテストである「Do!コン」 に関する話です。そのコンテストに作品を出したのですが、出した作品のコードを以下で説明していきます。

作品の関連リンク

●toioドミノボウリング | ProtoPedia
　https://protopedia.net/prototype/2248

●toioドミノボウリング（ #toio #Doコン #toioDo ） - YouTube
　https://www.youtube.com/watch?v=CHE4_lzTbZE

出した作品の概要

冒頭に書いたコンテストに出した作品は「toioドミノボウリング」という名前のもので、全体の動作などは以下の動画のとおりです。

www.youtube.com

作品名のとおり「toio を動かして ボウリングのピンに見立てたドミノを倒す」というゲームになります。

f:id:youtoy:20210510020745j:plain

操作用の UI について

この作品を実行・操作するための UI は「緑の旗」と「ステージ上に置かれたスプライト 1つ」です。

f:id:youtoy:20210511002248j:plain

出した作品のコード（全体）

まず、コード全体は以下となります。

f:id:youtoy:20210510235401p:plain

以下では、作ったコードを 6つのまとまりに分けて掲載します。
6つのうち 5つはスプライトに、残り 1つは背景にコードを書いています。

スプライト用

f:id:youtoy:20210510232153p:plain

f:id:youtoy:20210510232206p:plain

f:id:youtoy:20210510232218p:plain

f:id:youtoy:20210510232229p:plain

f:id:youtoy:20210510232240p:plain

背景用

f:id:youtoy:20210510232626p:plain

実装した内容

以下に、実装した処理の概要を記載したコードのまとまり 6つの画像を掲載します。

まとまり1

f:id:youtoy:20210510234703p:plain

ここでポイントになる部分は、以下のとおりです。

  • スタート後、初期位置へ自動で動いていく（邪魔にならないよう、端のほうを動くよう導線を設定）
  • スタート時に、開始が分かりやすいように動きや声で知らせるようにしている
  • 初期位置を決めるゲームモードになっている間が分かりやすいように BGM を鳴らしている

なお、これ以降も含めて BGM・効果音関連の処理は、背景の部分にコードを書いています。

まとまり2

f:id:youtoy:20210511002838p:plain

ここでポイントになる部分は、以下のとおりです。

  • 角度を決めるゲームモードになっている間が分かりやすいように BGM を鳴らしている（先ほどの位置決めの時と異なる BGM を選択）
  • toio がいきなり外に向かって飛び出すような角度にならないよう、toio の位置を基準にして取り得る向きの範囲に制約を加えている（アークタンジェントを使った 2点間の角度計算を利用）
  • 向きとして取り得る角度の最小と最大の間を直接変化させるのではなく、角度を少しずつ変化させるようにし、ある程度は角度を狙ったところに止められるようにした

まとまり3

f:id:youtoy:20210510234736p:plain

ここでポイントになる部分は、以下のとおりです。

  • マットの外に出て動き続ける、ということがないよう、少し余裕をもった所定の範囲内で動きが止まるように制約をつけた
  • タイヤの速さは、基準となる速さと補正値の和をとるようにして、この後に出てくる「toio がいる位置によって移動する向きが変わる仕組み」を取り込みやすくした

まとまり4

f:id:youtoy:20210510234749p:plain

ここでポイントになる部分は、以下のとおりです。

  • 動き出すタイミングが分かりやすいよう、声で知らせるようにした
  • 位置決め・角度決めのゲームモードからドミノを倒すモードに変わったことが分かりやすいよう、BGM を鳴らすようにした（位置決め・角度決めと異なるもの）
  • 「toio がいる位置によって移動する向きが変わる仕組み」について、仕組みを複数のパターンから切り替えられるよう、ブロック定義の入れ替えで仕組みの変更を行えるようにした
  • 移動終了が分かりやすいように、効果音や動きを入れた

まとまり5

f:id:youtoy:20210510234802p:plain

ここでポイントになる部分は、以下のとおりです。

  • 「toio がいる位置によって移動する向きが変わる仕組み」を実装する際に、位置指定が複雑になりすぎないよう、座標を使うのではなくマスの番号を利用する仕組みにした
  • 上記の仕組みで複数のマスをまとめて指定できるように、マスの列の範囲指定を使ったり、 単純な範囲指定より複雑なパターンを使えるよう、行と列の和が偶数であるかどうかを判定する処理を使った（複数の斜め方向の列をまとめて指定するパターンを使った）

なお、この部分はユーザ自身で改造してほしい、改造ポイントと想定しています。

まとまり6

f:id:youtoy:20210510234815p:plain

ここでポイントになる部分は、以下のとおりです。

  • BGM の処理を toio の処理と並列で動かせるよう、メッセージを送る仕組みを使った
  • 複数の BGM や 効果音が重複して鳴らないよう、またうまく切り替わるよう、スクリプトの停止処理を組み合わせて仕組みを作った

まとめ

以上が、今回の作品でスプライト・背景のそれぞれに書いたコードと、その説明です。

#toio に関するノウハウのメモと余談（2021/5/4開催のもくもく会でのメモ）【 #GWアドベントカレンダー 2021/5/5 】

この記事は、2021年の GWのアドベントカレンダー 5/5 の分の記事です。

はじめに

toio の非公式のユーザコミュニティで、2021年5月4日にもくもく会を開催しました。
そのイベント中に行われた質問・回答の内容や情報共有された内容について、一部ピックアップしてメモしたのが、今回の記事の内容です。

toio の簡易マットを平らにする

「toio コア キューブ」（単体）に付属している厚紙ではない簡易プレイマットなど、折りたたまれているものを拡げて使う形のプレイマットがあります。これを拡げて使う際、「拡げたマットの折り目に toio が引っかかるが何か対策がないか？」という質問が出ていました。

それについて、「透明で薄いプラスチック製などのカードケースで、サイズが A3 のもので挟み込んで使っている」という話が出て、具体的に商品のリンクが共有されていたので以下に記載します。この 2つがイベント内で共有されていました。

●Amazon | プラス SFカードケース A3 PC-003クリア 43-003 | 文房具・オフィス用品 | 文房具・オフィス用品
　https://www.amazon.co.jp/dp/B003DXWD4C

●サンデーPET | アクリサンデー株式会社 　https://www.acrysunday.co.jp/product/diy-pla/diy-pet/266/

その後、100円ショップで入手できて利用できたものがあった、という情報も出ていました。

ビジュアルプログラミングでのランプの制御関連

ランプをつけてから消すまでの時間を、ランプをつけた後に決める

これは、参加者の方から出た質問に関する内容です。
「toio のビジュアルプログラミングでは、ランプをつける処理は最初に秒数を指定する必要があるが、何か別の動作時間が不定の処理があって、その別の処理が始まってから終わるまでの間だけランプをつけるようなことができないか？」というものです。

つまり、「実行してみてから処理が3秒かかるかもしれないし、5秒かかるかもしれない処理（処理を実行した後に、結果的に時間が定まるもの）」があり、「ランプをつける時点では不定の時間の間だけ、ランプが点灯するようにする」ということになります。

これを解決するための 1つの方法が、「並列処理（メッセージを送る機能）とランプを消す処理の組み合わせ」になります。動きとしては「処理時間不定のとある処理が終わらないくらいの時間ランプをつける ＋ 処理時間不定の処理が終わったらランプを消す処理を実行する」というもので、ブロックで組むと以下となります。

f:id:youtoy:20210504152512j:plain

この例の「1秒待つ」の部分は、本来は「実行してみてから処理時間が定まる処理（そして、9秒以内には終わると見込まれるもの）」が入る想定の部分です。これにより、当初設定している 9秒より短い時間で、かつ、何らか別の処理の時間が終わったタイミングに合わせてランプが消灯される、という動きになります。

もし、この処理時間不定の処理がどれくらいで終わるか読めないという場合は、以下のようにすると良いかもしれません（どうやら、ランプをつける処理は、連続して実行すると処理と処理の間で消灯するような見え方にならないようです）。

f:id:youtoy:20210504155139j:plain

それと、以下は自分が作ったものではない別のサンプルで、キーを押下したタイミングで既に実行中だった toio 関連の処理を止めるサンプルです。

f:id:youtoy:20210504153253p:plain

ビジュアルプログラミングでのモーター制御・位置座標ベースの制御関連

短い時間間隔で動きを制御をする

質問した内容

toio DO の「つくる」のサンプルで「シンプルなコントローラーをつくる」というものがあります。
これは、アプリ上に表示された矢印アイコンを押すと toio を動かせて、アイコンを押している間だけ toio が動く仕組みで、アイコンが 1回押されるごとに 0.05秒（20ミリ秒）だけモーターを動かす処理が実装されています。

同じアイコンを押しっぱなしにすると 0.05秒分の処理が繰り返される形ですが、このとき toio の動きは小刻みな動きではなく、連続的な動きとなります。この「短い時間間隔で toio を動かす処理を連続的に実行するやり方」について「絶対位置座標指定を使う処理で似たようなことができないか？」という質問をしました。
具体的には以下のようなことを実現できるかどうか、という話になります。

  • 短い時間間隔で目標地点（目標は現在位置からすごく近い地点を指定）をどんどん変更して、絶対位置座標指定で移動させ、全体の動きを滑らかなものにする
  • 円や直線など特定の軌跡の上を正確にたどるような動きをさせる

上記 2つ目について少し補足すると、「直線上を移動させたいのなら、両方のモーターを同じスピードで動かすだけで良いのでは？」などという話に思えるかもしれませんが、実際にやってみると意図した角度とずれた方向に動いたりします。

質問への回答

自分で試しに「短い時間間隔で絶対位置座標指定を使った動作を繰り返すような処理」を作ってみると、toio の動きがガタガタしてしまっていました。そこで、そもそもそのようなことが実現できるかどうかを確認した形ですが、回答は「実現不可だが、意図した軌跡の上を動かすのは別のやり方がある」というものでした。

ちなみにこれができない理由は、「ビジュアルプログラミングの絶対位置座標指定での移動は、現在位置から目標地点までのモーター制御で加速と減速を行う仕様であるため」とのことでした。加減速が間に入りつつ動き続けるので、動きがガタガタしてしまうようです（なお、絶対位置座標指定で動く速さを遅くしてやれば、加減速が目立たず連続的に動くような感じに見える、とのこと）。

回答の続きですが、意図した軌跡の上を動かす方法の 1つは「つくる」のサンプルの STAGE 7 にある「PID制御で円運動」と似たようなことをやる、というものです。
少し補足すると、上で書いていた「直線上を動かしたいのに、意図した軌跡からズレて動く」という時に「常に toio の位置座標と意図した軌跡とのズレを比較しつつ、そのズレを補正するようにモーターの制御を動的に変える」という対応をします。

余談

今回のもくもく会で、 以下の 2つの話を見聞きしました。 　・簡易マットの上に簡易カードを置いて、簡易カードに触れたら特定の地点にたどり着いたことを判定をする仕組み
　・クリアケースで簡易マットを挟み込んで保護

そして、その後にふと思いついて、以下のゲームを作ってみました。

www.youtube.com

使ったブロックは 11個となっています。

f:id:youtoy:20210504194448j:plain

仕組みの詳細については、以下の記事に書きました。
●#toio を捕まえるゲームを #toioDo で作ってみた【 #GWアドベントカレンダー 2021/5/5 】 - Qiita
　https://qiita.com/youtoy/items/4d024906b3238d03881f

#toio の回転動作の ON/OFF をカメラで認識した手の動きで制御（軽いお試しの概要メモ）【 #GWアドベントカレンダー 2021/5/4 】

この記事は、2021年の GWのアドベントカレンダー 5/4 の分の記事です。

はじめに

自宅にある toio の台数が、購入したもの・コンテスト関連で入手したものと合わせて全部で 6台になりました。
それで、群制御的なことをやりたかったのですがスキル・知識が足りない状況だったので、まずはこんなこと（Web Bluetooth API を使った 6台同時接続と一斉動作）を試してみてました。

そして、この toio の動作を自分の手の動きで制御できたら良いな、と思いつつ、まずは過去の以下のプロトタイプを作る時に使った両手の認識（MediaPipe Hands の TensorFlow.js実装を利用したもの）と組み合わせられないかな、と思って試したのが今回の内容です。

本当は、5/1（土）・2（日）にオンラインで開催された「子どもプログラミングパーク」というイベントで、自分が担当になっていた企画の「モノとつながる楽しいプログラミング（トーク＆デモ）」という企画でデモができれば、と進めていたものでしたが、途中まで作って間に合わずという状況になったものでもあります。
なお、その企画中では Teachable Machine を使った音の機械学習と組み合わせて「回転・ぐるぐる・回れ」等と声を出すと、それに連動して 6台の toio が一斉に回転する、というデモを行っていました。

できあがったもの

ここで、今回作ったものの動画を掲載します。
カメラで認識された手の指先の距離（親指と人差し指の指先の距離）がある閾値以上になると toio 6台が一斉に回転し、その距離が閾値より小さくなると toio が動かなくなる、という内容です。

技術的な部分の軽い補足

この仕組みを実現するために使っている技術は以下の通りです。
　手の認識： MediaPipe Hands の JavaScript（TensorFlow.js）実装
　toio の制御： Web Bluetooth API

手の認識

MediaPipe Hands は、Google が提供している仕組みで、以下のページに概要が書いてあります。
　●Hands - mediapipe
　　https://google.github.io/mediapipe/solutions/hands.html
自分が使ったのは、ブラウザ上で動く JavaScript実装のものでしたが、Python等の他の言語で利用できるバージョンもあります。

本来は両手を同時に認識したり、複数人の手（3つ以上の手）を同時に認識することもできる仕組みですが、今回は片手分の認識のみを利用しています。以下で補足している toio の動作の ON/OFF のトリガーに使っている情報は、認識した手の「親指と人差し指のそれぞれの指先の位置の距離の大きさ」で、その値が特定の閾値を超えているかどうかで toio 関連の処理の ON/OFF を切り替えています。

toio の制御

Web Bluetooth API を使った toio の制御についてですが、これは以下の toio の通信仕様にある内容を使い、仕様で規定されたバイナリデータを送る等のプログラムを JavaScript で実装しています。
　●通信概要 · toio™コア キューブ 技術仕様
　　https://toio.github.io/toio-spec/docs/ble_communication_overview
　●モーター · toio™コア キューブ 技術仕様
　　https://toio.github.io/toio-spec/docs/ble_motor
動きの制御は、上記のモーターの仕様に書かれた「時間指定付きモーター制御」で、500ミリ秒の間だけ左右のモーターがそれぞれ順回転・逆回転となるように動かす命令を実装しています。そのモーター制御の命令が、上記の手の認識の結果をトリガーとして ON となった時には連続してたくさん送られるので、500ミリより長い連続した回転動作が行われる形です。

それと、上で掲載した動画の撮影前の下準備として、toio 6台とのペアリングの処理を行っています。

これらの toio 6台とのペアリング・一斉動作の ON/OFF を行うためのプログラムについて等は、以下の記事に書いてあるので、よろしければご覧ください。
　●Web Bluetooth API で toio を 6台同時に制御する - Qiita
　　https://qiita.com/youtoy/items/2fae3f4365788810215d

以上が今回の内容の、おおまかな情報です。

【Advent Calendar 2020 まとめ】2020年12月に書いたアドベントカレンダー用記事（全20記事）のまとめ【 #GWアドベントカレンダー 2021/5/1 】

この記事は、2021年の GWのアドベントカレンダー 5/1 の分の記事です。

はじめに

2019年のアドベントカレンダー用に記事を書いた後、以下のようなまとめ記事を書いていました。

●【Advent Calendar 2019】書いた全30記事（※ 後から5記事分を追加）のまとめ - 技術とエンタメと、その他・・・
　https://yo-to.hatenablog.com/entry/20191225/1577243263

2020年もアドベントカレンダー用の記事を書いていたのですが、2019年のまとめと同様にどんなタイトルのものを書いたか、ざっと記載してみようと思います。

昨年、12/25 までに 25記事書いて、その後に年内に 5記事を追加しました。
2020年も同じように、12/25 までが 16記事で、その後に 4記事を追加となっています。

アドベントカレンダーの登録先と昨年との比較

登録先

自分が登録したアドベントカレンダーが作成されていた先は、以下の 2つ「Qiita と Adventar」でした（去年も同じでした）。

qiita.com

adventar.org

数としては、Adventar のカレンダーが 3つで、残りは Qiita のカレンダーでした。

昨年との比較

昨年と今年で記事を投稿したカレンダーのテーマと、投稿した記事の数は以下のとおりでした。

f:id:youtoy:20210502165730p:plain

2019年のように毎日1記事のペースで書くのは厳しそうだったので、当初の予定では 10記事に満たない記事数になるはずでしたが、終わってみたら 20記事を書いた形になりました。
書いたネタというか、登録先のカレンダーのトピックは、2019年と同じものもあれば 2020年に新規に登録をしたトピックのものもありました。

12/25 までにアドベントカレンダー用に書いた記事の一覧

12/1 ベストバイガジェット

●【ベストバイガジェット2020】自宅の無線LAN環境をパワーアップ！： TP-Link Deco X20(2-pack) Wi-Fiルーター（2020/12/1） - 技術とエンタメと、その他・・・ 　https://yo-to.hatenablog.com/entry/20201201/1606748700

12/3 micro:bit 2020

●【micro:bit 2020】 新バージョンの micro:bit（v2）で micro:Maqueen、micro:bit用GROVEシールド v2.0、Scratch連系を試す！ - Qiita 　https://qiita.com/youtoy/items/11a49f22e9fa7bb1ffeb

12/5【1つ目】 NoCode

●【NoCode 2020】 IFTTT Pro の新機能 3つ（クエリー・フィルター・複数のアクションの実行）の内容をチェックしてみる！ - Qiita 　https://qiita.com/youtoy/items/a5e70c1dbf1c78eb94fa#%E3%82%AF%E3%82%A8%E3%83%AA%E3%83%BC

12/5【2つ目】 スマートスピーカー

●【スマートスピーカー 2020】 IFTTT で Alexa・Google Assistant を利用して IFTTT Pro の新機能（クエリー・フィルター）との組み合わせも試す - Qiita 　https://qiita.com/youtoy/items/ab6747622d137fcadead

12/6 obniz

●【obniz 2020】テキストプログラミングを自分で書かず Node-RED と #obniz を組み合わせて使おうとしてみる（obnizOSも利用） - Qiita 　https://qiita.com/youtoy/items/9d00ab9e87720e7f6a2f

12/10 toio

●【toio 2020】 #toio のシェイク検出の情報を Web Bluetooth API で受け取り Smoothie Charts（smoothie.js）でリアルタイムにグラフ化 - Qiita 　https://qiita.com/youtoy/items/82cf0e90e11bf68c0507

12/13【1つ目】 toio

●【toio 2020】 #toio 2台をコントローラー的に使うために姿勢検出の情報を Web Bluetooth API で受け取ってみる - Qiita 　https://qiita.com/youtoy/items/12360dc5d2236f803fbe

12/13【2つ目】 IoTLT

●【IoTLT 2020】 micro:bit を使った IoT（Grove - UART Wifi V2 との組み合わせ、IFTTT利用） - Qiita 　https://qiita.com/youtoy/items/459289951134544e73eb

12/14 Node-RED

●【Node-RED 2020】ダッシュボードで LED表示と表組みでの情報提示（天気情報の表示も） - Qiita 　https://qiita.com/youtoy/items/0f04ff829fb21e79892d

12/17【1つ目】 ライブ配信

●【ライブ配信 2020】今年のコミュニティでのイベント事情とオンラインイベント・配信の話のあれこれ（便利そうな仕組みの試作なども）｜豊田 陽介｜note 　https://note.com/youtoy/n/n438f4921f1de

12/17【2つ目】 NoCode 2020

●【NoCode 2020】IFTTT Pro の新機能活用を模索： Googleカレンダー連携をクエリーで使う方向性（まだ模索中） - Qiita 　https://qiita.com/youtoy/items/8439d987ec07aadf1329

12/19 JavaScript

●【JavaScript 2020】PubNub を使ったリアルタイム通信を試してみる（JavaScript を利用） - Qiita 　https://qiita.com/youtoy/items/f3ada57fccbf57cfff60

12/20 enebular

●【enebular 2020】 #enebular の InfoMotion によるグラフ表示を試してみた！（PubNub との組み合わせ） - Qiita 　https://qiita.com/youtoy/items/b6ffb2b48858a09955ca

12/21【1つ目】 CoderDojo

●【CoderDojo 2020】 DojoCon Japan 2020 のセッション登壇とワークショップの準備の話 - 技術とエンタメと、その他・・・ 　https://yo-to.hatenablog.com/entry/20201221/1608479618

12/21【2つ目】 JavaScript

●【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 （ #M5Stack ）への文字の送信 - Qiita 　https://qiita.com/youtoy/items/3da58570972803134f6c

12/23 Seeed UG

●【Seeed UG 2020】 Wio Terminal のバッテリーベースの情報を見たり Web Bluetooth API と連携させるための準備をしたり - Qiita 　https://qiita.com/youtoy/items/715eb8acebbc0b44a3a5

※追加： 【17記事目】JavaScript

●【JavaScript 2020】 CodeceptJS でファイルのダウンロード - Qiita 　https://qiita.com/youtoy/items/7e1c398c29e07f8bd79b

※追加： 【18記事目】JavaScript

●【JavaScript 2020】音声ファイルの可視化をブラウザ上で簡単に試す（Web Audio API） - Qiita 　https://qiita.com/youtoy/items/b69597499268a4a438e8

※追加： 【19記事目】NoCode

●【NoCode 2020】 MQTTブローカーの shiftr.io と IFTTT の Webhook をつなぐ（shiftr.io の HTTP Interface） - Qiita 　https://qiita.com/youtoy/items/c690e2f1aa064e6dd289

※追加： 【20記事目】JavaScript

●【JavaScript 2020】 MQTT で受信したデータを Smoothie Charts（smoothie.js）以外でリアルタイムにグラフ化： Chart.js とプラグインを利用 - Qiita 　https://qiita.com/youtoy/items/252f255c9d794bf3d964