Recommended
More Related Content
Similar to 07 ソーシャルブックマーク(2)
Similar to 07 ソーシャルブックマーク(2) (20)
More from 文樹 高橋
More from 文樹 高橋 (20)
Recently uploaded
Recently uploaded (9)
07 ソーシャルブックマーク(2)
- 2. 2 「ぺちぱブックマーク」の要件 1. 登録したユーザーのみ利用できる（＝ユーザーの新規登録がある） 2. ユーザーは退会できる。 3. ブックマークしたURLは集計される 4. ブックマークしたURLにはタグをつけることができる 5. タグは新規登録ができる。 6. タグがすでに登録されている場合は同じものを使う。 これらの条件から必要なサイト構造を 考えていきます。重要な作業です。 10.4.18 (C) 株式会社破滅派
- 3. 3 Webサービスを作るときのコツ カオス理論を知っていますか？ 北京で蝶が羽ばたくと、ニューヨークで台風が起きるそう です。 要するに、簡単なことでも複数組み合せると、複雑になってきます。 あとあと面倒になりそうなことをはじめにつぶしておきます。 そのためには… 1. サイトの目的を知る 2. サイトの内部的な構造を把握する 3. サイトの視覚的な構造を把握する 10.4.18 (C) 株式会社破滅派
- 4. 4 サイトの目的を知る ユーザーにとって、みなさんがFlashが得意だとか、jQueryができるとか、 ユーザービリティを考えているとか、そうしたことはすべてどうでもいい ことです。 なぜなら、ユーザーは皆さんのお友達ではないからです。 クライアントにとって、みなさんが何をしたいかはどうでもいいことです。 自分達のために何をしてくれるかだけが重要です。 なぜなら、クライアントは皆さんのお友達ではないからです。 いま、自分達がやらなければいけないことは何かをしっかり理解してください。 ぺちぱブックマークのためにやらなければいけないことは何ですか？ はじめに鉛筆で書き出しましょう。 10.4.18 (C) 株式会社破滅派
- 5. 5 サイトの内部的な構造を知る Webアプリケーションは目に見えるものがすべ シーケンス図 てではありません。構造を把握する必要があり ます。 サイトの構造を頭だけで理解するのはとても難 しいです。できるだけ可視化して、整理しなが ら考える必要があります。 ユースケース図 鉛筆＋大きめのノートにどんどん書き出してい きましょう。 ※図を作成ツールもありますが、ツールに溺れないように！ 理解を助ける図として有名なものにはユースケー ス図やシーケンス図などがあり、UMLという記 法もあります（Google it!）が、はじめはフロー データベース構造 チャートで書ければ十分です。 サイトの構造が把握できたら、サイトマッ プとデータベースの構造を作成します。 10.4.18 (C) 株式会社破滅派
- 6. 6 サイトの視覚的な構造を知る 通常はワイヤーフレームを作成します。 デザイナーの経験しかない人が犯しがちですが、 PHPなどのプログラムを含んだサイトを作成す る場合、ワイヤーフレームはURLの数だけ作れば いいという物ではありません。 「サイトの内部的な構造」を理解した上で「画 面の状態」を考えて作成する必要があります。 同じトップページでも、「ログイン前」と「ログ イン後」では表示される要素が変わります。 PowerPointやOmnigraffle、Visioなどで画面 を作成します。 はじめはおおざっぱなものを作り、徐々に 細かくしていきます。 10.4.18 (C) 株式会社破滅派
- 7. 7 「ぺちぱブックマーク」のテーブル構造 ID mail password created 1 hoge@example.jp mememna 1990-‐05-‐05 14:00:00 ユーザーテーブル 2 fuga@example.jp saQejkh 1975-‐08-‐22 22:02:00 pb_users 3 var@example.jp auifsheoifajos 1960-‐12-‐11 00:00:00 ID user_id url created 1 12 http://example.jp 1990-‐05-‐05 14:00:00 ブックマークテーブル 2 14 http://example.com 1975-‐08-‐22 22:02:00 pb_bookmarks 3 16 http://example.jp 1960-‐12-‐11 00:00:00 ID user_id name created タグテーブル 1 1 これはすごい 1990-‐05-‐05 14:00:00 pb_tags 2 4 php 1975-‐08-‐22 22:02:00 3 1 pear 1960-‐12-‐11 00:00:00 ID user_id tag_id bookmark_id 1 1 2 1 データ紐付け用テーブル 2 4 5 1 pb_relationships 3 1 6 4 ※テーブル名には接頭辞をつけましょう。 普通はプロジェクト名＋アンダースコアです。 10.4.18 (C) 株式会社破滅派
- 8. 8 1.ユーザー情報の管理 1. 登録したユーザーのみ利用できる（＝ユーザーの新規登録がある） 2. ユーザーは退会できる。 ID mail password created 1 hoge@example.jp mememna 1990-‐05-‐05 14:00:00 2 fuga@example.jp saQejkh 1975-‐08-‐22 22:02:00 3 var@example.jp auifsheoifajos 1960-‐12-‐11 00:00:00 ユーザーのログイン名には メールアドレスを使います。 パスワードを格納するとき パスワードをデータベースに格納するとき、 通常はハッシュ（不可逆的暗号化）して格 主キーと呼ばれるその行を特定するフィー 納します。 ルドは、一般的に以下の属性を持ちます。 パスワードをそのまま入れてしまうと、 PRIMARY KEY（主キー） データベースが流出したときにパスワード AUTO_INCREMENT（自動増加） そのものが流出してしまいます。 10.4.18 (C) 株式会社破滅派
- 9. 9 2.ブックマーク情報の管理 1. ユーザーはブックマークを登録できる（暗黙の前提） ID user_id url created 1 12 http://example.jp 1990-‐05-‐05 14:00:00 2 14 http://example.com 1975-‐08-‐22 22:02:00 3 16 http://example.jp 1960-‐12-‐11 00:00:00 ユーザーのIDを登録してお くことで、後で検索に利用 できます。 主キーと呼ばれるその行を特定するフィー ルドは、一般的に以下の属性を持ちます。 PRIMARY KEY（主キー） AUTO_INCREMENT（自動増加） 10.4.18 (C) 株式会社破滅派
- 10. 10 3.タグ情報の管理 1. タグは新規登録ができる。 2. タグがすでに登録されている場合は同じものを使う。 ID user_id name created 1 1 これはすごい 1990-‐05-‐05 14:00:00 2 4 php 1975-‐08-‐22 22:02:00 3 1 pear 1960-‐12-‐11 00:00:00 ブックマークと同じ原理で す。 主キーと呼ばれるその行を特定するフィー ルドは、一般的に以下の属性を持ちます。 PRIMARY KEY（主キー） AUTO_INCREMENT（自動増加） 10.4.18 (C) 株式会社破滅派
- 11. 11 4.タグとブックマークの紐付け 1. ブックマークしたURLにはタグをつけることができる ID user_id tag_id bookmark_id 1 1 2 1 2 4 5 1 3 1 6 4 この3つのフィールドを入れることで、「誰がど のブックマークになんというタグをつけたの か」がわかります。 主キーと呼ばれるその行を特定するフィー ルドは、一般的に以下の属性を持ちます。 PRIMARY KEY（主キー） AUTO_INCREMENT（自動増加） 10.4.18 (C) 株式会社破滅派
- 12. 12 手を動かす前に よし、やっと準備 ができたぞ！ 作ろう！ と、なる前に… あらかじめ繰り返しが起きそうな部分を定義しておきます。 同じことを何度も書くのは馬鹿げています。 • データベースへの接続情報 • URL • ファイルパス 設定ファイル(bootstrap.php)を作成し、すべてのプログラムでこれ をインクルードするようにします。 10.4.18 (C) 株式会社破滅派
- 13. 13 関数による再利用 ぺちぱブックマークのように複雑なサービス では、似たような処理が何度も出てきます。 URLが正しい値かどうかチェックし て、データベースに接続して… 似たような処理が多いな… これを一々コピペするのは面倒だか ら、一つのファイルにまとめておこ う。 自分で関数を作ってfunctions.phpに記述し、 同じ処理を書かないで済むようにします。 10.4.18 (C) 株式会社破滅派
- 14. 14 関数の文法 関数宣言 関数名 引数。なくてもいいし、なんこあってもいい。 function hoge($foo, $bar…){ //ここでなんか処理を行う return $fuga; } 戻り値（なくてもいい） 一度作った関数は何度でも 呼び出すことができます。 10.4.18 (C) 株式会社破滅派
- 15. 15 定義済み関数 PHPには定義済みの関数がたくさん （4000ぐらい）あります。 人間が考えることは大体同じなので、 基本的なものはほとんど揃っています。 1. 文字列の数を数えたい 2. 配列を並べ替えたい 3. ファイルをコピーしたい 4. 画像を白黒にしたい 5. メールを送りたい まずは「こういう関数はないかな？」 と探してみることから始めましょう。 10.4.18 (C) 株式会社破滅派
- 16. 16 ログイン機能の概要 Q. ログイン機能を実装するために必要な2つの機能とは? 1. ログイン情報（アカウント＋パスワード）の組み合わせが 合っていることを確認する機能 → すぐ作れる 2. ページAにいた人がページBにきた人と同じだと証明する機能 → どうやってやるの？ ログインフォームで正しい値 別のページに移動したあと、 を入力したAさん 認証を通ったユーザーなのか判別する 今ページを見ている のはログイン済みのA さんだな！ 10.4.18 (C) 株式会社破滅派
- 17. 17 ログイン＝セッションの利用 【セッションとは？】 ユーザーがサイトを訪れて取る一連のページ移動を 「セッション」と呼びます。 PHPはこのセッションの間、変数$_SESSION（セッショ ン変数）に情報を記憶することができます。 セッションを使わない場合は誰がき セッションを使えば、ユーザーの情 ても同じ結果を表示 報に応じて処理を変えられる ex.amazon.co.jp 10.4.18 (C) 株式会社破滅派
- 18. 18 セッションの利用の仕方 <?php 【よく使うセッション関数】 //セッション開始 session_start(); session_start() //これ以降、セッション変数が使える セッションの利用を開始する if(isset($_SESSION[“login”])){ session_destroy() $user = $_SESSION[“uid”]; セッション変数を空にする（ログアウ }else{ トのときなどに使う） $user = “guest”; session_cache_expire($limit) } セッションの有効期限を設定する（デ ?> フォルトはブラウザを閉じるまで） 【注意点】 session_start()関数はブラウザに何かを表示す セッションの設定はphpの設定ファイルの る前に行うようにしてください。 php.iniに書かれています。 ブラウザに出力が行われたあとにsession_start 有効期限などはこの設定次第で変更できないこ を行うと、エラーが出ます。 とがあります。 10.4.18 (C) 株式会社破滅派
- 19. 19 セッションを利用したログインのアルゴリズム 【ぺちぱブックマークにログイン機能を実装する】 1. すべてのページでセッション関数を 開始（@bootstrap.php） 2. ログインページでユーザー名とパス ワードをチェック 3. あっていたらセッション変数にログ イン情報を書き込み 4. ログアウトページでセッションを破 棄する 10.4.18 (C) 株式会社破滅派
- 20. 20 セッションの仕組み 1.セッション開始時 2.セッション利用時 1.アクセス 1.アクセス 2.Cookieを見て、セッショ 2.IDをCookieに保存 ンIDがあるかどうかを確認 Cookie セッション保存フォルダ Cookie セッション保存フォルダ 3.セッション変数を指定の 3.セッションIDがあれば、 フォルダに保存 該当する変数を取得 【Cookieとは？】 【セッションファイルの保存期限】 ブラウザに用意された書き込みを許可された領 セッションファイルは一定期間（初期設定 域。 PHPが書き込める伝言板のようなもの。 では24分）で削除されます。 容量は4096byteまで。 セッション変数はフォルダではなく、デー ブラウザが許可していない場合は書き込めない。 タベースに保存することもできます。 10.4.18 (C) 株式会社破滅派