工学部学生のための
コンピュータ・リテラシー

（単位名：コンピュータプログラミング）

末広ページへ　このコーナーの目次へ　最新情報

　このページは、岐阜大学 工学部 応用精密化学科，生命工学科，機能材料工学科のクラスの授業の内容です。

私の授業は，授業開始前の２時間前に，どんな「警報」でも出ていたら休講です。「警報」が出ていない場合は，学校の方針に従います。

　岐阜大学のこの授業は，１０時５０分の時点で，「警報」が出ていたら休講です。

講師：

　斎藤末広（岐阜大学非常勤）

　岐阜大学教育学部教育学科治療教育コース卒業後、ソフトハウス、株式会社テスクを経て、現在、日本総合ビジネス専門学校、特別非常勤。

目標：

　リテラシー（タッチタイプ，メールの操作）
　表計算ソフトを研究の道具にする
　プログラミングの基礎を学ぶ

授業の進め方

　出席はとらない。各自，このページをみて，授業内容を判断して参加すること。

　年内の授業は，１０分ほどキーボード練習がある。

　タッチタイプの練習，メール操作練習

　表計算の利用，表計算上でのプログラミング

　JavaScript のプログラミング

単位課題

　出席はいっさい関係ありません。

　１　タッチタイプで目標数値をクリア

　美佳タイプのローマ字単語で，手元を隠して，45 字/分で合格。１１月以降の各授業最後に，テスト（学生証必要）可能，締切は，（休講になったらその前の）最後の授業，（参考：岐阜大学美佳タイプ選手権）

　２　美佳タイプ記録レポート

　美佳タイプ記録は，エクセルとマクロプログラムを利用します。
工学部の学生らしい考察をいれること。各自印刷して提出します。

　３　期末テスト

　コンピュータのハード・ソフト，プログラミングの用語の意味を問います。

使用するハード・ソフト

　岐阜大学総合情報処理センター実習室パソコン(IBM互換機)
　マイクロソフトWindows2000
　ユードラプロ 4.2 日本語版
　エクセル２０００
　ワード２０００

　美佳タイプ

教科書・参考資料

　教科書　使用しない，

　Winパソコン基本操作：チェックリスト
（日本総合ビジネス専門学校社会人向け短期パソコン習得講座用から）

　『驚異のブラインド・タッチ』増田忠 著　参考サイト：増田式キーボード学習法

　キーボード練習プログラム　ミカタイプ：美佳のタイプトレーナ　ダウンロード

強く薦めること

　この授業で、パソコン、インターネットを自分の道具にすること。そのためには、キーボードを見ずにたたけるようにすること、さらに、自分専用のパソコンを手に入れ、すぐにでも自分の道具して使用を開始することである。

　また、自分の学習パターンにインターネットを利用することを組み入れること。

授業の約束

　席は前から詰めること。（一つでも空いていたら，それより後の人は，授業開始時に立って移動してもらいます。）

　故障で，使えないパソコンは，キーボードをテレビの上に上げておくこと。

　足等に障害ある人以外はエレベータを使用しないこと。

　実習室を出るときは，自分の席，近くの席に椅子をしまう事

13回目　プログラム部品の利用その２

目的

　プログラムを構成する各部品を組みあせて，プログラムできるようにする。

　使用する部品　Dateオブジェクト，windowオブジェクト，documentオブジェクト，テキスト枠，コマンドボタン，関数(=メソッド)

課題

　MyWatchを改訂する。

　１　曜日表示を　月　→ (月)
　２　タイマーボタンを単純にして「３秒タイマーボタン」に直す

MyWatch
  1: <html>
  2: 
  3: <head>
  4: <title>My時計</title>
  5: 
  6: <script>
  7: 
  8: function today(){
  9: 
 10:     var t;
 11:     setTimeout("today()",1000);
 12:     t = new Date();
 13:     youbiNo = t.getDay();
 14:     if (youbiNo == 0) youbi = "日";
 15:     if (youbiNo == 1) youbi = "月";
 16:     if (youbiNo == 2) youbi = "火";
 17:     if (youbiNo == 3) youbi = "水";
 18:     if (youbiNo == 4) youbi = "木";
 19:     if (youbiNo == 5) youbi = "金";
 20:     if (youbiNo == 6) youbi = "土";
 21: 
 22:     window.status
 23:      = t.getYear() + "年"
 24:      + (t.getMonth() + 1) + "月"
 25:      + t.getDate() + "日"
 26:      + youbi
 27:      + t.getHours() + "時"
 28:      + t.getMinutes() + "分"
 29:      + t.getSeconds() + "秒";
 30: }
 31: 
 32: var stime;
 33: var tstime;
 34: var timeID;
 35: 
 36: function stopwatchstart(){
 37:     stime = new Date();
 38:     stopwatch();
 39: }
 40: 
 41: function stopwatch(){
 42:     var temp;
 43:     timeID = setTimeout("stopwatch()",100);
 44:     temp = new Date();
 45:     document.f.swdisp.value = " " + (temp - stime) / 1000 + "秒";
 46: }
 47: 
 48: function stopwatchstop(){
 49:     clearTimeout(timeID);
 50:     document.bgColor ="#FFFFFF"
 51: }
 52: 
 53: function timerstart(){
 54:     tstime = new Date();
 55:     document.bgColor ="#000000"
 56:     timer();
 57: }
 58: 
 59: function timer(){
 60:     var temp;
 61:     timeID = setTimeout("timer()",100);
 62:     temp = new Date();
 63: 
 64:     ato = document.f.wmt.value - (temp - tstime)/1000;
 65:     if (ato < 0){
 66:         document.bgColor ="#FF0000"
 67:     }
 68:     window.status =  ato+ "秒";
 69: }
 70: 
 71: </script>
 72: 
 73: </head>
 74: 
 75: <body>
 76: 
 77: <h1>時計サンプル</h1>
 78: 
 79: <hr>
 80: <FORM NAME ="f">
 81: 
 82: 　<INPUT TYPE ="button" VALUE ="時刻表示" onClick="today()"><BR>
 83: 　<INPUT TYPE ="button" VALUE ="ストップウォッチ" onClick ="stopwatchstart()">
 84: 　<INPUT SIZE =20 NAME ="swdisp"> <BR>
 85: 　<INPUT TYPE ="button" VALUE ="停止" onClick ="stopwatchstop()"><P>
 86: 　<INPUT SIZE =10 NAME ="wmt"><BR>
 87: 　<INPUT TYPE ="button" VALUE ="タイマースタート" onClick="timerstart()"><BR>
 88: 
 89: </FORM>
 90: <hr>
 91: 
 92: </body>
 93: </html>

メールを出す

授業の感想，件名は，△△/○○(日付を入れる)，内容は， 授業の感想

　

１２回目　復習
1月30日(木)

目的

　第１回目からの復習をします。

　

１１回目　プログラム部品の利用
1月23日(木)

目的

　プログラムを構成する各部品を組みあせて，プログラムできるようにする。

　使用する部品　Mathオブジェクト，テキスト枠，コマンドボタン，関数

課題

　三角形の面積計算から，円の面積計算を作成する。

三角形の面積計算
  1: <html>
  2: <head>
  3: <title>三角形の面積計算</title>
  4: 
  5: <script>
  6: 
  7: function keisan01(){
  8: 
  9: 	a = f.a.value * 1 // テキスト枠の文字を計算用変数に置き換え
 10: 	b = f.b.value * 1
 11: 	c = f.c.value * 1
 12:  
 13: 	s = (a + b + c)/2
 14: 
 15: 	f.d.value = Math.pow((s*(s-a)*(s-b)*(s-c)), 1/2)
 16: }
 17: 
 18: </script>
 19: </head>
 20: 
 21: <body>
 22: 
 23: <h1>三角形の面積</h1>
 24: <h4>ヘロンの公式</h4> 
 25: <p>
 26: 三角形の三辺の長さが ａ，ｂ，ｃ のときの面積Ｓは、</p> 
 27: <p>s = (a + b + c)/2<br> 
 28: S = (s(s-a)(s-b)(s-c))<sup>1/2</sup></font></p> 
 29: <p></p>
 30: <hr>
 31: 
 32: <FORM NAME ="f">
 33:  
 34: 　a = <INPUT TYPE ="TEXT" NAME = "a"><BR>  
 35: 　b = <INPUT TYPE ="TEXT" NAME = "b"><BR>  
 36: 　c = <INPUT TYPE ="TEXT" NAME = "c"><BR>
 37:   
 38: 　<INPUT TYPE ="button" VALUE ="計算" onClick="keisan01()"><BR>
 39: 
 40: 　d = <INPUT TYPE ="TEXT" NAME = "d"><BR>  
 41: 
 42: </FORM>  
 43: 
 44: <hr>  
 45: </body>  
 46: </html>

ヒント

　ファイル名を, 0123.htm

　１　円の面積は，半径をrとすると，πr2

　２　πは，Math.PI　π

　３　xの二乗は，Math.pow(x, 2)

　４　プログラム内で漢字を使用するのは動いてから

メールを出す

授業の感想，件名は，△△/○○(日付を入れる)，内容は， 授業の感想

余裕があれば

　正月バージョンへの自動表示を元に戻す。

　自分の公開用ホームページのフォルダ内で，index.html → 200212.html に変更，indexn.html → index.htmlにする。

１０回目　オブジェクトの利用
１２月１９日(木)

目的

　オブジェクト(Date，window等)を利用する。

課題

特定の日付になった別のページを表示する

index.html の中に，クリスマスが過ぎたら(2002/12/26)，indexn.html を表示するプログラムを<body>のすぐ下に挿入する。

*
<script>
　　var xToday　　= new Date();
　　var xKiriDate = new Date(2002, 12-1, 26); // 月の数え方に注意
　　xNokori = (xKiriDate.getTime() - xToday.getTime());
　　if (xNokori<0){
　　　　window.location="indexn.html"
　 }
</script>

*

Date，windowは，プログラム用語で，「オブジェクト」といいます。一つの動作をするロボットのような小プログラムです。Dateオブジェクトは，日付関係の仕事をし，windowは，ブラウザの中に表示されているページの閉じたり，スクロールなどをします。

作成順序

　ホームページ作業用フォルダーにて

　index.html をコピーして，indexn.html を作成する。

　indexn.html には，「サンタさんにお願い」のコーナを無くし，かわりに，「空けましておめでとうございます」を書く。

　index.html に 上のプログラムを挿入する。日付を 今日の日付 にして実験する。index.htmlを表示したら，すぐに，indexn.html が表示されたら成功。成功したら，日付を2003,12,26に直す。

９回目　関数の利用
１２月１９日(木) ３限目
１２月１２日(木） ４，５時限目

目的

　関数，GUI部品を利用する。

項目

関数とはなにか？

乱数とは？

フォーム部品(GUI部品）

　cmateを参考に，作業用フォルダの index.html を修正する。

８回目　ホームページ作成
１２月１２日(木) ３限目
１１月５日(木） ４，５時限目

目的

　ホームページの作成（画像，リンク）

項目

トップページを作成して，profileとリンクする

　作業用フォルダに profile.html をコピーして，index.html と名前を変更する。

　index.html に，「プロフィール」と書いて，そこから，profile.html にリンクする。


*「プロフィール」クリックすると，profile.htmlが表示される。　

<a href="profile.html">プロフィール</a>

*

a は，anchor(錨)
href は，hyper refference,　高いレベル？の参照？　通常は，リンクする参照されるという意味

　

　

　profile.html に，「トップページへ」と書いて，そこから，index.html にリンクする。


*「トップページへ」クリックすると，index.htmlが表示される。　

<a href="index.html">トップページへ</a>

*

　

　profile.html と index.html をftpを利用して公開し，自分のURLで確認する。

http://www2.gifu-u.ac.jp/~jhs4002/
補足：jhs4002 は，各自の ログイン名 が入る

トップページをクリスマスバージョンにする

　　画像提供　おとぼけ野鳥の会

　上の画像をそれぞえ右ボタンの「名前を付けて保存」で，作業用フォルダにコピー(ダウンロード)をする。ボックスの方は名前は変更せず。ハッパの方は，ten.gif とする。

　「　プロフィール」　として，ハッパをクリックすると，プロフィールが表示されるようにする。


*ハッパをクリックすると，profile.htmlが表示される。

<a href="profile.html"><img border="0" src="ten.gif" width="25" height="25"></a>

*

img は，image 画像
border は，輪郭線
src は，sorce 画像ファイルの名前
width, height は，幅と高さ

　トップページの下の方に，をつけて，「サンタさんにお願いのコーナ」を作成する。こちらの画像は，ただ表示するだけとする。サンタさんにお願いコーナは，サンタさんに貰いたいプレゼントを書き出すこと。


*hako03.gif 表示される。

<img border="0" src="hako03.gif" width="67" height="49">

*

　更新したページを公開する

画像を使って充実させる。

Google　で，「無料　クリスマス　素材」で検索をして，各サイトの「注意事項」を確認して素材を利用すること。

自分のprofile.htmlの URL

http://www2.gifu-u.ac.jp/~jhs4002/profile.html
補足：jhs4002 は，各自の ログイン名 が入る

メールを出す

授業の感想，件名は，△△/○○(日付を入れる)，内容は， 授業の感想

７回目　ホームページ作成
１２月５日(木) ３限目
１１月２８日(木） ４，５時限目

目的

　自分のホームページを作成する。公開する

項目

　HTMLの基本的な命令を理解する。

　「私のプロフィール」を，profile.html として保存

　profile.html　を　自分用に直す。

　誕生日まで何日を組み込む。

　サンタさんにお願いのコーナを作成する

　ホームページを公開する（来週？）

自分のprofile.htmlの URL

http://www2.gifu-u.ac.jp/~jhs4002/profile.html
補足：jhs4002 は，各自の ログイン名 が入る

ホームページの公開方法(岐阜大の場合)

FTP Exploer を起動し，ID(ログインネーム)とパスワードを入力して，「Conect」ボタンを押す
開いた場所に，を右ボタンを押して，new 選んで，public_html というフォルダを作成する。
public_htmlフォルダの中に，公開したページを入れる。index.htmlは，以下のurlで閲覧可能になる。
http://www2.gifu-u.ac.jp/~jhs4002
補足：jhs4002 は，各自の ログイン名 が入る

メールを出す

授業の感想，件名は，11/○○(日付を入れる)，内容は， 授業の感想

６回目　ホームページの構造
１１月２８日(木) ３限目
11月２１日(木） ４，５時限目

目的

　ホームページの構造を理解する

項目

　コンピュータの役割分担

　ウェブプログラム作成

授業の流れ

　WWW(World Wide Web) Webは，蜘蛛の巣

　コンピュータの役割分担説明
　　クライアントとサーバ，昔は，端末とホスト
　　頭が２つ                        頭は１つ

　ウェブプログラム

　　サンプル

　自分の次の誕生日までの日数を表示する。

*
<html>
<head>
    <title>Hello JavaScript</title>
</head>
<body>
<script>
    document.write("<h3>誕生日まで何日？</h3>")
</script>

<hr>
<script>

  var xToday    = new Date();
  var xBDate = new Date(2002, 7-1, 21); // 月の数え方に注意
  xNokori = (xBDate.getTime() - xToday.getTime()) / (60*60*24*1000);
                                               // 分母は1日のミリ秒数

  document.write("<h2><CENTER>");
  document.write("誕生日まで，<br>");
  document.write(Math.ceil(xNokori), "日<br>");
  document.write("</h2></CENTER>");

</script>
<hr>

</body>
</html>
*

HTML(Hyper Text Markup Language） と JavaScript

これを解読・実行するのは，IEやNS(ウェブブラウザ)

 HTMLプログラムの中に JavaScriptプログラムが入っている。

HTMLの特色

<○○> で始まり </○○>
<hr>のように単体もあり。

head部とBody部に分かれる。

JavaScriptの特色

　数式，関数

　HTMLの中で，<script> から </script>でサンドイッチにされる。

プログラムをする

　自分の誕生日に直す，見出しを h3 から h1 にする。

メールを出す

授業の感想，件名は，11/○○(日付を入れる)，内容は， 授業の感想

５回目　表計算上のプログラム
１１月２１日(木) ３限目
11月１４日(木） ４，５時限目

目的

　表計算を自分で作成したプログラムで制御する。

項目

　コンピュータとプログラム　説明

　マクロの作成

授業の流れ

　講義『プログラムの種類(ハード＆ソフト)』

　マクロ作成

　以下の言葉を自動的に挿入するマクロプログラムを作成

作成　斎藤末広
岐阜大学工学部 ○○科
学籍番号　xxxxxx

メールを出す

授業の感想，件名は，授業の感想

　

４回目
１１月１４日(木) ３限目
11月７日(木）　４，５限目

３時間目（→１０月２４日の４，５時間目の内容）

４・５時間目　表計算復習

目的

　表計算ソフト(EXCEL)を利用して，複雑な表を作れるようにする。

項目

　月管理の小遣い帳を作成

　セルの書式，ショートカットキー，シートの保護

　ショートカットキー

　F2 名前等の変更
　Ctrl+C コピー
　Ctrl+V 貼り付け
　Ctrl+A 全て選択

　保護の仕方
　　保護したくセルを選択し，[書式]-[保護]-ロックをはずす
　　[ツール]-[保護]-[シートの保護]

授業の流れ

　以下の表を作成します。

　kozukai

メールを出す

先生(sauto@yscon.co.jp)（←このメールに出すと届いたかどうか分る)にメールを出す。

先生にメール出す内容

件名：表計算２

内容：本日の授業の感想

第３回目(10/24の３時間目）　メール復習

　メールがうまく出せない人，メールのやりとりに不安な人のみ参加して下さい。

　メールのやりとりができる人は，本日の４，５時間目に参加するか，１１月７日の３時間目に参加して下さい。

第３回目(10/24の４，５時間目)　表計算入門＆キーボード練習

目的

　表計算ソフト(EXCEL)の基本操作をできるようにする。

項目

　エクセルの基本操作（４人分５教科のデータとグラム)

　 A B C D E F G H I J
1 　 国語 数学 英語 理科 社会 合計 　 　 　
2 安藤 75 55 65 80 80 　 　 　 　
3 井上 65 80 55 85 65 　 　 　 　
4 鈴木 80 85 90 90 55 　 　 　 　
5 西田 90 30 50 50 70 　 　 　 　
6 平均 　 　 　 　 　 　 　 　 　
　 標準偏差 　 　 　 　 　 　 　 　 　

授業の流れ

漢字変換のときに使用するキー

　マウスを使わない，[ALT]+[半角・全角]を親指＋人差し指，Ｆキー

エクセル入門

　セル，データ(数値，文字，式)の入力，関数，グラフ(棒グラム，レーダチャート)

キーボード練習，指回し，エクセルにデータ入力，ミカタイプ

ローマ字単語 時間(分) 　
2002/10/24 11:01 　 　 　
　 　 　

　

メールを出す

先生(sauto@yscon.co.jp)（←このメールに出すと届いたかどうか分る)にメールを出す。

先生にメール出す内容

件名：1024

内容：本日の授業の感想

　

第２回目(10/17)　キーボード練習のやり方

目的

　美佳タイプで，キーボード練習が，自宅でもできる状態にする。
　キーボード練習のコツを知る

設定項目

　美佳タイプをダウンロードし，各自の[ホームディレクト]に入れる。

　補足：[ホームディレクト]は，岐阜大学の方で用意してあり，卒業まで使用可能です。

授業の流れ

　文字がきスピードの測定　日本国憲法の前文，１分間の測定

　美佳タイプをダウンロードし，各自の[ホームディレクト]に入れる。
　　メニューの4-2の確認

　ホームポジションの確認

　各自練習

　先生(sauto@yscon.co.jp)（←このメールに出すと届いたかどうか分る)にメールを出す。

先生にメール出す内容

件名：1017

内容：

　Ａ　アンケート，字を書くスピード（必須)

　Ｂ　本日の授業の感想

　

第１回目(10/10)　美佳タイプとメール設定

目的

　美佳タイプで，キーボード練習ができる状態にする。
　ユードラプロで，メールが出せるようにする。

設定項目

　美佳タイプをダウンロードし，各自の[ホームディレクト]に入れる。
　ユードラプロで，自分のメールを出せるように設定する。

　補足：[ホームディレクト]は，岐阜大学の方で用意してあり，卒業まで使用可能です。

　この２つを自分で出来る人は，出席する必要はありません。

授業の流れ

　電源の入れ方，ID(ユーザー名)とパスワードの入れ方，落とし方の説明

　文字がきスピードの測定　2のn乗がき

　指回しのやり方説明

　美佳タイプをダウンロードし，各自の[ホームディレクト]に入れる。
　　メニューの4-2の確認

　ホームポジションの確認

　ユードラプロ(メールソフト）の設定
　　設定して自分のメールアドレスに出す
　　先生(suehiroweb@yscon.co.jp)に出す

先生にメール出す内容

件名：1010

内容：

Ａ　アンケート，パソコンの経験はどれくらいか？（必須)

１　今日が初めて
２　少しは経験がある
３　数ヶ月以上の経験あり

Ｂ　アンケート　手書きのスピード(必須)

○○秒

Ｃ　アンケート　趣味　できるだけ具体的に(任意，文字の入力に慣れているなら)
（良くない例　読書，スポーツ)
（良い例　漫画『ジョジョの奇妙な冒険』が好き，スキーを５年ほどやっている）

昨年度(H13後期)授業終了の感想

　昨年度は，キーボード練習，JavaScriptプログラミングを行った。今期は表計算を行うのでそこのところは少し違う。

☆
授業をきっかけにパソコンに興味がもてるようになりました.。ミカタイプを練習することによって，上達することの面白さが分かりました。
☆
いくつものプログラムをうちこんでいるうちに，そのプログラムの意味を考えることが好きになり，他のホームページのソースもみて，その意味を考え，それがどのように作用するのかも考えるようになった。
☆
先生の授業は，とにかく例題と練習問題を作りまくるという感じでしたが，for と if 文ならば，完全に理解できたと思います。
☆
いままで，プログラミングなんてやったこともなかったので，この授業はいい経験になりました。自分で苦労して作ったプログラムがちゃんと動作したときは，感動でした。それと同時にプログラムを作る大変さも分かりました。
☆
この授業をきっかけにパソコンを購入しました。またこういう授業があったらうけたいです。
☆
少しだけであるが，プログラムがただの文字と数字の羅列から，読むことのできるものにかわった。
☆
プログラムとかは業界にいる人たちがすることだとずっと思っていたから授業でプログラムをやったときは驚いた。

spage@yscon.co.jp

末広ホームへ このコーナの目次へ