Weekend Mathematics情報/「Webプログラミング」の授業(2004年)


「Webプログラミング」の授業(2004年)

「Webプログラミング」の指導計画


第10回・Perl(1)

* CGIとそれを実現するためのPerl *

2005年を迎え、3年生の授業も残すところあと2回となりました。 サーバーサイドで動くものを多少なりとも扱いたいうことで、アクセスカウンターを作ることを目標に、 Perlの勉強をしました。Perlの特徴などを話したのち、さっそく体験してみようということで、 「Hello World!!」を出力するコードを書いてみました。 PerlにHTMLを書かせるという感覚をつかんでほしいということです。 生徒機では、Perlは実行されません。サーバーにアップして初めて機能します。 ブラウザからアクセスして、コードやエラーメッセージではなく、下のように表示されれば合格です。 たったこれだけのことなのですが、スペルミスやら何やらをすると、それで足止めになってしまいます。 早くクリアした生徒には、各自のトップページからリンクの設定(これは簡単、ファイルの拡張子がplになる程度)をした後、戻りリンクを入れてもらいました。これはむずかしいかなと思ったのですが、何人かはクリアしていました。 Perlのprint文で、トップページへの戻りリンクを書かせます。




次の課題は、JavaScriptで扱った、乱数と配列変数の復習を兼ねて、 ランダムに背景色と文字色が変わるページを作ってもらいまいた。 プログラミングの要素を取り入れながら、Perlを通してHTMLを記述していくという 感じがつかめたでしょうか?







第11回・筆記試験&Perl(2)

* 筆記試験 *

10月以降の授業内容に関して、筆記試験(50分)を実施しました。

* アクセスカウンター *

各自のページにアクセスカウンターをつけることにしました。 最初に、アクセスカウンターのしくみについて説明をしました。 つまりページへのアクセスを受けてサーバー上のCGIプログラムが動き、 カウント数が記録されているデータファイルを読んで、カウント数を1加え、 それを表示しつつ、データファイルを上書きするということです。
これを実現するために必要な3つのファイルを確認しました。
 「count.dat」カウント数を記録してあるデータファイル
 「index.htm」トップページにフレームをかませて、実際には「count.pl」に引き継ぐもの
 「count.pl」アクセスカウンターの実体プログラム
それぞれの役割を説明し、順番に作成していきます。
「count.pl」については、コードに沿ってデータファイルをopen、lock、 カウント数を読んで1プラス、それを上書きして、unlock、closeと一連の動作を 確認しました。



第12回・Perl(3)・FLASHアニメーション(1)

* アクセスカウンター *

前回の続きの作業をしました。ファイルをサーバーにアップしての確認です。 CGIエラーの出る場合は、コードを確認です。 スペルミス、「;」の入力忘れ、また

  print "<p><a href="htm/profile.htm">自己紹介</a></p><br>\n";

のように、ダブルコーテーションを重ねることによるエラーなどで引っかかるケースがあります。 内側をシングルコーテーションに直せばOKです。

* FLASHアニメーション *

生徒からの要望の強いFlashを勉強することにしました。 最初の時間は、わたしの方でオブジェクトを用意しました。 タイムラインにキーフレームを入れ、モーショントゥイーンで間を補間してもらい、 アニメーションを作っていきました。 また、レイヤーを分けて背景の設定をしたり、複数のオブジェクトに別々の動きを持たせたりということもしました。



第13回・FLASHアニメーション(2)

* FLASHアニメーション *

前回の復習をしながら、ここではガイドレイヤーにモーションレイヤーを設定しました。 こうすることで、オブジェクトを自由自在に動かすことができます。 さらに、パブリッシュ、そしてswfファイルが実体 だということを押さえた上で、出来上がったHTMLファイルの編集をしました。 タイトルをつけたり、ムービーのセンタリング、戻りリンクの設定などです。 個人のトップページからのリンクも入れてもらいました。 いままでは、「index.htm」を編集すれば良かったのですが、 今回からは「count.pl」を編集することになります。

* FLASHで絵を描く *

後半は、FLASHを使って絵を描いてもらいました。ペイント系のソフトとやや使い勝手が違いますが、 生徒たちはすぐに慣れて、ツールを使いこなしていました。できあがったキャラクターをシンボルに変換し、 それを用いてアニメーションを作成してもらいました。 1時間の中なので、複数レイヤーを使うところまではいきませんでしたが、 アニメーションを作るくらいまでなら、簡単にできるようでした。 パブリッシュしてブラウザで確認です。



第14回・FLASH ActionScript(1)

* スロットマシーン *

スロットマシンを作ることに挑戦しました。 (日経ソフトウエア10月号の記事を参考にしました) 最初に完成品を見せてイメージをつかんでもらいました。 スタートボタンを押すと、リールの数字がくるくる回り始めます。 ストップボタンを押すと、それぞれのリールが止まります。 スコアをつけて、3つの数字が一致した場合のみ加算、それ以外は減点です。
最初にリールを部品として作りました。これは正方形を描いて、 その上にテキストで数字を重ねますが、タイムラインの1フレームごとに その数字を変えていきます。そうすると、1/12秒ごとに数字がくるくる変わるという部品 ができあがります。これをムービークリップとしてシンボルに変換します。 これを3つ並べてスロットマシーンらしくします。
次にメインのタイムライン上にプロフラムを記述していきます。 3つのリールが同じ動きにならないように、一端ばらばらに止めます。 ボタンを作ってこれもシンボル(ボタン)に変換。必要な個数だけもってきます。 スタートボタンが押されたらリールが動き出す、 ストップボタンが押されたら、そのリールが止まるというプログラムを記述していきます。 FLASH ASの場合、アクションを記述するところが様々ありますので、 きちんと指示をしてやらないと、どこに記述したらいいのか混乱を生じます。 予想以上に時間がかかってしまい、スタートボタンの設定を終えるところまでがやっとでした。 次回、ストップボタンの設定などから続きの作業をしたいと思います。



第15回・FLASH ActionScript(2)

* スロットマシーン・続き *

今回はストップボタンを押すと、それぞれのリールが止まるというプログラムを記述していきます。 ここまでできて動作確認がすんだら、パブリッシュして、ページの体裁を整えるということになりますが、 今日の授業は1時間だったということもあり、なかなかそこまでたどり着けません。
一人一人、エラーの状況が違うので、それを判断して指示をしてやらなければなりません。 うまくいかない理由の主なものは、スペルミス、「}」がないなどの文法のミス、スクリプトを記述する場所の間違い、 シンボルに変換するときのタイプの間違いなどでした。




第16回・まとめ

* まとめ *

今年度最後の授業では、各自が1年間使ったフォルダのデータをCDに保存しました。
最後にFLASHを取り上げたわけですが、これについて、また授業全般についてアンケートに協力をしてもらいました。 FLASHについては、おもしろい、もっとやりたいという意見が多く聞かれました。 生徒たちは意欲的で、機会があれば更に勉強したいという意志も表示してくれました。
こういったプログラミング系の授業では、どうしてもデバックの作業が必要で、 生徒約40人(2月以降は、2年生のみで約20人)に対して教員2人で対応するというのは、 かなり厳しい状況でした。 プログラムコードを印刷してもらい、次週までに私の方で赤を入れるということもしましたが、 なかなか充分に対応できない場面もあり、生徒たちにも申し訳なかったなあと思っています。





戻る