7.1. HTMLドキュメントの作成¶

作業の目的 [why]¶

HTMLドキュメントを作成します。

完了条件/事前条件 [設計者用情報]

完了条件 [after]

主処理は、以下を満たしたときに成功したものとします。

完了条件1: JavaScriptファイル"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"が存在する。
完了条件2: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"が存在する。
完了条件3: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"が存在する。
完了条件4: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"が存在する。

事前条件 [before]

主処理の実施は、以下の状態であることを前提とします。

事前条件1: HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-identity"が存在する。
事前条件2: JavaScriptファイル"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"が存在しない。
事前条件3: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"が存在しない。
事前条件4: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"が存在しない。
事前条件5: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"が存在しない。
事前条件6: Cognito識別子プール"handson-cli-cognito-identity-idpool"が存在する。
事前条件7: S3バケット"handson-cli-cognito-identity-data-XXXXXXXXXXXX"が存在する。

作業対象 [what]¶

ローカル環境

標準時間(合計)¶

8分

パラメータ設定¶

パラメータ設定の標準時間: 2分

作業に必要なモノ・情報 [resource]¶

作業開始には、以下が全て揃っていることが必要です。

リソース1: HTMLドキュメントファイル用ディレクトリ

今回は"${HOME}/environment/contents-handson-cli-cognito-identity"をHTMLドキュメントファイル用ディレクトリとします。

ディレクトリが存在することを確認します。

コマンド:

ls -d ${HOME}/environment/contents-handson-cli-cognito-identity

結果(例:存在する場合):

${HOME}/environment/contents-handson-cli-cognito-identity

存在しない場合は作成します。

コマンド:

mkdir -p ${HOME}/environment/contents-handson-cli-cognito-identity

リソース2: JavaScriptファイル名

作成するJavaScriptファイルの名称です。
今回は"post.js"とします。

リソース3: HTMLドキュメント名 (入力ページ)

作成するHTMLドキュメント(入力ページ)の名称です。
今回は"contact.html"とします。

リソース4: HTMLドキュメント名 (インデックスページ)

作成するHTMLドキュメント(インデックスページ)の名称です。
今回は"index.html"とします。

リソース5: HTMLドキュメント名 (ありがとうございましたページ)

作成するHTMLドキュメント(ありがとうございましたページ)の名称です。
今回は"thanks.html"とします。

リソース6: Cognito IDプール名

作成するHTMLドキュメント(入力ページ)が利用するCognito IDプールの名称です。
今回は"handson-cli-cognito-identity-idpool"とします。

リソース7: S3バケット名

作成するHTMLドキュメント(入力ページ)が利用するS3バケットの名称です。
今回は"handson-cli-cognito-identity-data-XXXXXXXXXXXX"とします。

リソース8: AWS SDK for Javascriptバージョン

作成するHTMLドキュメント(入力ページ)が利用するAWS SDK for Javascriptの名称です。
今回は"2.562.0"とします。

パラメータの指定¶

作業に必要なパラメータを変数に格納をします。

0.0. リージョンの指定¶

変数の設定

export AWS_DEFAULT_REGION='ap-northeast-1'

0.1. HTMLドキュメントファイルディレクトリの指定¶

変数の設定:

DIR_HTML_DOC="${HOME}/environment/contents-handson-cli-cognito-identity"

0.2. Javascriptファイル名の指定 (入力ページ)¶

入力ページのJavaScriptファイル名を指定します。

変数の設定:

HTML_DOC_NAME_JS='post.js'

変数の設定:

FILE_HTML_DOC_JS="${DIR_HTML_DOC}/${HTML_DOC_NAME_JS}" \
  && echo ${FILE_HTML_DOC_JS}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/post.js

0.3. HTMLドキュメント名の指定 (入力ページ)¶

入力ページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_FORM='contact.html'

変数の設定:

FILE_HTML_DOC_FORM="${DIR_HTML_DOC}/${HTML_DOC_NAME_FORM}" \
  && echo ${FILE_HTML_DOC_FORM}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/contact.html

0.4. HTMLドキュメント名の指定 (インデックスページ)¶

インデックスページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_INDEX='index.html'

変数の設定:

FILE_HTML_DOC_INDEX="${DIR_HTML_DOC}/${HTML_DOC_NAME_INDEX}" \
  && echo ${FILE_HTML_DOC_INDEX}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/index.html

0.5. HTMLドキュメント名の指定 (ありがとうございましたページ)¶

ありがとうございましたページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_THANKS='thanks.html'

変数の設定:

FILE_HTML_DOC_THANKS="${DIR_HTML_DOC}/${HTML_DOC_NAME_THANKS}" \
  && echo ${FILE_HTML_DOC_THANKS}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html

0.6. Cognito IDプール名の指定¶

Cognito IDプール名を指定します。

変数の設定:

COGNITO_IDENTITY_POOL_NAME='handson-cli-cognito-identity-idpool'

0.7. S3バケット名の指定¶

変数の設定:

S3_BUCKET_PREFIX_DATA='handson-cli-cognito-identity-data'

コマンド:

AWS_ID=$( \
  aws sts get-caller-identity \
    --query 'Account' \
    --output text \
) \
  && echo ${AWS_ID}

結果(例):

XXXXXXXXXXXX

変数の設定:

S3_BUCKET_DATA="${S3_BUCKET_PREFIX_DATA}-${AWS_ID}" \
  && echo ${S3_BUCKET_DATA}

結果(例):

handson-cli-cognito-identity-data-XXXXXXXXXXXX

0.8. AWS SDK for JavaScriptバージョンの指定¶

AWS SDK for JavaScriptのバージョンを指定します。

変数の設定:

AWS_SDK_VERSION='2.562.0'

注釈

AWS SDK for JavaScriptの最新バージョン情報は https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/ に記述されています。

パラメータの保存¶

設定されている変数の保存先となるファイル名を指定します。

変数の設定:

DIR_PARAMETER="${HOME}/tmp/parameter-handson-cli-cognito-identity"
FILE_PARAMETER="${DIR_PARAMETER}/$(date +%Y-%m-%d)-html-form_contact-aws-cognito-create.env" \
  && echo ${FILE_PARAMETER}

結果(例):

${HOME}/tmp/parameter-handson-cli-cognito-identity/2019-11-19-html-form_contact-aws-cognito-create.env

各変数に正しいパラメータ値が格納されていることを確認しながら保存します。

変数の確認:

cat << EOF > ${FILE_PARAMETER}

  # 0.0. AWS_DEFAULT_REGION:"ap-northeast-1"
         AWS_DEFAULT_REGION="${AWS_DEFAULT_REGION}"

  # 0.1. DIR_HTML_DOC:"${HOME}/environment/contents-handson-cli-cognito-identity"
         DIR_HTML_DOC="${DIR_HTML_DOC}"
  # 0.2. FILE_HTML_DOC_JS:"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"
         FILE_HTML_DOC_JS="${FILE_HTML_DOC_JS}"
  # 0.3. FILE_HTML_DOC_FORM:"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"
         FILE_HTML_DOC_FORM="${FILE_HTML_DOC_FORM}"
  # 0.4. FILE_HTML_DOC_INDEX:"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"
         FILE_HTML_DOC_INDEX="${FILE_HTML_DOC_INDEX}"
  # 0.5. FILE_HTML_DOC_THANKS:"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"
         FILE_HTML_DOC_THANKS="${FILE_HTML_DOC_THANKS}"
  # 0.6. COGNITO_IDENTITY_POOL_NAME:"handson-cli-cognito-identity-idpool"
         COGNITO_IDENTITY_POOL_NAME="${COGNITO_IDENTITY_POOL_NAME}"
  # 0.7. S3_BUCKET_DATA:"handson-cli-cognito-identity-data-XXXXXXXXXXXX"
         S3_BUCKET_DATA="${S3_BUCKET_DATA}"
  # 0.8. AWS_SDK_VERSION:"2.562.0"
         AWS_SDK_VERSION="${AWS_SDK_VERSION}"

EOF

cat ${FILE_PARAMETER}

下段の変数が入っていない、もしくは上段と同等の値が入っていない場合は、それぞれの手順番号に戻って変数の設定を行います。

タスクの実施¶

タスク標準時間: 6分

1. 前処理¶

1.1. 処理対象の状態確認¶

主処理の実施は、以下の状態であることを前提とします。

前提と異なることが判明した場合、直ちに処理を中止します。

事前条件1: HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-identity"が存在する。

「HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-identity"が存在する。」ことを確認します。

コマンド:

ls -d ${DIR_HTML_DOC}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity

事前条件2: JavaScriptファイル"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"が存在しない。

「JavaScriptファイル"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"が存在しない。」ことを確認します。

コマンド:

! ls ${FILE_HTML_DOC_JS}

結果(例):

ls: cannot access ${HOME}/environment/contents-handson-cli-cognito-identity/post.js: No such file or directory

事前条件3: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"が存在しない。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"が存在しない。」ことを確認します。

コマンド:

! ls ${FILE_HTML_DOC_FORM}

結果(例):

ls: cannot access ${HOME}/environment/contents-handson-cli-cognito-identity/contact.html: No such file or directory

事前条件4: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"が存在しない。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"が存在しない。」ことを確認します。

コマンド:

! ls ${FILE_HTML_DOC_INDEX}

結果(例):

ls: cannot access ${HOME}/environment/contents-handson-cli-cognito-identity/index.html: No such file or directory

事前条件5: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"が存在しない。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"が存在しない。」ことを確認します。

コマンド:

! ls ${FILE_HTML_DOC_THANKS}

結果(例):

ls: cannot access ${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html: No such file or directory

事前条件6: Cognito識別子プール"handson-cli-cognito-identity-idpool"が存在する。

「Cognito識別子プール"handson-cli-cognito-identity-idpool"が存在する。」ことを確認します。

コマンド:

aws cognito-identity list-identity-pools \
  --max-results 60 \
  --query "IdentityPools[?IdentityPoolName==\`${COGNITO_IDENTITY_POOL_NAME}\`].IdentityPoolName" \
  --output text

結果(例):

handson-cli-cognito-identity-idpool

事前条件7: S3バケット"handson-cli-cognito-identity-data-XXXXXXXXXXXX"が存在する。

「S3バケット"handson-cli-cognito-identity-data-XXXXXXXXXXXX"が存在する。」ことを確認します。

コマンド:

aws s3 ls s3://${S3_BUCKET_DATA} > /dev/null 2>&1

コマンド:

echo $?

結果(例):

1.2. 主処理に必要な情報の取得¶

IDプールIDの取得

コマンド:

COGNITO_IDENTITY_POOL_ID=$( \
  aws cognito-identity list-identity-pools \
    --max-results 60 \
    --query "IdentityPools[?IdentityPoolName==\`${COGNITO_IDENTITY_POOL_NAME}\`].IdentityPoolId" \
    --output text \
) \
  && echo ${COGNITO_IDENTITY_POOL_ID}

結果(例):

ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

2. 主処理¶

2.1. JavaScriptファイルの作成¶

変数の確認:

cat << ETX

  # FILE_HTML_DOC_JS:"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"
    FILE_HTML_DOC_JS:"${FILE_HTML_DOC_JS}"
  # AWS_DEFAULT_REGION:"ap-northeast-1"
    AWS_DEFAULT_REGION:"${AWS_DEFAULT_REGION}"
  # COGNITO_IDENTITY_POOL_ID:"ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    COGNITO_IDENTITY_POOL_ID:"${COGNITO_IDENTITY_POOL_ID}"
  # S3_BUCKET_DATA:"handson-cli-cognito-identity-data-XXXXXXXXXXXX"
    S3_BUCKET_DATA:"${S3_BUCKET_DATA}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_JS}
var func = function(id) { return document.getElementById(id); };
AWS.config.region = "${AWS_DEFAULT_REGION}";
AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: "${COGNITO_IDENTITY_POOL_ID}"});
AWS.config.credentials.get(function(err) {
  if (!err) {
    console.log("Cognito Identify Id: " + AWS.config.credentials.identityId);
  }
});

function uploadFile() {
  AWS.config.region = '${AWS_DEFAULT_REGION}';
  var s3BucketName = "${S3_BUCKET_DATA}";
  var now = new Date();
  var obj = {"title": func("title").value, "mail": func("mail").value ,"contents": func("contents").value, "date": now.toLocaleString()};
  var s3 = new AWS.S3({params: {Bucket: s3BucketName}});
  var blob = new Blob([JSON.stringify(obj, null, 2)], {type:'text/plain'});
  s3.putObject({Key: "uploads/" +now.getTime()+".txt", ContentType: "text/plain", Body: blob, ACL: "public-read"},
  function(err, data){
    if(data !== null){
      window.location.href = './thanks.html';
    }
    else{
      alert("Upload Failed" + err.message);
    }
  });
}
EOF

cat ${FILE_HTML_DOC_JS}

結果(例):

var func = function(id) { return document.getElementById(id); };
AWS.config.region = "ap-northeast-1";
AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: "ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"});
AWS.config.credentials.get(function(err) {
    if (!err) {
        console.log("Cognito Identify Id: " + AWS.config.credentials.identityId);
    }
});

function uploadFile() {
  AWS.config.region = 'ap-northeast-1';
  var s3BucketName = "handson-cli-cognito-identity-data-XXXXXXXXXXXX";
  var now = new Date();
  var obj = {"title": func("title").value, "mail": func("mail").value ,"contents": func("contents").value, "date": now.toLocaleString()};
  var s3 = new AWS.S3({params: {Bucket: s3BucketName}});
  var blob = new Blob([JSON.stringify(obj, null, 2)], {type:'text/plain'});
  s3.putObject({Key: "uploads/" +now.getTime()+".txt", ContentType: "text/plain", Body: blob, ACL: "public-read"},
  function(err, data){
    if(data !== null){
      window.location.href = './thanks.html';
    }
    else{
      alert("Upload Failed" + err.message);
    }
  });
}

2.2. 問合せフォームの作成¶

変数の確認:

cat << ETX

  # FILE_HTML_DOC_FORM:"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"
    FILE_HTML_DOC_FORM:"${FILE_HTML_DOC_FORM}"
  # AWS_SDK_VERSION:"2.562.0"
    AWS_SDK_VERSION:"${AWS_SDK_VERSION}"
  # HTML_DOC_NAME_JS:"post.js"
    HTML_DOC_NAME_JS:"${HTML_DOC_NAME_JS}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_FORM}
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://sdk.amazonaws.com/js/aws-sdk-${AWS_SDK_VERSION}.min.js"></script>
<title>お問い合わせフォーム</title>
<script src="./${HTML_DOC_NAME_JS}"></script>

<div>
  <div>
    <form>
      <table>
        <tr>
          <th>件名</th>
          <td><input id="title" type="text" name="title" maxlength="40" value="" /></td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td><input id="mail" type="email" name="mail" size="20" maxlength="50" /></td>
        </tr>
        <tr>
          <th>お問い合わせ内容</th>
          <td><textarea id="contents" cols="70" rows="6" name="contents"></textarea></td>
        </tr>
      </table>
      <div>
        <input onClick="uploadFile();" type="button" value="送信" id="button" />
      </div>
    </form>
  </div>
</div>
EOF

cat ${FILE_HTML_DOC_FORM}

結果(例):

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.562.0.min.js"></script>
<title>お問い合わせフォーム</title>
<script src="./post.js"></script>

<div>
  <div>
    <form>
      <table>
        <tr>
          <th>件名</th>
          <td><input id="title" type="text" name="title" maxlength="40" value="" /></td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td><input id="mail" type="email" name="mail" size="20" maxlength="50" /></td>
        </tr>
        <tr>
          <th>お問い合わせ内容</th>
          <td><textarea id="contents" cols="70" rows="6" name="contents"></textarea></td>
        </tr>
      </table>
      <div>
        <input onClick="uploadFile();" type="button" value="送信" id="button" />
      </div>
    </form>
  </div>
</div>

2.3. インデックスページの作成¶

変数の確認:

cat << ETX

  # FILE_HTML_DOC_INDEX:"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"
    FILE_HTML_DOC_INDEX:"${FILE_HTML_DOC_INDEX}"
  # HTML_DOC_NAME_FORM:"contact.html"
    HTML_DOC_NAME_FORM:"${HTML_DOC_NAME_FORM}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_INDEX}
<!DOCTYPE html>
<meta charset="UTF-8">
<title>ようこそ</title>

<h1>ようこそ</h1>

<p><a href="./${HTML_DOC_NAME_FORM}">お問い合わせ</a></p>
EOF

cat ${FILE_HTML_DOC_INDEX}

結果(例):

<!DOCTYPE html>
<meta charset="UTF-8">
<title>ようこそ</title>

<h1>ようこそ</h1>

<p><a href="./contact.html">お問い合わせ</a></p>

2.4. Thanksページの作成¶

変数の確認:

cat << ETX

  # FILE_HTML_DOC_THANKS:"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"
    FILE_HTML_DOC_THANKS:"${FILE_HTML_DOC_THANKS}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_THANKS}
<!DOCTYPE html>
<meta http-equiv="refresh" content="5;URL=./${HTML_DOC_NAME_INDEX}">
<meta charset="UTF-8">
<title>お問い合わせありがとうございました。</title>

<h1>お問い合わせありがとうございました。</h1>

<p><a href="./${HTML_DOC_NAME_INDEX}">トップページに戻る</a></p>
EOF

cat ${FILE_HTML_DOC_THANKS}

結果(例):

<!DOCTYPE html>
<meta http-equiv="refresh" content="5;URL=./index.html">
<meta charset="UTF-8">
<title>お問い合わせありがとうございました。</title>

<h1>お問い合わせありがとうございました。</h1>

<p><a href="./index.html">トップページに戻る</a></p>

3. 後処理¶

完了条件の確認¶

主処理は、以下を満たしたときに成功したものとします。

完了条件1: JavaScriptファイル"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"が存在する。

「JavaScriptファイル"${HOME}/environment/contents-handson-cli-cognito-identity/post.js"が存在する。」ことを確認します。

コマンド:

ls ${FILE_HTML_DOC_JS}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/post.js

完了条件2: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"が存在する。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/contact.html"が存在する。」ことを確認します。

コマンド:

ls ${FILE_HTML_DOC_FORM}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/contact.html

完了条件3: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"が存在する。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/index.html"が存在する。」ことを確認します。

コマンド:

ls ${FILE_HTML_DOC_INDEX}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/index.html

完了条件4: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"が存在する。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html"が存在する。」ことを確認します。

コマンド:

ls ${FILE_HTML_DOC_THANKS}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-identity/thanks.html

handson: aws service (cognito identity)

7.1. HTMLドキュメントの作成¶

作業の目的 [why]¶

作業対象 [what]¶

標準時間(合計)¶

パラメータ設定¶

作業に必要なモノ・情報 [resource]¶

パラメータの指定¶

0.0. リージョンの指定¶

0.1. HTMLドキュメントファイルディレクトリの指定¶

0.2. Javascriptファイル名の指定 (入力ページ)¶

0.3. HTMLドキュメント名の指定 (入力ページ)¶

0.4. HTMLドキュメント名の指定 (インデックスページ)¶

0.5. HTMLドキュメント名の指定 (ありがとうございましたページ)¶

0.6. Cognito IDプール名の指定¶

0.7. S3バケット名の指定¶

0.8. AWS SDK for JavaScriptバージョンの指定¶

パラメータの保存¶

タスクの実施¶

1. 前処理¶

1.1. 処理対象の状態確認¶

1.2. 主処理に必要な情報の取得¶

2. 主処理¶

2.1. JavaScriptファイルの作成¶

2.2. 問合せフォームの作成¶

2.3. インデックスページの作成¶

2.4. Thanksページの作成¶

3. 後処理¶

完了条件の確認¶

完了¶