常連

## ■質問

APIサイトとは何でしょうか？
テスト試験で使用するGUIベースのものです。


## ■背景

駆け出しの開発エンジニアです。
最近大手の大規模システム開発に従事しているのですが、
そんな中「APIサイト」なるものをテスト試験で使用しています。
GUIベースのサイトです。
「API」はざっくりと理解しています。
「アプリケーションとアプリケーションを繋ぐ部分の仕様」という
ようなざっくりとした理解ですが、この私の「API」のイメージと
実際今使用している「APIサイト」が噛み合いません。
そもそも「API」はCUIで、目に見えないのになんで？という感じです。

## ■結論

一般論として「APIサイト」なるものはあるのでしょうか？
それともこの現場だけなのでしょうか？
もし一般的にあるのでしたら、一般論を教えて頂きたいです。

APIサイトとは何でしょうか？

### 実現したいこと

gmoコインのAPIで取得した為替チャート（四本値）を処理したい

具体的には、画像の赤部分（3分前の高値("high")) である 149.61 という数値を取り出したいです。

画像
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-27/827a65fd-4e84-4c83-b130-6854ae311242.jpeg)

また、画像②のように Pandas で Dataframe化をしたいです

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-27/28fb0043-386b-4b0e-bb74-56f43923ce3e.png)


### 前提

gmoコインのPublic API（認証不要）を用いて、USD/JPY の四本値を取得しています。

画像では、2023年11月23日の1分足が並んでいます。（おそらく1日の1440分すべてあります）（interval=1min&date=20231123'）

取得はできましたが、その数値処理に困っています

公式HP APIの使い方
https://api.coin.z.com/fxdocs/?python#klines



### 該当のソースコード

```Python
import requests
import json

endPoint = 'https://forex-api.coin.z.com/public'
path     = '/v1/klines?symbol=USD_JPY&priceType=ASK&interval=1min&date=20231123'
response = requests.get(endPoint + path)
print(json.dumps(response.json(), indent=2))
```

### 試したこと

なにしろ1440個も並んでいるため、
print(json.dumps(response.json()[:3], indent=2))
と後ろから３個だけを取り出してみましたが、

TypeError: unhashable type: 'slice'

が出ました

### 補足情報（FW/ツールのバージョンなど）

macOS
Python3


API で取得したデータから、数値だけを取り出したい、またPandasでDataframe化したい

### 実現したいこと
Pythonのrequestsライブラリを利用してSlackAPIを操作し、ファイル(csvなど)をSlackのワークスペースのチャンネルにアップロードしたいです。

### 前提
下記URLページ内の「requestsライブラリでSlackAPIを操作する方法」を実現させたいです
https://miyabikno-jobs.com/slackbot-upload-file/#Slackbot%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E5%87%A6%E7%90%86%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95



### 発生している問題・エラーメッセージ
下記の「発生している問題・エラーメッセージ」のメッセージが返ってきました。
ですが、Slack上には何も反映されていません。ほかに原因が思いつく方いらっしゃいますか？

{'ok': True, 'file': {'id': 'F05T11Q4LER', 'created': 1695197899, 'timestamp': 1695197899, 'name': 'test.csv', 'title': 'test', 'mimetype': 'text/plain', 'filetype': 'text', 'pretty_type': 'プレーンテキスト', 'user': 'U05T0TVCXJ9', 'user_team': 'T05TDE5G308', 'editable': True, 'size': 527, 'mode': 'snippet', 'is_external': False, 'external_type': '', 'is_public': False, 'public_url_shared': False, 'display_as_bot': False, 'username': '', 'url_private': 'https://files.slack.com/files-pri/T05TDE5G308-F05T11Q4LER/'test.csv, 'url_private_download': 'https://files.slack.com/files-pri/T05TDE5G308-F05T11Q4LER/download/test.csv', 'permalink': 'https://testtakeru.slack.com/files/U05T0TVCXJ9/F05T11Q4LER/test.csv', 'permalink_public': 'https://slack-files.com/T05TDE5G308-F05T11Q4LER-cf8679c50c', 'edit_link': 'https://testtakeru.slack.com/files/U05T0TVCXJ9/F05T11Q4LER/test.csv/edit', 'preview': 'import requests\r\n#@SLACKTOKEN\r\nTOKEN = @SLACKTOKEN\r\nCHANNEL = "test"\r\ncntAir = 1\r', 'preview_highlight': '<div class="CodeMirror cm-s-default CodeMirrorServer" oncopy="if(event.clipboardData){event.clipboardData.setData(\'text/plain\',window.getSelection().toString().replace(/\\u200b/g,\'\'));event.preventDefault();event.stopPropagation();}">\n<div class="CodeMirror-code">\n<div><pre>import requests</pre></div>\n<div><pre>#xoxb-5931481547008-5908393168099-7ZD7ZZFsrCqNXN3xkP9g2lxQ</pre></div>\n<div><pre>TOKEN = &quot;@SLACKTOKEN&quot;</pre></div>\n<div><pre>CHANNEL = &quot;test&quot;</pre></div>\n<div><pre>cntAir = 1</pre></div>\n<div><pre></pre></div>\n</div>\n</div>\n', 'lines': 21, 'lines_more': 16, 'preview_is_truncated': False, 'comments_count': 0, 'is_starred': False, 'shares': {}, 'channels': [], 'groups': [], 'ims': [], 'has_more_shares': False, 'has_rich_preview': False, 'file_access': 'visible'}}

### 該当のソースコード

```ここに言語名を入力
import requests

TOKEN = "@SLACK-BOT-TOKEN"
CHANNEL = "test"
url = "https://slack.com/api/files.upload"

files = {'file': open( r'@DirPath\test.csv','br')}
filename = 'test.csv'
headers = {"Authorization": "Bearer " + TOKEN}

data  = {
    'channel': CHANNEL,
}

r = requests.post(url=url, headers=headers, data=data, files=files)
print(r.json())
```

### 試したこと
また、Slackのpermissionは添付画像のように設定しています。
ファイルのパスは間違っていないことは確認できました。

### 補足情報（FW/ツールのバージョンなど）
ちなみに以下に記載のメッセージを送るAPIはうまくいっています。

windows
anaconda
```
import requests

TOKEN = "xoxb-5931481547008-5918947439621-8tPxmy674mPnkHQ4LPS12Beq"
CHANNEL = "test"

cntAir = 0
if cntAir >= 1:
    message = 'There are '+ str(cntAir) + ' airplane transports.'
else:
    message = '0'
    
url = "https://slack.com/api/chat.postMessage"
headers = {"Authorization": "Bearer "+TOKEN}
data  = {
   'channel': CHANNEL,
   'text': message
}

r = requests.post(url, headers=headers, data=data)
print(r.json())
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-20/11c9c5fd-9a8f-41dc-8f74-281a48a04946.png)


Pythonのrequestsライブラリを利用してSlackAPIを操作し、ファイル(csvなど)をSlackのワークスペースのチャンネルにアップロードしたいです。

## テーマ、知りたいこと

日本郵便に次のようなAPIがあるか知りたい
→追跡番号を叩くとステータス（「配達済み」など）が返却されるAPI

## 背景、状況

お世話になります。
上記の通り、日本郵便に追跡APIが存在するかを知りたいです、
自分で調査した限り、
「日本郵便のサイトへ飛ばすことは可能だが、自分のサイトでステータスを確認するAPIは郵便局に問い合わせが必要」
と理解していますが、もし存在するのでしたら教えてください。
よろしくお願いいたします。


日本郵便に追跡APIは存在しますか？

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- 
LineAPIとpythonについての質問です。
下記の関数を動作出来るようにする。
ユーザー認証が上手くいかない。チャンネルユーザートークンが認証出来れば、
全てが上手く行くと思うのですが全くできません。
さらにここからgithubアクションできまった時間に動作するようにするつもりです。
シンプルなプログラムでもう何が悪いか理解できません。
ご教授いただければ幸いです。
### 前提

ここに質問の内容を詳しく書いてください。
pythonでLineAPIをインポートし、テキストメッセージを自身のラインアカウントに
送ろうと思います。
### 発生している問題・エラーメッセージ

```
エラーメッセージ
例外が発生しました: LineBotApiError
LineBotApiError: status_code=401, request_id=1dc29e2a-6d8a-4260-8c38-19c64b9b0880, error_response={"details": [], "message": "Authentication failed. Confirm that the access token in the authorization header is valid."}, headers={'server': 'legy', 'cache-control': 'no-cache, no-store, max-age=0, must-revalidate', 'content-type': 'application/json', 'date': 'Wed, 15 Nov 2023 18:56:46 GMT', 'expires': '0', 'pragma': 'no-cache', 'www-authenticate': 'Bearer error="invalid_token", error_description="invalid token"', 'x-content-type-options': 'nosniff', 'x-frame-options': 'DENY', 'x-line-request-id': '1dc29e2a-6d8a-4260-8c38-19c64b9b0880', 'x-xss-protection': '1; mode=block', 'content-length': '104'}
  File "C:\Users\eisuke0904\Desktop\linebot2\bot\junbot.py", line 12, in main
    line_bot_api.push_message(USER_ID, messages=messages)
  File "C:\Users\eisuke0904\Desktop\linebot2\bot\junbot.py", line 15, in <module>
    main()
linebot.exceptions.LineBotApiError: LineBotApiError: status_code=401, request_id=1dc29e2a-6d8a-4260-8c38-19c64b9b0880, error_response={"details": [], "message": "Authentication failed. Confirm that the access token in the authorization header is valid."}, headers={'server': 'legy', 'cache-control': 'no-cache, no-store, max-age=0, must-revalidate', 'content-type': 'application/json', 'date': 'Wed, 15 Nov 2023 18:56:46 GMT', 'expires': '0', 'pragma': 'no-cache', 'www-authenticate': 'Bearer error="invalid_token", error_description="invalid token"', 'x-content-type-options': 'nosniff', 'x-frame-options': 'DENY', 'x-line-request-id': '1dc29e2a-6d8a-4260-8c38-19c64b9b0880', 'x-xss-protection': '1; mode=block', 'content-length': '104'}

```
実際のjsonファイル全角スペースなども入っていない。また、値も再発行して新しくコピペした。（クリップボートのボタンそのままクリック）加えて、jsonファイルの形式もしっかり守った。VScodeでエラーが検知されていないので正しいと思う。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-16/448d543f-1fa2-4121-ba1b-26fbbc0ae8e2.png)

```
### 該当のソースコード

```ここに言語名を入力
import json
from linebot import LineBotApi
from linebot.models import TextSendMessage
file = open('info.json','r')
info = json.load(file)
CHANNEL_ACCESS_TOKEN = info['CHANNEL_ACCESS_TOKEN']
line_bot_api = LineBotApi(CHANNEL_ACCESS_TOKEN)

def main():
    USER_ID = info['USER_ID']
    messages = TextSendMessage(text='こんにちは')
    line_bot_api.push_message(USER_ID, messages=messages)

main()
----------------------------------------------------------------------------------------------------
jsonファイルである。（一応中身の値は伏せてある。本来元々コピペしたので間違っていないと思われる。

{
    "CHANNEL_ACCESS_TOKEN":"aaa",
    "USER_ID":"aaa"
}
```
### 試したこと
```ここに言語を入力
print(f"CHANNEL_ACCESS_TOKEN: {CHANNEL_ACCESS_TOKEN}")
print(f"USER_ID:{USER_ID}")
CHANNEL_ACCESS_TOKEN: your_token
USER_ID:your_user_id
一語一句そのまま記載する。AIに聞いた程度だが正常っぽい

```
・コピペし間違えてないか？再発行してクリップボートボタンをクリックしたので間違っていないと思われる。
・参考にしたサンプルプログラムと違いがないか確認したが間違ってなかった。
・jsonファイルの形式の確認→正しい形式で記述出来ていたし、デバッグモードで実行し辞書として取り出せていると考えた。

### 補足情報（FW/ツールのバージョンなど）
python3.8系
VScodeで開発,windows PowerShell,win11です。
https://www.youtube.com/watch?v=T0KAE2kq2Xo&t=2007s（参考にした動画）
よろしくお願いします。


Python×LineAPIについての質問。リクエスト認証エラーになる。

現在フロントのHTMLからAPIを叩いてメールを送信しようとしています。
しかし、送信ボタンを押すと下記のようなエラーがコンソールに出力されます
`Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.`

このエラーをググったところ今いるURLから他のURLにリクエストを送ることができないようになっていると書かれてありました
そのためこれを回避するために下記のようのコードを書いたのですが、どうもエラーが解消されません。
どのように書いたらAPIを叩けるのか教えていただきたいです。

```JS
const button = document.getElementById("button");
button.addEventListener("click", function(e) {

    e.preventDefault();

    const name = document.getElementById('name').value;
    const subName = document.getElementById('subName').value;
    const companyName = document.getElementById('companyName').value;
    const pref_name = document.getElementById('pref_name').value;
    const location = document.getElementById('location').value;
    const companyLocation = document.getElementById('companyLocation').value;
    const tellNumber = document.getElementById('tellNumber').value;
    const mailAddress = document.getElementById('mailAddress').value;
    const question = document.getElementById('question').value;

    function sendmail(subject, body) {
        return fetch('MY-API', {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ subject, body })
        }).then(onLoadFunc);
    }
    sendmail(name,subName,companyName,pref_name,location,companyLocation,tellNumber,mailAddress,question);
});
```

CORSでJSからAPIを叩けない

### 実現したいこと

営業時間外であれば「営業時間外です」と表示させたい

### 前提

GASで　営業時間外に「ChatWork」にメッセージが来たら自動的に「営業時間外です」という表示をしたいのだが、対応しているルームに営業時間外でメッセージを送るが「営業時間外です」というメッセージが表示されません。このコード自体は下記のサイトをほぼそのまま利用して作ったのだが、どういうわけかGASエディタ内では動くものの、Weｂhookに設定を変えた途端上手く出来ません。
セキュリティ関連で何か起きているのかそれともなにか見逃しているのか見当がつきません。
お願いします。

・下記のサイトを基にしてプログラムを作成した
https://creators-note.chatwork.com/entry/gas-auto-reply

パソコン　スペック　windows10


以下試した事
・webhooktest()を作成し、そのコードをGAS上のエディタで実行を行ってみると該当の
ルームに「営業時間外」と表示させる事が出来た。



### 発生している問題・エラーメッセージ

```
// 【編集対象】Chatwork API Token
const token = 'aaaa';//（※実際は違うものを記載しています）
// 【編集対象】営業時間（数字4桁、例：8時→0800、20時30分→2030）
const open_time_hhss = '0900';
const close_time_hhss = '1000';
// 【編集対象】自動応答対象グループチャットのルームID
const target_room_id = '1111';//（※実際は違うものを記載しています）
// 【編集対象】自動応答メッセージ
const replay_message = '申し訳ございません、営業時間外となります。';

function doPost(e) {
  
   Logger.log('Received Request: ' + JSON.stringify(e));

  let json = JSON.parse(e.postData.contents);
  let from_account_id = json.webhook_event.from_account_id;
  let message_id = json.webhook_event.message_id;
  let room_id = json.webhook_event.room_id;

  let send_time = new Date(json.webhook_event.send_time*1000);  // メッセージ送信時間
  let open_time = getDateFromString(open_time_hhss);  // 営業時間（開始）
  let close_time = getDateFromString(close_time_hhss);  // 営業時間（終了）


  if(send_time < open_time || close_time < send_time){
    // 営業時間外か
    if(checkRoomID(room_id)){
    // 自動応答対象のグループチャットの場合、定型文を送信
      var message = '';
      message += '[rp aid=' + from_account_id;
      message += ' to=' + room_id + '-' + message_id + '] ';
      message += replay_message;
      var client = ChatWorkClient.factory({token: token});
      client.sendMessage({
        room_id: room_id,
        body: message
      });
    }
  }


}





// 文字列（hhss）をDate型にして返却する
function getDateFromString(hhss){
  let date = new Date();
  date.setHours(hhss.substr(0,2));
  date.setMinutes(hhss.substr(2,2));
  date.setSeconds(0);
  return date;
}

// 指定したグループチャットのルームIDか判断する
function checkRoomID(room_id){
  if(target_room_id.split(',').includes(String(room_id))){
    return true;
  }
  return false;
}


function testWebhook() {
  // テストデータを作成します。これは実際のWebhookデータを模倣します。
  var testData = {
    postData: {
      contents: JSON.stringify({
        webhook_event: {
          from_account_id: '12345', // 送信元アカウントID
          message_id: '67890',      // メッセージID
          room_id: '1111',  // ルームID（※実際は違うものを記載しています）
          send_time: Math.floor(Date.now() / 1200) // 現在時刻（UNIXタイムスタンプ）
        }
      })
    }
  };

  // doPost関数を呼び出してテストを実行します
  doPost(testData);
}
```



### 試したこと

・webhooktest()を実行して該当のルームに「営業時間外」というメッセージはちゃんと届いていた
・ちなみにdoPostの最初にあるログは以下のようなのが出ました

15:04:38	情報	Received Request: {"postData":{"contents":"{\"webhook_event\":{\"from_account_id\":\"12345\",\"message_id\":\"67890\",\"room_id\":\"1111\",\"send_time\":1411938232}}"}}

・設定や操作のミスの可能性もあるので以下どういう手順で行ったかも写真つきで説明します。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-10/03b8ab91-0d81-4ae3-86e4-6661d90ff1a9.png)
1.デブロイボタンを押した

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-10/581fa18e-dc73-4d42-9515-920de69efb41.png)
２．URLのコピーを行い、その後完了ボタンを押した

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-10/adf6254b-145a-41b3-8ece-2c6604c0dd22.png)

3、上記の設定を押した後にしたにある保存ボタンを押した。

４，別のアカウントから該当のルームにメッセージを送るが、営業時間外というのが返ってこなかった。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
・実験的なこともあるのでルームの部分も送信者もどちらも個人事業主のフリープランとして実行を行った。
・４の後のGASコートエディタの実行の履歴の確認では、実行を行ったデータはなかった。あってもエディタ時にWebhooktest()を行った記録とデブロイ関係のしかなかった。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-10/f0dab6f6-a9d3-4eaa-8ab9-8a6ff77cae4e.png)

【GAS×チャットワーク】Webhookを用いて　doPostを起動したいが出来ない

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- [ ] 図書館の本検索機能のAPIをjQueryで実装したい。

### 前提

現在APIで簡単な図書館の本を検索する機能を実装しています。
いろいろなサイトやchatGPTを利用しながら制作しているのですが検索結果はおろかエラーも表示されません。
コンソールでもエラーがでていないのでなぜこれがいけないのか分からないです。


### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <header class="header">
    <p>Search CiNii Book</p>
  </header>
  <main class="main">
    <section class="search-area">
      <input id="search-input" type="text" placeholder="検索ワード">
      <button class="search-btn btn">検索</button>
      <button class="reset-btn btn">リセット</button>
    </section>
    <section class="list-area">
      <div class="inner">
        <ul class="lists"></ul>
      </div>
    </section>
    <script src="./js/app.js"></script>

  </main>
</body>

</html>
```

```jQuery
"use strict";

$(function () {
  let pageNumber = 1;
  let previousSearchWord = "";

  $("#search-button").on("click", function () {
    const searchWord = $("#search-input").val();
    if (searchWord !== previousSearchWord) {//サーチワードと前回のワードが異なる場合、ページを１にリセットし、リストをemptyで無にする。
      pageNumber = 1;
      $(".lists").empty();
      previousSearchWord = searchWord;
    } else {
      pageNumber++;//同じ検索ワードが使用されている場合はページ数を増やす。
    }

    const apiSettings = {
      "url": `https://ci.nii.ac.jp/books/opensearch/search?title=${searchWord}&format=json&p=${pageNumber}&count=20`,
      "method": "GET",
    };

    $.ajax(apiSettings)
      .done(function (response) {
        const success = response['@graph'];
        displayResults(success);
      })//リクエストが成功すると変数サクセスを表示させる。
      .fail(function (err) {
        displayError(err);
      });//リクエストが失敗すると変数エラーを表示させる。
  });

  $(".reset-btn").on("click", function () {
    pageNumber = 1;
    previousSearchWord = "";
    $(".lists").empty();
    $("#search-input").val("");
    $(".message").remove();
  });//リセットボタンを押すとページ数を１に、検索結果と条件をリセット

  function displayResults(success) {
    if (success && success.length > 0) {//１つ以上のsuccessがある時に実行
      const extractedData = success.map(item => ({//extractedDateという関数にsuccessからデータを格納。
        title: item.title || "タイトル不明",
        author: item["dc:creator"] || "著者不明",
        publisher: item["dc:publisher"] ? item["dc:publisher"][0] : "出版社不明",
        link: item.link["@id"]
      }));
      if (extractedData.length > 0) {
        $.each(extractedData, function (i,item) {
          const listItem = `<li class="lists-item">
            <div class="list-inner">
              <p>タイトル：${item.title}</p>
              <p>著者：${item.author}</p>
              <p>出版社：${item.publisher}</p>
              <a href="${item.link}" target="_blank">書籍情報</a>
            </div>
          </li>`;
          $(".lists").prepend(listItem);
        });
      } else {//検索結果が１つもなかった場合メッセージを表示
        $(".lists").before('<div class="message">検索結果が見つかりませんでした。</div>');
      }
    }
  }

  function displayError(err) {//APIがうまく送信されなかったときのエラー
    $(".lists").before('<div class="message">エラーが発生しました。<br>再度更新してください。</div>');
  }
});

//  変数settingsに設定情報などを格納
// const settings = {
//    実行するURL。実行するURLのことをエンドポイントと言います。
//   "url": `https://ci.nii.ac.jp/books/opensearch/search?
//   title=${searchWord}&format=json&p=${pageCount}&count=20`,
//    サーバーに送るメソッド
//   "method": "GET",
//   }
//    Ajaxの実行
//   .doneが通信成功した時の処理、”response”が引数となっていて通信した結果を受け取ってい
//   る
//   $.ajax(settings).done(function (response) {
//   .failが通信に失敗した時の処理、”err”にサーバーから送られてきたエラー内容を受け取って
//   いる。
//   }).fail(function (err) {
//   });




```




### 試したこと

displayを多用しがちだったのでその関数を変更しました。(今は成功した物ということでsuccessになっています)
またeachでこのように記載していたものをmap関数を使うことで展開してみました。
```ここに言語を入力
``` $.each(results, function (index, item) {
        const listItem = `<li class="lists-item">
          <div class="list-inner">
            <p>タイトル：${item.title || "タイトル不明"}</p>
            <p>著者：${item["dc:creator"] || "著者不明"}</p>
            <p>出版社：${item["dc:publisher"] ? item["dc:publisher"][0] : "出版社不明"}</p>
            <a href="${item.link["@id"]}" target="_blank">書籍情報</a>
          </div>
        </li>`;
        $(".lists").prepend(listItem);
```

有識者の方にお力添えいただければ幸いです。
