常連

注目の的

社会貢献

### 実現したいこと
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だとできない

### 実現したいこと
クラウド上（Renderを使用予定）から、指定したYoutube動画の字幕を取得したいです。
Ruby On RailsからPythonで作成したスクリプトを呼びだすことで実現しようとしています。

現在はCodespaces上でRailsの環境を作成し、そこで作成をしています。

### 発生している問題・分からないこと
字幕取得部分でエラーが発生します。
エラー文を読む限り、Youtubeはクラウドからのリクエストをブロックしているため、処理ができないのではないかと思っています。

### エラーメッセージ
```error
Started POST "/translate" for 10.240.2.99 at 2025-03-11 22:08:10 +0000
Cannot render console from 10.240.2.99! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by HomeController#translate as HTML
  Parameters: {"youtube_url"=>"https://www.youtube.com/watch?v=xUMlxinV-MA"}
Traceback (most recent call last):
  File "/workspaces/translation-youtube/translation_youtube/lib/python_scripts/python_scripts.py", line 51, in <module>
    print(getSubtitlesWithApi())
          ^^^^^^^^^^^^^^^^^^^^^
  File "/workspaces/translation-youtube/translation_youtube/lib/python_scripts/python_scripts.py", line 36, in getSubtitlesWithApi
    transcript = YouTubeTranscriptApi.get_transcript(video_id, languages=['ja'])
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_api.py", line 300, in get_transcript
    cls.list_transcripts(video_id, proxies, cookies)
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_api.py", line 201, in list_transcripts
    return ytt_api.list(video_id)
           ^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_api.py", line 129, in list
    return self._fetcher.fetch(video_id)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_transcripts.py", line 349, in fetch
    self._extract_captions_json(self._fetch_video_html(video_id), video_id),
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_transcripts.py", line 363, in _extract_captions_json
    self._assert_playability(video_data.get("playabilityStatus"), video_id)
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_transcripts.py", line 382, in _assert_playability
    raise RequestBlocked(video_id)
youtube_transcript_api._errors.RequestBlocked: 
Could not retrieve a transcript for the video https://www.youtube.com/watch?v=BzJHh5IZV2o! This is most likely caused by:

YouTube is blocking requests from your IP. This usually is due to one of the following reasons:
- You have done too many requests and your IP has been blocked by YouTube
- You are doing requests from an IP belonging to a cloud provider (like AWS, Google Cloud Platform, Azure, etc.). Unfortunately, most IPs from cloud providers are blocked by YouTube.

There are two things you can do to work around this:
1. Use proxies to hide your IP address, as explained in the "Working around IP bans" section of the README (https://github.com/jdepoix/youtube-transcript-api?tab=readme-ov-file#working-around-ip-bans-requestblocked-or-ipblocked-exception).
2. (NOT RECOMMENDED) If you authenticate your requests using cookies, you will be able to continue doing requests for a while. However, YouTube will eventually permanently ban the account that you have used to authenticate with! So only do this if you don't mind your account being banned!

If you are sure that the described cause is not responsible for this error and that a transcript should be retrievable, please create an issue at https://github.com/jdepoix/youtube-transcript-api/issues. Please add which version of youtube_transcript_api you are using and provide the information needed to replicate the error. Also make sure that there are no open issues which already describe your problem!
  Rendering text template
  Rendered text template (Duration: 0.0ms | Allocations: 10)
Completed 200 OK in 1099ms (Views: 1.1ms | ActiveRecord: 0.0ms | Allocations: 584)
```

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

```Python
def getSubtitlesWithApi():
    # 対象のYouTube動画のIDを指定
    video_id = 'BzJHh5IZV2o'

    # 日本語の字幕を取得
    transcript = YouTubeTranscriptApi.get_transcript(video_id, languages=['ja'])

    # 字幕データを表示
    print(transcript)

    # 字幕テキストを結合して一つの文字列にする
    transcript_text = ' '.join([item['text'] for item in transcript])

    # 加工後のテキストを表示
    return "Subtitles" + transcript_text
```

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

##### 上記の詳細・結果
特に有用は結果は得られませんでした。

### 補足
特になし

クラウド上からyoutube-transcript-apiを実行したい

### 実現したいこと
例えば日曜日と月曜日がが18時-26時で営業時間だった場合、日曜の24時までは正しく出るが24時を超えると、営業時間外が出てしまう。これを深夜2時までは営業中と表示させたいです。

### 前提
TypeScriptでお店の営業時間をまとめるシステムを作っています。
営業時間を判定する機能を実装しているのですが、24時を超えた営業時間に対してどうしても営業時間外と出てしまいます。（24時までは正しく”営業中”とでます）


### ソースコード
```
const checkIfOpen = (opening_hours: string) => {
    const now = dayjs().locale("ja");
    let today = now.format("dddd").replace("曜日", "").trim();
    let tomorrow = now.add(1, "day").format("dddd").replace("曜日", "").trim();
    let yesterday = now.subtract(1, "day").format("dddd").replace("曜日", "").trim();
    const currentTime = now.format("HH:mm");

    console.log(`📆 現在の曜日: ${today}, 時刻: ${currentTime}`);

    // ✅ 営業時間マップを作成
    const hoursMap: { [key: string]: { open: string; close: string } } = {};
    opening_hours.split("\n").forEach((line) => {
        const match = line.match(/^(.+?曜)\s*(\d{1,2}:\d{2})〜(\d{1,2}:\d{2})$/);
        if (match) {
            const day = match[1].trim();
            let openTime = match[2].trim();
            let closeTime = match[3].trim();

            // `closeTime` をそのまま27:30などの表記で保持
            hoursMap[day] = { open: openTime, close: closeTime };
        }
    });

    console.log("🗺 営業時間マップ:", hoursMap);

    // ✅ 深夜（00:00〜05:59）は `昨日` のデータを探す
    if (now.hour() < 6) {
        console.log(`⚠️ 深夜時間 (${currentTime}) のため、前日(${yesterday})の営業時間を適用`);
        today = yesterday;
    }

    console.log("🔍 検索対象:", today);

    let foundKey = Object.keys(hoursMap).find((key) => key.startsWith(today));

    if (!foundKey) {
        console.error(`⚠️ '${today}' のデータが見つかりません`);
        return { isOpen: false, nextOpening: "情報なし" };
    }

    const todayHours = hoursMap[foundKey] || { open: "情報なし", close: "情報なし" };
    console.log(`📆 今日(${today}) の営業時間:`, todayHours);

    if (!todayHours.open || todayHours.open === "情報なし") {
        return { isOpen: false, nextOpening: "情報なし" };
    }

    if (todayHours.open.includes("休み")) {
        return { isOpen: false, nextOpening: "本日休業" };
    }

    // ✅ 営業時間の判定
    let nextOpening = "";
    let isOpen = false;

    let open = dayjs(`${now.format("YYYY-MM-DD")} ${todayHours.open}`, "YYYY-MM-DD HH:mm");
    let closeHour = parseInt(todayHours.close.split(":")[0], 10);
    let closeMinute = parseInt(todayHours.close.split(":")[1], 10);

    let close = dayjs(now)
        .set("hour", closeHour >= 24 ? closeHour - 24 : closeHour)
        .set("minute", closeMinute);

    console.log(`🕒 営業時間: ${open.format("HH:mm")} 〜 ${close.format("HH:mm")}`);

    if (now.isBetween(open, close, null, "[)")) {
        isOpen = true;
        nextOpening = `本日 ${close.format("HH:mm")} まで営業`;
    }

    // **営業時間終了後に、翌日の営業時間を取得**
    if (!isOpen) {
        const nextDayKey = Object.keys(hoursMap).find((key) => key.startsWith(tomorrow));
        if (nextDayKey) {
            nextOpening = `次の営業: ${nextDayKey} ${hoursMap[nextDayKey]?.open} から`;
        }
    }

    return { isOpen, nextOpening };
};

```
### 言語名
TypeScript

### 試したこと
Supabaseを利用しているのですが、営業時間を深夜2時にしたり、26時にしたりとしましたが、日付が変わったタイミングでどうしても営業時間外になってしまい翌日の営業時間を参照してしまいます。



TypeScriptで営業時間を正しく表示できないです、、、

### 実現したいこと
スクロールすると右側の目次が追従し、sectionごとに目次部分が切り替わるような仕様を作りたいです。
section1にいる場合は目次「①」に背景色が加わり、そのsectionの見出し文が表示されるような感じです。
section2以降にスクロールした場合は、目次「①」の背景色と見出し文がなくなり、「②」の背景色と見出し文が表示されるような仕様です。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/99c1864e-5e9a-458c-8dc8-5cef23cfdd71.png)


### 発生している問題・分からないこと
https://www.bring-flower.com/blog/fixed-and-highlighted-toc/
BringFlowerさんのコードを参考にしました。

olタグの幅を縮めて無理やり縦書きにして、上記のようなものを実現しようと試みましたが、上手くいきません。
JavaScriptにまだまだ乏しく、どのように書けば再現できますでしょうか？
どうかよろしくお願いします。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/f70979c5-c6ae-4971-880b-82bcb3512c1e.png)

※追加しました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/7750e11f-f5e4-4710-9427-25cfef3329c1.png)

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

```html、css、JavaScript
<meta name="robots" content="noindex,nofollow" />
<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">

  <style media="screen">
    section.toc-demo{
      margin: 0 auto;
    }
    h2{
      font-size: 20px;
      background-color: #f3f3f3;
      border-bottom: 3px solid #333;
      padding: 5px 0 5px 10px;
    }
    p{
      padding-left: 10px;
    }
    ol{
      width: 43px;
      position: fixed;
      top: 4vh;
      right: 25px;
    }
    li{
      list-style-type:none;
    }
    a{
      display: block;
      width: 100%;
      color: #fff;
      margin-bottom: 1px;
      text-decoration: none;
      padding: 3px 5px 3px 10px;
    }
    a.current{
      background-color: #dd5eb3;
      color: #000;
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
    }
    .top{
      width: 100%;
      height: 70vh;
      background-color: #fbb03b;
    }
    .writing-mode{
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
    }

    .content{
      width: 100%;
      height: 100vh;
    }
    .toc-demo .content:nth-child(2){
      background: #8cc63f;
    }
    .toc-demo .content:nth-child(3){
      background: #0092ff;
    }
  </style>
</head>

<body>
  <section class="top">TOP</section>
  <section class="toc-demo">
    <div class="content">
      <h2 class="h2test">見出し１</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し２</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し３</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し４</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し５</h2>
    </div>
</section>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    const headings = document.querySelectorAll('.h2test');
let toc = '<ol id="fixed-toc">';

headings.forEach( function(heading, index) {
  heading.id = 'heading-0' + (index+1);
  let id = heading.id;
  toc = toc + '<li><a href="#' + id + '">' + heading.textContent + '</a></li>';
});

toc = toc + '</ol>';
document.querySelector('.toc-demo').insertAdjacentHTML('afterbegin', toc);

window.addEventListener('scroll', function() {
    let scroll = window.scrollY;//スクロール量を取得
    let hight = window.innerHeight;//画面の高さを取得
    let offset = 400;//どの時点で現在表示されている見出しとするかの調整値
    const toc_completed = document.getElementById('fixed-toc');

    headings.forEach( function( heading , index) {
        let i = index + 1;
        let target = document.querySelector('#fixed-toc li:nth-of-type(' + i + ') > a');
        let pos = heading.getBoundingClientRect().top + scroll;//見出しの位置

        if ( scroll > pos - hight + offset ) {//スクロール量が見出しを超えた

            if (headings[index + 1] !== undefined){// 次の見出しがある＝最後の見出しではない

                let next_pos = headings[index + 1].getBoundingClientRect().top + scroll;//次の見出しの位置
                if ( scroll > next_pos - hight + offset ) { // スクロール量が次の見出しも超えている
                    target.classList.remove('current');
                } else if (target.classList.contains('current') == true) { // すでにcurrentがついている
                    return;
                } else if ( i == 1 && toc_completed.classList.contains('active') == false ){// 1つ目
                    target.classList.add('current')
                    toc_completed.classList.add('active')
                } else { // 次の見出しは見えてない
                    target.classList.add('current');
                }

            } else { //最後の見出しの時
                target.classList.add('current');
            }
        } else { //スクロール量が見出しを超えてない
            target.classList.remove('current');
            if ( i == 1 && toc_completed.classList.contains('active')){ //１つ目に到達していない場合
                toc_completed.classList.remove('active')
            }
        }
    });
});
  </script>



</body>

</html>

```

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

##### 上記の詳細・結果
JavaScript内のheading.textContentが見出し文だと思うのですが、だけ表示するには新たにif文を加えていけばいいのでしょうか？
目次の数字は見出しには書かないようにしたいのですが、いまいちやり方がわかりません...。

### 補足
特になし

【HTML】目次の作成について

### 実現したいこと

※テキストテキスト
↑このような箇条書き文（インデントあり）を入れる


### 前提

htmlで作成するふつうの静的ページです。

※テキストテキスト

↑このような箇条書き文（インデントあり）にて、
行頭の「※」記号が、PCでは全角なのですが、スマホで見ると半角になってしまいます（それゆえ、スマホではインデント（1em頭出し）が揃わない）。

charsetはUTF-8
font-familyは"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
です。

仕方ないので、「※」をCSV画像とし、疑似要素で入れています。
対処できるのでいいっちゃいいんですが、めんどくさいです。
ググってみましたが、案外情報が無く…
同じような現象を経験した方いらっしゃるでしょうか。
どのように解決されていますか？


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

```ここに言語を入力
<ul class="indent">
<li>※テキストテキスト</li>
</ul>

.indent li {
text-indent:-1em;
margin-left: 1em;
}
```


html内の「※」などの記号がスマホ表示で半角になってしまう

コードの質にもよると思いますが、
一人で1MBのコードを書きあげた場合、
この業界ではどんな評価がされるのでしょうか？
1MBのコードを書きあげることは普通と評価されるのか？
教えてください

もし普通であれば何MBを一人で書きあげたら異常者だと思うレベルかも教えてください

プログラマーの業界において1MBのコードを一人で書いた場合

### 実現したいこと
SQLServerに、DB内の各種テーブルから　データ抽出してクラウド環境向けにデータ連携する定刻処理を構築しました。
SQLServerのジョブの機能を活用した定刻処理の確立でしたが、実行する曜日を前もって指定できても、国民の祝祭日を非動作にする設定ができない　悩ましい問題に直面しています。

ちなみに、当社の営業日は　同SQLServer内のあるテーブルに格納されています。
つまり、このテーブルには　国民の祝祭日のレコードは　登録されていない状況です。


### 発生している問題・分からないこと
先に記載した　営業日のみが蓄積されたテーブルを参照して、連携データ作成・所定ファルダへの配置を達成する本質処理へ遷移する・しない　みたいな挙動を達成したいのですが
どういった手はずで　対処すればよいのか　私　わからくて．．．。

単純に今回言及した処理内先頭で、当該テーブルに対し　実行日を指定した　SELECT発行を行い、レコード結果を得られない場合は　当該一連処理を終えてしまうようにすればよいのでしょうが　その手立てがわかりません（現在ジョブから起動している当該の処理は　SSIS：SQL Server Integration Services　の技術です）

実行日を指定して、当該テーブルを参照しレコード検知できたか否かの戻り値を返す　これ用途の別プログラムを用意しなければならない、ということでしょうか？？

当該テーブルから実行日のレコードを得られた場合に限り、あるテキストファイルを作るようにしてこのファイルの存在・不存在で　本質処理の進行を判断できる・できないようにすることもできるかな、とか考えしたが、レコード得られずとも空ファイルが仕上がっていまうかな　とか思い出していて．．．　



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

```
特になし
```

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

##### 上記の詳細・結果
自分の調べ方がわるいのか　参考になる記事をみつけることができませんでした。


### 補足
特になし

DB内の稼働日カレンダ情報（テーブル）を参照して、データ連携処理の起動・非起動を見極めたい

### 実現したいこと
DockerをMac( チップ Apple M1)にダウンロードしたいです。
初心者で分からないことが多いので、詳細に説明していただけたら嬉しいです。

### 発生している問題・分からないこと
「マルチウェアがブロックされました。」と表示され、できません。完了を押しても何度も警告が出ます。
4.38.0と4.37.2を試しましたが同じ結果でした。
システム設定のセキュリティで開いた後にこのメッセージが出ます。

### エラーメッセージ
```error
マルチウェアがブロックされました。
"com.docker.vmnetd"にはマルウェアが含まれているため開けませんでした。この操作によるMacへの損害はありませんでした。
```

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

```
特になし
```

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

##### 上記の詳細・結果
データを削除しながら何度もサイトごとの方法を試しましたが、「マルチウェアがブロックされました。」と出ていまいました。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-26/28aea795-7c0a-47b8-87d4-02fbd55c3d67.png)

### 補足
特になし

Dockerをダウンロードしたいです。

### 実現したいこと
このサイト(teratail)の質問を作成する時、写真が上手く反映しないです。。。
したのようになります。↓
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-25/f167d30c-3078-442e-a3a1-46f3b414dc5f.png)

クリックして見ると、
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
</Error>

とでます。

### 発生している問題・分からないこと
画像を前みたいに出せるようにしたいです。



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

```
特になし
```

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

##### 上記の詳細・結果
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
</Error>
をcopilotに聞いてみたのですが、
「アクセス拒否」エラーが表示される場合、これは通常、ファイルやリソースにアクセスするための適切な権限がないことが原因です。

以下の手順を試してみてください：

権限の確認: ファイルやサーバーにアクセスするための適切な権限があるか確認してください。必要ならば、管理者に問い合わせてアクセス権を取得してください。

ファイルの場所確認: パスが正確であり、現在のネットワークやデバイスからファイルにアクセスできるかどうかを確認してください。

別のデバイスやネットワークを試す: ウェブサイトであれば、別のデバイスやネットワークからアクセスを試みてください。

と返されました。

### 補足
特になし

このサイト(teratail)の質問を作成する時、写真が上手く反映しない

### 実現したいこと
以下のようなテーブルがあります。

```SQL
DROP TABLE IF EXISTS `logs`;
CREATE TABLE `logs` (
  `task_id` int(11) NOT NULL,
  `mac` varchar(17) NOT NULL,
  `collection_time` timestamp NOT NULL DEFAULT current_timestamp(),
  `mv` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`mv`)),
  `response` int(11) NOT NULL DEFAULT 0,
  PRIMARY KEY (`task_id`,`mac`,`collection_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

```
```SQL
INSERT INTO `logs` VALUES
(1,'a','2025-02-20 00:00:00','{"20":1}',1),
(1,'b','2025-02-20 00:00:00','{"20":2,  "25":3}',  1),
(1,'c','2025-02-20 00:00:00','{"20":4,  "25":5,    "30":6}',  1),
(1,'d','2025-02-20 00:00:00','{"20":7,  "25":8,    "30":9,    "35":10}', 1),
(1,'a','2025-02-20 00:01:00','{"20":11}',1),
(1,'b','2025-02-20 00:01:00','{"20":12, "25":13}', 1),
(1,'c','2025-02-20 00:01:00','{"20":14, "25":15,   "30":16}', 1),
(1,'d','2025-02-20 00:01:00','{"20":17, "25":18,   "30":19,   "35":20}', 1);

```
```SQL
SELECT collection_time, mac, mv FROM logs ORDER BY collection_time, mac;
```
+---------------------+-----+------------------------------------------+
| collection_time     | mac | mv                                       |
+---------------------+-----+------------------------------------------+
| 2025-02-20 00:00:00 | a   | {"20":1}                                 |
| 2025-02-20 00:00:00 | b   | {"20":2,  "25":3}                        |
| 2025-02-20 00:00:00 | c   | {"20":4,  "25":5,    "30":6}             |
| 2025-02-20 00:00:00 | d   | {"20":7,  "25":8,    "30":9,    "35":10} |
| 2025-02-20 00:01:00 | a   | {"20":11}                                |
| 2025-02-20 00:01:00 | b   | {"20":12, "25":13}                       |
| 2025-02-20 00:01:00 | c   | {"20":14, "25":15,   "30":16}            |
| 2025-02-20 00:01:00 | d   | {"20":17, "25":18,   "30":19,   "35":20} |
+---------------------+-----+------------------------------------------+

このテーブルに対してクエリーを行い、以下のような結果を得たいと思います。

```SQL
SELECT 
    collection_time,
    LEAST(
    MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."20"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."20"')) AS DECIMAL(10, 2)) END)
,   MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."25"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."25"')) AS DECIMAL(10, 2)) END)
,   MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."30"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."30"')) AS DECIMAL(10, 2)) END)
,   MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."35"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."35"')) AS DECIMAL(10, 2)) END)
    ) as min,
    GREATEST(
    MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."20"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."20"')) AS DECIMAL(10, 2)) END)
,   MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."25"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."25"')) AS DECIMAL(10, 2)) END)
,   MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."30"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."30"')) AS DECIMAL(10, 2)) END)
,   MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."35"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."35"')) AS DECIMAL(10, 2)) END)
    ) AS max,
    '???' AS avg
FROM logs
GROUP BY collection_time;
```
+---------------------+-------+-------+-----+
| collection_time     | min   | max   | avg |
+---------------------+-------+-------+-----+
| 2025-02-20 00:00:00 |  1.00 | 10.00 | ??? |
| 2025-02-20 00:01:00 | 11.00 | 20.00 | ??? |
+---------------------+-------+-------+-----+

この、avg の取得方法についてご教示ください。
avg の計算方法は以下の通りです。

```SQL
SELECT 
    collection_time, mac, 
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.20') = 1
         THEN JSON_EXTRACT(mv, '$.20') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.25') = 1
         THEN JSON_EXTRACT(mv, '$.25') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.30') = 1
         THEN JSON_EXTRACT(mv, '$.30') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.35') = 1
         THEN JSON_EXTRACT(mv, '$.35') ELSE '' END  AS sum,
    (JSON_CONTAINS_PATH(mv, 'one', '$.20')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.25')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.30')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.35'))         AS count,
    (
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.20') = 1
         THEN JSON_EXTRACT(mv, '$.20') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.25') = 1
         THEN JSON_EXTRACT(mv, '$.25') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.30') = 1
         THEN JSON_EXTRACT(mv, '$.30') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.35') = 1
         THEN JSON_EXTRACT(mv, '$.35') ELSE '' END
    ) / (
    (JSON_CONTAINS_PATH(mv, 'one', '$.20')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.25')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.30')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.35'))
    )  AS avg
FROM logs
ORDER BY collection_time, mac
;
```
+---------------------+-----+------+-------+------+
| collection_time     | mac | sum  | count | avg  |
+---------------------+-----+------+-------+------+
| 2025-02-20 00:00:00 | a   |    1 |     1 |    1 |
| 2025-02-20 00:00:00 | b   |    5 |     2 |  2.5 |
| 2025-02-20 00:00:00 | c   |   15 |     3 |    5 |
| 2025-02-20 00:00:00 | d   |   34 |     4 |  8.5 |
| 2025-02-20 00:01:00 | a   |   11 |     1 |   11 |
| 2025-02-20 00:01:00 | b   |   25 |     2 | 12.5 |
| 2025-02-20 00:01:00 | c   |   45 |     3 |   15 |
| 2025-02-20 00:01:00 | d   |   74 |     4 | 18.5 |
+---------------------+-----+------+-------+------+

１つの collection_time に対して、avg が mac の個数分作られています。
で、最終的に求めたい avg は、 (1 + 2.5 + 5 + 8.5 ) / 4 = 4.25 と (11 + 12.5 + 15 + 17.5) / 4 = 14 となります。

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


### 発生している問題・分からないこと
平均の平均を求める方法を知りたい。



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

```
特になし
```

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

##### 上記の詳細・結果
同様の質問を見つけることができなかった。

### 補足
テーブルはかなり省略して書いてありますが、実際にはJSONフィールドにキーが200以上あります。
レコード数が非常に多いため（JSONにしても、論理的には1億行オーバー）、このような構成になっています。データベースはMariaDB-10.11.9です。

平均の平均を求めたい。

### 実現したいこと
Webシステムでパスワード入力時にパスワードマネージャーを起動させたい

### 発生している問題・分からないこと
パスワード入力時にパスワードマネージャーが起動しない




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

```HTML
<form method="post" name="default_form" id="default_form"> </form>
<input form="default_form" size="15" autocomplete="username" name="user_id" id="default_form_user_id" type="text">
<input form="default_form" size="15" autocomplete="on" name="password" id="default_form_password" placeholder="Password" type="password" class="PASSWORD_INPUT">
```

```Javacsript
function onDownPasswordButton( x_id ) {
	let p_inputBox = $(x_id);
	let p_button = $(x_id + "_button");
	p_inputBox.type = "text";
	p_button.src = "Image\\openPass.png"
}

function onUpPasswordButton( x_id ) {
	let p_inputBox = $(x_id);
	let p_button = $(x_id + "_button");
	p_inputBox.type = "password";
	p_button.src = "Image\\closePass.png"
}
```

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

##### 上記の詳細・結果
autocompleteを変更することで実装できると記載があったので、new-password,current-password,onを試しているが実装できなかった
また、httpではなくhttpsだと実現するとあったのでhttpsでも試しているができていない
ChatGPTでJava側でリダイレクトが必要であるや、クッキーの保存をしていることも影響するなどあったので試しているができていない

### 補足
特になし

Webシステムでパスワードマネージャーを起動させたい

### 実現したいこと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-20/32229f9d-5813-413d-b6cc-7e5d497681a7.png)

画像赤枠の形でテキストに折り返し指定をかけたいです。

### 発生している問題・分からないこと
HTML, CSS ( PHP, Mysql, Javascript )
上記を利用して書類を電子化するシステムを開発しています。
1つのテーブルセル内に住所と電話番号が記載されているのですが、
「1行目を住所、2行目を電話番号(右寄せ)」となっています。
書類のレイアウト上、幅が少し狭いため住所に折り返し指定をかけたいです。
ですが、1回の折り返しで住所と電話番号で3行になることは避けなければなりません。
そのため添付画像のようにTELを避けた赤枠部分でのみ折り返しがかかるようにする必要があります。
これがどうしても実現できません。
なにか方法はないでしょうか？

よろしくお願いいたします。



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

```
特になし
```

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

##### 上記の詳細・結果
```HTML
<table>
  <tr>
    <td style="position: relative;">
      <p>{住所}</p>
      <p style="position: absolute; right: 0; bottom: 0;">TEL：{電話番号}</p>
    </td>
  </tr>
</table>
```
当初このように書いていましたが、想定より住所が長いと文字が重なる問題があります。
(細かいスタイルは省略しています)

### 補足
画像のように3行になった際に2行目の住所が幅を100%利用しない形でも問題ありません。
（2行目以降は電話番号の幅を考慮する）

Javascript等を利用しても構いません。

HTML,CSSでテキストの複雑な折り返しを指定する方法

### 実現したいこと

このアプリにおいて、以下の問題を解決したいです。
- パートがずれることがある問題（すべての音源の再生位置を同期させたい）
- 初期状態で再生位置の操作を行うと表示が乱れる問題（スライダーの位置からできるようにする）
- （リピートオフ時）再生終了後に一時停止ボタンが再生ボタンに戻らない、再生位置が0に戻らない問題

### アプリの概要

合唱の音源を再生するアプリです。パート（ソプラノ・アルト・テノール）ごとに鳴らす鳴らさないを切り替えできます。すべてのパートが鳴っているときは、全体の音源を流します。
p.mp3 → ピアノ音源（all再生中以外は再生）
all.mp3 → すべてのパートの音源（すべて選択されているときはこれだけ再生）
1.mp3 → Alto音源
s.mp3 → ソプラノ音源
a.mp3 → アルト音源
t.mp3 → テノール音源

### 該当のソースコード
かなり省略しています。

```HTML
    <button id="play">再生</button>
    <button id="stop">てい止</button><br>
    <label><input type="checkbox" id="repeat">リピート</label>

    <h3>再生パート選択</h3>
    <label><input type="checkbox" id="cb1" checked>4~12 Alt.</label>・・・（すべてのパート）

    <h3>音量</h3>
    <div class="slider-container">
        <span id="volume-text">100%</span>
        <input type="range" id="volume" min="0" max="100" step="1" value="100">
    </div>

    <h3>再生位置</h3>
    <div class="slider-container">
        <span id="time-text">0:00 / 0:00</span>
        <input type="range" id="seek" min="0" max="100" step="1" value="0">
    </div>
</div>

<audio id="p" src="p.mp3"></audio>…（すべてのMP3）

<script>
document.addEventListener("DOMContentLoaded", function() {
  // グローバル変数
  let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  let gainNode = audioCtx.createGain();
  gainNode.connect(audioCtx.destination);
  // 初期音量をスライダーに合わせる
  gainNode.gain.value = document.getElementById("volume").value / 100;

  // 各ファイルのパスマッピング
  const fileList = {
    "p": "p.mp3",…（すべてのMP3）
  };

  // デコード済みAudioBufferを格納する辞書
  const buffers = {};
  let filesToLoad = Object.keys(fileList).length;
  let errorOccurred = false;
  const loadDiv = document.getElementById("load");
  loadDiv.style.display = "block";

  // ファイルを読み込み、デコードする関数
  function loadBuffer(key, url) {
    return fetch(url)
      .then(response => {
        if (!response.ok) throw new Error("Network response was not ok");
        return response.arrayBuffer();
      })
      .then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))
      .then(audioBuffer => {
        buffers[key] = audioBuffer;
        filesToLoad--;
        if (filesToLoad === 0 && !errorOccurred) {
          loadDiv.style.display = "none";
          console.log("全オーディオファイルの読み込み完了 (Web Audio API)");
        }
      })
      .catch(err => {
        errorOccurred = true;
        loadDiv.style.display = "none";
        alert("オーディオファイルの読み込みに失敗しました: " + url);
      });
  }

  Object.keys(fileList).forEach(key => {
    loadBuffer(key, fileList[key]);
  });

  // 再生状態管理用グローバル変数
  let isPlaying = false;
  let playStartTime = 0; // 再生開始時のaudioCtx.currentTime
  let pauseOffset = 0;   // 再生済みの秒数（再生中止時に蓄積）
  let activeSources = []; // 現在再生中のAudioBufferSourceNode群
  let selectedTrackIds = []; // チェックボックスから選択された音源IDの配列
  let trackDuration = 0;     // 選択したトラックの再生時間（最大値）

  // チェックボックスの状態により再生する音源を決定
  function updateSelectedTracks() {
    // チェック対象：cb1,cb2,cb3,cb4, cbs, cba, cbt
    const checkboxIds = ["cb1", "cb2", "cb3", "cb4", "cbs", "cba", "cbt"];
    let allChecked = true;
    checkboxIds.forEach(id => {
      if (!document.getElementById(id).checked) {
        allChecked = false;
      }
    });
    if (allChecked) {
      selectedTrackIds = ["all"];
    } else {
      // 常に「p」を追加
      let tracks = ["p"];
      const mapping = {
        "cb1": "1",
        "cb2": "2",
        "cb3": "3",
        "cb4": "4",
        "cbs": "s",
        "cba": "a",
        "cbt": "t"
      };
      Object.keys(mapping).forEach(cbId => {
        if (document.getElementById(cbId).checked) {
          tracks.push(mapping[cbId]);
        }
      });
      selectedTrackIds = tracks;
    }
  }

  // 選択した各音源の再生を開始（pauseOffsetから再生）
  function startPlayback() {
    updateSelectedTracks();

    // 再生時間の決定：全チェックの場合は「all」それ以外は各トラックの最大値
    if (selectedTrackIds.length === 1 && selectedTrackIds[0] === "all") {
      trackDuration = buffers["all"].duration;
    } else {
      trackDuration = Math.max(...selectedTrackIds.map(id => buffers[id].duration));
    }

    activeSources = [];
    selectedTrackIds.forEach(id => {
      let source = audioCtx.createBufferSource();
      source.buffer = buffers[id];
      source.loop = document.getElementById("repeat").checked;
      source.connect(gainNode);
      // ※ 各ソースにonendedを設定すると、早く終了したものが先に発火する可能性があるため、
      // 終了判定はupdateSeekBar内で行います。
      if (pauseOffset < source.buffer.duration) {
        source.start(0, pauseOffset);
      }
      activeSources.push(source);
    });
    playStartTime = audioCtx.currentTime;
    isPlaying = true;
    document.getElementById("play").innerHTML = '<span class="material-symbols-outlined">pause</span> 一時停止';
    document.getElementById("stop").style.display = "inline";
    updateSeekBar();
  }

  // 再生／一時停止の切り替え
  function togglePlayPause() {
    if (!isPlaying) {
      if (audioCtx.state === "suspended") {
        audioCtx.resume();
      }
      startPlayback();
    } else {
      pauseAudio();
    }
  }

  // 一時停止処理：現在再生中のソースを停止し、経過時間を記録
  function pauseAudio() {
    if (isPlaying) {
      pauseOffset += audioCtx.currentTime - playStartTime;
      activeSources.forEach(source => {
        try { source.stop(); } catch(e) {}
      });
      activeSources = [];
      isPlaying = false;
      document.getElementById("play").innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 再生';
    }
  }

  // 停止処理：再生停止＆再生位置リセット
  function stopAudio() {
    if (isPlaying) {
      activeSources.forEach(source => {
        try { source.stop(); } catch(e) {}
      });
    }
    activeSources = [];
    isPlaying = false;
    pauseOffset = 0;
    document.getElementById("play").innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 再生';
    document.getElementById("stop").style.display = "none";
    document.getElementById("seek").value = 0;
    document.getElementById("time-text").textContent = formatTime(0) + " / " + formatTime(trackDuration);
  }

  // リピートチェックボックスの変更（再生中のソースに対してループ設定を反映）
  document.getElementById("repeat").addEventListener("change", function() {
    activeSources.forEach(source => {
      source.loop = document.getElementById("repeat").checked;
    });
  });

  // 音量調整：GainNodeのgain値を変更
  document.getElementById("volume").addEventListener("input", function() {
    let vol = document.getElementById("volume").value;
    gainNode.gain.value = vol / 100;
    document.getElementById("volume-text").textContent = vol + "%";
  });

  // シークバー操作：ユーザー操作時は再生中なら再スタート、停止中なら再生位置更新
  document.getElementById("seek").addEventListener("input", function() {
    let seekValue = parseFloat(document.getElementById("seek").value);
    pauseOffset = seekValue;
    if (isPlaying) {
      activeSources.forEach(source => {
        try { source.stop(); } catch(e) {}
      });
      activeSources = [];
      playStartTime = audioCtx.currentTime;
      startPlayback();
    }
    updateSeekBar();
  });

// チェックボックス（パート選択）の変更で再生中なら再スタート（修正版）
const checkboxIds = ["cb1", "cb2", "cb3", "cb4", "cbs", "cba", "cbt"];
checkboxIds.forEach(id => {
  document.getElementById(id).addEventListener("change", function() {
    if (isPlaying) {
      // 現在の再生位置を計算して更新（再生位置の同期を実現）
      let currentPosition = pauseOffset + (audioCtx.currentTime - playStartTime);
      pauseOffset = currentPosition;
      activeSources.forEach(source => {
        try { source.stop(); } catch(e) {}
      });
      activeSources = [];
      playStartTime = audioCtx.currentTime;
      startPlayback();
    }
  });
});


  // シークバーの更新（再生中はrequestAnimationFrameで更新）
  function updateSeekBar() {
    let currentTime = isPlaying ? pauseOffset + (audioCtx.currentTime - playStartTime) : pauseOffset;
    if (currentTime > trackDuration) {
      currentTime = trackDuration;
    }
    document.getElementById("seek").max = trackDuration;
    document.getElementById("seek").value = currentTime;
    document.getElementById("time-text").textContent = formatTime(currentTime) + " / " + formatTime(trackDuration);
    // リピートがOFFかつ再生が終了していたら自動停止
    if (isPlaying && !document.getElementById("repeat").checked && currentTime >= trackDuration) {
      stopAudio();
      return;
    }
    if (isPlaying) {
      requestAnimationFrame(updateSeekBar);
    }
  }

  // 秒数を m:ss 表記に変換
  function formatTime(seconds) {
    let min = Math.floor(seconds / 60);
    let sec = Math.floor(seconds % 60);
    return min + ":" + sec.toString().padStart(2, "0");
  }

  // テーマ切替（ダークモード）
  // キーボードショートカット
（省略）

  // 再生／停止ボタンのイベントリスナー設定
  document.getElementById("play").addEventListener("click", togglePlayPause);
  document.getElementById("stop").addEventListener("click", stopAudio);

  // ページロード時の初期化（firstLoadingを短時間表示）
（省略）
</script>
```

[質問投稿時のときのHTML](https://writening.net/page?pXDfwP)

よろしくお願いいたします。

パート別再生アプリで音源がずれることがある

### 実現したいこと
getリクエストでHTMLが返却されてしまいます(apiに到達できていないと思います。)
前提：Viteでプロジェクトを作成しています。
タイトルの件につきまして、どれだけ確認しても解決策が分からない為ご教授頂けますと幸いです。

### 発生している問題・分からないこと
APIがうまく到達していないように思えます。

### エラーメッセージ
```error
エラーではありませんが、
{data: '<!doctype html>\n<html lang="en">\n  <head>\n    <scr….jsx?t=1739837589140">\x3C/script>\n  </body>\n</html>', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
config
: 
{transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
data
: 
"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <script type=\"module\">\nimport RefreshRuntime from \"/@react-refresh\"\nRefreshRuntime.injectIntoGlobalHook(window)\nwindow.$RefreshReg$ = () => {}\nwindow.$RefreshSig$ = () => (type) => type\nwindow.__vite_plugin_react_preamble_installed__ = true\n</script>\n\n    <script type=\"module\" src=\"/@vite/client\"></script>\n\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n    <link rel=\"stylesheet\" href=\"/src/styles.css\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite + React</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/src/main.jsx?t=1739837589140\"></script>\n  </body>\n</html>"
headers
: 
AxiosHeaders {cache-control: 'no-cache', content-length: '742', content-type: 'text/html', date: 'Tue, 18 Feb 2025 00:13:12 GMT', etag: 'W/"2e6-sFtc7NHEO0UE8RiyMUChkYL2xjU"', …}
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
: 
200
statusText
: 
"OK"
[[Prototype]]
: 
Object
```

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

```posts.js
router.get("/timeline/:userId", async (req, res) => {

      conso.log("API到達テスト")

      try {

        // 自分の投稿

        const currentUser = await User.findById(req.params.userId);

        const userPosts = await Post.find({ userId: currentUser._id });

        // フォロー中の投稿

        const friendPosts = await Promise.all(

          currentUser.followings.map((friendId) => {

            return Post.find({ userId: friendId })

          })

        );

        // return res.status(200).json(userPosts.concat(...friendPosts));

        return res.send("API成功テスト")

      } catch (err) {

        // return res.status(500).json(err);

        return res.send("API失敗テスト")

      }

    });

→このファイルで記述しているconsoleは何も表示されていませんので、そもそもこのapiまで到達できていないと思っています。
```

```server.js
const PORT = 5001;

mongoose.connect(process.env.MONGOURL).then(()=> {
  console.log("接続完了")
}).catch((err)=> {
  console.log(err)
});
app.use(express.json());
app.use("/api/posts", postsRoute)
app.get('/', (req, res) => {
  res.send("hello express");
});
app.listen(PORT, () => {
  console.log("listenテスト")
})

→コマンドラインにconsole内容("接続完了"/"listenテスト")が表示されますので問題なく接続はできていると思います。
```

```package.json(フロントエンド)
"proxy": "http://localhost:5001/api"

→5000は使用済みでしたので、5001を指定、server.jsでのPORTも5001にしているので、問題ないかと思います。
```

```TimeLine.jsx
const TimeLine = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
    const response = await axios.get("/posts/timeline/67a6a4066276f88fa966ca65")
    console.log(response);
    setPosts(response.data)
    };
    fetchPosts();
  },[]);
  return (
    <div className="timeline">
      <div className="timelineWrapper">
        <Share />
      </div>
    </div>
  )
}

→userのidとパス指定も上記までのproxyやミドルウェアのルートを踏まえて間違い無いように思えます。
```

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

##### 上記の詳細・結果
解決できませんでした

### 補足
特になし

MERNスタックの実装でリクエストするとhtmlが返ってきてしまいます

### 実現したいこと
displayNameプロパティで指定したコンポーネントを呼び出したいです。


### 発生している問題・分からないこと
現在、動的インポートとdisplayNameについて学習中です。

以下、天気情報を取得する処理になります。
正常に取得できた場合はComponentを処理、失敗した場合はErrorBoundaryを処理するようにしています。

routesBasic.js内で成功した場合は、element属性値にWeatherLazyPageを指定し、
失敗した場合はerrorElement属性値にWeatherLazyErrorPageを指定します。
しかし、静的インポートに記述していないのでエラーになります。

この場合、本来の関数名（Component, ErrorBoundary) をインポートして属性値に指定するべきなのでしょうか？
displayNameプロパティは、あくまで【デバッグ時に表示される名前を決める】くらいの位置づけで問題ないのでしょうか？

ご存知の方、ご教示頂きたく思います。
宜しくお願いします。




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

```routesBasic.js
// import一部省略
import { Component, ErrorBoundary } from "./WeatherLazyPage"

export const routes = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RouterApp />} errorElement={<CommonErrorPage />} >
　　<Route path="weather2/:city" element={WeatherLazyPage} errorElement={WeatherLazyErrorPage} lazy={() => import("./WeatherLazyPage")} />
　</Route>
  )
);

export default routes;
```

```WeatherLazyPage.js
import { useLoaderData, useRouteError } from "react-router-dom";

// 処理を遅延
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

// 外部APIにアクセスする関数
export async function fetchWeather({params}) {
  // 意図的に処理を遅延
  await sleep(3000);

  // 天気情報の取得
  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${params.city}&appid=〇〇`);

  // 非同期処理が成功した場合
  if(res.ok) {
    return res;
  }
}

// 正常に情報が取得出来た場合のビュー
export function Component() {
  // 情報取得
  const data = useLoaderData();

  return (
    <figure>
      <img src={`https://openweathermap.org/img/wn/${data?.weather?.[0]?.icon}.png`} alt={data?.weather?.[0]?.main} />
      <figcaption>{data?.weather?.[0]?.description}</figcaption>
    </figure>
  )
}

// コンポーネント名
Component.displayName = "WeatherLazyPage";


// 情報取得に失敗した場合
export function ErrorBoundary() {
  // エラー情報を取得
  const err = useRouteError();

  return (
    <div>
      <h3>問題が発生しました。</h3>
      <p>詳細な問題：{err.message}</p>
    </div>
  )
}
ErrorBoundary.displayName = "WeatherLazyErrorPage";
```

```RouterApp.js
export default function RouterApp() {

　return (
    　<>
　　　<li><Link to="/weather2/Tokyo">東京都の天気情報</Link></li>
　　　<hr />
         <Outlet />
       <>
  )
}
```

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

##### 上記の詳細・結果
静的インポートする際は本来の関数名で指定して、as句を付与してdisplayNameプロパティ値を指定した
→うまくいかなかった

### 補足
特になし

【React】displayNameで指定したコンポーネントの呼び出し方

正格評価を行うほとんどの命令型プログラミング言語において、関数等における引数の渡し方(呼び方)は三種類に分けられます(他にもあるのですが、言語が限られてマイナーですので除外します)。第一の渡し方は「値渡し(pass by value)」、第二の渡し方は「参照渡し(pass by reference)」ですが、最後の第三の渡し方についての名称が今回の質問です。

第三の渡し方は、Javaの参照型、C#の参照型、ECMAScript(JavaScript)のオブジェクト型、Python、Ruby等の現代的なオブジェクト指向でオブジェクトを扱う場合に多く用いられています。オブジェクトそのものコピーして渡すのではなく、オブジェクトを共有できる形で渡す方法です。しかし、この方法について、多くの記事やサイトで__参照渡し__の名称が使われ、多くの誤解を産んでいると思われます。この間違った名称の付け方は、この渡し方に対する名称が統一されず、うまく浸透していないのが原因では無いかと思います。

ここまで読んで、第三の渡し方の名称は「○○渡しの事だ」とぱっとわかる方がどれだけいるのでしょうか？こんなのわかって当たり前と思えないほど、無理解が広まっているのでは無いかと思っている次第です。

と言うことで、第三の渡し方の名称について、統一し、啓蒙しようと思うのです。しかし、何に統一すれば良いのかを迷っているため、皆様の意見を聞きたいのがこの質問です。下記に名称の候補あげますが、これ以外でもかまいません。どの名称が良いのか、なぜ、それが良いのかの説明も添えてお答えください。

* 共有渡し(pass by sharing)
    共有とは何を示すのかもわかるようにお願いします。
* オブジェクト渡し(pass by object)
    オブジェクトとは何を示すのかもわかるようにお願いします。
* 共有オブジェクト渡し(pass by object-sharing)
    上二つ合わせた形で冗長ですが、なぜ冗長な表現にすべきも併せて説明ください。
* 参照の値渡し
    対訳となる英語なし。Java等における実装を示す名称と思われますが、Rubyの即値のように実装上は値渡しになる場合は、どう解釈すべきかも併せて説明ください。
* 参照渡し(pass by reference)
    C#のref付きの第二と参照型の第三の両方の渡し方もある言語では、どのように区別するのかを併せて説明ください。
* アドレス渡し(pass by address)
    C#のポインタ(アドレス)に対する第一と参照型の第三の両方の渡し方もある言語では、どのように区別するのかを併せて説明ください。
* ポインタ渡し(pass by pointer)
    C#のポインタ(アドレス)に対する第一と参照型の第三の両方の渡し方もある言語では、どのように区別するのかを併せて説明ください。
* 値渡し(pass by value)
    値渡しの一種なのだから、そもそも区別しないという。Cなどといった通常の値渡しとの違いはどう考えるべきかを併せて説明ください。
* __名称無し__
    評価戦略についてそれぞれ名前をつけてカテゴライズすること自体が間違っているということ。なぜ、そういったカテゴライズすること自体が間違っているのかを説明ください。
* __コードで説明__
    コードで第一で、とにかくコードで説明してしまうと言うこと。詳しくはthink49さんの回答を参照してください。
* 共有呼び、すなわち参照の値呼び
    必ず二つの名称を続けて言うこと。また、「○○渡し」でなく「○○呼び」になります。詳しくはxebmeさんの回答を参照して下さい。

また「○○渡し」より「○○呼び」の方が良いという意見があれば、併せて記述いただければと思います。

---

問題解決と言うより、意見募集のような形になって申し訳ないですが、一人で悩んでも、納得できる決定ができませんので質問しました。ただ、こういう質問も許されるのが、某スタック・オーバーフローには無いteratailの緩くて良いところだと思っています。

---
【追記(2019-04-23)】

長い間(一年以上)、他に回答が来なかったのでベストアンサーを選んでしまっていますが、回答していただいても構いません。Qiita界隈では「参照の値渡し」というべきでは無いと考える方がおられるようですので、そのような方の回答をお待ちしております。

---

参考資料

* [Evaluation strategy - Wikipedia](https://en.wikipedia.org/wiki/Evaluation_strategy)
  記事では"call by sharing"として紹介されています。日本語版Wikipediaの[評価戦略](https://ja.wikipedia.org/wiki/%E8%A9%95%E4%BE%A1%E6%88%A6%E7%95%A5)の項目では、この質問でのベストアンサーを基に「参照の値渡し」として**私が編集しました**ので、参考にしないでください。
* [Rubyist Magazine - 値渡しと参照渡しの違いを理解する](http://magazine.rubyist.net/?0032-CallByValueAndCallByReference)
  記事では「参照の値渡し」として紹介されています。

オブジェクトを共有できる形で渡す(呼ぶ)評価戦略の名称

### 実現したいこと

GASを使用して出張申請フォームを作成。

### 前提

Slackへの通知とスプレッドシートへの転記、Googleカレンダーへの自動連携でスケジュールを立てる。
を同時に実施したい。

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

作成者は申請ができるがそのほかのアカウントでは申請ができず。
submitApplicationだけができない。

```
ReferenceError: google is not defined
    at [unknown function](コード:59:1)
```

### 該当のソースコード
[JS]
```
// 
function doGet() {
  return HtmlService.createTemplateFromFile("form").evaluate();
}


function getExecuteUser() {
  var sessEmail = Session.getActiveUser().getEmail();
  return sessEmail.split('@')[0];
}

function submitApplication(data) {
  // data の内容をログに出力する
  Logger.log("submitApplication に渡された data: " + JSON.stringify(data));

  var user = getExecuteUser();
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName(user);
  if (!sheet) {
    // シートがなければ新規作成し、ヘッダー行を追加
    sheet = ss.insertSheet(user);
    sheet.appendRow(["申請日", "所属", "氏名", "出張区分", "出発日", "帰着日", "交通手段", "出張内容", "備考"]);
  }
  
  // 申請内容をスプレッドシートに記録
  sheet.appendRow([
    new Date(),              // 申請日
    data.department || "",
    data.name || "",
    data.tripType || "",
    data.when_st || "",
    data.when_ed || "",
    data.transport || "",
    data.details || "",
    data.remarks || ""
  ]);
  
  // 
  var startDate = new Date(data.when_st);
  var endDate = new Date(data.when_ed);
  endDate.setDate(endDate.getDate() + 1);
  
  var eventTitle = "出張" + (data.remarks ? " " + data.remarks : "");
  var cal = CalendarApp.getCalendarById("primary");
  cal.createAllDayEvent(eventTitle, startDate, endDate);
  
  // Slackへの通知
  const SLACK_WEBHOOK_URL = "https://hooks.slack.com/services/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";
  var payload = {
    "text": "【出張申請通知】\n<@U019ADRRNBT> さんへ\n申請者：" + data.name + "\n所属：" + data.department + "\n出張期間：" + data.when_st + " ～ " + data.when_ed + "\n出張区分：" + data.tripType
  };
  var options = {
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload)
  };
  UrlFetchApp.fetch(SLACK_WEBHOOK_URL, options);
}
```
[HTML]

```
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container mt-4">
      <div class="jumbotron">
        <h1 class="display-4">出張申請フォーム</h1>
        <p class="lead">必要事項を入力して申請してください。</p>
      </div>
      <form id="appForm">
        <div class="form-group">
          <label>申請者: <?= getExecuteUser() ?></label>
        </div>
        <div class="form-group">
          <label for="department">所属</label>
          <input type="text" class="form-control" id="department" placeholder="例：営業1 課">
        </div>
        <div class="form-group">
          <label for="name">氏名</label>
          <input type="text" class="form-control" id="name" placeholder="例：小澤航汰">
        </div>
        <div class="form-group">
          <label>出張区分</label><br>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tripType" id="dayTrip" value="日帰り">
            <label class="form-check-label" for="dayTrip">日帰り</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="tripType" id="overnight" value="宿泊">
            <label class="form-check-label" for="overnight">宿泊</label>
          </div>
        </div>
        <div class="form-group">
          <label for="when_st">出発日</label>
          <input type="date" class="form-control" id="when_st">
        </div>
        <div class="form-group">
          <label for="when_ed">帰着日</label>
          <input type="date" class="form-control" id="when_ed">
        </div>
        <div class="form-group">
          <label for="transport">交通手段</label>
          <select class="form-control" id="transport">
            <option value="自家用車">自家用車</option>
            <option value="社用車">社用車</option>
            <option value="レンタカー">レンタカー</option>
            <option value="公共交通機関">公共交通機関</option>
            <option value="その他">その他</option>
          </select>
        </div>
        <div class="form-group">
          <label for="details">出張内容</label>
          <textarea class="form-control" id="details" rows="4" placeholder="例：出張先での打ち合わせ"></textarea>
        </div>
        <div class="form-group">
          <label for="remarks">備考</label>
          <input type="text" class="form-control" id="remarks" placeholder="例：出張に関する補足情報">
        </div>
        <button type="button" class="btn btn-primary" onclick="submitApplicationForm()">申請する</button>
      </form>
    </div>
   <script>
      function submitApplicationForm() {
        var data = {
          department: document.getElementById("department").value,
          name: document.getElementById("name").value,
          tripType: document.querySelector('input[name="tripType"]:checked') ? document.querySelector('input[name="tripType"]:checked').value : "",
          when_st: document.getElementById("when_st").value,
          when_ed: document.getElementById("when_ed").value,
          transport: document.getElementById("transport").value,
          details: document.getElementById("details").value,
          remarks: document.getElementById("remarks").value
        };
        google.script.run.withSuccessHandler(function(){
          alert("出張申請が完了しました。");
          document.getElementById("appForm").reset();
        }).submitApplication(data);
      }
    </script>
    
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>
```


### 試したこと

キャッシュの削除をしてから再度ログインを行うなどした上で回答したりはしました。

アカウントが作成者ではないとエラーが出る。ReferenceError: google is not defined at [unknown function]


★下記は配列の練習問題の回答です。
バケツソートのアルゴリズムを再現してみよう　という趣旨のものでした。

const nums = [78, 16, 32, 4, 91, 45, 23, 66, 57, 89];
const buckets  = []; // バケツとなる配列
const sorted = []; // 昇順でデータを入れる配列
for (let num of nums) {
  // バケツに追加する処理
  buckets[num] = num;
}
for (let i = 0; i < 100; i++) {
  // バケツから順番に取り出す処理
  if (buckets[i]) {
    sorted.push(buckets[i]);
  }
}
console.log(sorted);

これは何故一度 bucket　に numを移行しているのですか？

const nums = [78, 16, 32, 4, 91, 45, 23, 66, 57, 89];
const sorted  = [];
for (let i = 0; i < 100; i++) {
  // バケツから順番に取り出す処理
  if (nums[i]) {
    sorted.push(nums[i])
  }
}
console.log(sorted);
// [4, 16, 23, 32, 45, 57, 66, 78, 89, 91] と出力

じゃダメなのは何故ですか？
numsの中の数字が　i　と一致したときに sortedに数字を入れる。だけですよね。何故一度bucketsにいれなくてはならないのかが分からないです。
sorted.push(nums[i])だとnumsの中の数字ではなくてインデックスをとることになるからということでしょうか。
だとすれば、buckets[i]だとインデックスにならないのは何故ですか。
もしかしてbucketsにいれるときに for of文を使用しているのはそこでインデックスではなく数値を取得しているためで、そのためにbucketsを使用しているということなのでしょうか。

もし上記であっているとしても、使い分けが難しいと感じます。自分で一から考えたいなーって思ったら、まず主要なアルゴリズムを学び、そのアルゴリズムを実装するにはどうしたら良いかを学ぶのが一番はやいのでしょうか。慣れたらどこでどのアルゴリズムを使用するか感覚でわかるようになりますか。

javascriptの配列　バケツソートについて質問

セレクタとクラス名の使い方の違いについて教えてください
下記２種の指定方法があると思いますが、どのような違いがありますか？
```.クラス名 セレクタ {プロパティ: 値;}```
```セレクタ.クラス名 {プロパティ: 値;} ```
何卒宜しくお願い致します。


セレクタとクラス名の使い方の違いについて教えてください

初質問失礼します
現在ウェブデザイナーを目指してポートフォリオを作成しております
dreamweaverの検証時には正常に表示できていたものがFTP後の実際のサイトを見ると正常に反映されて　　いない状況になっております。
dreamweaverでエラーになっていないので何が問題なのかわからず詰まっております
お見苦しいコードかと思いますがご教授いただければ幸いです。
よろしくお願いいたします。

・詳細
レスポンシブ対応で768pxまではハンバーガーメニューが表示され、通常のメニューは隠れるようにしていしました
dreamweaverの検証では正常にできていますがFTP PUTをして、Googleで検証をすると768以下でも通常のメニュー（ハンバーガーメニューでないほう）がでています
実機を持っていないので実機では確認できておりません…

```
<style>
		.AAA {
			position: relative;
			right: -115rem;
			line-height: 0.6;
			bottom: -1rem;
		}
		
		/* デフォルト設定：PCサイズのとき */
.outer-menu {
    display: none; /* デフォルトでは非表示 */
}

#nav-pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* PCサイズでは表示 */
}
		/* PC以外用メディアクエリー */
@media screen and (max-width: 768px) {
    #nav-pc{
        display: none; /* スマホでは非表示 */
    }
    .outer-menu {
        display: block; /* スマホで表示 */
    }
}
	</style>

<header id="header">
	<h1 class="id img"><a href="index.html">●● portfolio</a></h1>

	<nav id="nav-pc">
		<div style="display: flex;justify-content: space-between;">
				<div id="globalnav">
					<ul class="clearfix">
						<li>
							<a href="index.html">Home</a>
						</li>
						<li>
							<a href="aboutme.html">About me</a>
						</li>
						<li>
							<a href="works.html">Works</a>
						</li>
					    <li>
							<a href="contact.html">Contact</a>
						</li>
					</ul>
				
			</div>
				<div class="AAA">

						
						<p>
							<a href="info1.html" class="BBB"><span style="font-size: 0.8rem; letter-spacing: 0.3rem;">▶︎▶︎▶︎</span>Landing Page</a>
						</p>
						 <p>
							<a href="info2.html" class="BBB"><span style="font-size: 0.8rem; letter-spacing: 0.3rem;">▶︎▶︎▶︎</span>Banner</a>
						</p>
					</div>
			</div>
			</nav>

	

<div class="outer-menu">
  <input type="checkbox" id="menu-toggle" class="checkbox-toggle" />
  <label for="menu-toggle" class="hamburger">
    <div></div>
  </label>
  <div class="menu">
    <div>
      <div>
        <ul>
          <li>
							<a href="index.html">Home</a>
						</li>
						<li>
							<a href="aboutme.html">About me</a>
						</li>
						<li>
							<a href="works.html">Works</a>
						</li>
					    <li>
							<a href="contact.html">Contact</a>
						</li>
			 <li>
						<a href="info1.html">Landing Page</a>
						</li>
			 <li>
							<a href="info2.html">Banner</a>
						</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="fixed">
<canvas id="particle" width="972" height="1363"></canvas>
<canvas id="waveCanvas" width="572" height="200"></canvas>
</div>
</header>
コード
```