TextForHSP

[HSP]

英語教育研究のためのプログラミング：HSPの基礎テキスト

 TOC

00. プログラミングのココロ --- HSP3を例に ---
01. 文字、ボタン、ラベルと画像
02. 変数、条件と繰返し、サブルーチン
03. 配列、繰り返し、データの記録と保存など
04. 画像と音声の取り扱い、それとメッセージボックス
05. 応用例：リスニング教材、解答時間の記録、ディクテーション
06. 音声の録音と外部ファイルからのデータ取り込み
07. マルチメディア教材の応用例：複数の画像の操作と「透明」ボタン
08. 学習効果の分析：学習の前後における平均点の推移

• 英語教育研究のためのプログラミング：HSPの基礎テキスト
  • TOC
• 00. プログラミングのココロ --- HSP3を例に ---
  • はじめに
    • プログラミングとは、命令を書いていくこと。
    • 「プログラミング言語」
    • プログラミングで頭を使うところ
    • 上達のコツ
  • HSPの特徴：なぜこんなマイナーなプログラミング言語を使うのか？
    • メリット
    • 注意点
    • Documents in English
  • HSPのダウンロードとインストール
    • 注意点
  • HSPの使い方
    • 命令を書いて、実行する
    • 書いた命令を「コンパイル」して実行ファイルを作成する
  • HSPの表記法
  • 命令の実行
• 01. 文字、ボタン、ラベルと画像
  • 01.1 HSPの基礎１：文字、ボタン、ラベル
    • HSPの練習　「プレゼンテーション」
    • 作業手順
    • コマンドの説明
    • color
    • boxf
    • ブロック（段落）ごとの流れを考える
    • button "Start", *step1
    • 「実行ファイル自動作成」
  • 01.2 画像の利用
    • 画像の取り扱い
  • 01.3 簡単な教材「Fraction」
  • 今日の課題
• => TextForHSP02

00. プログラミングのココロ --- HSP3を例に ---

2022-05-26 sugiura@nagoya-u.jp

 はじめに

プログラミングとは、命令を書いていくこと。

• 「アイデア（したいこと）を、どう表現したら良いか」

「プログラミング言語」

• 表現に使える「単語」と「文法」を知る。
• 言語」によって「単語」と「文法」が違う。

プログラミングで頭を使うところ

• 「単語」と「文法」を、どう組み合わせたら表現できるか。
• アイデアを、どういうふうに考えると表現しやすいか。

上達のコツ

1. 参考書を手元におく

『オフィシャル HSP3でつくる！はじめてのプログラミングHSP3.6＋3Dish入門』

1. 「決まり文句」を覚える
2. 自分のノートを作る
   1. 授業中、何を聞いてもよいですが、
   2. 聞いたことは必ずノートに書いてください。
   3. 同じことを二度聞いてはいけません。

 HSPの特徴：なぜこんなマイナーなプログラミング言語を使うのか？

• もともと個人がコンピューターゲームを作るために作られた言語
• 英語の教材開発に必要な要素は、ゲーム開発に必要な要素と同じ

メリット

• 個人向け　（大規模開発には向かない）
• 敷居が低い：使えるようになるまでが簡単（クリックしてインストールするだけ）
• 実行プログラムが簡単にできる（メニューから選ぶだけ）（HSP使ってない人も実行できる）
• 必要に応じて拡張できる
• 無料

注意点

• Windows用が基本
• 命令を文字で書いていく　（GUIで「部品」を並べるわけではない）
• 事実上、日本でしか使われていない
• Windowsが日本語でない場合
  • 地域と言語を日本・日本語に設定する

Documents in English

https://www.onionsoft.net/hsp/v36en/doclib/hsp3win.html
http://lhsp.s206.xrea.com/index.en.html

 HSPのダウンロードとインストール

https://hsp.tv/idman/download.html

1. 「Free Download HSP」をクリック
2. ダウンロードしたファイル「hsp36.exe」をダブルクリックしてインストール

「WindowsによってPCが保護されました」と出たら、
「詳細情報」をクリックして、確認して、
「実行」する

注意点

• Windowsのファイルの拡張子を表示するように設定しておくこと
• HSPスクリプトエディタ―の「ツール」＞「オプション」で、
  • 左のメニューの「エディタ」＞「表示」で、
  • 「非文字の可視化」をすべてチェックを入れて表示するように設定

 HSPの使い方

命令を書いて、実行する

1. HSPスクリプトエディタ　を起動する。
2. 開いた画面に、命令（スクリプト）を書いていく。（例： mes "Hello"）
3. 命令を書いたら「メニュー」の「HSP」から「コンパイル＋実行」を選んで、実行
4. 「メニュー」＞「ファイル」＞「名前を付けて保存」
   1. 保存した場所を覚えておいてね

書いた命令を「コンパイル」して実行ファイルを作成する

1. 「メニュー」の「HSP」から「実行ファイル自動作成」を選ぶ
2. スクリプトファイルが保存されているフォルダー内に「hsptmp.exe」という実行ファイルができている
3. このファイルがあなたが開発した「ソフトウェア」です。名前は適当に変えてよいです。

 HSPの表記法

• 命令は、半角英数文字で。
• 「目的語」（引数）をとる命令もある。
• 原則、一文一命令。文末は「改行」
  • （「:」（コロン）でつなげて「複文」にしてもよい。）
• コメントを書いておくこともできる。日本語OK。
  • 「;」以降（より右側）はコメント
• 書く時の習慣：インデントで「レベル」をわけて見やすくする。
  • 半角スペース
  • タブ
  • ★全角スペースはだめ！

 命令の実行

1. 命令は、上から順番に実行されていく。（流れていくイメージ）

2. 命令は「段落」ごとに「ラベル」（見出し）をつけておく。

• ラベルの名前は、半角英数文字で、適当につける。
• ラベルの前に「*」をつける。（例： *step1）
• ラベルはインデントしない。

3.「段落」単位で順序を変えて実行させることもできる。 （流れを変える）
　goto 行き先のラベル名

goto *step3

01. 文字、ボタン、ラベルと画像

  01.1 HSPの基礎１：文字、ボタン、ラベル

HSPの練習　「プレゼンテーション」

• サンプルスクリプト： presentation.hsp(161)

作業手順

1. HSPスクリプトエディターを起動する
2. presentation.hsp ファイルを開く。
3. 「ファイル」で「名前を付けて保存」（自分でフォルダーを決めておく）
4. メニュー「HSP」から「コンパイル＋実行」

コマンドの説明

• 文字列は引用符で囲む
• メニュー「ヘルプ」から「HSPキーワード検索」

	pos
	font
	mes
	button
	stop
	cls
	wait
	end

• コメント「;」を使って、部分的に命令を実行しないようにしてある。

color

• 色の指定: R, G, B （それぞれ0から255の範囲で）

http://www.peko-step.com/tool/colorchart.html
checkColor.hsp

boxf

• 四角に塗りつぶす。colorで色を指定してから、これで範囲を指定（座標：左上・右下）
• コロン「:」を使って、二つの命令を一行に

ブロック（段落）ごとの流れを考える

*ラベル

で、ブロックに見出しをつけて、

button "Start", *step1

で行き先を指定する

「実行ファイル自動作成」

• ソースコードと同じフォルダー内に作成される「hsptmp.exe」
• 出来上がったファイル名(hsptmp)は自由に変えてよい。
• これを作っておけば、HSPがインストールされてないPCでも実行可能。

  01.2 画像の利用

• サンプルスクリプト：presenPictures.hsp(131)
  • 画像ファイルは、スクリプトと同じフォルダーに入れる。
  • 例）flower.jpg(1227)

picload "ファイル名", オプション

• オプション
  • 1 を指定して画像を表示

picload "flower.jpg", 1

• 事前に、表示する座標を指定する。

pos 200, 300
picload "flower.jpg", 1

画像の取り扱い

• Windowsの「ペイントツール」で手を加える。大きさ調整など。
• 「ツール」＞「ペイントツールを開く」で開く。
• 画像ファイルは、HSPのスクリプトと同じフォルダーに保存すること。

 01.3 簡単な教材「Fraction」

• bunsuu.hsp

bunsuu.hsp(67)

  今日の課題

• 上で見たスクリプトをもとに、自己紹介、研究紹介、絵本、教材等を作ってください。
  • これだけでも「文字」と「絵」を使った「教材」ができますね。

=> TextForHSP02