目次

注目

講義資料

レポート課題

その他

授業日程

  1. (9/27) [入門] はじめに&適性テスト
    プログラミング道、コンパイル、複数言語、コンテスト、RA紹介、他。
  2. (10/ 4) [基礎] プログラミングの処理系と環境
    さまざまな言語と処理系の概略、言語処理系のインストール。
  3. (10/11) [基礎] プログラミングの作法 [1回目の課題出題]
    コメント、名前の付け方、インデンテーションなど
  4. (10/18) [基礎] プログラミング技法
    番兵といけにえ、再帰。差をとる、表にする。ハッシュとポインター。
  5. (10/25) [基礎] デバッグの方法
    デバッガを使いこなす、プリント文を埋込む、ソースを読む。
  6. (11/ 1) [基礎] アルゴリズムからのプログラミング[2回目の課題出題]
    実行プログラムの性能、計算量。アルゴリズムの利用、変更。
  7. (11/ 8) [基礎] ライトウェイト言語とWebフレームワーク(*)
    Ruby, PHP, Perl, JavaScript, ActionScriptなど。Web開発。MVC。
  8. (11/15) [実践] Webプログラミング(続き)
  9. (11/29) [実践] モバイルプログラミング[特別講演]
    AndroidやiPhoneなどスマートフォン向けモバイルプログラミング
  10. (12/ 6) [実践] アニメーションプログラミング[特別講演]
    FlashやFlexなどを用いたアニメーションプログラミング
  11. (12/ 13) [実践]ペアプログラミング(1/2) [3回目の課題出題]
    具体的な例題に対し、ペアプログラミングを実践。
  12. (12/20) [演習] ペアプログラミング(2/2)
    ペアプログラミングの実践:続きと仕上げ。
  13. (12/27) [発展]より高度なプログラミングの方法
    遅延評価、メタ評価、非手続きプログラミング
  14. ( 1/17) [総括] まとめ
    3回目の課題の報告、プログラミングの上達法、他 11.9.24

第13回資料

プログラミング方法論(13) より高度なプログラミング

本日のあらすじ

  • 今までのプログラミングの問題点
  • オブジェクト指向プログラミング
  • 関数型プログラミング
  • 遅延評価と制約指向
  • 非プログラム的プログラミング
  • 今後予定:
    • 最終課題の提出(1/15)とその発表(1/17)

既存プログラミングの問題点

  1. 名前が衝突することがある
  2. 制御の流れがごちゃごちゃして分かりづらい
  3. グローバル変数がどこで変更されたか分からない
  4. プログラムが巨大になる
  5. デバッグやテストが大変
  6. 後での修正がやりにくい
  7. メモリリークなどが見つけにくい
  8. 思った通りには動かない
  9. データがオーバーフローする(数学計算とは違う)

今のプログラミングが難しすぎる、約束大杉。

手続き型プログラミングの課題

  • 手続き(処理)とデータが分離
  • 名前空間が原則として一つ
  • How(処理方法)を書く必要がある
  • 代入が基本であり、代入がいつどのようにされるのかを知る必要がある(データフロー)

非手続き型プログラミング

  • HowからWhatへ
  • 手続きから宣言へ
  • 抽象化のレベルをひとつ上げる
    • オブジェクト指向プログラミング
    • 関数型プログラミング
    • 論理型プログラミング
    • 制約指向プログラミング
    • ビジュアルプログラミング、など

オブジェクト指向プログラミング

  • オブジェクトとメッセージ送信の世界
  • クラスとインスタンスからなるオブジェクト
  • 親(スーパークラス)から子(サブクラス)への継承(インヘリタンス)
  • オブジェクトはスロットとメソッドの集まり
  • オブジェクトは通常、状態をもつ

背景「抽象的データタイプ」の考え方2

プログラムの動作保証

  • ADT(抽象データタイプ)
  • アクセス制御(パブリック~プライベート)
  • 情報隠蔽 (information hiding)

関数型プログラミング

  • 引数と関数の結果のみからなる世界
  • 単一代入
  • 副作用無し
  • 関数型プログラミングのモデルはλ式
  • リダクションにより計算が進む

高階関数 (関数閉包Closure)

  • 関数の引数が関数、あるいは、関数の結果が関数であるもの
  • 前提として、
    • 関数をデータとして引き渡せること
    • 関数実行の環境も合わせて渡すこと

論理プログラミング

  • 述語論理式(変数を含む)を記述
  • 動作原理:導出原理 (resolution principle) =導出規則+単一化(ユニフィケーション)
  • 簡単に言えば、いわゆる三段論法が実行可
    • 例:
      • 恋人はサンタクロース
      • サンタクロースはあわてん坊
      • 恋人はあわてん坊
  • 単一化(Unification):一種のパターンマッチ
    • f(X,b) = f(a,Y) ⇒ {X=a, Y=b}

遅延評価 (Lazy Evaluation)

  • 通常の計算は要素のデータが求まるまで待ち、すべてが揃ったら計算する(データ駆動)
  • これに対し、とりあえずは形だけの計算式を返し、本当に値が要求されたときに、初めて計算をする方式がある(遅延評価)

遅延評価の応用

  • 遅延評価を導入すると、たとえば、無限の数列(これをストリームと呼ぶ)に対する計算が可能となる。これによって、素数計算などが表現できる。
  • また、遅延評価によって、巨大なツリー同士の比較も実現可能となる。

遅延評価の利用例(Lispの場合)

(defun tarai (x y z) 
    (if (>  (force  x )  (force  y)) 
             (tarai   (delay  (tarai (1- x) y z)) 
                         (delay  (tarai (1- y) z x)) 
                         (delay  (tarai (1- z) x y))) 
                                      y ))) 

⇒従来の3000倍に高速化

[仕掛け]

(defmacro delay (x) ‘#’(lambda () ,x) 
(defmacro force (x) ‘(if (closurep ,x) (funcall ,x) ,x))) 

メタ評価器 (Meta Evaluator)

  • プログラミング言語の処理系(評価器)を制御する
  • 関数をデータとして扱えれば良い
  • メタ評価器が評価器を制御する

制約指向プログラミング

  • 何らかの制約を保持するように動く世界
  • 変数を含む左辺と右辺が等式で結ばれていた場合、制約指向ではどちら向きの計算でも可能
  • 例:摂氏Tcと華氏Tfの換算式
    • Tc x 9 = (Tf – 32) x 5

ビジュアルプログラミング

  • 従来のプログラミングは、ほぼ1次元
  • ビジュアルプログラミングは2次元の世界
  • テキストではなく図形が単位となる
  • 例:
    • LabVIEW: http://www.ni.com/labview/ja/
    • Max/MSP: http://www.sonasphere.com/max/
    • Squeak: http://squeakland.jp/
    • Viscuit : http://www.viscuit.com/
    • Mindstorms: http://www.legoeducation.jp/mindstorms/

プログラミングパラダイム

  • 手続き型プログラミング
  • オブジェクト指向プログラミング
  • 関数型プログラミング
  • 論理プログラミング
  • 制約指向プログラミング
  • ビジュアルプログラミング
  • その他のパラダイム

非プログラム的プログラミング

  • 遺伝的プログラミング
  • ニューラルネット

遺伝的プログラミング (GP)

  • Gtype(遺伝子コード)とPtype(発現形態)とをもつオブジェクトが進化する世界
  • 繰り返しの生産(生殖)により、より適合度の高いオブジェクトが生き残る
  • Gtypeは、組み替えや突然変異により変化
  • Ptypeは、Gtypeの変化により変わる

遺伝的プログラミングの実現

  • 遺伝的プログラミングは木構造で表わす。
  • 木構造はLispのS式が最も表現しやすい。
  • S式ではデータと関数の相互入替えが容易。

ニューラルネットワーク

  • ネットワークの結合度を変化させることにより、データのクラスタリングを行なうのが基本。
  • パターン認識などによく用いられる。
  • データのクラスタリングとしては、他にSVM (Support Vector Machine)と呼ぶ方法もある。

今後の予定

  • 最終報告メール提出 (1/15迄)
  • 第13回(1/17)発表とまとめ。最終レポート提出
    • 学生からプログラミング課題の発表。一人5分。
    • 報告書は作成したプログラムに関してだけではなく、この授業を通して学んだ「プログラミング経験」について書いて下さい。

最終課題「myベストプログラミングと全体報告」

  • ペアプログラミングの発展系、Mixiアプリ化したもの、その他何でも今回自分で頑張ったもの。
  • レポートを前々日(1/15)の23時までに提出し、最終回(1/17)にプレゼン。
  • 結果として作成したプログラムについてだけではなく、プログラミングのプロセス(要した時間、難しかった点、苦労した点、工夫した点、学んだこと、獲得したスキル、選んだ言語など)について詳しく報告する。
  • 今学期通じてプログラミング方法論で学んだこと、苦労したこと、分かったことも報告する。
  • 発表は質疑込みで一人8分程度。

参考文献

  • H. Ableson, G. Sussman, 和田英一訳,計算機プログラムの構造と解釈,ピアソン.
  • P. Roy, H. Haridi, 羽永洋訳,コンピュータプログラミングの概念・技法・モデル,翔泳社.
  • R. Sethi, 神林靖訳,プログラミング言語の概念と構造,アジソン・ウェスレイ.
  • 伊庭斉志,遺伝的プログラミング,東京電機大学出版局.
  • ポール・グレアム,ハッカーと画家,オーム社.

第12回資料

プログラミング方法論(12) ペアプログラミング実践

本日のあらすじ

  • ペアプログラミング実施(本日、最終日)
  • 最終課題とその報告について
  • 今後の予定
  • 12/27 ペアプロ報告提出。より高度なプログラミング
  • 1/17(火) 最終課題発表会(全員)

ペアプログラミングとは

  • 2人一組でプログラミングを行う
  • 2人で一台のコンピュータを使うこともある
  • プログラミングをする側とそれを見守りコメントする側とを交互に繰り返す
  • 見守るとき、お互いに口に出して考えていることをいう(プロトコルの交換)
  • 2人でうまく分担して、相互に相手の書いたものにコメントするやり方を併用しても良い
  • その時その時の具体的な目標を決めて実行する
  • Ref: http://tinyurl.com/83ta2d7

ペアプログラミングの進め方

特に、先週欠席だった人へ。

  1. パートナー(ペア)を決める
  2. 用いる言語を決める
  3. 取り組むべきプログラム課題を決める
  4. 分担、または、進め方を相談する
  5. ペアプログラミングの実践:本日12/20まで
  6. ペアプログラミング報告提出:次回12/27まで

ペアプログラミングの課題『斬新で未踏のクイズ』

  • クイズを出し、解答により正解か不正解かを判定して返すプログラムを作成する。
  • 複数の問題を出して、結果の集計を行ない、ランク判定(達人級など)をしても良い。
  • クイズの解答形式(選択式、数字入力、文字入力かなど)も工夫すると良い。
  • 問題の種類(コンテンツ)を工夫しても良いし、結果の集計方法などを工夫しても良い。
  • オリジナルでユニークなクイズに挑戦しよう。

クイズ(コンテンツ)の例

  • 4文字熟語クイズ
  • 難漢字/難地名/難人名クイズ
  • ご当地クイズ (SFCクイズ/藤沢クイズ)
  • オタク検定クイズ
  • ケーブル種別当てクイズ
  • イントロ曲当てクイズ
  • 画像のピースからの名画当てクイズ
  • 文章の断片から作家当てクイズなど
  • 単語当てクイズ (Wikipedia 逆引き) 2

ペアプログラミングの報告

  • 次回(12/27)授業開始時に紙で、それぞれが提出
  • タイトルは「ペアプログラミング報告」とする
  • ペアを組んだ人の名前と分担を明記。
  • 作ったプログラムと動作例
  • ペアプログラミングをやってみた感想(うまくいった点/いかなかった点/工夫点/苦労した点など)

今後の予定

  • 第13回(12/27) ペアプロ報告と講義
    • ペアプログラミング報告の提出(授業開始時) *「より高度なプログラミング法」(安村)
  • 第14回(1/17) 最終課題発表(学生全員)
    • 一人8分。スライドを用意。

最終課題「myベストプログラミング(一つ)と全体報告」

  • ペアプログラミングの発展系、mixi化したもの、その他どれでも良いので今学期プログラミング方法論で取り組んだプログラミング(一つ)と、今期の取組み全体の報告。
  • レポートを前々日の23時までにメールで提出し、最終回(1/17)に8分間プレゼン。
  • 結果として作成したプログラムについてだけではなく、プログラミングのプロセス(要した時間、難しかった点、苦労した点、工夫した点、学んだこと、獲得したスキル、選んだ言語など)について詳しく報告する。
  • 今学期通じてプログラミング方法論で学んだこと、苦労したこと、分かったことも報告する。

mixiアプリを作ってみよう

  • mixi上のWebアプリ
  • 準備: mixiデベロッパー登録
  • Gadget XMLファイル作成
  • Webサーバーへアップロード
  • mixiアプリの登録
  • 参考:mixi Development Center

mixiアプリのプログラミング例

  • 4文字熟語:熟語の一部を隠す
  • 1日5個程度の英単語学習:復習機能付き
  • 計算逆問題:計算式から演算子を答える
  • 和暦西暦当てクイズ
  • 製品性格推奨:製品の性格と消費者の性格
  • 数独パズル、クロスワードパズル
  • Mixiアプリ特有の工夫もトライしよう

※作成の際、著作権などに注意すること!

では、ペアプログラミング、開始!

  • ペアを決め、作るプログラミングを決め、スタート。
  • 今日が最終日です。
  • やったことのメモも忘れず取る。
  • 次回(12/27)〆切の報告書も忘れずに。

第11回資料

プログラミング方法論(11) ペアプログラミング実践

本日のあらすじ

  • ペアプログラミングとは
  • ペアプログラミングの進め方
  • ペアプログラミング課題「斬新なクイズ」
  • 今後の予定
    • 12/20 ペアプロまとめ。
    • 12/27 ペアプロの報告。より高度なプログラミング
    • 1/17 学生による最終課題発表。プログラミング上達法
    • ペアプロ実践

ペアプログラミングとは

  • 2人一組でプログラミングを行う
  • 2人で一台のコンピュータを使うこともある
  • プログラミングをする側(ドライバー/コーダー)とそれを見守りコメントする側(オブザーバー)とを交互に繰り返す
  • 2人でうまく分担して、相互に相手の書いたものにコメントするやり方を併用しても良い
  • その時その時の具体的な目標を決めて実行する

ペアプログラミング(PP)関連

  • プログラミングチーム
  • エクストリームプログラミング(XP)
  • リファクタリング(コードの内部構造整理)
  • リモートペアプログラミング

ペアプログラミングの進め方

  1. パートナー(ペア)を決める
  2. 用いる言語を決める
  3. 取り組むべきプログラム課題を決める
  4. 分担、または、進め方を相談する
  5. ペアプログラミングの実践:12/13, 12/20 原則、2人揃ってできる時のみ実施。
  6. ペアプログラミング報告: 12/27

ペアプログラミングの課題

斬新な/未踏なクイズ

  • クイズを出し、解答により正解か不正解かを判定して返すプログラムを作成する。
  • 複数の問題を出して、結果の集計を行ない、ランク判定(達人級など)をしても良い。
  • クイズの解答形式(選択式、数字入力、文字入力かなど)も工夫すると良い。
  • 問題の種類(コンテンツ)を工夫しても良いし、結果の集計方法などを工夫しても良い。
  • オリジナルでユニークなクイズに挑戦しよう。

クイズ(コンテンツ)の例

  • 4文字熟語クイズ
  • 難漢字、難地名、難人名クイズ
  • ご当地クイズ
  • SFCクイズ、藤沢クイズ、諭吉クイズ
  • オタク検定クイズ
  • ケーブル種別当てクイズ
  • イントロ曲当てクイズ
  • 画像のピース(断片)からの名画当てクイズ
  • 文章の断片から作家当てクイズなど
  • 単語当てクイズ (Wikipedia 逆引き)

ペアプログラミングの報告

  • 12/27に紙で、各自が提出
  • タイトルは「ペアプログラミング報告」とする
  • 作ったプログラムと動作例
  • ペアプログラミングをやってみた感想(うまくいった点/いかなかった点など)

今後の予定

  • 第12回(12/20) ペアプログラミングの実践
    • ペアプログラミングを実践とまとめ。
  • 第13回(12/27) より高度なプログラミング法
    • ペアプログラミング報告の提出
    • 遅延評価、メタ評価、非手続き的プログラミング
  • 第14回(1/17) 最終課題発表(学生による)
    • レポート提出
    • 学生から最終プログラミング課題の発表。
    • プログラミング上達法。

おまけ:mixiアプリを作ろう

  • mixi上のWebアプリ
  • 準備: mixiデベロッパー登録
  • Gadget XMLファイル作成
  • Webサーバーへアップロード
  • mixiアプリの登録
  • 参考:mixi Development Center

mixiアプリのプログラミング例

  • 4文字熟語:熟語の一部を隠す
  • 1日5個程度の英単語学習:復習機能付き
  • 計算逆問題:計算式から演算子を答える
  • 和暦西暦当てクイズ
  • 製品性格推奨:製品の性格と消費者の性格
  • 数独パズル、クロスワードパズル
  • Mixiアプリ特有の工夫もトライしよう ※作成の際、著作権などに注意すること!

では、ペアプログラミング、開始!

  • 言語を決め、ペアを決め、作るプログラミングを決め、スタート。
  • やったことのメモも忘れず取る。
  • 12/27 〆切の報告書提出も忘れずに。

次回(12月6日)の授業準備

次回の講義(12/6)は渡邊恵太博士によるアニメーションのプログラミングです。 講義中にFlashを使ったプログラミング演習を行います。

その準備のため、自分のPCにFlashが入っていない人は、Flash CS5.5の体験版のダウンロードをして来て下さい。以下からダウンロードできます。 http://www.adobe.com/jp/downloads/

以上、よろしくお願いします。

JavaScript演習課題

サンプル用画像ファイル :

(1) 簡単なプログラム 1-1.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    </script>
    <title>Hello, world!</title>
    </head>
    <body>
    <h1>Hello, world!</h1>
    </body>
    </html>

(2) 日付と時刻 1-2.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    </script>
    <title>今、何時?</title>
    </head>
    <body>
    <h1>今、何時?</h1>
    </body>
    </html>

(3) DOMの書き換え 3-2.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    <meta name="Content-Type" content="text/html; charset=utf-8" />
    <title>サンフランシスコ</title>
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <h1>サンフランシスコ</h1>
    <p id="pictureList">
    <a href="" onclick="">ケーブルカー</a>・
    <a href="" onclick="">フェリービルディング</a>
    </p>
    </body>
    </html>

(4) 摂氏・華氏の変換 4-2.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function clearEntry(id) {
      document.getElementById(id).value = "";
    }
    <title>温度換算フォーム</title>
    </head>
    <body>
    <h1>温度換算フォーム</h1>
    <p>摂氏・華氏いずれかの温度を入力してください: </p>
    <form>
    摂氏<input type="text" id="c" size="15”  />度(C)
    = 華氏<input type="text" id="f" size="15”  />度(F)
    <input type="button" value="計算する”  />
    </form>
    </body>
    </html>

(5) Google Map API

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <script src="http://maps.google.co.jp/maps?file=api&v=1&iamp;key=ここに自分のキーを入れる"
    type="text/javascript"></script>
    <title>sample1</title>
    </head>
    <body>
       <div id="map" style="width: 500px; height: 400px"></div>
       <script type="text/javascript">
       //<![CDATA[
       //]]>
      </script>
     </body>
    </html>

第8回資料

プログラミング方法論 (8) Webプログラミング(続き)

本日のあらすじ

  • Webプログラミングとは
  • 言語: PHP, Ruby, Java, Perl, JavaScriptなど
  • 主にJavaScriptを中心として
  • Webサンプルプログラム
  • 今後の予定
  • 演習

Webの進化

  • Web1.0からWeb2.0へ
    • 情報獲得から情報発信へ
    • 静的ページから動的ページへ
  • cf. Ajax (Asynchronous JavaScript and XML)

Webとプログラミング

  • Webでプログラミングする必要性
    • 『動的』ページの作成
    • 『計算』を裏でする(集計他)
    • 『より簡単』な記述

Webプログラミング:2つの方式

  • クライアントサイドスクリプト
    • クライアント側のイベント処理(マウス操作、 画像などの動的変更など)が主
    • JavaScriptなど
  • サーバーサイドスクリプト
    • サーバー側で大量のデータも処理可能
    • Perl, PHP他

JavaScriptとHTML

  • HTML − Webの記述言語
    • タグ形式で記述
  • JavaScriptはHTMLに埋め込まれる <script type=”text/javascript”> alert( “こんにちは!”); </script>
  • コード部分のみ外部ファイルにして(拡張子 はjs)、head部分は、 <script type=”text/javascript” src=“hello.js”> </script>

JavaScriptでできること

  • JavaScript ≠ Java
  • HTML(内容) + CSS(形式) + JavaScript(インタラクション)
  • DOM(文書オブジェクトモデル)を通じてWebブラウザを書き換えることができる

(1) 簡単なJavaScriptプログラム 1-1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type=“text/javascript”>function hello() { // 関数を定義
   alert(“Hello, world!”);} // ポップアップウィンドウで情報を表示。
</script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button onclick="hello();"> ここをクリック</button>
</body>
</html>

イベントハンドラー

  • onLoad: イベント読込みしたとき
  • onUnload: ページ移動したとき
  • onAbort: ページ読み込み中止
  • onError: エラー発生時
  • onFocus: フォーカスしたとき
  • onBlur: フォーカスを外したとき
  • onClick: クリックしたとき
  • onDbClick: ダブルクリック時
  • onDragDrop: ドラッグ&ドロップ 時
  • onKeyDown: キーを押したとき
  • onKeyPress: キーを押している間
  • onKeyUp: キーを離したとき
  • onMove: ウィンドウを移動したとき
  • onMouseOver: カーソルを重ねたとき
  • onMouseDown: マウスボタンを押したとき
  • onMouseUp: マウスボタンを離したとき
  • onMouseOut: カーソルを離したとき
  • onMouseMove: カーソルを移動したとき
  • onResize: ウィンドウをリサイズしたとき
  • onSelect: テキストを選択したとき
  • onChange: データの内容が変化したとき
  • onReset: フォームをリセットしたとき
  • onSubmit: フォームのsubmitボタンを押したとき

(2) 日付と時刻を読み込む 1-2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function whattime() {
var now = new Date(); // 変数nowにDateオブジェクトを代入して初期化
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDate();
var hh = now.getHours();
var mm = now.getMinutes();
var msg = "現在" + year + "年" + month + "月" + day + "日";
続き
msg += hh + "時" + mm + "分です。";
document.getElementById("click_here").innerHTML = msg;};
</script>
<title>今、何時?</title>
</head>
<body>
<h1>今、何時?</h1>
<span id="click_here" onclick="whattime();">
  知りたい人はここをクリック</span>
</body></html>

(3) DOM(文書オブジェクトモデル)の書き換え 3-2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta name="Content-Type" content="text/html; charset=utf-8" />
<title>サンフランシスコ</title>
<script type="text/javascript">
function showPicture(picfile, comment) {
if(document.getElementById("sfpicture")) {
var imgNode = document.getElementById("sfpicture");
document.getElementsByTagName("p")[1].childNodes[0].nodeValue =
comment;
} else {
var imgNode = document.createElement("img");
imgNode.setAttribute("id","sfpicture");
var para = document.createElement("p");
var setsumei = document.createTextNode(comment);
para.appendChild(setsumei);
var bodyElem = document.body;
bodyElem.appendChild(imgNode);
bodyElem.appendChild(para);
} mgNode.setAttribute("src", picfile);
}
</script>
</head>
<body>
<h1>サンフランシスコ</h1>
<p id="pictureList">
<a href="" onclick="showPicture('3_cable_car.jpg', 'サンフランシスコの
ケーブルカー');return false;">
ケーブルカー</a>・
<a href="" onclick="showPicture('3_ferry_building.jpg','サンフランシスコ
のフェリービルディング');return false;">
フェリービルディング</a>
</p>
</body>
</html>

(4) 摂氏・華氏の変換 4-2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function tempConvert() {
var celsius = document.getElementById("c"); // フォームの要素(摂氏)
var fahrenheit = document.getElementById("f"); // フォームの要素(華氏)
if(celsius.value != “” && !isNaN(Number(celsius.value))) { // 摂氏で入力された
fahrenheit.value = (Number(celsius.value)9/5+32).toFixed(0);
} else if (fahrenheit.value != “” && !isNaN(Number(fahrenheit.value))) { // 華氏で入力
celsius.value = ((Number(fahrenheit.value)-32)5/9).toFixed(0);
}
else { // いずれの値も入力されてないか、数字以外のものが入力された場合
alert("数字を入力して下さい。");
} }
function clearEntry(id) {
document.getElementById(id).value = "";
}
<title>温度換算フォーム</title>
</head>
<body>
<h1>温度換算フォーム</h1>
<p>摂氏・華氏いずれかの温度を入力してください: </p>
<form>
摂氏<input type="text" id="c" size="15” onfocus="clearEntry('f)"/>度(C)
= 華氏<input type="text" id="f" size="15” onfocus="clearEntry('c')"/>度(F)
<input type="button" value="計算する” onclick="tempConvert()"/>
</form>
</body>
</html>
(5) Google Map API
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" >
<script src="http://maps.google.co.jp/maps?file=api&v=1&key=
ここに自分のキーを入れる"
type="text/javascript"></script>
<title>sample1</title>
</head>
続き
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(139.732114, 35.672646), 0);
//]]>
</script>
</body>
</html>

Google Mapを使う手順

  • Google にログイン(アカウントがない人はアカウントを取得)
  • Google Map API のキーを取得(キーは、保存しておく)

今日の演習: JavaScriptに慣れよう

  1. 簡単なJavaScriptプログラムを作成しWebで表示させる。まずはサンプル(1)~(5)を動かしてみよう。
  2. データをフォームから読み込み、計算した結果を表示。たとえば、身長(cm)と体重(kg)から、BMIを計算:BMI=W(kg)/H(m)^2
  3. 性格判断プログラムをテストしてみよう。

今後の予定

  • 第9回(11/29)[実践]モバイルプログラミング (児玉哲彦博士)
    • Android, iPhone向けのモバイルプログラミング
  • 第10回(12/6) [実践]Flashプログラミング (渡邊恵太博士)
    • Flashを用いたプログラミングを学ぶ(教室はλ18)。
  • 第11回(12/13)[演習]ペアプログラミング (スタート)
    • ペアプログラミングの実践。
  • 第12回(12/20)[演習]ペアプログラミング (まとめ)
    • 引き続き、ペアプログラミングの実践。
  • 第13回(12/27)[発展]より高度なプログラミング
    • 遅延評価、メタ評価、非手続き的プログラミング
  • 第14回(1/17)発表とまとめ。最終レポート提出
    • 学生からプログラミング課題の発表。プログラミング上達法他

参考文献

  • 筧 捷彦, 川合 慧, 武市正人, 竹内郁雄, 野下浩平, 安村通晃, プログラミング・セミナー、共立出版, 1985.
  • Brian W. Kerninghan, Rob Pike著, 塩崎俊博訳, プログラミング作法, ASCII出版.
  • 小島まさご, 実践マスターPHP+MySQL, ソーテック.

Webプログラミング演習課題

Webプログラミング演習課題

 以下のWebプログラミング演習課題をできる範囲で行ない、その結果(作成したプログラム、実行時間の比較表など)と共にプログラミングのプロセスを書いたものを、Web上または紙上のポートフォリオ(活動記録)などにしっかり記録しておいて下さい。

 なお、ここに示す演習課題は、PHPを前提に書いてあるが、機能的に等価であれば、別のプログラミング言語でも構わない。

  • (1) 簡単なPHPプログラムを作成しWebで表示させる。まずはサンプルプログラムを動かしてみよう。
  • (2) データをフォームから読み込み、計算した結果を表示。たとえば、身長(cm)と体重(kg)から、BMIを計算:BMI=W(kg)/H(m)^2
  • (3) 性格判定のプログラムをWeb上に作ってみよう。
  • (4) [チャレンジ/オプション] アンケート集計プログラム作成を作ってみよう。

[hint]PHPのサンプルプログラム

フォーム側

<FORM method="POST" action="formscript.php">
お名前:<INPUT type="text" name="yourname"
size="20"><BR>
性別: <INPUT type="radio" name="gender" value="1">男性
  <INPUT type="radio" name="gender" value="2">女性
<BR>
<INPUT type="submit" name="submit" value="送信">
<INPUT type="reset" name="reset" value="リセット">
</FORM>

スクリプト側

    <?php
    $gender = $_POST["gender"];
    if($gender=="1"){$name_title = "Mr.";
    }else{$name_title = "Ms.";
    };
    echo "Hello, ", $name_title, $_POST["yourname"],
    ". How are you, today?<BR>\n";
    ?>

カレンダー表示

    <?php
    // Get today's year and month
    $y = date("Y");
    $m = date("m");
    // Get the week of the day for the first day of the
    month. mktime: Get date and time.
    $first_wd = date("w", mktime(0,0,0,$m,1,$y));
    // Get the last day of the month
    $lastday = date("d", mktime(0,0,0,$m+1,0,$y));
    // Get the week of the day for the last day of the month
    $last_wd = date("w", mktime(0,0,0,$m,$lastday,$y));
    // Output the header
    echo $m, $y, "<br>";
    echo "<table boarder=\"1\">\n";
    echo "<tr>\n";
    echo "<td>SU</td>\n";
    echo "<td>MO</td>\n";
    echo "<td>TU</td>\n";
    echo "<td>WE</td>\n";
    echo "<td>TH</td>\n";
    echo "<td>FR</td>\n";
    echo "<td>SA</td>\n";
    echo "</tr>\n";
    // Output dates
    for($d=1; $d<=$lastday; $d++){
    $w = date("w",mktime(0,0,0,$m,$d,$y));
    if($w==0||$d==1){echo "<tr>";
    if($first_wd!=0 && $d==1){
    for($i=$first_wd;$i>0;$i--){
    echo "<td> </td>\n";
    }
    }
    }
    echo "<td>$d</td>\n";
    }
    // Output tailer
    if($last_wd!=6){
    for($i=6;$i>$last_wd;$i--){
    echo "<td> </td>\n";
    }
    }
    echo "</tr>\n";
    echo "</table>\n";
    ?>

[補足]性格判定

性格の基本4特性

  • E(外向型)かI(内向型); Extraverts or Intraverts
  • S(現実型)かN(直観型); Sensors or iNtuitives
  • T(思考型)かF(情緒型); Thinkers or Feelings
  • J(規範型)かP(柔軟型); Judgers or Perceivers

16種類の性格類型

  • ENFJ型: 口がうまくて説得力があるタイプ
  • ENFP型: 余計な苦労を買ってでるタイプ
  • ENTJ型: 生まれながらの指導者タイプ
  • ENTP型: 次から次へと挑戦するタイプ
  • ESFJ型: 面倒見が良いタイプ
  • ESFP型: 人生は一度しかないタイプ
  • ESTJ型: 人生の管理者タイプ
  • ESTP型: 究極の現実主義者タイプ
  • INFJ型: 人に感化を与えるタイプ
  • INFP型: 社会のためになることをするタイプ
  • INTJ型: どんなことにも改善の余地があるタイプ
  • INTP型: 問題を解決したがるタイプ
  • ISFJ型: 義務感が強いタイプ
  • ISFP型: 見ているだけで口は出さないタイプ
  • ISTJ型: やらなければならないことはするタイプ
  • ISTP型: なんでも一度は試してみるタイプ

性格判断プログラム

  • 最初に、4種類の質問をしてE/I, S/N, T/F, J/Pの区別を行ない、その結果によって性格16類型に分けるWebページを作れ。
  • たとえば4つの質問としては次のようなものある(質問内容は自分で考えて変更すると良いかも)
    • 人の話を良く聞くよりもつい自分で話したくなる
    • 判断するには客観的なデータが不足していてもパッと決められる
    • 自分の意見を押し通すよりも人の意見に従うことが多い
    • 物事はルール通りではなく状況に応じて決めるのが良い
  • [参考資料:] http://www32.ocn.ne.jp/~emina/

おまけ:発展的課題

  • SNS(MixiやFacebook等)のアプリを作ってみよう
  • mixiアプリ開発者の登録をまず行なう
    • https://mixi.jp/guide_developer.pl
  • アプリの内容は、品位やプライバシーなど社会性にも配慮して作って下さい。

今後の予定

  • 第8回(11/15) [実践] Webプログラミング(続)
    • JavaScriptに慣れよう
  • 第9回(11/29)[実践]モバイルプログラミング (児玉哲彦博士)
    • Android, iPhone向けのモバイルプログラミング
  • 第10回(12/6) [実践]Flashプログラミング (渡邊恵太博士)
    • Flashを用いたプログラミングを学ぶ(教室はλ18)。
  • 第11回(12/13)[演習]ペアプログラミング (スタート)
    • ペアプログラミングの実践。
  • 第12回(12/20)[演習]ペアプログラミング (まとめ)
    • 引き続き、ペアプログラミングの実践。
  • 第13回(12/27)[発展]より高度なプログラミング
    • 遅延評価、メタ評価、非手続き的プログラミング
  • 第14回(1/17)発表とまとめ。最終レポート提出
    • 学生からプログラミング課題の発表。プログラミング上達法他

参考文献

  • 筧 捷彦, 川合 慧, 武市正人, 竹内郁雄, 野下浩平, 安村通晃, プログラミング・セミナー、共立出版, 1985.
  • Brian W. Kerninghan, Rob Pike著, 塩崎俊博訳, プログラミング作法, ASCII出版.
  • 小島まさご, 実践マスターPHP+MySQL, ソーテック.

第7回資料

プログラミング方法論 (7) Webプログラミング

本日のあらすじ

  • Webプログラミングとは
  • 言語: PHP, Ruby, Java, Perl, JavaScriptなど
  • 主にPHPを中心として
  • Webサンプルプログラム
  • 今後の予定
  • 演習

Webの進化

  • Web1.0からWeb2.0へ
    • 情報獲得から情報発信へ
    • 静的ページから動的ページへ
  • cf. Ajax (Asynchronous JavaScript and XML)

Web2.0

  • Web2.0の世界 Webとプログラミング
  • Webでプログラミングする必要性
    • 『動的』ページの作成
    • 『計算』を裏でする(集計他)
    • 『より簡単』な記述

Webプログラミング:2つの方式

  • クライアントサイドスクリプト
    • クライアント側のイベント処理(マウス操作、 画像などの動的変更など)が主
    • JavaScriptなど
  • サーバーサイドスクリプト
    • サーバー側で大量のデータも処理可能
    • Perl, PHP他

PHPとHTML

  • HTML − Webの記述言語
    • タグ形式で記述
  • PHPはHTMLに埋め込まれる
  • 基本形式
  • SFC-CNSでは /home/$USER/public_html/ の下にxxx.phpのファイルを持ってくれば動く

PHPでできること

  • ふつうのプログラミング言語としての機能
    • 変数の頭には$がつく
  • 固有の機能
    • クッキー:一定の期限内でデータを保存し再利用
    • セッション変数:ページがリロードされても消えない
    • header関数: httpを送信(特定URLへジャンプ等)
    • メール送受信
    • フォームで受け取ったデータの処理
    • MySQLなどのデータベースとの連携

フォームの処理

  • サーバーへの送信: post送信とget送信の2種類
    • <form action=“xxx.php” method=“POST”>
    • get送信では、?の後にデータを付けてURLとして送付
  • フォームの種類
    • テキスト、選択リスト、ラジオボタン、チェックボックス、ファイル、サブミットボタン、パスワードなど
    • <input type=“text” name=“フォーム要素名”>
  • フォームデータの受取り(スーパーグローバル変数)
    • $_POST[“フォーム要素名”]

フォームの例:フォーム側

<FORM method="POST" action="formscript.php">
お名前:<INPUT type="text" name="yourname"
size="20"><BR>
性別: <INPUT type="radio" name="gender" value="1">男性
  <INPUT type="radio" name="gender" value="2">女性
<BR>
<INPUT type="submit" name="submit" value="送信">
<INPUT type="reset" name="reset" value="リセット">
</FORM>

フォームの例:スクリプト側

    <?php
    $gender = $_POST["gender"];
    if($gender=="1"){$name_title = "Mr.";
    }else{$name_title = "Ms.";
    };
    echo "Hello, ", $name_title, $_POST["yourname"],
    ". How are you, today?<BR>\n";
    ?>

PHPプログラム例: カレンダー表示

        <?php
    // Get today's year and month
    $y = date("Y");
    $m = date("m");
    // Get the week of the day for the first day of the
    month. mktime: Get date and time.
    $first_wd = date("w", mktime(0,0,0,$m,1,$y));
    // Get the last day of the month
    $lastday = date("d", mktime(0,0,0,$m+1,0,$y));
    // Get the week of the day for the last day of the month
    $last_wd = date("w", mktime(0,0,0,$m,$lastday,$y));
    // Output the header
    echo $m, $y, "<br>";
    echo "<table boarder=\"1\">\n";
    echo "<tr>\n";
    echo "<td>SU</td>\n";
    echo "<td>MO</td>\n";
    echo "<td>TU</td>\n";
    echo "<td>WE</td>\n";
    echo "<td>TH</td>\n";
    echo "<td>FR</td>\n";
    echo "<td>SA</td>\n";
    echo "</tr>\n";
    // Output dates
    for($d=1; $d<=$lastday; $d++){
    $w = date("w",mktime(0,0,0,$m,$d,$y));
    if($w==0||$d==1){echo "<tr>";
    if($first_wd!=0 && $d==1){
    for($i=$first_wd;$i>0;$i--){
    echo "<td> </td>\n";
    }
    }
    }
    echo "<td>$d</td>\n";
    }
    // Output tailer
    if($last_wd!=6){
    for($i=6;$i>$last_wd;$i--){
    echo "<td> </td>\n";
    }
    }
    echo "</tr>\n";
    echo "</table>\n";
    ?>

今日の演習: PHPに慣れよう

  1. 簡単なPHPプログラムを作成しWebで表示させる。 まずはサンプルを動かしてみよう。
  2. データをフォームから読み込み、計算した結果を表示。たとえば、身長(cm)と体重(kg)から、BMIを 計算:BMI=W(kg)/H(m)^2
  3. 性格判定のページを作ってみよう。
  4. [チャレンジ] アンケート集計プログラム作成を 作ってみよう。

性格の基本4特性

  • E(外向型)かI(内向型); Extraverts or Intraverts
  • S(現実型)かN(直観型); Sensors or iNtuitives
  • T(思考型)かF(情緒型); Thinkers or Feelings
  • J(規範型)かP(柔軟型); Judgers or Perceivers

16種類の性格類型

  • ENFJ型: 口がうまくて説得力があるタイプ
  • ENFP型: 余計な苦労を買ってでるタイプ
  • ENTJ型: 生まれながらの指導者タイプ
  • ENTP型: 次から次へと挑戦するタイプ
  • ESFJ型: 面倒見が良いタイプ
  • ESFP型: 人生は一度しかないタイプ
  • ESTJ型: 人生の管理者タイプ
  • ESTP型: 究極の現実主義者タイプ
  • INFJ型: 人に感化を与えるタイプ
  • INFP型: 社会のためになることをするタイプ
  • INTJ型: どんなことにも改善の余地があるタイプ
  • INTP型: 問題を解決したがるタイプ
  • ISFJ型: 義務感が強いタイプ
  • ISFP型: 見ているだけで口は出さないタイプ
  • ISTJ型: やらなければならないことはするタイプ
  • ISTP型: なんでも一度は試してみるタイプ

性格判断プログラム

  • 最初に、4種類の質問をしてE/I, S/N, T/F, J/Pの区別を行ない、その結果によって性格16類型に分けるWebページを作れ。
  • たとえば4つの質問としては次のようなものある(質問内容は自分で考えて変更すると良いかも)
    • 人の話を良く聞くよりもつい自分で話したくなる
    • 判断するには客観的なデータが不足していてもパッと決められる
    • 自分の意見を押し通すよりも人の意見に従うことが多い
    • 物事はルール通りではなく状況に応じて決めるのが良い
  • [参考資料:] http://www32.ocn.ne.jp/~emina/

おまけ:発展的課題

  • SNS(MixiやFacebook等)のアプリを作ってみよう
  • mixiアプリ開発者の登録をまず行なう
    • https://mixi.jp/guide_developer.pl
  • アプリの内容は、品位やプライバシーなど社会性にも配慮して作って下さい。

いずれの演習課題も

  • Web/紙の上に、ポートフォリオを作成する
  • 設計に要した時間、デバッグに要した時間を記録
  • 苦労した点
  • 工夫した点
  • 今後の課題
  • 謝辞(誰に何を教わったか)
  • 参考文献/参考資料(Webを含む)

今後の予定

  • 第8回(11/15) [実践] Webプログラミング(続)
    • JavaScriptに慣れよう
  • 第9回(11/29)[実践]モバイルプログラミング (児玉哲彦博士)
    • Android, iPhone向けのモバイルプログラミング
  • 第10回(12/6) [実践]Flashプログラミング (渡邊恵太博士)
    • Flashを用いたプログラミングを学ぶ(教室はλ18)。
  • 第11回(12/13)[演習]ペアプログラミング (スタート)
    • ペアプログラミングの実践。
  • 第12回(12/20)[演習]ペアプログラミング (まとめ)
    • 引き続き、ペアプログラミングの実践。
  • 第13回(12/27)[発展]より高度なプログラミング
    • 遅延評価、メタ評価、非手続き的プログラミング
  • 第14回(1/17)発表とまとめ。最終レポート提出
    • 学生からプログラミング課題の発表。プログラミング上達法他

参考文献

  • 筧 捷彦, 川合 慧, 武市正人, 竹内郁雄, 野下浩平, 安村通晃, プログラミング・セミナー、共立出版, 1985.
  • Brian W. Kerninghan, Rob Pike著, 塩崎俊博訳, プログラミング作法, ASCII出版.
  • 小島まさご, 実践マスターPHP+MySQL, ソーテック.

レポート課題#3-2

課題3 – 2: Rubyプログラムデバッグ

以下のプログラムrev=erse4.rbをいろいろな数値データに対して実行し、エラーを見つけて下さい。(ヒント: n=7のとき、無限ループします。)

プログラムの課題

1の逆数を求める。初期データ(2~9のいずれか)を入力する。

実行の方法(例)

% ruby reverse4.rb Please input n? 7

データ7に対して、無限ループする。Cntr-Cで実行を中断する。

デバッグの方法

ruby -rdebug reverse4.rb

で、デバッガー上で実行する。

次に進めるのは、s。コマンドを見るのは、h。デバッガを終了させるのは、q。

reverse4.rb

#!/usr/local/bin/ruby
# Gyakusu Number Program
Max = 10
a = Array.new(10, 0)
b = Array.new(10, 0)
puts 'please input n?'
s = gets
n = s.to_i
i = 1
a[i] = 1
rflag = true
while rflag
  i = i + 1
  a[i] = a[i-1] * 10 % n
  b[i] = a[i-1] * 10 / n
# for debug
  puts "i=" + i.to_s + " a[i]=" + (a[i]).to_s + "\n" 
  if a[i] == 0 
    rflag = false # Finite decimal
    j = 0
  else   # search a[j] for (j<i)
    j = i
    begin # loop
      j = j - 1
    end until((a[j] == a[i])||(j=0))
    if (j>0) 
        rflag = false # Infinite decimal
    end
  end 
  puts "rflag=" + rflag.to_s # for degun
end # while loop
first = j
last = i
# print answer
puts  n.to_s + ' no gyakusu wa '
i = 0
while i < last
  i = i +1
  puts(b[i])
  if (i==first)
     puts "'"
  end

end
 if (j!=0) 
   puts "'"
 end

レポート課題#3-1

課題3 – 1:C++プログラムデバッグ

ライフゲーム。25×25の盤面で、最初に、初期データを入力する。 初期データは、xとyの座標を、空白を挟んで入力する。必要な数だけ入力し、これでデータは終わりとなったら、0 0を入力する。繰り返し回数を次に聞いてきますので、回数を整数で入力する。

コンパイルの方法

g++ -o life life1.cc

実行の方法(例)

life
Please input 2 digits for active cell.
  To stop input, input 0.
  8 9 Please input 2 digits for active cell.
  To stop input, input 0.
  8 8
..............
Please input 2 digits for active cell.
  To stop input, input 0.
  0 0 please input repeat times.
  12

デバッグの方法

  1. コンパイルエラーをまず取る
  2. 次に実行結果が異なるものに対しては、適切に、途中のデータを表示して間違いを発見する。

life1.cc

#include <iostream>
using namespace std;
// Life game program: life1.cc
int main(){
  const int size = 25;
  int span=0;
  int x; int y;
  bool input_flag = true;
  int a[size][size];
  int b[size][size];
  for(int i=0; i<size; i++}{
    for(int j=0; j<size; j++){
      a[i][j]=0; 
  }
  do{
    cout << "Please input 2 digits for active cell.\n";
    cout << "To stop input, input 0.\n";
    cin >> x; cin >>y;
    if ((x>0)&&(x<size)&&(y>0)(y<size)){a[x][y]=1}
    else input_flag = false;
  }while (input_flag);
  cout << "please input repeat times.\n";
  cin >> span;
  for(int t=0; t<=span; t++){
    // print cells
    for(int i=0; i<size; i++}{
      for(int j=0; j<size; j++){
        cout << a[i][j];}
      cout << "\n";
    }
    // compute life cells
    for(int i=1; i<size-1; i++}{
      for(int j=1; j<size-1; j++){
        int score = a[i-1][j-1]+a[i-1][j]+a[i-1][j+1]+
                    a[i][j-1]+a[i][j]+a[i][j+1]+
                    a[i+1][j-1]+a[i+1][j]+a[i+1][j+1];
        if (score = 3) {b[i][j] = 1}
        else if (score = 2) {b[i][j] = 2}
        else /* if ((score<2)||(score>3)) */ {b[i][j] = 0};
      }
    }
    for(int i=0; i<size; i++}{
      for(int j=0; j<size; j++){
        a[i][j] = b[i][j];
      }
    }
  }