こんばんは、前回やったことの続きとして、Ajax通信でWordPressのデータベースからionicのスマホアプリへとデータを渡してみました。
前回の続きと言っておきながら、前回のコードは殆ど使ってないのですが…
今回は下のサイトを参考にしながらやってみました。
Ajax通信でWordPressのデータベースから座標データを取得し、ionicのスマホアプリに位置情報をマークする方法
用意するもの
WordPressとスマホアプリ間で通信を行うため、サーバとクライアントにそれぞれ何行かづつコードと、Access-Control-Allow-Originのエラーを回避するためのコードが必要になります。
サーバ側のコード
wordpressのfunctions.php（参照パス：vccs/wordpress/wp-includes/functions.php）に以下のコードを加える。
//データ取得用
add_action('wp_ajax_tell_me', 'tell_me');
add_action('wp_ajax_nopriv_tell_me', 'tell_me');
function tell_me() {
$id = XXX; //任意の投稿ID
$res[0] = get_the_title($id);
$res[1] = get_post_meta($id,'key1',true);
$res[2] = get_post_meta($id,'key2',true);
$res[3] = get_post_meta($id,'key3',true);
echo json_encode($res, JSON_UNESCAPED_UNICODE);
die();
}
ここでは、データを取り出す用の関数を用意しているようです。
クライアント側のコード
ionicのindex.html(参照パス：smartphoneApp/src/index.html)に以下のコードを加える。
//wordpresから来たjssonデータをionic内のオブジェクトへ格納。
＜script>
function mark(data){
console.log(data[0]+"/"+data[1]+"/"+data[2]+"/"+data[3]);
}
</script>
// データ通信用
＜script>
var wp_url_admin_ajax = 'http://XXXXX.local/wp-admin/admin-ajax.php';
jQuery(function ($){
$.ajax({
type: "POST",
url: wp_url_admin_ajax,
dataType: "json",
crossDomain: true,
data:{
action :'tell_me'
},
success: function(response){
mark(response); //ここで外部に記述している関数mark（引数：座標データ）にwordpressとの通信によって得られた値を送っている。
}
});
});
</script>
ここでは$.ajax()という関数でwordpressにアクセス、アクセスできたらmark(data)関数でデータを取得しています。
Access-Control-Allow-Originのエラー回避のためのコード
header(“Access-Control-Allow-Origin: *”);をadmin-ajax.phpに加えます。 （参照パス：vccs/wordpress/wp-admin/admin-ajax.php）
/** Allow for cross-domain requests (from the front end). */
send_origin_headers();
header("Access-Control-Allow-Origin: *"); //これを追加
// Require an action parameter
if ( empty( $_REQUEST['action'] ) )
wp_die( '0', 400 );
何度か試したところ、コードを書き込む場所が重要なようです。
そのため、25行目くらいのsend_origin_headers();の次の行に追記することをおすすめします。
実行結果
wordpressのカスタムフィールドは次のようでした。 
一方ionicのmark(data)関数でwordpressから受けったデータを配列に格納し、コンソールに表示させた結果は次のようでした。
タイトル/test/test2/test3
ちゃんと受信できていることがわかりました。
まとめ
いかがでしたか？
今回はwordpressとスマホアプリ間でデータの送受信をしてみました。
wordpress側がデータとそれを取り出す関数を用意して、アプリ側から関数にアクセスして返り値としてデータを受け取っているようです。
自分はjavascriptやPHPに不慣れなため、参考サイトのコードをどう落とし込むかに時間をかけてしまいましたが、やっとajax通信ができるようになりました。
次回は実際にアプリのデザイン関係の記事を投稿できればと思います。
