常連

注目の的

### 実現したいこと
よろしくお願いします。

Let's EncryptのSSL証明書発行ができず解決法を探しております。

さくらサーバのVPSを借りています。
OS:CentOS Stream 8

現在、私が構築していたサイトはSSL証明書の期限が切れており
https://abc.xyz.jp にアクセスすると「この接続ではプライバシーが保護されません」と出ている状態です。

コマンドを試し、エラーが出た結果は以下となっています。（一画面で見やすいように■■改行■■というところで改行を編集しています）
```ここに言語名を入力
[root@abc123 html]# certbot certonly --webroot -w /var/www/html -d abc.xyz.jp
Saving debug log to /var/log/letsencrypt/letsencrypt.log
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
An RSA certificate named abc.xyz.jp already exists. Do you want to update
its key type to ECDSA?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(U)pdate key type/(K)eep existing key type: K
Renewing an existing certificate for abc.xyz.jp
 
Certbot failed to authenticate some domains (authenticator: webroot). The Certificate ■■改行■■
Authority reported these problems:
  Domain: abc.xyz.jp
  Type:   unauthorized
  Detail: The key authorization file from the server did not match this challenge ■■改行■■
"ABcdEFgHIjKlmnABcdEFgHIjKlmn-ABcdEFgHIjKlmn_ABcdEFgHIjKlmn.ABcd1EF ■■改行■■
2gH3Ij4Klmn_ABCDEF" != "<h1>Test</h1>"
 
Hint: The Certificate Authority failed to download the temporary challenge files  ■■改行■■
created by Certbot. Ensure that the listed domains serve their content from the  ■■改行■■
provided --webroot-path/-w and that files created there can be downloaded from  ■■改行■■
the internet.
 
Some challenges have failed.
Ask for help or search for solutions at https://community.letsencrypt.org.  ■■改行■■
See the logfile /var/log/letsencrypt/letsencrypt.log or re-run  ■■改行■■
Certbot with -v for more details.
```
この
```ここに言語名を入力
"ABcdEFgHIjKlmnABcdEFgHIjKlmn-ABcdEFgHIjKlmn_ABcdEFgHIjKlmn.ABcd1EF ■■改行■■
2gH3Ij4Klmn_ABCDEF" != "<h1>Test</h1>"
```
の照合しようとしている部分が、間違ってHTMLになってしまっているのが原因かなと思っています。
後述の「集めた情報」にもある、
```ここに言語名を入力
[root@abc123 ~]# vi /etc/httpd/conf.d/vhost.conf

■■vhost.confの中身 ここから■■
<VirtualHost *:80>
DocumentRoot /var/www/html
ServerName abc.xyz.jp
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URL} [R=301,L]
</VirtualHost>
■■vhost.confの中身 ここまで■■
```
に、ポート80のアクセスは、httpsでアクセスを行うようにする記述が原因かなと思っています。
.
.
サーバを構築して初めてSSL証明書を発行したときにはエラーが出ず、
　https://abc.xyz.jp
へのアクセスは正しく表示されていました。
（Windows10のChromeで確認）
（AndroidのChromeから確認）
（iPhoneのSafariから確認）
SSL証明書は定期的に自動更新するように設定していたけど、素人技術で一度も成功しておらず今回も自動更新せず、証明書の有効期限が切れてから今回、手動での更新に至っています。そして上記の様なトラブルが発生中です。

調べる過程で必要と思われる情報について、以下のような情報を集めています。
### 集めた情報
```ここに言語名を入力
[root@abc123 ~]# cd /etc/httpd/conf.d/
[root@abc123 conf.d]# ls
README          php.conf  userdir.conf  welcome.conf
autoindex.conf  ssl.conf  vhost.conf
[root@abc123 conf.d]# vi vhost.conf

■■vhost.confの中身 ここから■■
<VirtualHost *:80>
DocumentRoot /var/www/html
ServerName abc.xyz.jp
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URL} [R=301,L]
</VirtualHost>
■■vhost.confの中身 ここまで■■
```
```ここに言語名を入力
[root@abc123 conf.d]# cd /etc/nginx
[root@abc123 nginx]# ls
conf.d  default.d
[root@abc123 nginx]# cd default.d
[root@abc123 default.d]# ls
php.conf
[root@abc123 default.d]# vi php.conf
■■php.confの中身 ここから■■
# pass the PHP scripts to FastCGI server
#
# See conf.d/php-fpm.conf for socket configuration
#
index index.php index.html index.htm;
 
location ~ \.(php|phar)(/.*)?$ {
    fastcgi_split_path_info ^(.+\.(?:php|phar))(/.*)$;
 
    fastcgi_intercept_errors on;
    fastcgi_index  index.php;
    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    fastcgi_param  PATH_INFO $fastcgi_path_info;
    fastcgi_pass   php-fpm;
}
■■php.confの中身 ここまで■■


[root@abc123 default.d]# cd ../
[root@abc123 nginx]# ls
conf.d  default.d
[root@abc123 nginx]# cd conf.d
[root@abc123 conf.d]# ls
php-fpm.conf
■■php-fpm.confの中身 ここから■■
# PHP-FPM FastCGI server
# network or unix domain socket configuration
 
upstream php-fpm {
        server unix:/run/php-fpm/www.sock;
}
■■php-fpm.confの中身 ここまで■■
```
```ここに言語名を入力
[root@abc123 conf.d]# firewall-cmd --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: ens3
  sources:
  services: cockpit dhcpv6-client ftp http https ssh
  ports: 52863/tcp 49162/tcp 5432/tcp
  protocols:
  forward: no
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:
```
```ここに言語名を入力
[root@abc123 conf.d]# cd /etc/letsencrypt/renewal/
[root@abc123 renewal]# ls
abx.xyz.jp.conf
[root@abc123 renewal]# vi abx.xyz.jp.conf

■■abx.xyz.jp.confの中身 ここから■■
# renew_before_expiry = 30 days
version = 1.32.0
archive_dir = /etc/letsencrypt/archive/abx.xyz.jp
cert = /etc/letsencrypt/live/abx.xyz.jp/cert.pem
privkey = /etc/letsencrypt/live/abx.xyz.jp/privkey.pem
chain = /etc/letsencrypt/live/abx.xyz.jp/chain.pem
fullchain = /etc/letsencrypt/live/abx.xyz.jp/fullchain.pem
 
# Options used in the renewal process
[renewalparams]
account = 1a234b567c8d901e2f3ab45c6de78901
authenticator = webroot
webroot_path = /var/www/html,
server = https://acme-v02.api.letsencrypt.org/directory
key_type = rsa
[[webroot_map]]
abx.xyz.jp = /var/www/html
~
■■abx.xyz.jp.confの中身 ここまで■■
```


もし、必要な情報が抜け落ちていましたら、申し訳ありません、すぐに提示したいと思います。
どのような情報でも嬉しいです。ご指導をお願いします。
よろしくお願いします。

Let's Encrypt のSSL証明書が更新できず解決したい

### 実現したいこと
Googleスプレッドシートで、
特定の列に特定の文字列が入力されていたらトリガーでメール通知したい。
（特定のセルに文字入力ではないです）

### 前提
右のURL（https://teratail.com/questions/cbm7rb5o15ar9r ）を参考に組みました。
※追記：アクティブについて知識が無かったため、おかしなスクリプトになっています※

「スプレッドシート上での表示が"残り●営業日"になったらメール通知」を行いたいため、
="残り"&NETWORKDAYS($H$1,G2)&"営業日"
でH1（TODAY）とF2（予定日）を引っ張って「残り●営業日」と表示されるようにしています。
（実際には祝日も計算に入れたかったため、隣のシートから2年分の祝日も引っ張ってきています。）

### 発生している問題・エラーメッセージ
エラーは起こらず、デバックでもエラーが見つけられず、実行されたことになります。
ですが実行を行った場合でもメールが来ません。
毎日朝7時～8時に設定したトリガーもエラーなく実行履歴がありますが動きません。

### 該当のソースコード（修正版）

```GoogleAppSscript
function NotificationMail(){

const recipient = 'めるあど'; //通知を飛ばす先のgメールアドレス
const subject = '3営業日前です';//通知タイトル
const body = + '※本メールは●●のリマインド通知です※\n';
const options = { name: '通知' };
const ss= SpreadsheetApp.openById('シートのIDを入力');// 現在のSpreadSheetを取得
const mySheet = ss.getSheetByName('シート名を入力'); // シート(SpreadSheetの下のタブ名を指定)

SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート名を入力").activate();
var myCell = mySheet.getRange("I:I"); //
if(myCell.getValue()=='残り3営業日'){ //B列に入力があったか判定

GmailApp.sendEmail(recipient, subject, body, options);//通知メールを送信
}
}
```

### 試したこと
まず数式を読み取れていないのではないかと疑い、
特定文字列を直接入力したところ通知メールが来たり来なかったりするなど再現性があやふやでした。
あやふやなのはメール送信数の制限に引っかかったとのではないかと、
残数を確認できるLogerを実行しましたが1500と余裕がありました。

数式を読み取るため、参考URLではgetValueでしたが、
シートに表示されている文字列で読み込んでもらおうと
getDisplayValueに変更しましたがダメでした。

getDisplayValueでも余計な装飾があるのが原因かと、
=NETWORKDAYS($H$1,F2)
と数式を削って「3」を条件に変更しても同じでした。
数式を組んだ場合はうまくいかないものなのでしょうか。

どなたかお知恵を貸して頂ければ幸いです。

●読み取りたいスプレッドシートのイメージ図です
検索列は質問投稿時はB列（数式）でしたが、今はI列（値のみ貼り付け）を指定しています。
数式が原因ではないと問題を分けたいからです。
毎日自動的にB列をJ列に値のみ貼り付けするスクリプトを組みました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-09/db5e8bd2-ae49-4822-8b06-f2f3d5c10506.jpeg)

Googleスプレッドシートで、特定の列に特定の文字列が入力されていたらトリガーでメール通知したい。

GASでGoogle翻訳の翻訳結果を返すスクリプトを作成してデプロイしました。
コードは以下のとおりです。
```ここに言語を入力
function doGet(e) {
  var p = e.parameter;
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);
  return ContentService.createTextOutput(translatedText);
}
```
ブラウザでデプロイ先のURLを叩けば翻訳結果が返ってくるのですが
javascriptで書いたコードでリクエストすると、
「has been blocked by CORS policy: Response to preflight request doesn't pass access control check:」
というエラーが返ってきてしまします。
javascriptのコードは以下のとおりです。
```ここに言語を入力
fetch(GASのURL,
    {
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Access-Control-Allow-Origin': '*'
        },
        
    })
    .then((res) => {
レスポンスの処理
});
```

色々調べたのですが、
・サーバー側（GAS)から返すのはオブジェクトをそのままではなく ContentService.createTextOutputで変換しなければならない
・Content-Typeにapplication/x-www-form-urlencodedを設定してリクエストする
・axiosを使用し、crossDomain: trueというオプションをつける。
などやってみましたが、どれもうまくいきません。WordPressサイトなのでサーバーサイドからPHPでcurlコマンドを叩くという選択肢もあるのですが、できればフロントエンドで完結させたいのです。

どなたか解決策をご教示いただけないでしょうか？

JavascriptからGASのサーバースクリプトにリクエストするとblocked by CORS policyエラーが出てしまう

### 前提

現状、以下のように、画面の高さと画像の高さの比率を保ったまま、画像を表示するレスポンシブデザインになっています。

- PC表示

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-01/d99be024-2c84-47ee-905a-eb3a568dcd3a.png)

- モバイル表示

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-01/03ebc9f2-fd4b-4fc4-85b5-9385b3b98be5.png)

これを実現するために、現在は以下の実装になっています。
- imgタグのdata属性に個々の画像の高さを設定する必要がある
- javascriptでレスポンシブ対応をしている

### 実現したいこと

できれば以下の実装を改良し、レスポンシブ対応を実現したいと思っています。
どれか一つでも良いアイデアがありましたら、ご教授いただきたいです。
- imgタグに設定しているdata属性をなくしたい
- javascriptを使用せずに、cssだけにしたい
- javascriptを使用しなければならない場合、8行目の1000を適切な値にしたい

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

```html
<!DOCTYPE html>
<html>
    <head>
        <meta>
        <script src="script.js"></script>
        <link rel="stylesheet" media="all" href="style.css" data-turbolinks-track="reload">
    </head>
    <body>
        <div class="container">
            <img class="test" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/100x150.png" data-height="150" alt="image" >
            <img class="test" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/100x200.png" data-height="200" alt="image" >
            <img class="test" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/150x300.png" data-height="300" alt="image" >
        </div>
    </body>
</html>
```

```css
.container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: scroll;
   align-items: flex-end;
 }
 
 img {
   width: auto;
   object-fit: contain;
 }

```

```javascript
window.onresize = function() {
    var windowHeight = window.innerHeight;
    var elements = document.getElementsByClassName("test");
    
    console.log(windowHeight);
    for(var i = 0; i < elements.length; i++){
        // 暫定でとりあえず1000にしているが、ここも改善したい
        var rate = windowHeight / 1000;
        elements[i].style.height = elements[i].dataset.height * rate + "px";
    }
}
```

### 試したこと

cssにおいて、imgに対し`height: 100vh;`を設定すると、画面高さいっぱいに各画像が表示されてしまいます


画面の高さと画像の高さの比率を保ったまま画像を表示するレスポンシブデザインの実装を改良したい

### 前提
SpreadShhetのwebアプリを利用して、QRコードを読み込むPOSシステムのようなものを考えています。
ここでは、読み取り後の購入情報等をgas側に送信しSpreadSheetへ書き込みを行うと同時にhtml側に領収書ページを表示させたいと考えています。
doPost関数へ値を渡し、SpreadSheetへの書き込み。htmlServiceにてファイルを作成するところまではできていると思います。

ですが、html側のfetchにて返信されたデータを確認するとobjectは受け取れるのですが、html側でページの遷移を起こすことができず、どのように実装してよいか悩んでおります。
### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- [ ] html側から商品情報等をgasのdopost等へ送り、SpreadSheetにlogを残したい。
- [ ] gas側で作成してある"領収書"htmlファイルに値をセットし、jsへ送り返したい。
- [ ] doPostで返信されたhtmlをjs側で受け取り、ページ遷移をしたい。

### 発生している問題・エラーメッセージ
doPostでhtmlService.createHtmlOutputFromFile("result");を返却して、jsで確認すると以下のオブジェクトが確認できるが、doGetのようにページが表示されることはない。
```
Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}
```

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

```gas
doPost(e){
  const json_data = JSON.parse(e.postData.getDataAsString());
  const result = HtmlService.createHtmlOutpustFromFile("result");
  result.data = "付随したいデータ";
  
  return result.evaluate();
}

function get_url(){
  // gasのURL取得関数(jsで呼び出す)
  return ScriptApp.getService().getUrl();
}
```
```js(index.html)
function send_data() {
  google.script.run.withSuccessHandler(e => {
    const URL = e;
     const postparam = {
      "method"     : "POST",
      "mode"       : "no-cors",
      "Content-Type" : "application/x-www-form-urlencoded",
      "body" : JSON.stringify(item_dict)
    };

    const res = fetch(URL, postparam).then(response => response).then(data => {
      // 読み取るタイミングやfetchの使い方が曖昧なため、これで合っているかすら疑問
      // オブジェクトは取得できているが処理の方法を理解できていない、、？
      console.log(data);
    });
  }).get_url();
}
```

### 試したこと

doGetでresult.htmlを返却する事は考えたのですが、購入商品情報等のjsonを渡す方法をどう繋げればいよのか、また余計な考えかもしれませんがスマートに処理ができるのでは、、と考えdoPostでの画面遷移の方法を模索しています。

質問の中で、至らない所などあるとは思いますが
どうぞご教授のほどよろしくお願いいたします。

### 補足情報（FW/ツールのバージョンなど）

html, gas, google chromeなどは最新だと思います

```元コード
// 以下gas -----------------------------------------------------------------------
function doGet(e) {
  // 最初に商品読み取り用のページを表示させる。(ここは表示できる)
  return HtmlService.createHtmlOutputFromFile("index");
}

function doPost(e) {
  // 各種データの取得
  const json_data = JSON.parse(e.postData.getDataAsString());
  const sheet_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

  // 管理表で商品の売上数を計上
  const sheet_name1 = "管理表";
  // logに現在時刻とindexから返却された商品購入情報のjsonを記録
  const sheet_name2 = "log";
  // 領収書情報に記載されている情報(会社名や電話番号等)を取得
  const sheet_name3 = "領収証情報";
  const sheet1 = SpreadsheetApp.openById(sheet_id).getSheetByName(sheet_name1);
  const sheet2 = SpreadsheetApp.openById(sheet_id).getSheetByName(sheet_name2);
  const sheet3 = SpreadsheetApp.openById(sheet_id).getSheetByName(sheet_name3);
  const r_last1 = sheet1.getLastRow() + 1;
  const r_last2 = sheet2.getLastRow() + 1;
  const range_all1 = sheet1.getRange(1, 1, r_last1, 9);
  const range_all2 = sheet2.getRange(1, 1, r_last2, 2);
  const data_all1 = range_all1.getValues();
  const data_all2 = range_all2.getValues();
  const data_id = data_all1.map(elm => elm[0]);
  // 購入商品の合計金額
  let amount = 0;
  // 商品の税率情報より求める内税額
  let tax = 0;

  // 商品情報json処理
  Object.keys(json_data).forEach(key => {
    const keyword = key.split(",")[0];
    const r_hit1 = data_id.indexOf(keyword);
    const num = data_all1[r_hit1][5];
    range_all1.offset(r_hit1, 5, 1, 1).setValue(num + json_data[key]);

    amount += key.split(",")[4] * json_data[key];
    tax += key.split(",")[5] * json_data[key];
  });

  // シートへ書き込み
  const r_hit2 = data_all2.map(elm => elm[0]).indexOf("");
  const date = Utilities.formatDate(new Date(), 'JST', "yyyy/MM/dd (E) HH:mm:ss Z");

  range_all2.offset(r_hit2,0,1,2).setValues([[date, json_data]]);

  const info = sheet3.getRange(2, 1, 1, 5).getValues().flat();

  // htmlデータ作成
  const result = HtmlService.createHtmlOutputFromFile("result");

  result.date = info[0];
  result.zip = info[1];
  result.address = info[2];
  result.corp = info[3];
  result.phone = info[4];
  result.amount = amount;
  result.tax = tax;
  result.without = amount - tax;

  // 返却するが、表示できない
  return result.evaluate;
}

function get_url(){
  // js側でrun関数で呼び出すデプロイurl取得用の関数
  return ScriptApp.getService().getUrl();
}
// 以下index.html -----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>QRコードリーダ</title>
  <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
</head>

<body>
  <div id="wrapper">
    <canvas id="canvas"></canvas>
    <ul id="results"></ul>
    <span id="confirm">確定</span>
    <p id="subtotal">0円</p>
  </div>
  <script>
    // DOM取得とQRコード用のビデオ設定
    const video = document.createElement("video");
    const canvasElement = document.getElementById("canvas");
    const canvas = canvasElement.getContext("2d");
    const results = document.getElementById("results");
    const subtotal = document.getElementById("subtotal");
    const confirm = document.getElementById("confirm");
    let item_dict = {};
    // カウンターで商品の連続読み取りを阻止
    let next_counter = 0;

    // ここでjsにデータを送る関数を設定
    confirm.addEventListener("click", send_data);

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
      video.srcObject = stream;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.play();
      requestAnimationFrame(tick);
    });

    function tick() {
      // キャンバスにビデオ画像を反映
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "dontInvert",
        });
        if (code) {
          if (Object.keys(item_dict).includes(code.data)){
            // アイテムを読み取っていたら購入個数をプラスしていく
            if(next_counter > 50){
              item_dict[code.data] += 1;
              results.children[Object.keys(item_dict).indexOf(code.data)].children[1].innerText = item_dict[code.data];
              next_counter = 0;
              change_subtotal();
            }
          } else if (code.data != "") {
            // 初めて読み込む商品(QRコード)なら画面に表示＋内部でdictに追加
            const child = document.createElement("li");
            const name = document.createElement("p");
            const num = document.createElement("p");
            const price = document.createElement("p");
            const btn_minus = document.createElement("span");
            const btn_plus = document.createElement("span");
            const btn_delete = document.createElement("span");

            btn_minus.addEventListener("click", {num: -1, data: code.data, handleEvent: change_num});
            btn_plus.addEventListener("click", {num: 1, data: code.data, handleEvent: change_num});
            btn_delete.addEventListener("click", {data: code.data, handleEvent: delete_elm});

            name.innerText = code.data.split(",")[1];
            num.innerText = 1;
            price.innerText = code.data.split(",")[4];
            btn_minus.innerText = "-";
            btn_plus.innerText = "+";
            btn_delete.innerText = "x";

            child.append(name);
            child.append(num);
            child.append(btn_minus);
            child.append(btn_plus);
            child.append(btn_delete);

            results.append(child);
            item_dict[code.data] = 1;

            next_counter = 0;
            change_subtotal();
          }
        } else {
          next_counter++;
        }
      }
      requestAnimationFrame(tick);
    }

    function change_num(e) {
      item_dict[this.data] += this.num;
      e.target.parentNode.children[1].innerText = item_dict[this.data];
      change_subtotal();
    }

    function delete_elm(e) {
      delete item_dict[this.data];
      e.target.parentNode.remove();
      change_subtotal();
    }

    function change_subtotal() {
      let sum = 0;
      Object.keys(item_dict).forEach(elm => {
        sum += item_dict[elm] * elm.split(",")[4];
      });
      subtotal.innerText = sum.toLocaleString() + "円";
    }

    function send_data() {
      // ここが一番の疑問点
      // データの送信はできていてdoPost側でも読み取れる(こちらから送信はできているため通信は可能)
      google.script.run.withSuccessHandler(e => {
        const URL = e;

        const postparam = {
          "method"     : "POST",
          "mode"       : "no-cors",
          "Content-Type" : "application/x-www-form-urlencoded",
          "body" : JSON.stringify(item_dict)
        };

        const res = fetch(URL, postparam).then(response => response).then(data => {
          // 読み取るタイミングやfetchの使い方が曖昧なため、これで合っているかすら疑問
          // オブジェクトは取得できているが処理の方法を理解できていない、、？
          console.log(data);
        });
      }).get_url();
    }
  </script>
</body>
</html>

jsとgasによるdoPostとfetch間によるhtmlファイルの受け渡しについて

### 前提

現在、スプレッドシートで簡単な商品一覧表を作っています。
内容としては、スプレッドシートにhtmlのサイドバー（簡単な商品情報登録フォーム）を表示させ、サイドバーフォームに入力した内容をスプレッドシートへ出力するというものです。

今回、その過程でスプレッドシートへの書き込みがうまく実行されません。
色々調べて試したのですが、全く実行されずお手上げ状態です。
間違いやテックニックなどをご教示頂けると幸いです。
宜しくお願いいたします。

＜追記＞
初心者ですので、載せているコードが読みにくい等あると思います。
また、ネットからコピペしてアレンジしている部分もあります。

説明が不十分なところも多々あると思いますがご容赦ください。

### 実現したいこと

サイドバーのフォームに入力した値をスプレッドシートへ出力したい。

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

```
送信ボタンを押してもGASが実行されない。
```

### 該当のソースコード（.gs）

```ここに言語名を入力
var sh =  SpreadsheetApp.openById("シートID");
var st = sh.getSheetByName("シート1");

function  menuSidebar() {
  let ui = SpreadsheetApp.getUi();
  let template = HtmlService.createTemplateFromFile('sidebar');
  let htmlOutput = template.evaluate();
  htmlOutput.setTitle('商品登録フォーム');
  ui.showSidebar(htmlOutput);
}

function doPost(e) {
  var lastrow = st.getLastRow()+1;
  st.getRange(lastrow,1).setValue(e.parameter.datetime);
  st.getRange(lastrow,2).setValue(e.parameter.user);
  st.getRange(lastrow,3).setValue(e.parameter.item_name);
  st.getRange(lastrow,4).setValue(e.parameter.quantity);
  st.getRange(lastrow,5).setValue(e.parameter.notes);

  return  menuSidebar();
}
```
### 該当のソースコード（.html）

```ここに言語名を入力
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form action="/exec" method="POST">
      <label>【登録日】</label><br><input type="datetime-local" name="datetime" placeholder="日時を選択してください" required><br><br>
      <label>【登録者】</label><br><input type="text" name="user" list="user" placeholder="その他登録者は記名" autocomplete="off" required>
              <datalist id="user">
                <? var user = SpreadsheetApp.openById("シートID").getSheetByName("User").getDataRange().getValues(); ?>
                <? for(var i = 0;i<user.length;i++){ ?>
                <option name="user"><?= user[i][0] ?></option>
                <? } ?>
              </datalist><br><br>
      <label>【商品名】</label><br><input type="text" name="item_name" placeholder="（例：〇〇" required><br><br>
      <label>【数　量】</label><br><input type="text" name="quantity" placeholder="（例：１※数字のみ" required><br><br>
      <label>【備　考】</label><br><textarea name="notes"></textarea><br><br>
      <input type="submit" value="送信">
      </form>
  </body>
</html>
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-22/4a971e19-e40c-4421-aac5-df6f8291e59a.png)

### 試したこと

GAS側でsidebar.js.htmlを作りgoogle.script.runを実行。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-22/53ace8f3-c99c-44b4-9fa1-d725f194f3cb.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-22/5114db3c-961d-4d7f-b1d1-34a32840fa16.png)

### 補足情報（FW/ツールのバージョンなど）



Gasで作ったhtmlサイドバーのフォームに入力した値をスプレッドシートへ出力できません。

### 前提

ここに質問の内容を詳しく書いてください。
（例）htmlとcssを練習中です。
ブラウザ幅を狭めていきスマホの幅に切り替わる途中での画面の配置がそれぞれがばらばらに動いてしまいます。


### 実現したいこと
幅を狭めてもそれぞれのテキスト、画像の位置は変わらずにスマホの画面に移行させたい。


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

```
エラーメッセージ
```

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

 
    <div class="think__wrapper">
      <div class="think__box">
        <div class="think__leftbox">
          <h2 class="think__text">
            ホワイトニングには興味あるけど…
          </h2>
          <div class="think__question 1">
            歯医者のホワイトニングってどんなの？
          </div>
          <div class="think__question 2">
            痛いって聞いたことがあるけど？
          </div>
          <div class="think__question 3">
            歯を削ったり傷つけたりしないの？
          </div>
          <div class="think__message">
            <span>こんな方はキラメキホワイトニングにお任せください</span>
          </div>
        </div>

        <div class="think__rightbox">
          <img class="think__image" src="images/thinking_w.png" alt="女性">
        </div>
      </div>

.think {
  background: repeating-linear-gradient(45deg, #fff, #fff 15px, #f5f5f5 0, #f5f5f5 30px);
}
.think__wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 64px;
  padding-bottom: 74px;
}
.think__box {
  position: relative;
}
.think__leftbox {
  margin-left: 102px;
  position: relative;
}
.think__text {
  font-size: 31px;
  color: #454545;
  position: relative;
}
.think__question {
  background-color: #ffffff;
  box-sizing: border-box;
  border: 7px solid #707070;
  border-radius: 50px;
  width: 769px;
  height: 108px;
  text-align: center;
  padding-top: 26px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3333333333;
  margin-top: 44px;
  margin-bottom: -18px;
  position: relative;
}
.think__message {
  text-shadow: 3px 0 #fff;
  font-size: 37px;
  font-weight: 900;
  line-height: 1.0810810811;
  margin-top: 56px;
  white-space: nowrap;
  position: relative;
  z-index: 10;
}
.think__message span {
  background: linear-gradient(transparent 75%, #f940bc 0%);
}
.think__image {
  position: absolute;
  bottom: 0;
  right: -127px;
  top: 47px;
  width: 60%;
}
### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


html・cssについて質問です。

### 前提
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-25/d358164c-8166-42a5-bcc1-746646e5027a.png)

対応日が今日から35日以内に担当する人の名前と日付を通知したいと考えています

### 実現したいこと

一旦抽出したことをGSSに書き込んで、そこをさらに取得してSlackに通知を飛ばそうと考えたのですが、
配列内の個数が違うことで、data数が合わないとエラーになってしまうので、修正したいです

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



```
The number of columns in the data does not match the number of columns in the range.
```

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

```
function createMessage() {


  var ss = SpreadsheetApp.getActiveSpreadsheet(); // スプシを取得
  var sheet = ss.getSheetByName('シート1'); // 現在開いているシートを取得

  var today = new Date()
  var gessyo = new Date(today.getFullYear(), today.getMonth() + 1, 1)
  var gessyo_1 = gessyo.setDate(gessyo.getDate())
  var d1 = Utilities.formatDate(gessyo, 'Asia/Tokyo', 'yyyy-MM-dd');

  var gessyo_re = new Date(today.getFullYear(), today.getMonth() + 1, 1)
  var gessyo_1 = gessyo_re.setDate(gessyo_re.getDate())
  var d1 = Utilities.formatDate(gessyo_re, 'Asia/Tokyo', 'yyyy-MM-dd');

  arr = []

  var gessyo_today = gessyo.setDate(gessyo.getDate()).toString()
  var d0 = Utilities.formatDate(gessyo, 'Asia/Tokyo', 'yyyy-MM-dd');
  arr.push(d0)


  for (i = 1, k = 4; i <= 35; i++, k++) {

    var gessyo_r = gessyo_re.setDate(gessyo_re.getDate() + 1).toString()
    var d35 = Utilities.formatDate(gessyo_re, 'Asia/Tokyo', 'yyyy-MM-dd');

    arr.push(d35);
  }
 
  var completedTasks = sheet.getRange('A4:B').getValues(); //  A、B列値を配列で取得

  var columnBVals = sheet.getRange('A4:A').getValues().flat(); // A列値を配列で取得
  var lastRow = columnBVals.filter(String).length;

  var kensaku = sheet.getRange('B4:B').getValues().filter(v => v[0])
 

  for (var j = 0; j < lastRow; j++) {
    var newValues0 = kensaku[j].map(
      function (x) {
        var type = Object.prototype.toString.call(x);
        if (type == "[object Date]") {
          return x = Utilities.formatDate(x, 'Asia/Tokyo', 'yyyy-MM-dd');
        }
        else {
          return x;
        }

      });
    kensaku[j] = newValues0;
  }

  

   var kensaku2 = kensaku.flat()

  for (var h = 0; h < lastRow; h++) {
    var newValues = completedTasks[h].map(
      function (x) {
        var type = Object.prototype.toString.call(x);
        if (type == "[object Date]") {
          return x = Utilities.formatDate(x, 'Asia/Tokyo', 'yyyy-MM-dd');
        }
        else {
          return x;
        }
      });
    completedTasks[h] = newValues;
  }
  var array = []
  var error = [""]

  for (var m = 0,n = 2; m < lastRow; m++,n++) {
    var completedTasks2 = completedTasks.filter(r => r[1] === arr[m]).map(r => r.slice(0, 1)).flat()

    if (!kensaku2.includes(arr[m])) {
       array.push(error)
   
    } else {
     array.push(completedTasks2)
 
     }
     }
  console.log(array)  

      sheet.getRange(n, 7, array.length,array[0].length ).setValues(array)
   }
  
   

```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


【GAS】配列内の個数が違う場合の書き込み方

### マウスでお魚を動かしたいのですが。。。

ドラッグアンドドロップでお魚を別のdivコンテナへ
移動先のdivコンテナの中でドラッグしてお魚を移動させるという練習プログラムを書いています。

### 実現したいこと

お魚のpngが3つあるのですが、クリックしたお魚をドラッグアンドドロップできるようにしたいのですがうまい方法が見つかりません。

### 発生している問題・エラーメッセージ
変数sakanaの中にimg要素のdragid,dragid2,dragid3を入れていきたいのですが、うまく切り替える方法はないでしょうか。

```javascript
let target = "";
const dragid = document.getElementById('dragid');
const daragid2 = document.getElementById('dragid2');
const daragid3 = document.getElementById('dragid3');

const dropbox = document.getElementById('dropbox');

let sakana = dragid;

/*dragid,dragid2,dragid3をクリックすると変数sakanaに入るようにしたい */
//上のdivから下のdivへドラッグアンドドロップ
window.onload = function () {
  sakana.addEventListener('dragstart', function (element) {
    target = element.target;
  }, false);

  dropbox.addEventListener('dragover', function (element) {
    element.preventDefault();
  }, false);

  dropbox.addEventListener('drop', function (element) {
    element.preventDefault();
    element.target.appendChild(target);
    drag_fish();
  }, false);
}

//dropboxの中でドラッグ移動
function drag_fish(){
  draggable(sakana);

  function draggable(target) {
    target.onmousedown = function () {
      document.onmousemove = mouseMove;
    };
    document.onmouseup = function () {
      document.onmousemove = null;
    };

    function mouseMove(e) {
      var event = e ? e : window.event;
      // 要素の位置座標を取得
      var clientRect = dropbox.getBoundingClientRect();

      // ページの左端から、要素の左端までの距離
      var px = window.pageXOffset + clientRect.left;

      // ページの上端から、要素の上端までの距離、数字はdivのサイズから画像サイズを引いたもの
      var py = window.pageYOffset + clientRect.top;
      target.style.position = 'absolute'
      if (event.clientY > py && event.clientY < py + 234) {
        target.style.top = event.clientY + 'px';
      }
      if (event.clientX > px && event.clientX < px + 540) {
        target.style.left = event.clientX + 'px';
      }
    }
  }
}
```

### こちらはHTMLとCSSです
dataインデックスなども使えないかといろいろ試してimgの要素がカオスになっていてすみません💦
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./aqua.css">
  <title>水族館</title>
</head>
<body>
      <div class="container">
        <h1>お空にお魚を泳がせよう！</h1>
      <div class="dragcontainer">
        <img id="dragid"  data-id="dragid" src="img/kame-l.png" width="160px">
        <img id="dragid2" data-id="dragid2" src="img/fish01.PNG" width="160px" height="138px">
        <img id="dragid3" data-id="dragid3" src="img/fuku.PNG" width="160px" height="138px">
      </div>
      <div class="dropcontainer" id="dropbox"></div>
    </div>
  <script src="js/aqua.js"></script>
</body>
</html>
```
こちらがCSSです。よろしくお願いします。
```CSS
/* CSSのリセット */
html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
input,
div {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
button {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
}
li {
  list-style: none;
}
/*コンテンツ*/
.container{
  background-color: aquamarine;
  text-align: center;
  height: 100vh;
}
.dragcontainer{
    width: 700px;
    height: 200px;
    border: 2px solid black;
    margin: 10px auto;
    background-color: white;
}
.dropcontainer{
  background-image: url("img/sky02.jpg");
  width: 700px;
  height: 394px;
  border: 2px solid black;
  margin: 10px auto;
}

```
### 試したこと
onclickで変数の要素を切り替えようと思ったのですが、うまくいきませんでした。
dragstartと機能がダブってしまうからでしょうか？
```
let sakana = dragid;
dragid.onclick=function(){
  sakana = dragid;
}
dragid2.onclick=function(){
  sakana = daragid2;
}
dragid3.onclick=function(){
  sakana = daragid3;
}
```




JavaScriptでdivの中のお魚.pngをドラッグで自由に動かしたいです

Googleスプレッドシートで、シート間でデータのコピーを考えています。

全件シートの一番新しい日付のデータを
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-25/0f24a734-1a91-4f9f-b839-7e1c405bce00.jpeg)
処理済シートにコピーする
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-25/4ff4b451-c6e4-4311-9600-ce466d12360c.jpeg)
ような処理です。

```GAS
function tsuiki2() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var zenken = ss.getSheetByName('全件');
  var shorizumi = ss.getSheetByName('処理済');

  //最新の日付を取得する
  var arrayData = zenken.getRange(4, 3, zenken.getLastRow() - 3).getValues(); //列Cのセルを取得
  var arraySortedDesc = arrayData.sort(function (a, b) { return new Date(b) - new Date(a) });  //降順に並べ替え
  var lastDay = arraySortedDesc[0];  //降順に並べ替えた配列の先頭 = 最大値
  console.log("日付　" + lastDay);
  console.log("lastDayのデータ型　" + typeof (lastDay));
  //var lastDay1 = Utilities.formatDate(lastDay, 'JST', 'yyyy/MM/dd');  //日付の表示形式を整形する

  //コピー元シートを最新の日付で絞り込んだ範囲をdataに取得
  const range = zenken.getRange(4, 1, zenken.getLastRow() - 3, zenken.getLastColumn());
  const data = range.getValues().filter(v =>v[2] == lastDay);
  //const data = range.getValues().filter(v => v[2] != lastDay);　←こちらにすると最新の日付の分を含め全件取得します
  console.log(data);

  // 二次元配列dataを処理済シートに貼り付け
  let FilterdCol = data[1].length;
  let FilterdRow = data.length;
  let lastrow = shorizumi.getLastRow();
  console.log(lastrow);
  shorizumi.insertRowsAfter(lastrow, FilterdRow);
  shorizumi.getRange(lastrow+1,1,FilterdRow, FilterdCol).setValues(data);
}
```

const data = range.getValues().filter(v => v[2] == lastDay);
のところでヒット件数が０件となるようでdataが[]となり、うまくいきません。
どのようにすればよいでしょうか。
lastDayは「Mon Jan 23 2023 10:00:00 GMT-0500 (Eastern Standard Time)」と取得されていて、
データ型は「object」となっています。
よろしくお願いします。

Googleスプレッドシート、マクロを使って日付で絞りこんだデータを別シートにコピーする

### 前提

完全なる初心者で、GASとスプレッドシートによるLINEbotを作成しようとしています。
恥ずかしながら、有識者様のブログを参考にしているだけの状況です。

### 実現したいこと

現在は、Ａ列セル内の文字、完全一致で、Ｂ列の文字が返ってきます。
例：Ａ列「おはよう」Ｂ列「おはよ～」
LINE「おはよう」→「おはよ～」と返ってくる。
LINE「おはよう、いい朝だね」→返ってこない。

今後は、A列セル内の文字が含まれる文章がきたら、B列の文字を返したいです。
例：A列「おはよう」B列「おはよ～」
LINE「おはよう、いい朝だね」→「おはよ～」

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

indexOfを挿入するも、正常に動作しなくなる

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

GAS（Java）

//★★LINE Messaging APIのチャネルアクセストークン★★
var LINE_ACCESS_TOKEN = "●●●";

//★★スプレッドシートID★★
var ss = ●●●");

//★★シート名★★
var sh = ss.getSheetByName("●●●");


//LINE Messaging APIからPOST送信を受けたときに起動する
// e はJSON文字列
function doPost(e){
  if (typeof e === "undefined"){
    //動作を終了する
    return;
  } else {
    //JSON文字列をパース(解析)し、変数jsonに格納する
    var json = JSON.parse(e.postData.contents);

    //変数jsonを関数replyFromSheetに渡し、replyFromSheetを実行する
    replyFromSheet(json)
  }
}
 
//返信用の関数replyFromSheet
// data には変数jsonが代入される
function replyFromSheet(data) {
  //返信先URL
  var replyUrl = "https://api.line.me/v2/bot/message/reply";
   
  //シートの最終行を取得する
  var lastRow = sh.getLastRow();
   
  //シートの全受信語句と返信語句を二次元配列で取得する
  var wordList = sh.getRange(1,1,lastRow,2).getValues();
   
  //受信したメッセージ情報を変数に格納する
  var reply_token　= data.events[0].replyToken; //reply token
  var text = data.events[0].message.text; //ユーザーが送信した語句
 
  //返信語句を格納するための空配列を宣言する
  var replyTextList = [];
  
  //LINEで受信した語句がシートの受信語句と同じ場合、返信語句をreplyTextにpushする
  for(var i = 1; i < wordList.length; i++) {
    if(wordList[i][0] == text) {
    　replyTextList.push(wordList[i][1]);
    }
  }
  

  //LINEで受信した語句がシートの受信語句と一致しない場合、関数を終了する
  if(replyTextList.length < 1) {
    return;
    
  //replyTextListのLengthが5より大きい場合、messageLengthを5にする
  //※※一度に最大5つの吹き出ししか返信できないためです※※
  } else if(replyTextList.length > 5) {
    var messageLength = 5;
  } else {
    var messageLength = replyTextList.length;
  }
  
  //"messages"に渡す配列を格納するための空配列を宣言する
  //[{"type": "text", "text": "返信語句その1"},{"type": "text", "text": "返信語句その2"}....]
  var messageArray = [];
  
  //replyTextListに格納されている返信語句を最大5つ、messageArrayにpushする
  for(var j = 0; j < messageLength; j++) {
    messageArray.push({"type": "text", "text": replyTextList[j]});
  }
  
  var headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + LINE_ACCESS_TOKEN,
  };
  
  var postData = {
    "replyToken": reply_token,
    "messages": messageArray
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };
    
  //LINE Messaging APIにデータを送信する
  UrlFetchApp.fetch(replyUrl, options);
}



### 試したこと

 for (var i = 0; i < wordList.length; i++) {
if (json.indexOf(wordList[i][0]) > -1) {
gyo = i;
break;
}
}

などに置き換えたりしてみましたが、動作自体が止まります。
(上記と似たようなパターンで何度か置き換えしてみましたがダメでした。。）

### 補足情報（FW/ツールのバージョンなど）
特になし。


LINEbot：部分一致で返信したい（GAS、スプレッドシート利用）

HTML初心者です。
教えて頂きたい事は、ラジオボタンで作った値と全く同じものをセレクトボックスで作ることができますでしょうか。
```
        <p>人数</p>
        <div id="form-number" class="btn-group btn-group-toggle w-100" data-toggle="buttons">
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="1" autocomplete="off">1
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="2" autocomplete="off">2
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="3" autocomplete="off">3
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="4" autocomplete="off">4
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="5" autocomplete="off">5
            </label>
        </div>
```
をセレクトボックスで作りたいです。

ラジオボタンで作った値と全く同じものをセレクトボックスで取得したいです。

### 前提

https://blog.synnex.co.jp/google/gmail-gas/
上記サイトを参考に
Gmailからスプレッドシートへ転記させたいと思っています。

### 実現したいこと

抽出先シートのD列を作業列として利用したく、
A列～C列にGmaiのデータを抽出したいです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-24/fe44983f-2573-44d1-bb37-32e8a26766d8.png)

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

appendRowを使っているからなのか
D列に数式が入っているとうまく作動してくれません。
setValueでも同様です・・。


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

```ここに言語名を入力

function searchMails() {

  const query = 'subject:〇〇 after:2023/1/1'
  const threads = GmailApp.search(query);

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('リスト');

 // リセット
 
  const howMany = sheet.getLastRow() - 1;
  const range = sheet.getRange("A2:C");
  
  if(howMany > 0){
    range.clearContent();
  }


  threads.forEach(thread => {
  
    const message = thread.getMessages()[0]; //一通目のメールのみ

   

      let date = message.getDate(); // 送信日
      let fromData = message.getFrom(); // 送信元
      let subject = message.getSubject(); // 件名
      
      
      let data = [date, fromData, subject];
      

      sheet.appendRow(data);

    });
  };


### 試したこと
setValueで試してみました。


threads.forEach(function(thread){
  
    const message = thread.getMessages()[0]; //一通目のメールのみ

   

      let date = message.getDate(); // 送信日
      let fromData = message.getFrom(); // 送信元
      let subject = message.getSubject(); // 件名

      const lastRow = sheet.getLastRow() + 1;
      
      sheet.getRange(lastRow,1).setValue(date);
      sheet.getRange(lastRow,2).setValue(fromData);
      sheet.getRange(lastRow,3).setValue(subject);

【GAS】Gmailからスプレッドシートに転記

### 前提
JavaScript,HTML,CSSを使ってタイピングゲームを作っています
お題セレクトボタンを作りゲームをスタートさせたいです
### 実現したいこと
セレクトボタンでゲームが始まるようにしたい
### 該当のソースコード

```HTML
<!DOCTYPE html>
<html>
    <head>
        <title>タイピングゲーム</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="k22136.css" />
        <script src="kotowaza-k22136.js"></script>
        <script src="country-k22136.js"></script>
        <script src="pref-k22136.js"></script>
    </head>
        <body>
            <div class="imgt">
                <p class="title">TYPING GAME</p>
            </div>
            <div class="wrap1">
                <select name="" id="odai" onchange="myfunc()">
                    <option disabled selected>      </option>
                    <option value="ことわざ" style="text-align: center">ことわざ</option>
                    <option value="国" style="text-align: center">国</option>
                    <option value="都道府県" style="text-align: center">都道府県</option>
                </select>
                <script type="text/javascript">
                    function myfunc() {
                        var value = document.getElementById("odai").value;
                        var target = document.getElementById("target");
                        if(value === 'ことわざ'){
                            var kotowaza = function ready1(){

                            }
                        }
                        else if(value === '国'){
                            var country = function ready2(){
                                
                            }
                        }
                        else if(value === '都道府県'){
                            var pref = function ready3(){
                                
                            }
                        }
                    }
                </script>
                <p id="target"></p>
                <div id="count"></div>
                <h1><div id="japanese"></div></h1>
                <h2><div id="word"></div></h2>
                <div id="scoredis"></div>
            </div>
        </body>
</html>
```
```JavaScript
const KOTOWAZA = ["ai"];
    const KOTOWAZA_JP = ["あい"];
    var wordlist;
    var wordlistJapanese;                         
    var time_limit = 60;
    var readytime = 3;
    var score;
    var correct;
    var mistake;
    var char_num = 0;
    var word_char;
    var random;
    function ready1(){
        wordlist = KOTOWAZA;
        wordlistJapanese = KOTOWAZA_JP;
        readytime = 3;
        scoredis.innerHTML = "";
        kotowaza_button.style.visibility = "hidden";
        var readytimer = setInterval(function(){
            count.innerHTML = readytime;
            readytime--;
            if(readytime < 0){
                clearInterval(readytimer);
                gameStart();
            }
        },1000);
    }
    function gameStart(){
        score = 0.0;
        mistake = 0;
        correct = 0;
        wordDisplay();
        var time_remaining = time_limit;
        var gametimer = setInterval(function(){
            count.innerHTML = "残り時間: " + time_remaining;
            time_remaining--;
            if(time_remaining <= 0){
                clearInterval(gametimer);
                finish();
            }
        },1000)
    }
    function wordDisplay(){
        random = Math.floor(Math.random()*wordlist.length);
        word.innerHTML = wordlist[random];
        japanese.innerHTML = wordlistJapanese[random];
        charInsort();
    }
    function charInsort(){
        word_char = wordlist[random].charAt(char_num);
    }
    function finish(){
        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
        count.innerHTML = "";
        word.innerHTML = "";
        japanese.innerHTML = "";
        start_button.style.visibility = "visible";
        word_char = 0;
        random = 0;
        char_num = 0;
    }
document.onkeydown = function(e){
    if(e.keyCode == 189){
        keyStr = "-";
    }
    else if(e.keyCode == 188){
        keyStr = ",";
    }
    else{
        var keyStr = String.fromCharCode(e.keyCode);
        keyStr = keyStr.toLowerCase();
    }
    if(keyStr == word_char){
        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
        char_num++;
        correct++;
        charInsort();
    }
    else{
        new Audio('miss.mp3').play();
        mistake++;
    }
    if(char_num == wordlist[random].length){
        new Audio('correct.mp3').play();
        char_num = 0;
        wordDisplay();
    }
};
```
```JavaScript
const COUNTRY = ["afu"];
    const COUNTRY_JP = ["アフ"];
    var wordlist;
    var wordlistJapanese;
    var time_limit = 60;
    var readytime = 3;
    var score;
    var correct;
    var mistake;
    var char_num = 0;
    var word_char;
    var random;
    function ready2(){
        wordlist = COUNTRY;
        wordlistJapanese = COUNTRY_JP;
        readytime = 3;
        scoredis.innerHTML = "";
        country_button.style.visibility = "hidden";
        var readytimer = setInterval(function(){
            count.innerHTML = readytime;
            readytime--;
            if(readytime < 0){
                clearInterval(readytimer);
                gameStart();
            }
        },1000);
    }
    function gameStart(){
        score = 0.0;
        mistake = 0;
        correct = 0;
        wordDisplay();
        var time_remaining = time_limit;
        var gametimer = setInterval(function(){
            count.innerHTML = "残り時間: " + time_remaining;
            time_remaining--;
            if(time_remaining <= 0){
                clearInterval(gametimer);
                finish();
            }
        },1000)
    }
    function wordDisplay(){
        random = Math.floor(Math.random()*wordlist.length);
        word.innerHTML = wordlist[random];
        japanese.innerHTML = wordlistJapanese[random];
        PushSubscriptionOptions.innerHTML = wordlistphoto[random];
        charInsort();
    }
    function charInsort(){
        word_char = wordlist[random].charAt(char_num);
    }
    function finish(){
        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
        count.innerHTML = "";
        word.innerHTML = "";
        japanese.innerHTML = "";
        photo.innerHTML = "";
        start_button.style.visibility = "visible";
        word_char = 0;
        random = 0;
        char_num = 0;
    }
document.onkeydown = function(e){
    if(e.keyCode == 189){
        keyStr = "-";
    }
    else if(e.keyCode == 188){
        keyStr = ",";
    }
    else{
        var keyStr = String.fromCharCode(e.keyCode);
        keyStr = keyStr.toLowerCase();
    }
    if(keyStr == word_char){
        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
        char_num++;
        correct++;
        charInsort();
    }
    else{
        new Audio('miss.mp3').play();
        mistake++;
    }
    if(char_num == wordlist[random].length){
        new Audio('correct.mp3').play();
        char_num = 0;
        wordDisplay();
    }
};
```

### 試したこと
HTMLのセレクトボタンでchangeイベントをいれましたが動きません
### 補足情報（FW/ツールのバージョンなど）
環境OS、VScode


セレクトボタンのリンク

### 前提

googlechromeの拡張機能を作っているものです。
そこでXMLHttpRequestをうまく使えず困っているところです。

### 実現したいこと

・ 別ファイルのjsonをJSコードで取得する。

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

XMLHttpRequestでエラーが出る。

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

```javascript
function getJSON() {
	let req = new XMLHttpRequest();
	req.onreadystatechange = function() {              
		if(req.readyState == 4 && req.status == 200) {
			let data = JSON.parse(req.responseText);
			let len = data.length;
			for (let i = 0; i < len; i++) {
				console.log(data[i].lyrics);
			}
		}
	};
	req.open("GET", example.json , false);
	req.send(null);
}

getJSON();
```

### 試したこと

コードのように書いたが、拡張機能として扱うと動作しない。



GoogleChromeの拡張機能でXMLHttpRequestを使いたい

下記のソースコードで、「あいうえお」「かきくけさしす…」と書いてる箇所の文字列が長くなったときに折返ししてしまい困っています。
一行に収まる長さで伸縮し、収まりきらなくなったら改行するようにしたいです。
CSSは共通のものなので、追加することはできますが変更、削除することはできません。

```CSS
.list {
max-width: 1024px;
display: grid:
place-items: center;
width: min(43rem, 100%)
}
.list .row {
display: grid;
grid-template: "a b c d" auto/1.5em calc(45%) calc(45%) 3.5em;
}
.list .a {
grid-area: a
}
.list .b {
grid-area: b
}
.list .c {
grid-area: c
}
.list .d {
grid-area: d
}
```
```HTML
<link rel="stylesheet" href="style.css">
<div class="list">
<div class="row">
<div class="a">1</div>
<div class="b">あいうえお</div>
<div class="c">かきくけこさしすせそたちつてと </div>
<div class="d">btn</div>
</div>
</div>
```

折返しせずにできる限り伸縮するように直したい。

HTML+CSSで、高さ固定のリストを横に複数並べたいです。
現在のコードだと<ul>の幅が、一番長い<li>の幅になってしまい、複数列あるリストの場合、隣のリストと被ってしまいます。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-19/7d55962c-1647-403a-b82b-aa934825e4a3.png)

<ul>とその上の<div>の幅が見た目上の表の幅にできると嬉しいのですがどうしたらよいでしょうか。

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

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

```html

        <style>
            .list {
                display: flex;
                flex-wrap: nowrap;
                column-gap: 20px;
                white-space: nowrap;
            }
            ul {
                height: 80px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                list-style: none;
                padding: 0px;
                column-gap: 20px;
                background-color: aqua;
            }
            ul li {
                white-space: nowrap;
                background-color: beige;
            }
        </style>

        <div class="list">
            <div>
                subtitle
                <ul>
                    <li>aaaaa</li>
                    <li>bbb</li>
                    <li>ccccccccc</li>
                    <li>ddddddddddddddddddd</li>
                    <li>eeeeeee</li>
                    <li>f</li>
                </ul>
            </div>

            <div>
                subtitle
                <ul>
                    <li>aaaaa</li>
                    <li>bbb</li>
                    <li>ccccccccc</li>
                    <li>ddddddddddddddddddd</li>
                    <li>eeeeeee</li>
                    <li>f</li>
                </ul>
            </div>
        </div>
```


HTML+CSSで、高さ固定のリストを横に複数並べたい

リモートデスクトップからEC2インスタンスに接続できず、困っています。
過去は問題なく接続できておりました。
具体的には以下のダイアログが表示されて、コネクションがうまく貼れていない様です。
可決方法があればご教示頂けますでしょうか。

```
プロトコルエラー コード 0x112d のため、リモートセッションは切断されます
リモートコンピュータへの接続をもう一度実行してください。
```

リモートデスクトップからEC2インスタンスに接続できない

### 前提
Wordpressの固定ページでオリジナルテーマを使ってページを作っています。
### 実現したいこと
SP用の画面でハンバーガーメニューからドロワーメニューを出せるようにし、＜header＞の下からメインのコンテンツを表示されるようにしたいです。


### 発生している問題・エラーメッセージ
PC用の画面の都合上、<header>のなかにドロワーメニューの内容を入れているのですが、SP画面にした際、<header>の高さに横に隠しているドロワーメニューの高さ分の高さを含めているため、余白ができてしまいます。

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

```ここに言語名を入力
<style>
.event-page h1 a{
    font-size: 3rem;
    margin:auto 1%;
    display:flex;
    width:100%;
}
.event-page .manu{
    font-size: 1.25rem;
    position:fixed;
    top:0;
    /* margin-top:2%; */
    padding-top:2%;
    /* ナビの色を反転させる */
    filter: invert(100%);
    mix-blend-mode: exclusion;
    z-index: 9999;
    width:100%;
}
.event-page header{
    display: flex;
    position: fixed;
    width:100%;
    z-index:9999;
}
.event-page .manu nav ul{
    font-size:1.5rem;
    display: flex;
    margin :auto;
    position:relative;
}
.event-page .manu nav ul li{
    margin: 1% 4%;
}
.event-page > .manu nav ul > li{
    width:25%;
}
.event-page > nav > div{
    display:flex;
    z-index: 999;
    position: relative;
}
    .event-page .manu nav ul li{
    margin: 1% 4%;
}
    .event-page > .manu nav ul > li{
    width:25%;
}
    .event-page > nav > div{
    display:flex;
    z-index: 999;
    position: relative;
}
.event-page > .manu div > a,.event-page > .manu div > a > svg{
    display:block;
}
.event-page div > .manu header > h1{
    margin-right:3%;
    margin-left:3%;
}
.event-page > .manu header > a{
    margin:2%;
}
.event-page > .manu header > p{
    margin: auto auto auto 1%;
}
.event-page > .manu nav > ul > li{
text-decoration: none;
color: var(--main-color);
/* font-size: 24px; */
}
.event-page > .manu nav > ul > li > a{
position: relative;
z-index: 1;
display:block;
text-align: center;
}
.event-page > .manu nav > ul > li > a:after{
content: '';
position: absolute;
left: 0;
bottom: -6px;/*テキストからの距離*/
width: 100%;/*初期状態では下線非表示*/
height: 1px;/*下線の高さ*/
background-color: var(--main-color);/*下線の色*/
z-index: -1;
transition: all 0.4s;/*アニメーション速度*/
}
.event-page > .manu nav > ul > li:hover .event-page > .manu nav > ul > li > a:after{
width: 100%;/*hover時に表示*/
}
#second-nav{
    filter: none;
    mix-blend-mode: normal;
    background-color:var(--second-color);
    /* padding:1%; */
}
@media screen and (min-width: 1023px) {
    .manu-btn{
        display:none;
    }
}
@media screen and (max-width: 1023px) {
    .event-page{
        overflow:hidden;
    }
    .event-page .manu-nav{
        transform: translate(100%, 0px);
        transition: all 1s ease 0s;
        -webkit-transition:all 1s ease 0s;
    }
    .event-page .nav-active{
        transform: translate(0px, 0px);
    }
    .event-page .manu{
        position:static;
    }
    .event-page h1 img{
        width:40%;
    }
    .event-page > header h1 a img{
        width:50%;
    }
    .event-page nav{
        padding:8%;
    }
    .event-page > .manu nav > ul > li{
        width:100%;
    }
    .event-page > .manu nav > ul > li > a{
        font-size:3rem;
        text-align:left;
    }
    .event-page .nav-active{
        /* メニューを開いた際だけ */
        background-color: #FFF;
        position:fixed;
        height:100%;
        width:100%;
    }
    .event-page .manu-active{
        width:100%;
        height:100%;
        background:#FFF;
        z-index: 9999;
        position: fixed;
        filter: none;
        mix-blend-mode: initial;
    }
    .event-page nav ul{
        flex-flow: column;
        height: 100%;
        justify-content: center;
        font-size: 2.5rem;
        padding:0 10%;
        background-color: #FFF;
        position:fixed;
    }
    .event-page nav ul li{
        width:100%;
        margin:5% 0;
    }
    .event-page > .nav-active > ul > li > a{
        text-align:left;
    }
    /* SP画面のメニュー開いた時 ここまで */
    .event-page header > div > p,.event-page div > header > h1 > a > p{
    display:none;
    }
    .event-page header h1 a p,.event-page div > header > p{
        display:none;
    }
    .event-page header{
        width:90%;
        background:#FFF;
    }
}
</style>
<article class="event-page">
    <div class="manu" id="second-nav">
        <header id="EventPageHeader">
            <h1><a href="#"><img src="..." alt="..."><p>...</p></a></h1>
            <p>...</p>
            <a class="tatamiyogapage" href="#">
                <i class="fa-solid"></i>
            </a>
            <a class="instagram" href="#">
                <i class="fa-brands fa-instagram"></i>
            </a>
            <a class="youtube" href="#">
                <i class="fa-brands fa-youtube"></i>
            </a>
            <div class="manu-btn"><span></span><span>Menu</span><span></span></div>
        </header>
        <nav class="manu-nav">
            <ul>
                <li><a href="#">項目1</a></li>
                <li><a href="#">項目2</a></li>
                <li><a href="#">項目3</a></li>
                <li><a href="#">項目4</a></li>
            </ul>
        </nav>
    </div>
    <main>
        ...
    </main>
    <footer style="color:#000;">
        ...
    </footer>
</article>
```

### 試したこと

<header>のpositionで解決できないか,relativeとabsoluteなど試してみましたが隠している時の高さなどがactiveにした際の形と違うため、出たり入ったりするときにおかしい動きになってしまいます。

### 補足情報（FW/ツールのバージョンなど）

コードも長く汚いですが、ご教示いただきたいです。


親要素の高さに特定の子要素の高さを含めないようにしたい

### 前提

Gpogleカレンダーの予定を１か月分LINEに送信したいと考えています。
１週間分をアレンジして１か月分を送信することは可能そうなのですが、
予定のない日も「〇月〇日」とでてしまい、文章が長くなってしまう状況です。
予定がある日だけまとめてピックアップして通知してもらえるようにしたいと考えています。

### 実現したいこと

１月１６日（月）
予定

１月２０日（金）
予定

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

```
予定がない日も
１月２０日（金）
（空白）
と送信されてしまいます。
```

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

```ここに言語名を入力
function myFunction(){

  var startDate = new Date();
  var period = 31; // 予定を表示したい日数

  startDate.setDate(startDate.getDate() + 1);
  var schedule = getSchedule(startDate, period);
  var message = scheduleToMessage(schedule, startDate, period);

  sendToLINE(message);  
}

// Googleカレンダーから予定取得
function getSchedule(startDate, period){
  var calendarIDs = ['〇〇〇']; //カレンダーIDの配列。カレンダーを共有している場合、複数指定可。

  var schedule = new Array(calendarIDs.length);
  for(var i=0; i<schedule.length; i++){schedule[i] = new Array(period);}

  for(var iCalendar=0; iCalendar < calendarIDs.length; iCalendar++){
    var calendar = CalendarApp.getCalendarById(calendarIDs[iCalendar]);

    var date = new Date(startDate);
    for(var iDate=0; iDate < period; iDate++){
      schedule[iCalendar][iDate] = getDayEvents(calendar, date);
      date.setDate(date.getDate() + 1);
    }
  }

  return schedule;
}  

function getDayEvents(calendar, date){
  var dayEvents = "";
  var events = calendar.getEventsForDay(date);

  for(var iEvent = 0; iEvent < events.length; iEvent++){
    var event = events[iEvent];
    var title = event.getTitle();
    var startTime = _HHmm(event.getStartTime());
    var endTime = _HHmm(event.getEndTime());

    dayEvents = dayEvents + '・' + startTime + '-' + endTime + ' ' + title + '\n';
  }

  return dayEvents;
}

function scheduleToMessage(schedule, startDate, period){
  var now = new Date();
  var body = '\n1週間の夜や出張の予定です。ご迷惑をお掛けしますが、宜しくお願い致します。\n' 
    + '(' +_Md(now) + ' ' +_HHmm(now) + '時点)\n'
    + '--------------------\n';

  var date = new Date(startDate);
  for(var iDay=0; iDay < period; iDay++){
    body = body + _Md(date) + '(' + _JPdayOfWeek(date) + ')\n';

    for(var iCalendar=0; iCalendar < schedule.length; iCalendar++){
      body = body + schedule[iCalendar][iDay];
    }   

    date.setDate(date.getDate() + 1);
    body = body + '\n';
  }

  return body;
}

// LINE通知
function sendToLINE(message){
  var token = '〇〇〇'; //LINE Notifyのトークン
  var options =
      {
        "method": "post",
        "payload": "message=" + message,
        "headers": {"Authorization" : "Bearer "+ token}
      };

  UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);

}

// 日付指定の関数
function _HHmm(date){
  return Utilities.formatDate(date, 'JST', 'HH:mm');
}

function _Md(date){
  return Utilities.formatDate(date, 'JST', 'M/d');
}

function _JPdayOfWeek(date){
  // date = new Date()
  var dayStr = ['日', '月', '火', '水', '木', '金', '土'];
  var dayOfWeek = date.getDay();

  return dayStr[dayOfWeek];
}
```

### 試したこと

https://www.shanaidx.com/calendar_akijikan/
など空いている日を設定など、引いていけばよいのかと思いましたが、余計に複雑になりました。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
