TL;DR
- Ramen APIを作った
- REST API、GraphQLにも対応している
- 登録・認証いらず、完全無料
- プロトタイピングやテストに使える
- 店ごとのラーメン写真が手に入る
- 現在、26店舗登録されている
- 例えば、Reactを勉強する時に使う
- GitHubリポジトリにてコンテンツを追加できる
- 詳しくはGitHubリポジトリを見てもらいたい
Base URL:
https://ramen-api.dev
サンプルリクエスト・レスポンス:
// GET https://ramen-api.dev/shops/yoshimuraya?pretty
{
"shop": {
"id": "yoshimuraya",
"name": "吉村家",
"photos": [
{
"name": "yoshimuraya-001.jpg",
"width": 1200,
"height": 900,
"authorId": "yusukebe",
"url": "https://ramen-api.dev/images/yoshimuraya/yoshimuraya-001.jpg"
}
]
}
}
Ramen APIとReactを使ったサンプルアプリ:
リポジトリ:
モチベーション
例えば、新しいフロントのフレームワークがでたら、試したいですよね。 よくある「TODO」アプリを作るのもいいですが、外部のWeb APIと通信してごにょごにょ するを作った方が実用的、実践的でしょう。 そんな時に認証なしで素早く使えるWeb APIが欲しい。 大昔は認証不要で使えるものがたくさんありましたが、今は登録や承認が必要で、 Rate-Limitが設けられていたりします。 まぁ限られるわけですが、それがGitHub APIだったり、JSONPlaceholderだったりします。
ただ世の中探してみると、おもしろいもので、ポケモンのAPIとスターウオーズのAPIなんてあります。
いいですね。そこでひらめいたのが、ラーメンAPIです。 というのも、皆さんがポケモンやスターウオーズを好きなように私はラーメンが好きです。 それに自分で撮ったラーメンの写真がたくさんあるので、それが使えます。プロトタイピングの時点でこうした「リッチな」写真を利用できるのは嬉しいことでしょう。
そこで作ったのがRamen APIです。
Ramen API🍜
こんなコードで「吉村家」という文字列が取れます。
fetch("https://ramen-api.dev/shops/yoshimuraya")
.then((res) => res.json())
.then((json) => console.log(json.shop.name)); // => 吉村家
その他、使い方・エンドポイントや注意点についてはGitHubリポジトリを見ていただきたいです。
いうても、RESTのエンドポイントは3つしかありません。
GET /shops
GET /shops/{shopId}
GET /authors/{authors}
それにラーメン屋情報といっても、「店名」くらいです。
ただ、店ごとに一枚以上の写真がありますし、ちゃんと実装しようとするとページング処理を書かなくちゃいけなくなるので、プロトタイプするにもそれなりにやることはあります。 それにGraphQLも吐いています。
ReactとCloudflare Workersを使ったサンプルがこちらになります。
ふつーに、「Cloudflare WorkersでReactを動かす」を検証するのに便利です。
Ramen APIぜひ使ってみてください！
コントリビュート
いまのところ、「26店舗」が登録されています。 僕が自身のラーメンフォルダを漁ってでてきた写真を元に作りました。 アプリケーションのソースコードだけではなく、写真を含めたコンテンツは全てGitHubで管理をしています。
こちら、ラーメン屋情報と写真を追加してもらってPull Requestを出してくれれば、基本的に取り込むことが可能です。どんどん増やしたいです！お願いします。
ちなみに、写真は全てCreative CommonsライセンスのCC/BYになります。
なので、写真を埋め込む際は写真のauthorのidもしくはnameを表示してもらうことにます。
まとめ
ということでRamen APIを作ったので、ぜひ使ってください＞＜ そして、コントリビュート待っています！
loading...