Flowchart Maker クイックリファレンス

対象バージョン: ver.0.1.11

Flowchart Maker は、フローチャートを組み立てながら Python プログラムを作成・実行するツールです。ブラウザで次の URL を開いて使います（インストールは不要です）。作業内容はブラウザに自動保存されます。

https://moss-yk.com/tools/flowchart/

この授業では、第04回以降の課題をこのツールで組み、書き出した .pflow ファイルを Canvas LMS に提出します。この資料は、ツールの操作に迷ったときにいつでも見返してください。

1. 画面の見方

• 上部: 学籍番号・課題番号の入力、実行、ファイルの入出力、元に戻す、クリア
• 左側（キャンバス）: フローチャート。記号の間にある ＋ からブロックを追加
• 右上（選択中のブロック）: 選択したブロックの内容を編集
• 右中央（実行結果）: 実行した結果やエラーを表示
• 右下（生成された Python コード）: フローチャートから自動生成されたコードを表示

表示が小さいときは、キャンバス左下の ＋ / － で拡大・縮小できます。右側との境界線は左右にドラッグできます。

2. ブロックを追加する

1. 追加したい位置の ＋ を押します。
2. 「ブロックを追加」画面から種類を選びます。
3. 追加されたブロックが選択され、右側に編集欄が表示されます。

ブロック	用途	入力例
変数 / 値	変数への代入、式の実行	total に 0、または nums.append(i)
出力	print(...) で結果を表示	total、"完了"
入力	input(...) の結果を変数へ代入	変数 name、メッセージ 名前:
条件分岐	条件により処理を分ける	score >= 60
for 繰り返し	指定した範囲やリストを繰り返す	変数 i、反復対象 range(10)

3. ブロックを編集する

キャンバス上の記号を押すと、右上に編集欄が表示されます。入力内容はすぐにフローチャートと Python コードへ反映されます。

文字列は Python と同じように引用符で囲みます。例えば こんにちは を表示する場合は、出力ブロックへ "こんにちは" と入力します。

3.1 変数 / 値ブロック

長方形の処理記号です。変数へ値を入れる処理や、リストへ値を追加する処理に使います。

• 変数: 値を入れる変数名を入力します。例: total
• 値: 変数へ入れる値や計算式を入力します。例: 0、total + score
• 入力例の画面では、Python コード total = 0 が生成されます。
• 変数欄を空にすると、値欄がそのまま式になります。例: 値欄へ nums.append(i)

変数名は半角英数字と _ を使い、数字から始めないようにします。文字列を値にするときは、"東京" のように引用符で囲みます。

3.2 出力ブロック

平行四辺形の入出力記号です。変数の値やメッセージを実行結果へ表示します。

• 編集欄には、print() のかっこ内に入れる式を入力します。
• total と入力すると print(total) が生成されます。
• "完了" と入力すると文字を表示できます。
• 文字と数値を一緒に表示する例: "合計: " + str(total)

合計 のような文字を引用符なしで入力すると、Python は変数名として扱います。文字を表示したいときは必ず引用符で囲みます。

3.3 入力ブロック

平行四辺形の入出力記号です。実行中に利用者が入力した内容を変数へ保存します。

• 変数: 入力結果を保存する変数名。例: name
• 入力メッセージ: 入力画面に表示する案内。例: 名前を入力:
• 入力例では name = input("名前を入力: ") が生成されます。
• 「実行」を押すと入力画面が表示されるので、値を入力して確定します。

input() の結果は文字列です。数として計算する場合は、後ろに変数 / 値ブロックを追加し、例えば変数を age、値を int(age) とします。

3.4 条件分岐ブロック

ひし形の判断記号です。条件が成り立つかどうかで、実行する処理を分けます。

• if の条件式: score >= 60 のように、結果が True / False になる式を入力します。
• 条件が成り立つ場合は右側の True、成り立たない場合は左側の False へ進みます。
• 各枝の ＋ を押して、その場合に実行するブロックを追加します。
• 画面例では、60点以上なら「合格」、それ以外なら「不合格」を表示します。
• 「分岐を追加」を押すと elif を追加し、3通り以上に分けられます。

比較で「等しい」を表す記号は == です。score = 60 ではなく score == 60 と入力します。文字列との比較は name == "山田" のように書きます。

3.5 for 繰り返しブロック

ひし形の判断記号です。指定した回数、またはリストの要素数だけ内側の処理を繰り返します。

• 変数: 繰り返すたびに値が入る変数。例: i
• 反復対象: 繰り返す範囲やリスト。例: range(5)、nums
• ブロック内の ＋ から、繰り返したい処理を追加します。
• range(5) の場合、i は 0, 1, 2, 3, 4 の順に変化します。
• 画面例は for i in range(5): を生成し、0から4までを順に表示します。

range(5) は5を含みません。1から5まで繰り返す場合は range(1, 6) と入力します。

条件分岐や繰り返しの内側が空の場合、生成されたPythonコードには、何もしないことを表す pass が自動的に入ります。

4. 実行する

1. 右下の Python コードを見て、入力内容を確認します。
2. 上部の「実行」を押します。
3. 結果を右側の「実行結果」で確認します。

初回実行時だけ実行環境の読み込みに時間がかかる場合があります。「実行環境: 準備完了」になれば次回からすぐ実行できます。入力ブロックがある場合は、表示された入力画面へ値を入力します。

赤字でエラーが出たら、最後の行を手がかりに、選択中のブロックの式・引用符・変数名などを確認してください。

5. 修正・コピー・削除

• 元に戻す / やり直し: 上部のボタン、または Ctrl + Z / Ctrl + Y（Mac は Cmd）
• コピー / 切り取り: ブロックを選択し、右側のボタンを押す
• 貼り付け: 貼り付け先の ＋ を押し、「コピーしたブロックを貼り付け」を選ぶ
• 削除: ブロックを選択して「削除」を押し、確認画面で確定
• クリア: フローチャート全体を空にする。誤ってクリアしても「元に戻す」で復元可能

分岐・繰り返しをコピーまたは削除すると、中にあるブロックもまとめて対象になります。

6. ファイルを出力して提出する

1. 学籍番号を半角で入力します（例: 2xB62345（自分のフルの学籍番号））。
2. 教員から指定された課題番号を入力します（例: 12-1（課題ページの指示に従います））。
3. 「ファイル出力」を押します。
4. 2xB62345_12-1.pflow のようなファイルが保存されたことを確認します。
5. 指定された提出先へ .pflow ファイルを提出します。

学籍番号は フルの形式（この授業では 2xBxxxxx）で入力します。提出前に、ファイル名の学籍番号と課題番号を必ず確認してください。

続きから作業する

上部の「ファイル読込」を押し、保存した .pflow ファイルを選びます。読込後はフローチャートと課題番号が復元されます。提出ファイルには所有者情報があるため、別の学籍番号では再出力できません。

7. 提出前チェック

• 学籍番号と課題番号は正しい
• 「実行」でエラーが出ない
• 実行結果が課題の指示どおりになっている
• 分岐の True / False、繰り返しの範囲が正しい
• 出力したファイルの拡張子が .pflow になっている
• 最後に出力した最新ファイルを提出している

困ったとき

• 画面を再読み込みした: 通常は自動保存された内容が復元されます。
• どこに追加すればよいか分からない: 処理を入れたい矢印上の ＋ を押します。
• 文字が変数として扱われてエラーになる: 文字列を "..." で囲みます。
• 実行が終わらない: 繰り返し回数や条件を確認し、必要ならページを再読み込みします。
• ファイル出力できない: 学籍番号の形式、課題番号、ネットワーク接続を確認します。
• 提出ファイルを別の学籍番号で出力できない: 読み込んだ提出ファイルは最初の学籍番号に固定されています。教員へ相談してください。