１、Ｗｅｂプログラミングとは
「Ｗｅｂプログラミング」を理解するためには、まずは「Ｗｅｂページ」と「Ｗｅｂサイト」、「Ｗｅｂアプリケーション」を区別して理解する必要がある
「Ｗｅｂページ」とはWorld Wide Web上に置かれ、ブラウザでhttp（もしくはhttps）アクセスすることによって表示される、HTMLで記述された飾り付け文書のページのことを指す
また、「Ｗｅｂサイト」とは、特定のドメイン名の下にある複数のウェブページの集まりを指す
そして、「Ｗｅｂアプリケーション」とは、World Wide Webに限定せず（イントラネットも含め）ネットワークを介し、ブラウザとサーバが連携し一連の処理を行う応用プログラムを指す
Ｗｅｂプログラミングを簡単に言うと、Ｗｅｂアプリケーションを作成する行為になる
内容的には、ネットワークを介しサーバサイドプログラムとクライアントサイド（ブラウザ）プログラムを連携させて処理が行われるようプログラミングすることである
これを具体的に説明すると
１、ユーザがブラウザを用いてＷｅｂサーバにアクセスする
２、アクセスされたＷｅｂサーバはＵＲＬで指定されたサーバサイドプログラムを動作させ、SQLエンジンと連動したりしながら動的にＷｅｂページ（テキスト）を生成しブラウザへ渡す
３、渡されたＷｅｂページはHTML、CSS、JavaScriptにより記載され、ブラウザはCSSに従い描画し、JavaScriptによるクライアントサイドプログラムを動作させる
というように、ユーザは単にＷｅｂサイトにアクセスするだけだが、プログラマはサーバサイドおよびクライアントサイドの両プログラムを連携させるよう開発する必要がある
これを実現するために必要な知識や技術として
１、ネットワーク（含インターネット等）
２、各種文字コード
３、各種Ｗｅｂブラウザ
４、TCP/IPプロトコル
５、Ｗｅｂサーバの仕組み
６、サーバの操作（Unix系OSの操作）
７、サーバサイドでのプログラミング
８、HTML
９、CSS
10、JavaScript（クライアントサイドでのプログラミング）
11、セキュリティ（各種攻撃とその対応方法）
など様々な幅の広いスキルを必要とされるため、難易度は高くはないが、大変時間がかかり、豊富な知識量を必要とし、面倒なプログラミングとなる場合が多い
３、Ｗｅｂアプリケーション開発環境②分散型バージョン管理システム、セキュアな転送方式
Ｗｅｂアプリケーション開発においては、
①開発用コンピュータ（エディタやＩＤＥが準備されており、コーディングができる環境）
②クライアントサイドプログラムのテストラン用コンピュータ（複数のブラウザが準備されており、JavaScriptや描画のテストができる環境※マルチプラットフォームになることが多い）
③サーバサイドプログラムのテストラン用コンピュータ（必要なサービスの提供ができるよう準備されているサーバ環境※今回はＬＡＭＰ環境）
④本番用サーバ（必要なサービス以外のサービスも動作している、本番時にサーバサイドプログラムを動作させるサーバ）
等、複数のコンピュータを駆使して開発を進めていく
一般的にＷｅｂアプリケーションはインターネット上やイントラネット上のＷｅｂサーバに置かれるため、①と③や、①と④が同じコンピュータになることはない
よって、①から③や、①から④へ開発したサーバサイドプログラムを転送する必要性がある
ガンブラーによって、この隙（FTP転送）を突かれ、大きな被害が発生したため、皆さんとしては深刻にセキュアな転送方式についての理解と実践を行わなければならない
また、一般的に業務においては複数人で同時並行に開発を進めていくことになるため、バージョン管理システムが必須となる
その中でも、subversionを代表とする集中型バージョン管理システムがずっと使われ続けていた（それしかなかったというのもあるが）
集中型バージョン管理システムは、「サーバに一つだけリポジトリが存在する」という形式を取るため、
機密性：「FTPでアプロードする」という概念ではなくなるので、そういう面では機密性が高まる（暗号化はなされていないケースも多々あった）
高速性：常にネットワークを介し、更に多くの人数で同時に開発を行う必要があるため、コミット一つ捉えても時間がかかり非効率
操作性：リポジトリが一つしかないため、他人に知られず新機能の拡張開発等はできない
携帯性：ネットワーク接続ができなければ、開発を行うことはできない
保守性：サーバにあるメインリポジトリが自然災害や悪意ある攻撃により破壊された場合、全ての開発履歴とコードが完全消失する
※バックアップを取っておけば、その段階までリストアすることは可能
という煩わしさや信頼性の低さに悩まされていた
その後、Gitが現れて以来、分散型バージョン管理システムの
機密性：sshを経由した更新処理がデフォルトのため、FTPソフトを使うということも有り得ず、機密性がとても高い
高速性：開発者全員に個々ローカルリポジトリが存在するので、コミットが劇的に高速
操作性：開発者全員に個々ローカルリポジトリが存在するので、他人に知られずに新機能の拡張開発を行ったりすることもでき小回りが効く
携帯性：開発者全員に個々ローカルリポジトリが存在するので、ネットワーク接続なしでも継続的に開発が行える
保守性：サーバにあるメインリポジトリが自然災害や悪意ある攻撃により完全破壊されても、開発者全員がそれぞれローカルにリポジトリを持つため、完全に復元することが可能
などなど余りの強大なメリットにより、分散型バージョン管理システムの人気が高まることとなった
参考：http://blog.go2group.jp/2012/11/26/version-control-centralized-dvcs/
本来であれば、Ｗｅｂプログラミング技術を習得済みとして、複数人でのＷｅｂアプリケーション開発を行うことが理想であるが、現状ではそのレベルに達していないとのことだった
そのため、今回は複数人での開発は行わず（＝Git等の分散型バージョン管理システムは用いず）、P2P方式でのセキュアな転送方式を利用していただくこととする
もちろん、使いたい人は個人的に使ってもらって構わない
■FTP
FTPの利用は禁止
■利用可能なP2P転送方式
SFTP、FTPS、SSH、SCP等、いずれかのセキュアな転送方法でサーバ⇔クライアント間通信を行うこと
自分のサーバ（開発用）、先生の提出サーバの２つのサーバにアクセスできるよう設定しておくこと
Linux to Linuxで、OpenSSH ServerとOpenSSH Clientがインストールされていれば、クライアントよりサーバに対し、SCPコマンドによりセキュアなファイル転送が可能である
scp filename username@servername(ip address):/home/username
scp ファイル名 ユーザ名@サーバ名（もしくはIPアドレス） ファイル転送先ディレクトリ
Ubuntu DesktopをSSH Clientとして利用する場合はNautilusでローカルファイルを扱うようにSSHファイル転送が可能になる
４、Ｗｅｂアプリケーション開発環境③コーディングツール（エディタ、ＩＤＥ）
●Windows用
クライアントサイド（HTML AND CSS AND JavaScript）Editor（各種文字コード（上記７）が取り扱えるもの）
サーバサイドプログラム（スクリプト OR ソースコード）Editor（各種文字コード（上記７）が取り扱えるもの）
|
注 eclipseはオープンソースマルチプラットフォームなので、Windows用IDEとはいえないが、主にJava開発現場ではデファクトスタンダードになっているため掲載
Terapadは「学生用」というイメージで、プロが好んで使っているという印象はなかったが、近年マルチタブにも対応し良くなっているかもしれない（知らない）
エムソフトのEMEditorやEMFTPは利用しないこと
http://www.atmarkit.co.jp/ait/articles/1409/12/news014.html
http://www.forest.impress.co.jp/docs/news/20140904_665217.html
https://jp.emeditor.com/about/other-products/emftp/
Notepad++設定（もう、かなり以前の方法なので利用可能かどうかは不明）
「設定」→「環境設定」→「新規作成ドキュメント」→「エンコード」にて「UTF-8（BOMなし）」を選択 ＆ 「Apply while open ANSI file」をチェック
「設定」→「環境設定」→「新規作成ドキュメント」→「フォーマット」にて「Unix」を選択
「C:\Documents and Settings\username\Application Data\Notepad++\shortcuts.xml」を編集し<UserDefinedCommands>タグ内の上２行を下記５行に変更
（ただし、赤字のusernameは各自のログイン名等により変更してください）
|
その他の設定は各自好きなようにカスタマイズしていただいて結構です
世界No.1のWindows Programing Editorを楽しんでください
●Ubuntu用
クライアントサイドEditor：vi、emacs、nano、GEdit、eclipse
サーバサイドEditor：vi、emacs、nano
vi、emacs、nanoはCUI環境のエディタとして利用することができ、emacs、GEditはGUI環境のエディタとして利用することができる
さらに、GEditはUbuntu（GNOME）デフォルトのエディタでありながら、編集ファイルの拡張子を変えることにより、各種言語エディタとして利用することができる
特徴としては、
「vi」はUnixの伝統的なCUIエディタで、劇的に軽く慣れると神のように高速に扱うことができる（という噂？）
が、現在の汎用的なエディタとは随分異なるため、慣れるまでには相当な時間がかかる
そのため、昔ながらのUnix使いは好んで使うが、若い世代からは敬遠されがちである
ただ、Unixの伝統的なエディタであるため、viを搭載していないUnix系OSの存在を先生は知らないほど全てのUnix系OSで利用可能なエディタである
「emacs」も歴史が古く、インストールが必要な場合もあるが、多くのUnix系OSで利用可能である
けれど、高機能であるがゆえに劇的に重く、機能重視なユーザ以外には敬遠されがちである
開発部隊が分裂しながらも紆余曲折を経て、CUI版、GUI版、Windows版など幅広く提供している
「nano」は後発のCUIエディタだが、とても軽く使い勝手が汎用的で、現在多く利用されているRHEL、Fedora、CentOS、Ubuntuに標準で搭載されている
古いディストリビューションには搭載されていない場合もあるため、nanoのみで全て対応できるかというと一抹の不安は残る
「GEdit」はGNOME標準のGUIテキストエディタで、前述した通り拡張子を変えるだけで各種言語エディタに早変わりする便利なGUIタブエディタである
昔ながらに編集を遠隔地のコンピュータで行う場合は適さないが、今風にSSHでファイルを取り込みながらクライアントマシン側で編集する場合は無敵に近い
GUI環境にGNOMEを搭載しているUnix系OSであれば利用可能なため、REAL、Fedora、CentOS、Ubuntuらに標準搭載され利用環境は多い
「eclipse」は今や開発現場においてはデファクトスタンダードな環境である
このeclipseさえあれば、ありとあらゆる開発が行えるため、
多くのＩＴ技術者たちはWindowsからLinuxに乗り換えることとなった
かのAndroid開発もeclipseで行うし、Go言語もeclipseで行うことができる
共同開発にも強く、業界ではメインとして使われているが、動作は重くそれなりのコンピュータでないとじれったさが残る
愛知県における多くのＩＴ企業も導入しているが、eclipseで作ることは容易いため、SYシステムの社長は「学校では通常のエディタで開発して欲しい」との要望がある
などがあげられる
「新時代プログラマとしては、臨時遠隔編集は「nano」、通常遠隔や通常ローカル編集は「GEdit」で良いのではないか」という先生の勝手な解釈により、
Ubuntu使いの開発者においては「vi」で叩きのめされて「nano」に逃げて「GEdit」に落ち着くという形で３エディタを試すことを推奨する
●準マルチプラットフォーム（Google Chrome限定）
クライアントサイド＆サーバサイドEditor：Chrome Dev Editor (developer preview)
Dartで作られているため「chrome」専用になるが、あらゆるOS、あらゆる端末での編集が可能になる、Google純正の次世代マルチタブＷｅｂエディタである
・新規プロジェクトもしくはプロジェクトフォルダを開いて、プロジェクトグループ単位での開発が可能
・Google Documentsと同様に「保存」という行為が必要なく、編集がおわった段階で自動保存
・１クリックでブラウザでのプレビューが可能
・驚くべきことにGitクライアント機能も内包
・Windowsで使っても、文字コードはUTF-8固定で、それ以外の文字コードは（保存も読み込みも）取り扱いできないので、コード変換には使えない
・その他、紹介しているＷｅｂサイト１
・その他、紹介しているＷｅｂサイト２
・その他、紹介しているＷｅｂサイト３
・その他、紹介しているＷｅｂサイト４
先生が使ってみた感想としては、下記の通りであった
・機能的にはシンプルで使いやすい！
・近視なので「黒背景に白文字」や「小さなフォントサイズ」は見難い（こういった細かな変更はできないようだ）
・やっぱりGitなのか！！
・やっぱりUTF-8 Onlyなのか！！
・１０年後にはこういったエディタが当たり前になるのかもしれない、それ以前に、近い将来Chromeに標準で内包されるのかもしれない
デバッグツールが内包されているのに、開発ツールが内包されていないのは違和感を感じる
これさえあれば、Chrome一つで開発からテストラン、デバッグまでの一連の作業を完結できる
これさえあれば、ブラウジングしかできないChromebookでもＷｅｂアプリケーション開発が可能
挑戦してみたいという学生は、ぜひ挑戦してみて下さい
５、Ｗｅｂアプリケーション開発環境④クライアントサイドテストラン環境（ブラウザ）
〜JavaScriptエンジン、レンダリングエンジン、動作可能OSの把握〜
|
※１：Internet ExplorerはJavaScriptは動作せず、独自のJScriptが動作する
※２：iOSは他のエンジンの搭載を許容しないため、Safariのエンジンを利用
※３：iOSが他のエンジンの搭載を許容しないため、Operaのエンジンをサーバサイドで動作させ、その処理後の描画結果htmlを転送させ表示（そのためAjax不能）
ブラウザシェア、ＯＳシェアなどはW3Counter参照
他にも携帯情報端末の動向も意識しなければならない
現在、日本においてケアしておいた方が良いと思われるプラットフォーム（OS&ブラウザ）は下記の14通りになる
① OS:Windows Browser:Internet Explorer
② OS:Windows Browser:Google Chrome
③ OS:Windows Browser:Mozilla Firefox
④ OS:Windows Browser:Opera
⑤ OS:Mac OS X Browser:Safari
⑥ OS:Mac OS X Browser:Google Chrome
⑦ OS:Mac OS X Browser:Mozilla Firefox
⑧ OS:Mac OS X Browser:Opera
⑨ OS:Linux Browser:Chromium
⑩ OS:Linux Browser:Google Chrome
⑪ OS:Linux Browser:Mozilla Firefox
⑫ OS:Linux Browser:Opera
⑬ OS:iOS Browser:Safari(Google Chrome)
⑭ OS:Android Browser:Google Chrome
他のプログラミングと比較し、Webプログラミング自体の難易度は高くはないが、以前はアクセスしてきたOS毎に異なるページを送信しなければならなかったり、
ブラウザ毎に異なるJavaScriptエンジン、レンダリングエンジンを搭載しているため、それぞれのブラウザで正常動作する複数のコードを書かなければならなかった
それによって、同じ処理をする何種類ものコードを書かなければならないことが多く、非常に面倒であった
しかし、近年「Web標準（HTML5&JavaScript&CSS）に忠実に準拠」するブラウザが大半を占めるようになったため、
マルチプラットフォーム（いずれのOS、いずれのブラウザ、いずれの端末でも）ワンソース（単一の処理コードだけ）で開発できる可能性が見えてきた
MicrosoftのInternet Explorerだけは「Web標準に準拠」すると毎回言ってはいるが、現実的に不可能だと推測する
理由は、Microsoftは特許でお金を儲けるのは好きだが、特許料を支払うのが嫌いだからである
そのため、そもそもInternet ExplorerはJavaScriptが動作せず、JavaScriptを真似て作った独自のJScriptや、これまた独自のVBScriptしか動作しないのである
Microsoftは、このJScriptでJavaScriptを脅かし、やがては特許料を得ようと考えていたのであろう
けれど、気がついてみれば、Internet Explorer以外のブラウザは全て「Web標準に準拠」してしまい、Microsoftだけが取り残された
Microsoftは一人きりで、いくつもの棺桶を引きずり（過去の互換性維持）ながら、行き先のない旅を続けることとなったのだ
この独自路線を突き進む姿勢が更にWindowsやInternet Explorerの性能低下を招いている
Internet Explorerは以前の独自バージョンのブラウザとの互換性を維持し続けている
そのため、Version 6、7、8、9、10という何種類ものJavaScriptエンジンやレンダリングエンジンを一つのブラウザに内包しているのだ
まさに、いくつもの棺桶を引きずっている状態である
これでは、「巨大で重くて遅い」という三重苦となるのは必然である
更に、何種類ものバージョンを保持し続けるということは、それだけセキュリティホールも保持し続けることにもなり、その保守の負担増にも繋がる
結果として、Internet Explorerはセキュリティ的にも最も脆弱性の高いブラウザとなり、ある程度以上のITスキルがあるユーザからは敬遠される存在となった
そして、Microsoftはセキュリティを含めた四重苦を克服するためにInternet Explorerについての英断を下した
何と、2016/1/12以降は過去の互換性を切り捨てる決断をしたのである
米MS、2016年1月12日以降にInternet Explorer旧バージョンのサポートを打ち切り
この「過去の互換性の切り捨て」により、過去の互換性を必要としていたユーザが離れるデメリットの変わりに、いくつかのメリットが得られる
単一のJavaScriptエンジンやレンダリングエンジンの搭載だけで済むため、
・今までほど巨大ではなくなる
・今までほど重くはなくなる
・今までほど遅くはなくなる
・セキュリティホールに対する保守の負担が激減し品質があがる
というように、四重苦の全てを快方に向かわせることが可能となるのだ
だからと言って他ブラウザに匹敵できるレベルになるのは遠い先だと思われるため、失ったユーザ数を取り戻すことは難しいだろう
その理由は、JavaScriptエンジン（IEはJScriptだが）やレンダリングエンジンの性能が極端に低すぎるのだ（下手をすると他ブラウザと100倍以上の性能差がある）
更に、今後、過去の互換性維持の呪縛を克服できたとしても、JScriptという独自仕様を排除しない限り、「Web標準準拠」は「実現不能な目標」となってしまうだろう
もしも、どうしてもInternet Explorerを普及させたいのなら、JScriptを切り捨てる英断も必要なのである
ただ、MicrosoftにはInternet Explorerを普及させるメリットがもうすでになくなってしまっている
以前はGoogleに対する敵対意識が強くあったため、意地になっていたところがあったが、もう完全な敗北を喫したことは明白なので、今更こだわる必要性はない
元々無料で配布し利益を産まないプロジェクトでもあるし、ブラウザなどGoogleやMozilla、Opera等作りたがる組織に作らせておけばいい
ここまで低品質なソフトウェアを公開していることこそMicrosoftのイメージ的に問題があると考えるべきである
Internet Explorerは、この数年で驚くほど劇的にシェアを落とした
以前のIEのシェアは、OSの普及率同様、当たり前のように80％〜90％以上あったが、今では18％程度しかないほどである
W3Counter
また、「未だIEを使っているユーザ」よりも、「他のブラウザへ移行したユーザ」の方がITスキルも高いことが想定される
そのため「IE用」でサイトを作るより、「Web標準準拠」でサイトを作ったほうが、Google+やFacebook、TwitterなどSNSでの宣伝効果は絶大なものとなる
「Web標準準拠」でサイトを作ったほうが、より人気があり、より好まれるサイトとなるため、今は「Web標準準拠」でのサイト作成が主流となった
モバイルの観点からも同様のことが言える
「IE用」でサイトを作ってしまうと、WindowsのInternet Explorerでしか正常にサイトを見られないケースが多い
それに対し、「Web標準準拠」でサイトを作れば、あらゆるパソコン用OSはもちろんのこと、AndroidやiOS等のモバイルデバイスでも正常に見られることが期待できる
ただし、銀行などの保守的で変更を好まない企業などは、未だ「Internet Explorer」に限定したインターネットバンキングしかできないサイトも多い
高い能力の技術者がいないということもあるだろうが、「他のブラウザへ移行したユーザ」はIEを使えるが、「未だIEを使っているユーザ」はIEしか使えないという実情もある
突然、IEが使えなくなってしまうとインターネットバンキングを利用できなくなるユーザが潜在的に多くいるのだ
悲しいかな、Microsoftの独自仕様というのはブラウザ程度は軽いもので、ファイルの取り扱いはもちろんのこと、メールの取り扱い等も標準を無視して、ずっと勝手仕様で進めて来てしまっている
Windowsはファイル名の後ろにつく拡張子でファイルの種類を決め打ちしてしまっている
これは、非常に危険なことで、
拡張子が「.txt」ならテキストファイルと思い込み、開こうとするとメモ帳等で自動的に開いてしまう
拡張子が「.html」ならＷｅｂページだと思い込み、開こうとするとブラウザ等で自動的に開いてしまう
拡張子が「.gif」なら画像ファイルだと思い込み、開こうとすると画像編集プログラム等で自動的に開いてしまう
というように実態が何なのかもわからず、拡張子名だけで決め打ちした定型的な処理を行なってしまう。
この情けない仕様のおかげで、多くのマルウェア感染やウィルス感染を起こしている。
メモ帳が用意した、ヒープ領域にテキストファイルだと思い込んだ悪意あるバイナリプログラムを読み込んでしまい、実行可能な状況にしてしまっている訳なので当然である。
間違いだらけのメールリーダ
これなども、Windows独特の「拡張子」が欲しくて勝手に追加した仕様の例である
本当にgitファイルとは限らない「foo.gif」を取り込んだときにマルウェア感染やウィルス感染してしまうことは目に見えている
Microsoftがこのような独自仕様を全て排除し、標準準拠をしていかない限り、妙なOSとしてガラパゴスな世界で生き続けていくだけの存在になってしまうだろう
ちなみに、Unix系OSでは、拡張子の存在は必要なく、パーミッションによって実行の許可（そのファイルがデータなのかプログラムなのかの判別）をし、
ファイル内の先頭に存在するファイルヘッダによってファイルの中身の判別（そのファイルの種類や内部フォーマットの判別）をしている
そのため「foo.gif」をダブルクリックしても、当然gifファイルにはパーミッションにて実行の許可は入っていないため、プログラムとしては動作できない
次にファイルヘッダを読み込み中身の判別をすれば「gifファイル」ではないことはすぐに判別できるので、「gifファイル」に関連付けられたアプリケーションは起動しない
つまり、「gifファイル」に関連付けられたアプリケーションがその偽装した「gifファイル」を読み込み、マルウェアに感染することはありえないのである
逆にテキストファイルの拡張子をgifに変更し「foo.gif」というファイルを作り、これをダブルクリックすれば、正しくエディタが起動し「foo.gif」を読み込む
性別判断で例えるなら、Windowsは名前だけで行い、Unix系OSは体の構成（DNA）を調べることで行なっているような状態である
それでも（このような適当な処理をしていても）、Windowsのファイルの取り扱いや各処理の速度がUnix系OSより数倍遅いことを考えると、Windowsの未来は暗い
独自仕様を全て排除し、WindowsというOSの基礎的でセキュリティ的にも重要な各機能の進化を願ってはいるが、今のMicrosoftの状況では期待は薄いと判断するしかない
また、モバイルは無視できないどころか、今の主流として必ず対応しなければならない時代となった
モバイルOS世界シェア
世界スマートフォンシェアNo.1はAndroidで85％、No.2はiOSで12％程度のシェアがあり、Windows Phoneは3.8％から2.7％へ減少しているような状況である
Windows Phoneに関しては、シェア以前に、日本ではもう手に入らないため、現時点においては対応する必要性は皆無である
AndroidがChromeを標準ブラウザとしてきたため、今後Chromeのシェアは更に圧倒的なものとなる可能性が高い
iOSではSafari以外のブラウザを基本的には受け入れていないため、全てがSafariのシェア実績となっている（おかしい！！）
※iOSでChromeやFirefox、Operaを利用しても、SafariのJavaScriptエンジンやレンダリングエンジンを利用せざるを得ないため
iOS以外のChromeとOperaは同じJavaScriptエンジン（V8）とレンダリングエンジン（Blink）を利用している
そして、Chrome&Operaを始めとし、Firefox、Safariも原則として「Web標準準拠」している
そのため、Internet Explorer以外のブラウザにおいては「マルチプラットフォーム by オンリーワンソース」のWebアプリ開発が可能になってきている
以前は、端末の種類や画面サイズ、画面の向きに応じて個別のページを提供していた（マルチプラットフォーム by マルチソース）が、今はモバイルがPCと同じページも表示できるようになってきた
それによって、今後はGoogleも推奨するレスポンシブWebデザイン（画面の横幅に合わせ、CSSで描画サイズを調整する方式）は標準のＷｅｂ描画技術となることは予想に容易い
それどころか、更に進んだ次世代描画方式（横幅だけでなく高さも勘案し、ポートレートかランドスケープなのかも判断し、JavaScriptで描画サイズ調整する方式）の普及も予想される
先生の立場としては「Chromeのみ対応」と指定することもできるが、学生諸君は就職後業務で作成するため、IEやSafariも無視できない場面が多い
極端な例を言えば、未だWindows XPでInternet Explorer 6でのWeb保守業務などもある
けれど、本来の理想的なブラウザ選択としては、マルチプラットフォームで閲覧可能なものが良い
そう考えると、Windowsでしか動かず、かつJavaScriptが正常に動かない（独自仕様のJScriptやVBScriptが動く）IEは論外として、
Mac OS Xでしか動かず、Appleの暴走により独自仕様が強く、そしてシェアも低いSafariも理想的とは言えない
Chrome、Firefox、OperaはWindows、Mac OS X、Unix系OSの全てに対応しているため、かなり理想的である
また、レンダリングエンジンだけを考えれば、OperaはChromeのBlinkを利用しているし、そのBlinkはSafariのWebkitからフォークしている
つまり、SafariとChrome、Operaは同じDNAを持っていると言える
また、今や収入のほぼ全てをGoogleに頼っているMozillaとしてみれば、FirefoxがChromeに相反する描画などさせられない
そのため、Chromeを中心に捉え、Web標準準拠のコードを書けば、ほとんど同じ見栄えが期待できるようになった
まとめてみると、先生的にできるだけ楽に、そしてできるだけ幅広いユーザを対象としたWebアプリを作るために、
１、とあるPC版Chromeをターゲットとし開発
２、完成したら異なるOSのPC版Chromeでテスト（JavaScript動作とレンダリング確認）を行う（問題があれば修正）
３、完成したらAndroidのChromeでテストを行う（問題があれば２〜３を繰り返し修正）
４、完成したらiOSのChromeでテストを行う（問題があれば２〜４を繰り返し修正）
５、完成したらiOSのSafariでテストを行う（問題があれば２〜５を繰り返し修正）
６、完成したらPC版Firefox(とMacがあればSafari)でテストを行う（問題が簡単に修正できるなら２〜６を繰り返し修正、ダメなら諦めサポートから外す）
７、以降修正したら２〜６を繰り返し修正
のような手法を取っている
ただし、業務開発する学生諸君は、各PCOS版のIE、Firefox、Chrome、Safari、Operaと共に、モバイルとしてiOS版Safari、Android版Chromeなどもサポートしなければならない
結果として、上記①〜⑭の１４通りのサポートが必要になる
また、JavaScriptに関しては「同じブラウザでOSの違いにより動作が異なる」ということを経験したことはない
それに対し、レンダリングに関しては「同じブラウザでOSの違いにより描画が異なる」ということは多々経験したことがある
そのため、レンダリングテストはJavaScript以上に、各種OSのブラウザで丁寧に確認したほうが良い
■デバッグツール
クライアントサイドのみに限定されるが、今の時代、ブラウザを用いたデバッグツールの利用は必須になった
代表的なものはMozilla Firefoxのアドオンとしてインストールする「Firebug」になる
Firebugは最も強力なＷｅｂ開発用デバッグツールで、解析だけでなく、Cookieや変数の書き換えもできる
Google Chromeに内包された、Chromeデベロッパー・ツールもなかなか良い
このChromeデベロッパー・ツールは、GoogleがFirebug制作者を引き抜き、制作させたことでも有名で、そういう面では共通的なポリシーを感じる部分もある
Chromeデベロッパー・ツールの方が後発な分、スマートで使いやすい部分があるが、値の書き換えができない部分等もあり、明らかにFirebugの方が強力ではある
ただ、Firebugほどの強力さは、ハッキングするようなケースでしか使わないのではないか？という疑念もある
そういう面では解析に留まるChromeデベロッパー・ツールで問題ないのかもしれない
また、現在のChromeの普及度を勘案すると、Chromeベースでの開発を行う開発者が今後の主流であると思われる
先生の方では、どちらを使えとは指示をしないので、各自で使いたい方のツールを極めて欲しい（もちろん両方使えることが望ましいが）
６、Ｗｅｂアプリケーション開発環境⑤サーバサイドテストラン環境（ＬＡＭＰサーバ）
〜仮想化の理解と構築、サーバOSのインストールと環境構築〜
■仮想化
仮想化エンジンも色々あるが、この数年間では、
VMWareが登場した
Sun MicrosystemsをOlacleが買収した
KVMがLinuxメインラインに組み込まれた
Dockerが登場した
というのが最も大きな出来事だろう
かつて、GUI型クライアントOSの仮想化は、SunのVirtualBoxを仮想化エンジンとして利用していた
その一番の理由はSunであるということであり、オープンソースであるということである
VMWareなど性能的にはVirtualBoxと匹敵もしくは凌駕するような製品もあるが、やはり一企業が独自支配している製品はベンダロックオンの様々な弊害が考えられる
VMWareも2009年から一部オープンソースになったが、Sunのように安心して利用できる会社ではない
ところが、そのSunがOlacleに買収された
ぼったくりのボラクルとまで言われる会社にである
案の定OlacleはJavaの特許を使ってAndroidの配布禁止を唱えるなど、オープンソース社会を敵に回した行動に出てきた
かの米ユニシス以来の暴挙と言える
そういう観点から、OlacleのVirtualBoxはさすがに心情的に利用したくはない
けれど、VirtualBoxはオープンソースであったため、買収後Oracle版VirtualBoxからフォークしたVirtualBoxOSEが、Olacleの影響を受けることなくOSSの世界で着々と育っていた
それも、安定し高性能な仮想エンジンとして
案の定、Oracleは自前のOracle版VirtualBoxを廃棄し、OSE版に合流を求めた
そして、「OSE」という名称は消え、OSSではあるもののOracleとの連携機能も保持する（きっと出資を受けたのではないかと思う）VirtualBoxとなった
Oracleと聞くと少し抵抗感があるものの、OracleにOSSが勝利した証でもあるので、応援したい思いもあるという複雑な心境である
一方、CUI型サーバOS仮想化の本命はVMWareからLinuxKVMへシフトしていた
その理由は、
RedHatの働きかけにより、KVMがLinuxメインラインに取り込まれたこと＝安定しセキュアな仮想化の提供が約束される
クラウド提供事業者がVMWareを利用すると、その利益の殆どすべてをVMWareに持って行かれること＝利益がでないことなどやっても意味がない
等にあったようだ
そこで、さくらインターネットやGMOグループ、KDDIなどほぼ全てのVPS提供事業者はLinuxKVMへ移行することになった
クラウドを自前構築し、運用だけしたいケースにおいては、お金はかかるもののサポートを委託できるVMWareは未だ健在ではあるが、VMWareの従業員でない皆さんが構築することはない
結果、サーバサイドで考えるとKVMが本命で、お金で解決派にはVMWareとなった
そこに新星の如くDocker（コンテナ型仮想化）が登場した
仮想化解説ページ
その性能（省メモリ性、ミリ秒単位という高速起動性、CPU負荷の激減、管理の容易さ、仮想化の仮想化の実現性など）は凄まじいものであった
当然だが、Google、Microsoft、IBM、RedHat、VMWareと錚々（そうそう）たるメンバーが喰いついた
まだ、正式公開（Version1の公開）から３ヶ月程度しか経過していないが、多くの開発者が集まり、もの凄い速度で進化している
仮想化は技術革新に伴う変化の多い分野なので、今後も注目し、各自よく研究してもらいたい
今回は、皆さん希望の仮想化エンジンを利用していただき、希望のOSをクライアント（開発マシン）として利用し、希望のLinuxサーバを構築して（既存サーバの利用可）いただくこととする
■ＬＡＭＰサーバの設定変更
●サーバの固定IPアドレスの設定
/etc/network/interfaces
❍DHCPの場合
auto eth0 iface eth0 inet dhcp❍固定IPアドレスへ変更する場合（下記表記には全角スペースを含んだ文字が使われているため、コピペする場合には取り除くこと）
auto eth0 iface eth0 inet static address 172.16.111.1XX ← IPアドレス（XXに自分の学籍番号の下二桁を入れる） netmask 255.255.0.0 ← ネットマスク network 172.16.1.0 ← ネットワークアドレス broadcast 172.16.255.255 ← ブロードキャストアドレス gateway 172.16.0.254 ← デフォルトゲートウェイ # dns-* options are implemented by the resolvconf package, if installed dns-nameservers 172.16.0.1 ← DNSサーバ dns-search sis ← 参加ドメイン
●apacheの設定
❍UserDir（プロバイダのサーバのようにユーザごとにＷｅｂ公開領域を作成する場合）を使用したい場合は、端末にて下記命令を実行
sudo a2enmod userdir❍httpアクセス時の設定
/etc/apache2/sites-available/default
httpd.conf等
だいたい↓こんな感じで必要事項を記載する（詳細説明をすると非常に時間がかかるため割愛）
❍sslを使用したい場合は、端末にて下記命令を実行
sudo a2enmod ssl❍sslを使用する場合は、端末にて下記命令を実行し、ssl時の動作を指定しているファイルを登録する
sudo a2ensite default-ssl❍httpsアクセス時の設定
/etc/apache2/sites-available/default-ssl
ssl.conf等
だいたい↑httpと同様の方法で必要事項を記載する（詳細説明をすると非常に時間がかかるため割愛）
❍apache2の再起動（設定を反映させるためにはデーモンを再起動させる）※OSの種類やバージョンによりコマンドの位置やコマンド名は異なる
sudo /etc/init.d/apache2 restart
●MySQLの設定
❍MySQLはデフォルトではラテン語を話すので、日本語を話すことができるように、文字コードをUTF-8に設定する
MySQLの設定ファイルは複数存在するので反映されるファイルかどうか注意し設定する
設定変更し、MySQLの再起動後に作成したデータベースファイル以降からUTF-8が反映されるため、それ以前に作成したものは反映されないことに注意する
/etc/mysql/my.cnf
[client]のエリアに下記コードを追記（Ubuntu Desktop の場合は必要）
default-character-set = utf8[mysqld]のエリアに下記コードを追記
character-set-server = utf8
❍MySQLの再起動（設定を反映させるためにはデーモンを再起動させる）※OSの種類やバージョンによりコマンドの位置やコマンド名は異なる
sudo /etc/init.d/mysql restart●設定変更が反映されたかどうかの確認
apacheやMySQLの設定変更が反映されたかどうかを確認する
９、Ｗｅｂプログラミングルール
１、HTMLファイルの拡張子は「.html」で統一、PHPスクリプト入りHTMLファイルの拡張子は「.php」で統一（多くの学生が「.html」でもPHPスクリプトが動作可能にはなっているが）
２、HTMLファイル等の文字コードはUTF-8で統一
３、メイン確認用ブラウザはGoogle Chrome、サブ確認用ブラウザはFirefoxとする（できればWindows、Linux共に）
４、HTML記載上の主なルールはkaisetsu.htmlに従う
５、コーディングルールとしては、内包構造（タブの中にタブが入っていたり、命令ブロックの中に命令が入っているような状態）にはインデントを用い、見やすく記述する
６、提出ファイルは「自分のサーバ」で開発し、完成版を先生の提出サーバの「wwwディレクトリ内」にアップロードする（menu.htmlおよび全てのディレクトリ）
※提出サーバへのファイルアクセス方法：SFTP接続、パスワードはデフォルトではユーザ名と同一（変更する場合は声をかけます）
①Nautilus等のSSHが利用可能なファイルマネージャにて「sftp://sXX@172.16.111.100」（XXは自分の学籍番号の下二桁）
②端末にて「sftp sXX@172.16.111.100」（XXは自分の学籍番号の下二桁）
③SFTPソフトウェアにて、（FileZillaにて確認済み）
ホスト：172.16.111.100
ポート：22（Protocolを設定すると消えるかもしれない）
Protocol：SFTP
ユーザ名：sXX（XXは自分の学籍番号の下二桁）
パスワード：デフォルトではユーザ名と同一（変更する場合は声をかけます）
※提出サーバへのＷｅｂアクセス方法：http接続、https接続
URL:http://172.16.111.100/~sXX/（XXは自分の学籍番号の下二桁）
URL:https://172.16.111.100/~sXX/（XXは自分の学籍番号の下二桁）
７、データベース作品の制作と提出
先生の提出サーバには皆さんが使える下記ユーザが存在する
GRANT ALL PRIVILEGES ON *.* TO dbowner@localhost IDENTIFIED BY 'yg5963' WITH GRANT OPTION;
このユーザを利用し、下記ルールに従ってデータベースを準備する（自分のサーバも先生の提出サーバも）
①各自のデータベースを作成：データベース名はDBXX（XXは自分の学籍番号の下二桁）
②各自のデータベースに対してのフルアクセス権限を持つユーザを作成：ユーザ名はsXX（XXは自分の学籍番号の下二桁）
③各自のデータベースに対しての読み取り権限だけを持つユーザを作成：ユーザ名はrXX（XXは自分の学籍番号の下二桁）
④テーブル名は各自自由に設定可
提出サーバはSSHでの接続を許可しておらず、chrootで制限されたsftp接続のみとなる
そのため、データベース操作用Ｗｅｂページを制作（下記コード参照）し、そのＷｅｂページにアクセスし、
データベースの作成
ユーザの作成（フルアクセス権限のユーザと読み取り権限だけのユーザ）
テーブルの作成
テーブルへのデータの格納
等をSSH経由ではなく、Ｗｅｂページ経由で行う必要がある
つまり、データベースやユーザをＷｅｂ経由で遠隔作成し、遠隔作成したデータベースやユーザを利用し、データベース作品が動作するよう制作する必要がある
今回は授業時間が少ないため、先生の方でこのＷｅｂページ（usedb.php）を準備した
このＷｅｂページを使えば、簡単にデータベースの作成、ユーザの作成が自動的にできる
またSSHを利用しなくともSQLと対話的な操作もでき、テーブルを制作したり、データを一括インポートしたり、SELECT文を実行したりすることもできる
このＷｅｂページを利用して、先生の提出サーバにデータベースやテーブル、ユーザを作成しデータベース作品を提出する
その前提として、これと同様の動きを各自のサーバで行う必要がある
そのための手順としては、
①各自のサーバのMySQLにルートユーザでログインし、下記命令を実行しＷｅｂアプリケーションが利用する最上位ユーザを作成する
GRANT ALL PRIVILEGES ON *.* TO dbowner@localhost IDENTIFIED BY 'yg5963' WITH GRANT OPTION;
②下のＷｅｂページ（サーバサイドプログラム）を理解し、「usedb.php」というファイル名でサーバサイドへ置く
※usedb管理者パスワードは「****************」となっているが、各自自分のパスワードとして変更する
※すると、自動的にデータベース（DBXX）とユーザ（sXXとrXX）が作成される
※失敗した場合は、処理③にて自動削除できる
④その後、このＷｅｂページの処理①を実行し、DBXXに対してsXXのユーザ名でテーブルを作成したり、データのインポートを行ったりする
※このとき発行したクエリは、後で先生の提出サーバへの提出時に使う（同一の命令で同一の処理を行うことができる）ため、メモ保存しておくこと
⑤通常のユーザ用Ｗｅｂページにおいては、
読み取り（SELECT）処理だけなら「rXX」ユーザを用いる
更新や削除（INSERT、UPDATE、DROP、DELETE）処理等の場合は「sXX」ユーザを用いる
というように、ユーザを使い分けて制作していく
となる
これと同様のことを先生の提出サーバで実行すれば、同じソースコードでＷｅｂアプリが動作可能となる
※「dbowner」というユーザは全データベースやユーザを消去できるほどの権限があるため、取り扱いには充分注意すること
また、この「usedb.php」と一括インポートのために利用したファイルはＷｅｂアプリ完成後にサーバから削除することを忘れないこと
これが残っていると、一般ユーザがアクセスし、データベースを自由に操作できてしまうので、開発者としての一時使用ツールという認識で利用すること
本来は、この「dbowner」レベルの権限のユーザ使用を許可すべきではない
けれど、これを業務とする学生が多いと思われ、その学生のために使い方がわかるようソースコード公開も含め許可しているので、悪用し友人のデータベースの削除等をしないこと
なお、皆さんのサーバも基本的にはＷｅｂサーバ側もMySQL側もアクセスログは取っているので、就職した後のために悪意ある内部ユーザの行動追跡の方法も習得しておくこと
10、HTML5の概要習得
19、Ｗｅｂアプリケーションのシチュエーション分析
Ｗｅｂアプリケーションを製作する場合、通常（スタンドアローン型）のアプリケーションと比較して、様々なシチュエーションを分析し定義しなくてはならない
シチュエーション分析（プラットフォーム、利用者、トラフィック、サーバ、クライアント、回線、スケール、今後の利用者・ソフトウェア等の推移の定義）
・プラットフォーム例
自社サーバ（含プライベートクラウド）
レンタルサーバ
クラウド（IaaS、PaaS、SaaS）
・利用者例
利用者は社内の限定した部署に限られ、同時利用者数は最大３
利用者は営業部40人と経理部15人で、営業部は社外からもアクセスする
利用者は全社員800人とインターネット上の不特定多数となり、社内外のどちらからもアクセスがある
利用者はインターネット上の不特定多数となり、１日あたりの平均利用回数は最大480、ピーク時の同時利用者数は50／時
利用者はインターネット上の不特定多数となり、１日あたりの平均利用回数は最大24000、ピーク時の同時利用者数は5000／時
現在はアクセスもなく一人でひっそりと開始するが、将来的には爆発的なアクセスのサイトを作りたい
初期ベータ版サービスでは10000人限定でのサービス開始となるが、半年後の本格サービス開始では100万人規模のサービス展開をしたい
毎月８日はサービスデーでポイント取得のためのアクセスが20万件あるが、普段は１日あたり1500アクセスしかない
・トラフィック例
ＤＭＺ内の最大通信伝送速度は１Ｇｂｐｓで、平均ＷｅｂサーバとＤＢサーバ間で240Ｍｂｐｓの転送が行われ、ピーク時はその３倍となる
ＤＢサーバを５台に分散させており、集計処理時やデータベース再構築時にＤＢサーバ間の通信により800Ｍｂｐｓのトラフィックがかかる
サーバサイドで処理をすると50000件／時の処理ができ、その場合のトラフィックは50Ｍｂｐｓとなるが、クライアントサイドで処理をさせると
サーバ側での処理負荷は全くなくなるが、処理をするためのJavaScriptのコードがhtmlに全て入ることにより、トラフィックは750Ｍｂｐｓとなる
・サーバ例
サーバの搭載メモリは４ＧＢで、ピーク時の同時利用者数が50人で、インタプリタを含め１アプリケーションがメモリを100ＭＢ必要とする
５台のサーバをプライベートクラウドとして構築してあり、今後は外部からのアクセスもできるように改変したい
メモリと補助記憶装置は充実しているが、CPU性能は低く、大量の演算には時間がかかる
写真共有サイトを構築するにあたり、１年間アクセスのない写真は廃棄し、アクセスの多い写真は高速に転送できるようにしたい
・クライアント例
メモリと補助記憶装置は充実しているが、CPU性能は低いサーバに1000件／時のクライアントからのアクセスがある
高性能サーバ２０台をプライベートクラウド化したサイトに100件／日のクライアントからのアクセスがある
・回線例
サーバは高性能だが、10Ｍｂｐｓの通信回線しか通っていない
1Ｇｂｐｓの通信回線を通し、動画共有サイトを構築し快適に利用できているが、ユーザ数が今後10倍に膨れ上がった場合はどうなるか
このようにシチュエーション分析をしていくと、利用者数やトラフィックが将来に渡って固定的でもない限りクラウドでの構築が理想的な選択となるケースが多い
21、参考サイト
１、とほほのＷＷＷ入門
２、Linuxコマンドリファレンス
３、Linuxコマンド百科事典
４、Linuxコマンド集
５、Linuxコマンド逆引き大全
22、提出物
■事前準備
Ｗｅｂアプリケーションサイトをブックマークする
WebApp.zipをダウンロードし、解凍する
開発用ディレクトリとサーバのＷｅｂ公開ディレクトリ直下に「WebApp.zip」を解凍した「index.html」と「00」というディレクトリを置く
「index.html」は、「author」に「各自のコース番号」、「copyright」に「各自の氏名」を記載して上書きしておく
「00」ディレクトリ内にある「index.hinagata」は、「author」に「各自のコース番号」、「copyright」に「各自の氏名」を記載して上書きしておく
■毎回の提出物制作方法
①サーバのＷｅｂ公開ディレクトリ内にある「00」ディレクトリをコピー＆ペーストし、新しくできたディレクトリ名を問題番号の数値に名称変更する
②問題番号の数値に名称変更したディレクトリ内にある「index.hinagata」というファイルを開き、
・「description」に「Ｗｅｂページの説明文」（後で自分で調べやすいように）
・「keywords」に「３〜５個程度のキーワード」（後で自分で調べやすいように）
・タイトルに問題番号
を記載し、上書き保存する
③その「index.hinagata」というファイル名を、提出すべきファイル形式（htmlやphp等）の拡張子を入れたもの（「index.html」や「index.php」等）に変更する
④提出物の制作を行う
※提出物には複数のファイルを取り扱うことがあるが、その問題番号のディレクトリ内に格納さえすれば、「index.???」以外のファイル名は自由に設定して良い
注１：JavaScriptの動作確認時にHTMLファイルをローカル（Fileプロトコル）で開いても動作するが、PHPの動作確認時はブラウザを用いたURL指定（httpプロトコル）でなければ動作しない
注２：分散型バージョン管理システムを利用していないため、適宜別ストレージにバックアップを作成しておくこと
■必須課題と自由課題
問題番号の色が赤い提出物は必須課題となるので、全員必ず提出すること
問題番号の色が青い提出物は自由課題となるので、余裕がある希望した学生が取り組むこと
※ただし、Ｗｅｂ系での就職が決まっている場合は、この程度のレベルだけでは通用しないため、全てをこなした上で更に難易度を上げた勉強を行なうこと
□クライアントサイドプログラミングの学習
01 JavaScriptの変数
02 JavaScript入門/オブジェクトを扱う/document オブジェクト
03 JavaScript入門/変数を扱う/変数を使う
04 JavaScript入門/変数を扱う/変数にHTML文を代入する
05 JavaScript入門/オブジェクトのプロパティ/documentオブジェクトのプロパティ
06 JavaScript入門/繰返し処理/for構文 (ループ命令)
07 JavaScript入門/繰返し処理/while構文（ループ命令）
08 JavaScript入門/条件分岐/if構文
09 JavaScript入門/ユーザ定義関数/関数を定義する
10 JavaScriptサンプル集/ブラウザの名前とバージョンを判断する
11 JavaScriptサンプル集/今日の日付を取得する
12 JavaScriptサンプル集/サブウィンドウを開く
13 JavaScriptサンプル集/一定時間ごとに数値が増える
14 JavaScriptサンプル集/スライドショー
15 JavaScriptサンプル集/訪問回数を表示する
16 JavaScriptサンプル集/画像を入れ替える
17 JavaScriptサンプル集/リンクで画像を入れ替える
18 JavaScriptサンプル集/文字にグラデーションをかける
19 JavaScriptサンプル集/アニメーション
20 JavaScriptサンプル集/時間で変わる背景色
21 JavaScriptサンプル集/プルダウンメニュー
22 JavaScriptサンプル集/ストップウォッチ
23 JavaScript＋α問題：２つのテキストボックス（数値入力）、プルダウンメニュー（四則演算選択）、コマンドボタン（実行）
24 JavaScript＋α問題：現在のウィンドウの横幅に合わせ画像サイズを変更し表示
25 JavaScript＋α問題：現在のウィンドウの高さに合わせ画像サイズを変更し表示
26 JavaScript＋α問題：現在のウィンドウの横幅と高さを取得し、ウィンドウ内に収まる最大サイズ（縦横比は原画通り）に画像サイズを変更し表示
27 JavaScript＋α問題：＋α26に、ウィンドウサイズを変更した場合に自動的に再描画する機能を追加
28 JavaScript＋α問題：＋α27を変更し「あけましておめでとう！」のテキストを上下左右とも中央に最大サイズで（フォントサイズを変更し）表示
29 JavaScript＋α問題：Canvasを用い、お絵かきアプリを制作
30 JavaScript＋α問題：キャラクタ画像が移動しながら複数人でプレイできる「すごろくアプリ」を制作
JavaScript参考（document.writeの挙動）
test1:head⇒body
test2:jsファイル⇒body
test3:body⇒jsファイル（エラー発生）
test4:head⇒body⇒イベント
上記24〜28までの参考
JavaScriptで取得できるユーザ情報
GetConfigInfomation.html
JavaScript文法解説
http://qiita.com/akiinu/items/5d1178fa1102b939cd71
JavaScript基礎解説
http://qiita.com/intern/items/ed8dd99c15bdaf875473
JavaScript入門講座
http://javascript.pc-users.net/
JavaScript 「再」入門
https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript
■ＰＨＰの基礎学習 http://www.scollabo.com/banban/php/index.html
□サーバサイドプログラミングの学習
31 PHPスクリプトの基本構造
32 定数
33 変数
34 変数のデータ型変換
35 変数の自動生成
36 変数の自動生成
37 配列 array
38 配列 explode
39 連想配列
40 基本的な演算子
41 比較演算子
42 文字列データの連結
43 文字列データの置換
44 ループ 〜 繰り返し処理 while
45 ループ 〜 繰り返し処理 for
46 ループ 〜 繰り返し処理 do while
47 ループ 〜 繰り返し処理 foreach
48 ループ 〜 繰り返し処理 break
49 条件分岐 if
50 条件分岐 else
51 条件分岐 else if
52 条件分岐 switch
53 関数 引数の値渡し
54 関数 引数の参照渡し
55 関数 引数のデフォルト値
56 クラスとオブジェクト
57 日付と時間 getdate
58 日付と時間 date
59 画像処理
※29 画像処理についての注意事項
事前にphp5-gdをインストールしておく
画像処理はpngファイル自体を直接出力をするため、htmlでもtextでもないため、当然ヘッダ（Content-type）は「text/html」や「text/plane」ではなく、「image/png」となる
つまり、<html>～</html>内に記述するわけでもないので、PHPコードのみにする必要がある
■HTMLとPHPの連携（左メニュー上段） http://php5.seesaa.net/category/1606020-1.html
□クライアントサイドプログラムとサーバサイドプログラムをHTMLで繋ぐ
Step1 はじめてのPHPプログラミング
Step2 PHPの変数
Step3 関数の調べ方
Step4 HTMLの改行タグとソースの改行の違い
60 Step5 HTMLからデータを受け取る (POST)
61 Step6 HTML・URLからデータを受け取る (GET)
62 Step7 POST と GET を同時に使う
63 Step8 計算プログラムを改良する
64 Step9 入力された値をPHPでチェックする
65 Step10 入力された値をJavaScriptでチェックする
一旦この段階で今まで開発した全てのクライアントサイドプログラムとサーバサイドプログラムを提出サーバに提出し動作確認して下さい
■PHPとSQLの連携（左メニュー下段：PHPからデータベースを利用する） http://php5.seesaa.net/category/1606020-1.html
□サーバサイドプログラミングでデータベースを操る
●PHPからMySQLを利用するための基本的な考え方
$url='ドメイン名またはIPアドレスまたはlocalhost';
$username='MySQLにログインするユーザ名';
$password='$usernameでMySQLにログインするときに利用するパスワード';
$database='利用するデータベース';
$tablename='利用するテーブル名';
//「or die("エラーメッセージ")」を利用すると、エラー時にエラーメッセージを出力し処理を終了できる
$link=mysql_connect($url,$user,$pass); //MySQLにログインし、そのリンクを確保する（$link）
$scs=mysql_set_charset('utf8'); //MySQLにUTF-8で対話する設定を登録する（$scsは成功時true、失敗時false）
$sdb=mysql_select_db($database,$link); //利用するデータベースを選択する（$sdbは成功時true、失敗時false）
$query="SELECT * FROM ".$tablename; //SQLQueryの例
$result=mysql_query($query,$link); //SQLQueryを発行し、その結果を$resultに受け取る
$rows=mysql_num_rows($result); //結果の$resultは何件のデータから構成されるか確認し$rowsにその件数を格納する
if($rows){ //データが存在した場合
while($row=mysql_fetch_array($result)){ //$resultから１件ずつデータをデータがなくなるまで$rowへ格納する
print $row; //何らかの処理を行う
}
}
Step1 MySQLの準備
※参考：９、Ｗｅｂプログラミングルールの「７、データベース作品の制作と提出」
MySQLユーザを作成したり、データベース自体を作成できる権限を持つユーザ名：dbowner
dbownerのMySQLパスワードは「yg5963」だが、管理者パスワードは変更可能なので、自分で変更する
自分のデータベース名：DBXX
データベース「DBXX」のフルアクセス権限を持つユーザ名：sXX
データベース「DBXX」の読み取り権限だけを持つユーザ名：rXX
※Step1にて、データベース作成、テーブル作成、データのUTF-8変換とSQLスクリプトの実行を行い、データ挿入を行う必要がある
SQLスクリプトの実行方法：適当な権限を持つユーザにてMySQLにログインし、
①データベースの作成（DBXX）
②データベースの使用（use database;）
③SQLスクリプトの実行（source /filepath/xxxx.sql）
※文字化け対策として最初に「mysql_set_charset('utf8');」を発行する
66 Step2 データベースに接続する
67 Step3 データを表示する
68 Step4 追加、更新、削除について
69 Step5 データを受け取る方法
70 Step6 確認画面を表示する
71 Step7 追加、更新、削除を行なう
72 Step8 入力チェックする
73 Step9 レコードを検索する
74 Step10 複合語検索する
75 Step11 正規表現で置換する（※２）
76 Step12 検索機能を改善する
※参考：データベースの事前準備
※２： サンプルコードのまま実行しても正常に置換されません。
サンプルコードのereg_replaceは、PHP5.3.0以降非推奨となり、preg_replaceを使うことが推奨されています。PHP Manual
若干使い勝手が違いますので、しっかりマニュアルを読んで（検索すれば使い方の具体例が出てしまいますが）対応して下さい。
時と共に変化してしまうプログラミングというものがあります。
暗記型プログラミングではなく、検索型（それも最近のもの）プログラミングで対応しなければならない場面があることを理解してください。
そして、期日をコントロールした検索の癖もつけてください。
■Ｗｅｂアプリケーションの制作（クライアントサイドプログラムとサーバサイドプログラムの連携）
□クライアントサイドプログラミングとサーバサイドプログラミングが連携した初めてのＷｅｂプログラミングの学習
77 ユーザ登録＆ログイン型Ｗｅｂサイト
78 簡単なＷｅｂゲーム＆得点はサーバサイドで自動集計しランキング表示（Ajaxの修得）
79 チャットＷｅｂアプリ（Push通信型Webアプリ（＝CommetもしくはWebSockets）の修得）
80 自分が欲しいと強く願うＷｅｂアプリ（テーマは自由！）