プログラミング/情報処理II 授業計画

お知らせ>

・この計画は進捗に応じて変更される可能性があるため常に確認すること。
・PC等の設定により古いキャッシュデータが表示されることがあるためブラウザの更新ボタンをクリックするか、キーボードの[F5]キーを押して確認する。
・授業の2回目までに500MB程度以上の空きがあるUSBメモリを準備(左記空き容量があれば買う必要は無い)。その後は毎回持参すること。忘れた場合は演習にならないため大幅な減点とし、その回のミッションは次回までの宿題とする。
・大学のパソコン(ネットワークフォルダ)に資料やファイルを保存する場合は、マイドキュメント以下とする(デスクトップやその他の場所に保存すると自動で削除される)。
・前期の内容を忘れた人などのため前期の資料はこちら
・大学のパソコンに資料やファイルを保存する場合はマイドキュメント以下とする(デスクトップ等に保存すると自動削除される)。
・演習の進め方はこちらを参照のこと。
    オリエンテーション
     授業をはじめるにあたり、計画、評価方法について説明する。

    演習環境の構築
     今後プログラミング演習を行っていくための環境設定を行う。本日のミッションは以下。
    1. チーム毎に分かれ、互いに自己紹介。
    2. 設定ファイルを、マウスの右クリックして、ポップアップメニューから「対象をファイルに保存」を選び、デスクトップに保存する(「証明がない」などの警告が出るが無視する)。ファイルは、settings1.exesettings2.jaksettings3.jakの3つ。3つ揃ったらsettings1.exeをダブルクリック。ファイル名に数字のない「settings.exe」(名前に注意)が生成される。うまくいかない場合は、3つのファイルがすべて40MB(40000KB)程度か確認し、小さい場合はダウンロードに失敗しているので、問題があるファイルを削除してダウンロードし直す。
    3. 生成された「settings.exe」(名前に注意)をダブルクリック。保存先選択のポップアップウインドウが表れたらOK。うまくいかない場合は、ファイルを削除してダウンロードからやり直す。
    4. 保存先選択のポップアップウインドウの「参照」ボタンを押す。
    5. ここで一端ストップして、チームメンバーと確認しあいながら、出力先として、以下の正しい例のように指定する。
       ダメな例(作成したフォルダが指定されているとダメ)
        
        
       正しい例(USBメモリドライブが指定されていればOK)
        
        
    6. メンバーで確認しあって問題がなければ、OKをクリックし、パスコードを入力すると、解凍が始まる(30〜50分かかる)。途中、画面が固まるようになるが、解凍に時間がかかっているだけなので放置する。USBメモリのアクセスランプが点滅していれば動いていることが確認できる。
    7. チーム全員が、ここまでを終了したら、挙手して教員に報告。全チームが揃ったら、教員から説明を行う。こちらの資料も確認する。
    8. 教員の説明が終わり、解凍が終わったら、エクスプローラなどでUSBメモリにアクセスし「D:\xampp」や「E:\xampp」(ザンプと読む)フォルダがあれば設定完了。「D:\data\xampp」のように、作成したフォルダの中にxamppフォルダを作成してしまったら正常動作しないため、「D:\xampp」や「E:\xampp」となるようフォルダごと移動する。以下、ダメな例と正しい例。
       ダメな例(作成したフォルダにxamppフォルダが指定されているとダメ)
        
        
       正しい例(USBメモリドライブ直下にxamppフォルダが指定されていればOK)
        
        

      【サーバー(XAMPP)起動】
    9. USBメモリの「D:\xampp」や「E:\xampp」フォルダ内を見て、xampp-control.exeというファイルをダブルクリック(なお、この後、USBメモリは抜かないこと。もし抜く場合は、後述の正しい方法で停止する)。
    10. 初めて起動する場合、言語設定を聞かれるので、英語を選ぶ。
    11. XAMPP Control Panel(ザンプコントロールパネル)という画面が立ち上がったら、「Apache」の行の「Start」ボタンをクリックして仮想サーバーを起動。この作業は毎回行うので覚えておくこと。
    12. サーバーの動作を確認するために、ブラウザを起動。URL欄に「http://localhost/」(できない場合は「http://127.0.0.1/」)と入力し「XAMPP」のロゴが表示されたらOK。
    13. ここまで終了したら、チーム内に教員からOKをもらったメンバーがいる場合は、そのメンバーからチェックを受け、いない場合は教員からチェックを受ける。OKが出たら、こちらからミッションコンプリートを報告。コンプリート報告した人は、他のメンバーにそのことを伝えて助ける。宿題となったり休んだ人は自分でチェックしてコンプリート報告する

      【サーバー(XAMPP)停止】
    14. XAMPP Control Panelの「Apache」の行の「Stop」ボタンをクリックしてサーバーを停止し、同じ画面右下の「QUIT」ボタンをクリックしてXAMPPを終了させる。
    15. ブラウザで、先ほど仮想サーバーのURL「http://localhost/」(できない場合は「http://127.0.0.1/」)にアクセスし、「XAMPP」のロゴが表示されないことを確認。
    16. Windowsのタスクバーから、「ハードウェアを安全に取り外してメディアを取り出す」をクリックし、USBメモリに相当する「〜の取り出し」を選択。USBメモリへのアクセスがなくなったらUSBメモリを抜く。

      ★XAMPPがうまく起動しない場合は以下を試す
    1. よくあるミスは、USBメモリ直下にインストールしていないこと(「D:\xampp」のようにドライブ直下に設定せず、「D:\プログラミング2\xampp」のように、作成したフォルダの中にxamppフォルダを作成してしまうと正常動作しない)。
    2. Skypeと競合することがあるらしく、Skypeが動いていないかタスクバーなどで確認し、動いていたら停止する。
    3. 何かのアプリケーションが、XAMPPが使うポートを占有してしまっている可能性があるため、一度パソコンを再起動する。
    4. 教室でパソコンに余裕がある場合は、パソコンを替えてやってみる。それでも改善されなければ、USBメモリ側のファイルに問題がありうるため、インストールからやり直す。
    5. 何をやってもうまくいかない場合は、大学では導入済みのXAMPP、家ではXAMPPをパソコンにインストールして(USBタイプではなく)実施する。

    HTMLの復習とサーバーでの起動
    HTMLの復習を行い、サーバーでの起動を試みる。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。

    1. 【サーバー起動】前回の説明を思い出し、USBメモリに設定したXAMPPを起動せよ。今後の授業では、毎回、XAMPPを使うため、起動方法については記憶しておくこと。
    2. ブラウザで「http://localhost/」にアクセスし、XAMPP画面が表示されるか確認せよ。表示されない場合は、XAMPPの起動に失敗している可能性がある。
    3. 【エディタ起動】USBメモリの「xampp」フォルダ内で「htdocs」フォルダを見つけ、その中の「phpkiso」フォルダを開け。このフォルダは、今後も演習で使用するので覚えておくこと。
    4. 「phpkiso」フォルダに、エディタ起動ファイルがあるのでダブルクリックし、エディタ(Terapad)を起動せよ。
    5. Terapadが起動されたら、資料を見て、表示設定を変更せよ。変更されたら、全角スペースや半角スペースなどが記号で表示されていることを確認せよ。(大学のパソコンに設定済みのTerapadを使う場合は、表示設定を変更しても、次回には初期化されてしまうため、必要があれば毎度設定すること)
    6. 【HTMLの復習】資料を見ながらHTMLを作成する。資料にしたがいwellcome.html(本来はwelcomeだがテキストに合わせwellcomeとしている)を作成した上で、TeraPadで簡単に開く方法(p.47)でファイルを開いてみよ。
    7. p.48まで読み進め、localhostについて理解せよ。
    8. その後、テキストに沿って、wellcome.htmlを編集し、p.52の画面が表示されるか確かめよ。なお、その際は、ブラウザのURLがhttp://localhost/phpkiso/wellcome.htmlとなっているか確認せよ。
    9. p.53を読み、改行タグの2つの書き方を理解せよ。
    10. さらにテキストを読み進め、今度は、ひな形ファイルをコピーしてkonichiwa.htmlを作成。TeraPadで簡単に開く方法(p.47)で開いて編集し、p.54のようなwellcome.htmlからのリンクを完成させよ。なお、その際は、ブラウザのURLがhttp://localhost/phpkiso/konichiwa.htmlとなっていることを確認せよ。
    11. 「phpkiso」フォルダ内で右クリック、新規作成で「night」フォルダを作成し、ひな形ファイルをコピーして、「night」フォルダ内にkonbanwa.htmlを作成せよ(コピーしてファイル名を変更)。
    12. 作成したkonbanwa.htmlを編集し、青色の文字で「こんばんわ」と表示されるようにせよ。先に作成したwellcome.htmlの内容や、こちらの文字装飾のFONTタグの説明を参考にする。
    13. さらに、konbanwa.htmlに、「wellcomeに戻る」という文字を追加し、この文字をクリックすると、先に作成したwellcome.htmlにジャンプするようリンクを設定せよ。リンクの張り方は、先に作成したwellcome.htmlの内容や、こちらのリンク設定のAタグの説明、相対パスの指定については、相対パス指定の上位フォルダへのリンク方法を参考にする。
    14. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    15. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    データの出力処理
     PHPの概要について学び、演習に取り組む。PHPプログラミングでは、しばしばエラーが出るが、隣の人だけでなくチームメンバーで協力して解決する努力する→参考(このページ最下部)。全て完了したら教員ないしコンプリートメンバーからチェックを受けること。
    1. 前回同様、サーバーを起動し、エディタも起動せよ。
    2. 資料を読んで、掲載されたサンプルを参考に、「こんにちは」を出力するPHPスクリプトkihon01.phpを作成せよ。作成したらkihon01.phpを、localhostのサーバー経由でアクセスして「こんにちは」と正常に表示されることを確認せよ。
    3. 同じ資料を読み進めてPHPの書き方を理解しつつ、掲載されたサンプルを参考に、printをechoに変更して、「こんにちは」を太字で表すよう修正せよ。
    4. 資料に掲載されたサンプルを参考に、kihon01.phpに、文字を青色にするフォントタグを出力するecho文を設定し、「こんにちは」が青色に表示されるようにせよ。
    5. さらに資料を読み進め、PHPプログラムがHTMLに埋め込めることを理解し、そのうえで、上記PHPプログラムが、フォントサイズを5に設定するタグに埋め込まれる形(当該タグがPHPプログラムの外側にある形)で、フォントタグを設定せよ。そして確かにフォントサイズが拡大されることを確認せよ。
    6. 資料の「数値や数式と文字の扱い」を読んで内容を理解しつつ、掲載されたサンプルをkihon01.phpに追加し、echo文で数式を「文字列」として設定した場合と、同じ数式を「数値」として設定した場合で、処理結果が異なることを確かめよ。
    7. 資料の「ヒアドキュメントは長文も」を読んでヒアドキュメントについて理解し、掲載されたサンプルをkihon01.phpに追加して、ヒアドキュメントの書き方や意義を確認せよ。
    8. 以上の内容を踏まえて、練習問題に取り組み、PHPプログラムで指示された内容を実現せよ。
    9. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    10. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    データの入力・受け渡し処理
     入力データを受け取ってPHPスクリプトに受け渡す処理について学び、演習に取り組む。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動し、エディタも起動せよ。
    2. 資料を読んで、kihon02.htmlとkihon02.phpを作成せよ。また、それらを編集してデータ入力ページ、データ受信ページを完成させよ。サーバー(localhost)経由で表示し、データが受け渡しできることを確認せよ。またデータの受け渡しの仕組みについて理解せよ。
    3. 資料の、その他のデータ入力部品の箇所を読み資料にある通りデータ入力ページとデータ受信ページを作成せよ。作成したファイルはサーバー(localhost)経由で表示し、問題なく動作することを確認せよ。
    4. 以上の内容を踏まえて、練習問題に取り組み、指示された内容を実現せよ。
    5. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    6. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    変数と条件分岐、論理・比較演算
    展開への配慮
    内部データ渡しと不正防止
    繰り返し処理
    配列処理
    ファイルの読み書き
    ネットビジネス応用1:アクセス管理
    ネットビジネス応用2:コミュニケーション管理
    ネットビジネス応用2:コミュニケーション管理2
    最終回



    ●PHPでエラーになったら最低限のチェック
    • PHPのプログラム部分がブラウザに表示されてしまう!
    • 何も表示されない!
    • プログラムを編集しているのに反映されない!
      1. サーバーが正常に動作しているか?(XAMPPをチェック)
      2. サーバー(localhost)経由でアクセスしているか?(URLをチェック)
      3. 違うファイルを編集していないか?(エディタで「名前を付けて保存」して保存先を確認。違っている場合は適切なフォルダに保存し直す)
      4. PHPプログラムを含むファイルの名前が〜.phpで終わっているか?
      5. PHPプログラムが「<?php」と「?>」の間に挟まれているか?飛び出していないか?
    • Parse errorやFatal error・・・line 18のようなエラーが出る!
      1. 18行目かそれより前の行の命令にスペルミスはないか?
      2. 18行目かそれより前の行にセミコロン「;」の忘れはないか?
      3. 18行目かそれより前の行にシングルコーテーション「'」やダブルコーテーション「"」やカッコ「(」「{」の対応がとれているか?
      4. 18行目かそれより前の空白(表示する文字列以外)に全角スペースが含まれていないか?
      5. 18行目かそれより前の行のプログラムの命令やセミコロン「;」、シングルコーテーション「'」、ダブルコーテーション「"」、カッコ「(」「{」の文字が全角になっていないか?
  page bottom
 
 
 
USBメモリ情報
授業で使うUSBメモリは新たに買う必要はありません。500MB以上空き容量のあるUSBメモリを持っているならそれを使えばOK。以下あくまでも参考情報。PCでもスマホでも使えるUSBメモリもあるらしい。技術革新って素晴らしい。これが特にオススメではないのでご参考まで。

詳細はリンク先Amazonで。
 
参考資料情報
当授業は教科書ありませんが参考書を見たい人に以下資料を紹介します。まずはこの授業も参考にしているわかりやすさが評判のテキスト。

もう一歩進んで自分でイチから勉強してみたい人には以下をおススメします。これができるようになれば基本はほぼ完成。

最後の一冊。将来プロを目指しPHP全体をしっかりカバーしたい人はこのテキストが役に立つでしょう。

詳細はリンク先Amazonで。

 
 
ゼミで作った新愛学キャラ
「あぐ太」です!よろしく!

LINEスタンプSHOPから
「あぐ太」で検索

 

page top