Amplify Ui Libraryを使用して作成したCognito認証画面を日本語にする方法 - サーバーワークスエンジニアブログ
こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。 今回は、AmplifyUILibraryを用いたAmazon Cognito認証画面を日本語にする方法についてご紹介します。 目的 I18nライブラリを使用する方法 I18nライブラリのインポート 辞書をI18nに設定 I18nを用いてカスタマイズする方法 カスタム辞書の追加 使用感など感想 まとめ 目的 本記事では、AmplifyUILibraryを用いて作成したAmazon Cognito認証画面を日本語化する方法について説明します。すでに他の記事でAmplifyUILibraryの紹介や認証画面の構築について解説していますので、ここでは日本語化の具体的な手順とコツに焦点を当てます。 ↓始めに読むとよいです。 blog.serverworks.co.jp blog.serverworks.co.jp I1
2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
New in AWS Amplify: Integrate with SQL databases, OIDC/SAML providers, and the AWS CDK | Amazon Web Services
Front-End Web & Mobile New in AWS Amplify: Integrate with SQL databases, OIDC/SAML providers, and the AWS CDK Welcome to “Extensibility Day” of AWS Amplify’s Launch Week! With Amplify Gen 2, we’re providing four new capabilities to customize your app according to your business need. Today, we’re announcing the ability to: Integrate with existing data sources (including PostgreSQL or MySQL database
生成 AI とNext.js を利用して AWS Amplify でフルスタックのレシピ提案アプリをビルドする | Amazon Web Services
Amazon Web Services ブログ 生成 AI とNext.js を利用して AWS Amplify でフルスタックのレシピ提案アプリをビルドする Claude 3 によってパワーアップされた生成 AI、Next.js、AWS Amplify、Amazon Bedrock の世界に飛び込んでいきましょう。このガイドでは、ユーザーが食材のリストを入力し、Claude 3 が入力された食材にもとづいて美味しいレシピを提案するレシピ提案アプリの作成方法を紹介します。 2023 年 11 月、AWS Amplify は次世代のフルスタックアプリ構築機能のパブリックプレビューを発表しました。Amplify Gen 2 はコードファーストの開発者エクスペリエンスを採用しており、開発者は TypeScript と AWS Cloud Development Kit (AWS CDK) を使用
既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 | Amazon Web Services
Amazon Web Services ブログ 既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 AWS Cloud Development Kit (CDK) を使って既存のリレーショナルデータベース上にスケーラブルでセキュアな GraphQL インタフェースを簡単に構築できる機能を発表しました。AWS Systems Manager Parameter Store に SecureString として安全に保存されたデータベースの認証情報と共に AWS Amplify GraphQL API CDK コンストラクトを提供し、SQL ステートメントを実行する GraphQL API の構築を開始します。この新機能は、Amazon Relational Database Service (Amazon RDS) 上の MySQL および Pos
フルスタックのチャットアプリケーションをAWSとNext.jsで構築する | Amazon Web Services
Amazon Web Services ブログ フルスタックのチャットアプリケーションをAWSとNext.jsで構築する モダンなチャットアプリはリッチな機能を必要とします。これらの機能はファイルストレージ・リアルタイムの更新、そしてクライアントとサーバーの両方からデータを取得する能力が必要です。 従来、これは多くのサードパーティサービスをつなぎ合わせるか、カスタムソリューションの作成に開発時間を費やすことを意味していました。そして、この方法では市場投入までの時間が遅くなり、複数の障害点が発生します。 チャットアプリに必要な機能と、AWS が従来の問題点をどのように解決しているかを紹介するために、我々はリアルタイムチャットアプリケーションのサンプルを更新しました。このバージョンは、ローカルと AWS の両方でアプリケーションを完全に管理・制御することがいかに簡単かを強調するために再設計され
Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法 の手順まとめ | DevelopersIO
Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法、 ということで、詳細な手順を本ブログにまとめました。 全体の流れは、ビデオセッションやスライドを確認してください。 初心者向けハンズオン では、初めて Amplify を実行する という前提で手順が作成されていました。 本手順では、既に一度ハンズオンを実施した前提での手順となりますので、2回目以降 実施する必要がない手順はスキップしています。 Cloud9 のセットアップ Cloud9 のセットアップ Cloud9 インスタンスの作成 Cloud9 の環境設定 Cloud9 のプレビューURL確認 初心者向けハンズオンでは、開発環境として クラウドIDE の Cloud9 を利用していました。 本手順でも、同様にCloud9 で環境構築を行います。 Cloud9 の良い所は、ハンズオンを実施する際に、ローカル環境の
【React】Amplify UI Components でログイン画面を実装する | DevelopersIO
はじめに 最近、Amplify UI Componentsでログイン画面を実装する機会がありました。 2022/6/30 現在、Amplify UI Componentsのバージョンは大幅にアップしており、@aws-amplify/ui-react package は、v3.0.3が最新となっています。その実装方法も大幅に変更され、より簡単・便利に扱えるようになっています。 Amplify React UI (React) Amplify Docs (React) 前バージョンでの実装記事は、よくヒットするのですが、最新バージョンでの実装はあまり見かけないように思いましたので、ここに記載します。とはいえ、公式リファレンスの通りです。 実装コード /src/App.tsx function App() { const { route } = useAuthenticator((context
【AWS】Amplify Studioを使ってGUI+FigmaでReactアプリを作ってみる | ソフトウェア開発のギークフィード
こんにちは、最近ゲームボーイミクロを買って昔のゲームを嬉々として遊んでいる20代後半男児です。 AWSのWeb/モバイルアプリの構築サービスであるAmplifyに、昨年末新機能「Amplify Studio」がプレビュー版として公開されました。 もともとAmplifyはアプリのバックエンド構築、フロントエンドホスティング、CI/CDなどの機能を提供するサービスでしたが、 「Amplify Studio」として、Figmaのデータを連携し最小限のコーディングでアプリを構築する機能が新たに追加されました。 AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現 | Amazon Web Services 今回はそのAmplify Studioを使用して、Figmaで作成したデザインデータを連携してReactアプリを作成していきたいと
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた | DevelopersIO
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた こんにちは、リサリサです。Amplify も Figma も全然分からないのですが、AWS Amplify Studio に触ってみたので、ブログにしてみます。 ↓のブログ通りにして動かしてみましたが、本当に何も分からなかっため、なかなか苦労しました。このブログだと分かってる前提でさくさく進んで行ってしまう所があるので、苦労した所も含め、丁寧めに書いていければと思います。多分、この通りにやれば、初心者でもデプロイまでできるはずなので、多分初心者向け… ブログ通りに作ってできたページは、こちら。 そのあともう少し頑張った結果がこちら。可愛くなりました！きもーちだけレスポンシブル… なかなか大変ではありましたし、見て頂くと色々言いたいことがあるのは分かりますが、フロントサイドほぼ分か
AWS Amplify + Reactで既存のLambdaを呼び出す | DevelopersIO
既存のLambdaをAWS Amplify + Reactから呼び出してみました。 背景 Step Functionsなどを用いて、Lambdaを単機能で疎結合な構成で実装している場合、他のインタフェースからも呼び出して再利用したい場合があるかと思います。AWS AmplifyにはLambdaを追加定義するamplify add functionコマンドとamplify add apiコマンドで追加したAPIからLambdaを呼び出す@functionディレクティブがありますが、今回はシンプルにReactからaws-sdkのLambda Clientを使ってLambdaを呼び出してみました。 解法 import React, { useState } from 'react' import { Auth } from 'aws-amplify' import { LambdaClient,
AWS Amplifyを使ったReact NativeなアプリをBitriseでビルド - Sweet Escape
はじめに 今回、React Nativeで開発しているとあるアプリでAWS Amplifyを使ったのですがBitriseでビルドしたりチーム開発で使うにあたってちょっと困ったりしたのでメモ。 はじめに 前提 なぜAmplifyを使ったか Bitriseでビルドする ではどう対応するか Bitriseでどうやるか まとめ 前提 もともと自分は以前にこちらの記事でも書いたようにAWS Amplifyについてはそんなにポジティブではないです。なのでこの記事以降も基本的にはあまりwatchしてきませんでした。なので今回ちょっと苦労したのはAmplify弱者だったことも理由かも知れない。 www.keisuke69.net ただし、Amplify Consoleはいいぞ。これはプロダクションでも2,3使ってる。 また、React Nativeで開発したアプリはAndroid、iOSともにBitris
Amplify ConsoleでNode.jsのバージョンをアップデートする (追記あり) - Sweet Escape
（Update）このブログは最後の追記だけを見れば事足ります。 Amplify ConsoleでとあるReact、Next.jsベースのアプリケーションをホストしているんだけど、最新のプッシュで動いたデプロイがビルドのフェーズで落ちてしまった。 ログは以下。 2022-01-12T01:20:42.950Z [WARNING]: error @typescript-eslint/experimental-utils@5.9.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "12.21.0" 2022-01-12T01:20:42.958Z [WARNING]: error Found incompatible mod
AWS Amplifyの公式チュートリアルでToDoリストアプリ（React）をデプロイしてみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、AWS Amplifyの公式チュートリアルでToDoリストアプリ（React）をデプロイしてみました。 AWS Amplifyとは？ AWS Amplifyとは、AWSでフルスタックなアプリケーションを高速かつ簡単に構築できるサービスです。 Welcome to AWS Amplify - AWS Amplify Amplifyでは次のようなWebおよびモバイルのアプリケーションが構築可能です。 JavaScript React ReactNative Angular Vue Next.js Android iOS Ionic Flutter Amplifyでアプリケーションを構築すると、静的ホスティング（S3）、認証（Cognito）、データAPI（AppSync + DynamoDB）、GitHub連携のCI/CD（AWS C
【AWS Amplify ノウハウ】 5. List API は DynamoDB で, Search API は Elasticsearch で！ | DevelopersIO
【AWS Amplify ノウハウ】 5. List API は DynamoDB で, Search API は Elasticsearch で！ こんにちは！コンサル部のテウです。 AWS Amplifyシリーズの5番目の記事です！今回は、List API と Search APIがそれぞれ異なるデータソースにQueryを実行ことによって生じる差について確認し、それぞれをどういった状況でどう使えるべきかについてお伝えします。 それでは始めます！ List は List、Search は Search じゃない？ 先ず、List と Search をなぜ比べているのか疑問を持たれた方々が多くいらっしゃるかと思います。当初、これらの用途はそれぞれ異なるのでしょう。ところで、Amplify が提供してくれる List API は、DynamoDB をデータソースとして用い、Search AP
【AWS Amplify ノウハウ】 6. Amplify DataStore の導入は慎重に！ | DevelopersIO
こんにちは！コンサル部のテウです。 AWS Amplify シリーズの 6番目の記事です。この記事では、比較的に最近リリースされた Amplify DataStore について簡単に紹介し、他の技術と同じく、Amplify DataStore も万能ではないことをお伝えしつつ、導入時に顧慮すべきところについても紹介します。 それでは、始めますー！ Amplify DataStore とは？ 2019年12月に発表された Amplify Datastore はリリース後、優れた機能の紹介と共にその便利さで注目を集めました。 Introducing the Amplify DataStore, a persistent storage engine that synchronizes data between apps and the cloud Amplify Datastoreの公式ドキュ
Amplify Studioを触ってみる
先週、テック記事を眺めていたらAWS Amplify Studioというローコードアプリ開発ツールが発表されているのを見つけた。 figmaで作ったUIを取り込んでReactコードを自動生成出来るらしい！へぇ〜、おもしれーじゃん。 ということで、実際に「figma作って取り込んでReactコンポーネントを取得・表示するところまで」やってみた。 なお、AWSもReactも超ド素人なのであしからず…。 大まかな作業の流れ 今回行う作業はざっくり以下のような流れになる データモデルを定義 figmaからUI Componentを取り込む UI Componentのパーツとデータモデルの項目をマッピング Amplify pullでReactコード取得 それでは詳細な手順を見ていこう。 手順 AWS Amplify Studioを開始する まずは、AWS上でアプリケーションを作成する必要がある。 A
AWS Amplify(Console、CLI)、AWS CDK、AWS CloudFormationの特徴と比較 －仕様と実装から鑑みるユースケース・使い所 - NRIネットコムBlog
小西秀和です。 これまで静的ウェブサイトホスティングをテーマにAWS Amplify、AWS Cloud Development Kit(AWS CDK)、AWS CloudFormationに関する記事を書いてきました(本記事末尾参照)。 いずれも、各サービスを使用してAmazon S3＋Amazon CloudFrontの静的ウェブサイトホスティングにAWS Certificate Manager(ACM)、基本認証機能(AWS Amplify Console以外はLambda@Edgeで実現)を追加したアーキテクチャをデプロイする内容でした。 また、AWS Amplify Console以外については別リージョンのAmazon S3バケットにレプリケーション設定を加えた上でCloudFrontオリジンフェイルオーバーを設定することも試してきました。 今回は、このようにAWS Ampl
AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify CLI) - NRIネットコムBlog
小西秀和です。 これまで「AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編」の記事でサーバーレスな静的ウェブサイトホスティングを題材に概要を、「AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify Console)」でAWS Amplify Consoleの簡単な構築方法について説明してきました。 今回はその記事の続編としてAmplify CLIを使用したサーバーレスな静的ウェブサイトホスティングを構築する手順を見ていきます。 Amplify CLIによる静的ウェブサイトホスティング(Amazon S3＋Amazon CloudFront)の構築例 概要編でも説明しましたがAmplify CLIからは次の2つのホスティング環境を作成することができます。 Ampli
AWS AmplifyでNext.jsのISRを試してみる | DevelopersIO
まえがき AWS AmplifyでついにNext.jsのISRに対応したようです。実際にやってみる。 Deploy and host server-side rendered apps with Amplify - AWS Amplify 少しハマったので備忘録も兼ねて。 Amplify + Next.jsをデプロイ Next.jsのプロジェクトを作成 yarn create next-app --typescript ✔ What is your project named? … next-sample-app Next.jsにISRのページを作成 サンプルでISRのページを新規作成します。簡単にタイムスタンプを表示し、5秒間キャッシュするようにします。 import Head from 'next/head' import styles from '../styles/Home.mod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
