猫の手ツール

猫の手ツールの実装から学ぶ

MediaPipe入門
全20記事の学習ガイド

ある程度のIT知識はあるけれど、MediaPipeは初めて。そんな方が、自分のPCでコードを動かし、AIが返すデータを使えるようになるためのシリーズです。タスクの説明だけで終わらず、画像を読み込むところから、結果を描くところまで進みます。

作成・確認日：2026年10月12日。人物のサンプルはこのプロジェクトのAI生成画像、猫の写真は運営者の愛猫です。文章や音声の例では、記事用に用意した短い文や合成音を使います。

MediaPipeとは？

MediaPipe（メディアパイプ）は、Googleが開発・公開している、AIや機械学習の機能をアプリへ組み込むためのオープンソースのライブラリ・ツール群です。学習済みのモデルとAPIを使い、顔や手の検出、身体の姿勢の推定、画像の領域分割、音声や文章の分析などを実装できます。まずは、自分でモデルを一から学習させずに試せます。

このサイトの顔モザイクを例にすると、MediaPipeが顔の位置を調べ、JavaScriptとCanvasがその位置にモザイクを描きます。AIから返った座標や領域のデータを、画像加工などのアプリの処理へつなぐ仕組みです。

WebだけでなくAndroid・iOS・Pythonでも利用でき、対応環境はタスクごとに異なります。このシリーズは全体像を押さえたうえで、このサイトに合わせたWeb版の実装を中心に学びます。機能と対応環境の一覧はMediaPipeの公式ガイドで確認できます。

最初に読む順番

初めてなら、01の全体像と02の導入を先に読みます。顔に枠を描けたら、欲しい結果が「位置」「点」「領域」「分類」「特徴量」のどれかを考えて記事を選びます。すべてのモデルを一度に覚える必要はありません。

  1. 全体像・サイトの採用版・最新動向で、タスクとモデルの役割を確認する。
  2. Web版の導入で、ZIPを展開してローカルサーバーを起動する。
  3. 顔検出の結果を使うで、数値から画像加工へ進む。
  4. 下の目的別ガイドから、自分の作りたい機能を選ぶ。

目的から記事を選ぶ

欲しい結果学ぶ記事サイトの用途とのつながり
人の顔の位置FaceDetector顔モザイク、顔の切り出し。
顔・手・身体の点顔・手・姿勢リップ試着、手の線画。姿勢は追加の学習例。
人物・髪・衣服の領域人物と背景・髪と衣服背景透過、ヘアカラー、衣服の色変更。
猫などの物体の位置や種類物体検出・画像分類愛猫の写真を使った学習例。顔検出との違いを確認。
似た画像・文章の比較画像の埋め込み・文章の埋め込み特徴量を使う新しい例題。
音声・文章の分類音声・言語・文章画像処理とは別のSDK・入力形式を学ぶ。

制作時の失敗から、確認する場所を探す

このサイトの制作メモも、関係する記事へまとめています。4月の導入記録と、10月に作成した現行SDKの教材は別のものです。失敗した取得先や当時の修正を、そのまま現在の導入手順として使わず、本文の採用版と合わせて読んでください。

全20記事

まず動かす

  1. 01．全体像・サイトの採用版・最新動向タスクとモデルを選び、人物と猫の写真で最初の顔検出を体験します。
  2. 02．Web版の導入とファイルの配置SDK・WASM・モデルの役割から、ローカルサーバーでの起動まで進めます。

サイトの画像ツールを学ぶ

  1. 03．顔検出の結果から画像を加工する矩形とスコアを読み、顔の位置を画像加工へつなげます。
  2. 04．顔のランドマークとパーツの描画顔の点の座標をCanvasに重ね、唇や目の位置を扱います。
  3. 05．人物と背景をマスクで分ける領域マスクを可視化し、人物の背景を透過する処理を学びます。
  4. 06．髪と衣服のモデルを使い分けるカテゴリの意味を確かめ、髪や衣服だけに加工を適用します。
  5. 07．手の21点から線画を描く手の座標・左右・接続関係を読み、骨格を描画します。

スマホで使う

  1. 08．スマホ対応・処理時間の測り方とメモリ管理初期化と推論を分けて測り、画像サイズと処理負荷を比較します。

画像・動画の機能を広げる

  1. 09．猫などの物体の位置を検出する物体のカテゴリと位置を読み、人の顔検出との違いを確かめます。
  2. 10．画像全体を分類する分類ラベルとスコアを読み、物体検出との使い分けを学びます。
  3. 11．手のジェスチャーを認識する関節の座標とジェスチャーの分類結果を一緒に確認します。
  4. 12．身体の姿勢と関節を推定する姿勢の座標と可視性を読み、写真の条件による違いを理解します。
  5. 13．顔・手・身体をまとめて扱う統合した推定結果と、それぞれのタスクとの役割の違いを学びます。
  6. 14．指定した場所の対象を切り抜く位置の指定を手掛かりに、対象の領域を取り出します。
  7. 15．画像の特徴量と類似度を比べる埋め込みとコサイン類似度を使い、分類との違いを理解します。

動画へ進む

  1. 16．動画・カメラの連続推論へ進むフレームの時刻、処理の頻度、開始と停止を扱います。

音声・テキスト

  1. 17．音声の分類結果を読む音声のサンプルレートと入力データから、分類の結果まで確認します。
  2. 18．文章の言語を判定する言語コードとスコアを読み、短い文や混在した文の限界を調べます。
  3. 19．文章を分類し、モデルの対応言語を確認するテキストの分類と、言語判定・文章生成との違いを学びます。
  4. 20．文章の特徴量と類似度を比べる文章の埋め込みを取り出し、同じモデルで文同士を比較します。

コード・作例・検証情報の読み方

実装記事では、完成サンプル、実行した画面、動かせるコード、結果の意味を一緒に確認します。掲載される件数やスコアは、その画像・モデル・SDK・ブラウザで観察した結果です。どの写真でも同じ件数になることや、すべてのスマホで同じ速度になることを示すものではありません。

同じAPIでも、モデルを変えると対象や出力が変わります。SDKとWASMの版を揃え、モデルの説明と対応環境を確認してください。サイトの既存画像ツールと、新しく用意した学習サンプルは各記事で区別しています。

機械学習の数式を先に理解する必要はありません。ただし、HTMLのタグ、JavaScriptの変数・関数・イベント、非同期処理が不安な場合は、既存のasync / awaitやCanvas APIの記事を先に読むと進めやすくなります。

基礎をまとめて確認する場合はWeb技術の学習ガイドへ、動かしたAIを実際の画像加工へ組み込む方法を読む場合は画像ツールの裏側へ進めます。例えば顔の枠を得た後に、検出漏れを確認する画面や、モザイクの描画を繰り返す仕組みをどう作るかは、制作解説で扱います。

公式情報

機能の全体像はMediaPipeの公式ガイド、Webの環境は公式のWebセットアップガイドを参照できます。