Category: Front-End Web & Mobile

AWS Amplify は、セキュアでスケーラブルなモバイルアプリケーションとウェブアプリケーションを構築するためのツールとサービスのセットです。現在 iOS、Android、JavaScript (ウェブおよび React Native) をサポートしている Amplify は、アマゾン ウェブ サービス (AWS) を活用するアプリケーションを構築するための最も高速で簡単な方法です。 Flutter は、ネイティブにコンパイルされたモバイル、ウェブ、およびデスクトップアプリケーションを単一のコードベースから構築するための Google の UI ツールキットで、最も急速に成長しているモバイルフレームワークの 1 つです。 AWS Amplify と Flutter を一体化する Amplify Flutter は、Flutter エコシステムに投資したものの、今は AWS の力も利用したいといったお客様のために設計されました。 2020 年 8 月、AWS は Amplify Flutter のデベロッパープレビューをローンチし、そのフィードバックを募集したところ、とても嬉しい反応をいただきました。このサービスの数か月におよぶ微調整の後、今日ようやく Amplify Flutter の一般提供を発表したいと思います。 一般提供での新しい Amplify Flutter 機能 一般提供リリースは、追加された次の 3 つの新機能によって、強力な Flutter アプリを簡単に構築できるようにします。 まず、AWS では最近、AWS […]

この記事は、Amplify JavaScript releases support for Vue 3を翻訳したものです。 本日より、Amplify JavaScript は現在対応しているVue.jsバージョン2に加え、新たにVue.jsバージョン3へ対応します。オープンソースの Amplify Librariesは、あらゆるカテゴリのクラウドを使ったオペレーションに対し、ユースケース中心の、独自のスタイルを持った、宣言型で使いやすいインターフェイスを提供し、モバイル開発者やウェブ開発者がバックエンドと簡単にやり取りできるようにしています。これらのライブラリは AWS クラウド技術に支えられており、プラグイン可能なモデルのため、他のプロバイダを利用するよう拡張することもできます。ライブラリは、Amplify CLI を使用して作成された新規バックエンドおよび既存バックエンドリソースの両方で使用可能です。Amplify UI コンポーネントは、複数のフレームワーク向け UI コンポーネント内にクラウド接続部分のワークフローをカプセル化したオープンソースの UI ツールキットです。 このチュートリアルでは、以下を実行します。 このチュートリアルのベースとして新しい Vue 3 アプリを作成 Amplify の Interactions カテゴリの基本設定をセットアップ チャットボットコンポーネントを作成して Vue 3 アプリケーションに追加 前提条件 このチュートリアルを開始する前に、 Amplify ドキュメントの ウェブサイトにアクセスし、Prerequisites (前提条件) セクションに従ってください。前提条件を完了後、このチュートリアルを実行するための準備が整います。 AWS プロファイルを設定するときは、リージョンが Amazon Lex をサポートしていることを確認してください。サポートされているリージョンは、 こちらで確認できます。 新しい Vue アプリの作成 まず、 @vue/cliを使用して新しい Vue アプリケーションを作成し、起動します。このCLIツールを使うことで、現在のベストプラクティスを適用して自動で Vue アプリケーションを作成します。次に、Amplify を追加し、新しいプロジェクトを初期化します。以下の手順で、このプロセスを説明します。 新しい […]

新年明けましておめでとうございます！アマゾンウェブサービスジャパン株式会社 ソリューションアーキテクトの木村公哉（@kimyan_udon2）です。私は年始早々、厳かな気持ちでこのブログを書き始めたのですが、気づけば2月に突入しておりました。皆様いかがお過ごしでしょうか？ 年をまたいで2020年11月27日に「Amplify Meetup #02」を開催しました。「Amplify Meetup」はAWS AmplifyのユーザーとAWS Amplifyに興味のあるエンジニアのみなさんでLTなどを通して盛り上がるコミュニティーイベントです。タイトルに「#02」とありますように、今回は第2回目の開催となります。第1回目の盛り上がりも開催報告ブログにまとまっております。継続して開催できたのは、ひとえにご参加いただいた皆様のおかげです。皆様ありがとうございます！

この記事は、Zero-effort Container deployment for GraphQL and REST APIs and Web Hosting with Amplify CLIを翻訳したものです。 AWS Amplifyを使うことで、最速かつ簡単に、AWSでクラウド対応のモバイルアプリケーションやウェブアプリケーションを構築することができます。Amplifyは、フロントエンドのウェブ開発者やモバイル開発者が AWSの豊富なサービス群を活用して、革新的で多機能なアプリケーションを構築できるよう、ツール類や各種サービスを一通り備えています。 本日リリースしたAmplify CLIをお使いになることで、フロントエンドのウェブ開発やモバイル開発に携わるお客様は、コンテナを使ってAPI（GraphQL/REST）をデプロイしたり、ウェブアプリケーションをホスティングできるようになります。お客様ご自身のDockerfileまたは Docker Composeを持ち込むことで、Amplify CLIは、AWS Fargateを使用してコンテナを自動的にビルド、パッケージ、デプロイします。 メリット: 移植性の高いバックエンドの構築 – Amplify CLIは、シンプルなコンテナテンプレートを用意しているためすぐに始められます。または、お客様のチームがAPIやホスティング用のコンテナを既に使用している場合は、そのコンテナを利用することができます。 コンテナのデプロイパイプラインがすぐに使えるインフラ構成 – Amplify CLIは、VPC、サブネット、NACL、IAMポリシー、およびその他のセキュリティなどのインフラを管理するため、AWSに関する事前知識やインフラの実務経験は全く必要ありません。コンテナ間のネットワーキングは自動的に処理され、ホスティングされたサイトのSSL生成も自動的に処理されます。 ビルド＆デプロイパイプラインを労力をかけることなく作成 – Amplify CLIはCodePipelineを作成し、イメージをビルド、デプロイします。パイプラインには、ビルドアーティファクトやイメージに対するライフサイクルポリシーなど、コスト最適化のベストプラクティスが備わっています。ビルドしてAWSにデプロイするためにDockerをお使いのシステムにインストールする必要すらありません。 構築するもの : 初めに、乱数を返すExpressJSサーバーを構築 次に、Python/Flask乱数生成サーバーでFizzBuzzアルゴリズムを実行する、ExpressJSを構築。 前提条件: 最新のAmplify CLIをインストール ターミナルを開き、 npm install -g @aws-amplify/cli を実行し、最新のAmplify CLIに更新。 Amplify CLIの設定 Amplify CLIをまだ設定していない場合は、ドキュメントページのこちらのガイド に従ってください。 […]

私たちは、マップ、位置認識、その他の位置ベースの機能をウェブやモバイルのアプリケーションに簡単かつ費用効果の高い方法で追加できるようにしたいと考えています。これまでこうした機能の追加は複雑で高くつくだけでなく、単一のプロバイダーのビジネスモデルやプログラミングモデルに縛られていました。 Amazon Location Service のご紹介 本日より、Amazon Location がプレビュー形式で利用可能になり、すぐに使用を開始できます。一般的な選択肢より安価な料金である、Amazon Location Service を使用すると、複数のプロバイダーが提供するマップやロケーションベースのサービスに、経済的かつ従量制でアクセスできます。 Amazon Location Service を使用すると、どこにいるかを認識し、それに応じて応答するアプリケーションを構築できます。マップの表示、住所の検証、ジオコーディングの実行 (住所の場所への変換)、パッケージやデバイスの移動の追跡などを行うことができます。ジオフェンスを簡単に設定し、追跡対象アイテムがジオフェンスエリアに出入りしたときに通知を受け取ることができます 。フルコントロールを維持しながら、マップ上に独自のデータをオーバーレイすることもできます。 Amazon Location Service には、 AWS マネジメントコンソール、AWS コマンドラインインターフェイス (CLI) から、または一連の API 経由でアクセスできます。また、Mapbox GL や Tangram などの既存のマップライブラリを使用することもできます。 Amazon Location に関するすべて それでは、Amazon Location Service がお客様に提供するリソースの種類を見てみましょう。次に、アプリケーションでそれらを使用する方法について説明いたします。 マップ – Amazon Location Service では、パートナーからのデータを活用してマップを作成できます。Esri や HERE Technologies が提供するマップとマップスタイルを選択できます。将来的には、これらのパートナーや他のパートナーからさらに多くのマップやスタイルが提供される可能性があります。マップを作成した後、GetMapTile 関数を使用して、タイル (最大 16 のズームレベルの 1 つ) […]

この記事は、New AWS Amplify Admin UI Helps You Develop App Backends, No Cloud Experience Requiredを翻訳したものです。 2018年にAWS Amplifyをリリースしてから、ウェブのフロントエンドとモバイルアプリケーションの開発者の開発とクラウド環境へのデプロイを支援してきました。時代の最先端を行き、顧客にイノベーションを提供するためにもプロダクトは機能を素早く届ける必要があります。しかし、クラウド、AWSの基本的な操作に慣れていない場合は、開発者・非開発者に関わらず学習やトレーニングが必要となります。この学習コストは、設計や実装、意思判断などプロセス全体の速度の低下を招きます。 本日、AWS AmplifyはチームメンバーがAWSアカウントを必要とせずにAWSの利用を可能とする新機能Admin UIをリリースしました（AWSアカウントは、最初のデプロイでのみ必要となります）。 Admin UIは、データベーステーブルのモデリング、認可認証機能の追加、アプリケーションのコンテンツ・管理者・管理者グループの管理を行うシンプルで強力なツールを提供します。また、アプリケーションのユーザーや、ユーザーによって作成されたコンテンツの管理を行う機能も提供します。Admin UIは、バックエンドやインフラストラクチャではなくデータモデルに焦点を当てています。全てのバックエンドのリソースは、チームのリポジトリで管理可能なInfrastructure as Code（IaC）のテンプレートを生成します。また、このリソースはAWS Amplifyの継続的デプロイのワークフローと統合されており、異なる環境（environment）ごとに管理が可能となっています。 新機能: AWS Amplify Admin UIを使った例のご紹介 あなたは、地元にあるレストランのウェブサイトを開発しているフロントエンド開発者であると想像してみてください。レストランのオーナーは、日替わりメニューを掲載できるようなウェブサイトで、毎日ウェブサイト上のコンテンツを簡単に更新したいと考えています。 この要求を満たすシステムの実装方法は多くあります。例えば、サーバーを構築し、CMSをインストールし、レストランのオーナーが日替わりメニューの更新を行うための機能を実装することができます。しかし、この要求を満たすためだけにサーバーを構築するのは、過剰に設備投資を行うことになります。他の実装方法として、サーバーレスのサービスを使用して自分でCMSを構築することもできますが、開発が複雑になり、より多くの時間が開発をするのに必要となります。 AWS Amplifyの新機能Admin UIを活用することで、既存のAWSのマネージドサービスを活用しながらバックエンドを素早く構築することができます。また、アプリケーションのユーザーとコンテンツの管理を行う機能も提供します。 Admin UIを利用するために、最初にAWS Console内のAWS Amplifyの管理画面にてアプリケーションのバックエンド（backend）を作成してください。これにより、AWS Amplifyはstagingと呼ばれるバックエンドの環境（environment）を作成します。バックエンドの作成が完了したら、早速Admin UIを開いてみましょう。AWSの利用経験がなく、AWSアカウントを持っていない開発者を招待したい場合は、この段階でAdmin UIへのアクセス権限を付与することができます。今回の例では、あなた一人で全ての開発を行う想定とし、管理者の追加は行わないこととします。 Admin UIでは、アプリケーションの開発者がバックエンドを構成するために必要な開発ツールと、コンテンツの管理者がアプリケーションのコンテンツを管理するための機能が含まれています。 Admin UIのサイドバー（下記の画像参照）にて、アプリケーションの設定を行うための様々なオプションを確認することができます。 レストランのウェブサイト構築を行う最初のステップとして、日替わりメニューのためのデータモデルを作成してみましょう。次の3ステップを実行してみましょう Dataタブに移動 Menuという名前でデータモデルを作成 必要なデータ項目を追加して保存とデプロイ データモデルを保存とデプロイを行うと、メニュー項目を保存するAmazon DynamoDBのテーブルやGraphQLのAPIを提供するAWS AppSyncなどのリソースがAWS上に自動で作成されます。 デプロイの完了には数分程度かかります。 モデルがデプロイされたら、次にウェブサイトのフロントエンドを構築してみましょう。今回は、AWS […]

10 月 28 日に、「SaaS+サーバーレス/EventBridge」で開発迅速化、運用作業削減 〜ビジネスにアジリティーをもたらす「SaaS + サーバーレス」〜 と題したセミナーを開催し、6社の SaaS パートナー様にご登壇いただきました。登壇いただいたパートナー様の SaaS アプリケーションはすべて　Amazon EventBridge に対応いただいています。 EventBridge は、サービスとサービスの間をつなぐためのバスとして機能し、様々なアプリケーションや AWS サービスと連携できます。EventBridge に対応いただいているSaaS アプリケーションは、簡単かつセキュアに、イベントソースとして AWS のサーバーレスサービス群と連携させることができます。 本セミナーでは、各社の SaaS のご紹介とともに、EventBridge に対応することで SaaS パートナーとして何が良いのか、SaaS を利用されるお客様にとってどんなメリットがあるのか、といったポイントでご説明いただきました。アンケート結果でも、SaaS との連携手法として EventBridge という選択肢があることを知る機会になった、とか、なかなか聞けないパートナー様目線での EventBridge の効能がわかってよかったなどのご意見がありました。 本記事では、改めて、ご登壇いただいたパートナー様のセッション動画および公開資料をご紹介します。EventBridge ってなんぞや? という方は、AWS セッションとしてご説明した「サーバーレスを取り巻く状況と EventBridge の概要」や Game Server Services 丹羽様のセッション資料/動画を先にご覧いただくことをお勧めします。その上で、各 SaaS パートナー様のセッション内容をご覧いただくと、SaaS + EventBridge で何ができるのかをご理解いただけるかと思います。また、次の BlackBelt 資料も参考になるでしょう。 EventBridge に関連した Black Belt […]

はじめに みなさんこんにちは、ソリューションアーキテクトの福嶋です。 この度 2020 年 11 月 26 日（木）13:00 – 17:30 に「 AWS Autotech Forum 2020 Online #2 」を開催します！AWS では 2018 年・2019 年と自動車業界向けクラウドテクノロジーカンファレンス「 AWS Autotech Forum 」を実施してまいりました。 2020 年は夏と冬の 2 回開催に拡大しており、夏は AWS ソリューションアーキテクトから、自動車業界に関連した AWS のテクノロジーを中心にお伝えしました。今回は実際に AWS を活用いただいているお客様の事例を中心にセッションを構成しています。また、 #2 ではエンジニアのみなさまを対象に別日程で「 Autotech Forum Hands-on Day 」としてハンズオンをご提供します。 本投稿では、 #2 でお届けする６つのセッションの見どころをご紹介し、 2020 年 8 月 7 日に実施された「 AWS Autotech […]

本投稿は AWS サーバーレス アプリケーションのシニアデベロッパーアドボケートである Benjamin Smith による寄稿です。 本シリーズの他のパートは以下のリンクからアクセスできます。また、関連するサンプルコードはこちらの GitHub リポジトリにあります。 パート1：サーバーレス LAMP スタックの紹介 パート2：リレーショナルデータベース パート3：Webサーバーの置き換え パート4：サーバーレス Laravel アプリの構築 パート5：CDK コンストラクトライブラリ この投稿では、マイクロサービスを使用してサーバーレス PHP アプリケーションを構築する方法をご理解いただけます。これまでご紹介してきた MVC フレームワークを利用した単一の Lambda 関数によるスケーラブルな Web ホスティングから、分離されたマイクロサービスモデルに移行する方法を示します。なお、このブログ投稿に付随するコード例は、この GitHub リポジトリにあります。 MVC アーキテクチャパターン 従来の LAMP スタックでは、多くの場合、Model-View-Controller（MVC）アーキテクチャを使って実装しています。これは、アプリケーションロジックをモデル、ビュー、およびコントローラの3つの部分に分離して実装する、確立された手法です。 モデル：この部分はアプリケーションのデータを管理する役割を果たします。その役割は、データベースから生データを取得したり、コントローラからユーザー入力を受け取ることです。 ビュー：このコンポーネントは表示に焦点を当てています。モデルから受け取ったデータをユーザーに提示します。ユーザーからの応答が認識され、コントローラコンポーネントに送信されます。 コントローラ：この部分はアプリケーションロジックを担当します。ユーザー入力に応答し、データモデルオブジェクトに対して相互作用を実行します。 データ、ロジック、およびプレゼンテーション層を分離するという MVC の原則により、1つの層での変更が他の層に与える影響を最小限に抑えることが可能です。これにより、開発プロセスがスピードアップし、レイアウトの更新、ビジネスルールの変更、および新機能の追加が容易になります。コンポーネント化によって、再利用とリファクタリングの適用性があがり、同時/並行開発がしやすくなります。 サーバーレス LAMP スタック サーバーレス LAMP スタックアーキテクチャについては、この投稿で説明しています。そこでは Webアプリケーションが 2つのコンポーネントに分割されています。アプリケーションにおける MVC フレームワークの役割をはたす単一の AWS Lambda 関数と、各応答を同期的に返す […]

本投稿は AWS サーバーレス アプリケーションのシニアデベロッパーアドボケートである Benjamin Smith による寄稿です。 本シリーズの他のパートは以下のリンクからアクセスできます。また、関連するサンプルコードはこちらの GitHub リポジトリにあります。 パート1：サーバーレス LAMP スタックの紹介 パート2：リレーショナルデータベース パート3：Webサーバーの置き換え パート4：サーバーレス Laravel アプリの構築 パート6：MVC からサーバーレスマイクロサービスへ この投稿では、サーバーレス LAMP スタック用の新しい CDK コンストラクトライブラリが、開発者によるサーバーレス PHP アプリケーションの構築にどのように役立つかを学びます。 AWSクラウド開発キット（AWS CDK）は、クラウドアプリケーションリソースをコードで定義するためのオープンソースソフトウェア開発フレームワークです。開発者は、TypeScript、Python、C＃、Javaなどの使い慣れたプログラミング言語でインフラストラクチャを定義できます。開発者は、インターフェイス、ジェネリクス、継承、メソッドアクセス修飾子など、言語が提供する機能を利用できます。AWS Construct ライブラリは、CDK アプリケーションで AWS リソースを定義するための API を公開するモジュールの広範なセットを提供します。 「サーバーレス LAMP スタック」ブログシリーズでは、ベストプラクティス、コード例、多くのサーバーレスコンセプトの詳細を紹介し、これらが PHP アプリケーションにどのように適用されるかを示しています。また、PHP 開発者のインスピレーションを刺激するのに役立つ、コミュニティからの貴重な貢献に焦点を当てています。 このサーバーレス LAMP スタックの各コンポーネントについては、一連のブログ記事で詳しく説明しています。 パート1：サーバーレス LAMP スタックの紹介 パート2：リレーショナルデータベース パート3：Webサーバーの置き換え パート4：サーバーレス Laravel アプリの構築 サーバーレス LAMP […]