Amplify Gen2 がプレビュー版でリリースされました!

こんにちは。アプリケーションサービス部の河野です。 本稿は、サーバーワークス Advent Calendar 2023 の 9日目のエントリーです。 qiita.com 先日、新たな開発体験として、Amplify Gen2 がプレビュー版でリリースされたので、早速触ってみました! aws.ama…

@function ディレクティブを使用して、Lambda リゾルバを構築してみよう

こんにちは。アプリケーションサービス部 河野です。 今回は、 GraphQL の @function ディレクティブを使用して Lambda リゾルバを構築してみました。 概要 Amplify CLI は いくつかの GraphQL ディレクティブを提供しています。 デフォルトスキーマにある @…

AppSync と Aurora Serverless を連携する方法

こんにちは。アプリケーションサービス部の河野です。 今回は、Amplify で作成した GraphQL API のデータソースを Amazon Aurora Serverless にする方法をご紹介します。 先にまとめ 以下のポイントを考慮して設定する必要があります。 Aurora Serverless V1…

【Amplify Studio 中級編】Collections Component をマスターしよう

こんにちは。アプリケーションサービス部の河野です。 今回は、UI Library の機能の一つである、Collections Component について紹介します。 Figma to Code (React) - Working with collections - AWS Amplify Docs 以下のような一覧画面を実装しながら、Co…

【Amplify Studio 初級編】 Data modeling の ビジュアルエディターを使ってみよう

こんにちは。アプリケーションサービス部の河野です。 Amplify Studio の Data modeling を使えば、アプリケーションで使用する GraphQL のリソース群を GUI 上で簡単にプロビジョニングすることができます。 今回は Data modeling の使い方について、簡単に…

【Amplify Studio 初級編】 Amplify UI Kit で UI コンポーネントをデザインしてみよう

こんにちは。アプリケーションサービス部の河野です。 Amplify Studio の目玉機能として、Figma と連携ができる UI Library があります。 https://docs.amplify.aws/console/uibuilder/figmatocode/#step-2-link-figma-file-in-studio これは、Figma でデザ…

AWS App Runner × FastAPI で作る REST API パターン 3 選

こんにちは。アプリケーションサービス部の河野です。 アプリケーションサービス部では、週に一回、技術発表会という形で、発表者が興味がある技術について自由にプレゼンテーションしています。 その中で「App Runner で REST API 開発するの良いぞ」ってい…

【Vue3】 vue.draggable.next で テーブル間ドラッグドロップの UI を実装する

はじめに こんにちは。アプリケーションサービス部の河野です。 今回は、Vue3 でドラッグ&ドロップの UI を簡単に実装できる vue.draggable.next ライブラリの紹介です。 基本的な使い方から応用編としてテーブル間移動の実装方法について記載します。 実装…

【初心者向け】 Vue3.0 × TypeScript の VSCode 開発環境を準備する

明けましておめでとうございます。アプリケーションサービス部 河野です。 Vue2.0 系の LTS 終了が 2023 年 12 月 31 日と通知されており、これから Vue を使用する際は 3.0 系がほとんどだと思います。 v2.vuejs.org そこで今回は、Vite を使用した Vue3 系…

Serverless Framework v2 から v3 の変更点まとめ

はじめに こんにちは。アプリケーションサービス部 河野です。 半年程前に、Serverless Framework 3 系がリリースされました。 現在の latest バージョンは 3.19.0 です。 そろそろ、3 系にアップグレードしたいなと思い立ち、変更点は把握しておこうという…

pytest で LINE Bot のテストコードを書いてみる

はじめに こんにちは。アプリケーションサービス部 河野です。 line-bot-sdk-python のおかげで簡単に LINE Bot を実装できますが、 テストコードもちゃんと書いておこうということで、pytest で試してみました。 ※ 本記事で紹介する書き方については、あく…

AWS Amplify × FastAPI でサクッと RESTAPI を構築する

はじめに こんにちは。アプリケーションサービス部の河野です。 今まで、RESTAPI を構築する場合は、FastAPI × Serverless Framework で作ることが多かったのですが、 Amplify Console が非常に便利なので、バックエンドも Amplify に寄せたいなと思い試して…

AWS Glue Python Shell ジョブで CSV → Parquet 変換する ETL を実装する

はじめに こんにちは。アプリケーションサービス部 河野です。 最近 Glue の Python Shell ジョブを初めて触ったのですが、その際に検証した ETL 実装について備忘録として記載します。 検証では、以下処理を実行する単一の Python Shell ジョブを実装しまし…

【CloudFormation】 Parametersの空白値を判定して、動的にリソースプロパティの作成有無を制御する

こんにちは。アプリケーションサービス部の河野です。 タイトル付けに悩んだのですが、CloudFormation(以下 Cfn)の Parameters, Condition, AWS::NoValue を使用したテンプレート記法のお話です。 導入 タイトルで実現したいことを記載しているのですが、そ…

AWS Amplify で複数件登録できるカスタムリゾルバーを追加する

こんにちは。アプリケーションサービス部 河野です。 AWS Amplify(以下 Amplify) は CRUD 処理を含んだリゾルバーを自動的に生成することができますが、 それ以外の処理を実現したい場合は、カスタムリゾルバーを追加する必要があります。 例えば、一回のリ…

LINE のトーク上に送信した画像を S3 にアップロードする

こんにちは。アプリケーションサービス部 河野です。 またまた LINE 関連のテーマで恐縮ですが、今回は、LINEのトークで送信した画像を S3 にアップロードする機能を実装してみます。 今回作成するもの LINEから画像を送信すると、S3フォルダに画像をアップ…

AWS Amplify で LINE Front-end Framework を実装してみた

【応用編①】LINE Front-end Framework で「ToDo」LINE Botを作る(フロントエンド編) - サーバーワークスエンジニアブログで、LINE Front-end Framework(以下LIFF)を紹介しましたが、 AWS Amplify(以下 Amplify) を使えばより早く、簡単に実装できるのでは…

Amazon CloudWatch Agent を使用して別アカウントにログを送信する

こんにちは。技術4課の河野です。 本格的に寒くなってきて、そろそろコタツを出すか悩みながらブログ書いてます。 概要 Amazon CloudWatch Agent を使用して EC2 から任意のログを別アカウントの CLoudWatch Logs に転送するまでの手順を紹介します。 環境 E…

【応用編①】LINE Front-end Framework で「ToDo」LINE Botを作る(フロントエンド編)

こんにちは。技術4課の河野です。今回もLINEBotのお話です。 入門編では、以下を紹介してきました。 【入門編①】Serverless Framework で 「おうむ返し」LINE Bot を作る 【入門編②】Serverless Framework で 「じゃんけん」LINE Bot を作る 今回は応用編と…

【入門編②】Serverless Framework で 「じゃんけん」LINE Bot を作る

こんにちは。技術4課の河野です。 今回は、LINEBot 入門編第二弾となります。 入門編第一弾では、「おうむ返し」Botを紹介しました。 第二弾ではよりインタラクティブなBotを目指して、じゃんけんBotを紹介します。 ※当記事は、【入門編①】Serverless Framew…

【入門編①】Serverless Framework で 「おうむ返し」LINE Bot を作る

こんにちは。技術4課の河野です。 今回は、Serverless Framework を使用してLINEBot を作成する方法について紹介します。 作成するもの 構成図 環境 実装 Serverless プロジェクトの作成 Lambda(メッセージ受信)を作成 Lambda(メッセージ送信)を作成 デ…

Amplify × Cognito × Vue.js でTOTPを実装してみる

AWS

こんにちは。技術4課の河野です。 今回は、Vue.js 初学者が、TOTP(Time-based One-Time Password)の実装にチャレンジした記録になります。 やりたいこと ユーザーがログイン時に TOTPを設定及びTOTPを使用した認証までを実装します。 イメージとしては、IA…