見出し画像

ノーコードから開発を始めた私がAPI使う時に読みたかった記事を書きたいと思う①

Kotaro Izumida

kotarosanの代表、Kotaroです。

前回から日が空いてしまいましたが、その間に開業をおこないました。

ノーコードによる受託開発やコミュニティ運営、また、独自のサービス開発も来年を目処に着手していきます。

＿＿＿＿

さて、前回の記事は多くの方に読んでいただき、またシェアしていただき、ありがとうございました。

実際に読まれた方からも温かいお言葉や支援をいただき、わたしも嬉しく思います。少しでも地域のお役に立てていただければと思います。

そして反応を見る中で思ったのが、「すでに地域向けに受託開発をしている方」が読んでくれる率の高さです。

先月に書いた記事は技術的なものをなるべく排除したつもりですが、やはり店舗向けのHPやアプリを構築するとなると、店舗のスタッフが直接作業するのは難しいのかもしれません。実際は、その地域にいる受託開発をおこなっている開発者や店舗に居るできるスタッフだったりします。

そこで今回は、その方向けの記事を書いてみようと思います。

というより、自分がノーコード開発を始めたときに読みたかった記事を書いてみました。

テーマはWebAPI（以下API）です。

＿＿＿＿

APIってなに？

ググってみましょう。

アプリケーションプログラミングインタフェース（API、英: Application Programming Interface）[1]とは、広義ではソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用するインタフェースの仕様である。

アプリケーションプログラミングインタフェース - Wikipedia https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9より　閲覧日2021/10/25


......最初、この単語に出会ったのは、たしかノーコードラボさんの記事内だったと記憶しています。

上記の記事では、手順通りできたものの、APIがなにかは理解していなかったと思います。（なので応用の方法がわかってませんでした）


のちに、Bubbleで地図を表示させるようなアプリを作る際に、あるプラグインで、また「エーピーアイ」というものを目にしたのですが、まったく概念が理解できず困惑しました。（なんとか質問しまくって形にはできました）

アクセストークン？メソッド？

ノーコードがもっと流行ったら、ノーコードから開発を始めた人が増えると、専門用語にぶち当たって困るんじゃないかなと想像しています。

「API」を使えると便利、とは聞くものの、なにがどう便利なのか？そもそも使うまでが不便なのだが...みたいな状況になるはずです。たぶん。

なので今回の記事ではそのあたりを説明してみようと思います。正確な情報というよりも理解できる情報というところに重きをおいて書いていきます。まぁ誤り・抜けがあれば都度ググってくだせぇ。お手数おかけします。


＿＿＿＿


ずばり、APIとはなにか？ざっくり（僕の理解で）いうと、こういう感じです。

アプリ"が"主語のサービスみたいな感じ


もうちょっと具体的に話すと...。

画像31

画像32

㈱お天気データ集める君では、自社サービス用に集めたお天気データをAPIという形で公開しています。

アプリ開発者であれば、そこへアクセスしてそのデータを利用することができます。

＿＿＿

Aさんは、アプリ利用者が、（アプリ利用者の）住んでいる地域を入力すると、入力した地域の天気を表示してくれる、みたいなアプリを作ろうとしています。

画像31

しかし、Aさんは、

・正確なデータを所持していない
・データを取り続けるのが難しい

といった問題を抱えています。
（そんな前提でお天気アプリを作り始めようとしないで、というツッコミはなしで...）

そこで、㈱お天気データ集める君が公開しているお天気データを、自分で作るアプリに組み込もうと考えました。

ここで登場するのがAPIというわけです。


APIは一種のサービス利用と気軽に考えてみたら理解できるんじゃないかなと思ってます。


通常、わたしたちもWeb上のサービスを利用するときに、会員登録をして、IDとパスワードを発行し、ログインしてから利用することが多いですよね。

APIでは、主語が、個人ではなくて、アプリになっているイメージです。

アプリが会員登録をおこない、IDとパスワード的なものをもらい、サービスを利用する、そんなイメージです。（もちろんアプリが意思をもって登録作業とかはできないのでアプリ制作者が代行するみたいな感じです）

APIでは、ここでいう"IDとパスワード"のようなサービスを利用するために必要な情報は、API提供者側が用意します。（APIキー・APIシークレットキー）
さらに、一般的なサービスは、セキュリティ強化（個人を特定するため）のために2段階認証などを用いたりしますが、APIでは、アクセストークンという権限を証明するものをもっているアプリがあることでそれを実現しています。

まとめると...

画像33

ちなみに、無料のもあれば有料のも当然にあります。（普段わたしたちが利用するサービスと一緒ですよね）

💡まとめ
APIは、アプリ"が"主語のサービス。
私たち一般ユーザーが使うサービス（SNSとか映像サービスとか）みたいに、IDとパスワードを発行して使うWebサービスの、アプリそのものがユーザーみたいなそんな感じ。


＿＿＿＿

使用するAPIを決める

Googleなどで、「使用したい機能　API」と検索するとヒットしたりします。今回は、無料で使えて機能的なAPIを使ってみます。
今回の記事である程度理解できたらご自身の好きなAPIを探して、無料のものからどんどん使ってみましょう。

ということで今回は、楽天レシピカテゴリ別ランキングAPIという、楽天が提供するデータを利用します。

これは何なのかというと、楽天レシピっていう楽天の提供するレシピのサイトに登録してあるレシピのデータを、自分のアプリとかで利用することができますよ～というサービスです。


＿＿＿＿

※楽天のアカウントがない場合は先に作っておいてください。

次に、アプリID（API用のアカウントみたいなもの）を作るのですが、諸事情により、先に、ノーコード側の準備をおこないます。


１．ノーコード側の準備

今回は、Bubbleというメジャーなノーコードで使い方を見ていきたいと思います。だいたいどのツールも原理原則？は同じなので、1つ覚えたら多分だいたい行けると思います。

※Bubbleの会員登録やアプリの新規作成は省略します。

事前にBubble側で適当に１つアプリを作っておいてください。


Bubbleで作ったアプリのURLが必要になるのでプレビュー画面を出してURLを表示します。

画像1

上記画面の「https://◯◯.bubbleapps.io/」がアプリのURLとなります。◯◯の中にはご自身で名付けたアプリ名が入ります。
これをコピーしておき、再度楽天に戻ります。


２．楽天ウェブサービスの準備

ご自身のユーザーページ右上のアプリID発行をクリック

画像2


画像3

アプリ名は任意のものにして、アプリURLに先程コピーしたURLを貼り付けます。「規約に同意して新規アプリを作成」をクリックします。

画像4

これでAPI用のIDを入手できました。

次に、楽天レシピカテゴリ別ランキングAPIの使い方（仕様）をみてましょう。人によってはこの時点で拒絶反応出るかもですが、大丈夫。はじめはみんなそうなので（たぶん）



まず、確認しないといけないのが以下のリクエストURLというやつです。

画像5


これは、どうやってデータをリクエストするのか？の大事な情報です。

画像6

図で言うと上の①の部分ですね。

もうちょっとよく見てみましょう。

https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?[parameter]=[value]…

リクエストURLのお尻に

?[parameter]=[value]…と続いていますね。

これは、パラメーターと呼ばれるもので、条件を指定したり、必要な値を入力するために必要な箇所です。

？マーク以降をクエリ（ストリング・文字列）と呼びます。

各APIには、「必ずクエリにこのパラメーターを含めてくださいね〜」という決まりが存在する場合があります。

このAPIの場合はどんなルールがあるかというと...

画像7

一覧の一番上の行に、「必須」に「◯」がついているパラメーターは必ず、そのクエリに含めなければならない、という決まりがあるようです。

（各APIの説明によってこの辺はマチマチですが、必須って書いてあるパラメータは必ず入れる必要があります。入れないとエラーとなりデータのやり取りができません）

では、具体的にどのように記載するかというと、

例）アプリIDが「1111122222223333444」だとすると、

https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426
?applicationId=1111122222223333444（自身のアプリID）

となります。これは必ず含めてください、というルールです。

では試しにこのままリクエストをしてみましょう。

使うのは、ブラウザ上部のURL入力欄です。

画像8

そうすると...

画像9

なにかデータが表示されています！

これで楽天APIでレシピデータを取ってくることができました。


ちなみに、いまのリクエストは、条件を指定していない（他にパラメーターを設定していない）ため、結果を全部表示させるリクエストになっています。そこで、他にも条件を設定しようと思います。

もう一度、APIの説明のページ下部、入力パラメーターの欄を見ると、

画像10

表示するカテゴリを絞るオプションがありそうです。今回は一例として、「categoryId=10-275-516」を追加してみましょう。
（ちなみに楽天レシピの"肉＞牛肉＞牛肉薄切り"カテゴリーのレシピ）

パラメーターを追加する時は、先程のクエリの末尾に「&」マークを付けます。こんな感じ。

https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426
?applicationId=1111122222223333444（自身のアプリID）
&categoryId=10-275-516

そうすると、

画像12

先ほどと表示される結果が変わりましたね。ちなみにこれは、

https://recipe.rakuten.co.jp/category/10-275-516/ 

↑こちらのページの検索結果と対応しています。URLにもカテゴリーのIDが入っているのがわかりますでしょうか。

画像11

補足
このAPIで使う、カテゴリーIDを取得するAPIもあります。

楽天レシピカテゴリ一覧API：https://webservice.rakuten.co.jp/api/recipecategorylist/

なので、実際に運用する際にユーザーにカテゴリーを選ばせる場合はこっちのAPIを使って絞り込み（カテゴリーID取得してから）
→絞り込んだ結果を楽天レシピカテゴリ別ランキングAPIで表示させる、みたいな使い方ができそうな感じですね。

まぁ小難しい話は置いといていいっす。


３．ノーコード側でAPIの接続をおこなう

では次に、Bubbleで先ほどのデータを使ってみましょう。

pluginからAPIと検索して、API connectorがありますので、これをインストールしてください。

画像13

そうするといきなり色々出てきます

画像14

わたしは最初意味がわからなかったんですが、こんな感じです。

画像15

それぞれNameとかAPI Nameとかありますが、これは管理用の名前でOKです。（実際の動作には影響なし）

右上に小さく書いてあるexpandを押すと格納されている部分が出てきます。collapseを押すと逆に格納されます。

ということで、以下のようにしました。

画像16

すこし解説いれます。

・Name：楽天レシピAPI（なんでもOKです）
・Use as：Data
　Bubble上でどう扱うか？という選択肢なので詳細説明は略しますが、今回は画面上に表示させるだけなのでDataとします。
・Data type：JSON
　ここも選択肢がいろいろありますがデータを取ってくるだけなので、JSONでいいです。
・GET
　ここも複数ありますが、GETでいいです。（後述）
・URL欄は以下のように設定

https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426
?applicationId=[applicationId]
&categoryId=[categoryId]

　[〇〇]みたいな部分は、実際の数字を入れるのではなく、一旦上記のURLをコピペします。そうすると、下に、KeyとValueが出現します。

・Key：勝手に作られます。
　ここでは、URLのなかに[applicationId][categoryId]があるので、それぞれその名前のKeyが表示されます。
・Value：
　[applicationId]：自身の楽天ID
　[categoryId]：10-275-516

ここまで入力できたら、下のInitialize callを押します。

画像17

すると…

画像18

なんかでました。

これがリクエストに対する回答（レスポンス）です。それぞれがパラメータ名とその下に小さく1件目のデータが例示されています。

右側の選択肢（text、numberとか）は受け取ったデータをBubble側でどう扱うか？なので数字じゃなくて文字列ですよ、とかまたはその逆などあればここで修正しておきます。
ちなみに選択肢の「ignore field」は、その項目を無視します＝データ取りませんっていう意味です。今回は特に設定せず、下のSAVEを押します。

⛏補足
ちなみに、そのままの画面で下にスクロールすると、「Show raw data」というのがあります。クリックすると、

画像19

なんかいっぱい出てきましたね。あれ…

画像20

なんか見覚えがありますねぇ…。
そうなんです。先ほどブラウザで表示させたデータが、整理されたものなのです。

＿＿＿＿

⛏⛏さらに補足⛏⛏
返ってきたデータのパラメーターに関して、どういったものがどういうパラメーターで返ってくるのか？に関してはAPIのページに必ず説明が載っています。今回の楽天に関してのものは、https://webservice.rakuten.co.jp/api/recipecategoryranking/
の下部、出力パラメーターという表がそれにあたります。

画像21

ね。

画像22

一緒ですね。

なんとなく立体的に見えてきたんじゃないかと思います（たぶん）

４．データを使ってみよう

ということで実際にBubbleで表示させてみます。

エディターでRepeatingGroupを設置します。

画像23

そうすると、Data sourceにAPI connectorのデータが選択できるようになっています。

画像24

画像25

次に、RepeatingGroup内に、画像とテキストを設置してみましょう。

image Dynamic image：
Current cell's 〇〇（自身でつけたAPI Name）result's food ImageUrl

画像26

text：
Current cell's 〇〇（自身でつけたAPI Name）result's recipe Title

画像27

text：
Current cell's 〇〇（自身でつけたAPI Name）result's recipeDescription

画像28

で、プレビューを見てみますと…。

画像29

お～出た～～～

という感じで表示されましたね。

あとは、アプリの仕様に合わせてチューンナップしていってください。
エンジョイAPI Life。

補足
▼ GETってなんだったの？説明なかったけど…
APIで通信するときの決まりにHTTPというルールでやり取りをすると決まっているのですが、そのやり取りのルール内で決められた"方法"をメソッドといいます。
GET、POST、PUT、DELETEなどがあります。
各APIごとに、「こういう指示を出すときは、こういうメソッドでお願い出してね！！」というのがあらかじめ決められています。だからこっち側で勝手に、「うーんじゃあなんとなくPUTで！」とかはできないわけです。
GET＝データの取得、POST＝データの作成、PUT＝更新、DELETE＝削除みたいな大枠はあるものの、基本的にはAPIの説明書に従ってください。

今回の例で言うと、楽天APIのページには特にメソッドの指示はなかったわけですが、データを取得するだけという点、リクエストURLにリクエストクエリを持たせるという点からGETだと判断できたのでGETとしています。


その他

・Airtable（エク◯ルみたいに使えるクラウド上のデータベース）からでもAPI接続でデータを引っ張ってこれます。APIで扱うデータは自分で用意したものでも使用可能ということです（当然といえば当然なのですが）。

・アクセストークンの説明は今回の記事では省略しましたが、上記の内容も含め、そのあたりはまた別の記事で紹介します。


ではまた！


この記事が気に入ったらサポートをしてみませんか？