楽天ブックスAPIを使って、書籍情報を表示する方法【WordPress用のサンプルコード付き】

2023-09-172023-09-18

当ページのリンクには広告が含まれています。

当サイトでは、一応読んだ本の感想をメインコンテンツっぽい感じで紹介しており、その中で書籍情報を表示するようにしています。

今回はこの書籍情報をどうやって表示してるのってのを紹介しようと思います。

利用するもの

楽天ブックスAPI

タイトルの通り、このサイトでは楽天ブックスAPIを利用しています。ドキュメントは以下↓

プログラムを実行する環境

今回はWordPressサイトに置く前提で進めます。なので、サンプルコードはPHPがベースになります。ただ、それにこだわる必要もないので、ローカルでもサクッと動くJavaScriptのコードも紹介します。

WordPressの記事ページに書籍情報を表示する手順

今回は当サイトと同様に、記事ページに書籍情報を表示する手順を紹介します。

書籍情報を取得するコードを、各ページからショートコードで呼び出せるようにします。APIの実行にはRakuten Web Serviceから発行したアプリケーションコードが必須となるので、お持ちでない方は先に取得してください。

function.phpに書籍情報を取得する関数を追加

WordPressのテーマには、テーマ内で利用する関数をまとめたファイル「function.php」が用意されています。ここに、コードを追加して関数として呼び出せる状態にします。親テーマ側に追記しても動きますが、できれば子テーマ側のファイルに追記するようにしましょう。

以下が追記するコードです。

/* 
 * 楽天書籍APIの実行関数
 * 引数：ISBNコード（13桁）
 */
function show_book_information($atts){
    extract(shortcode_atts(array(
        "isbn" => '',
    ), $atts));
    if (!$isbn or strlen($isbn) != 13){
        return '';
    }
    
	// リクエスト編集
    define('APPLICATION_ID' , '1234567890123456789'); // ダミー値。アプリケーションコードは発行したものを使用
    define('ACCESS_URL' , 'https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?');
    $params = array();
    $params['format'] = 'json';
    $params['applicationId'] = APPLICATION_ID;
    // ショートコードで指定されたISBNコードをセット
    $params['isbn'] = $isbn;
    $requestURL = ACCESS_URL;
    foreach($params as $key => $param){
        $requestURL .= "&{$key}={$param}";
    }
    
    // API連携
    $request = file_get_contents($requestURL);
    // 返却値をjsonに変換
    $info = json_decode($request, true);
    if (count($info) == 0) {
        return '';
    }
    
    // 出力パラメータを変数に
    foreach ($info as $key => $Items) {
        if ($key == "Items") {
            // htmlの編集
            return _editRakutenBookInformationHtml($Items['0']['Item']);
        }
    }
}
// 関数をシュートコードとして利用できるようにする
add_shortcode('show_book_information', 'show_book_information');
/* 
 * HTMLの編集
 * 引数：API返却値の先頭レコード
 */
function _editRakutenBookInformationHtml($item) {
    
    // タイトルが取得できない場合はセクションの表示をしない
    if (is_null($item['title'])) {
            
        return '';
    }
    
    // 表示したいHTML形式をここで指定する
    $html = '
    <h2>書籍情報</h2>
    <table class="tableBook">
        <tr><th>タイトル</th><td>%s</td></tr>
        <tr><th>著者</th><td>%s</td></tr>
        <tr><th>出版社</th><td>%s</td></tr>
        <tr><th>発売日</th><td>%s</td></tr>
        <tr><th>商品説明</th><td>%s</td></tr>
        <tr><th>画像</th><td><img src="%s"></td></tr>
    </table>
    <p>※書籍情報は楽天ブックス書籍検索APIを利用して表示しています。</p>
    ';
    return sprintf($html, $item['title'], $item['author'], $item['publisherName'], $item['salesDate'], $item['itemCaption'], $item['largeImageUrl']);
}

show_book_information($atts)関数がメインの関数になっており、ショートコードとして各記事ページから呼び出せるようにしています。この関数でリクエスト項目群の設定と、API実行をしています。

また、今回は取得した情報を呼び出し側で編集しなくていいように、_editRakutenBookInformationHtml($item)関数でHTMLに編集しています。ここについては表示したい項目に併せて編集していただければと思います。

上記の項目以外にも楽天での在庫切れだったり、どのくらいで届くか、などの情報も利用できます。詳細な情報は上記のドキュメントページを確認してください。

また、リクエストはGETパラメータ形式、レスポンスはJSONです。表示に利用する際はキー物理名を間違えないように気を付けてください。

記事ページ側からショートコードで呼び出し

以下のショートコードを利用して、記事ページから書籍情報を取得するAPIを実行します。引数はISBNコードとします。

[show_book_information isbn=13桁のISBNコード]

これで各記事ページに書籍情報が表示されるようになります。

補足情報など

ISBNをキーとして書籍情報を検索しに行くので、ISBNコードが指定されていない場合はAPIを実行せずに空文字を返却するようになっています。なので指定し忘れても無駄に連携することはないですが、逆にいうと適当な数字13桁を指定すると検索しに行ってしまうので、利用する際は事前に書籍のISBNコードを調べてから利用するようにしてください。

参考ですが、楽天で該当の書籍を調べると、以下のようにISBNコードが表示されます。

因みに、今回はISBNコードで検索を実施していますが、作品名や著者名などでの検索も可能です。ここではなるべく検索結果を一意に近い状態にしたかったのでISBNコードを利用していますが、一覧検索を作りたい場合なんかは他の要素で検索をかけれる状態の方が便利だと思います。

参考：JavaScriptで表示する場合

以下はJavaScriptを利用して、画面から入力したキーワードにヒットした書籍情報を一覧で表示するサンプルコードです。ローカルで手軽に試せるので、アプリケーションコードを取得している方は試してみてください。もちろん前述のコード同様ISBNコードをキーにしても大丈夫です。その場合はスクリプトのapiUrl定数と、その上の行を修正すればOKです。

JavaScriptのコード

function searchBooks() {
    const apiKey = 'アプリケーションキーを入力';
    const keyword = document.getElementById('keyword').value;
    // APIリクエストのURLを構築
    const apiUrl = `https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?format=json&applicationId=${apiKey}&title=${encodeURIComponent(keyword)}`;
    // APIリクエストを送信
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            displayResults(data.Items);
        })
        .catch(error => {
            console.error('APIリクエストエラー:', error);
        });
}
function displayResults(items) {
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = ''; // 結果をクリア
    if (items.length === 0) {
        resultsDiv.textContent = '該当する書籍はありません。';
        return;
    }
    items.forEach(item => {
        const title = item.Item.title;
        const author = item.Item.author;
        const imgURL = item.Item.largeImageUrl;
        const bookDiv = document.createElement('div');
        bookDiv.className = 'book';
        const titleElement = document.createElement('h2');
        titleElement.textContent = title;
        const authorElement = document.createElement('p');
        authorElement.textContent = `著者: ${author}`;
        const imgElement = document.createElement('img');
        imgElement.src = imgURL;
        bookDiv.appendChild(titleElement);
        bookDiv.appendChild(authorElement);
        bookDiv.appendChild(imgElement);
        resultsDiv.appendChild(bookDiv);
    });
}

HTMLのコード

<!DOCTYPE html>
<html>
<head>
    <title>楽天書籍検索</title>
</head>
<body>
    <h1>楽天書籍検索</h1>
    <input type="text" id="keyword" placeholder="検索キーワード">
    <button onclick="searchBooks()">検索</button>
    <div id="results"></div>
    <script src="script.js"></script>
</body>
</html>