webプログラミング2 -...

2012年 Webプログラミング湘南工科大学講義資料斉藤典明

Ｗｅｂプログラミング２

３. Webプログラミングの心得

（１）Webアプリケーション開発とは？

・個人で自分の目的のためにつくる

→思うままに作れる、自分さえわかればよい

・個人で誰か（お客様）のために作る

→思うままに作れるが、今後の手直しのために後で修正

できる必要がある

作る内容はお客様と相談する必要がある

・チームで誰か（お客様）のためにつくる

→チームメンバーで分担できる必要がある

今後の手直しのために後で修正できる必要がある

作る内容はお客様と相談する必要がある

（２）アプリケーション開発の落とし穴

仕様・納期・予算

見積もり

納品

分業

出来上がらない

合わせてみたらつながらない

思ったものと違う

開発チーム

発注者開発者

費用超過

② ③

発注者開発者

開発チーム

数年後・・・

発注者開発者

何を作るのか

どうやって作るのか

どうなっていたか？

利用者

（３）開発手法の必要性

（４）ソフトウェア開発手法

・ウォーターフォール型開発段階を順次実施してゆく方法大規模開発向きの基本的な開発手法・プロトタイピング型まずは動作するものを作ってみる方法・スパイラル型設計とプロトタイピングを反復してゆく方法・エクストリーム・プログラミング（XP)、アジャイルソフトウェア開発小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法比較的小規模の開発チーム向き

基本検討

基本設計

機能設計

詳細設計

製造

単体試験

結合試験

総合試験

要件定義画面設計機能設計

典型的なソフトウェア開発の流れ（ウォーターフォール型）

（５）典型的（古典的）なソフトウェア開発の流れ

コーディング

（６）設計／要件定義

仕様・納期・予算

見積もり

開発チーム

発注者開発者

・発注者と開発者で意識あわせのポイント：開発内容 → システムのコンセプトなど動作条件 → 完成したときの誤解を防ぐ開発期間費用納品物など →仕様書としてまとめる

（７）設計／発注者側⇔開発者側

・ソフトウェアの見積もりのポイント：（１）伝統的な指標・期間と開発者の人数 →人月・開発コード（行数）、開発画面数（２）抑えるべき項目・開発言語、開発内容の難易度、開発範囲、作業員のランク・品質レベル

（８）設計／開発チーム

開発チーム

発注者開発者

分業

開発チームメンバーで作業分担・意思の疎通をするために、チーム構成、開発環境、開発手法などを決める。

（９）設計／要件定義

今回の課題の例では、設計として、要件定義と画面設計機能設計を設計書としてまとめる。

プロジェクトマネージャ

プログラマ

開発チーム

（１０）コーディング

開発チーム

発注者開発者

分業

（１１）コーディングの留意点

(a)記述スタイルは統一する（コーディング規約がある場合はそれに従う） →中カッコ、タブの使い方を統一的にする (b)著作権、改版履歴、処理内容、パラメータの意味などを明記する →コメントアウトを有効に使う

if (var==1){ var=var+1; }

if (var==1) { var=var+1; }

(b) // 表示関数 function printhello ( input ) { var input, output, i; //変数の宣言・・・ return output; //戻り値 }

HTMLのコメントアウト

<% %>JSPのコメントアウト

/* */ javaのコメントアウト

// javaのコメントアウト

function aaa ( a1 ) { var a1, b1, c; ・・・ return b1; }

function changeimage ( imgfilename ) { var imgfilename, status, i; ・・・ return status; }

(c)可読性、再利用性を考慮して記述する →変数名、関数名は用途がわかる名前にする

function printhello ( input ) { var input; // 確認用 alert ( “input”); ・・・ }

function printhello ( input ) { var input; // 確認用 // alert ( “input”); ・・・ }

(d)デバッグ用のコードと本番用のコードを使い分ける →デバッグ用に print 文などを使う、本番ではコメントアウトする

（１２）プログラミング（コーディング）上達の秘訣

・図などを使って下書きをしてみる ⇒“やり方がわからないけどプログラムをすればうまくできる”はずがない・不具合をバグのせいにしない ⇒なぜ思ったように動作しないのか、冷静に考える・人のコードを読む ⇒見通しの良い書き方、変数の使い方など・同じコードでも何回も書き直す ⇒モジュールの単位を体感する・複数の実行環境で動作させてみる ⇒移植性の良いコードがかけるようになる

（１３）レビュー・試験

・品質の高いソフトウェアとは？ ⇒要求仕様どおりに動作するソフトウェア＝バグのないソフトウェア ⇒バグはなくせるのか？ ⇒バグのないソフトウェアはつくれない一定規模のソフトウェアの中には一定量のバグが必ずある ⇒バグを減らすことはできる ◆レビューの実施：各工程で必要な生産物が正しいかを複数人で検査し早い段階でバグを見つけてなくす ◆計画的な試験：ソフトウェアの特性・規模に応じた試験項目を定めておき試験項目に対するバグの摘出率が安定してきたら、一定品質に達したと判断

ユーザ端末（クライアント）

Webサーバ

・正常に動作し続けること・パフォーマンスの確保・コンテンツの改善／メンテナンス・脅威への対応

（１４）運用

負荷

負荷分散想定利用者想定利用シーン

レスポンス時間

ピーク値平均値

CPU使用率メモリ使用率

プロセス数コネクション数

ボトルネックを見つける

スループット

負荷分散

・ハイスペックにする・機能を分ける・処理を分ける

（３）コンテンツ／Webプログラムでの対策： ⇒プロセス数を減らす、コネクションを早く開放するなど。画像、別ファイルなどを減らす。 ⇒仕組みの見直し。アルゴリズムの見直しや、素のＨＴＭＬに展開する、オンメモリ化するなど。

（２）Ｗｅｂサーバの設定：デフォルト値になっていないか？⇒セッション数などを確認

（１）システム的対策：

（１５）負荷対策

ユーザの行動がわかるのか！？

（１６）ログからの状況把握用途：・アクセス数・ユーザ認証・ユーザ特性

/usr/contrib/www/log/ht.log

生ログ例

アクセス元のＩＰアドレスアクセス日時

リクエストごと

メソッド

アクセス先ファイル

プロトコルステータスコード

転送データ量

参照元URL ブラウザ種類

（１７）ログファイル

IPアドレスＩＰv4では⇒約42億個のアドレス

Class A：0～127.Free.Free.Free Class B：128～191.Fix.Free.Free Class C：192～223.Fix.Fix.Free Class D：ブロードキャスト用 224～239.Free.Free.Free Class E：試験用 240～255.Free.Free.Free 予約アドレス：ローカルアドレス 10.X.X.X 127.0.0.1 192.168.X.X

８bit 0～255 ・

８bit 0～255 ・・

８bit 0～255

第１オクテッド第２オクテッド第３オクテッド第４オクテッド

（１８）IPアドレス

ICANN/IANA

ARIN ・・・北米 ftp://ftp.arin.net/pub/stats/arin/delegated-arin-latest

RIPE-NCC ・・・ヨーロッパ・中東・中央アジア ftp://ftp.ripe.net/pub/stats/ripencc/delegated-ripencc-latest

APNIC ・・・アジア・太平洋地域 ftp://ftp.apnic.net/pub/stats/apnic/delegated-apnic-latest

LACNIC ・・・中南米 ftp://ftp.lacnic.net/pub/stats/lacnic/delegated-lacnic-latest

AfriNIC ・・・アフリカ ftp://ftp.afrinic.net/pub/stats/afrinic/delegated-afrinic-latest

（１９）IPアドレスの配布状況

ユーザの行動がわかるのか！？

■ ログファイルの特徴：・ユーザを特定する情報はない・一連のアクセスがばらばらに記録 ■ 何に基づいて解析するのか？：・アクセスパターン・ネットワークの仕組みを考慮した仮説 ■ わかってどうするのか？：・コンテンツのつくり方の工夫・システムの改善

（２０）ログからの状況把握

Webサイトのログ Y-Page HTML

Z-Page

見た目のページ実態のファイル

・・・ Host1 Date/Time GET yyy.html Host1 Date/Time GET yyy.css Host1 Date/Time GET yy1.jpg Host1 Date/Time GET yy2.jpg Host2 Date/Time GET yyy.html Host1 Date/Time GET zzz.html Host2 Date/Time GET yyy.css Host1 Date/Time GET zzz.css Host2 Date/Time GET yy1.jpg Host1 Date/Time GET zz1.jpg Host2 Date/Time GET yy2.jpg Host1 Date/Time GET zz2.jpg

・・・

ビジット数＝２ＰＶ数＝３

ヒット数＝１２

混在している

滞留時間

（２１）利用動向の把握アクセス数の計測方法

Cookieの許容で、識別の精度が上がる

アクセス数、ユーザ識別の考え方

用途：・アクセス数・ユーザ認証・ユーザ特性

Webサイトのログ

Proxy または NAT

端末：ユーザ自らが操作

動的ＩＰが多い

実態どおり１人が１人して見える

実態は複数人：１人として見える

実態は一人：複数人として見える

同じＩＰアドレスが同じ人とは限らない

（２２）Webのログの見かた

ロボット：自動巡回または

ダウンローダ

ウィルス感染端末などからの偵察・攻撃アクセス

■ ブラウザからの情報ユーザの利用環境に関する情報が判る JavaScriptの利用でさらにとれる情報もある →ブラウザや端末の種類を考慮して画面設計など

（２３）さらなるユーザ情報の取り方（その１）

■ Cookie の利用セーブ型／非セーブ型 →ユーザや、セッションの識別に使用同一の人物であることがわかれば良い →行動を分析する Webページの構造の改善に活用 ※CookieをOFFしている人もそれなりに多い →ＵＲＬ埋め込み型でＩＤを付与 →本格的にやるならユーザ認証ではっきりと識別する

（２４）さらなるユーザ情報の取り方（その２）

■ Web bug 複数サイトをわたるユーザの行動を正確に把握 →スパイウェアに近い方法なので賛否両論あり

Web Web Web

ファイル名 “xxx.gif” 実体は CGIプログラム

MIMEヘッダは gif 引数にIDを付与

ログを吐き出す処理

解析を依頼：画像埋め込み自分のサイトしか解析できない

横断的な解析結果

（２５）さらなるユーザ情報の取り方（その３）

（２６）ログ情報を用いた利用促進

○利用分析参照頻度、利用者数、滞留時間 ○利用傾向参照パターン、相関 ○利用者分析ヘビーユーザ、ライトユーザ、リピータ、・・・ ⇒コンテンツの入れ替え、ページ構成の変更・・・ ○関連：・SEO(Serch Engine Oprimization）の活用・ログ情報の取り扱い

実習レポート２

Webのログの有効な活用方法を考えて述べよ。（１～３個程度あげる。） Webのログ分析とプライバシー問題について意見を述べよ。

http://itpro.nikkeibp.co.jp/article/COLUMN/20090302/325787/?ST=keitai

（１０点）

メモ帳でテキストファイルに記入

HTMLのタグをつけて書いてみる（拡張子は.html）

書いた文章をブラウザで表示して確認

所定の場所に提出

¥¥10.4.83.90¥kadai¥20121017¥(学籍番号)

評価ポイント：・問題の意味を正しく理解して回答していること

・自分なりの見解を述べること

補足

拡張子を.htmlでセーブ

ダブルクリックしてブラウザから確認

<PRE>～</PRE>タグ <BR>タグ

も併用すると見栄えがよくなる

レポートなので学籍番号・氏名も忘れずに記述

webプログラミング2 -...

Documents

データベース sql プログラミング - ibm ·...

goseicho プログラミング

13 プログラミング - mee.co.jp

プログラミング入門 -...

プログラミングとは - kunihikokaneko.com ·...

プログラミング入門...

マッシュアップ...

プログラミング入門 processingプログラミング...

c言語の課題を(エクストリームに)解こう #1

プログラミング生放送勉強会第23回＠大阪...

プログラミング入門 - osaka...

c プログラミング入門

aiプログラミング -...

yjtc18 a-5 ヤフオク!のアプリ開発手法...

プログラミング及び演習...

emoneα プログラミング入門

50 年前のプログラミング言語 50 年後...

プログラミング i5/os コマンド endclnup...

programming in haskell プログラミング haskell

プログラミング入門２