Next.jsとAuth0で会員制メディアを作る【1. 認証編】
こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
OpenAPI Generator で API Client と型を自動生成した話 - BASEプロダクトチームブログ
フロントエンドエンジニアの @rry です。 自分は BASE の Sales Promotion というチームで主に新規機能開発を行っています。このチームでは主にオーナーさんの使う管理画面に新しく機能追加をしています。 そこで、管理画面で使っている API Client と型を、OpenAPI Generator を使って自動生成するようにしてみたのでそのお話を書きたいと思います。 そもそも OpenAPI とは？ https://www.openapis.org/ OpenAPI とは、RESTful Web サービスを記述、生成、使用、および視覚化するための仕様です。 ※ 以前は OpenAPI ではなく仕様自体も Swagger と呼ばれていましたが、現在は仕様自体については OpneAPI と呼ばれており、Swagger というのは OpenAPI を使ったツール群のことをさすよ
Form Validation Using JavaScript's Constraint Validation API
Form validation is one of the primary reasons to use client-side JavaScript. It can prevent user entry errors before your app attempts to submit data to the server. But… client-side validation is not a substitute for server-side validation! Always check incoming user data on the server. Not every request will come from a browser nor will every browser run validation code. Client-side validation is
Server Driven UI – Tom Lokhorst's blog
Update 2023-03-29: In August 2021 Apple acquired Primephonic the company. On March 28, 2023 Apple launched Apple Music Classical as a new app. This new app is built on the foundations of the Primephonic app, the fundamentals of the Server Driven UI architecture as described in this post remain the same. Note: This post is based on a talk I gave at CocoaHeadsNL in July 2020. Warning: because this i
HTML Sanitizer API - Web APIs | MDN
The HTML Sanitizer API allows developers to take strings of HTML and filter out unwanted elements, attributes, and other HTML entities when they are inserted into the DOM or a shadow DOM. Concepts and usage Web applications often need to work with untrusted HTML on the client side, for example, as part of a client-side templating solution, when rendering user generated content, or if including dat
Spotify API + Next.jsで作る選曲支援Webアプリ - Qiita
概要 Spotify APIの楽曲レコメンド機能を使って、DJ Mix用のプレイリストを作成できるWebアプリケーションを開発しました。まずはそのアプリケーションの内容をご紹介します。 実装はTypeScript + Next.jsで行いVercelにデプロイする形にしたところ、非常に高い開発体験が得られました。後半はSpotify APIの使い方を含めて、Next.jsでの実装やVercel上での設定について書いていきます。 できたもの AUTOMISCE - Automate Your Mix with Spotify API 使い方 まず"Sign in with Spotify"ボタンでSpotifyにログインします。次に右側の検索欄で最初の曲を選んでプレイリストに追加します。するとその曲と似たテンポでかつテンション感が少し上の曲が"Upper Tracks"欄に、少し下の曲が"D
認証機能を独自実装する代わりにIDaaSのREST APIを使うアプローチ - r-weblife
こんにちは、ritou です。 最近のあれこれでIDaaSと呼ばれる機能に注目が集まっているような気がしますが、どうしてもフロントエンドでの導入部分が目に付きます。 「新規サービスで使っていこう」ならまだしも「既存のを何とかしたい」みたいな場合にフロントエンドまでごっそり変えるのなんて腰が重くなって仕方ない感じでしょう。 そこで今回は、REST APIを用いた新規導入、移行というアプローチもあるのかなという話を書いておきます。 SPAとなると当然フロントエンドの振る舞いに注目されるけど、Deviseからの...を考える人たちはこの辺りから攻めるのもアリかと思う。ちゃんと整理して考えよう。https://t.co/fwhoA6wtjx— 👹秋田の猫🐱 (@ritou) 2020年8月19日 IDaaS の REST API この辺りをみてみてはどうでしょう。 Firebase Authe
OSS 版 API Gateway、Kong Gateway をつかってみる - Techtouch Developers Blog
バックエンドエンジニアの taisa です。テックタッチでは API Gateway として、AWS の API Gateway ではなく、クラウドでもオンプレでも使えるオープンソースの Kong Gateway を利用しています。この記事では Kong Gateway とは何か、なぜ使うのか、どうやって使うのか、を簡単にまとめてみました。 Kong Gatewayとは なぜ Kong Gateway を使うのか Kong Gateway をインストールできる環境 Kong Gateway の特徴 Kong Gateway の概念と機能 Kong Gateway のドキュメント Mac + DB Less（YML）環境で動かしてみる 構成 下準備 Kong をセットアップする kong.yml にサービスとルーティング情報を記述する Rate-Limit プラグインを利用する プロキシキャ
Mackerel : グラフアノテーションを登録するパターン集 - kakakakakku blog
新機能ではないけど，Mackerel の「グラフアノテーション機能」は便利でよく使っている．メトリクスの推移を分析するときに，同じタイミングで発生したイベント情報（デプロイ／キャンペーン開始／テレビ放送など）と紐付けることができる．実際にアノテーションを登録するときに「個人的によく使うパターン」がいくつかある．今回はパターンごとに「アノテーションを登録するスニペット」を整理しておく． mackerel.io コンソールを使う アドホックにアノテーションを登録する場合は，1番簡単な「コンソール」を使う．とは言え，以下の画像のように「グラフの時刻部分をドラッグする」のは気付くにくく，Mackerel 初学者には使ってもらえなさそう． mkr コマンドを使う シェルからアノテーションを登録する場合は，mkr コマンドを使う．mkr annotations を使うと簡単に登録できる．--from
全TSユーザーのためのOpen API Codegen、「Squelette」を作っている話
この記事はCamphor- Advent Calendar 2019 15日目の記事です。 Squelette: Yet another TS codegen ecosystem for Open API. Embedded content: https://github.com/andoshin11/squelette 本Advent Calendarへの参加も今年で4回を数えます。フロントエンドなAndyです。 ここ数年の間に加速度的にTypeScriptの利用機会が増え、Webブラウザで動くSingle Page Applicationの世界にも静的型付けの考え方が浸透してきました。 Redux, VuexのようなRepositoryレイヤーからUIコンポーネント内のビジネスロジック、ひいてはDOMにいたるまで一気通貫に型の恩恵を感じることのできる開発体験は、今後もしばらくメイントレ
初めてのGraphQL
今日では多くのWebサービスがRESTアーキテクチャスタイルで実装されています。RESTは2000年にフィールディングの論文で提唱された後に爆発的に普及し洗練されてきました。一方で、本書で紹介するGraphQLは2015年にFacebookによって公開されたRESTとは異なるアプローチのアーキテクチャです。GraphQLの最大の特徴はクエリ言語を用いてデータを操作する点です。クエリ言語の表現力の高さによりクライアントは本当に必要なリクエストを送ることができます。本書ではGraphQLの概要とGraphQLを用いたWebサービスの開発方法を実装例に沿って紹介します。認証やファイルアップロードといった実践的なトピックまで踏み込んだGraphQLの実用的な入門書です。 関連ファイル サンプルコード 正誤表 書籍発行後に気づいた誤植や更新された情報を掲載しています。お手持ちの書籍では、すでに修正が
プログラミングせずにCognitoで新規ユーザー登録＆サインインを試してみる | DevelopersIO
Cognitoって新規ユーザー登録画面やサインイン画面をプログラミングするイメージがあって、非プログラマーには敷居が高いんだよなぁ……。そんなあなたのために、このブログを書きました。Cognitoの敷居をちょっと下げるため、プログラミング無しでCognitoを試してみます。 Amazon Cognitoってユーザー認証をマネージドに管理してくれるサービスでさわってみたいけど、 新規ユーザー登録画面やサインイン画面をプログラミングするイメージがあって、非プログラマーには敷居が高いんだよなぁ……。 そんなあなたのために、このブログを書きました。 Cognitoの敷居をちょっと下げるため、プログラミング無しでCognitoを試してみます。 要するに、AWS CLIでCognitoを使う手順を紹介します。 Cognitoの機能自体は、弊社ブログで詳しく解説しているのでぜひこちらを御覧ください。 A
gRPC WebがGAになったのでそろそろ理解してみる
クライアントサイドストリーミングはStreams APIがブラウザに実装するまで実現ができないとの事です。 それぞれの使い方（コード生成方法)は以下の通りです。 grpc-web protocol buffersコンパイラのオプションとして protoc-gen-grpc-web があります。 ただし、バイナリが提供されていないっぽいので自力でmakeする必要があります。 詳細は以下に記載されています。 grpc-webを使う場合はこのコンパイラで生成されたコードをインポートして使うかたちになります。 grpc-web-client protocol buffersコンパイラにデフォルトで入っているjavascript用コンパイラを使うとこのモジュールがインポートされます。Typescriptでも使えるようにするには別途 ts-protoc-gen をnpmでインストールしておく必要があり
Announcing WebSocket APIs in Amazon API Gateway | AWS Compute Blog
AWS Compute Blog Announcing WebSocket APIs in Amazon API Gateway This post is courtesy of Diego Magalhaes, AWS Senior Solutions Architect – World Wide Public Sector-Canada & JT Thompson, AWS Principal Software Development Engineer – Amazon API Gateway Starting today, you can build bidirectional communication applications using WebSocket APIs in Amazon API Gateway without having to provision and ma
API GatewayによるMicroservices化
API GatewayによるMicroservices化 mercari.go#1 3 July 2018 Taichi Nakashima About me @deeeet / @tcnksm (GitHub) Blog on deeeet.com Tech lead at Mercari microservices platform team 2 Mercari Meetup for Microservices Platform 7/19 遊びに来てくれ！ https://mercari.connpass.com/event/92168/ 3 tl;dr Mercari Microservices化のために開発したAPI Gatewayについて紹介する． API Gatewayとは何か? API Gatewayの設計思想は? API Gatewayの機能の実装方法は? API Gate
Apolloでの綺麗なAPI実装（GraphQL）を試す - Qiita
はじめに 今回のサンプルは以下に用意しました。 Apollo Server & Apollo Clientサンプル 以前こんな記事を書きました。 React(+Redux)+gRPCで実現するクリーンアーキテクチャ＋マイクロサービス構成 BFFのフロントエンドAPI部分に関して、次の記事を見てクライアント通信の部分をGraphQLで実装できるとより柔軟で堅牢な気がしたので試してみました。 世のフロントエンドエンジニアにApollo Clientを布教したい REST API、 GraphQLの違いに関しては下記を参考にしてください アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた GraphQLを導入するメリットはざっくり以下の通りです。 APIのインタフェース定義(送信パラメータのデータ型定義)ができる（それにともない、データの型定義によるAPIパラメータの
REST API に疲れたあなたへ贈る GraphQL 入門
This document summarizes Amazon Web Services Japan speaker Tsukagoshi Keisuke's presentation on AWS AppSync. It introduces AppSync as a fully managed GraphQL service that allows building GraphQL APIs integrated with various data sources like Amazon DynamoDB, AWS Lambda, and Elasticsearch. AppSync provides a GraphQL schema definition language to define types and queries, uses Apache Velocity Templa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
api-guidelines/Guidelines.md at vNext · microsoft/api-guidelines
lestrrat-go/fluent-clientの紹介
