スライド 1

Transcription

1 実 践!ワークショップ PHPでWebサービスAPI 勉 強 会 < 基 本 編 > 2009/04/19 ムジログ wackey

2 目 次 事 前 準 備 ( 当 日 までにお 願 いします) 事 前 に 準 備 していただきたいこと やっておくと 便 利 なテキストエディタ 設 定 (EmEditorの 場 合 ) FTPの 設 定 予 習 課 題 演 習 課 題 のアップロード 方 法 アプリケーションIDの 取 得 予 習 課 題 1: 必 須 アプリケーションIDをPHPファイルに 書 き 込 む 予 習 課 題 2: 必 須 取 得 したIDで 早 速 動 かしてみよう! 予 習 課 題 3: 次 のページから1 時 間 目 分 をやっておく( 任 意 ) サンプルソースの 設 置 ( 当 日 最 新 版 をUSBメモリにて 渡 します) XAMPP 起 動 & 動 作 確 認 テキストの 見 方 本 テキストご 利 用 上 の 注 意 この 勉 強 会 の 概 要 説 明 1 時 間 目 PHPタグの 基 礎 的 な 書 き 方 を 覚 える imgタグをphpに 置 き 換 えてみよう! PHPタグ 内 に 改 行 を 入 れて 文 字 を 表 示 してみよう! 最 初 のまとめ:PHPの 書 き 方 のルール 大 原 則 PHP 内 から 出 力 させるものは 実 はHTML! 変 数 とは? 変 数 でこんなことも 出 来 ます( 文 字 列 の 結 合 ) 予 習 用 ワーク!(できれば4/12までに ) 設 定 や 共 通 処 理 の 外 部 ファイル 化 と の 違 い フォーム(GET)でデータ 受 け 渡 し 1 時 間 目 のまとめ 2 時 間 目 YAHOO!ショッピング 商 品 検 索 を 例 に 作 ってみよう! Webサービスの 使 い 方 概 要 つまり リクエストをURLに 翻 訳 する!ところがポイント リクエストURLの 組 み 立 て 方 (YAHOO!ショッピング 商 品 検 索 の 例 ) URLエンコードツール 説 明 実 際 にブラウザ 上 でリクエストしてみよう 解 読 しよう!XMLファイルの 見 方 XMLファイルの 見 方 解 説 1Result 階 層 XMLファイルの 見 方 解 説 2Hit 階 層 ( 商 品 個 別 情 報 ) APIを 使 うPHPプログラム 作 成 手 順 の 説 明 123PHPでリクエストURLを 組 み 立 てるには? 123アフィリエイトリンクURLを 組 みこむには? 4PHPでXMLを 個 々の 情 報 に 翻 訳 して 取 り 出 すには? PHPで 出 力 する 部 分 を 単 純 化 する(HTMLタグのように 扱 う) YAHOO!ショッピングでPHPタグ 化 したものの 例 4HTMLで 画 像 表 示 など 見 やすく 整 形 してみよう! APIを 使 うPHPプログラムを 作 る 流 れ 手 順 の 確 認 3 時 間 目 ~4 時 間 目 課 題 演 習 は3コースの 中 から 選 択 &フリーQ&A 下 記 から 選 択 してオリジナルなものを 作 ってみる 課 題 A: 売 上 ランキングブログパーツ 課 題 B: 居 酒 屋 or 美 容 室 検 索 サイト 課 題 C: 旅 行 系 サイト 全 体 像 出 来 上 がったものを 発 表 Websプリケーションを 作 り 続 けていくコツ 応 用 編 の 案 内 告 知 3 時 間 目 ~4 時 間 目 は 実 際 に 課 題 演 習 &フリーQ&A+ 発 表 解 説 の 予 定 1

3 事 前 に 準 備 していただきたいこと XAMPPのインストール( 既 にメールにて 案 内 済 ) XAMPPインストール 手 順 書 メモ - [mu]ムジログ 改 行 コード 文 字 コードUTF-8で 保 存 できるテキストエディタ のインストール 設 定 ( 秀 丸 とかでも 可 ) 個 人 的 なお 勧 めテキストエディタ:EmEditorフリー 版 予 習 課 題 と 当 日 の 演 習 課 題 のアップロードに 使 うFTPソフト の 準 備 (FTPの 設 定 ) 各 種 アプリケーションIDの 取 得 添 付 のPHPファイルに 書 き 込 んでおいてください (P.7 予 習 課 題 参 照 ) 2

4 やっておくと 便 利 なテキストエディタ 設 定 (EmEditorの 場 合 ) 行 番 号 とルーラが 表 示 されるように 設 定 する ツール すべての 設 定 のプロパティ 基 本 の 行 番 号 を 表 示 ルーラを 表 示 にチェックを 入 れておく 行 番 号 を 表 示 すると 何 行 目 のなになにが という 話 がしやすくなります 個 人 的 なお 勧 めテキストエディタ:EmEditorフリー 版 3

5 FTPの 設 定 FFFTPの 場 合 ホストの 設 定 名 : 適 当 に 名 前 つけてください ホスト 名 (アドレス):s97.coreserver.jp ユーザー 名 :mtos. 希 望 アカウント 名 原 則 として パスワード: 希 望 アカウント 名 + 1 原 則 として 表 示 用 URLは 名.musilog.net/yoshu/ 名.musilog.net/kadai/ 4

6 予 習 課 題 演 習 課 題 のアップロード 方 法 FTPでアクセスすると kadai yoshu という フォルダがあるので その 下 の 階 層 にファイルをアップしてください 予 習 課 題 なら yoshu ディレクトリ(フォルダ)の 下 にアップロードしてください ドラッグアンドドロップでアップロードできます PHP ファイル 5

7 アプリケーションIDの 取 得 今 回 の 勉 強 会 ではヤフーショッピングを 中 心 に 解 説 します もし 演 習 課 題 や 次 回 の 応 用 編 今 後 のサイト 制 作 でチャレンジしたいものがあれば 他 のWebサービスのIDを 取 得 してご 準 備 ください ( 添 付 のPHPファイルに 書 き 込 んで 置 いてください 次 ページで 解 説 ) 必 須 ヤフーデベロッパーネットワーク(ID 取 得 によりヤフーのすべてのWebサービスを 利 用 することがで きます) 必 須 バリューコマース オファーリスト ヤフー で 検 索 Yahoo!ショッピング(ヤフー ショッピング) PDB_Yahoo_shoppingウェブサービス 用 のプロモーションです のほうで 提 携 申 請 必 須 楽 天 ウェブサービス( 楽 天 市 場 楽 天 トラベル 等 ) デベロッパーIDとアフィリエイトIDの2 点 をご 確 認 ください 楽 天 市 場 のIDを 持 っていたらすぐ 使 えます リクルートWEBサービス(ホットペッパー カーセンサー 赤 すぐnet 等 ) ( 今 回 は 触 れませんが じゃらんも 一 応 ( 応 用 編 でやります) ) リンクシェアクロスオーバーサーチ( 対 応 サイトに 提 携 をする)( 応 用 編 でやります) AmazonWebサービス(リンク 先 は 英 語 ) ( 応 用 編 でやります) 勉 強 会 に 使 うIDはご 自 身 がすでにおもちのサイトで 登 録 したもので 大 丈 夫 です! 6

8 予 習 課 題 1: 必 須 アプリケーションIDをPHPファイルに 書 き 込 む メール 添 付 でcommon.phpというファイルをお 送 りします 各 IDを 取 得 し 下 記 のように 書 き 込 んでください(Windowsのメモ 帳 は 禁 止 です!かならずテキストエディタで 編 集 してください) バリューコマースのIDの 調 べ 方 は 次 のページで 解 説 します 7

9 参 考 :バリューコマースヤフーショッピングのアフィリエイトIDの 確 認 バリューコマースのアフィリエイトIDで 必 要 な 情 報 はsidとpidの 二 つの 数 字 1オファーリスト ヤフー で 検 索 Yahoo!ショッピング(ヤフー ショッピング) PDB_Yahoo_shoppingウェブサービス 用 のプロモーションです のほうで 提 携 申 請 2 PDB_Yahoo_shoppingのほうの 詳 細 をクリックして 商 品 DB/ウェブサービス (1) をクリック 3 新 しいHTMLコードを 作 成 するを 押 してHTMLコードを 表 示 させます 4その 中 のsid= pid= と 続 いているそれぞれの 数 字 をメモします 5その 数 字 をcommon.phpに 書 き 込 みます ( 今 回 は 勉 強 会 なので どのサイトのものをお 使 いいただいても 構 いません ただし 実 際 に 使 用 する 場 合 は そのサイトごとに 提 携 し 新 しくコードを 取 得 して それを 使 ってください そのサイトのアフィリエイト 成 果 としてあがります) 8

10 予 習 課 題 2: 必 須 取 得 したIDで 早 速 動 かしてみよう! 何 度 も 行 きたい 箱 根 温 泉 のソースをまるごと 渡 します ただし ひとつだけ 足 りないファイルがあります それは 先 ほど 作 成 したcommon.phpというファイルです これはご 自 身 の 各 APIのアプリケーションIDやアフィリエイトIDをしるしたものや 共 通 で 使 う 処 理 を 入 れたものです このサイトはそれを 読 み 込 んで 楽 天 トラベルのAPIにアクセスして 情 報 を 取 得 しています 2common.phpを 含 めた すべてのファイルをFTPのyoshuフォルダへアップ 3http://username.musilog.net/yoshu/にアクセスして 動 作 確 認 する ( 楽 天 トラベルAPIでどんな 情 報 が 使 えそうか 見 ておく) このサンプルソースはフリーです そのままお 使 いいだいても 改 造 しても 結 構 です 1 先 ほど 編 集 したcommon.phpを 解 凍 したhakoneonsenフォルダの 中 に 入 れる 9

11 予 習 課 題 3: 次 のページから1 時 間 目 分 をやっておく( 任 意 ) PHPだけでなくJavascriptも 含 めてのプログラム 初 心 者 や 自 信 が 無 い 方 はやっておくことを 強 く 推 奨 PHPを 書 き 慣 れている 方 前 回 の 勉 強 会 に 参 加 されている 方 は 結 構 です この 勉 強 会 ではHTMLタグを PHPタグ( 文 ) に 置 き 換 えるというアプローチで 少 しずつ 覚 えてもら う 形 になっていることになっています すでにPHPを 理 解 している 方 はさらっと 読 んでご 理 解 ください(2 時 間 目 以 降 の 考 え 方 につながり ます) PHPのプログラマーにとって PHPタグ という 言 い 方 や 考 え 方 はあまり 賢 くありませんが わかりや すさを 優 先 したためそういう 表 現 をしております 10

12 サンプルソースの 設 置 XAMPPインストール 直 後 の 下 記 ディレクトリの ファイルはややこしいのですべて 削 除 する(もしくはバックアップ) C: xampp htdocs (= このフォルダに 入 れたデータがブラウザでは 以 下 のア ドレスでアクセスすると PHPとして 実 行 された 結 果 がブラウザ 上 に 表 示 されます 削 除 (もしくはどこかへ バックアップ) サンプルソースは 下 記 のようになっているので それをドラッグアンドドロップでそのまま 設 置 する フォルダ 1 の 下 は 作 業 フォルダ フォルダ kansei1 以 下 は 解 答 例 ファイルになっています 答 えは 一 つだけでないのであくま でも 例 です 11

13 XAMPP 起 動 & 動 作 確 認 スタート プログラム Apache Frends XAMPP XAMPP Control Panel で 左 のコントロールパネルが 立 ち 上 がり Apacheの 列 の 開 始 ボタンを 押 して 起 動 と 表 示 されるのを 確 認 する ( 開 始 すると 停 止 ボタンが 表 示 されます) 入 力 し 左 記 のように 赤 い 文 字 が 表 示 されているか 確 認 する XAMPPを 終 了 するときは 停 止 ボタンを 押 して 終 了 します PCを 再 起 動 したときなどは 上 記 と 同 じように 起 動 から 始 めてく ださい 12

14 テキストの 見 方 そのページの 難 易 度 です ページタイトルです 説 明 用 エリア 文 法 や 表 示 例 記 法 などを 記 述 しています そのページのポイントです そのページワーク 制 限 時 間 です ワーク 課 題 エリアです 作 業 フォルダと 表 示 確 認 用 のURLです 気 をつけるべきポイントを 書 いています 1ページの 説 明 は だいたい1 分 それほど 説 明 することはありません またワークの 内 容 も 考 える 必 要 があまり 無 く すぐ 終 えられるものばかりですので ご 安 心 ください 13

15 本 テキストご 利 用 上 の 注 意 本 テキストおよび 勉 強 会 は 最 短 時 間 最 短 距 離 最 低 限 の 知 識 でPHPを 学 び APIを 利 用 するためのものです そのためPHPの 文 法 等 で 理 解 を 促 進 するために 一 部 説 明 を 省 略 しているものや 言 い 回 しを 変 えています 1 通 常 のPHPの 学 習 として 不 適 切 な 表 現 が 混 ざっている 可 能 性 があります 2 通 常 のPHPの 学 習 として 説 明 を 省 略 している 部 分 があります 3 理 解 解 釈 を 素 早 くしていただくために 強 引 な 説 明 をしている 部 分 があります 4 間 違 い 不 明 な 点 など 随 時 フィードバックを 元 に 更 新 します 常 にβ 版 です 5 勉 強 会 前 日 までには 最 新 版 を 提 供 します 以 上 の 理 由 のため 再 配 布 は 禁 止 です 逆 に 不 明 な 点 やつまづいた 点 があれば 遠 慮 なくご 連 絡 ください 特 にHTMLのimgタグやbrタグと 同 じように PHPタグ という 言 い 方 をして 今 回 は 進 め ます PHPタグを 普 通 のHTMLのimgタグやbrタグと 同 じように 挿 入 していく 考 え 方 が 2 時 間 目 以 降 大 変 役 に 立 ちます 14

16 この 勉 強 会 の 概 要 説 明 API(Webサービス)を 利 用 するにあたっての 必 要 最 低 限 のPHP 知 識 のみ 習 得 する 目 標 はWebサービスを 利 用 して YAHOO!やリクルート 楽 天 などが 持 っ ているコンテンツ(データベース)を 利 用 した 簡 単 なミニサイトorブログ パーツを 作 ること print 条 件 分 岐 ゆるゆるで だけど 詰 め 込 み! データベース 余 計 なことを 勉 強 しない PHPわからない smarty 最 短 距 離 で シンプルに! PEAR 計 算 配 列 変 数 セッション 細 かいこと 気 にしない キャッシュ そのほかの 知 識 は 必 要 な 時 に 後 で 勉 強 すればよい PHPを 使 ってWebサービスを 使 ったコンテンツが 作 れた!! エスケープ 15

17 1 時 間 目 PHPタグの 基 礎 的 な 書 き 方 を 覚 える 1 時 間 目 の 概 要 PHPを 使 うためにはHTMLファイルではなくPHPファイルであることが 必 要 です しかし 中 身 は 基 本 的 にHTMLのままでOKです そのHTMLの 中 に PHPタグ を 埋 め 込 みます 普 通 のHTMLファイルの 拡 張 子 のhtmlをphpと 書 き 換 えるだけでPHP ファイルになります 1 時 間 目 はPHPタグの 書 き 方 やHTMLには 無 い 独 自 の 機 能 をほんの 少 しだけ 触 れます 1 時 間 目 の 注 意 事 項 PHPはサーバー 上 で 実 行 されるので WindowsPCでダブルクリックし ても 実 行 されません かならずローカル 内 でも 始 まるURLで アクセスして 動 作 を 確 認 してください PHPのタグはブラウザには 出 力 されません(ソースとしても) PHPで 実 行 された 結 果 が 通 常 の HTML として 出 力 されることがほとんどです 16

18 imgタグをphpタグに 置 き 換 えてみよう! 難 易 度 : 文 法 置 き 換 えるだけ! PHPタグは 必 ず <?php で 始 まり?> で 終 わる そこが 普 通 のHTMLタグと 違 うところ 文 字 列 以 外 は 半 角 英 数 字 スペース 記 号 が 基 本 ワーク PHPといえどもimgタグと 同 じようにHTML 文 中 に 埋 め 込 めこむものだ!と 理 解 する imgタグの 部 分 をPHP 文 に 変 更 してみる echo 文 字 列 PHPが 文 字 列 をHTMLのソース として 出 力 する 制 限 時 間 1 分 変 更 用 テキスト: <?php echo 'でも 涼 しくてさわやかです';?> Check! で 囲 まれた 部 分 以 外 は 必 ず 半 角 英 数 字 半 角 スペースで 入 力 すること 作 業 ファイル:C: xampp htdocs 1 template.php コピペ 用 テキスト: C: xampp htdocs 1 コピペ 用 テキスト.txt 確 認 URL: 17

19 PHPタグ 内 に 改 行 を 入 れて 文 字 を 表 示 してみよう! 難 易 度 : 1 半 角 スペースやタブ 改 行 は 適 当 に 入 れてもOK! 2 文 字 列 を 囲 うための 記 号 は2 種 類 ある ワーク 上 記 のように<?php と?>の 間 に 改 行 を 入 れて 文 字 を 表 示 させる 余 裕 があれば 自 分 の 好 きな 文 字 を 入 れたり 再 び 改 行 して 追 記 してみよう! 文 法 echo HTMLとして 出 力 される 文 字 列 ; echo HTMLとして 出 力 される 文 字 列 ; HTMLを 出 力 するのはどちらでもOK! 微 妙 な 違 いがあります 後 で 説 明 します 制 限 時 間 1 分 30 秒 ソースが 見 やすく 読 みやすいように 適 宜 改 行 や 半 角 スペースを 入 れておく そうすることによってあとからわかりやすいように しておく 作 業 ファイル:C: xampp htdocs 1 template.php コピペ 用 テキスト: C: xampp htdocs 1 コピペ 用 テキスト.txt 確 認 URL: 18 Check!

20 最 初 のまとめ:PHPの 書 き 方 のルール 大 原 則! 上 から 順 番 に 実 行 される 見 本 例 文 <?php echo "hello!<br />"; $text =' 私 は 魔 女 です<br />'; echo $text; If (isset($text)) { echo "データはセットされています<br />"; }?> 改 行 覚 える! 1HTMLと 違 い <?php ~?>の 間 は 適 宜 改 行 できる 2 基 本 的 に 行 の 後 ろ( 命 令 文 の 後 ろ)に ; が 付 く 例 外 として { } でくくられるところの } の 後 に ; はつかない 3PHP 文 は 原 則 半 角 英 数 字 半 角 スペース 半 角 記 号 を 使 う 4PHP 文 はHTMLと 同 様 に 原 則 として 上 から 順 番 に 処 理 される 5 文 字 列 は もしくは で 囲 う 違 いがあります 後 で 説 明 します 19

21 PHPで 出 力 させるものは 実 はHTML! 難 易 度 : brタグ 追 加! ワーク PHPファイルがサーバーで 処 理 されて HTMLとして 出 力 されている <br />を 入 れて 改 行 させてみる 制 限 時 間 1 分 余 裕 があれば 自 分 なりにさらにHTMLタグを 追 記 してアレンジしてみる Check! 改 行 :<br /> 強 調 :<strong> 文 字 </strong> イタリック:<i> 文 字 </i> HTML 文 中 の とPHPの が 混 ざると 誤 解 釈 されてしまう HTMLの 中 で を 使 うのであれば PHPで 出 力 するのは echo <font color= red > </font> という 感 じで 区 別 がつくようにすること 作 業 ファイル:C: xampp htdocs 1 template.php コピペ 用 テキスト: C: xampp htdocs 1 コピペ 用 テキスト.txt 確 認 URL: 20

22 変 数 とは? 難 易 度 : 上 から 順 番 気 温 は と 出 力 数 値 として 上 書 き 28 と 出 力 される 文 法 $ 変 数 名 = 文 字 列 ; 文 字 列 として 代 入 ($ 変 数 名 = 数 値 ; 数 値 として 代 入 ) 文 字 列 や 数 字 を 自 由 に 出 し 入 れできる 箱 と 考 える (そのページだけでしか 記 憶 出 来 ない 一 時 的 なメモリ) ワーク 先 ほどのファイルにさらに 上 記 のように 追 記 してみて 制 限 時 間 3 分 動 作 を 確 認 してみる 変 数 に 入 れた 値 が 表 示 されること 変 数 が 上 書 きされていること 余 裕 があれば 変 数 の 内 容 を 書 き 変 えて 試 してみてください 同 じページだけでしか 存 在 出 来 ない ( 他 のページへ 引 き 継 げない) 上 書 きが 可 能 今 回 はやりませんが 数 値 として 代 入 した 場 合 は 変 数 を 元 に 計 算 したりすることもできます $a = $a +1; //$aに 代 入 されている 数 字 に1を 足 して$aに 代 入 する 作 業 ファイル:C: xampp htdocs 1 template.php コピペ 用 テキスト: C: xampp htdocs 1 コピペ 用 テキスト.txt 確 認 URL: 21

23 変 数 でこんなことも 出 来 ます( 文 字 列 の 結 合 ) 難 易 度 : 変 数 に 眠 い と 代 入 眠 いです! と 表 示 眠 い に わけないです!! を 結 合 して 代 入 ( 上 書 き) 最 終 的 に 眠 いわけないです!! と 表 示 されます 文 法 文 字 列 は. で 結 合 できる $ 変 数 名. 文 字 列 文 字 列 の 結 合 ピリオドでつなげる!ピリオドの 前 後 は 半 角 ス ペース 入 っていてもOK!(その 辺 はゆるい) 変 数 に 文 字 をつなげたものをさらに 入 れる( 上 書 きする)こともできる 結 合 とは つなげる ことです ワーク 上 記 のように 文 字 の 結 合 を 書 いてみて 確 認 してみる まずは $nemuke = " 眠 い"; echo $nemuke. "です!"; と 書 いて 表 示 を 確 認 次 に $nemuke = $nemuke. "わけないです!!"; echo $nemuke; と 追 加 して 書 いて 表 示 を 確 認 制 限 時 間 3 分 作 業 ファイル:C: xampp htdocs 1 template.php コピペ 用 テキスト: C: xampp htdocs 1 コピペ 用 テキスト.txt 確 認 URL: 22

24 予 習 用 ワーク!(できれば4/12までに ) 予 習 用 ワークです 今 までの 流 れでtemplate.phpを 編 集 していると 下 記 のように 表 示 されます これをPHPの 中 だけを 修 正 して 読 みやすいように 改 行 を 入 れたり 着 色 BOLDなどの 装 飾 つまりデザインをしてみてください! 出 来 た 方 はFTPでyoshu/へアップしてください! ひとつだけ 注 意 事 項!! HTMLで を 出 力 するには で 囲 むこと echo こんにちは ; echo こんにちは ; どちらでも 問 題 ない! Check! echo <font color= red >こんにちは</font> ; echo <font color= red >こんにちは</font> ; 上 の 方 は 引 用 符 がすべて 同 じでPHPから 見 ればどこで 区 切 られているのか わからなくなり エラーとなる 下 側 のように を 使 った 表 記 を 推 奨 ( 本 当 はエスケープという 方 法 もありますが 今 回 は 略 します) 一 般 的 には 役 に 立 つワークですが 2 時 間 目 以 降 はこれを 身 につけなくてもいける 方 法 をご 提 案 します PHPの 書 き 方 に 慣 れるためのワークと 思 ってください 失 敗 をすることが 成 功 への 近 道! 実 は 慣 れること 経 験 値 を 積 む ワーク 23

25 設 定 や 共 通 処 理 の 外 部 ファイル 化 難 易 度 : 外 部 cssやjavascriptと 同 じようにPHPでも 共 通 して 使 うものは 外 部 ファイル 化 して 使 うことができる この 場 合 外 部 ファイルで 設 定 された 変 数 も 読 み 込 んだファイルで 有 効 になる common.php ワーク file1.php 文 法 共 通 に 使 う 情 報 を 外 部 ファイル 化 することにより メンテナンスをしやすくする common.phpファイル 内 の$nameの 内 容 をご 自 身 の 名 前 に 書 き 換 えてそれぞれのファイルで 確 認 してみる 2,3 回 ぐらい 繰 り 返 してやってみると 覚 えるのになお 良 い もちろんcommon.phpの$nameに 代 入 しているところにhtmlタグなど 追 記 してみても 良 い 予 習 課 題 で 作 成 したcommon.phpはこれのことで これから 作 成 するものにすべて 活 用 していきます 作 業 ファイル:C: xampp htdocs 1 common.php 確 認 URL: require_once ファイル 名 ;で 外 部 ファイルを 読 みこむ 例 えば API(Webサービス)で 利 用 するアプリケー ションIDやアフィリエイトIDなどを 全 ページで 使 いま わしするので これらを 外 部 ファイル 化 ( 設 定 情 報 だけ 書 き 込 んだPHPファイルを 作 成 )しておく 制 限 時 間 2 分 24 Check!

26 と の 違 い 難 易 度 : 前 ページのcommon.phpに 記 入 した 内 容 をそのまま 使 います nenreiの 数 字 は 適 当 に 変 えてもらってOKですw で 囲 むと 変 数 の 内 容 が 表 示 されることもある ワーク hensu.phpにアクセスしてみて 違 いを 見 つけてください a.~d.で 変 数 の 周 りに 半 角 記 号 ではなく 日 本 語 を 書 い たらどうなるか 見 てみてください(うまくいかない!?) 制 限 時 間 2 分 Check! 2 時 間 目 以 降 の リンクURLの 組 み 立 て はこの 変 数 の 書 き 方 (b.)を 使 って 文 字 列 をつなげていきます 今 までの 変 数 と 文 字 列 の 結 合 との 書 き 方 の 違 いに 注 意 してください 作 業 ファイル:C: xampp htdocs 1 hensu.php 確 認 URL: 参 考 : 25

27 フォーム(GET)で 異 なるファイル 間 でのデータ 受 け 渡 し 難 易 度 : form.html kakunin.php <form action="kakunin.php" metshod="get"> <p>お 名 前 :<input type="text" name="onamae" value="" /><br /> <input type="submit" /> </p> </form> <p> 入 力 項 目 を 確 認 してください <br /> お 名 前 :<?php $name = $_GET["onamae"]; print $name;?> wackey と 入 力 した! 文 法 フォームに 入 力 した 内 容 がnameに ある 属 性 と 日 もづけられたURLが 生 成 される URLのパラメータとしてついた 内 容 を$_GET* 要 素 名 +という 変 数 に 格 納 されて それを 使 うことができる フォームで 入 力 されたものがURLのパラメータとなり 次 のファイルへ 引 き 渡 される ワーク まず 実 際 にフォームを 使 ってください その 入 力 内 容 と 結 果 画 面 のURLと 見 比 べてください そして 年 齢 や 血 液 型 など フォームを 増 やして PHPファイルにも 表 示 させてみてください 作 業 ファイル:C: xampp htdocs 1 確 認 URL: お 名 前 :<?php $name = $_GET["onamae"]; print $name;?> 年 齢 :<?php ; ;?> 制 限 時 間 2 分 2 時 間 目 以 降 商 品 検 索 や 詳 細 情 報 表 示 リンクURLとして 使 います 26

28 1 時 間 目 のまとめ 慣 れること! 以 上! エラーが 出 たときに 確 認 する 初 歩 的 なミスを 確 認 する PHP 文 内 ( 文 字 列 以 外 )に 全 角 スペースを 使 っていないか (スペースは 目 でみてわからない!) 行 の 一 番 後 ろに ; をつけ 忘 れていないか 変 数 の 頭 に 必 ず $ が 来 るが 抜 けているか & など 違 う 記 号 にしていないか 文 字 列 を もしくは でくくり 忘 れていないか (サンプルをコピーせずに 自 分 でPHPファイルを 作 成 した 場 合 ) 改 行 コードをLF 以 外 文 字 コードをUTF-8 以 外 にしていないか 27

29 2 時 間 目 YAHOO!ショッピング 商 品 検 索 を 例 に 作 ってみよう! 2 時 間 目 を 開 始 する 前 に 事 前 準 備 で 用 意 した (WebサービスAPIキー アフィリエイトIDを 記 入 した)common.phpを 2 フォルダの 中 に 設 置 してください 28

30 Webサービスの 使 い 方 概 要 レンタルサーバー 側 URLの 形 で 2リクエスト YAHOO!とかリクルートなど Webサービス 提 供 会 社 PHPファイル 3レスポンス XMLの 形 で Webサービス 1URL 入 れて アクセス 4HTMLの 形 になって 表 示 PC サイト 利 用 者 29

31 つまり リクエストをURLに 翻 訳 する!ところがポイント 私 は 会 員 番 号 230 番 の 人 間 が 作 ったPHPファイルなんで すけど NIKE のグッズを 安 い 順 に10 件 欲 しいんです が PHPファイル リクエストURLに 翻 訳 ( 例 ) XML 形 式 で 返 事 する あいよ 10 件 あったから まとめて 情 報 全 部 渡 すねー 30 API

32 リクエストURLの 組 み 立 て 方 (YAHOO!ショッピング 商 品 検 索 の 例 ) Yahoo!デベロッパーネットワーク:トップ > ショッピング > 商 品 検 索 検 索 結 果 が 多 そうなもので あれば 何 でもOK! 次 ページのワークに てやってみましょう! お 題 : 生 キャラメル というキーワードを 含 んだ 商 品 を 安 い 順 で10 件 表 示 1 必 須 ベースURLを 確 認 (XMLの 場 合 の) 2 必 須 アプリケーションIDを 確 認 する appid=あなたのアプリケーションid リクエストパラメーター ( 検 索 条 件 を 追 記 できる) 3 必 須 検 索 キーワードを 設 定 する 生 キャラメル をUTF-8でURLエンコードして 設 定 する URLエンコードツール: query= %E7%94%9F%E3%82%AD%E3%83%A3%E3%83%A9%E3%83%A1%E3%83%AB query (クエリー)とは 検 索 キーワードのこと 4 安 い 順 ( 金 額 が 小 さいものから 大 きいものへ 昇 っていく)という 条 件 を 入 れる sort=%2bprice (%2Bは + をURLエンコードしたもの) 510 件 という 条 件 を 入 れる hits=10 最 後 にこれらをつなげてひとつのURLを 作 成!(2ページ 後 で 使 います) 31

33 実 際 にブラウザ 上 でリクエストしてみよう 難 易 度 : ( 前 ページの 続 き)つなげると %E7%94%9F%E3%82%AD%E3%83%A3%E3%83%A9%E3%83%A1%E3%83%AB &sort=%2bprice&hits=10 つなげ 方 はベースURLの 後 に? を 入 れて 各 パラメータを 入 れていきます パラメータの 追 加 は & でつなげていきます Firefox3やIEなどブラウザのURL 欄 に 直 接 入 力 します! リクエストURLは 欲 しい 情 報 についての 条 件 を URLに 翻 訳 してつなげていくだけ! ワーク 例 : 1 万 円 以 下 セール 中 の 商 品 だけ 出 力 送 料 無 料 で 売 れ 筋 順 あなたの 好 きな 商 品 (ブランド)をキーワードとして ( 余 裕 があれば 好 きな 条 件 で)リクエストURLを 作 成 し ブラウザで 表 示 させてみてください 制 限 時 間 3 分 参 考 URL: 32

34 解 読 しよう!XMLファイルの 見 方 Yahoo!デベロッパーネットワーク:トップ > ショッピング > 商 品 検 索 クリックすると<Description>~</Description>の 間 をたたむことができる 他 も 同 様 に 閉 じることができる どんなツリー 構 造 になっているかクリックして 確 かめよう! たたむことによって 上 下 関 係 がどのようになっているか わかります それぞれのタグのようなものはレスポンスフィールド 内 に 説 明 が 書 いて あります レスポンスフィールド (どんなデータが 含 まれているか) HTMLと 同 じように 階 層 (ツリー) 構 造 になっている (head 部 分 body 部 分 etc) 33

35 XMLファイルの 見 方 解 説 1Result 階 層 全 体 はHTMLと 同 じようにヘッダー 部 分 (<head>)と 本 文 部 分 (<body>)があるようにxmlもヘッダー 部 分 本 文 部 分 とツリー 構 造 になっていると 考 える 返 した 結 果 が10 件 分 検 索 キーワードは 生 キャラメル <HIT index= >の 左 側 の - をクリックして 畳 んだ 状 態 これはそれぞれの 商 品 の 結 果 をくくっているタグと 考 えて 良 いでしょう xmlファイル->result 色 が 塗 られた 部 分 が xmlファイル->result という 書 き 方 をすることを 覚 えておく 参 考 URL: 34

36 XMLファイルの 見 方 解 説 2Hit 階 層 ( 商 品 個 別 情 報 ) ひとつ 階 層 を 下 るとアイテム 単 位 の 結 果 を 読 むことができます どんな 情 報 が 取 り 出 せるか チェックしておこう! 商 品 名 商 品 説 明 文 キャッチコピー 商 品 個 別 URL 購 入 できるか( 在 庫 切 れで 無 いか) 商 品 コード 画 像 ( 画 像 の 下 に 新 たな 階 層 がある!) - 小 さいサイズの 画 像 URL - 中 くらいのサイズの 画 像 URL レビュー 平 均 評 価 xmlファイル->result->hit(1 件 目 ) Hit 以 下 に 個 別 の 商 品 情 報 のデータが 含 まれている(リンク 画 像 URL 商 品 説 明 等 ) 参 考 URL: 35

37 APIを 使 うPHPプログラム 作 成 手 順 の 説 明 ここから 仕 切 り 直 してPHPでリクエストURLを 作 ってHTML 出 力 まで 進 めておきます このやり 方 流 れは 今 後 どんなWebサービスでも 共 通 して 使 える やり 方 なので ぜひ 実 践 の 時 に 参 考 にしてください 鉄 則 1 材 料 を 揃 える Webサービス(API)を 利 用 するためのアプリケーションID 取 得 アフィリエイトする 場 合 は 提 携 とアフィリエイトコード 取 得 リクエストURL(ベースURL)の 確 認 リクエストパラメータの 確 認 (どんな 条 件 で 検 索 できるか) レスポンスフィールドの 確 認 (どんな 結 果 を 得 られるか) 2 設 定 ファイル( 例 :common.php)の 作 成 WebアプリケーションIDなどサイト 内 で 共 通 して 使 うものを 保 存 3リクエストURLを 組 み 立 ててみる 4 取 得 したデータをHTML 化 する 36

38 123PHPでリクエストURLを 組 み 立 てるには? 難 易 度 : 1.アプリケーションIDやバリュコマIDなどは 外 部 ファイル 化 しておく(common.phpで 済 ) 追 加 で 作 成 するPHPでもその 外 部 ファイルを 読 み 込 んでそのデータを 活 用 できる 鉄 則 2. 文 字 列 はエンコードしたものを 使 うのではなく PHP 内 で 文 字 列 をPHPでエンコード 処 理 する rawurlencode( 変 数 );を 使 う 3. 表 示 するもの 以 外 はすべてHTMLの 頭 で 処 理 する(HTMLより 先 にPHPでプログラムしておく) metaタグ 内 やTITLEタグ 内 に 処 理 結 果 を 反 映 させることが 出 来 ます ワーク 外 部 ファイルの 読 み 込 み 文 字 列 の 結 合 など 1 時 間 目 での 学 習 をそのまま 応 用 するだけ! まずはリンクURLをPHPで 組 み 立 てて そのURLが 正 しく 作 られているか どうかを 確 認 する 一 緒 に 作 業 していきましょう リクエストURLの 組 み 立 て 1common.phpに 設 定 情 報 を 書 き 込 む( 事 前 課 題 のcommon.phpで 済 んでいるので 2 フォルダに 設 置 するだけでOK) 2url.phpにてリンクURLを 組 み 立 てる 組 み 立 てたURLの 確 認 3まずはリンクurlを 設 定 した$urlを 単 純 に 出 力 その 出 力 されたURLをコピーして 実 際 にリクエストできるかどうか 確 認 する 制 限 時 間 5 分 このページの 作 業 は 実 践 でもやってください! リクエストURLが 間 違 え ているかどうかが 確 認 できるのでぜひやってく ださい 参 考 URL: 作 業 ファイル:C: xampp htdocs 2 url.php ここで 表 示 したXMLファイルをブラウザで 開 いたままにして 確 認 URL: それぞれの 要 素 名 をコピペして 作 るやり 方 がスムーズです 37

39 123アフィリエイトリンクURLを 組 みこむには? 難 易 度 : YAHOO!ショッピング 商 品 検 索 APIの 場 合 は パラメータ 追 加 でアフィリエイトリンク 自 動 生 成! ワーク 制 限 時 間 1 分 // とPHP 文 章 内 でアフィリエイトリンクにするためのパラメータを 追 加 する 記 述 を コメントにしていますので それを 削 除 するだけでOK アフィリエイト 対 応 リクエストURLを 組 み 立 てる 仕 組 みだけ 理 解 しておきましょう 出 力 されたURLをコピーしてブラウザで 表 示 して 正 しく 動 くか 確 認 ( 商 品 リンク 先 がバリュコマースアフィリエイトリンクになっているか 確 認 ) 参 考 URL: 作 業 ファイル:C: xampp htdocs 2 url.php 確 認 URL: 38

40 4PHPでXMLを 個 々の 情 報 に 翻 訳 して 取 り 出 すには? 難 易 度 : XML 文 章 をデータに 変 換 して 取 り 込 み それを 一 個 ずつ 取 り 出 してHTMLで 表 示 する $xml = simplexml_load_file($url); $hits = $xml->result->hit; Simlexml_load_fileでリクエストURLにアクセスし その 内 容 を$xmlという 変 数 に 入 れる そのあと xmlデータ($xml)の 中 のResult->Hitの 階 層 に 降 りたところのデータのみ$hitsという 変 数 に 入 れます foreach ($hits as $hit) { echo h($hit->name)."<br />"; echo h($hit->url)."<br />"; echo h($hit->image->medium)."<br />"; echo h($hit->description)."<br />"; } XMLデータのHit 以 下 の 情 報 (= 商 品 個 別 情 報 )のみを 扱 う XMLデータをsimplexmlで 読 みこんで 一 つずつ 分 解 して 取 り 出 して 表 示 する 文 法 ワーク 一 緒 に 作 業 していきましょう 制 限 時 間 3 分 1 組 み 立 てたURLを 元 にsimplexmlでXMLデータを 取 り 出 す 2XMLデータのHit 階 層 まで 降 りて そこからのデータを$hitsに 代 入 する 3foreachで$hitsに 格 納 された 商 品 データをひとつずつ 取 り 出 して$hitに 格 納 商 品 数 分 繰 り 返 す 2 本 文 表 示 部 分 に 商 品 名 リンクURL 画 像 URL 説 明 文 の 情 報 だけピックアップして 表 示 します 参 考 URL: 作 業 ファイル:C: xampp htdocs 2 url.php コピペ 用 テキスト: C: xampp htdocs 2 コピペ 用 テキスト.txt 確 認 URL: 39

41 PHPで 出 力 する 部 分 を 単 純 化 する(HTMLタグのように 扱 う) <?php foreach ($hits as $hit) { echo h($hit->name)."<br />"; echo h($hit->url)."<br />"; echo h($hit->image->medium)."<br />"; echo h($hit->description)."<br />"; }?> PHPの 中 にHTMLが 入 ると 見 づらい 書 きにくい <p><?php foreach ($hits as $hit) {?> <div class="item"> <h2><a href="<?php echo h($hit- >Url);?>"><?php echo h($hit- >Name);?></a></h2> <p><a href="<?php echo h($hit- >Url);?>"><img src="<?php echo h($hit- >Image->Medium);?>" /></a><?php echo h($hit->description);?></p> </div> <?php }?> </p> 実 際 の 表 示 内 容 に 近 いのでわかりやすい PHPタグ 化!(HTMLの 中 にタグとして 埋 め 込 むだけ!) <?php echo h($hit->description);?> Check! HTMLとして 表 示 したい 情 報 のフィールド( 種 類 )を 指 定 する 商 品 データの 個 別 の 情 報 ごとにPHPタグ 化 シンプルにタグ 化 することで 既 存 のHTMLに 埋 め 込 む 感 覚 で 使 える! 40

42 YAHOO!ショッピングでPHPタグ 化 したものの 例 繰 り 返 し 開 始 <?php foreach ($hits as $hit) {?> 繰 り 返 し 終 了 <?php }?> 商 品 名 <?php echo h($hit->name);?> 商 品 説 明 文 <?php echo h($hit->description;?> キャッチコピー<?php echo h($hit->headline);?> 商 品 個 別 URL <?php echo h($hit->url);?> 購 入 できるか<?php echo h($hit-> Availability);?> 商 品 コード <?php echo h($hit-> Code);?> 画 像 ( 画 像 の 下 に 新 たな 階 層 がある!) - 小 さいサイズの 画 像 URL <?php echo h($hit-> Image->Small);?> - 中 くらいのサイズの 画 像 URL <?php echo h($hit-> Image->Medium);?> Hit 以 下 に 個 別 の 商 品 情 報 のデータが 含 まれている(リンク 画 像 URL 商 品 説 明 等 ) 41

43 4HTMLで 画 像 表 示 など 見 やすく 整 形 してみよう! 難 易 度 : <?php foreach ($hits as $hit) { echo h($hit->name)."<br />"; echo h($hit->url)."<br />"; echo h($hit->image->medium)."<br />"; echo h($hit->description)."<br />"; }?> <p><?php foreach ($hits as $hit) {?> <div class="item"> <h2><a href="<?php echo h($hit->url);?>"><?php echo h($hit->name);?></a></h2> <p><a href="<?php echo h($hit->url);?>"><img src="<?php echo h($hit->image->medium);?>" /></a><?php echo h($hit->description);?></p> </div> <?php }?> </p> PHPの 処 理 の 途 中 で 一 旦 閉 じて HTML 文 を 割 り 込 ませて 良 い 再 びPHPに 戻 す 文 法 ワーク 最 後 は 自 力 で! Check! イメージ 制 限 時 間 5 分 1 商 品 のタイトル 名 はh2タグで 2 画 像 はimgタグで 画 像 URLをPHPで 指 定 3 商 品 のタイトルと 画 像 にその 商 品 へのリンク 4 説 明 文 は 適 当 に 出 してください 5 余 裕 があればタイトルタグも ~の 検 索 結 果 実 際 に 何 か 作 る 時 はまず HTMLでダ ミーのテキスト 画 像 を 入 れて 整 形 し あとでphpのコードを 埋 め 込 むとスムー ズです 参 考 URL: 作 業 ファイル:C: xampp htdocs 2 url.php コピペ 用 テキスト: C: xampp htdocs 2 コピペ 用 テキスト.txt 確 認 URL: 42

44 APIを 使 うPHPプログラムを 作 る 流 れ 手 順 の 確 認 難 易 度 : 43 鉄 則 1 材 料 を 揃 える Webサービス(API)を 利 用 するためのアプリケーションID 取 得 アフィリエイトする 場 合 は 提 携 とアフィリエイトコード 取 得 リクエストURL(ベースURL)の 確 認 リクエストパラメータの 確 認 (どんな 条 件 で 検 索 できるか) レスポンスフィールドの 確 認 (どんな 結 果 を 得 られるか) 2 設 定 ファイル( 例 :common.php)の 作 成 WebアプリケーションIDなどサイト 内 で 共 通 して 使 うものを 保 存 3リクエストURLを 組 み 立 ててみる 4 取 得 したデータをHTML 化 する 5 欲 張 る( 貪 欲 に 組 み 合 わせる)

45 課 題 演 習 は3コースの 中 から 選 択 30 分 +αで 作 って 今 日 から 使 えるものを 作 る! HTML+CSS+Javascript 基 本 PHP 部 分 のテンプレートだけ 用 意 しています リクエストURLの 組 み 立 てを 必 須 として 表 示 項 目 の 追 加 や 見 せ 方 カスタマイズは 各 自 にお 任 せします 課 題 A:ブログパーツ 課 題 B:ホットペッパー 検 索 サイト 課 題 C: 旅 行 系 サイト 難 易 度 : 難 易 度 : 難 易 度 : IFRAMEでPHPファイルを 呼 び 出 す ランキングブログパーツ カテゴリだけでなく 性 別 ごと 年 代 別 のランキングも 出 せます 自 分 好 みのデザインにしてみましょ う! 余 裕 があればブログパーツを Javascript 化 してみましょう! ヤフーショッピングAPI バリューコマース 使 用 地 域 検 索 をプルダウンで 動 的 に 呼 び 出 し 詳 細 のエリアまで 落 として 検 索 する 居 酒 屋 もしくはサロン 検 索 サイト jqueryで 動 くリクルート 社 提 供 のUIラ イブラリーを 使 います リクルートWebサービス バリューコマース 使 用 今 日 勉 強 したPHPをフル 活 用 して 効 率 的 なサイト 構 築 と 旅 行 系 API2 種 ( 施 設 情 報 施 設 検 索 )を 使 った 旅 行 アフィリエイトサイトの 骨 組 を たった30 分 で 作 ることを 目 指 します 楽 天 トラベル 楽 天 アフィリエイト 使 用 44

46 課 題 A: 売 上 ランキングブログパーツ 制 限 時 間 50 分 難 易 度 : コスメの 売 上 ランキングを 表 示 した 場 合 カテゴリーIDは2501 リクエストURL 例 1common.phpにアプリケーションIDなどを 書 き 込 む( 済 ) 事 前 課 題 のcommon.phpファイルをコピーして /3/travelフォルダへ 格 納 作 業 ファイル:C: xampp htdocs 3 blogparts common2.php 2リクエストURLを 組 み 立 てる どの 売 れ 筋 ランキングにするかはYAHOO!ショッピングのページの 売 上 ランキングに 移 動 して 表 示 させた いカテゴリを 選 びます その 時 のURLの 数 字 がカテゴリーIDです (Javascript 化 する 方 はここで 次 のページへ 自 分 のブログの 色 や 文 字 サイズに 合 わせて 表 示 させます) 3 好 きなようにデザインを 調 整 する( 横 幅 色 など) アプリケーションID 必 須 デイリーランキング 参 考 URL: 作 業 ファイル:C: xampp htdocs 3 blogparts index.php 確 認 URL: 45

47 課 題 A: 売 上 ランキングブログパーツJavascript 化 IFRAMEだとサイズ 指 定 して 固 定 されてしまうが Javascriptブログパーツだと 入 れた 場 所 (サイドバー 等 )に 応 じて 横 幅 も 縦 幅 も 自 由 に 調 整 できる また IFRAMEが 使 えないブログサービスでもJavascriptなら 貼 り 付 けられるので それを 利 用 する 1HTMLのHead 部 分 などブログに 表 示 するときに 必 要 のない 要 素 を 削 除 ( 冒 頭 のPHPとdivタグを 含 めたその 中 だけ 残 す) 2PHPの 頭 の 方 に header( Content-type: application/x-javascript ); と 追 加 3 表 示 するHTMLの 前 にecho document.open(); ;を 追 加 後 ろにecho document.close(); ;を 追 加 4 echo document.write(. $line. ); ;という 感 じでdocument.writeで 書 き 出 す 5 <script src= 設 置 したPHPのURL type= text/javascript ></script>という 感 じでブログの 入 れたい 場 所 に 入 れる すいません 当 日 ご 希 望 の 方 個 別 に 直 接 説 明 します 46

48 課 題 B: 居 酒 屋 or 美 容 室 検 索 サイト 制 限 時 間 50 分 難 易 度 : A. 地 域 絞 り 込 み 検 索 B.エリア 特 集 ページ 検 索 index.php kekka.php 例 : 銀 座 で 掘 りごたつ 恵 比 寿 の 美 容 室 地 域 情 報 と 組 み 合 わせた ページ 作 成 area1.php~area6.php < 設 定 ファイル> common.php 事 前 課 題 で 準 備 したもの common2.php このサイトの 基 本 情 報 (サイト 名 メニュー 項 目 等 ) すでに 用 意 されているライブラリを 利 用 して 高 度 な 検 索 インタフェース 制 作 時 間 短 縮! 47

49 課 題 B: 居 酒 屋 or 美 容 室 検 索 サイト 作 業 手 順 1common.phpにアプリケーションIDなどを 書 き 込 む( 済 ) 事 前 課 題 のcommon.phpファイルをコピーして /3/travelフォルダへ 格 納 2common2.phpにこれから 作 る 旅 行 系 サイトのタイトルやサブタイトル メニュー 用 のテキストを 入 れます 3バリューコマースを 使 う 場 合 はホットペッパーの 自 由 テキスト のsidとpidをこのファイル 一 番 下 に 記 入 common2.phpは 全 ファイルから 呼 び 出 されます $titileなどの 変 数 にタイトルなど 全 ページで 共 通 する 内 容 が 代 入 されています 各 ページはcommon2.phpを 呼 び 出 し 変 数 に 代 入 されたも のを 利 用 してecho h($titile);というphpコマンドを 実 行 するこ とにより タイトルなどを 表 示 しています つまりこのcommon2.php 1ファイルを 変 えるだけで 全 ページ の 情 報 が 切 り 替 わります これは 似 たようなサイトを 作 ったり 修 正 する 手 間 を 省 くことができます 全 ページ 共 通 する 内 容 を 外 部 ファイル 化 する それにより 修 正 や 同 じようなサイトが 素 早 く 作 れる! 作 業 ファイル:C: xampp htdocs 3 izakaya common2.php 居 酒 屋 検 索 の 場 合 作 業 ファイル:C: xampp htdocs 3 beauty common2.php 美 容 室 検 索 の 場 合 48

50 課 題 B: 居 酒 屋 or 美 容 室 検 索 サイト 作 業 手 順 検 索 結 果 ページの 作 成 1トップページ(index.php)からプルダウン 検 索 で4つのパラメータが 送 られてきます それらをそれぞれ$_GETで 受 取 変 数 に 格 納 しています $large_service_area = $_GET['large_service_area']; $service_area = $_GET['service_area']; $middle_area = $_GET['middle_area']; $small_area = $_GET['small_area']; これらの 変 数 をパラメータとし リクエストURLを 組 み 立 ててください APIキーはcommon.phpに$recruit_apikey = ;の 部 分 に 記 入 してください また リクエストURLにAPIキーが 必 要 なのでこの$recruit_apikey を 使 ってください 参 考 URL: ホットペッパーグルメサーチAPI 作 業 ファイル:C: xampp htdocs 3 izakaya kekka.php 確 認 URL: 参 考 URL: ホットペッパーサロンサーチAPI 作 業 ファイル:C: xampp htdocs 3 /beauty/kekka.php 確 認 URL: 49

51 課 題 B: 居 酒 屋 or 美 容 室 検 索 サイト 作 業 手 順 エリア 特 集 ページの 作 成 1ページタイトルをarea1.phpの 冒 頭 $pagetitle= 池 袋 でほりごたつ 特 集 ; のように 設 定 する(タイトルタグやパン 屑 ナビなどに 反 映 ) 2エリアのパラメータを 知 るには 一 度 検 索 してみる 例 えば 池 袋 の 場 合 先 のように 検 索 し kekka.php?large_service_area=ss10&service_area=sa11&middle_area=y050&small_area= という 結 果 が 得 られることを 確 認 する それを 元 にarea1.phpに $large_service_area = "SS10"; $service_area = "SA11"; $middle_area = "Y050"; $small_area = ""; と 書 きこむ リクエストURL 部 分 は 検 索 結 果 ページと 基 本 的 に 同 じ 3これに 掘 りごたつ 有 り という 条 件 をつける 時 はそれに 応 じてパラメータを 追 加 する 例 :horigotatsu=1というパラメータを 加 える 参 考 URL: ホットペッパーグルメサーチAPI 作 業 ファイル:C: xampp htdocs 3 izakaya area1.php 出 来 たらコピーしてarea2.php area3.php area4.php area5.phpと 作 る 確 認 URL: 参 考 URL: ホットペッパーサロンサーチAPI 作 業 ファイル:C: xampp htdocs 3 beauty area1.php 出 来 たらコピーしてarea2.php area3.php area4.php area5.phpと 作 る 確 認 URL: 50

52 課 題 C: 旅 行 系 サイト 全 体 像 制 限 時 間 50 分 難 易 度 : トップページ index.php エリアページ 1エリアの 説 明 ( 任 意 ) 2そのエリアのホテル 旅 館 一 覧 3そのエリアの 宿 泊 予 約 へのリンク area1.php~area6.php ホテル 詳 細 住 所 写 真 地 図 利 用 できるクレジットカー ド 楽 天 トラベルのその ホテルのページへのリ ンク syosai.php < 設 定 ファイル> common.php 事 前 課 題 で 準 備 したもの common2.php このサイトの 基 本 情 報 (サイト 名 メニュー 項 目 等 ) 楽 天 トラベルで 提 供 されている2 種 のAPIで そのエリアのホテル 一 覧 とその 詳 細 情 報 表 示! 51

53 課 題 C: 旅 行 系 サイト 作 業 手 順 1common.phpにアプリケーションIDなどを 書 き 込 む( 済 ) 事 前 課 題 のcommon.phpファイルをコピーして /3/travelフォルダへ 格 納 2common2.phpにこれから 作 る 旅 行 系 サイトのタイトルやサブタイトル メニュー 用 のテキストを 入 れます common2.phpは 全 ファイルから 呼 び 出 されます $titileなどの 変 数 にタイトルなど 全 ページで 共 通 する 内 容 が 代 入 されています 各 ページはcommon2.phpを 呼 び 出 し 変 数 に 代 入 されたも のを 利 用 してecho h($titile);というphpコマンドを 実 行 するこ とにより タイトルなどを 表 示 しています つまりこのcommon2.php 1ファイルを 変 えるだけで 全 ページ の 情 報 が 切 り 替 わります これは 似 たようなサイトを 作 ったり 修 正 する 手 間 を 省 くことができます 全 ページ 共 通 する 内 容 を 外 部 ファイル 化 する それにより 修 正 や 同 じようなサイトが 素 早 く 作 れる! 作 業 ファイル:C: xampp htdocs 3 travel common2.php 52

54 課 題 C: 旅 行 系 サイト 作 業 手 順 楽 天 ウェブサービスでの 注 意 事 項 楽 天 ウェブサービスではxmlファイルに : が 付 いたものがあり これがsimplexmlではそのまま 処 理 できな いため それをカバーする 処 理 を 追 加 します // xmlファイルを 一 度 ファイルとして 取 得 して 変 数 に 格 納 $xml = file_get_contents($rwsurl); // 楽 天 の 場 合 : が 入 っている 要 素 名 がある // simplexmlでは 扱 えないので その 文 字 を 削 除 する $xml = str_replace('header:header', 'headerheader', $xml); $xml = str_replace('keywordhotelsearch:keywordhotelsearch', 'keywordhotelsearchkeywordhotelsearch', $xml); // 変 数 に 入 れられた 文 字 列 をsimpleXMLで 読 みこむ $xml = simplexml_load_string($xml); 変 数 に 格 納 するとset_replaceで 文 字 を 置 き 換 え 出 来 る Xmlファイル 中 の header:header を headerheader と 書 き 換 えて simplexmlで 使 えるようにする 文 法 この 作 業 をする 時 間 を 省 くために あらかじめこれに 対 応 したソースを 各 ファイルに 記 入 してあります リクエストURLの 組 み 立 てのみやっていただきます str_replace 文 字 の 置 き 換 えを 行 う 53

55 課 題 C: 旅 行 系 サイト 作 業 手 順 エリアページの 作 成 ヘッダー 1エリアの 説 明 ( 任 意 ) 写 真 とかあると 旅 行 サイトっぽい お 時 間 があるときにどうぞ! 2そのエリアのホテル 旅 館 一 覧 1まずこのページの 設 定 をします area1.phpファイルを 開 いて 4 行 目 の$areaname = **** ;を 変 更 します これひとつで そのページのタイトルやパン 屑 ナビが 変 わるようにPHPタグを 埋 め 込 んであります 2 $rwsurl = の 部 分 でリンクURLを 組 み 立 ててください エリア 名 で 検 索 を 行 います エリア 名 はそれより 上 の 行 で 設 定 され URLエンコードまでの 処 理 が 書 かれています 3このまま 楽 天 トラベルのホームページへリンクしても 良 いですが 自 分 のサイト 内 で 表 示 させるためにホテル 番 号 を 取 得 して syosai.php?num=70712 というように num= とホテル 番 号 を 指 定 したURLを 作 成 してリンクを 貼 ります(そのようにすでに 書 いています) 詳 細 ページではそのnum= という 値 を 受 け 取 って そのホテル 番 号 の 施 設 情 報 詳 細 を 表 示 します 4 表 示 を 確 認 します 5 余 裕 があれば 表 示 する 項 目 増 やしたりできますので チャレンジしてください!^^ area1.phpの 動 作 を 確 認 できれば 新 しいエリアを 増 やすのはこのファイルを 単 にコピーしてarea2.php area3.php とし て 頭 の$areaname = **** ;を 変 更 するだけで 新 しいエリアページが 完 成 します 参 考 URL: 楽 天 トラベルキーワード 検 索 API (version: ) 作 業 ファイル:C: xampp htdocs 3 travel area1.php 出 来 たらコピーしてarea2.php area3.php area4.php area5.phpと 作 る( 数 は 任 意 確 認 URL: 54

56 課 題 C: 旅 行 系 サイト 作 業 手 順 施 設 詳 細 ページの 作 成 1 syosai.php?num=70712 という 形 で 施 設 番 号 を 受 け 取 ります 2 $rwsurl = の 部 分 でリンクURLを 組 み 立 ててください 施 設 番 号 はその 上 のほうの 行 で$num = $_GET* num +と 書 かれているので$numという 変 数 を 使 ってリクエストURLを 組 み 立 てます 3 施 設 詳 細 情 報 の 表 示 を 確 認 します 4 余 裕 があれば 表 示 する 項 目 増 やしたりできますので チャレンジしてください!^^ 参 考 URL: 楽 天 トラベル 施 設 情 報 API (version: ) 作 業 ファイル:C: xampp htdocs 3 travel syosai.php 確 認 URL: 55

57 小 ネタなど モバイル 用 の 画 像 取 得 サイズ 記 号 cをgへ 置 き 換 える str_replace 関 数 を 使 う $mobiimgsrc= h($hits->$num->image->medium); $mobiimgsrc = str_replace(' g/', ' $mobiimgsrc); 画 像 URL 長 すぎる 商 品 文 を 途 中 でぶちぎる 文 字 をカットする mb_substr を 使 う また そのあとに を 表 示 し 文 章 に 続 きがあることを 示 す $disc = h($hit->description); $disc = mb_substr ($disc,0,200,"utf-8"). '...'; 56

58 アレンジのネタ 地 域 名 + 空 室 検 索 の 作 成 ホテルNo+ 空 室 検 索 の 作 成 商 品 が 表 示 されてもリンク 先 が 在 庫 切 れだったらもったいないよね ヤフーショッピングの 場 合 のリクエスト 追 加 パラメータavailability=1 在 庫 があるもののみ 表 示 する セール 中 商 品 のみにしたい ヤフーショッピングの 場 合 のリクエスト 追 加 パラメータdiscount=1 セール 中 のもののみ 表 示 する 楽 天 市 場 や 楽 天 トラベルで 検 索 させるブログパーツ 作 成 楽 天 のサイト( 楽 天 Webサービス)で 調 べてやってみる 57