{{category HSP}}
!!!英語教育研究のためのプログラミング：HSPの基礎テキスト
!!TOC
[00. プログラミングのココロ --- HSP3を例に ---|https://sugiura-ken.org/wiki/wiki.cgi/exp?page=TextForHSP#p2]
[01. 文字、ボタン、ラベルと画像|https://sugiura-ken.org/wiki/wiki.cgi/exp?page=TextForHSP#p10]
[[02. 変数、条件と繰返し、サブルーチン|TextForHSP02]]
[[03. 配列、繰り返し、データの記録と保存など|TextForHSP03]]
[[04. 画像と音声の取り扱い、それとメッセージボックス|TextForHSP04]]
[[05. 応用例：リスニング教材、解答時間の記録、ディクテーション|TextForHSP05]]
[[06. 音声の録音と外部ファイルからのデータ取り込み|TextForHSP06]]
[[07. マルチメディア教材の応用例：複数の画像の操作と「透明」ボタン|TextForHSP07]]
[[08. 学習効果の分析：学習の前後における平均点の推移|TextForHSP08]]
----
{{outline}}
!!!00. プログラミングのココロ --- HSP3を例に ---
2022-05-26  sugiura@nagoya-u.jp

!!はじめに

! プログラミングとは、命令を書いていくこと。
*「アイデア（したいこと）を、どう表現したら良いか」

! 「プログラミング言語」
*表現に使える「単語」と「文法」を知る。
*言語」によって「単語」と「文法」が違う。

!プログラミングで頭を使うところ
*「単語」と「文法」を、どう組み合わせたら表現できるか。
*アイデアを、どういうふうに考えると表現しやすいか。

!上達のコツ
+参考書を手元におく
[『オフィシャル HSP3でつくる！はじめてのプログラミングHSP3.6＋3Dish入門』|https://www.amazon.co.jp/dp/B09CP8BD2H/]
+「決まり文句」を覚える
+自分のノートを作る
++授業中、何を聞いてもよいですが、
++聞いたことは必ずノートに書いてください。
++同じことを二度聞いてはいけません。

!!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
+「Free Download HSP」をクリック
+ダウンロードしたファイル「hsp36.exe」をダブルクリックしてインストール

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

!注意点
*Windowsのファイルの拡張子を表示するように設定しておくこと
*HSPスクリプトエディタ―の「ツール」＞「オプション」で、
**左のメニューの「エディタ」＞「表示」で、
**「非文字の可視化」をすべてチェックを入れて表示するように設定
!!HSPの使い方
!命令を書いて、実行する
+HSPスクリプトエディタ　を起動する。
+開いた画面に、命令（スクリプト）を書いていく。（例： mes "Hello"）
+命令を書いたら「メニュー」の「HSP」から「コンパイル＋実行」を選んで、実行
+「メニュー」＞「ファイル」＞「名前を付けて保存」
++<<保存した場所を覚えておいてね>>
!書いた命令を「コンパイル」して実行ファイルを作成する
+「メニュー」の「HSP」から「実行ファイル自動作成」を選ぶ
+スクリプトファイルが保存されているフォルダー内に「hsptmp.exe」という実行ファイルができている
+このファイルがあなたが開発した「ソフトウェア」です。名前は適当に変えてよいです。
!!HSPの表記法

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

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

2. 命令は「段落」ごとに「ラベル」（見出し）をつけておく。
*ラベルの名前は、半角英数文字で、適当につける。
*ラベルの前に「*」をつける。（例： *step1）
*ラベルはインデントしない。

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



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

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

! HSPの練習　「プレゼンテーション」
*サンプルスクリプト： {{ref presentation.hsp}}
!作業手順

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


! コマンドの説明

* 文字列は引用符で囲む
* メニュー「ヘルプ」から「HSPキーワード検索」
{{pre
	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 画像の利用
*サンプルスクリプト：{{ref presenPictures.hsp}}
** 画像ファイルは、スクリプトと同じフォルダーに入れる。
** 例）{{ref flower.jpg}}
{{ref_image flower.jpg}}
 picload "ファイル名", オプション

* オプション
** 1 を指定して画像を表示
 picload "flower.jpg", 1

* 事前に、表示する座標を指定する。
 pos 200, 300
 picload "flower.jpg", 1

!画像の取り扱い

* Windowsの「ペイントツール」で手を加える。大きさ調整など。
* 「ツール」＞「ペイントツールを開く」で開く。
* 画像ファイルは、HSPのスクリプトと同じフォルダーに保存すること。
!!01.3 簡単な教材「Fraction」
*bunsuu.hsp
{{ref bunsuu.hsp}}

!! 今日の課題

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

!!! => TextForHSP02