Lab Report No.01
口を開けるだけで撮影!
「口パク・シャッター」の作り方
制作:Gemini 3.0 Pro MediaPipe
1. アイディアの着想
手が不自由でスマートフォンのシャッターボタンが押せない、あるいは自撮りの時に手が塞がっている...そんな時に「顔の動き」だけで写真が撮れたら便利だと思いませんか?
「まばたき」だと目を閉じてしまうので撮影の瞬間に自分の表情が確認できません。そこで、「口を大きく開ける(あー)」という動作をスイッチにして、ハンズフリーカメラを作ってみることにしました。
2. 実際に使ったプロンプト
以下の文章をそのままAIチャット(Gemini)に貼り付けました。
あなたは優秀なウェブエンジニアです。 HTML5とJavaScriptを使って、以下の機能を持つ「口パク・シャッター」アプリを作ってください。 1つのHTMLファイルで完結させてください。 【要件】 1. PCのWebカメラ映像を取得して画面に表示する。 2. Googleの「MediaPipe Face Mesh」ライブラリを使用して、顔を認識する。 3. ユーザーが「口を大きく開けた」ことを検知したら、シャッターを切る。 (上唇と下唇の距離で判定してください) 4. シャッター時は画面を一瞬白くフラッシュさせ、撮影した画像を画面脇に表示する。 また、画像のダウンロードボタンもつける。 5. 誤作動を防ぐため、口の開き具合の感度(しきい値)をスライダーで調整できるようにする。 6. デザインは、ダークモードベースでカッコよくしてください。
ポイントは「上唇と下唇の距離で判定」と具体的な判定方法をAIに指示した点です。これがないと、AIは笑顔などを誤検知してシャッターを切ってしまうことがあります。
3. 修正のプロセス
最初は口を少し開けただけで連写されてしまいました。そこで、以下の追加指示を出して調整しました。
「ありがとう。でも、一度口を開けると連続で何枚も撮影されてしまいます。
『一度撮影したら、1.5秒間は次の撮影をしない(クールダウン)』機能を追加してください。」
『一度撮影したら、1.5秒間は次の撮影をしない(クールダウン)』機能を追加してください。」
このように、AIと会話しながら不具合を伝え、調整を繰り返すことで、自分だけの理想のツールに近づけていきます。
完成品(デモ)を試す
Web Camera Access Required