Webシステムとちょっと便利なツール

Webシステムと
ちょっと便利なツール
2012/06/23 @shin1x1

自己紹介
• 新原雅司（しんばらまさし）
@shin1x1

• １×１株式会社
• Shin x blog http://www.1x1.jp/blog/

• PHP / AWS / 勉強会 / MotoGP

Webシステムを
知ろう！

Agenda

1. システムの特徴

2. Webシステムの特徴

3. Webエンジニアのツール

1か0か

• 融通が効かない
• ミスが許されない
• 仕様を細かく具体化する

仕様を具体化していく

何回も購入してくれた人には
おまけを付けたい！

・対象は何回？
・購入者特定のために要ログイン
・おまけの有無はメールに記載？
DBにも記録？

正確無比に動く

• 正確無比に同じ処理を行う
• 間違った仕様もそのまま動く

正確無比に動く

• 正確無比に同じ処理を行う
プログラムは思った通りに動かない。
書いた通りに動く。
• 間違った仕様もそのまま動く

データが大事

• 何をするにもデータが必要
• データのIN/OUTでシステムが見える
• データを扱うのがシステム

データで判断

5回購入してくれた人には
おまけを付けたい！

・5回（設定ファイル）
・購入履歴（DB）
・会員情報（DB）

1. インターネットで公開

2. 組み合わせる技術が多様

HTML
PHP ネットワーク

CSS
SQL データベース

JavaScript
サーバセキュリティ

3. 動作レイヤが違う

(1) ブラウザからリクエスト送信


(2) PHPが各種処理をして、HTMLを生成


(3) 生成したHTMLをブラウザへ返す


(4) ブラウザでHTMLを画面に表示
JavaScriptを実行

PHPファイルを表示

1. サーバがPHPを実行して、HTMLを生成

2. ブラウザがHTMLを表示

3. ブラウザがJavaScriptを実行

画像が出ない！

商品画像が出てないよ。

ブラウザでソースを見てみる
・imgタグなし=PHPが問題
・imgタグあり=画像が問題

4. セキュリティ

• いつでも攻撃可能
• どんなデータでも送信される

フォーム改ざん

• フォームの値は自由に変更できる
• Firefox + Firebug
• サーバでの入力チェックが大事！
（送信されたデータは信用しない）

Webエンジニアの
ツール

git

• バージョン管理
• 変更履歴が見れる
• 変更前に戻せる
• 安心して変更できる！

Redmine

• タスク管理システム
• 作業タスクを登録、進を更新
• gitとの連携
• PHPならCandyCane

Firebug

• サーバとの通信を見る
• JavaScriptで更新されたHTMLを見る
• HTMLを改変

FireMobileSimulator

• 携帯、スマートフォンをシミュレート
• UserAgent などを書き換え
• Chrome用もあり

まとめ

• Webシステムの特性を押さえる
• 便利なツールを活用
• 一緒に良いものを作りましょう！

Recommended