Google Cloud Speech-to-Text APIで音声認識機能を追加する

本記事では、Google Cloud Speech-to-Text APIをGoogle Apps Script (GAS)と組み合わせて、音声認識機能を実装する方法を紹介します。

目次

1. Google Cloud Speech-to-Text APIの概要
2. Speech-to-Textの機能
3. Speech-to-Textの高度な機能
4. Speech-to-Textの利用方法
5. GASとの連携方法
6. GASプロジェクトを作成
7. まとめ

Google Cloud Speech-to-Text APIの概要

Google Cloud Speech-to-Text APIは、音声をテキストに変換するための強力な機械学習サービスです。

このAPIは、多様な言語や方言に対応し、リアルタイムでの音声認識が可能です。

Speech-to-Textの機能

主な特徴は以下の通りです。

• 多言語対応: 100以上の言語と方言をサポート
• リアルタイム認識: ストリーミング音声のリアルタイム処理が可能
• カスタマイズ機能: 特定の単語や語句の認識精度を向上させるモデル適応機能
• 自動フォーマット: 句読点の自動挿入や数字の変換機能

Speech-to-Textの高度な機能

• 話者分離: 複数の話者を識別し、発話者ごとに文字起こしを行う機能
• ノイズ耐性: 様々な環境でのノイズに対応
• ドメイン特化モデル: 音声制御、電話通話、ビデオ転写など、用途に応じた最適化モデルを提供

Speech-to-Textの利用方法

Google Cloud Speech-to-Text APIは、3つの主要な方法で音声認識を実行します。

1. 同期認識

• 1分以内の音声データに適しています
• 音声データを送信し、処理が完了するまで待機します
• 結果はすぐに返されます

2. 非同期認識

• 最大480分の音声データに対応
• 長時間実行操作を開始し、定期的に結果を確認します
• 大量の音声データに適しています

3. ストリーミング認識

• リアルタイムの音声入力に適しています
• マイクからの入力など、ストリーミング音声を処理します

GASとの連携方法

1. Google Cloud Platformでプロジェクトを設定し、Speech-to-Text APIを有効にします
2. サービスアカウントを作成し、認証情報を取得します
3. GASでOAuthライブラリを使用してJWTトークンを生成します
4. APIリクエストを送信するコードを実装します

GASプロジェクトを作成

GASプロジェクトを作成し、以下のようなコードを実装します。

APIキーとフォルダIDを適切な値に置き換えます。

function transcribeAudio() {
  const folderId = 'あなたのフォルダID'; // 音声ファイルがあるフォルダID
  const folder = DriveApp.getFolderById(folderId);
  const files = folder.getFiles();
  
  while (files.hasNext()) {
    const file = files.next();
    if (file.getMimeType().indexOf('audio/') > -1) {
      const audioContent = Utilities.base64Encode(file.getBlob().getBytes());
      const transcript = callSpeechToTextAPI(audioContent);
      
      // 文字起こし結果を新しいドキュメントとして保存
      DocumentApp.create(file.getName() + ' - 文字起こし')
        .getBody()
        .appendParagraph(transcript);
    }
  }
}

function callSpeechToTextAPI(audioContent) {
  const apiKey = 'あなたのAPIキー';
  const url = 'https://speech.googleapis.com/v1/speech:recognize?key=' + apiKey;
  
  const payload = {
    config: {
      encoding: 'LINEAR16',
      sampleRateHertz: 16000,
      languageCode: 'ja-JP'
    },
    audio: {
      content: audioContent
    }
  };
  
  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload)
  };
  
  const response = UrlFetchApp.fetch(url, options);
  const result = JSON.parse(response.getContentText());
  return result.results[0].alternatives[0].transcript;
}

スクリプトを実行すると、指定したフォルダ内の音声ファイルが文字起こしされ、結果が新しいGoogle ドキュメントとして保存されます。

※APIの使用量制限と課金に注意してください。

Google Apps Script＆Google Cloud Speech-to-Text APIで音声認識機能を追加する | eguweb(エグウェブ)

【WordPress】テキストにリンクを設定する方法

WordPressでテキストにリンクを設定する方法です。

目次

1. 基本的な手順

2. 詳細設定

3. リンクの編集・削除

4. ページ内リンク（アンカーリンク）の設定

5. まとめ

基本的な手順

1. リンクを設定したいテキストを選択します。

2. ツールバーにある「リンク」ボタン（チェーンのアイコン）をクリックします。

3. 表示されたボックスにリンク先のURLを入力します。

4. 「適用」ボタンをクリックして設定を完了します。

 

 

詳細設定

• リンクを新しいタブで開きたい場合は、「リンク設定」（歯車アイコン）をクリックし、「リンクを新しいタブで開く」にチェックを入れます。

• リンクのテキスト（アンカーテキスト）を変更したい場合は、「リンク設定」から「リンク文字列」を編集します。

リンクの編集・削除

• 既存のリンクを編集するには、リンクされたテキストをクリックし、表示される編集メニューから「編集」を選択します。

• リンクを削除するには、同じく編集メニューから「リンクの削除」を選択します。

ページ内リンク（アンカーリンク）の設定

1. リンク先となるブロック（見出しなど）を選択し、右側パネルの「高度な設定」からHTMLアンカーにIDを設定します。

2. リンクを設置したい箇所で、「#」に続けて設定したIDを入力します（例：#section1）。

【WordPress】テキストにリンクを設定する方法 | eguweb(エグウェブ)

.prtranscript（ピーアールトランスクリプト）とは？

1. .prtranscriptは文字起こしファイルフォーマット
2. 編集ワークフロー向け設計
3. ファイル互換性
4. エクスポートオプション
5. 他形式との比較
6. まとめ

.prtranscriptは文字起こしファイルフォーマット

.prtranscriptはAdobe Premiere Pro専用の文字起こしファイルフォーマットで、音声認識機能で生成されたテキストデータとタイムコード情報を保持するプロプライエタリ形式です。

主な特徴は以下の通りです。

編集ワークフロー向け設計

• 単語レベルでの詳細なタイムコード情報を保持
• テキストベース編集を可能にし、特定の単語をクリックして該当シーンにジャンプ可能
• 複数話者識別機能と発話間のポーズ表示に対応

ファイル互換性

• Premiere Proプロジェクト間でのみ使用可能
• 外部テキストエディタで直接編集不可（バイナリ形式）
• 共同作業時は.prtranscriptファイルを共有して再インポート可能

エクスポートオプション

• キャプション変換：.prtranscriptからSRT/CSV/TXT形式に変換可能
• 直接書き出し可能な形式：
  • .prtranscript（Premiere再編集用）
  • .txt（汎用テキスト）
  • .csv（表計算ソフト用）

他形式との比較

特徴	.prtranscript	.srt	.txt
タイムコード精度	単語レベル	行レベル	なし
編集機能	テキストベース編集	静的な字幕	生テキスト
ソフト互換性	Premiere専用	汎用字幕	全プラットフォーム

.prtranscript（ピーアールトランスクリプト）とは？ | eguweb(エグウェブ)

【AppSheet】SELECT関数の基本について

SELECT関数とは

SELECT関数は、AppSheetで特定の条件に合致するデータを抽出するための非常に強力な関数です。基本的な構文は以下の通りです。

SELECT(テーブル名[列名], 条件式, [重複の有無])

引数の意味は次のとおりです。

テーブル名[列名]: データを抽出する元のテーブルと列を指定します。

条件式: どのデータを抽出するかを決定する条件を指定します。

重複の有無: オプションの引数で、重複を許可するかどうかを指定します。

SELECT関数の使用例

基本的な使用例:

SELECT(生徒[ファースト ネーム], TRUE, FALSE) 

これは、生徒テーブルからすべての生徒のファーストネームを取得します（重複あり）。

条件付きの使用例:

SELECT(生徒[ファースト ネーム], ([クラス年度] = "2020"), FALSE) 

これは、2020年度クラスの生徒のファーストネームのリストを返します。

動的フィルタリングの例:

SELECT(注文[注文 ID], ([顧客] = [_THISROW].[顧客])) 

これは、現在の行の顧客に対応する注文IDを返します。

SELECT関数の特徴

リスト形式の結果: SELECT関数は、条件に合致する値をリスト（配列）形式で返します。

動的フィルタリング: [_THISROW]を使用することで、現在の行の値に基づいて動的にデータをフィルタリングできます。

重複の制御: 第3引数をTRUEに設定すると、重複する値を除外できます。

例1: 生徒データの抽出

生徒テーブルがあると仮定し、以下のようなデータがあるとします。

ID	名前	クラス	年度
1	田中	A組	2024
2	佐藤	B組	2024
3	鈴木	A組	2023
4	高橋	C組	2024

このデータに対して、2024年度の生徒の名前を抽出する場合。

SELECT(生徒[名前], [年度] = 2024)

結果：{“田中”, “佐藤”, “高橋”}

例2: 注文データの抽出

注文テーブルがあると仮定し、以下のようなデータがあるとします。

注文ID	顧客名	商品	金額
001	山田	りんご	1000
002	鈴木	バナナ	800
003	山田	みかん	1200
004	佐藤	りんご	1000

特定の顧客（例：山田さん）の注文IDを抽出する場合。

SELECT(注文[注文ID], [顧客名] = "山田")

結果：{“001”, “003”}

例3: 商品データの抽出

商品テーブルがあると仮定し、以下のようなデータがあるとします。

商品ID	商品名	カテゴリ	価格
P001	りんご	果物	100
P002	バナナ	果物	80
P003	トマト	野菜	150
P004	キュウリ	野菜	120

100円以上の商品名を重複なしで抽出する場合。

SELECT(商品[商品名], [価格] >= 100, TRUE)

結果：{“りんご”, “トマト”, “キュウリ”}

これらの例を参考に、実際のアプリケーションでSELECT関数を活用することができます。

データの構造や抽出条件に応じて、適切に関数を使用することで、必要なデータを効率的に取得できます。

【AppSheet】SELECT関数の基本について | eguweb(エグウェブ)

【PremierePro】謹賀新年（年始）ごあいさつ動画を作る（ソーシャルメディアサイズ）

あけましておめでとうございます。
本年も宜しくお願いいたします。

チャンネル登録はこちら
https://eguweb.jp/youtube

--
BGM
氷ノ河 written by TOGA
https://dova-s.jp/bgm/play8437.html

【CSS】flexboxレイアウトを使用して要素を右側に配置する方法

目次

1. flexboxを使って要素を右寄せする方法

2. 基本的なHTML構造

3. CSSでflexboxを適用する

4. 結果と解説

5. 追加のスタイリング

6. レスポンシブデザインへの対応

7. まとめ

flexboxを使って要素を右寄せする方法

ウェブデザインにおいて、要素を特定の位置に配置することは重要です。

今回は、flexboxを使って要素を右側に配置する方法を詳しく解説します。

基本的なHTML構造

まず、以下のようなHTML構造を想定しましょう。

<div class="container">
  <select id="sortOrder">
    <option value="desc">最新順</option>
    <option value="asc">古い順</option>
  </select>
</div>

 

CSSでflexboxを適用する

この構造に対して、以下のようなCSSを適用します。

.container {
  display: flex;
  justify-content: flex-end;
}

このCSSの各プロパティの役割は以下の通りです。

• display: flex;: コンテナをflexコンテナにします。

• justify-content: flex-end;: 主軸（横方向）で要素を右端に配置します。

結果と解説

このようにスタイルを適用すると、select要素がコンテナの右側に配置されます。

 

合は要素）が主軸の終端（右側）に寄せられます。

追加のスタイリング

さらに見た目を整えるために、以下のようなスタイルを追加することもできます：

#sortOrder {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
}

これにより、セレクトボックスがより洗練された外観になります。

レスポンシブデザインへの対応

この場合、レスポンシブ対応は比較的簡単です。コンテナの幅を調整するだけで、セレクトボックスの位置が自動的に調整されます。必要に応じて以下のようなメディアクエリを追加することもできます。

@media (max-width: 600px) {
  .container {
    padding: 0 10px;
  }
  
  #sortOrder {
    width: 100%;
  }
}

この設定により、画面幅が600px以下になった場合、セレクトボックスが画面幅いっぱいに広がり、左右に少しパディングが追加されます。

【CSS】flexboxレイアウトを使用して要素を右側に配置する方法 | eguweb(エグウェブ)

【JavaScript】画面のスクロールを止めたら画面の下の方にメニューを表示する

スクロールが停止した時にボタンを表示します。スクロールが停止した時にボタンを表示するだけの簡単なスクリプトを考えます。この場合、スクロールイベントが発生した後に一定時間（例：1000ミリ秒）スクロールが続かなければ、ボタンを表示するようにします。

HTML・CSS例

        .hidden {
            display: none;
        }
        #footerButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

<button id="footerButton" class="hidden">Scroll Button</button>

HTML構造:

• 固定位置に配置されたボタン（footerButton）があります。このボタンは初期状態で隠されています（class="hidden"）。

スタイル定義:

• .hiddenクラスはボタンを隠します（display: none）。

• #footerButtonは固定位置に配置され、スタイルが適用されています。

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var footerButton = document.getElementById('footerButton');
    var scrollTimeout;

    window.addEventListener('scroll', function() {
        // 一旦ボタンを隠す
        footerButton.classList.add('hidden');

        // 前回のタイマーをクリア
        clearTimeout(scrollTimeout);

        // スクロールが止まった時にボタンを表示
        scrollTimeout = setTimeout(function() {
            footerButton.classList.remove('hidden');
            console.log('スクロール停止'); // デバッグ用
        }, 1000); // 1000ミリ秒後に表示
    }, false);
});

• DOMContentLoadedイベントでスクリプトがDOM読み込み後に実行されるようにしています。

• footerButton変数でボタン要素を取得し、scrollTimeout変数でタイマーIDを保存します。

• scrollイベントリスナー内で、ボタンを一旦隠し（footerButton.classList.add(‘hidden’)）、前回のタイマーをクリアします（clearTimeout(scrollTimeout)）。

• 1000ミリ秒後にボタンを表示するタイマーを設定します（scrollTimeout = setTimeout(function() { … }, 1000)）。

addEventListener

addEventListenerメソッドは、指定したイベントがターゲット（例：DOM要素、ドキュメント、ウィンドウ）で発生したときに、指定した関数を呼び出します。ここでは、windowオブジェクトに対してscrollイベントリスナーを追加しています。

window.addEventListener('scroll', function() {
    // イベントが発生した時に実行されるコード
}, false);

• scroll：イベントの種類です。ここではスクロールイベントを指定しています。

• function()：イベントが発生した時に実行されるコールバック関数です。

• false：イベントのバブリングまたはキャプチャリングフェーズを指定します。通常はfalseでバブリングフェーズ（イベントがターゲットから親要素に伝播する）を指定します。

setTimeout

setTimeout関数は、指定した時間（ミリ秒）後に指定した関数を実行します。ここでは、スクロールが停止してから1000ミリ秒後にボタンを表示するために使用しています。

構文:

scrollTimeout = setTimeout(function() {
    footerButton.classList.remove('hidden');
    console.log('スクロール停止'); // デバッグ用
}, 200);

scrollTimeout：setTimeoutの返り値はタイマーIDであり、これをscrollTimeout変数に保存します。後でこのタイマーをクリアするために使用します。

• function() { … }：指定した時間が経過した後に実行される関数です。この関数内でボタンを表示しています。

• 1000：遅延時間をミリ秒単位で指定します。ここでは1000ミリ秒後に関数を実行します。

clearTimeout(scrollTimeout)

clearTimeout関数は、指定されたタイマーIDのタイマーをクリアします。これにより、setTimeoutで設定された関数の実行をキャンセルできます。ここでは、新たにスクロールイベントが発生した時に前回のタイマーをクリアするために使用しています。

clearTimeout(scrollTimeout);

scrollTimeout：クリアしたいタイマーのIDです。setTimeoutの返り値であるタイマーIDを指定します。

scrollTimeout

scrollTimeoutは変数名で、setTimeoutによって返されるタイマーIDを格納するために使用されます。このIDを使って、clearTimeoutでタイマーをキャンセルしたり、他の処理を行います。

変数の使い方

var scrollTimeout;

// スクロールイベントリスナー内
scrollTimeout = setTimeout(function() {
    footerButton.classList.remove('hidden');
}, 200);

// 別の場所でタイマーをクリア
clearTimeout(scrollTimeout);

このように、scrollTimeout変数にタイマーIDを保存しておくことで、後でそのタイマーをクリアできるようにしています。

【JavaScript】画面のスクロールを止めたら画面の下の方にメニューを表示する | eguweb(エグウェブ)

【WordPress】プラグインを使わずにWordPressの親ブロック全体にリンクを設定する方

今回は、プラグインを使わずにWordPressの親ブロック全体にリンクを設定する方法を考えてみます。

目次

1. グループブロックを活用する方法
2. カスタムCSSを使用する方法
3. ボタンブロックを活用する方法
4. まとめ

グループブロックを活用する方法

まず、グループブロックを使用する方法です。

1. 複数のブロックをグループ化します。
2. グループブロックを選択し、カスタムHTMLブロックに変換します。
3. 以下のようなHTMLコードを入力します：

<a href="リンク先URL">
  <!-- ここにグループ化したブロックの内容を貼り付け -->
</a>

この方法では、グループ全体がクリック可能なリンクになります。

ただし、元のブロックの編集がやや難しくなる点に注意が必要です。

カスタムCSSを使用する方法

次に、カスタムCSSを使用する方法です。

1. 親ブロックにカスタムCSSクラスを追加します（例：「linkable-block」）。
2. テーマのカスタムCSS欄に以下のようなコードを追加します：

.linkable-block {
  position: relative;
}

.linkable-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. JavaScriptを使用して、クリックイベントを設定します。

document.querySelectorAll('.linkable-block').forEach(block => {
  block.addEventListener('click', () => {
    window.location.href = 'リンク先URL';
  });
});

別タブで開く場合は、以下のようにwindow.open()メソッドを使用し、第2引数に’_blank’を指定します。

document.querySelectorAll('.linkable-block').forEach(block => {
  block.addEventListener('click', () => {
    window.open('リンク先URL', '_blank');
  });
});

この方法では、ブロックの編集性を保ちながら、全体をクリック可能にできます。

ボタンブロックを活用する方法

最後に、ボタンブロックを巧みに使う方法をご紹介します。

1. 親ブロックの下部にボタンブロックを配置します。
2. ボタンのスタイルを以下のようにカスタマイズします：
   • 幅を100%に設定
   • 高さを親ブロックと同じに設定
   • 背景色を透明に設定
   • ボーダーを削除
   • パディングを0に設定
3. ボタンの位置を絶対位置指定で親ブロックの上に重ねます。

CSSの例：

.parent-block {
  position: relative;
  /* 親ブロックの他のスタイル */
}

.parent-content {
  /* 親ブロックの内容のスタイル */
}

.button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}

.button-overlay:hover {
  /* ホバー時のスタイル（オプション） */
  background-color: rgba(0, 0, 0, 0.1);
}

この方法では、見た目上は親ブロック全体がリンクのように機能しますが、実際にはボタンがクリック可能な領域となります。

【WordPress】プラグインを使わずにWordPressの親ブロック全体にリンクを設定する方法 | eguweb(エグウェブ)

【GAS】Googleスプレッドシートのデータを使ってHTMLメールを送信する方法

Googleスプレッドシートのデータを活用して、HTMLメールを作成し送信する方法をご紹介します。この方法を使えば、スプレッドシートの情報を基に、見栄えの良いメールを簡単に送ることができます。

目次

1. はじめに

2. 準備：スプレッドシートの作成

3. Google Apps Scriptの作成

4. コードの解説

5. スクリプトの実行方法

6. 注意点

7. まとめ

はじめに

Google Apps Scriptを使えば、スプレッドシートのデータを基にHTMLメールを作成し、送信することができます。

今回は、週報などの報告をHTMLメールで送信する例を使って、その方法を詳しく解説していきます。

準備：スプレッドシートの作成

まずは、週報のデータを入力するスプレッドシートを作成しましょう。例えば、以下のような形式でデータを入力します：

A列（件名）B列（名前）C列（今週の成果）D列（来週の目標）週報（9/18-9/22）山田太郎プロジェクトAの完了新規顧客獲得3件

 

Google Apps Scriptの作成

次に、Google Apps Scriptを作成します。

1. スプレッドシートのメニューから「ツール」→「スクリプトエディタ」を選択します。

2. 新しいスクリプトファイルが開きます。ここに以下のようなコードを入力します。

javascriptfunction sendWeeklyReportEmail() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var subject = sheet.getRange("A2").getValue();
  var name = sheet.getRange("B2").getValue();
  var achievements = sheet.getRange("C2").getValue();
  var goals = sheet.getRange("D2").getValue();
  
  var htmlBody = `
    <html>
      <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
        <h1 style="color: #4A86E8;">週間レポート</h1>
        <p>こんにちは、${name}さん</p>
        <h2 style="color: #6AA84F;">今週の成果</h2>
        <p>${achievements}</p>
        <h2 style="color: #E69138;">来週の目標</h2>
        <p>${goals}</p>
        <p>今週もお疲れ様でした。来週も頑張りましょう！</p>
      </body>
    </html>
  `;
  
  MailApp.sendEmail({
    to: "boss@example.com",
    subject: subject,
    htmlBody: htmlBody
  });
}

このスクリプトは以下のような流れで動作します。

1. アクティブなシートを取得します。

2. A2、B2、C2、D2セルからそれぞれ件名、名前、今週の成果、来週の目標を取得します。

3. 取得したデータを使って、HTMLメールの本文を作成します。

4. MailApp.sendEmail() メソッドを使って、作成したHTMLメールを送信します。

HTMLメールの本文では、見やすさを考慮して以下のような工夫をしています。

• <h1>、<h2> タグを使って、見出しを設定しています。

• インラインCSSを使って、フォントやカラーを指定しています。

• テンプレートリテラル（バッククォートで囲まれた部分）を使用して、動的にデータを挿入しています。

スクリプトの実行方法

スクリプトを実行するには、以下の手順を踏んでください。

1. スクリプトエディタの「実行」ボタンをクリックします。

2. 初回実行時は、認証を求められます。画面の指示に従って、必要な権限を許可してください。

3. 実行が完了すると、指定したメールアドレス（この例では “boss@example.com”）にHTMLメールが送信されます。

 

 

メールが送信されました。

【GAS】Googleスプレッドシートのデータを使ってHTMLメールを送信する方法 | eguweb(エグウェブ)

【WordPress】要素がふわっと現れるアニメーションの作り方

今回は、ウェブページにスクロールトリガーのアニメーション効果を追加する方法について、詳しく解説します。特に、ページをスクロールすると要素が下から滑らかに現れる効果の実装方法を、説明していきます。

目次

1. CSSでアニメーションの基礎を設定

2. JavaScriptでスクロールトリガーを実装

3. 実装の結果

4. まとめ

CSSでアニメーションの基礎を設定

まず、CSSを使ってアニメーションの基本的な動作を定義します。

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

このCSSの各プロパティについて詳しく見ていきましょう。

1. .fade-up クラス：

   • opacity: 0;: 要素の不透明度を0に設定し、完全に透明にします。

   • transform: translateY(20px);: 要素をY軸方向（縦方向）に20ピクセル下に移動させます。

   • transition: opacity 0.5s ease, transform 0.5s ease;: opacityとtransformプロパティの変化を0.5秒かけて行い、イージング関数としてeaseを使用します。これにより、滑らかな変化が実現されます。

2. .fade-up.is-visible クラス：

   • opacity: 1;: 要素の不透明度を1に設定し、完全に不透明にします。

   • transform: translateY(0);: 要素を元の位置（Y軸方向に0ピクセル）に戻します。

この設定により、.fade-up クラスを持つ要素は初期状態で透明かつ少し下にずれた位置にあり、.is-visible クラスが追加されると不透明になって元の位置に移動します。

JavaScriptでスクロールトリガーを実装

次に、JavaScriptを使用してスクロールイベントを検知し、要素が画面内に入ったタイミングでアニメーションを開始させます。

const fadeUpElements = document.querySelectorAll('.fade-up');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
});

fadeUpElements.forEach(element => {
  observer.observe(element);
});

このJavaScriptコードの各部分を詳細に解説します：

1. const fadeUpElements = document.querySelectorAll('.fade-up');

   • document.querySelectorAll() メソッドを使用して、ページ内の全ての .fade-up クラスを持つ要素を選択し、fadeUpElements 定数に格納します。

2. const observer = new IntersectionObserver((entries) => { ... });

   • IntersectionObserver APIを使用して新しいオブザーバーを作成します。このAPIは、指定された要素が画面内に入ったかどうかを監視します。

3. entries.forEach(entry => { ... });

   • オブザーバーが監視している全ての要素（entries）に対して処理を実行します。

4. if (entry.isIntersecting) { ... }

   • isIntersecting プロパティをチェックし、要素が画面内に入ったかどうかを判定します。

5. entry.target.classList.add('is-visible');

   • 要素が画面内に入った場合、その要素（entry.target）に is-visible クラスを追加します。これにより、CSSで定義したアニメーションが開始されます。

6. fadeUpElements.forEach(element => { observer.observe(element); });

   • 全ての .fade-up 要素に対してオブザーバーを設定します。これにより、各要素が個別に監視され、画面内に入ったタイミングでアニメーションが開始されます。

実装の結果

この実装により、以下のような動作が実現されます。

1. 初期状態では、.fade-up クラスを持つ要素は不透明度0で、通常の位置より20ピクセル下に配置されています。

2. ユーザーがページをスクロールし、該当要素が画面内に入ると、IntersectionObserverがそれを検知します。

3. 検知されると即座に .is-visible クラスが追加されます。

4. CSSのtransitionプロパティにより、0.5秒かけて要素が徐々に不透明になり、同時に上方向に20ピクセル移動します。

この手法を使用することで、ページスクロールに連動した滑らかな要素の出現エフェクトを実現できます。

【WordPress】要素がふわっと現れるアニメーションの作り方 | eguweb(エグウェブ)