## Cloudinaryとは？

[Cloudinary](https://cloudinary.com/)は、画像や動画などのメディアを管理・配信するサービスです。

## Cloudinaryの料金

[Pricing](https://cloudinary.com/pricing)

![Cloudinary料金](//images.ctfassets.net/0jyj5pjwic68/6jNNMPZOnMWAlSOzFzbjFz/51c60dab048369149a1ae1e9ace2f34d/____________________________2021-01-29_14.20.36.png)

## imageのアップロード

```bash
yarn add cloudinary
yarn add request-promise
```

JAMStack

個人開発でCloudinary使ってみる

<h2>Cloudinaryとは？</h2>
<a href="https://cloudinary.com/">Cloudinary</a>は、画像や動画などのメディアを管理・配信するサービスです。
<h2>Cloudina...

皆さん**JAMStack**でサイトを構築していますか？今後、さらに**APIエコノミー**が拡大する中で、APIサービスを上手に使い、JAMStackを構築することはビジネスを開始する上でさらに重要になってくる思っています。今回は、便利そうなAPIサービスを調べてまとめてみました！

## Algolia - 検索機能

JAMStackサイトに簡単に優れた検索機能を追加することができます。このサイトも検索にAlgoliaを使っています。

![Algolia](//images.ctfassets.net/0jyj5pjwic68/6SfACe79V7w8hQAhraB5c/69c290c88803ccc7bede85e7ae04510b/Algolia-min.png)


 <a class="read" href="https://www.algolia.com/" target="_blank" rel="noopener noreferrer">Algolia へ移動</a>


## Stripe - 決済機能

簡単に優れた決済機能を追加することができます。決済方法もサブスクリプションなど豊富な手段があります。

![Stripe-min](//images.ctfassets.net/0jyj5pjwic68/Z0VYp16J3iICQycsiHFUV/ace6438015f4530dcab07892ddbf7a2a/Stripe-min.png)


 <a class="read" href="https://stripe.com/jp" target="_blank" rel="noopener noreferrer">Stripe へ移動</a>


## Auth0 - 認証機能

Auth0は、認証プラットフォームです。様々な認証方法を簡単に素早く実装することができます。個人開発者であれば、TwitterログインやGoogleログインなどのソーシャルログイン機能を実装することが多いでしょう。

![Auth0-min](//images.ctfassets.net/0jyj5pjwic68/6fAoFj3aHb60MmBzIdMzc/25453eb6d253cb5e82c2319b8747e44b/Auth0-min.png)


 <a class="read" href="https://auth0.com/jp/" target="_blank" rel="noopener noreferrer">Auth0 へ移動</a>


## Netlify - 主にホスティング

JAMStackという定義や概念を提唱した会社です。**Netlify Hosting**や**Netlify Functions**、**Netlify Forms**や**Netlify CMS**などJAMStackに最適なサービスを提供しています。このサイトもNetlify HostingとNetlify Formsを使用しています。

![Netlify-min](//images.ctfassets.net/0jyj5pjwic68/2twPffl6B8TKMHchJ7qoU7/227fc2c26cdda56a26ee616cbaa3652e/Netlify-min.png)


 <a class="read" href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify へ移動</a>


## Sentory - ログ監視機能

SentoryはWebサイトやアプリケーションにログ監視を素早く統合することができます。ログ監視を詳細にカスタマイズしたり、Web Hooksを使用して、Slackやメールに通知することもできます。

![Sentory-min](//images.ctfassets.net/0jyj5pjwic68/2J7D0TYUWGJLVynno8gJB4/96c6af8f75190aa0669c6031ab4ffb74/Sentory-min.png)


 <a class="read" href="https://sentry.io/" target="_blank" rel="noopener noreferrer">Sentory へ移動</a>


## Disqus - コメント機能

Disqusは簡単に素早くコメント機能を実装することができます。豊富なAPIも用意されています。ブログなどでは、ユーザーとのコミュニケーションを取りたい場合に使用すると良いでしょう。

![Disqus-min](//images.ctfassets.net/0jyj5pjwic68/2hSJ7hMQ3xm5ulZYTcFh8A/af53e710f4d4122a5d657a42c1576f17/Disqus-min.png)


 <a class="read" href="https://disqus.com/" target="_blank" rel="noopener noreferrer">Disqus へ移動</a>


## Pusher - リアルタイム通知機能

Pusherは、WebSocketを介して、リアルタイムの双方向機能を統合できるサービスです。チャット機能やPush通知を実装する際に使えそうです。

![Pusher-min](//images.ctfassets.net/0jyj5pjwic68/6lrO2INlIRdGoTRHCDsDbl/9874d9e60ecc199958d2f0c0deed2805/Pusher-min.png)


 <a class="read" href="https://pusher.com/" target="_blank" rel="noopener noreferrer">Pusher へ移動</a>


## Cloudinary - アセット管理・配信

Cloudinaryは、画像のアップロード、保存、操作、最適化、配信まで行えます。画像は最適化され、CDNを介して配信されます。

![Cloudinary-min](//images.ctfassets.net/0jyj5pjwic68/6gQQjB1I6YIIKPPRmlQpTg/19d1a70b89a2e9557fe1e7fd5af1a6fb/Cloudinary-min.png)


 <a class="read" href="https://cloudinary.com/" target="_blank" rel="noopener noreferrer">Cloudinary へ移動</a>


## Snipcart - Eコマース

Snipcartは、サイトをカスタマイズ可能なEコマースプラットフォームに変えます。HTMLマークアップを使用するだけで、既存のサイトに完全なショッピングカートプラットフォームを追加することができます。支払い処理、配送見積もり、注文管理を行うことができます。

![Snipcart-min](//images.ctfassets.net/0jyj5pjwic68/1J5E6QW54Qsn1E7R4FDJCM/8d6862ba67a53b8f067e11bea61e8a38/Snipcart-min.png)


 <a class="read" href="https://snipcart.com/" target="_blank" rel="noopener noreferrer">Snipcart へ移動</a>


## FaunaDB - データベース

バックエンドを準備せず、直接データベースを使用したい場合に便利でしょう。FireStoreなどと比較し、検討する必要がありそうです。独自言語FQLを使っています。

![FaunaDB-min](//images.ctfassets.net/0jyj5pjwic68/7gnKbsGQNKM9w3VMKxyvCY/1273e7a4944933c42d251fccc9f27fe1/FaunaDB-min.png)


 <a class="read" href="https://fauna.com/" target="_blank" rel="noopener noreferrer">FaunaDB へ移動</a>


## Hasura - データベース

バックエンドを準備せず、直接データベースを使用したい場合に便利でしょう。こちらはRDBを使用できます。

![Hasura-min](//images.ctfassets.net/0jyj5pjwic68/03vP3KJ2MwmZuYhi4pA10/cb7b1d47ec5d20b77e2a18253b8f1f26/Hasura-min.png)


 <a class="read" href="https://hasura.io/" target="_blank" rel="noopener noreferrer">Hasura へ移動</a>


## Firebase - フルスタックアプリケーション

Firebaseは、モバイルとウェブのフロントエンド開発者のための、フルスタックアプリケーションです。

![Firebase-min](//images.ctfassets.net/0jyj5pjwic68/136WPFOfoBzyZl4PsFWSNV/70a491aeb02fda526a743727f5feb9d6/Firebase-min.png)


 <a class="read" href="https://firebase.google.com/" target="_blank" rel="noopener noreferrer">Firebase へ移動</a>


## AWS Amplify - フルスタックアプリケーション

AWS Amplifyは、モバイルとウェブのフロントエンド開発者のための、フルスタックアプリケーションです。自分はAWSを使えないのでFirebase一択です。

![AMS Amplify-min](//images.ctfassets.net/0jyj5pjwic68/3R8vGbmTU48t0HJgGu8CJV/1838a1afa0351401e6f49a7993f0a11f/AMS_Amplify-min.png)


 <a class="read" href="https://aws.amazon.com/jp/amplify/" target="_blank" rel="noopener noreferrer">AWS Amplify へ移動</a>


## Agora - WebRTC(ビデオ・音声通話)

[Agora](https://www.agora.io/en/agora-partners/)

皆さんJAMStackでサイトを構築していますか？今後、さらにAPIエコノミーが拡大する中で、APIサービスを上手に使い、JAMStackを構築することはビジネスを開始する上でさらに重要になってくる思っています。今回は、便利そうなAPIサービスを調べてまとめてみました！

JAMStackで使えそうなAPIサービス まとめ

## 参考になるサイト

[Gallery and Examples](https://jamstack.org/examples/)
JAMStack公式のサイトです。開発事例やポートフォリオが掲載されています。構成している技術スタックも載っているので、このサイトを見て、技術スタックを考えたりするのも楽しいでしょう。他にもCMSの種類やSSG Generatorもたくさん載っています。
\
[anhek.dev](https://anhek.dev/)
個人のポートフォリオです。多言語対応や美しいデザインで見ていて楽しいですね。
\
[chriswray.dev](https://chriswray.dev/)
個人のポートフォリオです。開発しているアプリケーションや自身技術などを掲載しています。tailwindを使っているようですが、デザインが美しいです。

個人開発でCloudinary使ってみる

Cloudinaryとは？

Cloudinaryの料金

imageのアップロード

Related

Tags

Share

Table of Contents