今まで数回「書籍」に関する記事を書いてきました。そのシリーズの最後の記事がこの投稿になります。これら複数の記事で実現したかったことは、「ISBNコードを入力するだけで書籍APIから書名や著者名などの情報を参照して、表示するカスタム投稿タイプを作る」ということで、今回の記事でそれが完成します(^^)/
楽天ブックス書籍検索API→書籍カスタム投稿タイプ作成→カスタム投稿タイプを表示させる
今まで書いた3つの記事は以下の通りです。
で、楽天ブックス書籍検索APIを使うには？という記事を書きました。ここでは簡単にショートコードで使う方法も書いてあります。
ではカスタム投稿タイプとカスタムフィールドを使って、書籍というカスタム投稿タイプを作るところまでについて書きました。
ではカスタム投稿タイプ用を表示させるためのカスタムテンプレートを作る方法について書きました。
今回は、以前の記事で作った「書籍」カスタム投稿タイプの入力画面で、ISBNコードを入力したときに楽天ブックス書籍検索APIから各フィールドに値をセットする方法について書きます。
事前準備。楽天ブックス書籍検索APIと追加したカスタムフィールドのIDをメモしておく
まずは事前に準備が必要です。
楽天ブックス書籍検索APIのアプリケーションIDを取得
楽天ブックス書籍検索APIを使うために必要なアプリケーションIDを取得する
を参照して、楽天ブックス書籍検索APIのアプリケーションIDを取得しておきます。
カスタム投稿フィールドのIDをメモする
カスタム投稿タイプ「書籍」に追加したカスタム投稿フィールドのIDを調べてメモしておきます。
の2記事により、書籍カスタム投稿タイプが作成済みで、表示用テンプレートもあるという前提で進めています。
調べ方は、
ダッシュボード で 書籍＞新規追加 をクリック、
このように入力画面が表示されるので
右クリックして、ページのソースを表示をクリック
ctrlキーと f を同時に押して、
検索窓に ISBN と入力して、リターン
このように表示されます。ISBNコードのIDを調べます。
<label for="acf-field_5d5e54ce916ed">ISBN13桁 <span class="acf-required">*</span></label></div> <div class="acf-input"> <div class="acf-input-wrap"><input type="text" id="acf-field_5d5e54ce916ed" name="acf[field_5d5e54ce916ed]" required="required"/></div></div>
input type=”text” id=の後にある文字列（この場合は acf-field_5d5e54ce916ed）をコピーしておきます。
これと同じ方法で、書籍名、著者、出版社、発売日、画像urlのIDを調べてコピーしメモしておきます。
管理画面のヘッダに、ISBNから書籍情報を取得してセットするjQueryを追加する
今回追加する動作は管理画面だけで有効にしたいので、管理画面のヘッダにjQueryを追加します。
管理画面のヘッダにコードを追加するには
admin_head アクションを使います。
jQueryのコードをCode Snipettsあるいは子テーマのfunctions.phpで追加する
今回の「ISBN」コード＋APIで書籍情報を自動セットするjQueryのコードは、Code Snipettsあるいは子テーマのfunctions.phpで追加することができます。
code snippetsについては
こちらの記事を参照してください。
今回はとりあえずプラグインcode snippetsを使う方法で説明したいと思います。
code snippetsをインストール後、
ダッシュボード Snippets＞Add New をクリックします。
わかりやすいタイトルをつけてからコードを追加します。
追加するコードは以下の通りです。
add_action( 'admin_head', function () { ?>
<script>
jQuery(function($){
$(document).ready(function(){
// 入力域のID
isbn_field = '#メモしたISBNのID';
book_field = '#メモした書籍名のID';
author_field = '#メモした著者のID';
publisher_field = '#メモした出版社のID';
salesdate_field = '#メモした発売日のID';
image_field = '#画像urlのID';
// isbnが変更されたとき、書籍情報を取得
$(isbn_field).on('change', function(){
// クリア
$(book_field).val('');
$(author_field).val('');
$(publisher_field).val('');
$(salesdate_field).val('');
$(image_field).val('');
$('#rakuten_book_image').remove();
if($(isbn_field).val().length == 13){
// リクエストURLを設定する
$.get('https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?', {
applicationId: "取得した楽天books書籍検索APIのアプリケーションID",
isbn: $(isbn_field).val()
// 結果が帰ってきたらここでそれを受け取り、空でなければ順番に出力していく
}, function(data){
if (data.count > 0){
//console.log(data);
book = data['Items']['0'];
console.log(book);
$(book_field).val(book.Item.title);
$(author_field).val(book.Item.author);
$(publisher_field).val(book.Item.publisherName);
$(salesdate_field).val(book.Item.salesDate);
$(image_field).val(book.Item.largeImageUrl);
$(image_field).after('<img id="rakuten_book_image" src="' + book.Item.largeImageUrl + '">');
} else {
} // if
}); // function(data)
}
});
});
});
</script>
<?php } );
長いのですが(^_^;)、変更するところは、先ほど準備しておいた値で
// 入力域のID
isbn_field = '#メモしたISBNのID';
book_field = '#メモした書籍名のID';
author_field = '#メモした著者のID';
publisher_field = '#メモした出版社のID';
salesdate_field = '#メモした発売日のID';
image_field = '#画像urlのID';
この部分は # を足してメモしておいたIDを入力します。
その他は
applicationId: "取得した楽天books書籍検索APIのアプリケーションID",
この部分です。取得しておいた楽天books書籍検索APIのアプリケーションIDの値で更新します。
Save Changes and Activateをクリック
子テーマのfunctions.phpに追加する場合も上記のコードを貼り付ければ動作すると思います。
書籍情報でISBNコードから書籍の情報がセットされるか、試してみる
これで準備が終わったので、書籍情報で新規追加をしてみます。
ダッシュボード 書籍＞新規追加をクリック
ISBN13桁にコードを入力してどうなるか、見てみます。
このように、ISBNコードを入力後、別のフィールドにカーソルが移ったときに楽天books書籍検索APIから値を取得して、各フィールドにセットします。
この状態で
公開する
公開をクリック。
書籍の一覧画面に、新しい書籍が追加されて
詳細ページにも取得して保存した値が表示されました。
これで楽天楽天books書籍検索APIの呼び出しは、管理画面でISBNコードを入れて取得するときだけになりますのでAPIの制限も気にせずに使えるようになったかと思います。
まとめ：ISBNコードを入力するだけでAPIから正確な情報をセットして保存、表示する一連の流れ
ということで、全4記事になりましたが、ISBNコードを入力するだけでAPIから正確な情報をセットして保存、表示するということができるようになります。
下記にこのブログの記事も合わせて4記事をまとめておきますのでよろしければご覧ください。
コメント