株式会社コミュニティコム 〒116-0013 東京都荒川区西日暮里5-37-5 NSO2階 星野 邦敏
WordPressと外部WebAPIを連携して、
オリジナルのWebサービスを作ろう！
2 ０． 自己紹介 １． WordPressとWebAPIで出来ること ２． WordPressとWebAPIの実装の流れ
WordVolcano 2012
目次
３． 質疑応答スライドは後日に公開します！
株式会社コミュニティコム
http://www.communitycom.jp/
PDFファイルにて、公開します。
WordVolcano 2012
始めに
4
昨日の飲み会で
名刺ケース、無くしました ＞＜
・・・でも、
ぜひご挨拶させてください！
WordVolcano 2012
始めに
０． 自己紹介 １． WordPressとWebAPIで出来ること ２． WordPressとWebAPIの実装の流れ
WordVolcano 2012
目次
３． 質疑応答6 株式会社コミュニティコムという会社で、 自社運営サイトやアプリ、他企業様向けサイトも作っています。 オープンソースの活動をしたり、IT系の勉強会を主催したり、 地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。 星野 邦敏(ほしの くにとし) Twitter ： @khoshino
Facebook : 星野邦敏（Kunitoshi Hoshino）
WordVolcano 2012
WordPressのイベントである
「WordCamp」や「WordBench」に スタッフやスピーカーとして参加。
WordVolcano 2012
8
WordPress日本語サイトの「イベントカレンダー」を更新する係。
ココ
WordVolcano 2012
公式ディレクトリにプラグインを登録したり。 Japan Tenkiプラグイン →全国142地域の天気を自動表示 Hello Wapuuプラグイン →ブログ更新を応援
WordVolcano 2012
自己紹介
10 WordPressに関して、書籍や雑誌で執筆をしたり。 2012年1月に出版 web creators特別号 Webサイト制作 最新トレンドの傾向と対策 2012年3月に出版 速習デザインWordPress 2012年2月に出版 Web Designing 2012年3月号
WordVolcano 2012
自己紹介
「速習デザインWordPress」 （技術評論社）にて、 サンプルテーマとして 配布されます。
2012年3月出版
WordVolcano 2012
自己紹介
12 ０． 自己紹介 １． WordPressとWebAPIで出来ること ２． WordPressとWebAPIの実装の流れ
WordVolcano 2012
目次
３． 質疑応答突然ですが
WordPressを
何に使っていますか？
WordVolcano 2012
14
ブログですか？
WordVolcano 2012
企業サイトですか？
WordVolcano 2012
16
もっと面白い
使い方を
してみませんか？
WordVolcano 2012
WordPressとWebAPIで出来ること外部の提供データ
「WebAPI」と、
「WordPress」を、
連携してみませんか？
WordVolcano 2012
WordPressとWebAPIで出来ること18
WebAPI？
WordVolcano 2012
Application Programming Interface
API（アプリケーション・プログラミング・インタフェース、Application Programming Interface）とは、 アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意された ライブラリなどの機能の入り口と なるものである。主に、ファイル制御、ウインドウ制御、画像処理、 文字制御などのための関数として提供されることが多い。 つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を 省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事である。 （Wikipediaより）
APIとは？
WordVolcano 2012
WordPressとWebAPIで出来ること20 要は、
そのWEBサービスにあるデータを、
自由に使えると言うこと。
APIとは？
WordVolcano 2012
WordPressとWebAPIで出来ること＜WEB制作者のメリット＞ 他社の膨大なデータベースや機能を、無料で利用できるため、 Webサイトの開発コストを大幅に削減でき、効率的に制作できる。 ＜API提供会社のメリット＞ 自社のみでは考え付かないようなWEBサービス等を、 外部の誰かが作ってくれるため、結果として、自社サービスの 利用者が増えることが期待できる。
Web APIのメリット
WordVolcano 2012
WordPressとWebAPIで出来ること22
サンプルサイト
水族館コミュニティhttp://www.japan-aquarium.com/
WordVolcano 2012
各地域の天気予報を 自動で取得する。
WordPressに天気情報を自動で取得
WordVolcano 2012
24
WordPressの各記事の位置情報を地図に表示
各記事の水族館の位置を
Google Maps APIと連携して
自動で地図に一覧表示させる。 ＆
近いスポットはピンをまとめる。
WordVolcano 2012
WordPressに周辺の写真を自動で表示
そのスポットの周辺の
写真を自動で表示させる。
WordVolcano 2012
26
WordPressに画像を自動で表示
各記事に関連する画像を 自動表示する。WordVolcano 2012
WordPressとWebAPIで出来ることその水族館について、 Twitterの最新つぶやきを 自動表示させる。
WordPressに
Twitter情報を自動で表示
WordVolcano 2012
WordPressとWebAPIで出来ること28
WordPressにカフェ情報を自動で表示
そのスポットから ２点間の直線距離の 近い順番に、 カフェやレストランを、 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。WordVolcano 2012
WordPressとWebAPIで出来ることWordPressにホテル情報を自動で表示
そのスポットから ２点間の直線距離の 近い順番に、 ホテルを、 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていてWordVolcano 2012
WordPressとWebAPIで出来ること30
WordPressに商品情報を一覧表示
記事に関連する商品を 自動で一覧表示する。 この部分は、自動で アフィリエイトリンクに なっていて 成果の収益に繋がる。WordVolcano 2012
WordPressとWebAPIで出来ること×
キーワードは、「カスタムフィールド」
「Web API」
WordVolcano 2012
WordPressとWebAPIで出来ること32
カスタムフィールド？
WordVolcano 2012
カスタムフィールドを 使ってみましょう！ カスタムフィールドは WordPressに 元々備わっている 機能です。
カスタムフィールド
WordVolcano 2012
WordPressとWebAPIで出来ること34 例： <?php echo get_post_meta($post->ID,'address',true); ?> カスタムフィールドに 入力したデータを 表示しています。 カスタムフィールドを出力する WordPressのテンプレートタグ
カスタムフィールド
WordVolcano 2012
WordPressとWebAPIで出来ること<?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = "http://search.yahooapis.jp/ImageSearchService/V2/imageSearch?appid=<アプリ ケーションID>&query=" . $custom1 ; $yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api); foreach($yahoo_gazou_api_xml->Result as $gazou_output) {
テーマに４行の
プログラムを追加
して実現！
カスタムフィールド
WordVolcano 2012
WordPressとWebAPIで出来ること36 WordPressを 使えば、 ページごとに 自由に キーワードを 変えられる ようにできる。 WordPress以外のAPIサンプルコードを WordPressに組み込むこともできます
WordVolcano 2012
WordPressとWebAPIで出来ることWordPress以外のAPIサンプルコードを WordPressに組み込むこともできます
WordVolcano 2012
38 ０． 自己紹介 １． WordPressとWebAPIで出来ること ２． WordPressとWebAPIの実装の流れ
WordVolcano 2012
目次
３． 質疑応答Yahoo!ロコから
地域情報を持ってきて、
自分のサイトに
載せてみましょう！
WordVolcano 2012
WordPressとWebAPIの実装の流れ40 Yahooの「YOLP」のWebAPI Yahoo!ロコ （http://loco.yahoo.co.jp/） の情報を自動で取得することができる。 施設情報を取得できたりなど。 Google Mapのような地図情報を 利用できる。
WordVolcano 2012
WordPressとWebAPIの実装の流れYahoo!ロコ 情報を自分のサイトに
自動表示させることができます。
WordVolcano 2012
42
Yahoo!デベロッパーネットワーク
http://developer.yahoo.co.jp/
WordVolcano 2012
Yahoo!JAPANは、 たくさんのWebAPIを 公開しています。 http://developer.yahoo. co.jp/sitemap/
WordVolcano 2012
WordPressとWebAPIの実装の流れ44 震災関係の情報のWebAPI 震災に関係する電力や 写真についての情報を 取得することもできます。
WordVolcano 2012
WordPressとWebAPIの実装の流れYahooの検索関係のWebAPI 通常のYahoo検索における ウェブや画像や動画の情報を 取得することができます。
WordVolcano 2012
WordPressとWebAPIの実装の流れ46
Yahooのテキスト解析のWebAPI
プラグイン
「WordPress Related Post for Japanese」
Yahoo!の日本語形態素解析を利用して、
関連する自分の記事を表示。
WordVolcano 2012
ラーメン記事には ラーメンの記事 が！ サイト内での ユーザーの移動が 高まる。
WordVolcano 2012
WordPressとWebAPIの実装の流れ48 Yahoo!ショッピング＆Yahoo!オークションのWebAPI バリューコマースの アフィリエイトと 連携すると、 ショッピング・報酬率２％ オークション・報酬率１％ クッキー有効期間６０日
WordVolcano 2012
WordPressとWebAPIの実装の流れサンプルサイト
訳あり商品オークション通 http://wakeari.auction2.jp/ Yahoo!オークションで 「訳あり」な商品だけを 表示するサイト。WordVolcano 2012
WordPressとWebAPIの実装の流れ50 その他にも、たくさんのYahoo!のWebAPI ニュースを表示 知恵袋のQ&Aを表示 Yahoo!カテゴリ 登録サイトを表示 Yahoo!みんなの検定 http://minna.cert.yahoo.co.jp/ を表示
WordVolcano 2012
WordPressとWebAPIの実装の流れ手順は１０個
・・・で、どうやるの？
WordVolcano 2012
52 （例） Yahoo!デベロッパーネットワーク YOLP（地図） - ローカルサーチ http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html
（手順１）Web APIの仕様を確認する
WordVolcano 2012
WordPressとWebAPIの実装の流れ（手順２）IDやKeyが必要なら取得
ココ
WordVolcano 2012
54
（手順３）パラメーターを確認
リクエストパラメーターを 確認する。 「パラメーター」 →制約やソートの条件を 指定する。WordVolcano 2012
WordPressとWebAPIの実装の流れ（手順４）XMLを生成
Yahoo!ローカルサーチの場合、 http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?appid= がベース。 その上で、パラメーターを付ける。 （例） http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?appid= [アプリケーションID] &query=[キーワード]&parking=true&results=5パラメーターに基づいてXMLを生成する。
WordVolcano 2012
WordPressとWebAPIの実装の流れ56
（手順５）一応、XMLを確認
（例） http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?appid=[自分のID]&[指定したパラメーター]WordVolcano 2012
WordPressとWebAPIの実装の流れ（手順６）simplexml_load_fileで
分析（パース）
（例） $yahooapi = （手順４のXML） ; $xml = simplexml_load_file ($yahooapi);WordVolcano 2012
WordPressとWebAPIの実装の流れ58
（手順７）レスポンスフィールドを確認
レスポンスフィールド （XMLデータ項目説明） を確認する。 「レスポンスフィールド」 →出力データを 指定する。WordVolcano 2012
WordPressとWebAPIの実装の流れ（手順８）出力＆表示する
（例１）echoで単発で出力 echo $xml->item->linkurl; （例２）foreach文で条件の回数だけループ処理（繰り返し処理）を 行う foreach($yahoo_localsearch_api_xml->Feature as $localsearch_output) { echo '<strong>店名：</strong><strong>'; echo $localsearch_output->Name; echo '</strong>（'; echo $localsearch_output->Property->Yomi; echo '）'; echo '<br /><strong>住所：</strong>'; echo $localsearch_output->Property->Address; echo '<br /><strong>電話番号：</strong>'; echo $localsearch_output->Property->Tel1;WordVolcano 2012
WordPressとWebAPIの実装の流れ60
（手順９）変更したい点だけをカスタムフィールド
post_custom('名前')
カスタムフィールドで設定する名前。
それに合わせて、値を設定。
WordVolcano 2012
WordPressとWebAPIの実装の流れ大きな流れとしては、 （１） リクエストパラメーターで 条件を設定して、 （２） レスポンスフィールドで 出力項目を決める。
（手順１０）以上をテーマに書いた上で記事投稿
完成！
WordVolcano 2012
WordPressとWebAPIの実装の流れ62
WordPressと
WebAPIを組み合わせて、
オリジナルサイトを
作ってみよう！
WordPress わぷーさんWordVolcano 2012
WordPressとWebAPIの実装の流れ続きは、懇親会でも！
WordVolcano 2012
64
