[API]phpでAPIにアクセスしてgetJSON()で取得する。APIキーを隠蔽する方法。

以前の投稿でぐるなびAPIを利用したSPAのサンプルをご紹介しましたが、JavaScriptで作ったため、本来公開すべきではないAPIキーを隠蔽できない、という問題がありました。

それを解決する方法として、PHPでAPIキーを使って情報を取得し、それをJavaScript側で取得する、という方法があるとわかったのでサンプルコードを書いてみました。

実際の動作は以下のdemoから確認できます。

サンプルコード

demoのコードを簡略化したものを以下にご紹介します。

html

ボタンをクリックするとイベントが発生し、.resultの中にAPIから取得したデータを表示させます。

<html>
<head>
	<script type='text/javascript' src="jquery.js"></script>
	<script type='text/javascript' src='api.js'></script>
</head>
<body>
<div class="main-content">
	<section>
		<ul class="result"></ul>
		<input type="button" class="btn" value="表示する" />
	</section>
</div>
</body>
</html>

PHP

APIのURLにパラメーターを付けてアクセスするとAPIからデータが戻ってくるのですが、(ぐるなびAPIの場合)必須のパラメーターのひとつにAPIキーがあります。

つまり、JavaScriptのイベントなどで非同期にAPIにアクセスする場合、jQueryを使うならajax()やgetJSON()などを使ってAPIキーを含んだパラメーター付きのURLにアクセスする必要があるのですが、jsファイルなどにAPIキーを埋め込むと当然隠蔽できません。

なので、phpなどでサーバー側でAPIにアクセスして処理結果を得られる仕様にすれば、APIキーが隠蔽できる、ということになります。

というわけで以下のphpでAPIを叩いてデータを取得。JavaScriptに戻す値を生成します。

<?php
//proxy.php

	mb_http_output('utf-8');
	mb_internal_encoding('utf-8');
	header('Content=Type: text/xml;charset=UTF-8');

	//エンドポイントのURIとフォーマットパラメータを変数に入れる
	$uri_rest = "http://api.gnavi.co.jp/RestSearchAPI/20150630/"; //レストラン検索API

	//APIアクセスキーを変数に入れる
	$acckey = "a6154b84e515ec****************************";

	//返却値のフォーマットを変数に入れる
	$format = "json";

	//キーワード設定
	$freeword = 'コーヒー,カフェ,珈琲,喫茶,喫茶店'; 

	//get送信されたデータを取得
	if (isset($_GET["pref"])) {
		$pref = $_GET['pref'];
	} else {
		$pref = 'PREF13';
	}

	//URL組み立て
	$url = sprintf("%s%s%s%s%s%s%s%s%s%s%s", $uri_rest, "?keyid=", $acckey, "&format=", $format, "&freeword=", $freeword, "&pref=", $pref);

	//API実行
	echo file_get_contents($url);

JavaScript(jQuery)

getJSON()の戻り値として、(result)の中にproxy.phpで生成されたJSONデータが入っています。それを使ってhtmlを生成します。


//api.js

jQuery(function() {

	jQuery('.btn').on('click', function(){

		//get送信、戻り値取得
		jQuery.getJSON('proxy.php', {
			//必要に応じてAPI用のパラメータをセットする
			pref:PREF01
		})
		.done(function(result){
			//データ表示
			for ( var i in result.rest ){
				shop_image1: result.rest[i].image_url.shop_image1
				jQuery('.result').append('
  • '); } }) }); });

    まとめ

    非同期通信の勉強を始めたばかりで、この投稿でご紹介したphpと連携するやり方も今まで知りませんでした。

    慣れた方にとっては標準的なやり方なのだろうと思いますが、これはなかなかおもしろいですね。非同期通信関連の処理は他にもいろいろと面白い機能があるようで、今後も楽しみに勉強を続けて行きたいと思います!

    jQuery.ajax()を使ってクリックイベントで投稿を取得。WP REST APIを試してみました。

    JSON形式のデータを取得できるWP REST APIというWordPressプラグインを使ってクリックイベントでWordPressの投稿を取ってくるサンプルコードを作成しました。

    このプラグインを使ってサイトのホームのurl+/wp-json/wp/v2にアクセスするとJSON形式のデータが返却される機能が提供されます。更にパラメータを追加してWP_Queryのように投稿を取得することもできます。このデータを利用して、以下の様な記述で投稿を取得できました。

    demo

    JavasScript(jQuery)

    //最新の投稿6件を取得するスクリプト
    jQuery(function() {
     
    //jsonデータが返却されるurl
    var APIurl = 'https://stella-design.biz/wp-json/wp/v2/posts/?filter[posts_per_page]=6';
     
    //投稿データ表示
    jQuery('.btn-api-load').on('click', function(){
    	jQuery('.api').empty().removeClass('fade-in');
    	jQuery('.loading').removeClass('hidden');
    	setTimeout(function(){
    		ajaxGetPost();
    	},2000);
    });
     
    //投稿データ取得 
    function ajaxGetPost(){
    	jQuery.ajax({
    		type: "GET",
    		url: APIurl,
    		dataType: "json"
    	})
    	.then(
    		function(json){
    			for(var i in json){
    				jQuery('.api').append('
  • ' + json[i].title.rendered + '
  • '); } }, function(){ alert("データをロードできませんでした。"); } ); jQuery(document).ajaxStop(function(){ jQuery('.loading').addClass('hidden'); jQuery('.api').addClass('fade-in'); }); } });//jQuery end

    html

    
    <button class="sd-btn btn-api-load">click</button>
    <div class="develop-block">
        <ul class="ul api"></ul>
        <div class="loading hidden">loading</div>
    </div>
    

    css

    
    @-webkit-keyframes ani-opa {
    	0% {
    		opacity: 0;
    	}
    	50% {
    		opacity: 1;
    	}
    	100% {
    		opacity: 0;
    	}
    }
    @keyframes ani-opa {
    	0% {
    		opacity: 0;
    	}
    	50% {
    		opacity: 1;
    	}
    	100% {
    		opacity: 0;
    	}
    }
     
    .loading {
    	margin: 15px 0;
    	-webkit-animation: ani-opa 1s infinite;
    	animation: ani-opa 1s infinite;
    }
     
    .hidden {
      visibility: hidden;
    }
     
    .api {
    	opacity: 0;
    	-webkit-transition-property: opacity;
    		  transition-property: opacity;
    	-webkit-transition-duration: 2s;
    		  transition-duration: 2s;
    	-webkit-transition-timing-function: ease;
    		  transition-timing-function: ease;
    	-webkit-transition-delay: 0.1s;
    		  transition-delay: 0.1s;
    }
     
    .fade-in {
    	opacity: 1;
    }
    
    .btn-api-load{
    	margin-top: 15px;
    }
    
    .develop-block{
    	padding: 30px 0;
    }
    

    昨年春のマット・マレンウェッグ氏のイベントによると、WP REST APIがWordPressのコアにマージされる時期が近づいているようです。

    JavaScriptを使ってスマートフォンネイティブアプリに近いUIを備えたwebサイトは今後ますます増えていくと個人的には思っています。その流れに対応できるよう、今年は昨年以上にがっちりJavaScriptに取り組んで行く予定です。

    しかしながら、JavaScriptをやればやるほど、サーバーサイドスクリプトの知識の必要性を感じるようになりますね。両方出来たほうがよりよいものが作れる。ひとまずはPHPももっとがんばって、WEBサービス的なものを作れるようになれたらいいな、と思い始めています。

    2016年以降、納品案件でもガンガン使いたいCSS3関連記事まとめ

    IE10、IE9、IE8のサポート終了 | マイナビニュース
    2016年1月、古いIEのサポートが終了したわけですが、そうなるとWEB制作における影響として、CSS3の積極的な利用促進が挙げられますよね。

    納品案件だとブラウザによる差異に対してなかなかご理解いただけないクライアントもいらっしゃるので、css3を利用することにためらいがあったわけですが、これからはcss3の利用が業界全体でぐっと加速するのは間違いないだろうと思います。

    ということで、勉強のためにストックしておいたCSS3関連記事をまとめてみました。

    Flexbox

    現状ではbootstrapを利用してレイアウトを組むことが多いですが、余分なdivが増えてしまうのでhtmlがやや複雑になってしまうのが欠点です。Flexboxを使うとシンプルな記述で柔軟にレイアウトが組めそう。

    子要素を横並びにしてくれる、自動的に一番長いボックスに合わせて高さをあわせてくれる、垂直方向の位置も設定できる、など利点がたくさんあります。

    参考

    transition

    例えば要素にマウスをhoverした時に、その要素の幅や高さを変えたり、動かしたり、動作に緩急をつけたり、と何らかの変化をつけることができます。

    参考

    animation

    animationは、@keyframesを使って開始→中間→終了→開始に戻る、などの時間軸を持たせてループできることが特徴的です。

    transform

    移動、拡大、回転、傾斜など要素を「変形」させることができます。animationと組み合わせると、より複雑なモーフィングも表現可能なようです。

    参考

    • 【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】

    background

    css3では、カンマで区切れば複数の色や画像やグラデーションを重ねて指定できますし、画像の開始位置や敷き詰め方、要素に対してのフィッティングも設定可能です。

    other

    css2.1と比べて表現力が格段に高まりましたが記述方法は複雑になっていますので、まずは先駆者の方々が残してくれたコードをありがたく勉強させてもらいます!

    ぐるなびAPIを使ってJavaScript(jQuery)で動作するシングルページアプリケーションを作ってみました。

    ご存じの方もいらっしゃると思いますが、ぐるなびというレストランの検索サイトでは、レストラン検索などができるAPIを公開しています。(ぐるなびWeb サービス for Developers)

    APIの勉強がしたいと思っていろいろ調べていたところ、このAPIにたどり着きました。解説ページの作りが非常によく、サンプルコードもわかりやすかったので、このAPIを使わせていただくことにしました。

    都道府県別カフェ検索アプリを作る。

    ぐるなびに登録されているカフェを都道府県ごとに検索できるごく簡単なWebアプリケーションを作ったのでデモページとコードを公開してみます。

    上記デモURLにアクセスすると、東京都のカフェ一覧が表示されます。クリックするとぐるなびの店舗紹介にリンクします。

    「さらに表示する」ボタンをクリックすると次の10件のデータを取得して表示します。

    都道府県を「変更する」ボタンをクリックすると、文字通り都道府県が切り替わって、条件にマッチしたデータを取得して表示します。

    JavaScript(jQuery)

    JavaScript初学者が作った学習用のコードのため、間違いや非効率なコードが含まれている可能性があります。ご了承ください。ご指摘、ご助言いただけますと非常にありがたいです!コメント欄をご利用ください。
    //masonryも併用しています
    jQuery(function() {
    
    (function(){
    
    	/**************************************************************************************
    	 * 変数定義
    	 **************************************************************************************/
    
    	// masonry 初期設定
    	var $container = jQuery('.grid'); //wrapper要素指定
    	var $inner = '.grid-item'; //inner要素指定
    
    	// API
    	var api_key = '********************************'; //アクセスキー
    	var hit_per_page_num = 10; //一度に表示する件数
    	var offset_page_num = 1; //初期ページ
    	var pref_name_ini = 13; //都道府県初期設定 (PREF13=東京都)
    	var pref_name_key = 'PREF' + pref_name_ini; //都道府県名キー作成
    
    	// API URL
    	var url_rest = 'http://api.gnavi.co.jp/RestSearchAPI/20150630/?callback=?'; //レストラン検索API
    	var url_pref = 'http://api.gnavi.co.jp/master/PrefSearchAPI/20150630/?callback=?'; //エリアマスタ取得API
    
    	//API 基本パラメータ
    	var params = {
    		keyid: api_key,
    		format: 'json'
    	};
    
    	// API 店舗データ取得用パラメータ設定
    	var params_shop = jQuery.extend({ }, params);
    	params_shop.pref = pref_name_key; //都道府県設定
    	params_shop.freeword = 'コーヒー,カフェ,珈琲,喫茶,喫茶店'; //キーワード設定
    	params_shop.hit_per_page = hit_per_page_num;
    	params_shop.offset_page = offset_page_num; //ページ数
    
    	// API 店舗データ数判定
    	var resultLooplength = 0;
    
    
    
    	/**************************************************************************************
    	 * masonry データ配置処理
    	 **************************************************************************************/
    
    	var preLoad = function(){
    		$container.imagesLoaded(function(){
    			$container.masonry({
    				itemSelector: $inner, //タイトル状に配置する要素のclassの指定
    				isFitWidth: true, //親要素の幅に合わせてタイル状のコンテンツ数を自動調整
    				isAnimated: false //伸縮時のアニメーションの設定
    			});
    		});
    	};
    
    
    
    	/**************************************************************************************
    	 * API 店舗データ 出力
    	 **************************************************************************************/
    
    
    	//API 店舗データ出力
    	var resultLoop = function(result){
    
    		for ( var i in result.rest ){
    
    			var elm = {
    				name: result.rest[i].name, //店舗名取得
    				shop_image1: result.rest[i].image_url.shop_image1, //画像取得
    				url: result.rest[i].url, //ぐるなび店舗詳細ページURL取得
    				address:result.rest[i].address //店舗住所取得
    			}
    			
    			var img_url = elm.shop_image1.toString();
    			//変数img_urlは、APIで画像が登録されていない場合のif文の条件分岐の値として使います。
    			//店舗によっては画像が登録されておらず、[object Object]というデータが返されます。
    			//[object Object]は、調べたところオブジェクトの型を表現しているようですが、よくわかりませんでした。
    			//toString()メソッドを使って文字列に変換すると同値演算ができるようになったので、
    			//最善では無いと思いますが、ひとまずこのような変数を作りました。
    
    			if(img_url === '[object Object]'){
    				preLoad();
    				jQuery('.result').append('
  • ' + elm.name + '
    ' + elm.address + '
  • '); } else { var img_li = '' + '
    '; preLoad(); jQuery('.result').append('
  • ' + img_li + elm.name + '
    ' + elm.address + '
  • '); } resultLooplength++; if( resultLooplength >= result.total_hit_count ){ jQuery('.btn--more-load').after('

    全データを表示しました。

    ').addClass('none'); resultLooplength = 0; } } params_shop.offset_page++; }; //API 取得件数を表示 var resultNum = function(result){ if ( result.total_hit_count > 0 ) { jQuery('.total').html( result.total_hit_count + '件のお店が見つかりました。\n' ); } else { jQuery('.total').html( 'お店が見つかりませんでした。' ); } }; /************************************************************************************** * API 都道府県データ 出力 **************************************************************************************/ // API 地域名初期表示 var farstPrefTitle = function(result){ var pref_title = result.pref[pref_name_ini - 1].pref_name; jQuery('.pref_title').html(pref_title); }; //現在の地域名を更新 var changePrefTitle = function(val,result){ jQuery('.pref_title').html(val); }; //API 都道府県データをselect要素として生成する var resultPref = function(result){ for ( var i in result.pref ){ var name = result.pref[i].pref_name; var code = result.pref[i].pref_code; jQuery("[name = pref_name]").append( '' ); } }; /************************************************************************************** * APIデータ取得/イベント実行 **************************************************************************************/ //ページがロードされたら jQuery(window).one('load', function(){ //店舗データを取得し表示する jQuery.getJSON(url_rest, params_shop, function(result){ //店舗件数を表示 resultNum(result); //店舗データ表示 resultLoop(result); //ページ数を更新 offset_page_num++; }) //都道府県データを取得し表示/セットする jQuery.getJSON(url_pref, params, function(result){ farstPrefTitle(result); resultPref(result); }) }); //指定要素がクリックされたら次のデータを取得し表示する jQuery('.btn--more-load').on('click', function(){ //APIデータを取得 jQuery.getJSON(url_rest, params_shop, function(result){ //店舗データ表示 resultLoop(result); //masonryを再配置 $container.masonry('reloadItems'); }) }); //指定要素がクリックされたら都道府県を変更して店舗データを再取得し表示する jQuery('[name = pref_btn]').on('click', function(){ //店舗データ数判定を初期化する resultLooplength = 0; //「全データ取得済み」表示を削除する jQuery('.vew-end').remove(); //データ取得ボタンを再表示する jQuery('.btn--more-load').removeClass('none'); //で選択されている要素(都道府県名)を取得 var selectPref_name = jQuery('[name = pref_name] option:selected').text(); //商品データ一覧を初期化 $container.empty(); //ページ数を初期化 params_shop.offset_page = 1; //都道府県パラメータを都道府県データ取得API用オブジェクトにセット params_shop.pref = pref_val; //現在の地域名を更新 changePrefTitle(selectPref_name); //APIデータを取得 jQuery.getJSON(url_rest, params_shop, function(result){ //店舗件数を表示 resultNum(result); //店舗データ表示 resultLoop(result); //masonryを再配置 $container.masonry('reloadItems'); }) }); }).call(this); });

    html

    
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width" />
    	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    	<link href="style.css" rel="stylesheet">
    	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js'></script>
    	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js'></script>
    	<script type='text/javascript' src='js/gnavi_api.js'></script>
    	<script type='text/javascript' src='js/custom.js'></script>
    </head>
    
    <body>
    
    	<article class="wrap">
    
    		<header class="header">
    			<div class="inner">
    				<h1>都道府県別カフェ検索<br />(ぐるなびAPIサンプルコード)</h1>
    				<h2 class="pref_title"></h2>
    				<p><span class="total"></span></p>
    				<div class="pref_search">
    					<h3>都道府県変更</h3>
    					<select name="pref_name"></select>
    					<button type="button" name="pref_btn">変更する</button>
    				</div>
    				<p class="text">このサイトはぐるなびAPIを使って作ったSPAのサンプルサイトです。ぐるなびに掲載されているカフェを、都道府県ごとに表示させる機能を提供します。</p>
    				<div>
    					<a href="http://www.gnavi.co.jp/"> 
    						<img src="http://apicache.gnavi.co.jp/image/rest/b/api_155_20.gif" width="155" height="20" border="0" alt="グルメ情報検索サイト ぐるなび">
    					</a>
    				</div>
    			</div>
    		</header>
    		<div class="main-content">
    			<section>
    				<ul class="ul result grid"></ul>
    				<input type="button" class="btn--more-load" value="さらに表示する" />
    			</section>
    		</div>
    
    		<footer>
    			<div class="container">
    			</div>
    		</footer>
    		<div class="go-to-top"><a class="go-to-top_body" href="#">▲<br />もどる</a></div>
    
    	</article>
    
    </body>
    </html>
    

    ※CSSは割愛します。

    雑感

    イベントの実行が煩雑になってしまったので、もっとすっきりわかりやすくできたらいいと思いました。デザインパターンを勉強すると良い気がします。

    addEventListenerの使い方を覚えるといいのかな?時間を取って調べて行きたいですね。MVCフレームワークも覚えられたらいいですね。

    あと、APIの仕様で残念なことが一つありました。それは、店舗の画像を表示させるパラメーターが2種類しかなく、しかもどんな画像なのか事前にわからない仕様だったこと。

    当初のイメージでは、コーヒーそのものまたは室内の様子がわかる写真を並べて写真で魅せるデザインにしたかったのですが、ロゴや犬の写真が出てくることもあって(笑)、コントロールできなさそうでした。

    食べ物、飲み物、店内、外観、それらをキーワードで指定、とかできたらなお良いですね。

    これでいいのか?WordPress制作のワークフロー

    いきなりですが、このエントリーを読んでいる方に質問です。WordPressのテーマを仕事で作成する際に、どのようなワークフロー、制作手順でコーディング・構築・テーマ作成を進めますか?

    デザインから WordPress のテーマ作成までの自分のワークフローを見直す – HAM MEDIA MEMO

    北海道札幌で活動されているフリーランスのフロントエンジニア「ハム」さんのブログでこんな問いかけがあったので反応してみました。

    ひとまず、自分の守備範囲から。

    WEBデザイン、HTML/CSSコーディング、JavaScriptの実装(あんま難しくないヤツ)、WordPressの構築とカスタマイズ、テーマ作成、場合によってはコンテンツのライティングや写真撮影、画像補正やちょっとしたイラスト作成もやります。分業せずに、頭から終わりまで一貫して受け持つパターンが多いです。

    守備範囲は広めながら、これ極めました!と言えるところがない中途半端な感じで悲し…(ちなみに一番好きなのはCSSコーディングです。JavaScriptも楽しい!)

    で、実際の制作案件ではWordPressを導入することがほとんど。なんでもかんでもWPってどうよ?という話はあるのですが、実際、もう静的HTMLの作り方を忘れるくらいどっぷりWordPressに浸かっています。(や、好きなのでいいのですが。)

    で、ワークフローは?

    トップページのデザイン案があらかじめ出ていることが前提となります。自分で作ったり、他の人が作ったり。そしてその後の流れ。

    1. 要件定義、仕様策定。
    2. ほぼ素の状態のWordPressを構築。コンテンツを流し込んで整理。課題問題を浮き彫りにします。
    3. ある程度形になったところで、必要に応じてPhotoShopやIllustratorでカンプ作成やデザインパーツ追加。
    4. WordPrssのテーマ作成。同時にプラグインの実行テストとJavaScriptの実装を行います。

    いわゆるCMSプロトタイピングの手法を取り入れています。2~4の工程をぐるぐる回しながら、クライアントや営業に確認をとって徐々に完成度を高めていく感じです。

    (しかし…ヒアリングなし、当てずっぽうでトップページデザイン作ってページ構成も適当でそのままなんとなくWP構築…なんてことをやるハメになることも多いです…それはいかんハズだろ…)

    いきなりテーマ作成?その前に静的ファイルを作る?

    その人が持つスキルやフローによって最適解が大きく変わると思いますが、自分の場合はいきなりテーマファイル作ります。そもそもWordPressを利用することがほとんどなので、静的HTMLの出番が無いのです…JekyllとかMiddlemanとか機会があれば使ってみたいです。

    WordPressの環境構築に関しては、vccwとかエレガントなものは使ってません。XAMPPで消耗しながら間に合わせてます。

    固定ページ問題

    コーディング時のフローで管理画面の登録フローがはいってしまうのはワークフローは、確実に手間になるのではないかと。

    これはキタジマさん僕の WordPress テーマ制作のワークフロー ( 仕事編 ) – Habakiriでも言及していますが、自分も同意です。

    自分の対処方法としては、BootStrapのグリッドレイアウトで汎用的なレイアウトパターンを組むことに加え、bodyclassを利用してSassでゴリ押しすることでしょうか。

    htmlにはなるべく手を加えずにBootStrapでレイアウトをパターン化し、bodyClassを接頭辞としてスコープを作りつつ、Sassでモジュール化したmixinを使いまわして活用することを意識してます。ある程度はまではなんとかなってます。

    CSSが複雑になりがちですが、管理画面にhtmlを修正しに行くことに比べればいくらかマシかなと。あとはSassの使いこなしや命名規則を洗練させて、少しでもメンテナブルなCSSを目指すことも欠かせません。

    フルスクラッチorスターターテーマ?

    テーマの作成において

    • 何もないところからスタート(フルスクラッチ)
    • 既存や自作のテーマを利用してスタート

    テーマをゼロから作るのか、既存のテーマを土台にしたり、子テーマを利用するフローが良いのかということですが、自分は自作テーマをベースにしてそこからスクラッチしてます。子テーマにもしてません。

    自分のスキルレベルとあまりに乖離したテーマをカスタマイズしようとしても、難しくてかえって工数が膨らんでしまうという悲しい出来事が起こってしまいます…

    自分のスキルレベルの変遷にあわせてテーマを乗り換える必要が出るでしょうし、そうなったらなかなか大変そう。既成テーマがずっとメンテされ続ける期待を持つのもどうかと。

    それならフルスクラッチでも自作テーマでもその時点で自分が把握する範囲のものを使った方が自分の勉強にもなるし、いいかなと思ってしまいます。

    ただ、自分の場合はそろそろ考え方を変えてもいい時期がきたと思っています。前述の問題点は、Habakiriならクリアできそうな気がしてます。

    自分より力量が上の人が作ったテーマを勉強させてもらうことはスキルアップにつながりますし、どこかのタイミングでHabakiriを使わせてもらう考えでいます。

    子テーマに関しては、親となる自作のテーマの作りこみが十分なレベルに達していなかったこともあり、見送り続けてきました。今後は機会があれば取り入れてみて、試すところから始めて見たいと思っています。

    追記:2016/6/23
    うーん、やっぱり子テーマは苦手だ…

    まとめ

    ワークフローが主題でしたが、うんちく的な部分の方が多くなってしまいました。万人に共通してこれが最適というフローはなかなか無いかもしれませんが、ハムさんやキタジマさんのエントリーは大いに参考になりました。ありがとうございました!

    WP REST API(WordPress JSON REST API )について調べてみました。

    最近、WP REST APIが気になっています。

    WordPress › WP REST API (WP API) « WordPress Plugins

    近い将来WordPressのコアにマージされるらしいWordPress JSON REST API を、先行してプラグインの形で提供しているものらしいです。

    このプラグインを使うとWordPressのデータにアクセスして、JSON形式でデータを取得することができるらしく、WordPressのテーマをHTMLとJavaScriptだけで作ることが可能だったり、スマフォアプリや様々なプラットホームにデータを配信できたりするらしいです。

    しかしながら、APIの実装をやったことがないので、勉強がてら少し調べてみました。

    そもそもAPIとは?

    Application Programming Interface(アプリケーション プログラミング インターフェース)の略語。

    APIとは、あるコンピュータプログラムソフトウェア)の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。

    個々のソフトウェアの開発者が毎回すべての機能をゼロから開発するのは困難で無駄が多いため、多くのソフトウェアが共通して利用する機能は、OSミドルウェアなどの形でまとめて提供されている。そのような汎用的な機能を呼び出して利用するための手続きを定めたものがAPIで、個々の開発者はAPIに従って機能を呼び出す短いプログラムを記述するだけで、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。

    近年ではネットワークを通じて外部から呼び出すことができるAPIを定めたソフトウェアも増えており、遠隔地にあるコンピュータの提供する機能やデータを取り込んで利用するソフトウェアを開発することができる。

    APIとは|アプリケーションプログラミングインターフェース|Application Programming Interface – 意味/解説/説明/定義 : IT用語辞典

    じゃあRESTは?

    RESTとは、2000年にRoy Fielding氏が提唱した、分散システムにおいて複数のソフトウェアを連携させるのに適した設計原則の集合。また、狭義には、それをWebに適用したソフトウェアの設計様式のこと。一般には後者の意味で用いられることがほとんどである。

    一般によく使われる狭義のRESTは、パラメータを指定して特定のURLにHTTPでアクセスすると、XMLで記述されたメッセージが送られてくるようなシステムおよび呼び出しインターフェース(「RESTful API」と呼ばれる)のことを指す。システムの状態やセッションに依存せず、同じURLやパラメータの組み合わせからは常に同じ結果が返されることが期待される。ただし、厳密な技術的定義が共有されているわけではなく、「SOAPやRPCなどを必要としない、XMLベースの単純なWebインターフェース」くらいの意味で用いられる場合が多い。

    RESTとは|REpresentational State Transfer – 意味/解説/説明/定義 : IT用語辞典

    何を作る?

    まずはajaxを使って、ページ遷移無しで投稿データをとってきて表示させたい。1ページで完結するようなウェブアプリのようなものをそれらしく作れないでしょうか。

    そんな感じでWordPressのREST APIを覚えていきたいですね。ぐるなびやらはてなやらkintoneやらいろいろAPIがあるので、いろいろなAPIを使うためのいい勉強になると思います。