前回の記事では、プログラミング初心者の私がMUIを使ってツールのフロントエンドを作成したところまでを紹介しました。
今回はその続きとして、実際にAPIと連携させてツールを完成させる過程をお届けします。
APIとの接続に挑戦する中で直面した課題や、解決方法についてもお話しします。
予想外の波乱もありましたが、最終的には無事にツールが完成！これからその道のりを紹介していきます。
この記事は次のような人におすすめ！
- プログラミング初心者で、ツール開発に挑戦してみたい人
- 初めてAPIを選定・利用しようとしている人
- 自分のアイデアを形にしたいけど、一歩踏み出せずにいる人
APIの旅：無事にデータ取得成功まで
見た目は無事にできたので、次はAPIを繋いで、本のタイトルから値段を取得しよう！
最初に、昔使ったことがあるAmazon APIを選ぶことにしました。
特に比較検討もせず、Amazon Product Advertising API（PA-API）を使うことに決定！
しかし、これが沼の入り口だとはその時、思いもしませんでした…。
PA-APIを使ってデータを取得しようとしたものの、アクセスしてもデータがうまく取得できませんでした。
指定の仕方が違うのか？と悩み、ChatGPTにも色々と聞いてみましたが、指定のファイルをすべてコピペして変えても一向に解決せず…。途方に暮れる日々が続きました。
ここで、ChatGPTの限界を感じ、「やっぱりちゃんとコードを理解しないとダメだ！」と痛感。
さらに調べると、PA-APIを使い始めるためにはいくつか条件がありました。
Amazonアソシエイト・プログラムに参加が承認された状態で、過去30日以内に1円以上の発送済み商品売上を発生させている必要がある という条件が…。
確認してみたところ、なんと私、これを満たしていませんでした！
最近、アフィリエイト活動をしていなかったので、この条件をクリアするのは難しいなと気づきました。
しかも、今後もアクセスできなくなる可能性があることに気づき、正直かなり焦りました。
そこで、急遽APIを選定しなおすことに。
慣れていないことだったので、精神的にもかなりコストがかかりました…。
楽天ブックスAPI
次に、価格を取得するために楽天APIを見てみることにしました。
売値が定価と異なるため、値段を取得できるか不安でしたが、実際に引ける値をチェックしてみました。
すると、定価がちゃんと引けるじゃないですか！やったーと思った瞬間、横に注意書きが…。
なんと、仕様が変更されていて、定価の情報が取得できないとのこと…。
な、なんで仕様変更しちゃったのー！と、思わず涙が…。
まぁ、世の中いろいろありますよね…。残念ながら、定価は取得できないようですが、販売価格は取得できることがわかりました。
販売価格は大体定価よりも安くなるため、一番高い価格を取得すればいいかなぁと思いましたが、もしプレミアがついている商品だと定価よりも高くなる可能性もあるので、結局その方法は諦めることにしました…。
国立国会図書館API
次に、国立図書館のAPIがあると知り、これでいけるかも！と調査を始めました。
公式サイトで調べてみると、いくつかの選択肢があり、ひとまず「価格がありそう」と思ったものを申請することにしました。翌日には、メールで承諾がありました。
以下を 使用するデータベースとして申請しました。
▼使用するデータベースの名称
国立国会図書館ダブリンコアメタデータ記述（DC-NDL）
リンク
これがメタデータの記述フォーマットであり、データベースそのものではないことが説明されていました。
メタデータをAPI経由で取得するためには、別のデータベースを選ぶ必要があるということです。
自分の理解力のなさに愕然としつつ…。
しかし、利用は承認されているので、もう使っちゃうぞ！と意気込んだものの、エンドポイントが分からず、また右往左往…。
ChatGPTに助けてもらいながら、ようやくエンドポイントを特定！
試しにブラウザで開いてみると…
価格が表示されない！
「なんでぇ〜？」と思い、再度調査。
どうやら価格は、あるものとないものがあるようで、私が見たものは入っていなかったのです。
入っていないものが多いのかな？と予想し、また別のAPIも見てみることに…。
OpenBD
OpenBDが、価格が取れると判明。
ISBNをキーにする必要があり、本のタイトルから直接引っ張ることはできない仕様ですが、それでもゴールとしては価格が取得できるのでOKです。
ブラウザで開いてみて、価格がちゃんと表示されることを確認。
そこで、ChatGPTにお願いして、入力したISBNから本の価格を出してもらうことに成功しました。
しかも、OpenBDは申請が不要！便利！！
価格が引けたことで、心がだいぶ落ち着きました。
「もうこれで完成にしちゃおうか？」という悪魔のささやきもありましたが、
ISBNを調べてツールに入力して価格を出す手間を考えたら、普通にGoogleで検索したほうが早いわって察したので、自らを奮い立たせて次のステップに進みました。
Google Books APIs
次に、本のタイトルからISBNを紐づける作業に取りかかりました。
まず、国立図書館のAPIを使うと良いかと思い、ブラウザでクエリを打って確認しましたが、ISBNがないものが多く見受けられました。
そこで、Google Books APIを調べてみることに。記事によると、こちらであればISBNが取得できるとのこと。
ブラウザでアクセスして、検索結果にISBNが出てくるか確認したところ…出てこない。
「どうして？」と思い、さらに調べていると、どうやらエラーが表示されていることに気づきました。
その後、別の記事を読んでみると、Google Books APIはそのままアクセスできるとのことが書かれており、少し謎が残りました。
ここで、ChatGPTに質問してみたところ、APIを利用するためにはGoogle Cloud Consoleで設定をする必要があることが判明。
Google Cloud ConsoleでAPIキーを取得し、APIキーを指定してリクエストを行うことが必要でした。
以下の手順で進めました。
- Google Cloud Consoleにログイン
- プロジェクトを作成（または既存のプロジェクトを選択）
- ナビゲーションメニューの「APIとサービス」>「ライブラリ」から「Google Books API」を選択して有効にする
- 「認証情報」セクションで「APIキー」を作成
- リクエストにAPIキーを指定し、以下のURLを使用bash
コードをコピーする
https://www.googleapis.com/books/v1/volumes?q=本のタイトル&key=YOUR_API_KEY&maxResults=10これで、本のタイトルから価格を取得することができました！
やりきった感がすごくて、あとはアップロードするだけだ〜〜〜と思っていましたが、
アップロードの際にまたつまずくことになりました…＞＜
ポイント：APIの仕様をしっかり調査してから開発を始めよう！
アップロードの迷走：必要なファイルの確認と整理
アップロードするファイルが何かわからず、全部アップロードしたため、かなりの時間がかかりました。
その後、必要なファイルを確認したところ、実際には全部ではなく、以下のような構成で良いことがわかりました。
/your-project/
|-- build/ # フロントエンドの静的ファイル
|-- server/ # バックエンドコード
|-- package.json # 必須
|-- package-lock.json # 必須あれ、そうだったんですね…。
不要なファイルを削除するのにもまた時間がかかりました。
ポイント：必要なファイルを事前に確認してアップロードしよう！
アクセスエラーから解決へ：相対パス設定と動作確認
アクセスすると、こんなエラーメッセージが…。
Forbidden
You don't have permission to access this resource.ん？権限の問題？.htaccessの書き換えたり、WordPressの設定確認したりいろいろしましたが、うまくいきませんでした。
ソースコードを確認してみたところ、相対パスが意図通りに動いておらず、JavaScriptが正しく読み込まれていないことに気づきました。
そこで、package.jsonにhomepageの設定を追加することで解決！
"homepage": "/karitoku"その後、npm run buildを実行し、サーバーにアップロード。
無事に動作しました！
ところで、なぜbuild/ディレクトリ内でしか表示されないのか？
「karitoku/」で表示したいのにどうして…？
build/の中身を展開したら正常に動作しました。
そしてここで気づきました。
faviconとtitleがReactのまま！
これを変更するには、public/index.htmlを編集する必要がありました。
注意点として、build/index.htmlは、npm run buildを実行するたびに上書きされてしまうので、
変更内容が消えてしまうことに注意が必要です。
そもそも、build/index.htmlは改行なしで圧縮されているので、編集がしづらい…。
さて、ここまでで開発は完了です！お付き合いいただきありがとうございました。
実際にツールを試すには、こちらのリンクからどうぞ。
ポイント：まずはコンソールでエラー内容をチェック！
この開発を通して学んだこと
API選定の重要性
API選定の大切さを痛感しました。この開発で、多くの時間をAPIの選定と調査に費やしましたが、その経験から学んだことは大きいです。
最初に仕様をしっかり調べ、設計を整えることで、開発スピードが格段に上がりますし、無駄な手戻りを減らせます。
計画を怠らないことの重要性を改めて実感しました。
ChatGPTの使いどころ
当然ながら、ノーコードでの開発は無理でした。
エラーが延々と解消しなかったり、足りない情報のせいで進まなかったりする場面もありました。
ChatGPTだけに頼って開発を進めるのは難しく、基本的な理解がなければ、何が問題なのかさえ分からなくなります。
ChatGPTは「強力なサポートツール」です。
例えば、MUIを使った画面作成では、驚くほど簡単に作成してくれて、とても感動しました。
こうしたサポートのおかげで、難しい作業も乗り越えられたと感じています。
今後やりたいこと
ツールとしては、以下のような改善を考えています。
まず、ページ数を取得できる機能を使って、1ページの紙の厚さを0.12mmと仮定し、積み重ねて「月まで届いた！」といったユニークな体験を提供したいです。
実はデザインも、月明かりで読書をしているイメージで作っているのですが、実装中に思いついて追加したものの、一人でやるにはなかなか月に届かず…（笑）。
このため、データを溜めていくか、みんなで挑戦する形にする必要がありそうです。
それには、DBにデータを残す必要があるので、DBの管理や操作については、今後の改善課題として取り組む予定です。
次に、Google Books APIの網羅性に関する問題に直面しています。
タイトルを完全に入力しても、別の本が出てきてしまうことがあるんです。
これについては、選択肢を作ってユーザーに選んでもらう形にするのも一つの方法ですが、
この問題を解決するには、API自体を変更するか、「この本の情報は手動で入力する」というUIにするのが現実的かもしれません。
さらに、プログラミング弱者なため尻込みしていたツール開発にも挑戦してみようという気持ちが湧いてきています。
新しいことに挑戦すると、つまずくことが多いのは確かですが、それでも進むことで見える未来もあるので、できるだけ楽しみながらやっていきます。
