苦手克服!やったことな分野に挑戦【JSON WordPressApi】

コーダーがフロントエンドエンジニアにステップアップするためには、習得しなきゃいけない分野がたくさんあります。

やったことない領域にどんどん挑戦して、できることをう増やしていきましょう。

WordPressのWebAPIを利用してアプリ化を目指す

WordPressで作られたWebサイトをスマートフォンのアプリとして制作してみたいと、前々から思っていたので(需要があるかわかりませんが……)勉強も兼ねて入り口だけでも見つけてみようかと思います。

本来ブラウザで表示されるWordpressで作られたページをWebAPIを利用することで、アプリに流すことができないかということです。

WordPressのWebAPIでいま注目されているものは、JSON REST APIというプラグイン。JSONはデータの保存形式として最近よく使われています。

詳しいことはよくわからないので、とりあえずJSON REST API(プラグイン)をインストールしてみる。

ドメイン/wp-json/ここでAPI化されたJSON形式のテキストでデータを取得できるようになりました。

JSON化したデータはjQueryで出力できる

<ul class="box" id="wpJson">
</ul>
<script>
<!--
	$(document).ready(function(){
		$.getJSON("https://liberty-dock.com/wp-json/posts/",
			function(data) {
				var len = data.length;
				for(var i=0; i < len; i++){
				$('#wpJson').append('<li><a href="'+data[i].link+'">'+data[i].title+'</a></li>');
			}
		})
	});
-->
</script>

うまく表示できました!
jQueryは1系でも2系でもどちらでもいいんですが、アプリ化を目指すなら2系ですね。

jQueryの日本語リファレンスにもjQuery.getJSON( url, data, callback ) の記述がありますので、jQueryがよくわからない人は日本語リファレンスを見て下さい。

Monacaに書いてみる

アプリ化には使用する言語はHTML5+CSS3+JavaScriptで、ハイブリットアプリなので、Monaca(Webサイトの感覚でアプリが作れるツール)に上記のコードをコピーしてみます。

問題なく表示されました。

これだけだと、結局記事の内容は直接Webにアクセスしているだけだから、アプリ化と言えないレベルだけとりあえずJSONを使ってWeb上にあるWordpressサイトのデータを引っ張って来ることができるということだけが分かりました。

今後はもうちょっと置くまで突っ込んでみる必要がありますね。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら