BLOG

ブログ（ EdTech, web制作, DX ）

EdTech Web制作・システム DX プロジェクトマネジメント講座 Webディレクション講座ワークスタイル

2021.02.25 edit

今井健一朗

サーバレスでお問い合わせフォームを実装してみる（１）

こんにちは、システムエンジニアの今井です。

前回のブログ「サーバーレスとは本当にサーバーがないこと？」でサーバーレスのしくみについて概要を紹介しました。今回からは全 4回に分けて「サーバーレスでお問い合わせフォームを実装する方法」について解説します。

→（１）サーバーレスでお問い合わせフォームを実装してみる（フォームとAPIの作成）
（２）サーバーレスでお問い合わせフォームを実装してみる（フォームからAPIへ値の送信）
（３）サーバレスでお問い合わせフォームに記載された内容をDBに保存してみる1
（４）サーバレスでお問い合わせフォームに記載された内容をDBに保存してみる2

「サーバーレスお問い合わせフォーム」の全体像

今回は「ユーザーがお問い合わせをするフォーム」と「リクエストを受けてレスポンスを返すAPI」をそれぞれ動作させてみます。

1. S3にバケットを作成

S3とはSimple Storage Serviceの略称で、HDDやSSDのようなストレージを提供するサービスです。Web制作の現場では「FTPのようなファイル置き場」と言ったほうがわかりやすいかもしれません。

S3ではバケット（バケツ）というフォルダのようなものにファイル（オブジェクト）を格納します。バケットごとにアクセス制御ができるため、必要に応じて公開範囲を変更することができます。

それでは実際にS3にHTMLファイルを載せるためのバケットを作成します。

（１）Amazon S3のページを開きます。

https://s3.console.aws.amazon.com/s3/

（２）バケットを作成をクリックします。

（３）バケット名に「contact-example」と入力します。（その他の設定はデフォルトのままにしておきます）

（４）デフォルトでは外部からのアクセスをすべて遮断する「パブリック・アクセスをすべてブロック」設定になっているため、チェックを外して公開設定に変更します。

（５）スクロールして「バケットを作成」をクリックして確定します。

バケットが作成されました。

2. HTMLファイルをバケットにアップロード

次に、バケットにフォームを記述したHTMLファイルをアップロードします。

（１）さきほど作成したバケット「contact-example」をクリックして開きます。

（２）バケットの詳細画面が開きます。

（３）アップロードをクリックします。

（４）今回アップロードするのはフォームが記載されたこちらのファイルです。「index.html」

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<title>test</title>
</head>
<body>
<form id="contact_form">
会社名：<input type="text" name="company" value="" required /><br/>
メールアドレス：<input type="email" name="email" value="" required /><br/>
<input type="button" id="send" value="送　信"/>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var target_url = '';

$(function(){
    $('#send').on('click', function(){
        var company    = $('#contact_form input[name="company"]').val();
        var email      = $('#contact_form input[name="email"]').val();

        if(window.confirm('入力内容を送信します。よろしいでしょうか？')){
            var formdata = {
                'company' : company,
                'email' : email
            };

            $.ajax({
                type: 'POST',
                url: target_url,
                dataType: 'json',
                data: formdata,
                scriptCharset: 'utf-8',
                cache: false
            }).done(function(res) {
                if (res.result==0) {
                    alert('サーバエラーが発生しました。');
                }
                alert("お問い合わせ、ありがとうございます。\n送信は正常に完了しました。\n\n近日中に担当の者よりご連絡させていただきます。\n\n今後とも何卒よろしくお願いいたします。");
                console.log(res);
            }).fail(function(request, status, err){
                alert('error');
                console.log({request: request, status: status, err: err});
            });
        }
    });
});
</script>
</body>
</html>

ファイルを範囲にドラッグアンドドロップします。
def210129_1816

（５）ファイルが追加されました。（まだ保存されていません）

（６）「アップロード」をクリックして確定します。

ファイルがアップロードできました。

アップロードしたhtmlファイルにアクセスしてみます。
「index.html」をクリックします。

詳細ページで「オブジェクトURL」をクリックします。

htmlファイルが開きますが、アクセスが拒否されてしまいます。

デフォルトではアップロードしたhtmlは非公開になっているため、アクセス許可を設定する必要があります。
「アクセス許可」をクリックします。