👊スマホのタップで「正拳突き人形」が正拳を繰り出すまで　序章 - 👊スマホのタップで「正拳突き人形」が正拳を繰り出すまで

<p>スマホやPCのブラウザに並んだボタンを、ひとつ押す。</p> <p>すると数メートル離れた机の上で、人形が「シュッ」と正拳突きを繰り出した。画面のカウンターが <code>+1</code> される。</p> <p><img src="/api/article/09aeb399-48c4-420f-9344-59d85921faae/file/demo.gif" alt="ブラウザ操作で正拳突き"></p> <p>見た目はかわいいお人形。でも中身は、電子回路・ファームウェア・Webアプリ・ネットワークが一本につながった、れっきとしたシステムだ。この記事では、その一台が動くまで——画面のひと押しが正拳突きに、そしてカウントに変わるまでを、HWからNWまで辿っていく。</p> <h2>こんな人に読んでほしい</h2> <p>ネット通販でポチった商品が翌日には届く物流、駅の改札、話しかけると答えるスマートスピーカー——普段あたりまえに使っているものほど、「これ、中ではどう動いているんだろう」と気になることはないでしょうか。私はよく思います。</p> <p>とはいえ、いきなり改札は作れません。それでも、「何かを動かしてみたい」「スマホで操作したい」「データを記録し、分析したい」——そんな思いが、このプロジェクトの出発点です。</p> <p>ハードウェアを組み、ファームウェアで動かし、ネットワークでソフトウェアとつないで、もっと便利にしていく。<strong>HW・FW・SW・NW を統合して、ひとつのシステムとして動くもの</strong>を、作りながら一緒に学んでいく——それがこの連載です。</p> <blockquote> <p>💡 <strong>こんな人と一緒に辿れたら</strong> 自分の専門の外に、一歩踏み出してみたい人。「Webはやるけど電子工作は未知」「組み込みはやるけどサーバー側は触ったことがない」——その境界を、実際に動くデバイス1台で一望してみます。</p> </blockquote> <p>その最初の一台が、冒頭の正拳突き人形です。ブラウザのひと押しが命令となって人形に届き、繰り出された<strong>正拳</strong>をラズパイのカメラが画像認識で数える——指先のひと押しが画面のカウントに変わるまで、信号が層から層へどう渡っていくのかを、このあと実物で追いかけます。</p> <h2>このプロジェクトの地図</h2> <h3>まず、身近なシステムの「形」</h3> <p>さきほど挙げたスマートスピーカーを思い出してください。「明日の天気は？」と聞くと答えが返ってくる。でもあの返事は、手のひらのスピーカーの中だけで作られているわけではありません。あなたの声はネット越しに<strong>遠くのサーバー</strong>へ送られ、そこで処理されて、また戻ってきます。</p> <p>つまりこのシステムは、<strong>手元のモノ ── ネットワーク ── 遠くのサーバー</strong> の3点でできている。現場で入力・検知し、サーバーが処理・記録し、また現場へ返す。私たちが普段「便利」と感じているものの多くは、だいたいこの形をしています。</p> <h3>その「形」を、自分でつくる</h3> <p>だったら、同じ形を自分でも作れるはずです。</p> <p>自分で組んだデバイスをネット越しにサーバーへつなぎ、ブラウザから動かしたり、動いた回数を記録してグラフにしたり。そして、デバイスが増えてきたら、同じ土台にどんどん挿していける——そんな「<strong>自分専用の土台</strong>」をつくる。これがこのプロジェクトの中心にあります。</p> <p>その名も「<strong>seikenシステム</strong>」。さっきのスマートスピーカーと、形はまったく同じです。違うのは、つながっているのが市販品ではなく、自分で作ったデバイスだということ。</p> <table> <thead> <tr> <th style="text-align:left">さっきの3点</th> <th style="text-align:left">seikenシステムでは</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">手元のモノ</td> <td style="text-align:left"><strong>デバイス</strong>（正拳突き人形、水やりぞうさん…）</td> </tr> <tr> <td style="text-align:left">ネットワーク</td> <td style="text-align:left">インターネット越しの通信</td> </tr> <tr> <td style="text-align:left">遠くのサーバー</td> <td style="text-align:left"><strong>seikenサーバー</strong>（ブラウザからの遠隔操作＋データの記録・可視化）</td> </tr> </tbody> </table> <p><img src="/api/article/09aeb399-48c4-420f-9344-59d85921faae/file/kousou.png" alt="seikenシステム"></p> <p>ブラウザのダッシュボードには登録した機器がカードで並び、選ぶと遠隔操作・カメラ映像・グラフが見られます。</p> <p>いまはまだ、すべてがラズパイ1台の上で動く「ローカル完結型」。土台に乗っているのは、第一号の正拳突き人形だけです。次の章では、スマートスピーカーと同じこの「形」が、正拳突き人形では具体的にどう実現されているのか——HWからNWまで縦に辿ります。</p> <h2>【実例】正拳突き人形が動くまでを、縦に辿る</h2> <p>ここからが本題です。冒頭の「ボタンを押す → 人形が正拳 → カウント」を、HW・FW・SW・NW の4層に分解して、下から上へ辿ってみます。</p> <h3>HW（ハードウェア）— 動く体をつくる</h3> <p>人形の体は、3Dプリントしたフレームに、2個のサーボモーター（SG90）と「スライダクランク機構」を仕込んだもの。サーボの回転が腕の直線運動に変わり、正拳突きになります。頭脳は手のひらサイズのマイコン <strong>ATtiny402</strong>（1個80円）。ここに圧力センサ・手押しボタン・音声モジュール（DFPlayer Mini＋スピーカー）がつながり、単3電池3本（4.5V）だけで動く。正面の圧力センサにボールが当たると、それを合図に正拳突きが飛び出します（手押しボタンでも同じ）。電源を入れれば単体で完結する「スタンドアロンのおもちゃ」が、ここで一旦完成します。</p> <h3>FW（ファームウェア）— 体に動き方を教える</h3> <p>ATtinyに書き込むプログラムがファームウェアです。やっていることはシンプルで、「<strong>トリガーが来たら、音を鳴らして、ワンツーパンチを3回</strong>」。さきほどのボール（やボタン）からの合図を受け取ると、サーボを引き位置(150°)→突き位置(30°)と振り、1セット約2.4秒のパンチを繰り出します。ここまでは、まだサーバーもネットワークもいらない世界です。</p> <h3>SW（ソフトウェア）— スマホから動かし、記録する</h3> <p>ここで seikenシステムが登場します。ブラウザ側（Vue.js）には遠隔操作ボタン、正拳回数モニター（今日・累計・グラフ）、カメラ映像が並ぶ。サーバー側（Flask）が指示を受けて結果をデータベースに記録し、ラズパイ上のプログラムがカメラ映像を <strong>OpenCVで画像認識</strong>して、人形が実際にパンチした回数を数えます。<strong>遠隔モードで回数を数えるのは、人形のセンサーではなく、見ているカメラ</strong>です。</p> <h3>NW（ネットワーク）— 4層をひとつにつなぐ</h3> <p>最後に、これらを1本の線でつなぐのがネットワークです。ブラウザのひと押しは <strong>Socket.IO</strong> という仕組みで、サーバーへ、そしてラズパイへとリアルタイムに伝わります。</p> <p>そして、いちばん面白い"つなぎ目"がここにあります。ラズパイは、人形の <strong>圧力センサと同じ端子</strong> に「押された」のと同じ電気信号（LOWパルス）を送り込むだけ。ATtinyから見れば、ボールが当たったのと区別がつきません。<strong>だから遠隔操作のために、ファームウェアは1行も書き換えていない</strong>。「ボール検知で起動」も「Webから起動」も、人形にとっては同じこと。スタンドアロンのおもちゃが、配線一本で<strong>ネットワーク機器に大変身！！</strong></p> <p><img src="/api/article/09aeb399-48c4-420f-9344-59d85921faae/file/flow.png" alt="seikenシステム"></p> <p>タップひとつが、サーバーを通り、電気信号になって人形を動かし、その動きをカメラが見て数え、また画面に戻ってくる。HW・FW・SW・NW が、こうしてひとつのループになります。次の章からは、この一周を支える技術を、連載で順番に掘り下げていきます。</p> <h2>これからの道のり</h2> <p>正拳突き人形は、この長い旅の「最初の一台」です。ここから先、このプロジェクトは2つの方向に広がっていきます。さきほどの地図でいう、<strong>土台（seiken）を育てる軸</strong>と、<strong>デバイスを増やす軸</strong>です。</p> <h3>🌐 土台を育てる：seikenシステムの道のり</h3> <p>いまの seiken は、すべてが1台のラズパイに同居した「ローカル完結型」。ここから、本物のシステムらしく一歩ずつ育てていきます。</p> <table> <thead> <tr> <th style="text-align:left">道のり</th> <th style="text-align:left">やること</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><strong>① ローカルで完成させる</strong>（←いまここ）</td> <td style="text-align:left">まず手元で、1台に同居した形をしっかり動かしきる</td> </tr> <tr> <td style="text-align:left"><strong>② クラウドに載せる</strong></td> <td style="text-align:left">インターネット越しに、どこからでも使えるようにする</td> </tr> <tr> <td style="text-align:left"><strong>③ いろんなデバイスを載せられる土台へ</strong></td> <td style="text-align:left">特定のおもちゃ専用ではなく、何でも挿せる「プラットフォーム」にする</td> </tr> </tbody> </table> <p>ステップが進むたびに、新しい技術の"つなぎ目"が出てきます。その都度この連載で、つまずいた所も含めて辿っていきます。</p> <h3>🤖 土台に乗せるデバイスたち</h3> <p>土台を育てるのと並行して、そこに乗せるデバイスも作っていきます。</p> <table> <thead> <tr> <th style="text-align:left">デバイス</th> <th style="text-align:left">いま</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">正拳突き人形</td> <td style="text-align:left">🟢 seiken統合済み・運用中</td> </tr> <tr> <td style="text-align:left">水やりぞうさん</td> <td style="text-align:left">🔬 試作中（ESP32）。次のseiken統合候補</td> </tr> <tr> <td style="text-align:left">ライントレーサー</td> <td style="text-align:left">💡 構想中</td> </tr> <tr> <td style="text-align:left">セグウェイ風の乗り物</td> <td style="text-align:left">💡 構想中</td> </tr> </tbody> </table> <p>おもしろいのは、デバイスごとに"つなぎ方"が変わること。たとえば水やりぞうさんは Wi-Fi 内蔵の ESP32 なので、正拳突き人形のようにラズパイを挟まず、サーバーへ直接つなげます。同じ土台でも、デバイスが違えば道のりも変わる——そのバリエーションも、これから紹介していきます。</p> <h2>どう読んでほしいか</h2> <p>最後に、この連載の歩き方を少しだけ。</p> <p>この記事は、この連載全体の入口です。これから Step やデバイスごとに記事が増えていきますが、どれも今日見た「タップ → 動く → 数える」ループのどこかを掘り下げたもの。だから、頭から順に読む必要はありません。気になった層・気になったデバイスから、つまみ食いしてください。</p> <p>冒頭でも触れたとおり、これは「教える」連載ではなく、つまずきも含めて一緒に辿っていく記録です。気軽に隣で覗いているくらいの距離感で読んでもらえたら嬉しいです。</p> <p>発信は、2つの形でやっていきます。</p> <ul> <li>🎬 <strong>ショート動画</strong> … 完成したデバイスが動く様子を、サクッと楽しく</li> <li>📝 <strong>この連載（Zenn）</strong> … その裏側、HW〜NWの"つなぎ目"をじっくり</li> </ul> <p>「動いてる！」を入口に、「どうやって動くの？」まで付き合ってもらえたら最高です。次の記事からは、この地図を一マスずつ歩いていきます。</p>