「Webプログラミングの授業で、画面に文字や四角を表示するだけだと生徒が飽きてしまう…」
「HTML/CSSの基礎が終わった後、JavaScriptで『こんなこともできるんだ！』とワクワクさせたい」
「最新のWeb技術やAI（機械学習）を、難しい数学なしで体験できる教材を作りたい」
こんな悩みや思い、ありませんか？
ITスクールや授業でWeb制作を教えていると、文法ばかりの講義では生徒の集中力が切れてしまう場面によく直面します。
そこで、受講生やプログラミング初心者に「Webってこんなに面白いことができるんだ！」と一瞬で興味を持ってもらうためのデモ教材として、両手の指でカメラ越しに四角形を作るWebアプリを開発しました！
両手の指で四角形を作る｜カメラで遊ぶ無料アプリ｜LYNROAD両手の親指と人差し指をカメラに映すと、4つの指先を結ぶ四角形が動きます。ブラウザで無料で試せるハンドトラッキング体験。インストール不要、使い方と手を認識しやすくするコツも紹介します。リンク先を開く
どんなアプリ？両手の指先（4点）を結んでリアルタイムに四角形を描画
使い方はとてもシンプルです。カメラを許可し、画面に両手を映して親指と人差し指でフレーム（四角形）を作るだけ。
画面上の手の動きに合わせて、リアルタイムに4点が線で結ばれ、変形する四角形が追従します。
言葉で「座標取得」や「イベント処理」を説明するよりも、自分の手を動かして画面の図形が追従する様子を見せるだけで、授業の掴み（導入）に使いやすいです。
うまくいかない時の調整のコツ
両手を少し離してカメラに映す
指先（親指・人差し指の先端）までしっかり画面に入れる
明るい部屋で背景をシンプルにする
開発のきっかけ：講義で「Webの可能性」を体感してほしかったから
私自身、IT講師としてプログラミングやWeb開発を教える中で、常に「どうすれば生徒が興味を持って自発的に学びたくなるか？」を考えています。
「AI」や「ディープラーニング」というと、Pythonでの難しいデータ処理やLLM（大規模言語モデル）ばかりが注目されがちですが、Webブラウザ（JavaScript）の世界でも気軽に触れるAI技術がたくさんあります。
その一つが、ブラウザ上で動作する機械学習ライブラリ「ml5.js」です。
「複雑な環境構築なしで、ブラウザとカメラだけでこんな未来っぽいアプリが作れる」という体験を生徒に届けるために、この小さな実験アプリを制作しました。
技術的な裏側：やってることは「4つの点（x, y座標）を結ぶ」だけ！
一見すると高度なAIアプリに見えますが、プログラムとしてやっている処理は驚くほど単純です。
ml5.js（Handposeモデル）で左右の手のキーポイントを検出を行う「右手の人差し指・親指」と「左手の人差し指・親指」の先端座標（x, y）を取得する
p5.js（またはCanvas API）を使って、その4点を直線で結んで四角形を描画する
「AI＝難しい」と構えてしまいがちですが、仕組みを紐解けば「取得した座標を線でつないでいるだけ」なんです。
この「なんだ、基本の組み合わせなんだ！」という気付きを与えることで、受講生も「自分にも作れるかも！」「じゃあ次は指を3本にして三角形を作ってみようかな？」と応用アイデアが次々と湧くようになります。
※後で知った事実：海外の先駆者がすでに作っていました
「両手で四角形を作ったら面白いのでは！？」と閃いて一気にコードを書き上げ、
「できたー！天才かも！」
とテンションが上がっていたのですが……後からネットで調べたら、海外でもほぼ同じ発想のデモがすでに作られていました。
ですが、全く問題ありません。自分で思いついて、自分の手でコードを書いて動かした経験こそが最大の学びであり、教材としての価値になります。先駆者の皆さんに敬意を表しつつ、私は最後発のチャレンジャーとして活用していきます！
まとめ：小さな実験の積み重ねが、Web開発をもっと楽しくする
単なるタイマーや掲示板アプリだけでなく、カメラや音声、センサーを使ったWebアプリは「作った時の感動」が段違いです。
「これとこれを組み合わせたら、もっと面白くなるかも？」という小さな実験の積み重ねが、Web開発の楽しさの本質だと感じています。
授業のデモや、JavaScript学習のモチベーション維持に、ぜひ遊んでみてください！
両手の指で四角形を作る｜カメラで遊ぶ無料アプリ｜LYNROAD両手の親指と人差し指をカメラに映すと、4つの指先を結ぶ四角形が動きます。ブラウザで無料で試せるハンドトラッキング体験。インストール不要、使い方と手を認識しやすくするコツも紹介します。リンク先を開くこんなツールも作っています
LYNROADでは、講義を盛り上げるため、ちょっとした不便を便利にするツールを製作して公開しています。このブログも自作のCMSです。
当ブログの以下のカテゴリで画像加工やカメラを使ったツールなどを公開しています。すべて無料、ほとんどが登録不要で安心してお使いいただけます。
[ほかのカメラツールを見る]
カメラに手を映して遊ぶ｜炎魔法・パズル・指タイマーなどの無料アプリ｜LYNROADカメラに手を映して遊べる5つの無料アプリです。炎魔法、写真パズル、拡大鏡、四角形、指で操作するタイマーをブラウザで試せます。登録・インストールは不要です。リンク先を開く[ほかの自作ツール・サービスを見る]
カテゴリー: 作る自作のサービスやツールなど。便利なものから楽しめるものまで！リンク先を開く[LYNROADの記事を見る]
ウェブ五万｜自作プロダクトで月5万円を目指す在宅副業IT講師・フリーランスのエンジニアが自分の代わりに働くWeb資産を育てて月5万円の収入を得るまでの実践記録。副業で月5万円を目指して、ブログ・Webツール・アフィリエイトを実際に試す記録。失敗したこと、かかった費用、改善したことまで残しますリンク先を開く
