2.1. HTMLドキュメントの作成 (ランディングページ)

作業の目的 [why]

ランディングページ用HTMLドキュメントを作成します。

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

完了条件 [after]

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

完了条件1

HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が存在する。

完了条件2

HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が存在する。

完了条件3

HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/logout.html"が存在する。

事前条件 [before]

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

事前条件1

HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-idp-landing"が存在する。

事前条件2

HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が存在しない。

事前条件3

HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が存在しない。

事前条件4

HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/logout.html"が存在しない。

作業対象 [what]

  • HTMLドキュメント

標準時間(合計)

8分

パラメータ設定

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

2分

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

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

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

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

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

コマンド:

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

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

${HOME}/environment/contents-handson-cli-cognito-idp-landing

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

コマンド:

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

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

  • 作成するHTMLドキュメント(インデックスページ 初版)の名称です。

  • 今回は"index.html"とします。

リソース3: HTMLドキュメント名 (コールバックページ)

  • 作成するHTMLドキュメント(コールバックページ 初版)の名称です。

  • 今回は"callback.html"とします。

リソース4: HTMLドキュメント名 (ログアウトページ)

  • 作成するHTMLドキュメント(ログアウトページ)の名称です。

  • 今回は"logout.html"とします。

パラメータの指定

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

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

変数の設定:

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

0.2. 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-idp-landing/index.html

0.3. HTMLドキュメント名の指定 (コールバックページ)

コールバックページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_CALLBACK='callback.html'

変数の設定:

FILE_HTML_DOC_CALLBACK="${DIR_HTML_DOC}/${HTML_DOC_NAME_CALLBACK}" \
  && echo ${FILE_HTML_DOC_CALLBACK}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html

0.4. HTMLドキュメント名の指定 (ログアウトページ)

ログアウトページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_LOGOUT='logout.html'

変数の設定:

FILE_HTML_DOC_LOGOUT="${DIR_HTML_DOC}/${HTML_DOC_NAME_LOGOUT}" \
  && echo ${FILE_HTML_DOC_LOGOUT}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/logout.html

パラメータの保存

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

変数の設定:

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

結果(例):

${HOME}/tmp/parameter-handson-cli-cognito-idp/2019-12-11-html-landing-create-expand-aws-cognito-idp.env

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

変数の確認:

cat << EOF > ${FILE_PARAMETER}

  # 0.1. DIR_HTML_DOC:"${HOME}/environment/contents-handson-cli-cognito-idp-landing"
         DIR_HTML_DOC="${DIR_HTML_DOC}"
  # 0.2. FILE_HTML_DOC_INDEX:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"
         FILE_HTML_DOC_INDEX="${FILE_HTML_DOC_INDEX}"
  # 0.3. FILE_HTML_DOC_CALLBACK:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"
         FILE_HTML_DOC_CALLBACK="${FILE_HTML_DOC_CALLBACK}"
  # 0.4. FILE_HTML_DOC_LOGOUT:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/logout.html"
         FILE_HTML_DOC_LOGOUT="${FILE_HTML_DOC_LOGOUT}"

EOF

cat ${FILE_PARAMETER}

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

タスクの実施

タスク標準時間

6分

1. 前処理

処理対象の状態確認

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

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

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

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

コマンド:

ls -d ${DIR_HTML_DOC}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing

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

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

コマンド:

! ls ${FILE_HTML_DOC_INDEX}

結果(例):

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

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

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

コマンド:

! ls ${FILE_HTML_DOC_CALLBACK}

結果(例):

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

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

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

コマンド:

! ls ${FILE_HTML_DOC_LOGOUT}

結果(例):

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

2. 主処理

2.1. Indexページ(初版)の作成

変数の確認:

cat << ETX

  # FILE_HTML_DOC_INDEX:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"
    FILE_HTML_DOC_INDEX:"${FILE_HTML_DOC_INDEX}"

ETX

コマンド:

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

<h1>ようこそ</h1>

EOF

cat ${FILE_HTML_DOC_INDEX}

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

<h1>ようこそ</h1>

2.2. コールバックページ(初版)の作成

変数の確認:

cat << ETX

  # FILE_HTML_DOC_CALLBACK:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"
    FILE_HTML_DOC_CALLBACK:"${FILE_HTML_DOC_CALLBACK}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_CALLBACK}
<!DOCTYPE html>
<meta charset="UTF-8">
<title>MyPage</title>

<h1>MyPage</h1>

EOF

cat ${FILE_HTML_DOC_CALLBACK}

<!DOCTYPE html>
<meta charset="UTF-8">
<title>MyPage</title>

<h1>MyPage</h1>

2.3. ログアウトページの作成

変数の確認:

cat << ETX

  # FILE_HTML_DOC_LOGOUT:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/logout.html"
    FILE_HTML_DOC_LOGOUT:"${FILE_HTML_DOC_LOGOUT}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_LOGOUT}
<!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_LOGOUT}

<!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>

3. 後処理

完了条件の確認

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

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

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

コマンド:

ls ${FILE_HTML_DOC_INDEX}

結果(例):

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

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

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

コマンド:

ls ${FILE_HTML_DOC_CALLBACK}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html

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

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

コマンド:

ls ${FILE_HTML_DOC_LOGOUT}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/logout.html

完了