AWS Amplifyを使ってアプリ開発！3階層の概要や手順を紹介

アプリ開発もできるAWS（Amazon Web Service）について、「名前は聞いたことがあるけど、どういうものなのかわからない」という不安や、「Amazonが提供するサービスで本当にアプリが作れるの？」といった疑問を感じる方もいるかもしれません。
この記事では、アプリ開発をしたことがないという初学者向けに、Webアプリやモバイルアプリの概要、AWSの特徴、AWSでアプリケーションを作成する方法について解説します。

 

目次

 

 

 

Webアプリとモバイルアプリについて

Amazon社が提供するAWSでは、バックエンドの知識がなくてもWebアプリやモバイルアプリを作成できる「AWS Amplify」という開発プラットフォームを提供しています。Webアプリとモバイルアプリはよく似た機能を持っていますが、インストールの有無や利用環境は異なるものです。まずはWebアプリとモバイルアプリの違いについてみていきます。

 

●Webアプリとは

Webアプリとは、インターネットを利用してWebサーバーで動作するアプリケーションのことです。ChromeやSafariといったWebブラウザ上で操作するので、ユーザーはアプリをインストールしなくても利用できます。

そのため、インターネットに接続していない状態では利用することができません。Webアプリはサーバーサイド上に存在するため、セキュリティ上の脅威にさらされる可能性はあるものの、常に最新の状態にアップデートしやすいという利点があります。

 

●モバイルアプリとは

モバイルアプリとは、スマートフォンやタブレットなどの端末にインストールして利用するアプリケーションを指します。

Webブラウザもモバイルアプリの1つであり、ブラウザアプリとも呼ばれています。アプリケーションの入手先は、端末のOSによって変わります。モバイルアプリは、アプリケーションが端末のストレージに保存されるため、インターネット接続がない環境でも利用できます。端末のストレージに保存されているという性質上、外部からのアクセスが難しいためセキュリティの水準が高いという利点もあります。

 

知っておきたいWebアプリ・モバイルアプリの3階層

Webアプリやモバイルアプリを動かすにあたって知っておきたいのが、3層アーキテクチャー（Web3階層）のシステムです。3層アーキテクチャーは、大規模なWebシステムやWebアプリケーションを支える技術の1つです。3層アーキテクチャーは、下記の3種類の構造から成り立っています。

• プレゼンテーション層（ユーザー・インターフェース）

• アプリケーション層（データ処理）

• データ層（データの保管・管理）

階層を明確に切り分けることで、システム性能が安定しやすくなり、開発・保守の効率が上がります。層の拡張・更新などをほかの層に影響を与えずに行えるため、仕様変更がしやすいというメリットもあります。

 

●プレゼンテーション層

Webサーバーのことであり、「Webサーバー層」と呼ばれることもあります。WebブラウザやGUIなどフロントエンドの表示処理に特化した階層で、利用者からのリクエストに応じて静的ページを表示します。絞り込み検索やECサイトの商品追加といった機能を持つ動的ページの場合は、一旦アプリケーションサーバーにデータ処理を委託し、返ってきた情報を表示します。利用者がアプリケーションを操作するためのユーザー・インターフェースを構築し、データの送受発信を担う層です。

 

●アプリケーション層

Webアプリケーションサーバーのことで、システムのコアとなる機能を動作させるためのサーバーサイド・プログラムが格納されています。アプリケーション層は、プレゼンテーション層からデータを受け取り、プログラムを実行してデータの検索・加工を行い、再びプレゼンテーション層へ転送します。プレゼンテーション層やデータ層から受け取る情報を処理する階層であるため、「論理層」や「中間層」と呼ばれることもあります。

 

●データ層

データベースサーバーのことで、アプリケーション層によって処理された情報の保管・管理を行います。アプリケーション層からの要求に応じて、条件に合うデータを検索したり、データの登録や書き換えをしたりする役割を担い、主にRDBMS（リレーショナルデータベース管理システム）というソフトウェアを利用して構築されます。

Webアプリについて理解するだけでも多くの情報が出てきましたね。Webアプリを作成は、開発会社への依頼がおすすめです。効率良く外注先を探すなら、ぜひ「発注ナビ」をご活用ください。発注ナビでは、システム開発会社に特化したパートナー選定のサポートを行っています。すぐにでもWebアプリ開発を進めたい方は、お気軽にご相談ください。

 

Webアプリ開発を加速させるAWS Amplifyとは？

AWS Amplifyとは、アプリケーションを開発するために提供されているサービスです。簡単な操作でバックエンドを作成し、フロントエンドと接続可能なのが特徴で、バックエンドの知識や経験がなくても、直感的に構築できるのが魅力です。

Amplifyは、主に以下のようなサービスで構成されています。

サービス名	概要
Amplify Studio	バックエンドとの統合・管理機能を持つGUI開発環境
Amplify CLI	バックエンドを構築できるインターフェース（CLI）
Amplify Libraries	アプリケーションを構築するためのクライアントライブラリ
Amplify UI Components	デザイン構築のためのUIコンポーネント
Amplify Web Hosting	CI/CDやアプリをホスティングするためのサービス

 

WebアプリをAWS Amplifyで開発する手順

AWS Amplifyを使えば、アプリ開発の経験が少なくても、開発からデプロイまで可能です。Amplifyを用いてアプリを開発する方法は細分化されていますが、ここでは視覚的なデザインができるFigmaと連携した開発手順を紹介します。

 

1. Amplify CLIをインストール
2. Figmaのデザインをインポート
3. コンポーネントとデータモデルを紐付け
4. ローカル環境へ取り込み
5. 動作テストを行う

 

●1.Figmaのアカウントを作成

デザインツーコードFigmaのアカウントを作成しましょう。Figmaと連携することで、フロントエンドの UIを直感的に構築できるようになります。

Figmaの公式サイトへアクセスして「Try Figma for free」をクリックし、アカウントを新規登録してください。画面にしたがって登録情報を入力したらFigmaのアカウント作成は完了です。

 

●2.Amplify CLIをインストール

Amplify CLIをインストールする前に、Amplify推奨バージョンのNode.jsとnpm（Node.jsのパッケージ管理ツール）が、使用するPCにインストールされているか確認してください。Node.jsやnpmがインストールされていない場合、もしくは推奨バージョン以下である場合は、nodeの公式サイトへ行き、最新版をインストールしましょう。

Node.jsの準備ができたらターミナルを開き、Amplify CLIをnpmコマンドでインストールして、AWSアカウントの設定も行います。

AWSのログイン画面が表示されるので、ログインします。ターミナルに戻り、Enterを押してください。リージョンやIAMユーザー名を聞かれるので、ap-northeast-1（東京リージョン）を選択します。

リージョン選択後にEnterを押すと、ブラウザでIAMユーザーの作成画面が表示されます。画面にしたがってIAMユーザーの作成をしましょう。IAMユーザー作成をしても画面を閉じず、ターミナルに戻ってEnterを押します。するとIAMユーザーのアクセスキーIDの入力を求められるので、ブラウザのIAMユーザー作成完了画面を参考に入力します。これでアカウント設定は完了です。

 

●3.Figmaのデザインをインポート

AWS AmplifyはFigma形式のファイルを提供しているため、Amplify StudioにFigmaのデザインをインポートできます。

Amplify Studioを起動します。「UI Library」を開き、「Get Started」を選択します。テキストが表示されるので、まずは「Use our Figma template」と書かれたリンクを開いてみましょう。デザイナーから共有されたコンポーネントがある場合は、Figmaファイルのリンクを貼りつけます。

Figmaの画面が開き、右上にある「Share」ボタンをクリックします。Amplify と Figma を連携させるための URL を取得できます。Amplify Studio に戻ってURL を貼り付け、Allow access（アクセスを許可）をクリックすることで、連携は完了です。

 

●4.コンポーネントとデータモデルを紐付け

Amplify Studioから「Data」を選択して「Add model」をクリックすることで、データモデルを作成します。データモデルを作成したら、コンポーネントと作成したデータモデルを紐付けする作業を行いましょう。

データモデルとコンポーネントの画像を紐付けるために、「UI Library」から「Home Card」を選択し、Configureをクリック。この画面から、データモデルで作成した項目と、コンポーネントのプロパティを紐付けることができます。

 

●5.ローカル環境へ取り込み

コンポーネントをデプロイするためには、ローカル環境へ取り込む必要があります。

ローカル環境にフォルダを作成し、cdコマンドでフォルダへ移動します。次にReactアプリケーションを初期化しましょう。ReactはJavaScriptのフレームワークなので、Reactが入っていない場合は、パッケージインストールを続行するかどうか聞かれます。その際には、「ｙ」を押して進めてください。

Amplify Studioに戻ったら「Get component code」の「Use this component」をクリックしてamplify pullコマンドをコピーし、ターミナルで実行することで、ローカル環境へコンポーネントを取り込めます。

 

●6.動作テストを行う

ローカル環境にアプリを保存できたら、保存したアプリを起動して動作テストを行います。表示が崩れていないか、バグが生じていないかをチェックをしましょう。不具合があれば修正を行い、それを繰り返すことで、完成度を上げていきます。修正が完了したらデプロイ可能です。

 

Webアプリは外注と自社開発のどちらが得？

Webアプリの開発には専門知識が必要であるため、自社内に開発チームがない場合は外注をするのが一般的です。ここでは、外注と自社開発（内製）について、それぞれのメリット・デメリットを解説します。

 

●外注するメリットとデメリット

メリット	・専門知識のある社員がいなくても質の高いWebアプリ開発ができる
	・リソースを割くことなく本業に集中できる
デメリット	・ある程度のコストがかかる
	・ノウハウを蓄積できない

システム開発会社に外注する最大のメリットは、専門知識を持つプロにアプリを作ってもらえるという点です。開発に慣れているため納期も明確で、機能の実装はもちろん、セキュリティ面も考慮したアプリを開発してくれます。開発に自社のリソースを割く必要がないので、本業に集中できるのも利点です。

外注するデメリットとしては、外注するという都合上、費用がかかるという点です。アプリをリリースした後の運用・保守をどれくらいサポートしてくれるかについても、企業によって対応に差があります。

 

●自社開発するメリットとデメリット

メリット	・開発コストを抑えられる
デメリット	・品質は保証されない
	・リソースが割かれ本業に影響が出る可能性がある

 

自社開発をするメリットは、アプリ開発費用の圧縮ができることです。社内で開発を進めるため、スケジュールや仕様の変更にも素早く対処できるでしょう。納期も後ろ倒しになりやすいという懸念はあるものの、仕様を柔軟に変更できるのは利点です。自社で開発にチャレンジする経験によって、アプリ開発のノウハウが得られるのも大きなメリットといえます。

デメリットとしては、アプリの品質が低くなりやすい点です。開発チームのない企業で内製を進めるのはそう簡単ではありません。本業と並行しながら、限られた予算の範囲内で進行管理を行う必要があります。社内の人材を使った開発となるので、コアとなる業務への影響も懸念されます。

AWS Amplifyを使えば、バックエンドの経験がなくても直感的にアプリ開発を進めることが可能です。ノウハウをストックするためにも、このようなサービスを使いながら自社開発にチャレンジするのも1つの手です。

一方で、AWS Amplifyを採用するにしても、アプリ開発はそれなりの費用を要するプロジェクトです。自社開発に挑戦する姿勢も重要ですが、開発そのものが目的になると、実用に耐えない機能やセキュリティリスクを抱えたアプリができてしまう可能性も考慮しなくてはいけません。そのようなリスクを回避するという意味でも、システム開発会社へ外注することで、より品質の高いアプリをスピーディーに構築できます。

多くの企業が自社アプリ開発のために外注を選んでいますが、発注先を探すにしても独自調査で比較検討をするのは手間がかかります。専門知識がないと、比較自体が難しいこともあります。

二人三脚でアプリ開発をサポートしてくれるパートナー企業をお探しの方は、システム開発会社に特化したマッチングサービス「発注ナビ」をご利用ください。発注ナビでは、システム開発に詳しいスタッフが要望を叶えられる会社を選定し、ご提案します。

相談から見積もりまで無料でご利用いただけますので、自社アプリを開発したいとお考えの方はぜひ「発注ナビ」への相談ください。

 

 

 

 

■アプリ開発に関連した記事