天然パーマです。

フリーのWeb API、Ramen APIを作った

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になります。 なので、写真を埋め込む際は写真のauthoridもしくはnameを表示してもらうことにます。

まとめ

ということでRamen APIを作ったので、ぜひ使ってください>< そして、コントリビュート待っています!