社会と情報実践報告

HSP はプログラミング授業の新しい選択肢
神奈川県立厚木西高等学校

■１

梁取新平

科目：社会と情報（1 年生 2 単位）
内容：プログラミング
クラス：7 クラス 各 37 名
時間：10 時間時期：1 月～ 2 月先生

ねらい

特長③

■実践のねらいスクリプトエディタが付属している。小中学校では Scratch などのブロック型や Dolittle などの

本校は，神奈川の県央部に位置する全日制普通科の

日本語でのプログラミングが多いので，高校では，学校で，情報科では，１学年に必履修科目として「社より本物のプログラミング作業に近づけるため，英会と情報」を２単位，３年生の必修選択科目に「情報語によるコーディングにチャレンジさせたい。付の科学」を２単位設置している。小・中学校における属のスクリプトエディタはデバッグが F5，ヘルプ

プログラミング教育の影響もあり，「社会と情報」のが F1 を押すだけと簡単である。初学者向けなので，授業でプログラミングを学びたいという意欲をもった

命令や使い方がかなりシンプルな環境である。

生徒が多いのが近年の傾向である。2018（平成 30）

特長④

画像や音声ファイルを扱える。HSP は BASIC

年 3 月告示の「高等学校学習指導要領情報科」におライクな言語であるが，画像や音声の読み込み，表いて，情報科の必修科目が「情報Ⅰ」となり，プログ示，再生などに強いので，ビジュアルを意識したアラミングが大きな単元として設定されることを踏まプリ制作が可能である。

え，現在さまざまなプログラミング環境を授業で導入

特長⑤

実行ファイルを出力できる。アプリに使用すし，試行を繰り返している。ここ２年ほどは，年間のる画像素材や音声素材もまとめてパッケージングしまとめの時期である３学期に，HSP（おにたま氏制作・て１つの実行ファイル（EXE ファイル）に書き出Hot Soup Processer）を利用させていただき，簡単なすことができるので，課題として集める時も扱いやアプリ（ソフトウェア）作りにチャレンジしている。

すく，生徒同士の相互評価の活動などもさせやすい。

「社会と情報」や「情報Ⅰ」でプログラミングを学ばせる目的は，プログラマーを育てることではなく，■全体のカリキュラムの中での位置づけプログラミングでアプリ作りを通して，コンピュータ

本校の「社会と情報」
では，１，２学期は教科書に沿っやスマートフォンが動作する仕組みに関心をもたせてて授業を行い，以下の①から⑦のようなスキルを実習

生徒の創造性を広げ，かつ，自分以外の人が使うことの中で生徒に身につけさせている。このスキルが十分を考えたユーザインタフェースをデザインすることの身についているかどうかで，プログラミングの授業の重要性に気づかせることだと考えている。生徒自身が進めやすさが変わってくるので，できるだけ丁寧に指コンピュータやスマートフォンでやりたいことや課題導している。

を見つけ，それを実現するための手段・ツールとして①英字，記号を含め，正確な文字入力ができる。

気軽にプログラミングに取り組めるようになることが②全角文字と半角文字の違いが見分けられる。

将来的なねらいである。

③画像ファイルを保存したり，簡単な加工をしたり数あるプログラミング言語の中で，高校段階の実習できる（大きさの変更，背景の透明化，適切なファ用言語として HSP を選んだ理由は，HSP が以下のよイル形式での保存）。

うな特長をもっているからである。
特長①④音声ファイルを取り扱うことができる。

導入が簡単である。インストールが不要で，⑤ファイル名の拡張子から，ファイル形式を判別すレジストリを書き換えない。動作が軽い。
特長②

ることができる。

インタプリタ型である。授業で作成するよう⑥自分のアイデア・イメージ・考えをわかりやすくな数十行から数百行程度のアプリであれば処理速度他人に伝えられる。

は全く気にならない。

⑦他人のアイデア・イメージ・考えに耳を傾けて理1

1

解しようと努力し，他人と共通認識を作ることがして書き直させたり，コメントアウトを解除させできる。

ながら説明したりするなどして授業進行をそろえ⑥や⑦はコンピュータの操作スキルではないが，生る工夫を行った。

徒がグループ単位でアプリの設計，コーディング，デ・オリジナルアプリの制作は，単独または 2 人組のバッグ作業，相互評価を行う上で欠かせないスキルとどちらかで行うことを生徒に選択させた。多様ななるので，さまざまな単元の実習の中で生徒に意識さ生徒の希望に配慮する形となった。

せている。そのために，パソコン教室の生徒机には，・ オ リ ジ ナ ル の ア プ リ は， 横 320 ピ ク セ ル × 縦

サインペンやメモ用紙をあらかじめ準備しておき，い480 ピクセルで統一することで，スマートフォつでも利用できるようにしている。

ンでの使用をイメージさせた。生徒にとって，パその上で，１年間の集大成かつ課題解決学習の一環

ソコンのソフトよりスマートフォンのアプリのほとして，プログラミング体験・アプリ制作実習に全員うがよりイメージしやすいと考えたためである。

取り組ませている。年度によって配当時間は変えていなお，HSP は，付属の 3Dish というプラグインるが，下記に 10 時間配当の例を挙げる。

を利用することで，作成したソフトをスマートフォン（Android）用に変換することも可能である（授業では紹介のみ）。

■授業計画

・オリジナルのアプリの種類は，①配当時間
3 学期の 10 時間（1 月～ 2 月）

①日常生活に役立つアプリ②他の生徒を楽しませるアプリ②時間ごとの学習目標と内容
・1 時限：目標・ねらい・評価方法の説明，HSP とのどちらかを選択させた。

エディタの操作，デバッグ，文字の表示

・オリジナルのアプリの制作方法は，ゼロからコー

・2 時限：座標（Ｘ－Ｙ座標による指定），色（光ディングするか，サンプルを改造するかを生徒にの三原色による指定），図形の作成選択させた。生徒自身が各機能の理解度やスキル，・3 時限：画像ファイルの表示（背景とキャラクタ），イメージした目標に応じて選べるようにした。

音声ファイルの読み込みと再生

・授業で説明していない発展的な機能を用いるのは，・4 時限：3 大構造（順次構造・反復構造・分岐構造）生徒自身が調べて扱える範囲内に限定した（教員の理解と実際のコーディング，変数の理解，誕生側も全ての機能を説明できないため）。

月占いアプリの制作
・5 時限：画像ファイルと反復構造，分岐構造を組み合わせて，キー入力に従いキャラクタが移動するアプリを制作
・6 時限：乱数の理解，画像・乱数・分岐・反復を用いて 10 連ガチャのアプリを制作（ここでソーシャルゲームの注意にも触れる）
・7 ～ 9 時限：オリジナルのアプリ（ゲーム）のプログラミング，コードと素材ファイルを１つの実行ファイルに変換して提出フォルダに提出
・10 時限：クラス内で，生徒が作ったアプリ作品を実際に動かし，相互評価を行う③指導上の留意点
実習を行うにあたり，以下のような点を工夫した。
・プログラミングの基本の学習はサンプルに手を入れながら学ぶ形にした。タイピングが苦手な生徒が多いので，コードをゼロから入力するのではな
く，重要な箇所を■に置き換えたサンプルを配布

2

2

■２

図形の作成は，準備■必要なハードウェア

pset 10,10（点）・WindowsOS のパソコン（スペックが低いパソコン

line 120,80,300,400（直線）でも十分に実習ができる）

boxf 200,100,250,200（円）circle 220,220,300,400（矩形）■必要なソフトウェアと，始点や終点を座標で指定することで，好きな大き・HSP スクリプトエディタ（執筆時点での最新安定版さの図形を作成できる。

は 3.5）。インストール不要でフリーで使用できる。

画像の表示は，エディタ本体はフォルダ内の「hsed3.exe」

picload "haikei.jpg"（初期表示）

・画像ファイルを加工する場合はペイントソフトやpicload "chara.gif",1（重ねて表示）

フォトレタッチソフト。画像のトリミングやリサイなどの命令で，用途に応じて使い分ける。

ズ，背景の透明化に対応したもの。
・ファイル名の拡張子をあらかじめ表示しておくよう■ 4 ～ 6 時限にする。

プログラミングの 3 大構造や変数，乱数などの実践的な機能を紹介する。

■必要な素材，材料
・素材用画像ファイルとして学校のマスコットキャラキャラクターが動くアプリの場合，HSP では，セの画像や学校近隣の自治体のゆるキャラなどの画ルアニメーションと似た原理で，キャラクターが動く像，アプリの背景用の画像などを PNG ファイルでたびに背景画像を新たに貼って，少しずれた場所に準備した（透明色が利用できるため）。

キャラクターを貼ることを繰り返すような処理をしている。これには反復処理が必要で，・効果音や BGM 用の音声ファイルを WAV ファイルでいくつか準備した。MP3 や MID も使用可能。

repeat 回数				■３		実践内容

背景を貼る処理
キャラクターを貼る処理
waitloop■ 1 ～ 3 時限

この時間の目標は，生徒がコーディングとデバッグと記述することで実現できる。反復回数を設定しないを繰り返しながら，アプリの土台にさまざまな形式の場合，キー入力などの何らかのアクションを待ち続け情報を表示できるようになることである。

る処理になる。
変数や乱数は，アプリの土台の設定ならrandomize

screen 0,320,480（ウィンドウサイズ）

saikoro=rnd(5)+1

title " タイトル "（アプリのタイトル）

mes " サイコロの目は " + saikoro

で設定できる。のような電子サイコロのサンプルで紹介した。

文字列の表示は，分岐処理と乱数を組み合わせると，スマートフォンのソーシャルゲームで多く見られる「ガチャ」を作成

mes "Hello World!"できる。

で行える。日本語の表示も可能である。
処理を一定時間中断するには，wait 100（単位は 10 ミリ秒）で行えるので，この 3 つの命令だけでもノベルゲームが作成できる。

33いずれも HSP の基本命令だけで作成できるもので＜簡単なガチャシステム＞ある。生徒には，課題を作成する際，１からコーディ

title " ガチャシステム "kane=0

ングしても，サンプルを改造してもよいと指示した。

mes " ガチャ１回 120 円。"

結果的には，80％程度の生徒がサンプルの改造を選

button " 引く ",*kekka

択したが，20％程度の生徒は，一部サンプルからのstop

コピーペーストがあるものの，自分で１からアプリを作成することができた。完成したコードを実行ファイ*kekka		randomize		

a=rnd(10)		

if a==0{

ルに変換する際にやや教員の手助けが必要な生徒もいたが，全員が期日までに課題のプログラムを提出することができた。			color 255,0,0			mes " レアです！ "				}else{＜生徒の作品の例＞
・モグラがエサを探して地下に潜るアプリ			color 0,0,0			mes " ノーマルです "		 }・入力した文章を保存するアプリ		kane=kane+120		mes " 使った金額は "+kane+" 円 "・分岐で結末が変わるノベル（読み物）アプリ		

・ランダムな 3 文字の組み合わせを作るアプリ
・歴史人物占いアプリ

stop

・ギターコードの押さえ方を表示するアプリ

このガチャシステムを紹介すると，多くの生徒が画・タイピング練習用アプリ

像や音声を出すように改良したり，確率を操作して当・時間を知らせるタイマーアプリたりが出ないようにしたりと，アプリを自分で作って・この人は誰だ！クイズが楽しめるアプリ

いる実感をもち始めるようになる。併せて，教員からスマートフォンの適正な利用についての話をして，ソーシャルゲーム依存にならないよう注意も行うと効果がある。
■ 7 ～ 9 時限
これまで学んだ内容やサンプルを参考にして，生徒にオリジナルのアプリを作成するよう指示する。ただし，授業で扱ったサンプルだけでは，アイデアがなかなか出ないので，呼び水代わりに教員も様々なサンプルを作成して生徒に紹介した。この実践の際に教員が作成して生徒に例示したサンプルは次のようなもので▲モグラを操作してエサを探すアプリある。
①星空アプリ（図形，位置，乱数）■ 10 時限②数当てゲーム（文字入力，乱数，分岐処理）

最後には，提出された課題を共有フォルダに入れて，③じゃんけんゲーム（変数，乱数，分岐処理）作成者を伏せたまま，クラス全員で課題プログラムを④クリックで座標表示（位置，変数，キー入力）実行させ，相互評価をさせた。おもに，⑤カラーコード（色情報，変数，ボタン）①アプリとして起動し，必要な動作をするか⑥当たり判定（情報取得，分岐処理，キー入力）②画面構成や使い方の説明など，利用者の目線での⑦スクリーンショット（画像，ファイル保存）

工夫がなされているか（ユーザビリティ）③アプリとしての目新しさや斬新さを基準に評価させた。

44

■４

結果と反応

■６

参考文献等

・おにたま・悠黒喧史・うすあじ『はじめてのプロ■成果と学習者の反応

最後に，生徒たちに自己評価として，プログラミン

グラミング HSP3.4+3Dish 超入門』秀和システム

グでアプリを作成した感想を書かせたところ，次のよ（2014）うな回答が多かった。

・山田友梨『「CuteHSP」ではじめるプログラミング・面白い。もっと本格的なアプリを作りたい。

入門』工学社（2017）

・スマートフォンでも遊べるようにしたい。
・ダウンロードできるようにして，他の友達にもプレイしてもらいたい。
・将来，販売できるようなものを作りたい。
・プログラミングはかなり難しかったが，結果が目に見えるのは楽しかった。
・たった１文字の間違いでうまく動かないのが難しいと思った。
プログラミングは難しいと回答する生徒が多かった
が，将来的な可能性を感じた生徒も多かったことがわかる。当初，生徒が作るアプリはゲームタイプのものが多いのではと予想していたが，メモアプリや自分の趣味に活かせるアプリなど，幅広いジャンルの課題が出来上がったことは大きな驚きだった。プログラミン
グを単なるゲーム作りで終わらせず，課題解決の手段であることを一部の生徒には実感させることができたと思う。

■５

まとめ

「情報Ⅰ」のスタートを見据えたプログラミング教

材の開発は，全国の情報科の先生方が四苦八苦している最中である。そもそもプログラミングを通して何を学ばせるべきなのか，一言で断じるのは難しい。プロ
グラミング言語の選択ひとつ取っても，それぞれの言語には強みもあれば弱みもあり，今回紹介した HSPもあくまでその一例に過ぎない。
今後発展させたい単元としては，HSP でチャットアプリを作成させて，情報通信ネットワークの原理を理解させるなどの方法も試してみたいと考えている。
HSP を活用したプログラミングの授業実践は 3 年程度続けているが，毎年，生徒のアイデアの斬新さには感心させられる。今後も生徒の創造性を伸ばせるようなプログラミング授業を考えていきたい。

5

5