json apiを利用。「monaca」と「wordpress」の連携方法について

forestMR
(@forestmr)

8年、 10ヶ月前
質問する場所が間違っておりましたら申し訳ありません。

iphoneアプリ内でwordpressサイトの記事を自動取得を試しています。
ウェブアプリ開発の「monaca」を利用してjson APIからwordpressの記事を取得、アプリで表示を試みております。
もし利用したことがあれば教えてもらいたいですm(__)m
　
手順は
・wordpressにて「json api」プラグインを有効化
・get_recent_postsにて取得予定
・サーバー（wordpressがインストールされているディレクトリ内の）htaccessにjson apiのパスを通す。
　記述　Header append Access-Control-Allow-Origin: *
　（json apiに全外部ドメインからアクセスする為の記述）

・monacaにて、jqueryを有効化バージョン1.9
・loader.jsでインストしたjqueryを呼出。
・HTML内　bodyタグ以下に下記を記述。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
```
<ul class="item"></ul>
<script type="text/javascript">
var ROOT_URL = "取得予定のサイトURL/";
$.getJSON(ROOT_URL+"?json=get_recent_posts", function(data) {
for(var i=0; i<4; i++){
$(".item").append(
"<li>" + data.posts[i].content + "</li>"
);
}
});
</script>
```
■■■■■■■■■■■■■■■■■■■■■■■■■■■■
htaccessの記述ミス？なのかなと思って、色々と試してみたりしたのですが、上手くいきませんでした。
もし、ご存知の方がいらっしゃいましたらご教授頂けると幸いです。
よろしくお願い致します。

8件の返信を表示中 - 1 - 8件目 (全8件中)

モデレーター Daisuke Takahashi
(@extendwings)

8年、 10ヶ月前

WP API(コアに統合される予定)かJetpackを使う以外のやり方をしたことがなかったので、JSON APIプラグインの詳細を把握していませんが、「どこ」が「どう」うまくいっていない状態ですか？

トピック投稿者 forestMR
(@forestmr)

8年、 10ヶ月前

Daisuke Takahashi様、コメントありがとうございます。

確かに、Jetpackでもjson api取得できるのでしたね！ヒントをありがとうございます！
試してみてからまた改めてコメントさせていただきますが、現状は、monacaアプリ内に記述の一切が表示されていない状態で、原因がつかめておりません。

投稿表示させたいwordpressサイトには、jet packのプラグイン利用、json apiが有効化されておりました。その上でjson apiプラグインを有効化したので、競合が発生しているのかな？と考えております。

重ねて質問させて頂きたいのですが、json api を許可するプラグインを複数利用した場合（今回はjson apiとjet pack）、コンフリクトを起こす原因になることは考えられますでしょうか。
モデレーター gatespace
(@gatespace)

8年、 10ヶ月前
https://wordpress.org/plugins/json-rest-api/
WP APIとJetpackのjson配信では配信される要素などが異なります。
パーマリンク（エンドポイント）も異なります。
どちらか一方を使ったほうが良いです。

その上で、WP APIであればプラグイン有効化後、API経由で取得できるかどうかをチェックするコマンドが例示されてますので、それを試してください。

http://wp-api.org/guides/getting-started.html

getJSONでうまくいかないとのことですが、WP API ver 1.2以降であればJSONPが使えます。
これにより、JSONPで処理するのであればサーバー側でCORSの設定は必要ありません。
基本的に
```
$.ajax({
	type: 'GET',
	url:  'http://example.com/wp-json/posts/?_jsonp=?',
	dataType: 'jsonp'
}).done(function(data, status, xhr) {
	// 取得完了後の処理
}).fail(function(xhr, status, error) {
	// 取得エラーの処理
});
```
で最新の投稿10件（件数はWPで指定した数）を取得できます。

WP-APIを利用したHTMLソースを（JSONPではないですが）、GitHubで公開してますので参考にどうぞ。
https://github.com/megumiteam/media-assembly-kit-simple-template
トピック投稿者 forestMR
(@forestmr)

8年、 10ヶ月前
gatespace様、大変参考になるページありがとうございます！
WP API(WP REST API)のver 1.2 プラグインを利用してやってみました。

mac ターミナルにて、
```
curl -i http://サイトURL.com/wp-json/posts
```
を叩いて、情報がズラーと出てきましたので、json情報は吐き出しは出来ているのかなと思います。（確認方法が間違っていたりしますでしょうか？）

少し書き換えまして、下記の様に記述を致しました。
```
<ul class="wpapi"></ul>
                        <script>
$.ajax({
    type: 'GET',
	url:  'http://サイトURL.com/wp-json/posts/?_jsonp=?',
	dataType: 'jsonp'
}).done(function(data, status, xhr) {
	var result = data;
                for (var i = result.length - 1; i >= 0; i--) {
                        $('.wpapi').append('
<li>' +result[i].title+'</li>
');
}).fail(function(xhr, status, error) {
	alert("ng");
});
                        </script>
```
この記述や過程で、間違っている部分がありましたらご指摘頂けますと幸いです(> <)

実行したいことは
WPに投稿されている情報をアプリに表示（日付＋タイトル表示＋リンク）し、タップの後にサイト記事表示。

現状
①WP APIプラグイン Ver1.2.2をインストール、有効化（jsonp取得可能バージョン）
②monaca（アプリIDE）にて、jquery呼び出し
③body内に上記コードを記述

結果
一切表示されておりません。
何か考えられることがありましたら、ご指摘頂けると嬉しいです。
何卒よろしくお願い致します。

※追記
ターミナルにて
```
curl -I http:// サイトURL.com/
```
を叩いて情報が出てきましたので、こちらでも問題ないかと思います。
Hinaloe
(@hnle)

8年、 10ヶ月前

MonacaデバッガでConsoleが利用できるかと思いますが何かエラー等は出ていませんか?

トピック投稿者 forestMR
(@forestmr)

8年、 10ヶ月前

Hinaloe様、コメントありがとうございます！

デフォルト状態では表示されておりましたiOSのデバッガですが、
今の記述では、「更新をチェックしています」の表示の後にデバッガアプリが落ちているみたいです。今先ほど気がつきました。

記載致しました私の手順自体には間違いは無さそうでしょうか。(> <)
モデレーター gatespace
(@gatespace)

8年、 10ヶ月前
```
curl -i http://example.com/wp-json/posts
```
でjsonの情報が出力されているのであれば、WPやプラグイン、サーバには問題ないでしょう
（jq 入れると整形してくれるので便利です。）

Monacaは使った事ないのでわからないのですが、jQueryつかえるのであれば、試しにローカルサーバーにHTML+jQueryでコード書いて見ればブラウザのデバッガーでエラーがあれば確認できませんかね？

jQueryの書き方が間違ってるのか、ajax実行時の処理がおかしいのか、切り分けはできると思います。
トピック投稿者 forestMR
(@forestmr)

8年、 10ヶ月前

gatespace様、ご返信が遅くなりすみません。
試してみたいと思います。

大変ありがとうございます！
また、追って状況をこちらに投稿させて頂きたいと思います！

8件の返信を表示中 - 1 - 8件目 (全8件中)

トピック「json apiを利用。「monaca」と「wordpress」の連携方法について」には新たに返信することはできません。

トピックタグ

表示