JavaScript

JavaScriptに関しての記事

Hands

【Hands/第3回】

今回は手に表示している画像を手の角度に合わせて回転させてみたいと思います。前回行った画像の表示方法を知っておく必要があるので、覚えていない人は確認しましょう。確認ctx.drawImage(Img, canvas.width-(center...
Hands

【Hands/第2回】

今回は手に画像を表示してみたいと思います。前回の課題で行った座標の取得が重要になるので、覚えていない人は確認しましょう。確認hands.onResults(results => { ctx.clearRect(0, 0, canvas.wi...
Hands

【Hands/第1回】

今回はHandsに触れてみようと思います。MoveNetと似ている箇所が多いので、安心して取り組んでください。HandsとはHandsは、手の位置を検出し、各関節のランドマーク(指の位置)をリアルタイムで追跡するための機械学習モデルです。こ...
Hands

Handsを知ろう!

全3回でHandsについてを学んでいきます第1回第2回第3回
MoveNet

【MoveNet/第6回】

第6回です。最終回となります。今までの機能を合体しよう第3回の後半から第5回にかけて、旗揚げゲームに必要なパーツを制作してきました。MoveNetで旗を持たせたり、ランダムに旗の出題をするシステムや旗の状態を管理するシステムは作りましたが、...
MoveNet

【MoveNet/第5回】

第5回です。このあたりから発表用に自分が作るゲームのイメージをしておくといいかも?キーポイントの座標を取得前回旗揚げゲームの出題と旗の状態管理について取り扱ったので、今回はMoveNetで手を挙げたかの判定をする仕組みを作ります。MoveN...
MoveNet

【MoveNet/第4回】

ついにMoveNetも第4回、折り返しです。MoveNetでゲームを作ろう前回の課題で手に旗を持たせることから察しているかと思いますが、今回は旗揚げゲームを制作していきます。「赤あげて」「白あげて」「赤さげないで、白さげて」みたいな出題があ...
LINEBOT

LINEチャットボット(3択クイズ⑤ユーザID登録)

以下の点に注意してから作業を始めてください!パソコンで作業をするブラウザの自動翻訳機能をオフにする目次シートの追加Apps Scriptにプログラミング変更+公開設定更新 1.Apps Scriptを開く 2.プログラムを書き換える 3.デ...
MoveNet

【MoveNet/第3回後半戦】

続きです。コード解説まず何の関数が定義されているかチェックしましょう。// 1.MoveNetモデルを読み込む関数async function loadMoveNet()// 2.ビデオからポーズを推定する関数async function ...
MoveNet

【MoveNet/第3回前半戦】

第3回ではいよいよMoveNetを組み込む作業を進めます。前回から2段階程度難易度が上がるので、お覚悟を。といっても、できる限り詳しく解説するので身構える必要はない...ハズ...外部スクリプトを知る第2回では、HTMLファイルにJavaS...