wordpressで提供するweb api
TRANSCRIPT
WordPressで提鳥 山提供するWeb API
優 子
プロフィール
• 株式会社ベクター企画・デザイン部
• WordPress歴 4年• 公式テーマ 配布• WP-Furigana
ふりがなを自動入力するプラグイン
•いままでに食べたお菓子
2 /25
ふりがなを自動入力するプラグイン
2145種いままでに食べたお菓子
アジェンダ
1. Web APIとは2. 投稿データを取得3. XMLを生成4. 検索パラメータに対応5. JSONで出力6. まとめ
3 /25
投稿データを取得
検索パラメータに対応
1. Web API
4 /25
1. Web APIとは
1. Web APIとは
Web APIの例
FacebookFacebookFacebookFacebook APIAPIAPIAPI Google Maps APIGoogle Maps APIGoogle Maps APIGoogle Maps API
Yahoo!Yahoo!Yahoo!Yahoo! デベロッパーネットワークデベロッパーネットワークデベロッパーネットワークデベロッパーネットワーク 楽天ウェブサービス楽天ウェブサービス楽天ウェブサービス楽天ウェブサービス
5 /25
Twitter APITwitter APITwitter APITwitter APIGoogle Maps APIGoogle Maps APIGoogle Maps APIGoogle Maps API
楽天ウェブサービス楽天ウェブサービス楽天ウェブサービス楽天ウェブサービス 顔ラボ顔ラボ顔ラボ顔ラボ WebAPIWebAPIWebAPIWebAPI
1. Web APIとは
お菓子の虜 Web APIhttp://www.sysbird.jp/toriko/webapi/http://www.sysbird.jp/toriko/webapi/http://www.sysbird.jp/toriko/webapi/http://www.sysbird.jp/toriko/webapi/
6 /25
Web APIhttp://www.sysbird.jp/toriko/webapi/http://www.sysbird.jp/toriko/webapi/http://www.sysbird.jp/toriko/webapi/http://www.sysbird.jp/toriko/webapi/
WordPressで作ってみた!
2. 投稿データ
7 /25
投稿データを取得
2. 投稿データを取得
＊タイトル＊本文＊カテゴリ＊タグ＊カスタムフィールド＊添付ファイル＊更新日
投稿データ
激辛, カレースナック,
8 /25
お菓子の名前
カスタムフィールドカレー, ポテトチップ, 地域限定など
, チョコ, クッキー, 飴, せんべい
価格, メーカ, ふりがなお菓子の写真
食べた感想
WordPressから2. 投稿データを取得
リクエストリクエストリクエストリクエストURLURLURLURL((((例例例例))))
http://example.com/api/http://example.com/api/http://example.com/api/http://example.com/api/
WordPressWordPressWordPressWordPress////wpwpwpwp----adminadminadminadmin////wpwpwpwp----contentcontentcontentcontent////wpwpwpwp----includesincludesincludesincludes・・・・・・・・・・・・((((略略略略))))
自分のサイト
////apiapiapiapi
投稿投稿投稿投稿データ
データ
データ
データ取得取得取得取得
9 /25
から投稿データを取得
他のサイト
他のサイト
<?PHPrequire_once(dirname(__FILE__) .'/../wp
// WordPressのループ処理$myposts = get_posts();foreach($myposts as $post){
setup_postdata($post); }?>
2. 投稿データを取得
/api/index.php
10 /25
(__FILE__) .'/../wp-load.php');
のループ処理
as $post){($post); // 1件の投稿
3. XML
11 /25
3. XMLを生成
投稿データをもとに3. XMLを生成
// DOMを作成$dom = new DomDocument$dom->formatOutput = true;$xml = $dom->appendChild
$dom->createElement
ルートの
12 /25
にDOM構造を作る
DomDocument('1.0', 'utf-8');= true;
appendChild(createElement('okashinotoriko'));
ルートの要素
// WordPressのループ処理$myposts = get_posts();foreach($myposts as $post){
setup_postdata($post); // 1件の投稿
// itemという子要素を作成$item = $xml->appendChild($dom
// itemのなかに投稿IDを追加$item->appendChild($dom->createElement
// 続けて、提供したい項目を追加する}
3. XMLを生成
投稿データを子要素13 /25
件の投稿
dom->createElement('item'));
を追加createElement('id', $post->ID));
続けて、提供したい項目を追加する
子要素として追加1件の投稿要素
投稿の項目要素
//カスタムフィールド$price = get_post_meta($post->ID , "$item->appendChild($dom->createElement
3. XMLを生成
提供したい項目の
// パーマリンク$item->appendChild($dom->createElement
// 本文$item->appendChild($dom->createElement
‘comment', apply_filters('the_content
// タイトル$item->appendChild($dom->createElement
14 /25
>ID , "価格", true);createElement('price', $price));
の例
createElement('url', get_permalink()));
createElement(the_content', get_the_content())));
createElement('name', get_the_title()));
// アイキャッチ$thumbnail = '';if ((function_exists('has_post_thumbnail(has_post_thumbnail($result->postnumber
$thumbnail = get_the_post_thumbnailif(!empty($thumbnail)){
if(preg_match_all('//i', $thumbnail, $match)){$thumbnail = $match[2][0];$item->appendChild(
$dom->createElement}
}}
3. XMLを生成 15 /25
has_post_thumbnail')) && postnumber))) {
get_the_post_thumbnail($post->ID, 'large');
', $thumbnail, $match)){
createElement('image', $thumbnail));
src属性のみ追加
3. XMLを生成
作成したDOMより// XML出力header('Content-Type: text/echo $dom->saveXML();
16 /25
よりXMLを出力
Type: text/xml;charset=UTF-8');
Web APIできた!
3. XMLを生成
<?xml version="1.0" encoding="utf-8"?><okashinotoriko><item>
<id>7804</id><name>キャラメルコーンあずきミルク味with水木しげる</name><price>79</price><url>http://example.com/snack/caramelcornazuki/</url><image>http://example.com/wp-content/uploads/2012/12/7804.jpg</image><comment><p>半年も前に買ってあったのを食べた。自宅で昼食のあとに甘いものが食べたく
</item><item>
<id>8100</id><name>チロル(ロイヤルクイーン)</name><price>32</price><url>http://example.com/chocolate/tirolroyalstrawberry/</url><image>http://example.com/wp-content/uploads/2012/12/8100.jpg</image><comment><p>ロイヤルクイーンとはイチゴの新種だろうか？ブラックの包み紙にみずみずしい赤
</item><item>
<id>8092</id><name>ポテトチップスミルクキャラメル</name><url>http://example.com/snack/potatochipsmilkcaramel/</url><image>http://example.com/wp34/wp-content/uploads/2012/12//8092.jpg</image><comment><p>ぎざぎざカットの厚いポテチにあま～いキャラメル味。塩味なのかキャラメル味なの
</item></okashinotoriko>
レスポンス17 /25
WebAPIが完成
</name>
content/uploads/2012/12/7804.jpg</image>半年も前に買ってあったのを食べた。自宅で昼食のあとに甘いものが食べたく(略)</p></comment>
>http://example.com/chocolate/tirolroyalstrawberry/</url>content/uploads/2012/12/8100.jpg</image>
ロイヤルクイーンとはイチゴの新種だろうか？ブラックの包み紙にみずみずしい赤(略)</p></comment>
>http://example.com/snack/potatochipsmilkcaramel/</url>content/uploads/2012/12//8092.jpg</image>
キャラメル味。塩味なのかキャラメル味なの(略)</p></comment>
4. 検索パラメータ
18 /25
パラメータに対応
4.検索パラメータに対応
http://example.com/api/?keyword=hello&max=30http://example.com/api/?keyword=hello&max=30http://example.com/api/?keyword=hello&max=30http://example.com/api/?keyword=hello&max=30
“hello”というキーワード30件を取得したい
19 /25
http://example.com/api/?keyword=hello&max=30http://example.com/api/?keyword=hello&max=30http://example.com/api/?keyword=hello&max=30http://example.com/api/?keyword=hello&max=30
キーワードで、したい場合
リクエストリクエストリクエストリクエストURLURLURLURLにににに
パラメータをパラメータをパラメータをパラメータを追加追加追加追加
4.検索パラメータに対応
URLパラメータを取得$param = array();
if(isset($_GET['max'])) {// 取得件数が指定されている場合$param['showposts'] = $_GET['max'];
}
if(isset($_GET['keyword'])) {// 検索キーワードが指定されている場合$param[‘s’] = mb_convert_encoding
}
20 /25
パラメータを取得
取得件数が指定されている場合'] = $_GET['max'];
検索キーワードが指定されている場合mb_convert_encoding($_GET[‘keyword’],'UTF-8','auto');
3.検索パラメータに対応
ループ条件を設定$myposts = get_posts($paramforeach($myposts as $post){
setup_postdata($post); }
＊カテゴリ＊年月＊開始位置＊取得順など…
21 /25
設定するparam);
as $post){($post); // 1件の投稿
get_postsget_postsget_postsget_posts()()()()に指定できるに指定できるに指定できるに指定できるパラメータならパラメータならパラメータならパラメータならなんでもなんでもなんでもなんでも
5. JSON
22 /25
5. JSONで出力
5. JSONで出力
// JSON出力$xml_obj = simplexml_load_string
$encode = json_encode($xml_objheader(
"Content-Type: text/javascriptecho "callback(" .$encode .")“;
PHPの関数で変換23 /25
simplexml_load_string($dom->saveXML());
xml_obj);
javascript; charset=utf-8");echo "callback(" .$encode .")“;
変換するだけ
5. JSONで出力
callback({"item":[{"id":"7804","name":"¥u30ad¥u30e3¥u30e930df¥u30eb¥u30af¥u5473with¥u6c34¥u6728¥u3057¥u3052¥u308b","price":"79","url":"http:caramelcornazuki¥/","image":"http:¥/¥/example.com¥/wp-content¥/uploads¥/2012¥/12¥/7804.jpg","comment":{"p":"¥3042¥u3063¥u305f¥u306e¥u3092¥u98df¥u3079¥u305f¥u3002u306b¥u7518¥u3044¥u3082¥u306e¥u304c¥u98df¥u3079¥u305f30eb(¥u30ed¥u30a4¥u30e4¥u30eb¥u30af¥u30a4¥u30fc¥u30f3)","price":"32","url":"http:/tirolroyalstrawberry¥/","image":"http:¥/¥/example.com¥/wpcontent¥/uploads¥/2012¥/12¥/8100.jpg","comment":{"p":"¥068¥u306f¥u30a4¥u30c1¥u30b4¥u306e¥u65b0¥u7a2e¥u3060306e¥u5305¥u307f¥u7d19¥u306b¥u307f¥u305a¥u307f¥u305a0dd¥u30c6¥u30c8¥u30c1¥u30c3¥u30d7¥u30b9¥u30df¥u30eb¥/example.com¥/snack¥/potatochipsmilkcaramel¥/","image":"http:content¥/uploads¥/2012¥/12¥/¥/8092.jpg","comment":{"p":"¥u539a¥u3044¥u30dd¥u30c6¥u30c1¥u306b¥u3042¥u307e¥uff5e02¥u5869¥u5473¥u306a¥u306e¥u304b¥u30ad¥u30e3¥u30e9
レスポンス24 /25
u30e9¥u30e1¥u30eb¥u30b3¥u30fc¥u30f3¥u3042¥u305a¥u304d¥uu308b","price":"79","url":"http:¥/¥/example.com¥/snack¥/
¥u534a¥u5e74¥u3082¥u524d¥u306b¥u8cb7¥u3063¥u3066¥uu3002¥u81ea¥u5b85¥u3067¥u663c¥u98df¥u306e¥u3042¥u3068¥
u305f¥u304f(¥u7565)"}},{"id":"8100","name":"¥u30c1¥u30ed¥uu30f3)","price":"32","url":"http:¥/¥/example.com¥/chocolate¥
wp-¥u30ed¥u30a4¥u30e4¥u30eb¥u30af¥u30a4¥u30fc¥u30f3¥u3
u3060¥u308d¥u3046¥u304b¥uff1f¥u30d6¥u30e9¥u30c3¥u30af¥uu305a¥u3057¥u3044¥u8d64(¥u7565)"}},{"id":"8092","name":"¥u3u30eb¥u30af¥u30ad¥u30e3¥u30e9¥u30e1¥u30eb","url":"http:¥/
/","image":"http:¥/¥/example.com¥/wp34¥/wp-/8092.jpg","comment":{"p":"¥u304e¥u3056¥u304e¥u3056¥u30ab¥u30c3¥u30c8¥u306e
uff5e¥u3044¥u30ad¥u30e3¥u30e9¥u30e1¥u30eb¥u5473¥u30u30e9¥u30e1¥u30eb¥u5473¥u306a¥u306e(¥u7565)"}}]})
Ajaxで使える!
＊Web APIとして＊他のシステムにデータ提供＊サイト内でAjax
5. まとめ
25 /25
としてデータ提供
Ajax
まとめ