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