かならずお読みください→
さてここでp-43hフォルダを開いて中を確認しましょう。
ここで一つ確認してください。 あなたのパソコンでは一番初めのファイルが、apad.png と表示されていますかそれとも単に、apad と表示されていますか。 多くの方のパソコンでは一番目のファイルは、apad.png ではなく、apad と表示されていると思います。 apad.png の後ろに付いている .png や .mp3 は拡張子といいファイルの種類を示します。例えば .png は png形式の画像ファイル、.mp3 は mp3形式の音声ファイルです。拡張子があるとファイルの名前をみるだけで種類がわかります。 もちろんアイコンでファイルの種類を見分けることもできますが、拡張子を表示させたほうが見間違いなどのミスを減らすのに役に立ちます。
パソコンを活用している人は、拡張子を表示するように設定を変更していることが多いようです。私もうっかりミスを減らすためにそのようにしております。皆さんにも設定を変えて拡張子を表示するようにお勧めしたいと思います。
拡張子の表示設定の変更方法は以下のリンクをご覧ください。 googleで、キーワード『拡張子』と『表示設定』の両方含むサイトを検索します。 （具体的には、キーワードを間にスペースをはさんで列記します。）
google検索 キーワード『拡張子』と『表示設定』の両方を含むサイト
ここから先はファイル名をすべて拡張子付きで記載します。 拡張子を表示しない設定のパソコンをお使いになる方は拡張子を無視してお読みください。
さあ p-43hフォルダを開いて中を確認しましょう。
そこには、 20個のファイルとjsフォルダ。さらに jsフォルダの中にはmain.js とlib フォルダ。さらに lib フォルダの中には enchant.js と plugin フォルダ plugin フォルダの中には、nineleap.enchant.js と ui.enchant.js があります。配置構造は以下のようになっています。
apad.png
end.png
font0.png
gameover.mp3
icon0.png
index.html
jump.mp3
kotoba1.gif
kotoba1.mp3
kotoba2.gif
kotoba2.mp3
kotoba3.gif
kotoba3.mp3
kotoba4.gif
kotoba4.mp3
kotoba5.gif
kotoba5.mp3
pad.png
start.png
start0.png
js フォルダ
└ main.js
└ lib フォルダ
└ enchant.js
└ plugins フォルダ
└ nineleap.enchant.js
└ ui.enchant.js
p-43hフォルダの中のファイルは間違いなくそろっているでしょうか。 ご確認ください。全てがそろっていないと正常な動作ができません。このような細かい文字を確認する作業はパソコン仕事でつらいところです。
前回、index.html をダブルクリックしたらエンチャント文字盤がスタートしました。この他のファイルもダブルクリックしてみましょう。
まず、gameover.mp3 をダブルクリックしてください。パソコンにインストールされている、Windows Media Player 等の音楽再生ソフトが起動し、聞き覚えのある短い音が聞こえたと思います。 次に、start0.png をダブルクリックしてください。ペイントなどの画像ソフトが立ち上がって、これまたどこかで見たことがある画像が表示されたと思います。
次に
kotoba1.gif と kotoba1.mp3 を
続いて
kotoba2.gif と kotoba2.mp3 を
次に
kotoba3.gif と kotoba3.mp3 を
kotoba4.gif と kotoba4.mp3 を
どれもみんな、4つのことばwith Drops で使われている画像と音声です。
1は左上、2は右上、3は左下、4は左下に表示されます。
そして
kotoba5.gif と kotoba5.mp3
はこれから使おうとしている5番目のことばです。
さてここから、本格的？な作業が始まります。
まずやることは、
Ａ kotoba1.gif を kotoba6.gif に変更する。
次に
Ｂ kotoba5.gif を kotoba1.gif に変更する。
です。
ファイルの名前を変更する手順は
１ 変更するファイルをマウスでクリックして選びます。
２ f２キー（キーボードの数字キーの上の段に、f１、f２、、、と並んでいます）を押します。ファイル名の文字が反転してカーソルも表示されます。
３ キーボードを使い新しい名前を入力します。
４ enterキーで決定します。このとき同じ名前のファイルがすでに存在するとエラーメッセージが表示されます。（拡張子が表示されていないと名前が同じか同じでないかわかりにくいですね。）
Ａ kotoba1.gif を kotoba6.gif に変更する。
Ｂ kotoba5.gif を kotoba1.gif に変更する。
ここまでできましたか？
失敗しても大丈夫。何回でもやり直しできます。（人生もこうあってほしいものです）
だれもあなたをおこりません。
だれもあなたをせめません。
自分でも何がなんだかわからなくなってしまったら、まず落ち着いてください。
そして、p-43hフォルダを削除して、ダウンロードしたファイルの展開からやり直しましょう。
さあできたでしょうか？
ここで、index.html をダブルクリックしてみましょう。 上のような画像が現れます。先ほどと比べると左上の画像が変更されています。 kotoba5.gif が kotoba1.gif の代わりに現れたのです。 なぜか？ あなたが kotoba5.gif を kotoba1.gif に変更したからです。
つぎに左上の画像をクリックしてみましょう。
『こんにちは』と発声しますね。
そこで、次は音を変更しましょう。
Ａ kotoba1.mp3 を kotoba6.mp3に変更する。
Ｂ kotoba5.mp3 を kotoba1.mp3に変更する。
ここまでできましたか？
ここでみたび、index.html をダブルクリックしてみましょう。
今度は『おはよう』と発声したことでしょう。
『エンチャント文字盤４つのことば』は画面左上に、kotoba1.gif という名前の画像が表示され、それをクリックするとkotoba1.mp3という名前の音が再生するようにプログラムされています。ですからそのファイルを入れ替えると、画像も音も変更できるのです。
おつかれさまでした。これであなたはファイル操作によって、 ５種類の画像と音を自由な場所に配置できるようになりました。
それでは練習問題をどうぞ。
『おはよう』を右下に表示するようにするにはどうしたらいいでしょう？
つづく
2017/06/16 公開
研究企画課リハ工学科にもどる