常連

回答者

情報収集家

自己紹介

### 実現したいこと
データベースにpostgresqlを使い、ORMにprismaを使っています。
データベースのtimezoneはUTCに設定しています。

prismaを使ったデータ保存、取得処理はバックエンド側のプログラムで行います。フロントエンドとバックエンドの連携はAPIを介して行います。フロントエンド側のtimezoneはjstです。
この状態で、DATE型の良い扱い方法がわかりません。

### 発生している問題・分からないこと
たとえば、registration_dateというDATE型のカラムをprismaのスキーマで定義します。

フロントエンドから渡ってくる値が、「2024-03-31」である場合、dbにそのままの形式で保存しようとするとエラーになるため、下記のように一旦、JSTをUTCに変換したDateオブジェクトを作成して値を保存しています。しかし、実際にDBに保存されたデータを見たところ「YYYY-MM-DD」形式で保存されおり、前日の日付が保存されていました。

一方、同カラムをprismaから取得すると2024-03-30T00:00:00.000Z　といった形でYYYY-MM-DD形式ではなく、日付の後ろに自動で「T00:00:00.000Z」という日時データが付与されて取得されます。こちらもDBに保存された通り、前日の日付で取得されます。

フロントから送られてくる値はjstなので、prismaで保存する値もjstをutcに変換した日時で保存する必要があると思いますが、date型で定義すると日時はカットされて保存されているようです。この状態ですと、utcをjstに変換することができません。date型を使って、こうした齟齬が起きないようにするために何か良い方法はありますでしょうか。よく使われている手法などもあれば教えていただきたいです。よろしくお願いいたします。



### 該当のソースコード

```
// prismaの定義部分  
registrationDate    DateTime @map("registration_date") @db.Date
```

```
// 保存時
const registrationDate = new Date(input.registration_date + "T00:00:00+09:00");
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
わかりやすい方法が見つけられませんでした。

### 補足
特になし

prisma+postgresql でのDATE型の扱いについて

### アプリの概要

指定された時間（過去でも未来でも）から選択されたメディアの再生を開始するアプリです。


### 発生している問題

- ★「サーバー時刻: 取得中...」から変わらない問題
- 再生開始時刻入力フォームに最初に入力される内容がJSTにならない問題

### 該当のソースコード

[CodePen：「サーバー時刻: 取得中...」から変わらない問題が発生しているコード](https://codepen.io/pknthmju-the-bashful/pen/mydzzqQ)
[CodePen：他の問題の修正前だがサーバー時刻を表示できるコード](https://codepen.io/pknthmju-the-bashful/pen/mydzzXa)
```PHP
<?php
header("Content-Type: application/json");
echo json_encode(time());
?>
```

これらの問題を解決したいのですが、うまくいきませんでした。どうすればよいでしょうか。
よろしくお願いいたします。

JavaScriptで指定した時間からメディアの再生を開始するアプリ

### 実現したいこと
ブックマーク一覧が一つだけ表示されるようにしたい。

### 発生している問題・分からないこと
Firebase Firestoreに保存されているブックマーク済みの投稿データを取得し、そのデータをまとめて表示するために書いたコードです。以下の画像参照していただければ分かる通り、同じ内容のブックマーク一覧が何回も繰り返し表示されるようになってしまいました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-30/2162239b-419a-4344-9ee5-46fda37b5d65.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-30/c5e36855-62ce-47cc-bf1f-26451253f0e8.png)



### 該当のソースコード

```
"use client";
import { auth } from "@/firebase/firebase";
import { db } from "@/firebase/firebase";
import { collection, query, where, getDocs } from "firebase/firestore";
import { useState, useEffect } from "react";
import MusicCard from "@/components/MusicCard";

export default function BookmarksPage() {
  const [bookmarks, setBookmarks] = useState([]);
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    // ユーザーの認証状態の変更を監視
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        console.log("ユーザーがログインしています", user.uid);
        setUserId(user.uid);  // ユーザーがログインしたらユーザーIDを保存
      } else {
        console.log("ユーザーがログアウトしています");
        setUserId(null);  // ログアウトしたらユーザーIDをnullに
      }
    });

    // クリーンアップ
    return () => unsubscribe();
  }, []);  // 初回のみ実行

  useEffect(() => {
    // ユーザーIDがセットされたときにブックマークを取得
    if (userId) {
      const fetchBookmarks = async () => {
        try {
          const bookmarksQuery = query(
            collection(db, "bookmarks"),
            where("userId", "==", userId)
          );
          const bookmarkSnapshot = await getDocs(bookmarksQuery);
          const fetchedBookmarks = bookmarkSnapshot.docs.map(doc => ({
            ...doc.data(),
            id: doc.id
          }));

          console.log("取得したブックマーク:", fetchedBookmarks);
          setBookmarks(fetchedBookmarks);  // 取得したブックマークをステートにセット
        } catch (error) {
          console.error("ブックマークの取得に失敗しました:", error);
        }
      };

      fetchBookmarks();
    }
  }, [userId]);  // userIdが変わるたびに実行

  return (
    <div
      className=" flex flex-col  items-center justify-center min-h-screen bg-cover bg-center"
      style={{ backgroundImage: 'url("/images/white_00115.jpg")' }} // 背景画像を設定
    >
      {bookmarks.length > 0 ? (
        bookmarks.map((bookmark) => (
          <MusicCard key={bookmark.id} music={bookmark} />
        ))
      ) : (
        <p className="text-4xl font-bold items-center justify-center mb-35 text-black">
          ブックマークされた投稿が表示されるまでしばらくお待ちください……
        </p>
      )}
    </div>
  );
}

```
```
import { useState, useEffect } from "react";
import { db } from "@/firebase/firebase";
import { collection, query, orderBy, onSnapshot } from "firebase/firestore";
import { useRouter } from "next/navigation";
import { doc, deleteDoc } from "firebase/firestore";


export default function BookmarksPage() {
  const [bookmarkedPosts, setBookmarkedPosts] = useState([]);
  const router = useRouter();

  useEffect(() => {
    const q = query(collection(db, "bookmarks"), orderBy("createdAt", "desc"));
    const unsubscribe = onSnapshot(q, (snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === "added") {
          setBookmarkedPosts((prev) => [...prev, { ...change.doc.data(), id: change.doc.id }]);
        }
        if (change.type === "modified") {
          setBookmarkedPosts((prev) =>
            prev.map((post) =>
              post.id === change.doc.id ? { ...change.doc.data(), id: change.doc.id } : post
            )
          );
        }
        if (change.type === "removed") {
          setBookmarkedPosts((prev) => prev.filter((post) => post.id !== change.doc.id));
        }
      });
    });

    return () => unsubscribe();
  }, []);

  const handleDeleteBookmark = async (bookmarkId) => {
    try {
      const bookmarkDocRef = doc(db, "bookmarks", bookmarkId);
      await deleteDoc(bookmarkDocRef);
      alert("ブックマークを削除しました！");
    } catch (error) {
      console.error("削除エラー:", error.message);
    }
  };

  return (
    <div className="p-4 space-y-4 min-h-screen">
      <h2 className="text-3xl font-bold text-black"> ブックマーク一覧</h2>
      <div className="space-y-3">
        {bookmarkedPosts.map((post) => (
          <div key={post.id} className="flex flex-col w-370 border p-4 rounded-md bg-white">
            <h4>{post.title}</h4>
            <p>{post.comment}</p>
            <p>{post.artist?.name || "アーティスト未選択"}</p>
            {post.artist?.imageUrl && (
              <img
                src={post.artist.imageUrl}
                alt={post.artist.name}
                className="w-20 h-20 rounded-full mt-2"
              />
            )}
            <a href={post.url} target="_blank" rel="noopener noreferrer" className="text-blue-500">
              {post.url}
            </a>
            <div className="mt-2">
              <button
                onClick={() => handleDeleteBookmark(post.id)}
                className="ml-340 w-20 bg-red-500 text-white px-4 py-2 rounded"
              >
                Delete
              </button>
            </div>
          </div>
        ))}
      </div>
      <button
        onClick={() => router.push("/")}
        className="ml-170 bg-blue-500 hover:bg-blue-800 text-white px-4 py-2 rounded mt-4"
      >
        ホームに戻る
      </button>
    </div>
  );
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
1Firebase onSnapShotがレンダリングの際に多重登録されてるか
2Keyが一意であるか
3useEffectの依存配列を確認
4再レンダリング時に再実行されるないかを確認するためにuseEffectの依存配列が [] になっているか確認(useEffectの中にconsole.logを仕込んで、コンソール上でいつ発火しているかを確認)
など様々な可能性を考えて修正してみましたが一向に解決しませんでした。


### 補足
ブックマークをすればするほど、同じデータを持ったブックマーク一覧の個数が増えていきます。
画像では３つブックマークしたので、ブックマーク一覧は３つ。４つブックマークしたら、一覧は4つ……と増えていきます。



Firebaseから得た入力が重複して表示されてしまう。/不足しているコードがあれば教えてください！

### 実現したいこと
1回だけ通知されるようにしたい

### 発生している問題・分からないこと
3回通知されてしまう。他にはエラーなし

### エラーメッセージ
```error
エラーメッセージはありません
```

### 該当のソースコード

```GAS
// ***** 初稿依頼通知用スクリプト (シンプル版) *****
// 許可するシート名（必要に応じて変更）
var ALLOWED_SHEETS = ["XXXX配信レジュメ作成シート", "A"];
// 固定メンション（Bさん）のSlack ID（初稿依頼・納入用）
var fixedB1 = 'U082D52RQHF';  // 例：固定Bさん1
var fixedB2 = 'U07SEUFCM7G';  // 例：固定Bさん2

// ヘルパー関数：「学生名前登録用シート」から学生名に対応するSlack IDを取得
function getStudentSlackId1(studentName) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var regSheet = ss.getSheetByName('学生名前登録用シート');
  if (!regSheet) return '';
  var data = regSheet.getDataRange().getValues();
  for (var i = 0; i < data.length; i++) {
    if (data[i][0] === studentName) { // 学生名前登録用シートのA列
      return data[i][1];             // 学生名前登録用シートのB列
    }
  }
  return '';
}

/**
 * onEdit trigger（初稿依頼用：シンプル版）
 * ・K列（11列目）がTRUEに変更された場合、その行の情報を元に通知を送信する
 */
function onEdit6(e) {
  // 複数セル同時編集の場合は無視
  if (e.range.getNumRows() * e.range.getNumColumns() > 1) return;
  // 編集がK列でなければ無視
  if (e.range.getColumn() != 11) return;
  // 入力値がTRUEでなければ無視
  if (e.value !== true && e.value !== "TRUE") return;
  
  var sheet = e.range.getSheet();
  if (ALLOWED_SHEETS.indexOf(sheet.getName()) === -1) return;
  
  var row = e.range.getRow();
  
  // （必要なら）既に通知済みかチェックする例：
//  if (sheet.getRange(row, 12).getValue() !== "") return;
  
  // 各必要なセルの値を取得
  var companyName = sheet.getRange(row, 2).getValue(); // 2列目：会社名
  var studentName = sheet.getRange(row, 10).getValue(); // 10列目：学生名
  var studentSlackId = getStudentSlackId1(studentName);
  var dueDate = sheet.getRange(row, 9).getValue();       // 9列目：期日
  var dateStr = Utilities.formatDate(new Date(dueDate), Session.getScriptTimeZone(), 'yyyy/MM/dd');
  var docType = sheet.getRange(row, 16).getValue();       // 16列目：資料型
  
  // 通知メッセージの作成
  var message = '【初稿依頼】\n' +
                '<@' + fixedB1 + '>, <@' + fixedB2 + '> より、\n' +
                '<@' + studentSlackId + '> さんへ初稿依頼がありました。\n' +
                companyName + 'の資料を依頼します。\n' +
                '期日: ' + dateStr + '\n' +
                '資料型: ' + docType;
  
  var webhookUrl = 'https://hooks.slack.com/services/XXXXXXX// 適宜変更してください
  var options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify({ text: message })
  };
  
  try {
    UrlFetchApp.fetch(webhookUrl, options);
    // 結果の記録（任意）
    sheet.getRange(row, 12).setValue('通知送信完了');
  } catch (error) {
    sheet.getRange(row, 12).setValue('通知送信エラー: ' + error.message);
    Logger.log('初稿依頼Webhook送信エラー: ' + error.message);
  }
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
変化が見受けられない

### 補足
特になし

gasを用いたslack連携。slackに通知が3回送信されてしまう。

### 実現したいこと
GASで4桁の変数を時刻として扱って、何時間前は何時かを計算してそれを再び4桁の数字として出力したいです。
例えば23時15分の2時間半前なら
2315→23:15→20:45→2045
別にここ過程を経なくても
2315→2045
になってくれればよいです。

### 発生している問題・分からないこと
具体的には、4桁の変数を時刻として扱う(2315→23:15)の部分をどうやるのかがわからず、その先に行けません。
よろしくお願いします。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
現在の日時などを取得する関数などは検索して出てきましたが、
目的となるようなものは見つかりませんでした。


### 補足
特になし

４桁の数字の変数を時刻として扱いたい。

### 実現したいこと
エフェクト画像表示を意図した挙動にしたい

### 発生している問題・分からないこと
サイトを表示して一番最初に Hello World!! と映した後、円が広がっていって次の画像を表示するエフェクトにしたいのですが、このエフェクト部分の画像がおかしな挙動をしてしまっています。2枚の画像であればふつうに動くのですが、3枚目以降を追加するとその画像から次の画像を表示する時にエフェクトが発動するとそのエフェクト部分が違う画像になってしまいます。

**２枚（青い画像、赤い画像）の場合**
青い画像　→　エフェクト(青い画像から赤い画像へ)　→　赤い画像　→　エフェクト(赤い画像から青い画像へ)　→　青い画像　→　以下ループ・・・

と正常に動作するのですが、

**３枚（青い画像、赤い画像、緑の画像）の場合**
青い画像　→　エフェクト(なぜが緑の画像から赤い画像へ)　→　赤い画像　→　エフェクト(なぜが青い画像から緑の画像へ)　→　緑の画像　→　エフェクト(なぜか赤い画像から青い画像へ)　→　以下ループ・・・

となってしまっています。chatGPTや自分なりに調べてみたのですがわかりませんでした。何が原因なのでしょうか。よろしくお願いします。



### 該当のソースコード

```RippleImageSlider.tsx
"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Image from "next/image";

const images = [
  "/dummy-blue.png",
  "/dummy-red.png",
  "/dummy-green.png"
];

export default function RippleImageSlider({ width, height }: { width: number; height: number }) {
  const [index, setIndex] = useState(0);
  const [showText, setShowText] = useState(true); // Hello World!! を表示するか
  const [showSlider, setShowSlider] = useState(false); // スライダーを表示するか

  useEffect(() => {
    // 3秒後にHello World!! をフェードアウト開始
    const timer = setTimeout(() => {
      setShowText(false);
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (!showSlider) return;

    const interval = setInterval(() => {
      setIndex((prev) => (prev + 1) % images.length);
    }, 3000);
    
    return () => clearInterval(interval);
  }, [showSlider]);
  const nextImage = images[(index + 1) % images.length]

  return (
    <div className="relative flex items-center justify-center" style={{ width, height }}>
      {/* Hello World!! のフェードアウトエフェクト */}
      {showText && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 1, delay: 0.5 }}
          className="absolute text-9xl font-bold"
          onAnimationComplete={() => setShowSlider(true)}
        >
          <div className="text-[#1A1A1A]">Hello World!!</div>
          {/* <div className="text-blue-600">Hello World!!</div> */}
        </motion.div>
      )}

      {/* 波紋画像スライダー */}
      {showSlider && (
        <div className="relative overflow-hidden rounded-xl" style={{ width, height }}>
          {/* 背景画像（次の画像） */}
          <Image src={nextImage} alt="next" fill className="object-cover" />

          {/* 波紋アニメーション付きの現在の画像 */}
          <motion.div
            key={index}
            className="absolute inset-0"
            initial={{ clipPath: "circle(0% at 50% 50%)" }}
            animate={{ clipPath: "circle(150% at 50% 50%)" }}
            transition={{ duration: 1.5, ease: "easeOut" }}
          >
            <Image src={images[index]} alt="current" fill className="object-cover" priority />
          </motion.div>
        </div>
      )}
    </div>
  );
}
```

```page.tsx
import RippleImageSlider from "@/components/RippleImageSlider";

export default function Home() {
  return (
    <div className=" items-center justify-center">
      <div>
        <RippleImageSlider width={1403} height={500} />
      </div>
    </div>
  );
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
検索やAIに聞いたりしたのですが、自分の欲しい情報がなかったり返答がこなかったりしたのでここで質問させていただきました。よろしくお願いします。

### 補足
特になし

画像スライド表示のエフェクト部分が意図しない挙動になってしまう

### 実現したいこと
お世話になります。
GASでメール送信をしようとして、権限エラーが出てしまい、解決方法を思案しております。

スプレッドシートからは、メール送信が問題なくできました。
今回、上手くいかないのは、html上でメール送信をすると権限エラーとなっています。

解決策をご教授いただけましたら、助かります。
よろしくお願いします。



### 発生している問題・分からないこと
ボタンを押して、メール送信を実行すると、エラー画面になります。

### エラーメッセージ
```error
エラー文章
Exception: Session.getEffectiveUser を呼び出す権限がありません。必要な権限: https://www.googleapis.com/auth/userinfo.email（行 446、ファイル「コード」）


```

### 該当のソースコード

```
コード
 const options = {
    'name': '発注システム',
    'bcc': Session.getEffectiveUser().getEmail(),//ここでエラー
    'htmlBody': htmlBody,
  };

GmailApp.sendEmail(e.parameter.email, subject, 'plain body', options);

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
スプレッドシートからは、メール送信が問題なくできました。
今回、上手くいかないのは、html上でメール送信をすると権限エラーとなっています。

### 補足
特になし

GASでメール送信をしようとして権限エラーが出てしまい、どのように解決すればよろしいでしょうか。

### 聞きたいこと
JavaScript で接頭辞に `_` をつけて区別するという手法があると聞きました。

クラスではない関数群のファイル a.js について、他の b.js などから `import` しない関数 (a.js 内のプライベート関数) を区別するのだそうです。

みなさんはこれを実践していらっしゃいますか？

例
```JavaScript
const aFunction1 = () => {
    _aFunction2();
    console.log('aFunction1');
};

const _aFunction2= () => { // 👈 プライベート関数を接頭辞で区別
    console.log('_aFunction2');
};

export {
    aFunction1
}
```

### 背景
ChatGPTに聞いたらこういうコードを書いてくれて、便利だと思ったのですが、実際の現場でどうなのかと気になり質問させて頂きました。

ご意見よろしくお願い致します。

JavaScript のモジュールファイルで、関数名に接頭辞 `_` をつけるかどうか

### 実現したいこと
slick.jsを使用したメインビジュアル（スライドショー）で、画面幅768px〜1100pxの間でも画像が横幅いっぱいに広がるようにしたいです。

どの画面幅でも画像の横に余白が出ないように表示させたいです。

### 発生している問題・分からないこと
現在、画像スライダーの実装にはslick.jsを使っていますが、なぜか768px〜1100pxの間だけ、画像が左に寄って表示され、左右に余白が発生します。

それ以外のサイズ（スマホやPC大画面）では、意図通り画像が横幅いっぱいに表示されます。

画像には <img> タグを使っていて、CSSでも width: 100% を指定していますが、うまくいきません。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-26/3db85b61-e03a-4679-888d-533d3e6a20a0.png)



### 該当のソースコード

```HTML
<section class="cover">
        <div class="cover__carousel">
          <div><img src="images/higashi_ikebukuro.jpeg" alt="東池袋の夜景"></div>
          <div><img src="images/kouzu_kaigan.jpeg" alt="国府津海岸"></div>
          <div><img src="images/mabori_kaigan.jpeg" alt="馬堀海岸"></div>
          <div><img src="images/shiga_kougen.jpeg" alt="志賀高原"></div>
          <div><img src="images/tokyo_skytree.jpeg" alt="スカイツリー展望台"></div>
        </div>
        <div class="cover__catch">熱意を胸に、<br class="text--break">仕事に挑む。</div>
      </section>
```

```CSS
.cover {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding-top: 3.75rem;
  color: #fff;
  overflow: hidden;
}

.cover__carousel {
  display: flex;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.cover__carousel > div {
  width: 100vw;
  flex-shrink: 0;
}

.cover__carousel img {
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
}

.cover__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: drop-shadow(1px 1px 1px #333);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
```

```JavaScript
$(document).ready(function(){
	$('.cover__carousel').slick({
		autoplay: true,
		autoplaySpeed: 5000,
		arrows: false,
		dots: true,
		fade: true
	});
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
以下のような対策を試しましたが、いずれも768px〜1100pxの範囲だけは改善されませんでした。

.cover__carousel img { width: 100%; } → 効果なし。中央寄せのまま。
.cover__carousel img { max-width: 100%; } → 変化なし。
object-fit: cover; → トリミングされるだけで横幅は変わらない。
.cover .slick-slide { width: 100% !important; } → レイアウト崩れが発生。
インラインスタイルで width: 782px が強制的に付与されており、CSSでの上書きがうまく効かない。
slickの fade: true を false に変えてみても、幅には影響が出ず。

### 補足
使用している画像はすべて .jpg で、横長サイズです。

.cover__carousel に height: auto; なども試しましたが、特に変化はありませんでした。

開発者ツールで見ると、.slick-slide に width: 782px; などの 固定された幅がインラインで追加されていて、これが原因のようにも思えます。

しかし、CSSで .slick-slide の width を上書きしても反映されない、または逆に画像が非表示になったりします。

CSS,JavaScript  768px〜1100pxの間だけslickのスライド画像が横幅いっぱいに表示されない

このプラットフォームでは、技術者による素晴らしい個人ブログや投稿をよく見かけます。個人的な記録も作成したいのですが、デバイスが手元にないときにローカル記録を表示するのは不便です。
誰もが、ブログを構築するためにどのプラットフォームを使用するか、またはどのツールを使用するかを記録します 。

例えば：[Cloudflare Paegs](https://pages.cloudflare.com/)/[EdgeOne Pages](https://edgeone.ai/pages/templates/wordpress-hexo-template)/[Ameba Blog](https://ameblo.jp/)/[WordPress](https://wordpress.org/)/[Tumblr](https://www.tumblr.com/communities/browse/aesthetic)





皆さんは自分の技術や生活をどのように記録しているのか知りたいです？

### 知りたいこと

JavaScript の `history.pushState()` でURL バーを更新するタイミングとして一般的な実装を知りたいです。

➀ HTML より後に更新
1. <a> クリック
2. HTML が次の URL のコンテンツに切り替わる
3. `history.pushState` で URL バーを更新

➁ HTML より先に更新
1. <a> クリック
2. `history.pushState` で URL バーを更新
3. HTML が次の URL のコンテンツに切り替わる

### コード例

##### ➀ HTML より後に更新
```JavaScript
document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault(); // デフォルトのページ遷移を防ぐ

    const url = this.href; // クリックされたリンクのURLを取得

    // コンテンツを非同期で取得
    fetch(url)
        .then(response => response.text())
        .then(html => {
            document.getElementById('content').innerHTML = html; // コンテンツ更新
            history.pushState(null, '', url); // URLを更新
        })
        .catch(error => console.error('Error:', error));
});
```

##### ➁ HTML より先に更新
```JavaScript
document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault(); // デフォルトのページ遷移を防ぐ

    const url = this.href; // クリックされたリンクのURLを取得
    history.pushState(null, '', url); // 先にURLを更新

    // コンテンツを非同期で取得
    fetch(url)
        .then(response => response.text())
        .then(html => {
            document.getElementById('content').innerHTML = html; // コンテンツ更新
        })
        .catch(error => console.error('Error:', error));
});
```

#### 悩みのポイント
今 ➁ の方針で開発していたのですが、あれ？そんな UX あるっけ？一般的にはどうするんだろう？と不安に思い質問させて頂きました。

もし  ➀ のようにすると関数の引数で遷移先のURLを渡し続けねばならず、やや不安を覚えます。
一方で ➁ のように先に URL バーが変わってくれれば、常に URL バーを参照すればいいので一貫性が保証されて便利だと思っていたのですが、UX としてはおかしいでしょうか？

もし「こういうケースではこちらを採用する」といったご意見もあればぜひ伺わせてください。
よろしくお願い致します。

history.pushState() での更新は、HTML の更新よりも、後か先か

### 実現したいこと
スクロールしたら画像がフェードインするようにしたいです。

### 発生している問題・分からないこと
他サイトでのコードを参考に、色々としてみたのですが、script部分ののスクロールしたら表示するコードが何故か効きません。



### 該当のソースコード

```html、css、JavaScript
<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex,nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css">
    <script src="https://kit.fontawesome.com/78355c9515.js" crossorigin="anonymous"></script>

    <style media="screen">
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
/*------------------------*/
/*------------------------*/
/*------- layout -------*/
.box {
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  padding: 10vw;
  list-style: none;
}
li {
  margin-bottom: 400px;
  }
li img {
    max-width: 100%;
  }

/*------- base -------*/
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック", "YuGothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif;
  font-size: 16px;
  color: #333;
  padding-bottom: 200px;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
  margin:0;
  font-weight: normal;
}
p {
  margin: 30vw auto 40vw;
  color: #555;
  font-family: 'Marcellus', serif;
  font-size: 2.0rem;
  text-align: center;
}
p::after {
    content: '\f063';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 1.2rem;
    padding-top: 10px;
  }

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
    </style>
</head>

<body>

<p>SCROLL DOWN</p>
<ul class="box">
  <li class="scroll_up"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
  <li class="scroll_left"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
  <li class="scroll_right"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
</ul>


    <script>
//scroll_effect
$(window).scroll(function () {
  var scrollAnimationElm = document.querySelectorAll('.scroll_up , .scroll_left , .scroll_right');
  var scrollAnimationFunc = function () {
    for (var i = 0; i < scrollAnimationElm.length; i++) {
      var triggerMargin = 150;
      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
        scrollAnimationElm[i].classList.add('on');
      }
    }
  }
  window.addEventListener('load', scrollAnimationFunc);
  window.addEventListener('scroll', scrollAnimationFunc);
});
    </script>


</body>

</html>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
どういった理由で効いていないのでしょうか？

### 補足
特になし

scriptのスクロール処理が効かない

### 実現したいこと
登録画面のフォームに値を入力し、非同期通信でデータを登録する。
最近springの勉強を始めたので初歩的な質問で申し訳ありませんが、ご教授いただければ幸いです。
情報が少なければ追記しますのでよろしくお願いします。

### 発生している問題・分からないこと
formの内容が取得できない



### 該当のソースコード

```Java
@Controller
@RequestMapping("/data")
public class AccountRegistController {

    @GetMapping(path = "/regist")
    public String registBtn(@ModelAttribute final RegistForm RegistForm, Model model) {
        registData(accountRegistForm); //ここでRegistFormの値を取得したい
    }

}
```

```HTML
<form th:object="${RegistForm}" th:method="post">
<table class="list2" width="500px" align="left">
  <tr align="left">
    <td th:text="${labelAccountName}">アカウント名</td>
    <td>
      <input class="text" type="text" th:field="*{accountName}"  />
    </td>
  </tr>
    <td width="95%" style="text-align:right">
      <input type="button" class="button" onclick="Regist();"th:value="登録"/>
    </td>
</table>
</form>
```

```JavaScript
function Regist() {
    $.ajax({
        url: '/data/regist',
        method: 'GET',
        success: function(response) {
	        let content = $(response);
	        
            // エラーメッセージを更新
            $("#errrMessages").html(content.filter("#errrMessages").html());

        }
    })
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
submitするパターンはいくつかあったのですがajaxを用いた非同期でのやり方があまりなかったので質問させていただきます

### 補足
特になし

[Spring MyBatis thymeleaf]Ajaxを使った非同期処理でform内容を取得する方法

### 実現したいこと
タイトルにも記載させていただきましたが、Google Script と HTML のコードを連動させて Web アプリを開いているユーザーのアイドリング状態をスプレッドシートに記録するものを作成したいと考えています。

記録したい内容は Web アプリを開いたときの記録、閉じたときの記録、そして 10秒以上アドリング状態が続いたときの記録を考えています（テスト段階のため 10秒で設定）

- A列- にユーザー：Webアプリを開いたり、アイドル状態にはいっているユーザーの Google メールアドレスを取得
- B列に記録タイプ：Webアプリ: Open / Web アプリ: Close / アイドル状態の記録
- C列：確認時刻
- D列：継続時間（アイドル状態の記録のみ記録）

複数のユーザーがPCでの作業を放置しアイドル状態にしていないか、またWebアプリしっかりと開いていか（勝手に閉じていないか）を記録するための Web アプリを Google のサービスを使用して作成したいです。

Chat GPT にも相談していますが、このエラーだけ解決することができず、社内にも Scriptやhtmlに詳しい人間がおらず相談することができない状態です。

このような形で頼らせていただき申し訳ないのですが、どうかお力添えをいただけたらと思います。
何卒、よろしくお願い申し上げます。




### 発生している問題・分からないこと
現在抱えている問題は下記 2つになります！（一番の問題は❶）

❶ アイドル状態の記録が正しく行われない
↳ 10秒間キーボードとマウスを使用しないことで時間のカウントはされるようになったのですが、次にキーボードやマウスを操作してもカウントが終了されず継続されてしまうためスプレッドシートに記録が行われません。（Web アプリのページにリロードをかけると、なぜかそこまででカウントが終了されスプレッドシートに記録される用になってしまっています）
↳ これではアイドル状態が従来よりも長くカウントされてしまい正確ではないです。

❷ Web アプリを閉じたときにも記録をしてもらうよう設定していますが、ここが少し不安定でリロードの場合は必ず記録されるのですが、最後の Webアプリを閉じる場合、たまに記録されないことがあるようです。

### エラーメッセージ
```error
起動自体はできているのでエラーメッセージはありません。
```

### 該当のソースコード

```アイドル状態記録.gas
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

function logEvent(type, start, end) {
  try {
    var sheet = SpreadsheetApp.openById("1rp_-z_pOz1t43QziQiOhXhhlKMNldIQva71yBJfTgVM").getSheetByName("ログ");
    var user = Session.getActiveUser().getEmail();
    
    if (type === "アイドル状態検知") {
      let startTime = new Date(start);
      let endTime = new Date(end);
      let elapsedTime = Math.floor((endTime - startTime) / 1000); // 秒単位の経過時間
      
      let formattedElapsed = `${Math.floor(elapsedTime / 60)}分 ${elapsedTime % 60}秒`;
      sheet.appendRow([user, type, start, end, formattedElapsed]);
    } else {
      sheet.appendRow([user, type, start, end || ""]);
    }
  } catch (e) {
    Logger.log("エラー: " + e.toString());
  }
}

```

```index.html
<!DOCTYPE html>
<html>
  <head>
    <script>
      let idleTime = 0;
      let idleStart = null;
      let idleThreshold = 10; // 10秒で記録

      function resetIdleTime() {
        if (idleTime >= idleThreshold) {
          let idleEnd = new Date().toLocaleString();
          google.script.run.logEvent("アイドル状態検知", idleStart, idleEnd);
        }
        idleTime = 0;
        idleStart = null;
      }

      function checkIdle() {
        idleTime++;
        if (idleTime === idleThreshold) {
          idleStart = new Date().toLocaleString();
        }
      }

      function logPageOpen() {
        google.script.run.logEvent("Webアプリ：Open", new Date().toLocaleString(), "");
      }

      function logPageClose() {
        google.script.run.logEvent("Webアプリ：Close", new Date().toLocaleString(), "");
      }

      // イベントリスナーを設定
      document.onmousemove = document.onkeypress = resetIdleTime;
      setInterval(checkIdle, 1000); // 1秒ごとにアイドル状態を確認
      window.addEventListener("beforeunload", logPageClose);

      // 初回ページオープン時に記録
      window.onload = logPageOpen;
    </script>
  </head>
  <body>
    <h3>アイドル状態を監視中...</h3>
  </body>
</html>

```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
社内にScriptやHTMLのコードについて詳しい人間がいないため、Chat GPT と相談しながらここまで進めてきました。
ですがこのエラー部分についていろんな切り口で修正依頼や相談を GPT にしてもこれ以上改善させることができませんでした。

はじめはGoogle アカウントの Email アドレス取得はおこなっておらず、その前段階は❶の問題が正常に記録されていたように思います。

GPT にも HTML だけでなく Gas 部分も見直しなどを相談しましたが解決させることができませんでした。

### 補足
特になし

Google Script と HTML を使用してPCのアイドリング状態を記録する Web アプリを作成したいのですがどうしても一部うまくいきません。

### 実現したいこと

作成中の画像リサイズアプリにて、アップロードされた時のものと同じ拡張子で処理後の画像を取得すること

### 前提

現在、HTML・JavaScriptを使って画像リサイズツールを作成しています。

そのうちアップロードされた画像のサイズを変更する処理そのものは問題なく実行できているのですが、canvasから処理後の画像を取得しダウンロードリンクを生成する際に正しい拡張子を適用することができず困っています。

もし原因・解決方法をご存知でしたら、ご教示いただけますと幸いです。

### 発生している問題・エラーメッセージ

本来は投稿された画像ファイルの拡張子を変数extに保存し出力ファイル名「newFileName」にもそのまま適用させたいと考えているのですが、なぜか出力される画像の拡張子が毎回pngになってしまいます。

### 該当のソースコード

```JavaScript
let originalWidth = 0;
let originalHeight = 0;
let aspectRatio = 1;

function loadImage() {
    // 投稿された画像
    let fileInput = document.getElementById('imageInput').files[0];
    if (!fileInput) return;

    let reader = new FileReader();
    reader.readAsDataURL(fileInput);

    reader.onload = function(event) {
        let img = new Image();
        img.src = event.target.result;

        img.onload = function() {
            originalWidth = img.width;
            originalHeight = img.height;
            aspectRatio = originalWidth / originalHeight;

            // 幅・高さの入力フィールドに投稿された画像の元のサイズを自動挿入
            document.getElementById('widthInput').value = originalWidth;
            document.getElementById('heightInput').value = originalHeight;

            // サイズ変更方法のSelect要素を表示
            document.getElementById('resizeType').style.visibility = "visible";
            document.getElementById('resizeLabel').style.visibility = "visible";
        };
    };
}

function updateInputFields() {
    let resizeType = document.getElementById('resizeType').value;
    let dimensionInputs = document.getElementById('dimensionInputs');
    let percentageInput = document.getElementById('percentageInput');

    // 選択されたサイズ変更方法に応じて入力フィールドの表示状態を変更
    if (resizeType === "aspect") {
        dimensionInputs.style.display = "block";
        percentageInput.style.display = "none";
        document.getElementById('widthInput').disabled = false;
        document.getElementById('heightInput').disabled = false;
    } else if (resizeType === "percentage") {
        percentageInput.style.display = "block";
        dimensionInputs.style.display = "none";
    } else if (resizeType === "custom") {
        dimensionInputs.style.display = "block";
        percentageInput.style.display = "none";
        document.getElementById('widthInput').disabled = false;
        document.getElementById('heightInput').disabled = false;
    } else {
        dimensionInputs.style.display = "none";
        percentageInput.style.display = "none";
    }
}

// 縦横比維持の場合、幅・高さを自動調整
function updateHeightAspect() {
    let resizeType = document.getElementById('resizeType').value;
    let widthInput = document.getElementById('widthInput');
    let heightInput = document.getElementById('heightInput');

    if (resizeType === "aspect" && widthInput.value) {
        heightInput.value = Math.round(widthInput.value / aspectRatio);
    }
}

function updateWidthAspect() {
    let resizeType = document.getElementById('resizeType').value;
    let widthInput = document.getElementById('widthInput');
    let heightInput = document.getElementById('heightInput');

    if (resizeType === "aspect" && heightInput.value) {
        widthInput.value = Math.round(heightInput.value * aspectRatio);
    }
}

function resizeImage() {
    let fileInput = document.getElementById('imageInput').files[0];
    if (!fileInput) {
        alert("画像を正しくアップロードしてください。");
        return;
    }

    let resizeType = document.getElementById('resizeType').value;
    let widthInput = document.getElementById('widthInput').value;
    let heightInput = document.getElementById('heightInput').value;
    let percentage = document.getElementById('percentage').value;

    let reader = new FileReader();
    reader.readAsDataURL(fileInput);
    
    reader.onload = function(event) {
        let img = new Image();
        img.src = event.target.result;

        img.onload = function() {
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');

            let newWidth, newHeight;

            if (resizeType === "aspect") {
                newWidth = parseInt(widthInput);
                newHeight = parseInt(heightInput);
            } else if (resizeType === "percentage") {
                if (!percentage) {
                    alert("有効な数値を入力してください。");
                    return;
                }
                let scale = percentage / 100;
                newWidth = Math.round(originalWidth * scale);
                newHeight = Math.round(originalHeight * scale);
            } else if (resizeType === "custom") {
                newWidth = parseInt(widthInput);
                newHeight = parseInt(heightInput);
            }

            canvas.width = newWidth;
            canvas.height = newHeight;
            ctx.drawImage(img, 0, 0, newWidth, newHeight);

            // ダウンロードリンクの設定
            let downloadLink = document.getElementById('downloadLink');
            let originalName = fileInput.name;
            const pos = originalName.lastIndexOf('.');
            let baseName = originalName.substring(0, pos) || originalName;
            let ext = originalName.slice(pos + 1)
            let newFileName = baseName + '-resized.' + ext;
            // 下記「試したこと」にて説明
            console.log(ext);
            console.log(originalName);
            downloadLink.download = newFileName;
            let dataUrl = '';
            // 元の拡張子によって取得する画像のフォーマットを変更
            if(ext == 'png' || ext == 'PNG') {
                dataUrl = canvas.toDataURL("image/png");
            } else if(ext == 'jpg' || ext == 'JPG') {
                    dataUrl = canvas.toDataURL("image/jpg");
            } else if(ext == 'gif' || ext == 'GIF') {
                    dataUrl = canvas.toDataURL("image/gif");
            } else {
                    dataUrl = canvas.toDataURL();
            }
            downloadLink.href = dataUrl;
            downloadLink.style.display = "block";
        };
    };
}
```

### 試したこと

ext(元のファイルの拡張子)が正しく取得できていないのかと考え、上記の通り途中でextの内容をコンソールに出力させてみました。  
ただこの時の出力結果は例えば「jpg」のように正しく出力されているのにも関わらず、やはりダウンロードされる画像は「example.jpg.png」というようにPNG形式に変更されてしまうため、未だ状況が把握できていない状況です。


以上です。
よろしくお願いいたします。


JavaScriptでcanvasの画像を取得する際に拡張子が正しく適用できない

### 知りたいこと
JavaScript で `querySelector()` 等で要素を取得した後、その成否を確認するかどうか？
ご意見をお伺いしたいです。

### コード
以下のようなコードです。
```JavaScript
// ➀成否を確認するバージョン
const element = document.querySelector(".target");
if (element) {
    element.setAttribute("data-flg", true);
}

// ➁成否を確認しないバージョン
document.querySelector(".target").setAttribute("data-flg", true);
```

### 質問の経緯と意図
WEBサイト制作は未経験の初心者です。
何度かJavaScripは書いたことはあるのですが、いつも「➁成否を確認しないバージョン」でやっていました。

しかしChatGPTに聞いてみると「➀成否を確認するバージョン」の方が堅実であるとアドバイスを頂戴し、実際の現場ではどうなのかと疑問に思いました。

例えば「いいねボタン」の更新にあたってそのボタンがないことなんてあり得ないハズなので確認は不要だろうと思いますが、途中で `insertAdjacentHTML()`などをする要素については確認した方がいいのかも。とは思ったのですが・・どうなのでしょうか？

必ず確認する、またはこういうときに確認する。など教えて頂けましたら幸いです。
よろしくお願い致します。

JavaScripで要素チェックを必ずしますか？またはいつしますか？

### 実現したいこと
GSSに入力したものをslackに送信し、チェックボタンをクリックしたら色が変わるようにしたいです。
Chat GPTに聞いたりして、色々試しましたが、「Google Apps Script側でSlackからのリクエストが正しく受け取れていない」という表示になります。
デプロイを更新し、ウェブブラウザURLも更新したり、OAuth Tokensも権限を付与しても全く変わりません。何か解決方法を御存知の方がいらっしゃいましたら教えてほしいです。


```
function sendSpreadsheetToSlack() {
  try {
    var spreadsheetId = '1OOJxPdejznnc9MuhK-DV82XaWMw**********';
    var spreadsheet = SpreadsheetApp.openById(spreadsheetId);
    var sheet = spreadsheet.getSheetByName("シート1");

    var lastRow = sheet.getLastRow();
    var data = sheet.getRange(2, 1, lastRow - 1, 1).getValues();

    var blocks = [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": "*チェックリスト*"
        }
      }
    ];

    data.forEach(function(row, index) {
      var currentTask = row[0].toString().trim();
      var isChecked = currentTask.startsWith("✅");
      var buttonText = isChecked ? "☑️ チェックを外す" : "✅ チェックする";

      blocks.push({
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": `*${currentTask.slice(2)}*`
        },
        "accessory": {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": buttonText
          },
          "value": index.toString(),
          "action_id": "toggle_check"
        }
      });
    });

    var payload = {
      "blocks": blocks
    };

    // Webhook URLを指定
    var webhookUrl = "https://hooks.slack.com/services/T03BK5ZNM/B087F757092/**********";

    var options = {
      "method": "POST",
      "contentType": "application/json",
      "payload": JSON.stringify(payload)
    };

    UrlFetchApp.fetch(webhookUrl, options);
    Logger.log('Slackへの送信が成功しました');
    return ContentService.createTextOutput("Slackへの送信が成功しました");
  } catch (error) {
    Logger.log("エラー: " + error.toString());
    return ContentService.createTextOutput("エラー: " + error.message);
  }
}

function doPost(e) {
  try {
    // リクエストの内容をログに記録
    Logger.log("Received event: " + JSON.stringify(e));
    Logger.log("Post data: " + e.postData.contents); // リクエスト内容を表示

    if (!e || !e.postData) {
      throw new Error("No postData received");
    }

    var payload = JSON.parse(e.postData.contents);
    Logger.log("Received payload: " + JSON.stringify(payload));  // パースされたデータをログに出力

    return ContentService.createTextOutput(JSON.stringify({ "text": "Received Successfully" }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    Logger.log("エラー: " + error.toString());
    return ContentService.createTextOutput(JSON.stringify({ "error": error.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}







// 更新するブロックを作成
function createUpdatedBlocks(originalBlocks, newEmoji) {
  var updatedBlocks = [];
  
  originalBlocks.forEach(function(block) {
    if (block.type === "section" && block.accessory) {
      var updatedButton = Object.assign({}, block.accessory);
      updatedButton.text.text = newEmoji + " " + updatedButton.text.text.slice(2);  // ボタンの絵文字を更新
      updatedBlocks.push({
        type: "section",
        text: block.text,
        accessory: updatedButton
      });
    } else {
      updatedBlocks.push(block);
    }
  });

  return updatedBlocks;
}
```

### 発生している問題・分からないこと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-18/7b33fa36-088b-4f45-8027-715422f1e1a0.png)![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-18/5319b702-c787-4e2e-8f1c-52e62c7c1b8f.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-18/5177d083-ad9b-402f-a2b8-2e2b41939e14.jpeg)

### エラーメッセージ
```error
情報	Received event: undefined
情報	エラー: TypeError: Cannot read properties of undefined (reading 'postData')
```

### 該当のソースコード

```function doPost(e) 
function doPost(e) {
  try {
    // リクエストの内容をログに記録
    Logger.log("Received event: " + JSON.stringify(e));
    Logger.log("Post data: " + e.postData.contents); // リクエスト内容を表示

    if (!e || !e.postData) {
      throw new Error("No postData received");
    }

    var payload = JSON.parse(e.postData.contents);
    Logger.log("Received payload: " + JSON.stringify(payload));  // パースされたデータをログに出力

    return ContentService.createTextOutput(JSON.stringify({ "text": "Received Successfully" }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    Logger.log("エラー: " + error.toString());
    return ContentService.createTextOutput(JSON.stringify({ "error": error.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
[こちら](https://etauthenonprogrammercoder.tumblr.com/post/185966783317/gasslack-appblock-kit-builder)の記事に沿って、実施してみましたが「OK」「NG」をタップしてもReplyが返ってきませんでした。やはり、設定が間違っているのでしょうか。。

情報	Received event: undefined
情報	エラー: TypeError: Cannot read properties of undefined (reading 'postData')

### 補足
```
function myFunction() {

  var blockKit = [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "ボタン押してね！"
      }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "emoji": true,
            "text": "OK"
          },
          "style": "primary",
          "value": "ok"
        },
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "emoji": true,
            "text": "NG"
          },
          "style": "danger",
          "value": "ng"
        }
      ]
    }
  ];

  var payload    = {'blocks' : blockKit};
  var options    = {'method' : 'POST',
                    'payload': JSON.stringify(payload)};
  var webhookUrl = 'https://hooks.slack.com/services/T03BK5ZNM/B087F757092/dqjeC9J*********';  // 取得した Webhook URL
  UrlFetchApp.fetch(webhookUrl, options);

}

function doPost(e) {
  try {
    // リクエスト内容をログに記録
    var json = JSON.parse(e.postData.contents);

    // `url_verification`リクエストの場合
    if (json.type === "url_verification") {
      // challengeパラメータをそのまま返す
      var challenge = json.challenge;
      Logger.log("Challenge received: " + challenge);  // challengeをログに記録
      return ContentService.createTextOutput(challenge)
        .setMimeType(ContentService.MimeType.TEXT);
    }

    // 他のイベント（ボタン操作など）の処理
    var actionsValue = json.actions[0].value;
    var responseUrl = json.response_url;

    var reply = '「' + actionsValue + '」ボタン押してくれてありがと！';
    var payload = { 'text': reply };
    var options = { 'method': 'POST', 'payload': JSON.stringify(payload) };

    // メッセージを送信
    UrlFetchApp.fetch(responseUrl, options);

  } catch (error) {
    Logger.log("エラー: " + error.toString());
    return ContentService.createTextOutput("エラー: " + error.message);
  }
}


```

※追記
Postmanを使用し、補足に貼っているPOSTしたところ、「「OK」ボタン押してくれてありがと！」と返ってきました。

GASを用いてslack上でアイコンをクリックしたら変更させたい

### 実現したいこと
メインビジュアルから次のセクションまでの間のみ、スクロール量に関わらず、1スクロールで移動させたいです。参考サイトのように、メインビジュアル部分でスクロールイベントが起こった際、連続したスクロールをしても1スクロールで次のセクションまでスクロールされるようにしたいです。
また、参考サイトではメインビジュアルから次のセクションへスクロールすると、表示上は次のセクションにスクロールされているのですが、スクロールバーは動かないという現象がおこっていますが、この仕組みもよくわからないので、併せてお聞きしたいです。

参考サイト:https://www.yadohouse.jp/

### 発生している問題・分からないこと
メインビジュアルからスクロールを行うと、クラスを付与しスムーズスクロールされるようにはできたのですが、スクロールを連続して行うと、カクついてしまいます。
また、メインビジュアルから次のセクションにスクロールすると、通常のスクロールと同じ挙動をしてしまいます。

こちらにソースコードを記述しますが、CodePenのURLも念のため記述します。
CodePen:https://codepen.io/k_2024/pen/NPWXLbj



### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
</head>

<body id="page">

<div class="pageWrap">
	<div class="mv">
		<div class="inner">
			<figure>
				<img src="https://placehold.jp/1920x700.png">
			</figure>
		</div>
	</div>
	<div class="wrapper">
		<div class="page-content">
			<div class="section">
				直下コンテンツの内容がここに入ります。
			</div>
		</div>
	</div>
</div>

</body>
</html>

```

```scss
.mv{
	position: relative;

	.inner{
		display: flex;
		flex-wrap: nowrap;

		figure{
			height: 100vh;

			img{
				width: 100%;
				object-fit: contain;
			}
		}
	}
}

.wrapper{
	height: 200vh;
	background: #ccc;
}

```

```jQuery
$(function () {
	var $mainVisual = $('.mv');
	var $section = $('.section');
	var $wrapper = $('.wrapper');
	var isAnimating = false;
	var touchStartY = 0;
	var touchMoveY = 0;

	/* スムーズスクロール */
	function smoothScroll($target) {
		if (isAnimating) return;
		isAnimating = true;

		$('html, body').stop().animate(
			{
				scrollTop: $target.offset().top,
			},
			800,
			function () {
				isAnimating = false;
			}
		);
	}

	$(window).on('wheel', function (event) {
		if (isAnimating) return;

		var deltaY = event.originalEvent.deltaY;
		var scrollTop = $(window).scrollTop();
		var mainVisualBottom = $mainVisual.offset().top + $mainVisual.outerHeight(true);
		var conceptTop = $section.offset().top;
		var conceptBottom = conceptTop + $section.outerHeight(true);
		var windowHeight = $(window).height();

		if (scrollTop < mainVisualBottom && deltaY > 15) {
			smoothScroll($wrapper);
		} else if (deltaY < -80) {
			if (scrollTop < conceptTop || scrollTop > conceptBottom) {
				return;
			}
			if (scrollTop + windowHeight <= conceptBottom) {
				return;
			}
			if (scrollTop <= conceptTop + windowHeight * 0.1) {
				smoothScroll($mainVisual);
			}
		}
	});

	$(window).on('touchstart', function (event) {
		touchStartY = event.originalEvent.touches[0].pageY;
	});

	$(window).on('touchmove', function (event) {
		touchMoveY = event.originalEvent.touches[0].pageY - touchStartY;
	});

	$(window).on('touchend', function () {
		var scrollTop = $(window).scrollTop();
		var mainVisualBottom = $mainVisual.offset().top + $mainVisual.outerHeight(true);
		var conceptTop = $section.offset().top;
		var conceptBottom = conceptTop + $section.outerHeight(true);
		var windowHeight = $(window).height();

		if (scrollTop < mainVisualBottom && touchMoveY < -45) {
			smoothScroll($wrapper);
		} else if (scrollTop < conceptTop || scrollTop > conceptBottom) {
			return;
		}
		if (scrollTop + windowHeight <= conceptBottom) {
			return;
		}
		if (scrollTop <= conceptTop + windowHeight * 0.1) {
			smoothScroll($mainVisual);
		}
	});
});

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
条件を厳格にしているのですが、通常のスムーズスクロールになってしまいました。

### 補足
特になし

メインビジュアル部分のみスクロールイベントを制御したいです。

### 実現したいこと
barba.jsでページ遷移しても<audio>タグで、音楽を途切れる事なく流し続けたいが、
PCのクロームだとうまくいきますが、iPhoneだとページB.htmlやページC.htmlに遷移した時に
自動再生され、どんどん音楽が流れ重複してしまう。ので、iPhoneでもクロームのように通常にしたい。

### 発生している問題・分からないこと
自動再生（auto）を使わないとPCのクロームでは遷移して再生し続ける事はできないみたいですが、
iPhoneのsafariだと勝手に再生されてしまうみたいです。



### 該当のソースコード

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページA</title>
  <script src="https://unpkg.com/@barba/core"></script>
</head>
<body data-barba="wrapper">
  
  
  <audio id="fixed" data-barba-prevent controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    お使いのブラウザは audio 要素をサポートしていません。
  </audio>

  <div data-barba="container">
    <h1>ページA</h1>
    <p><a href="pageB.html">ページBへ</a></p>
    <p><a href="pageC.html">ページCへ</a></p>
  </div>

  <script>
    barba.init(); 
  </script>
</body>
</html>

```

```pageB.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページB</title>
  <script src="https://unpkg.com/@barba/core"></script>
</head>
<body data-barba="wrapper">
  
  
  <audio id="fixed" data-barba-prevent controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    お使いのブラウザは audio 要素をサポートしていません。
  </audio>

  <div data-barba="container">
    <h1>ページB</h1>
    <p><a href="index.html">ページAへ</a></p>
    <p><a href="pageC.html">ページCへ</a></p>
  </div>

  <script>
    barba.init(); 
  </script>
</body>
</html>

```

```pageC.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページC</title>
  <script src="https://unpkg.com/@barba/core"></script>
</head>
<body data-barba="wrapper">
  
  
  <audio id="fixed" data-barba-prevent controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    お使いのブラウザは audio 要素をサポートしていません。
  </audio>

  <div data-barba="container">
    <h1>ページC</h1>
    <p><a href="pageB.html">ページBへ</a></p>
    <p><a href="index.html">ページAへ</a></p>
  </div>

  <script>
    barba.init(); 
  </script>
</body>
</html>

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
ChatGPTで聞き、出したコードでもうまくいきませんでした。

### 補足
参考にしたいサイトです。
https://yusannouekiya.com/

barba.jsでページ遷移しても音楽を途切れず流したいがiPhoneだとできない

### 実現したいこと

ファイルを検索する仕組みの作成を検討しています。

イメージとしては、検索用のテキストボックスに任意の文字を入力することで、その文字を含むファイル名を検索し、検索結果をクリックするとそのファイルが開くような動作をする仕組みです。

サーバにフォルダを用意してその中のファイルを作成した仕組みを通してクライアントから参照し、検索することを想定しています。

エクスプローラ上でも同じようなことはできると思いますが、ファイル数が多くなると検索までの動作が遅いのと、あまりPCに詳しくないユーザも多くいるためそのようなファイル検索画面を作成できれば便利なのではないかとのことからそのような機能の作成を検討しています。

できればEXEではなく、ブラウザで動く仕組みで考えていますが、ほかに何か良い実現方法があればご教示いただけますでしょうか。
ASTERIAも活用が可能であれば利用を考えています。



