WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！
株式会社コミュニティコム
星野 邦敏〒116-0013
東京都荒川区西日暮里5-37-5 NSO2階
URL： http://www.communitycom.jp/
E-MAIL： mail@communitycom.jp
1

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

星野 邦敏(ほしの くにとし)
Twitter ： @khoshino
Facebook : 星野邦敏（Kunitoshi Hoshino）
WordPressに関わっている３２歳。
昨年のWordCamp名古屋では、「WordPressファーストステップ」という４５分のセッションのスピーカー。
今年のWordBeach名古屋では、初心者向けセッションの総合司会。
2

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPress日本語サイトの「イベントカレンダー」を更新する係。
もし掲載されていないWP関係のイベントや勉強会があれば、Twitter経由などで、お知らせください！

ココ3

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

突然ですが、WordPressを何に使いますか？

4

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

ブログですか？

5

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

企業サイトですか？

6

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

もっと面白い使い方をしてみませんか？

7

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

外部の提供データ「WEBAPI」と、「WordPress」を、連携してみませんか？
8

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WEBAPI？

9WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WEBAPIとは？
Application Programming Interfaceの略。
要は、外部のWEBサービスにあるデータを、自由に使えると言うこと。

10

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

何ができるの？

11

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressの各記事の地図情報を一覧表示

各記事の地図情報をGoogle Maps APIと連携して１ページに一覧表示させる。

12

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressに画像を自動で表示

特定のキーワードを入力すると、自動で画像を表示する。

13

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressにTwitter情報を自動で表示

特定のキーワードを入力すると、Twitterの最新つぶやき１５件を、自動表示する。

14

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressにカフェ情報を自動で表示
そのスポットから近い順番にカフェやレストランを、自動的に、一覧表示する。
この部分は、自動でアフィリエイトリンクになって成果に繋がる。
15

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressにホテル情報を自動で表示
そのスポットから近い順番にホテルを、自動的に、一覧表示する。
この部分は、自動でアフィリエイトリンクになって成果に繋がる。
16

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressに商品情報を一覧表示

特定のキーワードに関連する商品を、人気順や価格順に、自動表示させる。
この部分もアフィリエイトリンク
17になって成果に繋がる。

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressに周辺の写真を自動で表示

そのスポットから近い写真を、自動的に一覧表示。

18

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

WordPressに天気情報を自動で表示

天気を、自動的に表示。

19

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

キーワードは、「カスタムフィールド」「WEBAPI」

×20

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

カスタムフィールド？

21

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

「カスタムフィールド」
WordPressに元々備わっている機能

カスタムフィールドを使いましょう！

22

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

「カスタムフィールド」
WordPressに元々備わっている機能
カスタムフィールドを出力する
WordPressのテンプレートタグ例：<?php echo get_post_meta($post->ID,'address',true); ?>カスタムフィールドに入力した住所を表示しています。
23

WordBeach名古屋
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) {echo '<img src="' . $gazou_output->Url . '" alt="" />'; }?>24

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

まとめ
WordPressをプラットフォームとして、外部サイトが提供しているWEBAPIを組み合わせることで、より楽しいサイトやブログにすることができます。

25

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

続きは、懇親会やPILLOWFIGHTでも！

26

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

スライドは既に公開済み！

スライドは既に公開済みです！
WordPress（ワードプレス）コミュニティ
http://wp3.jp/2011/08/27/wordbeach-nagoya/
PDFファイルにて、公開しています。
27

WordBeach名古屋
WordPressとWEBAPIを連携させてみよう！

今後のお問い合わせなど何かありましたら、Twitter： @khoshino
Mail： mail@communitycom.jp
URL： http://www.communitycom.jp/
http://wp3.jp/などに、ご連絡ください。
ありがとうございました！
株式会社コミュニティコム 星野 邦敏
28