1.
WordPressで提 するWeb API
提供
鳥山優子

2.
プロフィール 2 /25
• 株式会社ベクター
企画・デザイン部
• WordPress歴 4年
• 公式テーマ 配布
• WP-Furigana
ふりがなを自動入力するプラグイン
いままでに食べたお菓子
•いままでに食べたお菓子

3.
アジェンダ 3 /25
1. Web APIとは
2. 投稿データを取得
3. XMLを生成
4. 検索パラメータに対応
5. JSONで出力
6. まとめ

4.
4 /25
1. Web APIとは

5.
1. Web APIとは 5 /25
Web APIの例
Facebook API Google Maps API Twitter API
Yahoo! デベロッパーネットワーク 楽天ウェブサービス 顔ラボ WebAPI

6.
1. Web APIとは 6 /25
お菓子の虜 Web API
http://www.sysbird.jp/toriko/webapi/

7.
7 /25
2. 投稿データを取得

8.
2. 投稿データを取得 8 /25
投稿データ
＊タイトル お菓子の名前
＊本文 食べた感想
＊カテゴリ スナック, チョコ, クッキー, 飴, せんべい
,
＊タグ 激辛, カレー ポテトチップ, 地域限定など
カレー,
＊カスタムフィールド 価格, メーカ, ふりがな
＊添付ファイル お菓子の写真
＊更新日

9.
2. 投稿データを取得 9 /25
WordPressから投稿データを取得
リクエストURL
リクエストURL(例)
http://example.com/api/
自分のサイト 他のサイト
WordPress
投 wp-
/wp-admin
稿
デ wp-
/wp-content
ー wp-
/wp-includes
タ 他のサイト
取 ・・・(
・・・(略)
得
/api

10.
2. 投稿データを取得 10 /25
/api/index.php
<?PHP
require_once(dirname(__FILE__) .'/../wp
(__FILE__) .'/../wp-load.php');
// WordPressのループ処理
のループ処理
$myposts = get_posts();
foreach($myposts as $post){
setup_postdata($post); // 1件の投稿
($post);
}
?>

11.
11 /25
3. XMLを生成

12.
3. XMLを生成 12 /25
投稿データをもとにDOM構造を作る
// DOMを作成
$dom = new DomDocument
DomDocument('1.0', 'utf-8');
$dom->formatOutput = true;
$xml = $dom->appendChild
appendChild(
$dom->createElement
createElement('okashinotoriko'));

13.
3. XMLを生成 13 /25
投稿データを子要素として追加
// WordPressのループ処理
$myposts = get_posts();
foreach($myposts as $post){
setup_postdata($post); // 1件の投稿
件の投稿
// itemという子要素を作成
$item = $xml->appendChild($dom
dom->createElement('item'));
// itemのなかに投稿IDを追加 を追加
$item->appendChild($dom->createElement
createElement('id', $post->ID));
// 続けて、提供したい項目を追加する
}

14.
3. XMLを生成 14 /25
提供したい項目の例
// タイトル
$item->appendChild($dom->createElement
createElement('name', get_the_title()));
//カスタムフィールド
$price = get_post_meta($post->ID , "
>ID "価格", true);
$item->appendChild($dom->createElement
createElement('price', $price));
// パーマリンク
$item->appendChild($dom->createElement
createElement('url', get_permalink()));
// 本文
$item->appendChild($dom->createElement
createElement(
‘comment', apply_filters('the_content get_the_content())));
the_content',

15.
3. XMLを生成 15 /25
// アイキャッチ
$thumbnail = '';
if ((function_exists('has_post_thumbnail &&
has_post_thumbnail'))
(has_post_thumbnail($result->postnumber {
postnumber)))
$thumbnail = get_the_post_thumbnail
get_the_post_thumbnail($post->ID, 'large');
if(!empty($thumbnail)){
if(preg_match_all('//i', $thumbnail, $match)){
',
$thumbnail = $match[2][0];
$item->appendChild(
createElement('image', $thumbnail));
$dom->createElement
}
}
}

16.
3. XMLを生成 16 /25
作成したDOMよりXMLを出力
// XML出力
header('Content-Type: text/
Type: text/xml;charset=UTF-8');
echo $dom->saveXML();

17.
3. XMLを生成 17 /25
レスポンス
<?xml version="1.0" encoding="utf-8"?>
<okashinotoriko>
<item>
<id>7804</id>
<name>キャラメルコーンあずきミルク味with水木しげる</name> </name>
<price>79</price>
<url>http://example.com/snack/caramelcornazuki/</url>
content/uploads/2012/12/7804.jpg</image>
<image>http://example.com/wp-content/uploads/2012/12/7804.jpg</image>
<comment><p>半年も前に買ってあったのを食べた。自宅で昼食のあとに甘いものが食べたく
半年も前に買ってあったのを食べた。自宅で昼食のあとに甘いものが食べたく(略)</p></comment>
</item>
<item>
<id>8100</id>
฀
<name>チロル(ロイヤルクイーン)</name>
<price>32</price>
>http://example.com/chocolate/tirolroyalstrawberry/</url>
<url>http://example.com/chocolate/tirolroyalstrawberry/</url>
<image>http://example.com/wp-content/uploads/2012/12/8100.jpg</image>
content/uploads/2012/12/8100.jpg</image>
<comment><p>ロイヤルクイーンとはイチゴの新種だろうか？ブラックの包み紙にみずみずしい赤
ロイヤルクイーンとはイチゴの新種だろうか？ブラックの包み紙にみずみずしい赤(略)</p></comment>
</item>
<item>
<id>8092</id>
<name>ポテトチップスミルクキャラメル</name>
>http://example.com/snack/potatochipsmilkcaramel/</url>
<url>http://example.com/snack/potatochipsmilkcaramel/</url>
<image>http://example.com/wp34/wp-content/uploads/2012/12//8092.jpg</image>
content/uploads/2012/12//8092.jpg</image>
<comment><p>ぎざぎざカットの厚いポテチにあま～いキャラメル味。塩味なのかキャラメル味なの キャラメル味。塩味なのかキャラメル味なの(略)</p></comment>
</item>
</okashinotoriko>

18.
18 /25
4. 検索パラメータに対応

19.
4.検索パラメータに対応 19 /25
“hello”というキーワードで、
30件を取得したい場合
http://example.com/api/?keyword=hello&max=30

20.
4.検索パラメータに対応 20 /25
パラメータを取得
URLパラメータを取得
$param = array();
if(isset($_GET['max'])) {
// 取得件数が指定されている場合
$param['showposts'] = $_GET['max'];
']
}
if(isset($_GET['keyword'])) {
// 検索キーワードが指定されている場合
$param[‘s’] = mb_convert_encoding
mb_convert_encoding($_GET[‘keyword’],'UTF-8','auto');
}

21.
3.検索パラメータに対応 21 /25
ループ条件を設定する
$myposts = get_posts($param
param);
foreach($myposts as $post){
setup_postdata($post); // 1件の投稿
($post);
}
＊カテゴリ
＊年月
＊開始位置
＊取得順など…

22.
22 /25
5. JSONで出力

23.
5. JSONで出力 23 /25
PHPの関数で変換するだけ
// JSON出力
$xml_obj = simplexml_load_string
simplexml_load_string(
$dom->saveXML());
$encode = json_encode($xml_obj
xml_obj);
header(
"Content-Type: text/javascript charset=utf-8");
javascript;
echo "callback(" .$encode .")“;

24.
5. JSONで出力 24 /25
レスポンス
callback({"item":[{"id":"7804","name":"¥u30ad¥u30e3¥u30e9
u30e9¥u30e1¥u30eb¥u30b3¥u30fc¥u30f3¥u3042¥u305a¥u304d¥u
30df¥u30eb¥u30af¥u5473with¥u6c34¥u6728¥u3057¥u3052¥u308b","price":"79","url":"http:
u308b","price":"79","url":"http:¥/¥/example.com¥/snack¥/
caramelcornazuki¥/","image":"http:¥/¥/example.com¥/wp-
content¥/uploads¥/2012¥/12¥/7804.jpg","comment":{"p":"¥ ¥u534a¥u5e74¥u3082¥u524d¥u306b¥u8cb7¥u3063¥u3066¥u
3042¥u3063¥u305f¥u306e¥u3092¥u98df¥u3079¥u305f¥u3002 u3002¥u81ea¥u5b85¥u3067¥u663c¥u98df¥u306e¥u3042¥u3068¥
u306b¥u7518¥u3044¥u3082¥u306e¥u304c¥u98df¥u3079¥u305f u305f¥u304f(¥u7565)"}},{"id":"8100","name":"¥u30c1¥u30ed¥u
30eb(¥u30ed¥u30a4¥u30e4¥u30eb¥u30af¥u30a4¥u30fc¥u30f3)","price":"32","url":"http:
u30f3)","price":"32","url":"http:¥/¥/example.com¥/chocolate¥
/tirolroyalstrawberry¥/","image":"http:¥/¥/example.com¥/wpwp-
content¥/uploads¥/2012¥/12¥/8100.jpg","comment":{"p":"¥ ¥u30ed¥u30a4¥u30e4¥u30eb¥u30af¥u30a4¥u30fc¥u30f3¥u3
068¥u306f¥u30a4¥u30c1¥u30b4¥u306e¥u65b0¥u7a2e¥u3060 u3060¥u308d¥u3046¥u304b¥uff1f¥u30d6¥u30e9¥u30c3¥u30af¥u
306e¥u5305¥u307f¥u7d19¥u306b¥u307f¥u305a¥u307f¥u305a u305a¥u3057¥u3044¥u8d64(¥u7565)"}},{"id":"8092","name":"¥u3
0dd¥u30c6¥u30c8¥u30c1¥u30c3¥u30d7¥u30b9¥u30df¥u30eb u30eb¥u30af¥u30ad¥u30e3¥u30e9¥u30e1¥u30eb","url":"http:¥/
¥/example.com¥/snack¥/potatochipsmilkcaramel¥/","image":"http:
/","image":"http:¥/¥/example.com¥/wp34¥/wp-
content¥/uploads¥/2012¥/12¥/¥/8092.jpg","comment":{"p":"
/8092.jpg","comment":{"p":"¥u304e¥u3056¥u304e¥u3056¥u30ab¥u30c3¥u30c8¥u306e
¥u539a¥u3044¥u30dd¥u30c6¥u30c1¥u306b¥u3042¥u307e¥uff5e uff5e¥u3044¥u30ad¥u30e3¥u30e9¥u30e1¥u30eb¥u5473¥u30
02¥u5869¥u5473¥u306a¥u306e¥u304b¥u30ad¥u30e3¥u30e9 u30e9¥u30e1¥u30eb¥u5473¥u306a¥u306e(¥u7565)"}}]})

25.
25 /25
＊Web APIとして
＊他のシステムにデータ提供
＊サイト内でAjax
5. まとめ