01
ソフトウェア概要Software Overview
本ソフトウェアは、日本の食品製造現場に導入されている産業用ロボットを HTML5 Canvas と純粋な JavaScript だけでリアルタイム3D描画するシミュレーターです。 外部ライブラリ・フレームワークへの依存ゼロ、単一HTMLファイルで完結しており、 ブラウザで開くだけで即座に動作します。食品工学・ロボット工学の教育用途や、 生産設備の導入検討・プレゼンテーション資料としても活用できます。
目的
食品製造ロボットの動作原理・工程手順・機械構造を3Dビジュアルで直感的に理解できるようにします。専門知識がなくても、動くシミュレーションを通じてロボット工学の基礎を学べます。
動作環境
モダンWebブラウザ（Chrome・Firefox・Safari・Edge 最新版）で動作。インストール不要、サーバー不要。HTMLファイルをダブルクリックするだけで即起動します。スマートフォン・タブレットのタッチ操作にも対応しています。
技術構成
HTML5 + CSS3 + Vanilla JavaScript のみで構成。Canvas 2D API を使用した独自の透視投影3Dエンジンを実装。外部ライブラリへの依存がゼロのため、オフライン環境でも完全動作します（Webフォント除く）。
収録コンテンツ
寿司握り・たい焼き焼成・おにぎり成形・和菓子製造・ケーキデコレーション・麺打ちの6種類の食品製造ラインを収録。各ラインは独自の工程アニメーション・専用エフェクトを持ちます。
シングルファイル設計：
本ソフトウェアは HTML ファイル 1 つのみで完結します。ファイルを共有するだけでそのまま配布でき、社内研修・授業・展示会デモなどあらゆる場面で即活用できます。
02
製造ライン一覧6 Food Production Lines
🍣
寿司握り
LINE-01
›
🐟
たい焼き
LINE-02
›
🍙
おにぎり
LINE-03
›
🍡
和菓子
LINE-04
›
🧁
ケーキ
LINE-05
›
🍜
麺打ち
LINE-06
| LINE | ロボット名 | 生産速度 | 管理温度 | 衛生等級 | 主な工程 | |
|---|---|---|---|---|---|---|
| LINE-01 | 🍣 |
寿司握りロボット
Sushi Shaping Robot
|
120個/分 | 10°C | Grade A | 米計量 → シャリ成形 → ネタ載せ → 握り込み → 排出 |
| LINE-02 | 🐟 |
たい焼き焼成機
Taiyaki Baking Robot
|
240個/時 | 180°C | Grade A | 生地充填 → 型閉じ → 焼成 → 型反転 → 型開き → 排出 |
| LINE-03 | 🍙 |
おにぎり成形機
Onigiri Forming Robot
|
80個/分 | 65°C | Grade A | 米計量 → 具材充填 → 一次成形 → 三角成形 → 海苔巻き |
| LINE-04 | 🍡 |
和菓子成形機
Wagashi Making Robot
|
180個/時 | 55°C | Grade S | 餡計量 → 外皮成形 → 包餡 → 整形 → 模様付け → 冷却 |
| LINE-05 | 🧁 |
ケーキデコレーター
Cake Decoration Robot
|
60台/時 | 18°C | Grade A | 土台塗布 → サイド塗布 → クリーム絞り → フルーツ配置 |
| LINE-06 | 🍜 |
麺打ちロボット
Noodle Making Robot
|
120食/時 | 25°C | Grade A | 小麦計量 → 水加え → こね → 延ばし → 切り出し → 茹で |
03
主要機能Key Features
🔄
リアルタイム 3D アニメーション
各ロボットのアーム・関節・専用機構が実際の製造動作を模してリアルタイムに動作。自由な視点から観察できます。
✨
製品固有エフェクト
寿司の湯気・たい焼きの焼成熱・ケーキのクリームスパイラル・麺の蒸気など、各食品に合わせた専用エフェクトを実装。
📊
工程進捗リアルタイム表示
リングゲージで現在の工程サイクル進捗率（0〜100%）を可視化。各工程名もリアルタイムで切り替わり表示されます。
🎥
自由視点 3D カメラ
ドラッグで360°回転・スクロールでズームイン/アウト。上面・側面・前面など任意の角度でロボット構造を詳しく観察できます。
🔢
製造カウンター & タイマー
サイクル完了ごとに製造個数が自動カウント。稼働時間タイマーと良品率も表示し、生産ラインの稼働状況を模擬します。
🍱
完成品トレイ表示
製品が完成するたびに絵文字アニメーションでトレイに追加されます。製造フローの完結を視覚的・楽しく確認できます。
04
操作方法Controls & Interface Guide
マウスドラッグ
3Dカメラの回転
Canvas上でドラッグするとカメラのヨー角（左右）とピッチ角（上下）が変化します。ロボットを真横・真上・斜め下など自由な方向から観察できます。
スクロール
ズームイン / アウト
マウスホイール操作でカメラ距離を調整します。アーム先端の精密動作を拡大確認したり、ライン全体を俯瞰したりできます（200〜900の範囲）。
左パネル選択
製造ライン切り替え
左サイドバーの6つのボタンから製造ラインを選択します。切り替えると3Dシーン・仕様情報・工程名・カウンターが即座に更新されます。
▶ 再生 / 停止
アニメーション一時停止・再開
右パネルの再生ボタンでアニメーションを一時停止できます。特定の工程姿勢でフリーズさせて、ロボットの構造や工程を詳しく観察するのに便利です。
↺ リセット
アニメーション & カウンター リセット
タイムカウンター・製造個数・完成品トレイをすべて初期状態に戻します。工程を最初から確認したい場合に使用します。
SPEED スライダー
再生速度調整（0.2x〜3.0x）
スロー再生（0.2x）で各関節の微細な動きやネタ載せ・包餡などの精密工程をゆっくり確認。高速（3.0x）で全製造サイクルを素早く俯瞰できます。
タッチ操作
モバイル・タブレット対応
スマートフォン・タブレットでのタッチドラッグによるカメラ回転操作に対応。展示会や授業でのモバイルデモにも利用できます。
05
推奨使用フローRecommended Usage Flow
1
🚀 ファイルを開く
HTMLファイルをブラウザにドロップ、または直接開きます。サーバーもインストールも不要。即座に起動し LINE-01（寿司握りロボット）が自動再生されます。
2
🍱 製造ラインを選ぶ
左サイドバーから気になる食品ラインを選択します。右パネルに生産速度・管理温度・衛生等級・素材などの仕様が表示されます。
3
🎥 視点を動かして構造を観察する
ドラッグで視点を回転させ、ロボットの構造を多方向から観察します。スクロールでアーム先端に寄ったり、全体を引いて見たりと自由に調整できます。
4
📊 工程バッジと進捗ゲージを読む
画面左上の工程バッジが現在の製造フェーズを表示します。右パネルのリングゲージでサイクル全体の進捗率（0〜100%）をリアルタイムで確認できます。
5
⚡ スロー再生で詳細分析
SPEED スライダーを 0.2x に設定し、寿司の握り込み圧力変化・和菓子の包餡動作・ケーキのクリームスパイラルなど精密工程をゆっくり観察します。
6
🔁 全ラインを比較する
6種類すべてのラインを見比べて、温度管理・衛生設計・アーム動作・専用機構の違いを体系的に学習します。製造個数カウンターと完成品トレイで達成感も得られます。
06
技術仕様Technical Specifications
ファイル構成
HTML 単一ファイル（1ファイル完結）
外部依存
Webフォントのみ（ロジック依存ゼロ）
描画API
HTML5 Canvas 2D API
3D投影方式
透視投影法（Perspective Projection）独自実装
アニメーション
requestAnimationFrame（最大 60 fps）
収録製造ライン数
6 種類（LINE-01〜LINE-06）
対応ブラウザ
Chrome / Firefox / Safari / Edge（最新版）
タッチ操作
シングルタッチドラッグ対応
フォント
Shippori Mincho / Zen Kaku Gothic New / JetBrains Mono
レスポンシブ
Canvas ウィンドウサイズ自動追従
カラーテーマ
和食ダーク（琥珀・暖色系）
エフェクト種類
蒸気・火花・スプレー・クリームスパイラル等
カスタマイズについて：
ソースコードの
robots 配列を編集することで各ラインの仕様値（生産速度・温度・衛生等級など）を変更できます。
また drawFns に新しい描画関数を追加することで製造ラインを容易に拡張できます。
アームの軌跡は三角関数ベースのため、係数を変えるだけで動作パターンを柔軟に調整できます。