START
通常速度で再生します。
HyperPictoch ユーザーガイド（日本語）
このガイドは、画面全体の説明と基本操作を文章で確認しつつ、主要ボタンを画像で参照できるようにまとめたものです。
0. はじめての3分（最短で1本動かす）
まずは「動く楽しさ」を先に体験して、そのあとで細かい機能を覚えるのがおすすめです。
- 最初から表示されている人型タブで、
実行ボタンが押されたときブロックを置きます。 - その中に
[1] 秒で ... 移動 待ちするか[1] 秒で ... 回転 待ちするを1つ入れます。 STARTを押して動きを確認します。思った通りでなければ数値だけ変更して再実行します。
初心者向けチェック:
1) まず「1個だけ」ブロックを動かす。
2) 次に「待ち/待たない」を切り替える。
3) 最後にタブを増やして同時動作に進む。
最初から一気に複数機能を使うより、失敗の原因を切り分けやすくなります。
1) まず「1個だけ」ブロックを動かす。
2) 次に「待ち/待たない」を切り替える。
3) 最後にタブを増やして同時動作に進む。
最初から一気に複数機能を使うより、失敗の原因を切り分けやすくなります。
1. 画面レイアウト（スクリーンショット）
まず全体構成を確認してから、各ボタンの説明に進んでください。
主なエリア
- ピクトグラムのプレビュー（左上）: 再生結果を表示します。背景色やマークはブロックで制御します。
- タイトル入力欄: 作品名を入力するとブラウザのタイトルも更新されます。
- プログラム作成エリア（右）: Blockly ワークスペース。カテゴリからブロックを配置します。
- 操作ボタン:
START
FAST
STOP
RESTART
CLEAR
- 機能ボタン: 画像保存、GIF 保存、
.hpt書き出し、読み込み、URL コピー、座標表示。 - 言語セレクタ: UI の表示言語を選択します。
- タブ操作: タブの追加・複製・削除・名称変更を行います。
3. 概要
HyperPictoch は、人型ピクトグラムと図形をブロックで組み合わせて、アニメーションやポスターを作る Web アプリです。pic（人型）と obj（図形）タブを切り替えて動きを定義します。
多言語 UI、ポーズ（動作）再利用、メッセージによるトリガー、視線・表情演出（見られる系）に対応しています。
用語メモ:
迷ったら「人が動く処理は pic、背景や図形は obj」と覚えると整理しやすくなります。
pic タブは「人型の動き」を作る場所、obj タブは「図形や文字」を描く場所です。迷ったら「人が動く処理は pic、背景や図形は obj」と覚えると整理しやすくなります。
4. 基本ワークフロー
- 土台を作る: タイトル入力後、最初は1タブだけで開始します。人型を動かすなら pic、図形を描くなら obj を使います。
- 入口を作る: 最初に
実行ボタンが押されたときを置き、その中へ命令をつなぎます。 - 1命令ずつ増やす: いきなり長いプログラムを組まず、1命令追加するたびに
STARTで確認します。 - 同期を調整する: 複数キャラや図形を使う場合は、
待つ/待たない、動作をする、メッセージ送受信でタイミングを合わせます。 - 保存する: 区切りごとに
.hpt保存。完成後に PNG / GIF / URL を書き出します。
失敗しにくい進め方:
「同時に3つ以上の原因を作らない」がコツです。
例: 位置も時間も回転角度も同時に変更すると、どれが原因で崩れたか分かりにくくなります。
「同時に3つ以上の原因を作らない」がコツです。
例: 位置も時間も回転角度も同時に変更すると、どれが原因で崩れたか分かりにくくなります。
4.5 同期の基本（待ち・動作定義・メッセージ）
「思った順番で動かない」ときは、ほぼこの節の内容で解決できます。
4.5.1 待ち / 待たない
- 待ちあり: 命令が終わるまで次の命令へ進みません。順番どおりに実行されます。
- 待ちなし: 次の命令へすぐ進むため、動きが重なって見えます。
4.5.2 「動作の定義」と「動作をする」
動作 [A] の定義は「関数を登録する」ブロックです。動作 [A] をするは、登録済みの動作を呼び出すブロックです。
重要: 目で見える「配置位置」ではなく、実際には
「先にセリフが出る」「後で動く」などの違和感がある場合は、まず
実行ボタンが押されたとき の中で呼ばれた順で進みます。「先にセリフが出る」「後で動く」などの違和感がある場合は、まず
待ち 設定と呼び出し順を確認してください。
4.5.3 メッセージ送受信
メッセージ [X] を受け取ったときは、受信時に実行する処理を登録します。メッセージ [X] を送るを実行すると、同じ名前を待っている処理が動きます。- 複数タブの同時スタートやリレー処理（A完了後にB開始）で有効です。
5. ブロック一覧（画面表示ベース）
この節は、実際にエディタ上で見えるブロックの表示文と入力項目を、初心者向けに整理した一覧です。
5.1 人型 / Human
| ブロックの表示 | 引数名 |
|---|---|
[part] を [second] 秒で [rod] 回りに [angle] 度、回転 [W] する。 | part, second, rod, angle, W |
[second] 秒で [xdir] に [x] 、 [ydir] に [y] 移動 [W] する。 | second, xdir, x, ydir, y, W |
[second] 秒待つ | second |
時刻を [time] 秒にする | time |
体の大きさを標準の [value] 倍にする。 | value |
[value] と話す。 | value |
[value] と [second] 秒 [W] | value, second, W |
[value] と [second] 秒 [W] | value, second, W |
[part] にペンを持つ。 | part |
[part] のペンを放す。 | part |
5.2 図形 / Object
| ブロックの表示 | 引数名 |
|---|---|
物体定義 | — |
[second] 秒で [xdir] に [x] 、 [ydir] に [y] 移動 [W] する。 | second, xdir, x, ydir, y, W |
( [x1] , [y1] )から( [x2] , [y2] )へ 線引き する。 | x1, y1, x2, y2 |
中心( [x] , [y] )、横 [w] 、縦 [h] 、 [angle] 度回転した円を描く。 | x, y, w, h, angle |
座標( [x] , [y] )、大きさ [size] で， [value] と書く。 | x, y, size, value |
線の太さを [width] にする。 | width |
色を [COLOR] にする | COLOR |
[second] 秒待つ | second |
時刻を [time] 秒にする | time |
5.3 イベント / メッセージ / ポーズ
| ブロックの表示 | 引数名 |
|---|---|
実行ボタンが押されたとき | — |
メッセージ [MSG] を送る | MSG, POSE |
メッセージ [MSG] を受け取ったとき [DO] [MSG] | MSG, DO |
動作 [POSE] をする | POSE, DO |
動作 [POSE] の定義 | POSE, DO |
補足: receive_message と receive_pose は「受信時に実行する処理の登録」です。実際の開始は send_message または set_pose の呼び出しタイミングで決まります。
5.4 Swim
| ブロックの表示 | 引数名 |
|---|---|
前に [value] 進む。 | value |
後ろに [value] 進む。 | value |
左回りに [value] 度回る。 | value |
右回りに [value] 度回る。 | value |
[second] 秒で前に [value] [W] | second, value, W |
[second] 秒で後ろに [value] [W] | second, value, W |
[second] 秒で左回りに [value] 度 [W] | second, value, W |
[second] 秒で右回りに [value] 度 [W] | second, value, W |
浮かぶ。 | — |
潜る。 | — |
5.5 その他の主要ブロック（最新版）
| ブロックの表示 | 引数名 |
|---|---|
正面を向く | — |
側面を向く | — |
直立正面に戻る。 | — |
体を透明にする。 | — |
色を [COLOR] にする | COLOR |
背景色を [COLOR] にする | COLOR |
ペンの線の太さを [width] にする。 | width |
ペンの線の端を [kind] にする。 | kind |
人型ピクトグラムをスタンプする。 | — |
マークを [種類] にする。 | 種類 |
図形を全て消す。 | — |
[表情] のお面を付ける。 | value |
お面を外す。 | — |
誰かに [表情] の表情で見られる。 | value |
誰かに見られるのをやめる。 | — |
確率 [pr] で 実行 | pr |
確率 [pr] で 実行 / そうでなければ | pr |
初心者向け:
新しいブロックを試すときは、まず単体で1つだけ置いて動作確認し、その後で既存の流れへ組み込むと原因切り分けが簡単です。
新しいブロックを試すときは、まず単体で1つだけ置いて動作確認し、その後で既存の流れへ組み込むと原因切り分けが簡単です。
6. 再生ボタン（画像説明）
プレビューの実行と停止を行うボタンです。
FAST
高速再生します。
STOP
現在フレームで停止します。
RESTART
先頭に戻して再生します。
CLEAR
テンプレート人型のみの状態に戻します。
補足説明
- START / FAST: 同じプログラムを通常速度または高速で再生できます。
- STOP / RESTART: 途中停止と先頭からの再実行を切り替えながら動きを確認できます。
- CLEAR: テンプレート状態へ戻して作り直しを始めるときに使います。
7. 保存・共有ボタン（画像説明）
作品の保存、読み込み、URL 共有に関するボタンです。
画像保存（PNG）
プレビューを PNG で保存します。
GIF 保存
アニメーション全体を GIF にします。生成に少し時間がかかります。
コード保存（.hpt）
全タブの JSON / XML を含む .hpt を保存します。
読み込み（置換）
.hpt を読み込み、現在のタブ構成を置き換えます。
URL コピー
状態を code クエリに Base64 で埋め込み、共有 URL をコピーします。
座標表示
プレビュー上の座標グリッド表示を ON/OFF で切り替えます。
8. タブ管理ボタン（画像説明）
人型/図形タブの追加、複製、削除、書き出しに使います。
+Human
pic（人型）タブを追加します。
+Object
obj（図形）タブを追加します。
名称変更
アクティブタブの名称を変更します。
複製
アクティブタブをコピーして同内容のタブを作成します。
削除
アクティブタブを削除します（最低1タブは残ります）。
アクティブのみ保存
選択中のタブだけを .hpt として保存します。
追加読み込み
既存タブを残したまま、別ファイルのタブを追加します。
補足説明
追加: +Human で pic、+Object で obj を追加します。人型タブには Events/Human/Swim（swim=true のとき）カテゴリが表示され、図形タブには Shapes が表示されます。
並べ替え・複製: タブはドラッグで並べ替え可能です。pic / obj タブを左右にドラッグすると、表示順（重なり順）もその順番に変わります。同名は XXX2 のように自動で末尾が付きます。複製ボタンでタブ全体をコピーできます。
アクティブタブの書き出し: 「アクティブのみ保存」ボタンで選択中のタブを .hpt として保存します。全タブ書き出しはコード保存ボタンを使います。
9. ファイル入出力と共有（画像説明）
9節は、保存・読み込み・共有に関わるボタンを画像ごとに確認できるようにしています。
画像保存（PNG）
プレビューを PNG 画像として保存します。
GIF 保存
アニメーション全体を GIF として保存します。
コード保存（全タブ）
全タブを含む .hpt ファイルを保存します。
アクティブのみ保存
選択中タブだけを .hpt で保存します。
読み込み（置換）
.hpt を読み込み、現在のタブ構成を置き換えます。
追加読み込み
既存タブを残したまま、別ファイルのタブを追加します。
URL コピー
状態を code クエリに埋め込んだ共有 URL をコピーします。
URL オプション:
?lang=en で英語 UI、?swim=true で Swim カテゴリ追加。
10. よくある失敗と対処（初心者向け）
「動かない」「順番が違う」の多くは、入口ブロック不足か同期設定のミスです。
| 症状 | 主な原因 | 対処手順 |
|---|---|---|
| 何も動かない | 実行ボタンが押されたとき の中に命令がない |
1) 入口ブロックを確認 2) その直下に1命令だけ置いて START |
| 順番が想定と逆になる | 待ち がOFFで同時進行になっている |
1) 対象命令を「待ち」に変更 2) 1命令ずつ再生して順序を確認 |
| 動作Aを呼んでも反応が不安定 | 動作をする と 動作の定義 の対応名が不一致 |
1) 動作名の表記ゆれ確認 2) 一度同名を再選択して保存し直す |
| メッセージで連携しない | 送信名と受信名が違う／送信前に受信側ロジック未配置 | 1) 送受信名を同一にする 2) 受信ブロックの中に処理を入れる |
| 作業が消えた | 保存前にリロード、または置換読み込みを実行した | こまめに .hpt 保存。大きな変更前は複製タブで退避 |
授業運用の推奨:
10分ごとに「保存タイム」を入れると、初心者の作業ロストを大幅に減らせます。
10分ごとに「保存タイム」を入れると、初心者の作業ロストを大幅に減らせます。