⛳
先輩の退職に際してプチサプライズをしてみた

2024/11/23に公開
 ゴール（はじめに）こんにちは。今回は、職場の先輩の退職に際して、感謝の気持ちを込めたプチサプライズを企画しました。その内容は、Amazon S3を使って静的ウェブサイトを作成し、そのURLをQRコードに変換して色紙に添付するというものです。この記事では、その目的と実際に行った手順を共有したいと思います。

※ 個人情報が含まれていたため実際のコードではなくサンプルコードで作成しています。

 作成したサンプルページ

 やってみた結果先輩は色紙に貼られたQRコードを読み取り、メッセージなどやギミックを反映したウェブサイトを見て、とても喜んでくださいました。技術を使ったサプライズは大成功でした！

 開発環境MacBook

Visual Studio Code

ChatGPT（ウェブサイトのコンテンツ作成に利用）

AWSアカウント

 事前準備AWSアカウントの作成：まだ持っていない場合は、AWSの公式サイトからアカウントを作成します。

ウェブサイトのコンテンツ作成：ChatGPTを使って、先輩へのメッセージや仕掛けづくりを含むHTMLファイルを作成しました。

 やったことS3バケットの作成

AWSマネジメントコンソールからS3サービスを選択し、新しいバケットを作成しました。


バケット作成をクリックする


赤枠にバッケット名を入力


赤枠の通りにチェックを行う

選択が行えたら、右下のs3バケットを作成をクリック
webサイトのファイルをアップロード


作成したS3バッケットをクリック

ファイルを追加から作成したindex.htmlファイルをアップロード

アップロードをクリック
今回サンプルで作成したコードは以下に添付するのでご自由に使用してください

sample_code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylish Web Page</title>
  <style>
    body {
      margin: 0;
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #74ebd5, #ACB6E5);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .container {
      text-align: center;
      color: #fff;
    }

    h1 {
      font-size: 4rem;
      animation: slideIn 1.5s ease-in-out;
    }

    p {
      font-size: 1.2rem;
      animation: fadeIn 2s ease-in-out;
      margin-top: 10px;
    }

    .button {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 30px;
      font-size: 1rem;
      color: #fff;
      text-decoration: none;
      border: 2px solid #fff;
      border-radius: 30px;
      transition: all 0.3s ease;
      animation: bounce 2s infinite;
    }

    .button:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
    }

    @keyframes slideIn {
      from {
        transform: translateY(-100px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    .background-animation {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      animation: move 20s infinite linear;
    }

    @keyframes move {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-2000px);
      }
    }

    .circle:nth-child(1) {
      width: 50px;
      height: 50px;
      top: 50%;
      left: 10%;
    }

    .circle:nth-child(2) {
      width: 70px;
      height: 70px;
      top: 30%;
      left: 60%;
    }

    .circle:nth-child(3) {
      width: 100px;
      height: 100px;
      top: 80%;
      left: 80%;
    }

    .circle:nth-child(4) {
      width: 40px;
      height: 40px;
      top: 10%;
      left: 30%;
    }
  </style>
</head>
<body>
  <div class="background-animation">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="container">
    <h1>Welcome to My Stylish Web Page</h1>
    <p>Create your own animations and styles!</p>
    <a href="#" class="button">Get Started</a>
  </div>
</body>
</html>


静的ウェブサイトホスティングの有効化
バケットの「プロパティ」タブを開く

「静的ウェブサイトホスティング」を編集
「ウェブサイトホスティングを有効にする」を選択

インデックスドキュメントにindex.htmlを指定
設定を保存をクリック
バケットの設定変更

パブリックアクセスの許可

デフォルトではS3バケットは非公開のため、ウェブサイトとして公開するためにパブリックアクセスを許可します。
5.バケットポリシーの設定



編集をクリック
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::2024-11-23-test/*"
        }
    ]
}
こちらのコードの"Resource": "arn:aws:s3:::2024-11-23-test/*"

の2024-11-23-testをご自身のバッケット名に変更する

変更を保存をクリック
URLをQRコードに変換

ウェブサイトのエンドポイントURLを取得し、オンラインのQRコードジェネレーターを使ってQRコードを作成しました。
検索用のURLの取得



画像の赤枠のURLをコピーする
利用したツール：QRコード作成

https://qr.quel.jp/url.php

7. 色紙に添付

印刷したQRコードを色紙に貼り付ける

 関連サービスの紹介Amazon S3：オブジェクトストレージサービスで、静的ウェブサイトのホスティングが可能。

IAM：AWSのアクセス管理サービスで、ユーザーや権限の管理ができる。

 おわりに技術を活用して感謝の気持ちを伝える方法は、相手にとっても自分にとっても特別なものになります。今回のサプライズを通じて、技術の持つ可能性と、人を喜ばせる楽しさを改めて感じました。皆さんも大切な人へのサプライズにぜひ挑戦してみてください。
ゴール（はじめに）

作成したサンプルページ

やってみた結果

開発環境

事前準備

やったこと

関連サービスの紹介

おわりに

Discussion
