スライド 1

Part3 サイトを 豊 かにするコンテ ンツマッシュアップとマネタイズ WebサービスAPI 勉 強 会 2010/3/25 1

事 前 にダウンロードしておくもの 準 備 しておくもの 今 回 使 用 する 部 品 をダウンロードしてすぐ 使 える 状 態 にしておくことで スムーズに 作 業 が 進 められ ます じゃらんWebサービス 用 お 手 軽 ライブラリ - 地 域 選 択 プルダウン - を 作 ってみた http://www.tatamilab.jp/rnd/archives/0002 41.html カレンダー 日 付 選 択 ライブラリ http://code.google.com/p/protocalendar/do wnloads/list ( 一 番 上 の 最 新 版 をダウンロードしてください) 勉 強 会 が 始 まる 前 までに 地 域 選 択 ライブラリ カレンダー 日 付 選 択 ライブラリを 左 記 URLからダウ ンロードして 解 凍 して 使 える 状 態 にしておいてくだ さい apifunc.phpとapiconfig.phpのバージョンアッ プを 行 いましたので 最 新 版 をダウンロードして 設 定 情 報 を 記 入 してください( 勉 強 会 では 開 発 用 に 使 うだけなので どのサイトのものでも 良 いです) 最 新 版 apifunc.php 最 新 版 apiconfig.php 楽 天 デベロッパーID 楽 天 アフィリエイトID じゃらんWebサービスキー リンクシェアトークン バリューコマースのじゃらん 自 由 テキスト 内 の pid,sid( 任 意 )をあらかじめ 入 力 しておいてくださ い 2010/3/25 2

今 回 の 目 指 すサイトのイメージ 今 回 作 るサイトは プラン 比 較 のための 宿 泊 施 設 検 索 サイトです すべての 旅 館 ホテル 情 報 を 出 力 をするわけではなく プランが 取 得 可 能 なところからデータを 取 得 します 検 索 条 件 の 入 力 エリア 日 時 人 数 検 索 条 件 にマッチした 施 設 表 示 じゃらんや 楽 天 トラベルなどに 登 録 されてい る 宿 泊 施 設 情 報 はプランが 存 在 しないところも 含 まれます プランがある 存 在 する 旅 館 を 検 索 するには 空 室 検 索 のAPIを 使 用 します ( 最 初 から 日 時 人 数 指 定 で 空 室 検 索 させると いうことは すぐに 成 約 させることを 目 的 とす るサイトに 向 いています) ホテル 名 プラン 名 他 APIのデータを 取 得 して 比 較?? 2010/3/25 3

今 回 の 特 に 経 験 すること 第 三 者 が 公 開 しているライブラリ( 部 品 )を 活 用 して 短 時 間 で 効 果 的 なWebサイト 構 築 を 行 いま しょう 部 品 やAPIを 組 み 合 わせることに 専 念 してオンリーワンなサイト 作 りを 目 指 します 第 三 者 が 公 開 しているUIライブラリなどを 活 用 して 使 い 勝 手 の 良 いサイトを 短 時 間 で 構 築 します すべてを 自 力 で 作 る 必 要 がありません よく 使 われそうなライブラリ( 部 品 )はすで に 公 開 されている 場 合 が 多 いです その 使 い 方 を 知 れば 本 格 的 なインタフェースを 持 ったサイ トを 短 時 間 で 構 築 することができます 2010/3/25 4

いろんな 道 具 や 材 料 をかき 集 めて 短 時 間 で 効 率 的 に 作 る 最 小 限 のインプットで 最 大 限 の 効 果 が 得 られるのがAPIを 扱 う 醍 醐 味 APIをより 扱 いやすくなる 部 品 もネット 上 で 公 開 されているので 組 み 合 わせて 活 用 する 部 品 素 材 API 普 通 に 勉 強 しながら 作 っていると 何 年 もか かってしまうことを 短 時 間 で 解 決 していくこと が 出 来 ます その 方 法 はインターネット 上 に 転 がっていま す それらを 取 捨 選 択 して 最 適 な 組 み 合 わせ を 考 えていきます Webサイト 組 み 合 わせる(マッシュアップ)ということ に 時 間 をかけて 細 かい 部 品 は 第 三 者 が 公 開 さ れているものを 使 えば 自 作 しなくて 済 みます 考 えることにより 専 念 できます 勉 強 会 や 開 発 合 宿 というのはそれらの 情 報 交 換 が 効 率 的 に 出 来 る 場 であり 積 極 的 にいろん なところに 参 加 していると 様 々な 情 報 が 得 ら れます 開 発 合 宿 勉 強 会 2010/3/25 5

1 時 間 目 概 要 :エリア+ 日 付 + 人 数 でプラン( 空 室 ) 検 索 まずはエリア+ 日 付 + 人 数 という 条 件 で 空 室 検 索 を 行 います 空 室 があるホテルがあればそれを 基 準 に 他 のAPIから 空 室 検 索 を 行 って プラン 比 較 が 出 来 ます 検 索 条 件 の 入 力 エリア 日 時 人 数 検 索 条 件 にマッチした 施 設 表 示 ホテル 名 プラン 名 1 時 間 目 ではじゃらんWebサービスを 使 って エリア+ 日 付 + 人 数 空 室 検 索 プラン(ホテ ル)を 表 示 させてみます プランまで 表 示 できたら2 時 間 目 ではその 情 報 を 使 ってそのホテルの 空 室 プランを 一 覧 表 示 させて 比 較 します その 際 何 らかの 方 法 で 同 じホテルの 情 報 を 取 り 出 します 他 APIのデータを 取 得 して 比 較?? 2010/3/25 6

他 のAPIと 組 み 合 わせるときに 発 生 すること 他 のAPIと 組 み 合 わせていると API 間 の 仕 様 の 違 い(パラメータや 得 られる 情 報 の 違 い)が 発 生 す る 今 回 異 なるAPIを 同 時 に 組 み 合 わせて 使 って いきますが その 際 にいくつか 解 決 する 課 題 が 発 生 します その 一 つがリクエストできる 項 目 やパラメータ 形 式 の 違 い もう 一 つが 返 ってく る 情 報 や 形 式 の 違 い 情 報 の 粒 度 が 大 きく 異 な る 場 合 もある( 商 品 名 に 宣 伝 文 言 を 入 れている ところなど) まったく 違 う それらを 解 決 するためにデータの 形 式 を 変 換 したり 出 力 する 際 に 調 整 して 表 示 するなど 工 夫 が 必 要 である サイト 訪 問 者 にとってはバ ラバラのデータを 見 せられるよりも 比 較 検 討 し やすいフォーマットで 整 理 されているほうが 喜 ばれそうです 2010/3/25 7

空 室 (プラン)があるホテル 検 索 を 作 ってみる 前 回 まで 物 販 系 のAPIを 使 ってみましたが 今 回 は 旅 行 系 のAPIを 使 ってみます 大 きく 変 わること は 位 置 場 所 という 要 素 と 日 程 人 数 という 要 素 が 重 要 になってくることです リクエストURLの 組 み 立 て New! UIライブラリを 利 用 検 索 結 果 を 表 示 さ せる 旅 行 系 APIでも 物 販 系 APIと 同 様 に 同 じような やり 方 でリクエストURLを 組 み 立 てて 情 報 を 取 り 出 すことができます この 基 本 的 な 流 れは 従 来 と 変 わりません 旅 行 系 APIでは 単 なるモノの 販 売 と 異 なり 在 庫 ( 空 室 )の 変 動 やエリアが 重 要 視 されます それらもAPIを 使 って 簡 単 に 情 報 を 取 得 するこ とができます 旅 行 系 APIで 出 来 ること 宿 の 検 索 緯 度 経 度 + 半 径 指 定 での 検 索 日 付 や 人 数 を 指 定 しての 空 室 情 報 の 検 索 今 回 は 空 いている 宿 を 探 すことにフォーカスし ます エリア 日 付 人 数 2010/3/25 8

じゃらん 空 室 検 索 API リクエストURLの 組 み 立 て 今 回 はじゃらんWebサービスを 使 い エリアから 空 室 検 索 できるようにします まずはリクエスト URLの 組 み 立 てとそこから 必 要 なパラメータを 調 べていきます 検 索 結 果 ページから 作 りこんでいきます こ こで 必 要 なパラメータに 一 通 り 目 を 通 してお くと 次 のステップがわかりやすくなります 検 索 パラメータに 目 を 通 して 行 くとこんな 条 件 を 付 けてコンテンツをリクエスト 出 来 るんだ という 気 づきが 得 られます 後 日 サイトを 充 実 させるためにも 出 来 ることを 知 っておきま しょう つまづくところはエリアコードをどこで 知 る か ということです エリアコードを 取 得 するAPIもあるのですが エリアコードをいちいちAPIにリクエストせず に 知 る 方 法 があります 方 法 については 次 のページでご 案 内 します じゃらんWebサービス 空 室 検 索 API http://www.jalan.net/jw/jwp0100/jww01 05.do 2010/3/25 9

地 域 を 絞 り 込 むUIライブラリを 利 用 する 地 域 を 絞 り 込 むのに 便 利 なプルダウンメニューを 作 成 します インターネット 上 で 公 式 非 公 式 で 公 開 されているものがあるので 活 用 して 短 期 間 で 理 想 的 なサイトを 作 っていきます エリアコードは 一 見 調 べないとわかりませんが エリアを 絞 り 込 むUI(ユーザインタフェース)が 公 開 されている 場 合 があります 今 回 は たたみらぼ さんで 公 開 されているUIを 利 用 します 参 考 :じゃらんWebサービス 用 お 手 軽 ライブラリ - 地 域 選 択 プルダウン - を 作 ってみた http://www.tatamilab.jp/rnd/archives/0002 41.html 提 供 されているUIはエリア 情 報 をまとめた Javascriptファイル(. js)とそれを 呼 び 出 す Javascript (. js)の2ファイルで 構 成 され ています これを 使 ってフォームを 作 成 すると エ リアのidをフォームを 使 ってパラメータとして 次 の PHPファイルに 渡 すことが 可 能 になります 注 意! 開 発 中 にテスト 動 作 させるときはマイナーな 地 域 を 選 択 しないように ホテルが 無 いエリアを 選 択 した 場 合 テストになりません データが 更 新 時 はjsファイルを 更 新 すること 2010/3/25 10

コラム: 他 のUIライブラリのご 紹 介 UIライブラリーを 利 用 することで 複 雑 なインタフェースもカンタンに 自 分 のサイトに 設 置 すること ができます うまく 活 用 して 短 時 間 でサイトを 作 れるようになりましょう ここで 言 うライブラリとは 開 発 者 が 自 由 に 利 用 できる 部 品 と 考 えてください 各 社 がAPIを 積 極 的 に 利 用 してもらえるように 汎 用 的 な 部 品 を 提 供 していたり 他 のAPI 利 用 者 ( 開 発 者 ) が 公 開 している 場 合 があります リクルートUI http://mtl.recruit.co.jp/sandbox/rui/ 楽 天 トラベル(JSONP) http://travel.rakuten.co.jp/webservice/sa mple/jsonp/simple_hotel_search.html PHPやPealが 動 かないサーバでも 検 索 結 果 が 表 示 できる! 2010/3/25 11

カレンダー 式 日 付 選 択 UIライブラリ Selectタグで 日 付 選 択 のためのHTMLタグを 書 くことは 出 来 るが クリックだけで 簡 単 に 入 力 でき るようにします 入 力 した 日 付 が 正 しいかどうかのチェックは 1.データを 受 けとったPHPでチェックする 2.データを 送 信 する 側 でチェックする カレンダー 形 式 だと 週 末 など 曜 日 感 覚 も わかり 操 作 しやすい の2 通 り 考 えられますが 後 でチェックしたり そのページでチェックしたりするプログラムを 作 るのが 面 倒 です 最 初 から 無 効 な 日 付 が 入 力 されにくいユーザインタフェースを 使 います 日 本 人 が 作 成 した 祝 日 にも 対 応 したカレン ダー 式 日 付 選 択 ライブラリを 活 用 します Spookies Labs Blog シンプルな 日 付 選 択 用 ライブラリ protocalendar.js を 公 開 しま した http://labs.spookies.co.jp/2007/11/20/ protocalendar-js-10-relese/ 参 考 : 年 月 日 セレクトボックスを 表 示 http://www.7key.jp/hp/js/datetime6.html 2010/3/25 12

トップページのインタフェースが 完 成 エリア 選 択 UI カレンダー 日 付 選 択 UIを 組 み 込 むことにより 複 雑 な 動 作 をするユーザインタフェー スが 短 時 間 で 組 み 込 めました 日 付 選 択 UIとカレンダー 日 付 選 択 UIの 二 つを 組 み 合 わせて 宿 泊 予 約 空 室 検 索 の 条 件 を 指 定 できるようになりました これらの 項 目 は フォームで 検 索 ボタンを 押 したときに パラ メータとなって 画 面 遷 移 します これで 複 雑 だと 思 われていた 条 件 を 含 めた 検 索 が 可 能 になりました 2010/3/25 13

GETでパラメータを 受 け 取 って 変 数 に 格 納 UIライブラリを 設 置 した 後 どのようにパラメータが 渡 るか 確 認 し パラメータの 値 を 受 け 取 る 記 述 を 行 います // パラメータの 値 を 取 得 (GET) $pref=$_get["pref"]; $l_area=$_get["l_area"]; $s_area=$_get["s_area"]; $page=$_get["page"]; if(!isset($page ) $page == "") $page = 1; $start=$page*10-9; $checkin_date=$_get["japan_calendar"]; $room_count = $_GET['room_count']; $adult = $_GET['adult']; $stay_count = $_GET['stay_count']; まず UIライブラリーで 一 度 動 作 を 確 認 し そこにつけられるパラメータ 名 を 書 きとめてお きます 具 体 的 には 実 際 に 操 作 してみて エ ラーは 出 ますがフォーム 送 信 後 の URLのパラ メータの 名 前 や 値 を 確 認 します 次 にそれらのパラメータを 受 け 取 る 流 れをく みこみます 例 :$area=$_get[ area ] この 時 変 数 名 とパラメータ 名 をそろえておく と 混 乱 が 少 ないでしょう 2010/3/25 14

日 付 の 形 式 変 換 日 付 の 形 式 をAPIが 認 識 できる 形 に 変 換 します じゃらんの 日 付 の 指 定 方 法 は 宿 泊 開 始 日 日 付 (yyyymmdd 形 式 ) 宿 泊 日 数 1~9 楽 天 トラベルの 日 付 の 指 定 方 法 は チェックイン 年 月 日 YYYY-MM-DD チェックアウト 年 月 日 YYYY-MM-DD カレンダー 式 日 付 選 択 UI UNIXタイムスタンプ まず 日 付 をUNIXタイムスタンプに 変 換 します その 上 で 各 APIで 扱 う 形 式 の 文 字 列 として 変 換 します 文 字 列 の 置 換 や 操 作 などでもなんとかなりそ うですが UNIXタイムスタンプとdate 関 数 と の 連 携 で 華 麗 にコントロールしていきます UNIXタイムスタンプさえ 求 めることが 出 来 れば あらゆる 形 式 の 日 付 表 現 方 法 で 表 示 することが 可 能 です strtotime( 文 字 列 ) 関 数 文 字 列 で 表 現 された 日 付 時 間 をUNIXタイムス タンプに 変 換 します date 関 数 date 関 数 UNIXタイムスタンプから 指 定 された 形 式 で 日 付 の 文 字 列 を 生 成 します じゃらん 書 式 の 日 付 楽 天 書 式 の 日 付 2010/3/25 15

変 数 パラメータ 管 理 表 変 数 管 理 表 を 作 成 することによって 不 要 な 混 乱 を 避 け 冷 静 に そして 確 実 にプログラムを 作 りこ んでいきましょう パラメータ 名 変 数 名 内 容 備 考 pref $pref 都 道 府 県 l_area $l_area 大 エリア s_area $s_area 小 エリア japan_calendar $checkin_date チェックインする 日 付 /カレンダーで 指 定 パラメータと 変 数 の 名 称 が 違 う room_count $room_count 部 屋 数 adult $adult 大 人 の 人 数 stay_count $stay_count 宿 泊 日 数 $jalancheckindate じゃらんチェックイン 年 月 日 page $page ページ 番 号 $start ページで 表 示 するデータを 開 始 する 位 置 扱 うパラメータが 多 くなると 混 乱 したり 些 細 なミスに 気 づけなかったりします それを 防 ぐために 扱 うパラメータや 変 数 について 管 理 する 表 のようなものを 作 成 しておくと 便 利 で す 変 数 やパラメータは1 文 字 でも 違 うと 動 かな いものです 一 覧 にした 後 変 数 名 やパラメー タ 名 をコピペしながら 作 りこんでいくと ミス を 防 ぐことが 出 来 ます ケアレスミスは 意 外 と 時 間 とエネルギーの 浪 費 につながります このように 作 りこむ 体 制 を 整 えておくことが 作 業 効 率 化 につながります また 変 数 名 とパラメータ 名 をそろえておく と わかりやすいです 2010/3/25 16

リクエストURLが 正 しく 組 み 立 てられているか 確 認 リクエストURLをechoで 表 示 させて そのリクエストURLが 正 しく 動 作 するか 確 認 します リクエストURLを 組 み 立 てた 直 後 に echo $url; として リクエストURLを 表 示 させます 表 示 されたURLをブラウザのアドレスバーに 入 れてXMLデータを 取 得 して 問 題 がないか 確 認 します また 出 力 されたデータの 構 造 を 理 解 しておき ます 空 室 検 索 (プラン 検 索 )では ホテルご とに 表 示 するのではなく プラン 単 位 で 表 示 さ れることが 特 徴 です ホテルごとに 表 示 するに はホテルIDを 指 定 する 必 要 があります 2010/3/25 17

検 索 結 果 を 表 示 させる リクエストURLが 正 しく 組 み 立 てられたら いつもと 同 じように 検 索 結 果 を 表 示 させます 取 り 出 せる 情 報 が 物 販 系 と 異 なるので どういうレイアウトで 表 示 させるか 考 えておきましょう リクエストURLの 組 み 立 てが 完 了 したら 検 索 結 果 をブラウザ 上 で 表 示 させてみましょう XMLデータの 階 層 構 造 を 確 認 しながら 以 前 の 勉 強 会 と 同 じように 情 報 を 取 り 出 して 行 きま す プラン 比 較 はこちら をクリックしたとき にプラン 比 較 ページでホテルIDを 受 け 取 れるよ うに リンクを 作 成 します ホテルID+ 日 付 + 泊 数 + 人 数 + 部 屋 数 の 情 報 をプラン 比 較 ページに 渡 す 2 時 間 目 以 降 に 実 装 します 2010/3/25 18

パラメータを 次 のページに 渡 すとは? パラメータを 複 数 のページに 引 き 継 ぐには 受 け 取 ったパラメータをリンク 先 URLにパラメータ 化 してリンクを 加 工 すれば 可 能 です 変 数 に 一 旦 格 納 しているのでそれらを 利 用 します TOP 検 索 結 果 プラン 比 較 トップページで 指 定 した 日 付 や 人 数 部 屋 数 チェックイン 日 などは いくつかのページで 引 き 継 いで 利 用 したい 場 合 があります 検 索 条 件 が 入 力 された パラメータ 今 回 は 検 索 した 結 果 ページから プラン 比 較 ページにホテルIDだけではなく かならず 有 効 な 日 付 人 数 泊 数 部 屋 数 などの 情 報 も 渡 し ていく 必 要 があります( 複 数 のAPIで 同 じ 条 件 でプラン 情 報 を 取 得 するため) パラメータで 受 け 取 ったデータを 再 度 パラ メータ 化 してリンクを 生 成 すれば 次 のページ へもパラメータの 値 を 渡 していくことが 可 能 で す 前 回 の 楽 天 ジャンルIDのAPIでパラメータで 次 のジャンルIDを 渡 した(リンクURLにした) のと 同 じことです 2010/3/25 19

金 額 表 示 などで3 桁 ごとにカンマを 入 れるには? number_format 関 数 を 使 えば3 桁 ごとにカンマを 入 れた 数 字 を 表 示 することが 出 来 ます 金 額 表 示 などに 最 適 です <?php echo number_format($ 変 数 名 );?> APIから 取 得 したデータの 場 合 はHTML 無 害 化 してから 使 用 する <?php echo number_format(h($ 変 数 名 ) );?> 文 字 列 に 加 工 をするには PHPであらかじめ 用 意 されている 関 数 が 便 利 です よく 使 いそう な 表 現 や 加 工 はPHPの 関 数 で 用 意 されているこ とが 多 いので それを 利 用 しましょう 金 額 表 示 にはnumber_format 関 数 を 利 用 し ます 従 来 通 りh()を 付 けた 上 にこの 関 数 でくく れば 動 作 します 余 談 ですが APIによっては 金 額 がカンマ 入 りの 文 字 列 とか 円 という 単 位 をつけて 返 し てくるものがあります 文 字 列 になっていると 一 見 便 利 ですが 金 額 の 数 字 を 基 準 として 並 び 替 えしたりとかの 加 工 が 難 しくなりますので その 場 合 は 数 値 に 変 換 する 必 要 があります 2010/3/25 20

タイトルや 説 明 文 の 表 示 文 字 数 を 制 限 するには? mb_substr()という 関 数 を 使 えば 文 字 列 の 一 部 分 を 取 り 出 すことができます これを 表 示 するとき に 使 用 することで タイトルや 説 明 文 の 表 示 文 字 数 を 制 限 することができます 商 品 説 明 文 を200 文 字 で 制 限 した 例 半 角 とか 改 行 で 同 じ200 文 字 でも 行 数 が 異 なってしまうことがある 最 安 値 複 数 ECサイト 横 断 検 索 light Ver.1.0 http://musilog.net/webdesign/web-service-api/oudan-new-1-0.php mb_substr 関 数 は 下 記 のように 書 きます mb_substr ( 文 字 列 変 数,0,200,"utf-8") 引 数 は 文 字 列 開 始 文 字 終 了 文 字 文 字 コードという 順 番 です 文 字 コードの 指 定 で 必 ずUTF-8と 指 定 してくだ さい 要 マルチバイト 関 数 環 境 がインストー ルされているサーバ 一 般 的 には 文 章 をカットしたときに と か 続 きを 読 む リンクを 張 るとか 続 きがあ ることを 自 然 に 見 せるようにするのが 望 ましい です クリックさせることにもつながります mb_substr: 文 字 数 を 指 定 して 文 字 列 を 取 り 出 す http://bg.pippi.com/page/g01/000107.html 2010/3/25 21

検 索 結 果 ページを 分 割 して 複 数 ページ 作 成 するには? 前 へ 次 へ リンクを 自 動 生 成 するユーザ 定 義 関 数 をapifunc.phpで 用 意 しています それを 活 用 して 実 現 しますが 原 理 についても 把 握 しておきましょう?? まず ページを 分 割 して 表 示 するための 情 報 を 整 理 します 前 の ページ 現 在 の ページ 次 の ページ 今 いる 場 所 =ページ 番 号 次 のページがあるかどうか 前 のページがあるかどうか 条 件 分 岐 の 順 番 1.ページ 番 号 が 設 定 されてない 初 期 値 としてページ 番 号 1 2.もし 現 在 のページ 数 が 1 より 大 きい つまり2 以 上 であれ ば 前 のページに 戻 るリンクを 書 く 3.もし 現 在 のページ 数 が 総 ページ 数 より 小 さいのであれば 次 のページに 進 むリンクを 書 く リンクを 書 く 際 は 検 索 パラメータを 引 き 継 ぎたいので リンク 先 URLにパラメータを 含 めておく 次 にそれらの 情 報 がAPIから 得 られるかどう かの 確 認 なければ 代 替 方 法 があるかどうかを 調 べます もし 総 ページ 数 がわかれば 今 のページ 番 号 と 比 較 して 前 後 ページがあるか 判 別 できます もし 総 検 索 結 果 数 がわかれば 総 検 索 結 果 数 1ページに 表 示 する 検 索 結 果 数 と 計 算 す れば 総 ページ 数 がわかります それらをまとめた 関 数 を 用 意 しているので それを 利 用 して 情 報 を 渡 すだけで 使 えるように なっています 2010/3/25 22

If ( ) { } else { } 構 文 If 文 を 使 うと 条 件 分 岐 が 可 能 となります 条 件 が 成 立 してたら 実 行 する 成 立 してなければ 実 行 す る など いくつかの 分 岐 流 れを 作 ることが 出 来 ます 条 件 式 :!$resultcount==0 == はイコールを 表 す! ~の 反 対 の 意 味 ~ではなかったら もし $resultcountが0と 等 しくなかった ら 条 件 式 :!isset($genzai_page) もし$genzai_pageに 何 も 代 入 されていないな らば 条 件 に 合 わせて 実 行 する 内 容 を 切 り 替 えたり 出 来 ます 例 えば 明 日 の 天 気 が 雨 だったら 傘 やレインコートなどの 商 品 を 紹 介 することも 可 能 です 左 記 の 例 はページ 遷 移 リンクを 生 成 する 場 合 の 条 件 分 岐 の 一 部 です 単 純 に 現 在 のページか らみて 次 のページがあるか 前 のページがある か それを 判 断 してリンクを 出 力 するかどうか を 条 件 分 岐 しています 条 件 式 : $genzai_page > 1 もし$genzai_pageが1よりも 大 きけれ ば 条 件 式 : $genzai_page < $totalpage もし$genzai_pageが$totalpageより 小 さけ れば 2010/3/25 23

2 時 間 目 概 要 : 他 APIと 組 み 合 わせる 他 社 のAPIと 組 み 合 わせていく 方 法 のひとつとして 空 室 プラン 情 報 を 複 数 サイトから 取 得 して 比 較 する 仕 組 みを 作 ります 検 索 条 件 の 入 力 エリア 日 時 人 数 検 索 条 件 にマッチした 施 設 表 示 ホテル 名 プラン 名 2 時 間 目 は 他 社 のAPIと 組 み 合 わせていくこと を 実 践 していきます 基 本 的 にパラメータの 書 式 やIDがJANコード のように 共 通 化 されていないので 特 定 のホテ ルをホテル 名 で 紐 づけて 検 索 するのは 確 実 性 に 欠 けると 予 想 します( 同 名 ホテルがある 表 記 ゆれがある 等 ) それらをどうやって 解 決 するのかを 考 えてい きましょう 他 APIのデータを 取 得 して 比 較?? 2010/3/25 24

マッシュアップのカタチ: 芋 づる 式 あるAPIから 取 得 して 得 られたデータをもとに さらに 別 のAPIへリクエストします 芋 づる 式 に 関 連 する 情 報 を 取 得 する 場 合 に 使 います ホテルid ホテル 名 ブログ 検 索 全 部 まとめて 表 示 APIで 得 られたデータをもとに 他 のAPIへリク エストして 関 連 した 情 報 を 取 得 して 同 じ 画 面 に 表 示 させます これは 前 回 のショッピング モールのようにジャンルIDから 子 ジャンルを 表 示 したり ジャンルランキングを 表 示 したりす ることと 同 じです 芋 づる 式 検 索 は 同 じ 会 社 のAPI 内 という 制 限 は 基 本 的 にはありません 楽 天 で 得 られた 情 報 をもとにヤフーのブログ 検 索 APIで 検 索 したり といったことができます ただし 会 社 によってAPIの 仕 様 が 違 うので 望 んでいる 結 果 が 出 るとは 限 りません 一 方 この 方 法 にはリスクがあることも 認 識 しておかなければなりません どこかのAPIが 動 作 しなくなったら ページが 表 示 できなくな るかもしれません 2010/3/25 25

マッシュアップのカタチ:クモの 巣 型 キーワードやJANコードなどをキーに 複 数 のAPIに 同 時 にリクエストURLを 組 み 立 ててリクエスト し 1ページにまとめて 表 示 する リンク シェア 楽 天 市 場 ひとつのキーワードやJANコードなどを 元 に 同 時 に 複 数 のAPIへリクエストしてデータを 取 得 します 例 えばJANコードでリクエストすれ ば 同 じ 商 品 のデータを 各 ストア ショップから 取 得 することが 出 来 ます 価 格 比 較 コンテンツ などはこうやって 作 ることが 出 来 ます ヤフー ショッピ ング Amazon どこかのAPIが 止 まっていたり 商 品 がなlく なってしまっても 他 のAPIから 商 品 情 報 を 取 得 出 来 るので 代 替 情 報 が 表 示 できる 強 み があります 全 部 まとめて 表 示 2010/3/25 26

特 定 のホテルだけのプラン 比 較 表 示 複 数 のAPIから 特 定 のホテルだけのプラン 比 較 表 示 をするには それぞれのAPIで 使 われているホテ ルIDを 使 って 表 示 させるのが 一 番 無 難 そうです 今 回 は 楽 天 を 加 えてじゃらんと2 社 でのプラ ン 比 較 を 行 ってみます プラン 比 較 の 方 法 は 単 純 ではありません そ れは 各 APIで 仕 様 パラメータが 違 うだけでな く 入 力 したり 出 力 される 書 式 も 異 なります 基 本 的 に 出 来 ないのですが 出 来 る 方 法 を 考 え ていきましょう ごちゃまぜにして 安 い 順 でソート ひとつの 案 として プラン 一 覧 を 表 示 する 際 にそのURLにじゃらんと 楽 天 のホテルIDを 交 え ておくことです すると$_GETで 受 け 取 ること ができるので それぞれのAPIへホテルを 確 実 に 指 定 してデータを 取 得 することが 出 来 ます じゃらん 宿 No. 361440 楽 天 トラベルホテルID 7796 特 定 のホテルと 固 定 して 比 較 表 示 させるブロ グパーツを 作 る 場 合 はこの 方 法 を 使 ったほうが 確 実 で 間 違 いがありません 特 定 のホテル( 例 : 伊 東 山 喜 旅 館 ) 動 作 サンプル(サンプルファイルに 収 録 ): http://musilog.net/travel_plan_oudan/ 2010/3/25 27

宿 泊 プラン 比 較 サイトを 自 動 化 できないか? 前 の 方 法 では 手 作 業 でパラメータを 調 べてリンクを 作 るか データベースにそれぞれのAPI のホテルIDを 登 録 して 呼 び 出 すしかなさそうです しかし 無 理 矢 理 PHPとAPIで 作 ってみましょう 考 え 方 としては 異 なるAPIで 紐 づけるには 共 通 項 を 見 つけて 芋 づる 式 検 索 ができるとよさ そうです しかし うまくいかないもので ホ テル 名 キーワード 検 索 だと 同 じ 旅 館 がひっかか る 可 能 性 があります 住 所 や 電 話 番 号 でひっか けても 表 記 ゆれの 可 能 性 もあり 確 実 ではありま せん ブラックボックス ( 電 話 番 号 の 表 記 ゆれ 電 話 番 号 が 別 番 号 の 可 能 性 ) 1.キーワード 検 索 検 索 結 果 から 郵 便 番 号 が 一 致 するものを 拾 う 2.キーワード 検 索 検 索 結 果 から 電 話 番 号 が 一 致 するものを 拾 う ただしこの 方 法 では 精 度 はあまり 高 くないので なんらかの 方 法 が 必 要 です 2010/3/25 28

アフィリエイトリンクにするには? アフィリエイトASPではないところが 提 供 するAPIにはアフィリエイトリンクを 生 成 する 機 能 がない ことがほとんどです ここではアフィリエイトリンクの 組 み 立 て 方 を 説 明 します じゃらん+リンクシェアの 場 合 あとで 書 く リンクジェネレーター:BentoBox(TM) http://www.bentobox.jp/lsapi/linkgenerator/ URLエンコード 不 要 じゃらん+バリューコマースの 場 合 出 所 :リクルートWebサービスを 活 かした バリューコマース 対 応 サイトを 作 ろう http://rss.rmix.jp/ajax/vcwithrws200910 09-3-091009091338-phpapp01.pdf p.49~p.51 URLエンコード 必 要 楽 天 トラベルの 場 合 リクエストURLにアフィリエイトIDを 指 定 して アフィリエイトリンクを 取 り 出 す 2010/3/25 29

3 時 間 目 : 課 題 選 択 3 時 間 目 は 各 自 がチャレンジしたい 課 題 をワークする 時 間 です ブログパーツ WordPressプラグ イン QRコード 生 成 のいずれかを 選 択 し 1 時 間 の 間 で 作 り 終 えて 発 表 してください 1ブログパーツ 激 辛 辛 口 3 時 間 目 は 課 題 を 選 択 して 実 際 に 作 ってみて ください わからなければ 周 りの 人 に 聞 いてみ たりしましょう 基 本 的 にはプラン 検 索 の 表 示 をブログパーツ 化 してみたり WordPressプラグインにしてみ ましょう 2WordPressプラグイン プラン 検 索 で 楽 天 トラベルで 携 帯 用 URL を 取 得 し それをQRコードにしてみましょう 甘 口 3QRコード 自 動 生 成 2010/3/25 30

ブログパーツ 化 を 始 める 前 に ブログパーツにする 方 法 はいくつかありますが 今 回 はJavascriptで 読 み 込 むタイプのものをPHP で 作 ることにします 参 考 サイト: ブログパーツの 作 り 方 How to make blog parts CREAMU http://blog.creamu.com/mt/2008/08/how_t o_make_blog_parts.html PHP:JS(JavaScript)からPHPを 呼 び 出 し HTML 上 に 出 力 する 方 法 http://www.ressystem.com/weblog/item/383 YAHOO!ショッピングカテゴリー 別 ランキングブ ログパーツ [Mu]ムジログ http://musilog.net/webdesign/web-serviceapi/yahoo%e3%82%b7%e3%83%a7%e3 %83%83%E3%83%94%E3%83%B3%E3 %82%B0%E3%82%AB%E3%83%86%E3 %82%B4%E3%83%AA%E3%83%BC%E5 %88%A5%E3%83%A9%E3%83%B3%E3 %82%AD%E3%83%B3%E3%82%B0%E3 %83%96%E3%83%AD%E3%82%B0%E3 %83%91.php サンプルコード!? 多 くのブログサービスASPでは PHPが 実 行 で きません JavascriptでAPIへリクエストする 方 法 がありますが ここでまたゼロから 勉 強 しなおすの も 大 変 です 今 まで 勉 強 してきた 流 れをそのまま 活 用 するため にも あえて PHPでJavascript 呼 び 出 しのブロ グパーツを 作 ることにします Javascriptは 次 回 のGoogle Maps APIでメイ ンに 使 う 言 語 ですので 少 しだけ 勉 強 しておきま しょう 基 本 的 に 半 角 英 数 字 記 号 文 字 コードUTF-8 開 業 コードはLFとPHPと 同 じ 環 境 にしておきましょ う コメントの 書 き 方 はおなじです 2010/3/25 31

Javascriptで 文 字 を 表 示 するには Javascriptでブラウザ 上 に 文 字 を 表 示 するにはdocument.writeを 使 います 逆 にこれさえわかっ ていれば PHPを 使 ってJavascript 経 由 でなんでも 表 示 できてしまいます 1 文 字 出 力 を 始 める 手 続 きをする document.open(); scriptタグの 確 認 jsファイルの 作 成 document.write 関 数 を 使 って 文 字 列 を 出 力 します HTMLタグを 出 力 することも 出 来 ます 2 文 字 列 HTMLタグを 出 力 する document.write( もじもじ ); 3 文 字 出 力 を 終 える 手 続 きをする document.close(); PHPで 変 数 に 出 力 内 容 を 格 納 し それを javascript 中 で 表 示 させる (..)φメモメモ:エスケープするのが 吉 2010/3/25 32

PHPでJavascriptを 生 成 するには Javascriptで 呼 び 出 すときはそのままphpファイルを 指 定 すれば 良 いのですが PHP 側 で この ファイルはJavascript と 認 識 させる 必 要 があります JavascriptをPHPの echo で 出 力 させる まず 1PHPで 出 力 する 際 Javascriptと 認 識 させ るために // javascriptで 出 力 するときのためのヘッダー header("content-type: application/xjavascript"); と 記 述 する 2echoでjavascriptを 表 示 させる echo 'document.write( '<ol type="1"> ');'; 2010/3/25 33

Javascriptでパラメータを 渡 して 表 示 してみよう 呼 び 出 すphpのURLにパラメータを 付 ければ PHPファイル 側 で$_GETでパラメータの 値 を 受 け 取 ることができます 2010/3/25 34

WordPressプラグイン 化 の 前 に WordPressのショートコードAPIを 使 ってプラン 比 較 をプラグインで 作 ってみましょう 30 分 もあ ればカンタンなプラグインを 自 作 できます 1ショートコードAPIとは 何 かを 理 解 する 2プラグインのひな 型 をもとに 過 去 に 作 ったPHPコードを 流 し 込 む 3プラグインとして 動 かすための 微 修 正 を 行 う ブログエントリ 内 で 動 的 なコンテン ツを 出 力 できる(javascript 化 する よりもコードの 見 た 目 はシンプルな ので 作 りやすい) WordPressのプラグインは 現 状 のPHP 知 識 +アルファで 作 れます WordPressのショート コードAPIを 使 えば ブログエントリ 内 でAPIへ アクセスするプログラムが 動 かせます 自 作 プラグインを 使 えば 真 似 されにくいブ ログエントリを 作 ったり リンク 切 れを 防 ぐ 商 品 紹 介 を 作 ったりなど 可 能 性 が 広 がります プラグインを 作 る 際 に 最 低 限 必 要 なことはプ ラグイン 情 報 ( 名 前 とか 作 者 名 )を 決 められた フォーマットで 書 くことと ショートコードを 定 義 したり 呼 び 出 したりする 関 数 を 書 くことぐ らいです キャッシュはWP Super Cacheなど 他 のプ ラグインに 任 せてしまいましょう 携 帯 とPCを 判 別 して 表 示 内 容 やリンク 先 を 変 えることも 可 能 です 2010/3/25 35

プラグイン 作 成 の 手 順 意 外 と 今 までのPHPやAPIへアクセスする 知 識 だけでも プラグインにしてしまうことができます プラグインにすればブログ 文 中 にAPIを 使 ったプログラムを 自 由 自 在 に 呼 び 出 すことが 出 来 ます 今 までやってきたこと フォームのパ ラメータ echoで 出 力 プラグイン ショートコード のパラメータ 変 数 に 格 納 し てreturnする 今 までのPHPプログラムとの 違 いはこれだけ まずプラグインのテンプレートとなるファイ ルをコピーして 人 気 のファイル 名 フォルダ 名 でセットを 作 成 します その 次 にapiconfig.phpやapifunc.phpをそ のフォルダに 入 れます 勉 強 会 でいつもやって いるようにそれらのファイルを 読 み 込 む 記 述 を 上 のほうに 書 いておきます プラグイン 名 やショートコード 名 を 決 めます 作 者 情 報 などプラグインのテンプレートに 雛 型 があるのでそこに 書 き 込 んでいきます 所 定 の 書 式 でコメントを 書 くだけでプランインとして 認 識 する あとはショートコード 名 を 定 義 して ショー トコードから 呼 び 出 される 関 数 を 書 きます 出 力 する 情 報 はechoではなくすべて 変 数 に 格 納 してreturnでショートコードに 返 します す るとショートコードを 入 れた 位 置 でプラグイン からの 文 字 列 が 出 力 されます 2010/3/25 36

QRコード 自 動 生 成 モバイル 用 のURLがAPIから 取 得 出 来 るのであれば それを 利 用 してGoogle Chart APIにリクエス トすれば QRコードを 取 得 できます Google Chart APIを 使 えば imgタグだけ でQRコードを 生 成 することが 出 来 ます もとも とはグラフなどを 表 示 する 画 像 生 成 APIです Google Chart Tools http://code.google.com/intl/ja/apis/charttools/ 参 考 :[N] Google Chart API でQRコードを 生 成 http://netafull.net/lifehack/026508.html http://chart.apis.google.c om/chart?chs=150x150&ch t=qr&chl=http%3a//musilo g.net/ 例 えば モバイルで 予 約 や 申 し 込 みが 出 来 る サイトに 誘 導 したり 自 分 が 持 っていると 携 帯 サイトで 同 じホテルのページを 表 示 するために パラメータを 作 ってそのURLのQRコードを 生 成 するなどが 考 えられます 特 にトラベル 系 だとホテル 情 報 を 携 帯 に 入 れ ておきたいというニーズがありそうなので 自 分 のサイトのモバイル 版 の 特 定 の 宿 情 報 ページ をブックマークさせるとマネタイズにつながり そうです APIを 使 えば2 万 件 分 のQRコードを 自 動 生 成 で きてしまうという 考 え 方 も 出 来 ます 2010/3/25 37

PHPでやることはパラメータにURLを 出 力 するだけ 使 い 方 は 登 録 不 要 &APIキー 不 要 下 記 URLをimgタグで 呼 び 出 すだけでQRコード 画 像 を 表 示 する ことができます http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=url 1 画 像 サイズを 指 定 する パラメータ:chs 書 式 :150x150(150pixel 150pixel ) 2QRコードという 形 式 をリクエストする パラメータ:cht 書 式 :qr 3QRコードで 表 示 させたい 文 字 列 (ここでは URL)を 出 力 させます パラメータ:chl 書 式 : 半 角 英 数 字 の 場 合 はそのまま 日 本 語 文 字 列 を 入 れる 際 は 文 字 コードの 変 更 とURLエン コードが 必 要 呼 び 出 したいサイズや 画 像 の 種 類 (QRコー ド) またその 文 字 列 をパラメータとして 指 定 するだけです トラベル 系 APIで 旅 館 情 報 や 予 約 ページの URLが 取 得 出 来 るのでそれを 取 得 して QR コードを 自 動 生 成 することが 出 来 ます ただし QRコードに 日 本 語 文 字 や 半 角 英 数 字 以 外 を 使 う 場 合 は 文 字 コードの 変 換 やURLエン コードが 必 要 となります 余 談 ですがaltタグを 宿 名 にしておいたほうが 良 いです(altタグに QRコード としてしまう 方 が 多 いですが 望 ましくありません) 2010/3/25 38