Qiita Engineer Festa20242024年7月17日まで開催中！

朝会のファシリを決める脳汁くじ引きをサクッと作る

Last updated at 2024-07-04Posted at 2024-07-04

はじめに

こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）

毎日業務で朝会をやると思いますが、ファシリテーター固定じゃつまらないですよね😁
しかも、朝から脳汁分泌できたら気持ちよく無いですか？😇

そんな変態な方へ送るファシリテーターくじ引きをサクッと作ります。

完成したもの

こちらになります。
毎回朝会のはじめに回してもらい、次回のファシリテーターを決める運用にします。

パ、パトランプ気持ちええ〜〜！！！

確定演出気持ちええ〜〜〜！！！

朝からこんなに気分が上がるくじ引き、あったでしょうか？😍
スタートボタンを押すたびに抽選が行われ、一定の確率で虹色＆パトランプ演出が発生します！🤩

まあ、そんな大層なことはしてないので、チャチャっと紹介します。

ソースコード

基本的なHTML、CSS、JavaScriptの3つのファイルのみで簡単に作っています。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ファシリテーターくじ引き</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./style.css" type="text/css" />
  </head>
  <body>
    <h1><span>次回のファシリテーター</span></h1>
    <div class="container">
      <div id="result-container">
        <div id="gifContainer"></div>
        <h2><span id="result"></span> さん</h2>
      </div>
      <div class="btn-border-gradient-wrap btn-border-gradient-wrap--gold">
        <a onclick="getResult()" class="btn btn-border-gradient"
          ><span class="btn-text-gradient--gold">スタート</span></a
        >
      </div>
    </div>
  </body>
</html>

構造的にはそんな変わんないですね。
headでstyle.cssとindex.js、ついでにjqueryを呼び出して後はクラスを適当にポイポイポイ。

style.css

* {
  background: #000;
}

h1 {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
    "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
  padding: 1rem 2rem;
  color: #fff;
  text-align: center;
  font-size: 60px;
}

h1 span {
  background-image: linear-gradient(
    315deg,
    #b8751e 0%,
    #ffce08 37%,
    #fefeb2 47%,
    #fafad6 50%,
    #fefeb2 53%,
    #e1ce08 63%,
    #b8751e 100%
  );
  background-image: linear-gradient(
    135deg,
    #b8751e 0%,
    #ffce08 37%,
    #fefeb2 47%,
    #fafad6 50%,
    #fefeb2 53%,
    #e1ce08 63%,
    #b8751e 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container {
  margin: 40px 0px;
}

h2 {
  color: white;
}

#result {
  font-size: 50px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

/*背景*/
body {
  padding: 30px;

  text-align: center;

  background: #000;
}

.btn-border-gradient-wrap {
  display: inline-block;

  padding: 0.2rem;

  border-radius: 0.5rem;
}

.btn-border-gradient-wrap--gold {
  background-image: linear-gradient(
    315deg,
    #704308 0%,
    #ffce08 37%,
    #fefeb2 47%,
    #fafad6 50%,
    #fefeb2 53%,
    #e1ce08 63%,
    #704308 100%
  );
  background-image: linear-gradient(
    135deg,
    #704308 0%,
    #ffce08 37%,
    #fefeb2 47%,
    #fafad6 50%,
    #fefeb2 53%,
    #e1ce08 63%,
    #704308 100%
  );
}

.btn-border-gradient-wrap--gold:hover a.btn {
  text-shadow: 0 0 15px rgba(250, 250, 214, 0.5),
    0 0 15px rgba(250, 250, 214, 0.5), 0 0 15px rgba(250, 250, 214, 0.5),
    0 0 15px rgba(250, 250, 214, 0.5);
}

a.btn-border-gradient {
  font-size: 2rem;
  background: #000;
}

.btn-text-gradient--gold {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
    "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;

  background: gradient(
    linear,
    left bottom,
    left top,
    from(#ffffdb),
    to(#a16422)
  );

  background: linear-gradient(bottom, #ffffdb, #a16422);

  background: linear-gradient(to top, #ffffdb, #a16422);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes rainbow {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

.rainbow-text {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    lime,
    blue,
    indigo,
    violet,
    red
  );
  background-size: 200%;
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbow 2s linear infinite;
}

#result-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

CSSではライ⚫︎ップみたいな黄金と、確定演出時に出すレインボーアニメーションを作成しています。
classとidがごっちゃごちゃになっているのは見逃してください🥲

index.js

// くじ引き結果
const results = [
  "センリツ",
  "ゴレイヌ",
  "トンパ",
  "メレオロン",
  "恐ろしく早い手刀",
];

function getResult() {
  var random = Math.floor(Math.random() * results.length);
  var result = results[random];
  if (Math.random() < 0.3) {
    // 30%の確率で虹色アニメーションを適用
    $("#result").addClass("rainbow-text");
    $("#gifContainer").append(
      '<img src="https://4boom.jp/blog/wp-content/uploads/2015/08/A4_PDF%E8%A1%A8%E3%80%90%EF%BC%A7%EF%BC%A9%EF%BC%A6%E3%80%91%E3%83%91%E3%83%88%E3%83%A9%E3%83%B3%E3%83%975.gif" width="100px">'
    );
    $("#result").html(result).hide().fadeIn(3000);
  } else {
    $("#result").removeClass("rainbow-text");
    $("#gifContainer img").remove();
    $("#result").html(result).hide().fadeIn(1000);
  }
}

resultsにチームメンバーの名前を配置して、Math.random()でランダムに表示させるだけですね😌

後は、DOM要素に結果を渡したり、30%の確率でレインボー表示＆パトランプのgifを追加するだけですね！

とっても簡単でしょう😎

是非朝会で使ってみてください😎
責任は負いませんが。。。

おわりに

いかがでしたでしょうか？
ただおふざけで作っただけですが、案外こういうものは使えるかと思います🥹

これを見て感化された方は、チームのために何かおふざけツールを作成してみてはいかがでしょうか😆

最後までご覧いただきありがとうございました！
以上、センリツでした。🤓

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up