高校向けコンテンツ               
01 インターネット社会における情報科学科の役割,教育について簡単に説明した後に, 簡単なプログラミングを体験していただこうと思います.
この資料は今日すべてはお話しできませんが,ホームページから 利用できますので,興味の湧いた人は勉強に利用して下さい
02 今,みなさんはいろいろな場面で情報技術を利用していますが, 改めて考えてみるとその仕組みはどうなっているか分かりますか?
03 インターネット社会
ちょっと前までは,現実の世界とインターネットで作られる仮想空間という言葉で 分けてきましたが,今では,仮想ではなく,インターネット社会として, ひとつの世界が作り上げられ,買い物やコミュニケーションもしっかり確立された ものとなっています.
改めて,仮想空間という場合は,「セカンドライフ」のような仮想現実を創りあげ, 自分自身の分身,アバターと呼ばれるものを操作する世界をさすのかもしれません.
04 サイバー大学なども作られました.そして多くの大学や通信学校でも インターネットを介して授業を配信するe-ラーニングシステムが利用されています.
岡山理科大学では,よくご存じのようにサイバーキャンパスが 運用されています.
05 インターネット社会を支えるために多くの技術が開発され,発展しています.

動画などの圧縮技術は私(河野)は感動しています.
私が学生の頃でも,テレビなどの映像をキャプチャして デジタル化することは可能でした.しかし,デジタル化するための 作業時間,デジタル化されたファイルの膨大な量,これらを 考えるとデジタル放送は無理な話だろうと思っていました. しかしながら,コンピュータの計算能力の向上,圧縮技術の進歩で デジタル化はあっという間に可能になりました.
06 情報科学科では,3つのコースで学生を教育しています.
07 情報科学科の進路の例です.
08 情報科学科のカリキュラムです.
みなさんも大学や学科を選ぶ際にカリキュラムをチェックしてみましょう.
学科名だけでは,イメージのつかめない学科でもカリキュラムを見れば,どういうことを するのか少しは分かると思います.
たとえば, 情報工学科との違いは「電気」や「物理」の科目はないということですね.
09 卒業研究は各教員の研究室に配属され,研究を行います.
いろいろな内容があります.
マルチメディア系の卒研の例です.
10 教育システム系の卒研の例です.
11 ネットワーク系の卒研の例です.
12 データベース系の卒研の例です.
13 解析・統計系の卒研の例です.
14 どの分野でも情報技術は重要です.
15 さまざまなコンテンツが,インターネット上にあります.
昔は,HTMLの量が多い状況でしたが,今では,画像や動画の量が増えています.
16 今では,毎日データが増加しているので,どれくらいの量があるのか把握できないくらいになっています.
17 みなさん,インターネットはどのように利用していますか?
最近は面白いサイトはありますか?
18 ゲームやネタものとか最近は,Youtubeのような動画サイトに人気があるようですね.
19 さて,実習ですが,HTMLをもとにJavaScriptを組み込んで作っていきたいと思います.
20 何を作ればよいのか?何ができるのか?
よく分からないと思いますので,いくつか,サンプルを紹介したいと思います.
1.写真先ほど,写真を撮ってもらいましたが,Webで表示します.
2.UFO攻撃UFOをクリックしましょう
3.GoogleMap解説は62以降です.
21 ホームページは作れますか?
ホームページ作成用のアプリケーションを使えば簡単かもしれませんが,
今回は,JavaScriptで簡単なゲームを作りたいので,テキストエディタで作成します.
22 ホームページの基本として,背景画像を変更する方法を確認し,
さらに,ゲームを作成するために欠かせない乱数を発生する命令を利用し
いろんな色を表示するプログラムを紹介します.
そして,タイマー関数を用いることで,「蠅たたきゲーム」を作成します.
そのために,イベントハンドラを理解します.
23 今日作るホームページのメインページを書きます.
各ユーザのフォルダの指定されたファイルを開きます.
24 iro.htmlを編集します.
25 背景色を変更するには,簡単な命令です.
26 JavaScriptの簡単な作業,ボタンを作ります.
27 せっかくのボタンなので,押されたら,何かが起こるようにします. ボタンを押したら変わる
28 色の指定の仕方として,名前を指定する方法と,色の番号で指定する方法があります.
色の名前を入力しましょう
29 たくさんボタンを追加してみましょう.
30 ちょっとだけプログラムらしく作ってみます.
命令をまとめて,関数として登録します.
そして,イベントハンドラでその関数を呼び出します.
31 乱数を用いて,色がいろいろ変わるボタンを作ってみます.
色が変わる
32 タイマー関数を用いることで,勝手に色が変わるページができます.
タイマー関数の利用
タイマー関数はゲームを作るときに使いますので,良く覚えておいて下さい.
33 乱数はゲームを作る際には,重要な部分です.
意外な動きがあれば,それが面白いですね.
34 テキストボックスやボタンを作りましょう.
35 ちょっとだけ,プログラムらしくなります.
まず,ボタンが押されるとプログラムが実行される
プログラムで乱数が発生され,
画面にその乱数が表示される.
簡単な流れですね.
FORMを利用して部品を表示
リンク先のファイルは何も動作しません. (表示メニューのソースを選びましょう)
36 乱数を発生 0から1未満の乱数を発生させます.
37 0から100までの乱数を発生(四捨五入して,整数で表示)
38 ゲームでは色々な操作が必要になります.
いろいろな動作に反応する命令があります.
39 いろいろなイベントのサンプル(準備中)
40 数当てゲーム
ページを開いた際に乱数が発生します.
その数を当てるために何度か数字を入れてみましょう.
入れた数字が求める数字よりも高い(Hi)か小さい(Low)が表示されます.
41 数当てゲーム
42 ランダム文章ゲーム
乱数を発生させて,文章を作成します.
もともとデータを入力しておきます.
乱数によってそのデータを選び出して,文章を出力します.
43 蠅を表示する.
44 蝿の表示
座標を指定して表示する方法を確認しましょう
45 ランダム蝿表示
乱数を発生させて,その座標に蝿を表示させます.
再読み込み(リロード)をさせるたびにランダムな場所に表示されます.

ここから,いろいろいじっていきますよ.

ランダム蝿表示(関数)
先のプログラム部分を関数にして関数を読み出しています.
46 ランダム蝿表示(時間)
先の関数の中に,時間呼び出しの命令を入れています.
47 ランダム蝿表示(改良)
移動距離を乱数で決定して,その大きさを元いた座標に足して,再表示しています.それでまるで移動しているように見せています.

このプログラムをもとにパラメータなどを変更してみよう.
48 ランダム蝿表示(改良)
乱数の発生範囲やパラメータを変化させて,表示させてみよう.
49 ○蝿が飛んでいるように1
ちょこまかと飛び回る.
50 プログラムをよく見てみましょう.
51 どうすればいい?
52 ○蝿が飛んでいるように2
53 パラメータの意味をつかもう.
1番は,どれだけまっすぐ進むかを決めます
2番は,移動する量を決定します
3番は,早さを決定します.
54 ○蝿たたきに
パラメータをバランスよく設定したつもりです.
55 蠅たたきをもとに,作成します
蛙をクリックするのは,onclickを使います.
マウスが近付いたら,逃げるために,onmouseoverを使います
ぴょんととびますので,その座標は乱数で
56 基本的なつくりを整理しましょう.
57 座標指定をする場合は,スタイルでposition:absolute;をしておきます.
58 ○蛙を捕まえる
59 作成する関数を整理します.
60 どのように動作するか整理します.
61 このプログラムをもとに飾り付けをするとそれらしくなりますね.
62 GoogleMapsを利用する方法を紹介します.
63 APIというのはいろいろあります.
64 Web上に地図を表示するのは簡単です.
65 APIを利用するための登録をする必要があります.
ここでは説明だけです.
各自で試す際は,各自の責任でやってみてください.
66 APIのキーを登録した際に,簡単な例が表示されますので,それにならって,設置します.
折角ですので,岡山理科大学を表示します.
岡山理科大学を表示
67 移動縮尺ボタンを追加しました

マップ・サテライト切り替えボタンを追加しました
68 座標を指定してみます