思わずWeb開発で使いたくなる便利機能をAPIで提供するサービスを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください！ ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
microCMSブログをオープンソース化しました
こんにちは、柴田（@shibe97）です。 突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました！ リポジトリはこちら。 https://github.com/microcmsio/microcms-blog 経緯microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。 しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。 ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。 そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。 microCMSブログはデータソースとしてmicroCMS、フロ
こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成
microCMS + Gatsby + GitHub Actions + S3 でJamStackのチュートリアル | DevelopersIO
What is Jamstack? ここ数年でよく聞くようになったワード。 Jamstackとはウェブサイトを構築および運用するための、技術の組み合わせです。 JavaScript・API・事前にレンダリングされたMarkupの組み合わせでJamStackとのこと。 (以前はJAMStackといってたけど、最近はJamstackだったりする) Jamstackは、 「ウェブをより速く・より安全に・より簡単に拡張できるように設計されたアーキテクチャ」であり、 生産性を最大化するツールやフレームワーク、ライブラリやワークフローなどを 組み合わせて構築されるもの、とのことです。 ※jamstack.orgより 従来のCMSではアクセスがあったとき動的にページを生成しますが、 Jamstackではデプロイ以前に必要なページを生成します。 具体的には、下記。 Webサイトのフロントエンド全体(HTM
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
はじめに Webサイトはページの構造を表すHTML、スタイルを表すCSS、動きを表現するJavaScriptによって構築されています。現在Webサイトの多くが、PRや顧客獲得などのマーケティング目的で活用されており、状況に応じて内容を更新していきたいというニーズがあります。 内容の更新のたびにエンジニアに頼んでHTMLの編集をしてもらうのはコミュニケーションコストもかかりますし、貴重なエンジニアリソースの浪費とも言えます。 これを解消するのがCMSであり、エンジニアの手を借りずとも管理画面からWebサイトの内容を誰でも書き換えることのできるシステムです。 盛り上がりを見せるヘッドレスCMS 「ヘッドレスCMS」は新しいタイプのCMSです。従来型のCMSはコンテンツの入稿画面・データベースに加えて表示面がセットになっていますが、それに対してヘッドレスCMSはヘッド（表示面）がなく、APIによ
Headless CMSとは Headless CMSは、Wordpressなどとは違って本体のウェブサイトと管理画面が完全に分離されているのが特徴の CMS(コンテンツマネジメントシステム) です。 これを使うと、フロントエンドとCMS側が分かれるのでそれぞれを別の場所に配置することが可能です。 動的なコンテンツを表示することをサーバーを持たずに行うことが可能になるのが魅力です。 Micro CMSとは Micro CMSは国産のHeadless CMSです。 これまでのHeadless CMSというと「Contentful」が主流な気がします。 Contentfulは日本のサービスではないので英語が基本になりますが、Micro CMSはデフォルトで日本語に対応していたり、日本語でのチャットサポートがあるのが良いと思いました。 使い方 登録 上記画面の「無料ではじめる」または「新規登録」
はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック
React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化 - ZOZO TECH BLOG
はじめに 2020年新卒入社で、現在ZOZOWEB部所属の武井です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度はスタッフインタビュー記事の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っていませんでしたが、先輩スタッフが仕組み作りをしてくださっていたおかげで快適に働けています。 さて、本題です。ZOZOTOWNではタイムセール、ショップ限定クーポン、抽選プレゼントなどのキャンペーンを期間限定で実施しています。このキャンペーンをより際立たせるためにキャンペーンページを作成し、ホーム画面やメルマガなどを通じてお客様にお届けしています。しかし、このキャンペーンページの作成が必要になった場合、エンジニアが都度実装しており、
ヘッドレスCMSという言葉をご存知でしょうか？ まず、CMSとはContent Management Systemの略でありウェブサイトのニュースや記事などを管理することの多いシステムです。代表的な製品としてWordPressがあげられます。 次に「ヘッドレス」ですがこれは「見た目を有していない」という意味です。 まとめるとヘッドレスCMSとは、WordPressなどの従来のCMSとは異なり、表示部分をなくしてAPIベースでコンテンツを取得することが特徴のコンテンツ管理システムです。 ヘッドレスCMSに関する詳しい解説は下記記事をご覧ください。 参考：今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流 ※弊社COOの寄稿記事です このヘッドレスCMSは従来とは異なる仕組みであるため、向いているケース・向いていないケースが顕著に存在しています。 我
最近は Cloudflare Workers ばっかりいじってて、フレームワークまで作ってるのですが、これ、ちゃんとやればそれなりの立派な Web サイトができるので、紹介します。 できたサイト 「家系ラーメン食べたい！」というサイトを作りました。 管理者の僕が家系ラーメンを登録できて、トップでは一覧で見れて、 詳細ページに行くと写真と紹介文が見れます。 質素に見えますが、 コンテンツ（ラーメン屋）をどんどん追加できる。 プロパティを追加することも可能。 画像はリサイズされる。 速い。 OGP ちゃんと設定している。 favicon.icon もやってる。 と、「ちゃんと」してます。そう、ちゃんとしてます。 では、どう作っていくか。 Cloudflare Workers Cloudflare Workers 、そのユースケースについて。 CDN のエッジで実行される、ということでスクリプト
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.jsとAuth0で会員制メディアを作る【1. 認証編】
今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流
国産Headless CMS 「Micro CMS」を試してみた - Qiita
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】
ヘッドレスCMSがマッチするケース、マッチしないケース
Cloudflare WorkersでちゃんとしたWebを作る - ゆーすけべー日記