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

2024/11/23に公開

ゴール(はじめに)

こんにちは。今回は、職場の先輩の退職に際して、感謝の気持ちを込めたプチサプライズを企画しました。その内容は、Amazon S3を使って静的ウェブサイトを作成し、そのURLをQRコードに変換して色紙に添付するというものです。この記事では、その目的と実際に行った手順を共有したいと思います。
※ 個人情報が含まれていたため実際のコードではなくサンプルコードで作成しています。

作成したサンプルページ

やってみた結果

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

開発環境

MacBook
Visual Studio Code
ChatGPT(ウェブサイトのコンテンツ作成に利用)
AWSアカウント

事前準備

AWSアカウントの作成:まだ持っていない場合は、AWSの公式サイトからアカウントを作成します。
ウェブサイトのコンテンツ作成:ChatGPTを使って、先輩へのメッセージや仕掛けづくりを含むHTMLファイルを作成しました。

やったこと

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


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


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


赤枠の通りにチェックを行う
選択が行えたら、右下のs3バケットを作成をクリック

  1. 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>


  1. 静的ウェブサイトホスティングの有効化

バケットの「プロパティ」タブを開く

「静的ウェブサイトホスティング」を編集

「ウェブサイトホスティングを有効にする」を選択
インデックスドキュメントにindex.htmlを指定

設定を保存をクリック

  1. バケットの設定変更
    パブリックアクセスの許可
    デフォルトでは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をご自身のバッケット名に変更する
変更を保存をクリック

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

検索用のURLの取得

画像の赤枠のURLをコピーする

利用したツール:QRコード作成
https://qr.quel.jp/url.php
7. 色紙に添付
印刷したQRコードを色紙に貼り付ける

関連サービスの紹介

Amazon S3:オブジェクトストレージサービスで、静的ウェブサイトのホスティングが可能。
IAM:AWSのアクセス管理サービスで、ユーザーや権限の管理ができる。

おわりに

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

Discussion