Zenn
📰

GoogleサイトでGSAPを使う

2024/04/08に公開
Google
#
googlesites
#
googleサイト
tech

はじめに

Google サイトで JavaScript のアニメーションライブラリ「GSAP」を使えるようにしたいと思ったので記事にまとめました。
GSAP に限らず Google サイトで JavaScript のライブラリを使う参考になればと思います。

https://gsap.com/

Google サイトとは

Google が提供するサービスの 1 つで、直感的な操作で Web サイトを作成することができるツールです。

コーディング知識がなくても簡単に自分だけのオリジナルサイトを作ることができます。

https://support.google.com/sites/answer/6372878?hl=ja

新しいサイトを作成する

まずは新しくサイトを作成します。
今回は GSAP を動かすことがゴールなので空白のサイトを選びましたが、テンプレートギャラリーから好きなテンプレートを選んで作成しても問題ありません。

コードを埋め込む

右側のメニューから「埋め込む」を選択すると、自由に HTML のコードを追加することができます。
試しに HTML コードを貼り付けて追加してみます。

<html>
  <body>
    <div>Hello</div>
  </body>
</html>

新しい要素が追加されてサイト上に「Hello」と表示されました。

CSS を適用させる

次に CSS を追加した HTML を埋め込んでみます。

<html>
  <head>
    <style type="text/css">
      body {
        background: #000000;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .circle {
        background: #ffffff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </body>
</html>

こうすると黒背景に白丸が表示されました。
こちらも問題なく CSS が適用されています。

GSAP を追加して HTML に適用させる

最後に GSAP を追加します。
GSAP は CDN で HTML のコード上に追加して利用します。

<html>
  <head>
    <style type="text/css">
      body {
        background: #000000;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .circle {
        background: #ffffff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
    <script type="text/javascript">
      // ここに処理を書く
    </script>
  </body>
</html>

詳細なインストール方法は公式サイトをご確認ください。

https://gsap.com/docs/v3/Installation

今回は HTML ページの読み込みが完了した時(DOM ツリーの構築が完了した時)に GSAP を利用したいので、処理を書く script タグに以下を追加します。

document.addEventListener("DOMContentLoaded", function () {
  // ここに処理を書く
});

addEventListener メソッドがないとページ読み込みのトリガーが受け取れず、決まったタイミングで JavaScript を実行できないので注意が必要です。

最後に GSAP の処理を追加して正常に動作することを確認します。

<html>
  <head>
    <style type="text/css">
      body {
        background: #000000;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .circle {
        background: #ffffff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        gsap.fromTo(
          ".circle",
          { y: -30 },
          {
            y: 30,
            ease: "power1.inOut", // 進行具合
            stagger: {
              each: 0.15, // アニメーション間の時間
              repeat: -1, // 無限に繰り返し
              yoyo: true, // アニメーションの反復
            },
          }
        );
      });
    </script>
  </body>
</html>

画像では動きは伝わりませんが、正常に GSAP を Google サイト上で動作することができました。

まとめ

Google サイトは操作が直感的で簡単に Web サイトを作ることができますが、その反面カスタマイズ性に乏しいところがあります。
とりあえず Google サイトで Web サイトを作っては見たものの、少しアニメーションを使ったおしゃれな Web サイトにしたいと思った時に、JavaScript のライブラリを使うと一気に選択肢が広くなります。
これがローコードの正しい使い方なのかもしれません。
※個人の感想です

Discussion