情報処理演習のホームページ

Micro Computers in Civil Engineering

★2002-06-04 [Tue.] (7) プログラミング入門
★2002-06-18 [Tue.] (8) プログラミング入門
★2002-07-02 [Tue.] ホームページを作ろう　http と html
★2002-07-16 [Tue.] 図のはめ込みとアニメーション
★2002-07-23 [Tue.] HP発表会
★受講を希望する学生は「hello@civil.tohoku.ac.jp」のメーリングリストに加入してください
★受講を希望する学生は講師の武山（takeyama@civil.tohoku.ac.jp）までメールで連絡ください。
★また、学科内の全学生を対象とした連絡用のメーリングリスト「students@civil.tohoku.ac.jp」にも加入してください

ホームページを作ろう

httpとhtmlの話

実はホームページは簡単に作れます．TEXをやったことのある人なら容易に感じるはずです．頭とお尻だけ気をつければ，簡単なHPは簡単にできます．例えば，

<html>
マイ・ほーむぺーじ
</html>

と書いたテキストファイルを保存して，ブラウザ（インターネットエクスプローラーやネットスケイプ）で見てください．ファイルのメニューから選べます．すると<html></html>で囲まれた部分が表示されます．これで文字を記述することが出来ました．

つまり，ホームページはある約束に従って文字もしくは絵の情報をテキストでやりとりした結果として表示されているのです．こうしたホームページのやりとりの約束を http (Hyper Text Transfer Protocol : 高度文字転送規約？)と言います．この約束に従って記述する言語を html (HyperText Markup Language : 高度文字伝達言語？)と言います．

「httpに従ったテキストファイルのやり取りを記述するものがhtmlとなります」

こんな話は実はどうでも良いことで，ガンガンhtmlを使いましょう．ホームページの作成では，気に入ったページの真似がよく使われます．このページのレイアウトも武山先生のもののパクリとなっています．

次のものをテキストファイルにコピーしてブラウザで見てください．

<html>
<head>
<title>
情報処理演習ページ
</title>
</head>
<!
headはこのファイルの情報を書きこんでおきます．
題目をtitleで記述します．検索ソフトで引っかかるのはここです．
＜！～＞で示された範囲はコメント行となって表示とは関係ありません．
この後が本体となります．
>
<body bgcolor=black text=white>
<!
背景を黒で文字を白と指定します．本体は＜body＞～＜/body＞で記述します
>
<h1>情報処理演習ページ</h1>
<hr>
<center>
<b><h2>ホームページ作成について</h2></b>
<i>簡単作成</i>
<br>
<u><h3>シンプルがいいね</u><h3>
</center>
</body>
</html>

h1からh5は文字の大きさを指定します．h1が最大の大きさとなります．hrは横線を入れます．bは太文字，iは斜字，brは改行，uはアンダーラインを示しています．中央揃えしたい場合は，<p align=center>とします．rightとすれば右寄になります．

良く使うコマンド等は，以下のようなものがあります．簡単すぎます？

改行系
改行　<br>
改段落 <p> これは段落を意味するので段落を<p>～</p>で区切るのが正当．
横線　<hr>
箇条書き <ul> <li>??　<li>?? </ul>

文字系
巨大文字等　<h1> 一番でかい　</h1> 他<h2>～<h5>
太字　<b>太字</b>
斜字　<i>斜字</i>
アンダーライン　<u>アンダーライン</u>
中央寄せ等　<center>寄せ</center>　右寄せ　<right>右！ </right>
色サイズ <font color="red">赤</font> <font size=+2>でかい</font>

リンク系
リンク　<a href="http://kaigan.civil.tohoku.ac.jp">海岸研のHP</a>
メール　<a href="mailto:kazama@kaigan.civil.tohoku.ac.jp>メール頂戴</a>
ラベルへ飛ぶ　<a href="#jump1">飛べ！</a>
ラベル　<a name="jump1">ここにきた！</a>

</？？？>は，ここまでその前のコマンド<？？？>がここまで有効であることを示します．

リンク系も試してください．ということで課題を一つ．

課題

自分の研究分野に関する url を豊富に集めて格好いい研究リンクページを作成せよ．

締切2002年7月15日（月）12：00

図のはめ込みとアニメーション

図のはめ込み

卒論が出来たら研究成果をHPを通して世界に示しましょう．英語ができない？　構いません．図や表が雄弁に物語ってくれます．エクセルやワードで作った表をhtmlで認識されるGIFやJPGに変換する必要があります．

図を画面に出力するには，GIFかJPG等の画像を用意します．そして，

<img src="p01.jpg">

と指定してやればOKです．画像を左に貼りつけて，右側で説明する場合は，

<img src="p01.jpg" align="left">氾濫の浮力で傾いた家屋

氾濫の浮力で傾いた家屋

となります．画像にもリンクを貼ることが出来ます．HP上に大きな画像を貼りつけると読みこみに時間がかかるため読み手に迷惑です．なので，HP上に小さな画像をつけてリンク先に原図をつけることが一般的です．サムネイルなどと言ったりもします．

<a href="p01large.jpg"><img src="p01.jpg"></a>

とします．上の図もサムネイルになっています．htmlで図のはめ込みは簡単です．おそらく難しいと感じるのは，画像を作ることでしょう．デジタルカメラで撮影するのが一番簡単といえます．また，大抵の作図ソフトには，JPGやGIFで保存できるようになっています．研究成果を示すには，グラフの表示が不可欠です．MS社の回しものではありませんが，ここではEXCELのグラフをGIFにする方法を示しておきます．

グラフを作成した後，「ファイル」メニューから「Webページとして保存」でデータを保存します．すると，指定したフォルダ内に指定したファイル名のフォルダが出来ています．その中にGIFファイルが出来ているはずです．試してみてください．フォルダ内にあるその他のファイルはとりあえず必要ないので，消去して大丈夫です．
（xmlという便利なファイルがあるけど，この話をするとどんどん長くなるので割愛）

動画の世界

なんといってもアニメーションは説得力があります．実験や数値計算の結果を動画で見せるのは大変効果的だし，注目度大です．動画の作成には，１．ビデオ画像をそのまま流す，２．GIFアニメーションを利用する，３．フラッシュを使う　やり方があります．

ビデオ画像を流すには，ちょっと高価なビデオソフトかビデオについてくるソフトを利用するなどの手があります．が，一般的ではないのと，圧縮率がよいmpeg2でもファイル容量が膨大となります．ここら辺の話は講義中に行いますが，ソフトの依存性が大きいので，割愛します．また，フラッシュの利用もソフトの購入が必要とないますので，ここでは説明しません．但し，ネットワークがどんどん高速化されつつある現状では，こうしたビデオ配信が一般的になりつつあることも確かです．

もっとも一般的なのが，GIFアニメーションです．パラパラ漫画と同じ要領で，変化する画像を複数枚用意して，並べる作業をします．

実際にGIFアニメーションを作成して見ましょう．ここで紹介する作業は，１．ppm画像の作成　２．GIFへの変換　３．GIFアニメーションの作成で構成されます．

１．ppm 画像の作成
ppm はヘッダーの後にRed,Green,Blueの順に画素の輝度を，左上から右下に向って表す最も簡単なファイルの一つです．ヘッダーはP3，横の画素数，縦の画素数，最大輝度を順に記すだけです．


....+....1....+....2....+....3....+....4....+....5....+....6....+....7..
      PROGRAM MKPPM
C
      INTEGER R,G,B
      CHARACTER FN*6
C
      IW=100
      IH=100
      IP=255
      DO IC=0,9
        WRITE(FN,100)IC
  100   FORMAT("P",I1,".PPM")
        OPEN(1,FILE=FN)
        WRITE(1,110)
  110   FORMAT("P3")       ! ヘッダー
        WRITE(1,*)IW,IH,IP　! 幅，縦，輝度最大値
        R=255-IC*26         ! 赤の度合を減少させる
        G=IC*26             ! 緑の度合を増加させる
        B=0                 ! 青は無し
        DO J=1,IH
        DO I=1,IP        
          WRITE(1,*)R,G,B   !　各画素の構成色
        ENDDO
        ENDDO
        CLOSE(1)
      ENDDO
C
      STOP
      END
....+....1....+....2....+....3....+....4....+....5....+....6....+....7..

というようなプログラムを作ってみました．赤から緑に変化していく様を０から９までの画像ファイル名で表しています．　PPMファイルの意味がわかれば色々な作図がプログラム上でできます．

2．ppm から GIF への変換
ペイントショップ等の市販ソフトでは容易にできますが，以下のフリーソフトも良くできています．

http://www.forest.impress.co.jp/library/irfanviewjp.html

ダウンロードして，exeファイルをクリックすると，iview_32.exeがフォルダ内に出来ます．これをクリックして，ファイル＞開く　でppmファイルを指定．保存でGIFファイルを選べば作成できます．

3．GIFアニメーションの作成

同様にフリーソフトを使ってアニメーションを作成しましょう．フリーソフトとして，Animation GIF Maker が有名です．XPやMEで動くかわかりませんが，以下から入手可能です．

http://www.vector.co.jp/soft/win95/art/se043916.html

ここからダウンロードして，ファイルを並べ，保存するとGIFアニメーションの出来あがりです．これをhtmlで普通の画像と同様に貼りつければ出来あがりです．

但し，ftpでサーバーに画像を送る際は，
ftp>bin
Type set to I
ftp>put *.gif
としましょう．画像はバイナリ‐形式で保存されているので，binとします．この後，htmlファイルを送る際は，
ftp>ascii
とします．

さあ，これで世界に情報発信が可能です．どんどん充実させていきましょう．もちろん，それには研究を進めてくださいね．

課題

前回のHPも参考にして，自分のHPを作成する．画像等を豊富に使うが，重くならないように注意する．
フロッピーディスクで提出．

7月23日（火）の発表会は情報棟609に変更します．注意してください．

提出者HP公開．リンクには英語の頁を増やそう．著作権に注意．

阿部祥
 阿部慶太
 垣内健吾
高橋研也
戸塚岳大
 松本哲

ファイル名をindex.htmlとしておくと，例えば風間聡の場合，
http://kaigan.civil.tohoku.ac.jp/~kazama/
だけで開くことができる．

プログラムの例II

ファイルの入出力の話

講義では，テキストファイルとバイナリ‐ファイルについて説明しました．文字（数字を含む）をコードに変換して保存されているのが，テキストファイル，コードに変換しないでそのまま記述したのがバイナリ‐ファイルと思ってください．

もう少し言うと書式を与えてテープのようにデータ保存するのがテキストファイル（書式有り，順次編成ファイル）で，バイト毎にデータを区切り，CDのように頭を指定してやるとどこでも読みだせるのが，バイナリーファイル（書式無し，直接編成ファイル）と覚えれば良いでしょう．

C言語を使える人は以下のプログラムを走らせみてください．JISのコード表つまりバイナリ‐データの数字とテキストデータの文字の対応表を作ることができます．


....+....1....+....2....+....3....+....4....+....5....+....6....+....7..
void main(void)
{
int i,j;
for(i=0;i<=32;++i){
  for(j=32;j<=128;j+=32)
    printf("%5d %c", i+j, i+j);
  for(j=160;j<224;j+=32)
    printf("%5d %c", i+j, i+j);
  printf("\n");
}
}
....+....1....+....2....+....3....+....4....+....5....+....6....+....7..

32～128，160～223以外は制御データとなっているので画面に出力しないほうがよいでしょう．改行やビープ音（死語？）になっています．

さて，テキストファイルとバイナリ‐ファイルの入出力の仕方は，FORTRANの場合，


....+....1....+....2....+....3....+....4....+....5....+....6....+....7..
      PROGRAM EX3
C
      INTEGER*2 DT(100,100)
C
      OPEN(1,FILE="DATA.TXT")
      DO I=1,10
        WRITE(1,100)
  100   FORMAT(" !WORLD CUP 2002!")
      ENDDO
      CLOSE(1)
C
      OPEN(1,FILE="DATA.BIN",FORM="UNFORMATTED",
     &       ACCESS="DIRECT", RECL=200)     
      DO J=1,100
        READ(1,REC=J)(DT(J,I),I=1,100)
      ENDDO
      CLOSE(1)
C
      STOP
      END　　 
....+....1....+....2....+....3....+....4....+....5....+....6....+....7..

となります．RECLは2次元のデータを考えた場合の幅に相当するものです．ここではバイト数で与えていますが，最近のVISUAL FORTARANだと指定が違います．HELPでOPENの箇所を確認してください．OPEN(1,FILE="DATA.TXT",STATUS="NEW")とSTATUSをつけて新しいファイルの作成を決めると上書きのミスをなくすことができます．省略した場合は，同じファイル名があればそのファイルにアクセスしますし，無ければ新たに作成します．なお，テキストファイルで同じファイル名を開けて，書きこみをすると前のデータは無くなるので注意が必要です．

上のプログラムはMS-FORTRANの名残りでした．FORTRAN90では2バイト整数型の宣言は，
INTEGER(2)
とすることになっています．昔は１バイトの整数型なんてなかったと思うんですが，今は
INTEGER(1)
なんてのもあります．

Ｃの場合，


....+....1....+....2....+....3....+....4....+....5....+....6....+....7..
void main(void)
{
FILE *fin;
FILE *fp;
int i,dt[1000];

fin=fopen("data.txt","w");
for(i=0;i<=9;++i)
  fprintf(fin, "WORLD CUP 2002 \n");
fclose(fin);

if((fp=fopen("data.bin","rb"))=NULL){
  printf(" open error \n");
  exit(1);
}
for(i=1;i<=1000;++i)
  fread(&dt[i], 2, 1, fp);

fclose(fp);
....+....1....+....2....+....3....+....4....+....5....+....6....+....7..

fprintfとfscanfはprintf，scanfと同じように使えるので便利です．テキストデータを文字のままよむfgetcやfputcというのもあります．参考書を見てください．その他にも色々ファイルの入出力関数が用意されています．

バイナリ‐ファイルのfread(buff, size, num, file)は，（）内のような引数をもち，fileからsizeの大きさ（バイト）をnum個読みこんでbuffに示すバッファーにいれることをします．fwriteも同様に出力することができます．ここで注意するのは，buffは変数が多いのですが，宣言した変数とサイズがあっていないとエラーがでます．

fopen("...","rb");とバイナリ‐データを読むにはbの記号をつけます．良く忘れるので注意！（苦笑）．また，2バイトの整数はintで宣言しますが，特に4バイトで指定したいときは，long int と使ったりします．バイナリーデータを使う際はここら変が面倒で，正負の記号に１ビット使うsignedの指定もあります．詳しくは参考書を見てください．

また，直接編成ファイルの利点を生かす読み飛ばしの際は，fseekと言ったコマンドも用意されています．

課題

では，上の例題を参考に次の課題をやってみてください．

１．以下のテキストファイルをダウンロードして，エディター（テキストファイルを見るソフト．ウィンドウズならノートパッド）で中身を確認して，納められているデータの平均と分散を求めよ．

http://kaigan.civil.tohoku.ac.jp/~kazama/course/data.txt

２．以下のバイナリ‐ファイルをダウンロードして，1年間の平均値と分散を求めよ．
（データ並び）１日分
2byte 年
2byte 月
2byte 日
4byte 気温（10倍の整数型．25.6℃は256と入っている）

が1月1日から12月31日まで入っている．

http://kaigan.civil.tohoku.ac.jp/~kazama/course/data.bin

締切2002年7月1日（月）12：00

プログラムの例

ほとんどの教科書に掲載されているバブルソートと掃出し法について説明しました．

バブルソートは，水の中の泡が浮かびあがっていくのに似ているのでこの名がついています．簡単なのが隣り合う数を順次交換していく方法です．

....+....1....+....2....+....3....+....4....+....5....+....6....+....7.. PROGRAM EX1 C REAL DT(100) C C DATA READ C WRITE(6,100) 100 FORMAT(" DATA NUMBER?") READ(5,110)N 110 FORMAT(I2) DO I=1,N WRITE(6,*)" INPUT DATA" READ(5,*)DT(I) ENDDO C DO J=N-1,1,-1 DO I=1,J W=DT(I) DT(I)=DT(I+1) DT(I+1)=W ENDDO ENDDO C C OUTPUT C DO I=1,N WRITE(6,*)DT(I) ENDDO C STOP END　　 ....+....1....+....2....+....3....+....4....+....5....+....6....+....7..

掃出し法のプログラムです．

....+....1....+....2....+....3....+....4....+....5....+....6....+....7.. PROGRAM EX2 C REAL A(100,100+1) C C DATA MAKE C WRITE(6,100) 100 FORMAT(" DATA(N,N)?") WRITE(6,*)" DATA NUMBER N?" READ(5,110)N 110 FORMAT(I2) C DO I=1,N DO J=1,N WRITE(6,200)I,J 200 FORMAT(" DATA(",I2,",",I2,")=?") READ(5,*)A(I,J) ENDDO ENDDO C WRITE(6,210) 210 FORMAT(" SOLUTION?") DO I=1,N WRITE(6,220)I 220 FORMAT(" SOL(",I2,")=?") READ(5,*)A(I,N+1) ENDDO C C KEISAN C DO K=1,N DO J=K+1,N+1 A(K,J)=A(K,J)/A(K,K) ENDDO DO I=1,N IF(I.NE.K)THEN DO J=K+1,N+1 A(I,J)=A(I,J)-A(I,K)*A(K,J) ENDDO ENDIF ENDDO ENDDO C DO I=1,N WRITE(6,300)I,A(I,N+1) 300 FORMAT(" X(",I2,")=",F10.3) ENDDO C STOP END　　 ....+....1....+....2....+....3....+....4....+....5....+....6....+....7..

講義中に説明したように

2x+4y+6z=6
3x+8y+7z=15
5x+7y+21z=24
は以下のような配列にまとめます

2	4	6	6
3	8	7	15
5	7	21	24

１式について解くと

1	2	3	3
3	8	7	15
5	7	21	24

となります．この作業はプログラム中の青の部分です．

次に縦の部分を０にしていきます．一番上の左の数を基準にすると，2段目，3段目の左の数が引き算をする倍数になります．

1	2	3	3
0	2	-2	6
0	-3	6	9

ここの表現は茶色で表されています．

後は2段目を同様に繰返すこととなります．

課題

では，上の例題を参考に次の課題をやってみてください．

１．任意の2つの行列 n×m の行列について，加算，乗算を行うプログラムを作成せよ．

２．任意の n × n の正方行列についてその逆行列を求めるプログラムを作成せよ．

締切2002年6月14日（金）17：00

武山先生のページへ．

Email is here