常連

自己紹介

## はじめに
現在、作成しているWebアプリの見た目の実装に関しての質問です

## 知りたいこと
今実装している画面の一部が下記のような表示になっておりまして、
![イメージ説明](cd71d3313aa7d487dc5a5308027094c5.png)

六番目以降の要素(犬とTest)を五番目の要素の後ろに持っていくような形にし、１行で表示させたいと思っていまして、
オレンジのwidthの範囲で左右にスクロールさせるようにしたいです。

![イメージ説明](970fc7b1ce693bd03feae55105445e5a.png)

この場合htmlとcssで表示する方法はあるのでしょうか？

完成イメージですが、こちらの[リンク](https://miror.jp/)先の「人気の占い師」というセクションあたります。

![イメージ説明](babeee1d9a3196af57e45266fbc2fc40.png)

どうぞよろしくお願いします。m(_ _)m

## 追記
該当のコードを追記します

**test.html**
```
<div class="new-users-section">
   <div class="section-title"><b>新着ユーザーさん</b></div>
     <div class="new-users-list">
       <div class="new-user-item">
         <img class="new-user-icon" src="https://www.min-inuzukan.com/images/dog_img_long-chihuahua.jpg?18102302">
         <div class="new-user-name">Test</div>
       </div>
       <div class="new-user-item">
         <img class="new-user-icon" src="https://www.min-inuzukan.com/images/dog_img_long-chihuahua.jpg?18102302">
         <div class="new-user-name">Test</div>
       </div>

```

**test.css**
```
.new-users-section {
    width: 670px;
    margin: 60px auto 0 auto;
}

.section-title {
     width: 95%;
     margin: 0 auto 0 auto;
     font-size: 20px; 
}

.new-users-list {
     height: 130px;
     width: 95%;
     margin: 20px auto 60px auto;
}

.new-user-item {
     width: 120px;
     height: 130px;
     float: left;
}

.new-user-icon {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: block;
}

.new-user-name {
     width: 100px;
     margin-left: 0;
     text-align: center;
     margin-top: 5px;
     font-size: 14px;
}
```

上記の実装についての補足ですが、
上記で話しました、「犬のイメージと、Testのテキスト」を `new-user-item` として、くくっておりまして、 その親の `new-users-list` 内で `new-user-item`に`float : left` プロパティで持たせて、表示できないかと考えていました。6番目の `new-user-item` が5番目の `new-user-item` の右側に回り込まない状況です。

またこちらのリンクを参考に、 `overflow-x : scroll` を使って実装しようとしましたが、横スクロールにならず縦のスクロールになってしまいました。
https://www.tagindex.com/stylesheet/box/overflow2.html

[html / css] 要素をスクロールさせる

GoogleのFirebase Realtime Databaseを最近勉強し始め、
習作にとりかかっている中でご質問させていただきたいことがあります。
内容としては、Cloud Functionsでデータベースの変更を関知してから
●●秒後に特定の処理を行う、という時間差の処理を実現するための方法を探しております。
下記、お目通しいただけると大変たすかります。

## ●作っているもの
リアルタイムで一つの空間を共有するシンプルな「オンラインドミノ倒し」
　- 複数人が入室できる
  - プレイヤーはドミノを「ひとつ積む」か「倒す」かだけを選択できる
　- 誰かが「倒す」を選択すると全プレーヤーの画面が「ドミノが倒れている最中」になる
  - **「ドミノが倒れている最中」は、どのプレーヤーも上記の選択はできない**
  - **「ドミノが倒れている最中」に入室してきたプレーヤーについても同様**
## ●悩み
あるプレーヤーが「倒す」を選択して「ドミノが倒れている最中」というステータスにした後、
「ドミノが倒れ終わった」というステータスに戻す処理はサーバー側で行う必要があると考えています。
なぜなら「倒す」を選択したユーザーが直後に退室したり、全プレーヤーが退室したとしても
その仮想空間では「ドミノが倒れている最中」のステータスを維持しなければいけないからです。
**具体的には、「倒す」を選択したユーザーは同時にサーバー側に「ドミノの本数」を送り、サーバー側では受け取った本数×1 秒後に「ドミノが倒れている最中」のステータスを解除する、という処理を行いたいです。**
## ●思いついている手段と問題点
　0. **Cloud FunctionsでsetTimeout的な関数を記述する**　⇒実行自体は可能なようなのですが、秒数が長いとタイムアウトになり、また利用料金にも跳ね返るリスク
　0. **外部のCronサービスから呼び出す**　⇒公式で紹介されていた方法ですが、今回は秒単位で管理したいのと、定期スケジュールでの実行とは考え方が違うので、相性が悪い？と踏んでいます。


実現したいこと（作っているもの）はシンプルなはずのですが、
自分の頭では良い方法が思い浮かばず、良いアイデアを教えていただけると嬉しいです。
何卒よろしくお願いいたします。

Google Firebase Cloud Functions：「時間差の処理」のある関数をサーバー側で実行したい

### 実現したいこと
Googleフォームの[段落]形式の質問で、以下のように禁止文字・禁止単語を設定したいと思っております。
- 禁止文字：半角の「<」、「>」
- 禁止単語：半角の「left」、「right」（大文字小文字を区別しない）

### 試したこと
[回答の検証]-[正規表現]-[含まない]でパターンを
```([<>]|([lL][eE][fF][tT])|([rR][iI][gG][hH][tT]))```
と設定しました。


### 困っていること
禁止したい文字・単語を入力したときにNGとなることは確認できたのですが、
改行を入力したときもNGとなってしまいます。
改行の入力をNGとしないためにはどのようにしたら良いか、ご教示いただけませんでしょうか。
どうぞよろしくお願いいたします。

Googleフォームの正規表現で改行をマッチさせたくない

![イメージ説明](b67d74a583199e2415adacece6c6ed1d.jpeg)

### 前提・実現したいこと

固定メニューの作り方についてお聞きしたいのですが
こちらはスクロールするとposition:fixedにして表示させ画像のように一列になり
topに上げると元のデザインに変わるアニメーションにしたいのですが
作り方がわかりません。

どのようにhtmlとcssとjQueryで作ればいいのでしょうか？

### 該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
  html, body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #ffffff;
  width: 100%;
  overflow: hidden;
  margin: 0;
  position: fixed;
  transition: .2s all ease;
}

.header-container {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 10px;
  position: relative;
}


.header-container.scrolled {
  width: calc(100% - 20px);
}

.text {
  float: left;
  transition: .2s all ease;
  opacity: 1;
  margin: 5px 0;
}

.header-container.scrolled .text {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.header-logo {
  clear: left;
  float: left;
  transition: .2s all ease;
}

.header-logo h1 {
  margin: 20px 0;
  transition: .2s all ease;
}
.header-container.scrolled .header-logo h1 {
  margin: 0;
}

ul.tel-wrap {
  display: block;
  float: right;
  margin: 0;
  padding: 0;
}

ul.tel-wrap li {
  display: inline-block;
}

.header-container.scrolled ul.tel-wrap li.telIcon img {
  transform: scale(0.7);
  vertical-align: bottom;
}

ul.tel-wrap li.tel {
  font-size: 12px;
  color: #85312e;
  padding-right: 15px;
}
ul.tel-wrap li.tel .description {
  transition: .2s all ease;
}
.header-container.scrolled ul.tel-wrap li.tel .description{
  display: none;
}
ul.tel-wrap li.tel .number {
  font-size: 25px;
  transition: .2s all ease;
}

ul.tel-wrap li.link a.link {
  background-color: #85312e;
  color: #ffffff;
  font-size: 12px;
  padding: 12px 25px;
  position: relative;
  text-decoration: none;
  top: -15px;
  transition: .2s all ease;
}

.header-container.scrolled ul.tel-wrap li.link a.link {
  padding: 7px 10px;
  vertical-align: bottom;
  top: -9px;
}

ul.tel-wrap li.link img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.header-container.scrolled ul.tel-wrap li.link span {
  display: none;
}

.nav-menu {
  clear: right;
  float: right;
  transition: .2s margin-top ease;
}

.header-container.scrolled .nav-menu {
  clear: none;
  margin-top: 5px;
  margin-right: 20px;
  padding: 0;
}

.nav-menu ul.globalnav {
  margin: 0;
  margin-top: 12px;
}

.header-container.scrolled ul.globalnav {
  padding: 0;
  transition: .2s all ease;
}

.nav-menu ul.globalnav li {
  display: inline-block;
  width: 95px;
}
.nav-menu ul.globalnav li a {
  position: relative;
  display: block;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  color: #393939;
}
.nav-menu ul.globalnav li a:hover {
  color: #85312e;
}
.nav-menu ul.globalnav li a span {
  /* ↓hoverで中央から広がるアニメーション */
  background-image: linear-gradient(180deg, transparent 90%, #85312e);
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-position: center left;
  /* 背景の位置をcenter leftで変更できる */
  transition: background-size 0.6s ease;
  display: block;
  text-align: center;
  margin-left: 30px;
}
.nav-menu ul.globalnav li a span:hover {
  /* ↓hoverで中央から広がるアニメーション */
  background-size: 100% 100%;
  transition: 0.5s all ease;
}

@media screen and (min-width: 1250px) {
  header {
    margin: 0;
    padding: 0;
  }
  .header-container {
    width: 1250px;
  }
}
@media screen and (max-width: 800px) {
  .text {
    display: none;
  }
  .header-logo img{
    margin: 15px;
  }
  .nav-menu {
    width: calc(100% - 60px);
    margin: 0 30px;
  }
}

    </style>
</head>
<body>
    <header>
        <div class="header-container">
                <p class="text">創業 50 年、各種制御盤の設計・製作・工事・据付等、お客様のニーズに応えたモノづくりを続けてます。</p>
                <ul class="tel-wrap">
                        <li class="telIcon"><p><img src="img/tel-icon.png" alt=""></p></li>
                        <li class="tel">
                            <span class="description">電話でお問い合わせ</span><br>
                            <span class="number">055-997-1552</span>
                         </li>
                        <li class="link">
                            <a class="link" href=""><img src="img/mail-icon.png" alt=""><span>メールお問合わせ</span></a>
                        </li>
                    </ul>

                <div class="header-logo">
                    <h1 class="logo">
                        <a href="" class="header"><img src="img/header-logo.png" alt=""></a>
                    </h1>
                </div>

                <nav class="nav-menu">
                    <ul class="globalnav">
                        <li class="news"><a href="" data-text="ニュース">NEWS</a></li>
                        <li class="services"><a href="" data-text="事業内容">SERVICES</a></li>
                        <li class="message"><a href="" data-text="メッセージ">MESSAGE</a></li>
                        <li class="company"><a href="" data-text="会社概要">COMPANY</a></li>
                        <li class="history"><a href="" data-text="沿革">HISTORY</a></li>
                        <li class="recruit"><a href="" data-text="求人">RECRUIT</a></li>
                    </ul>
                </nav>
        </div>
    </header>

    <p style="margin:0">
        
        
    </p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/common.js"></script>
</body>
</html>

```ここに言語を入力
```jQuery
$(function (){
    var $win = $(window);
    var $header = $(".header-container");
    // var headerHeight = $header.outerHeight();
    var offsetTop = 200;

    var addClass = "scrolled";

    $win.on("load scroll", function () {
        if($win.scrollTop() > offsetTop) {
            $header.addClass(addClass);
        } else {
            $header.removeClass(addClass);
        }
    });
});
```
### 試したこと
ネットで色々と検索したのですが同じようなサイトの作り方がなかったため
作り方に関してお聞きしたいと思い質問しました。

スクロールするとposition: fixedで一列に固定にしてtopに戻ると元のデザインにする アニメーションはどのように作るのでしょうか？

画像が上配置・テキストが下配置を1セットとして、それを2セットを左右に均等に並べたいのですが、flex-boxでやろうと思ったのですが良い方法はあるでしょうか？
 
```html
 
<!DOCTYPE html>
<html lang="ja">
<head></head> 
<body>
  <div class="container">
    <div class="flex">
      <img src="">
      <p>********</p>
    </div>

    <div class="flex">
      <img src="">
      <p>********</p>
    </div>
  </div> 
</body>
</html>
```

画像が上配置・テキストを下配置を2セットを左右に均等に配置方法

htmlについて質問させて下さい。

レスポンシブ対応により、画像ファイルをPCとスマートフォンで別々の物を表示させたい場合は
picture要素やsrcset等を使用できると思うのですが、
同様の事をインライン再生する動画ファイルで行いたい場合、どのような方法がありますでしょうか？
```ここに言語を入力
<video muted autoplay playsinline>


<source src="movie_pc.mp4" type="video/mp4">
<source src="movie_pc.webm" type="video/webm">


<source src="movie_sp.mp4" type="video/mp4">
<source src="movie_sp.webm" type="video/webm">

</video>
```
上記のような形で動画データを出し分けたいと思っております。

videoタグ内ではsrcset等が使用出来ないようなので他の方法を調べていたのですが、
良い解決法が出ない状態です。

ご教示頂けますと幸いです。
宜しくお願い致します。


--- 追記 ---
spとpcで二つのvideoタグを記述し、それぞれをメディアクエリで振り分ける、という方法でも形としては可能なのですが、
videoタグは一つで、その中のsourceのみで振り分けたいと思います。
source自体にclass属性をつける事が出来ないようなので、その他で何か良い方法があれば…と思っております。

インライン再生する動画ファイルをブレイクポイントで出し分けたい

お世話になっております。
[YoutubeAPI](https://developers.google.com/youtube/iframe_api_reference?hl=ja)の利用方法についてお尋ね致します。

複数動画を制御しようと試みる過程で、「動画再生中に、他の動画を停止する」という機能の実装で躓いております。

後述するコードでは、
・再生済動画の``ytID``（YouTubeの動画ID）と
・再生済動画の``ytArea``（動画を埋め込む場所のID）
を保存し、他の動画の再生中に保存したものを停止する。という処理を考えているのですが、思うようにいかず、質問させて頂きました。



###サンプル
[https://jsfiddle.net/9qokwpxc/](https://jsfiddle.net/9qokwpxc/)

###コード
```html
<div id="youtube_ZVT_CNl0Wvc" class="videos_youtube">
<img src="http://i.ytimg.com/vi/ZVT_CNl0Wvc/mqdefault.jpg">
</div>

<div id="youtube__sj2-dk7djI" class="videos_youtube">
<img src="http://i.ytimg.com/vi/_sj2-dk7djI/mqdefault.jpg">
</div>

<button id="play">play</button>
<button id="pause">pause</button>

```
```javascript
// YouTube Player APIを読み込む
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

(function($){	

  // 再生済動画を入れるための配列
  var PlayHistoryId = [];
  var PlayHistoryArea = [];

  // サムネイルをクリック後にYouTubeを埋め込む
  $('body').on("click",".videos_youtube",function(){

    var click_Id = $(this).attr('id');
    var target_Id = document.getElementById(click_Id);
    var click_VideoId = $(this).attr('id').replace('youtube_','');

    target_Id.addEventListener('click', function() {

      // プレーヤーを埋め込む場所
      var ytArea = target_Id;
      // プレーヤーを埋め込むYouTubeID
      var ytID = click_VideoId;

      // YouTubeを埋め込む
      ytPlayer = new YT.Player(ytArea, {
        width: 320,
        height: 195,
        videoId: ytID
      });

      // 再生した動画を「ytPlayer2やytPlayer3」など再生済動画として追加し続ける
      ytPlayer2 = new YT.Player(PlayHistoryArea[1], {
        videoId: PlayHistoryId[1]
      });
      ytPlayer3 = new YT.Player(PlayHistoryArea[2], {
        videoId: PlayHistoryId[2]
      });    

      // 再生したら再生済動画として配列に保存
      PlayHistoryId.push(ytID);
      PlayHistoryArea.push(ytArea);

    }, false);


    // ボタン制御
    $('#play').click(function() {
      // 再生
      ytPlayer.playVideo();
      // 最後に再生したやつ以外を停止→うまくいかない
      ytPlayer2.pauseVideo();
      ytPlayer3.pauseVideo();
    });
    $('#pause').click(function() {
      // 停止
      ytPlayer.pauseVideo();
    });

  });
  
})(jQuery);

```
上のサンプルやコードにありますように、`` // 最後に再生したやつ以外を停止→うまくいかない``という点が躓いている部分でございます。

あまりお詳しい方はいらっしゃらないかと存じますが、もしAPIを触ったご経験がございましたらアドバイスをお待ちしております。
宜しくお願い申し上げます。

再生済動画を配列に入れて活用する方法

#実装したい機能
・前提として、Railsアプリで、ユーザに、地図（GoogleMap）上の場所を登録させたい
・そこで、form_forとGoogleMapsAPI(JS)を用いる
・クリックしたGoogleMap上の位置の座標を「自動で」form_for内の所定の位置に入力させたい

#現状
・JavaScriptの知識があまりない状態です
・モデル等に現時点で問題はありません
・[こちらのページ様を参考にさせて頂いて、座標は取得できています。](http://www.geekpage.jp/web/google-maps-api/v3/get-xy.php)
・上記リンク先のコードによって返された座標を「入力欄にコピペして下さい」、とするのは最終手段
```
new.html.erb
　上記リンク先のJSのコード

<div id="map" style="height:560px"></div>
中略

new.html.erbのform_for内

            <div id="show_lng" class="form-group">
              <%= f.label :longitude, '経度' %>
              <%= f.text_field :longitude, class: 'form-control' %>
            </div>
```

上記コードとした所
・newを表示して何もしていない段階では、経度の入力欄が表示されている
・マップ上をクリックすると、経度入力欄が消失し、経度入力欄の場所に平文で経度が表示される
・その状態でsubmitしてもlongitudeはnilとなってしまう

#試したこと
```
            <div class="form-group">
              <%= f.label :longitude, '経度' %>
              <%= f.text_field :longitude, id: "show_lng", class: 'form-control' %>
            </div>
```
としましたが、この場合、入力欄には何も起こらず、自動入力されることもありません。

何かアドバイスをいただければ幸いです。

#環境
Ruby 2.4
Rails 5.2
Bootstrap 4.1.3
Cloud9

【Rails】form_for内の入力欄に、GoogleMap(API)上でクリックした位置の座標を自動入力する

deletedeletedeletedeletedeletedeletedelete
deletedeletedeletedeletedeletedeletedelete
deletedeletedeletedeletedeletedelete

deletedeletedeletedelete

数日前に｢[リアルタイムにカンマ(金額)を付けたい](https://teratail.com/questions/144292)｣のことですが、昨日、修正したいと要望があって、htmlとjavascriptを修正しています。

で、自分で調べて、1つ1つ修正していますが、インターネットで調べても分からないことがありまして、ここで質問しさせてください。

分からないことがいくつかがあります。
① ```var row = e.target.parentNode.parentNode;```の｢parentNode.parentNode｣をインターネットで調べたら、｢[【JavaScript】（基礎）親要素・子要素の取得まとめ②](http://unitopi.com/jquery-parent-child-2/)｣が出ました。

parentNodeを2つ付けるということは、祖先要素を取得するようなものだということで、htmlを見ますと、
<input>要素から見ると、<td>要素は親要素で、<tr>要素は祖先要素ということで、合っているでしょうか？


② ```var pos = e.target.className.split(/\s/)[0];```の｢className.split｣をインターネットで調べたら、｢[かもメモ](https://chaika.hatenablog.com/entry/2014/06/24/122734)｣が出ました。
数日前に｢[リアルタイムにカンマ(金額)を付けたい](https://teratail.com/questions/144292)｣のことですが、昨日、修正したいと要望があって、htmlとjavascriptを修正しています。

で、自分で調べて、1つ1つ修正していますが、インターネットで調べても分からないことがありまして、ここで質問しさせてください。

分からないことがいくつかがあります。
① ```var row = e.target.parentNode.parentNode;```の｢parentNode.parentNode｣をインターネットで調べたら、｢[【JavaScript】（基礎）親要素・子要素の取得まとめ②](http://unitopi.com/jquery-parent-child-2/)｣が出ました。

parentNodeを2つ付けるということは、祖先要素を取得するようなものだということで、htmlを見ますと、
<input>要素から見ると、<td>要素は親要素で、<tr>要素は祖先要素ということで、合っているでしょうか？


② ```var pos = e.target.className.split(/\s/)[0];```の｢className.split｣をインターネットで調べたら、｢[かもメモ](https://chaika.hatenablog.com/entry/2014/06/24/122734)｣が出ました。
｢className.split｣は、class名を取得するときに使うそうですが、｢(/\s/)[0]｣って、どういうことですか？
それをインターネットで調べたら、これが出ました。
[https://stackoverflow.com/questions/28127794/difference-between-split-s-and-split](https://stackoverflow.com/questions/28127794/difference-between-split-s-and-split)
しかし、上記のサイトは、（/\s+/）のことを
『1つの空白文字（タブ、改行、改行、垂直タブ、フォームフィード）を1回と無制限の時間で一致させます。』
↑
Match a single whitespacecharacter (tab, line feed, carriage return, vertical tab, form feed) between one and unlimmited times.
でも、 (/\s/)のことは載っていませんでした。
[0]は、どいうことかな？
あと、『1つの空白文字（タブ、改行、改行、垂直タブ、フォームフィード）を1回と無制限の時間で一致させます。』を読んでもどういうことか？は分かりませんでした。


③ ```switch(pos)```は、条件分岐するものですが、switch(pos) { }の中身が難しくてどういう働きするのか？の分析ができませんでした。

頑張って調べても分からないことがありましたので、すみませんが、よろしくお願いします。

コードの意味(どのようなイベント発生など)を調べて修正しています

### 前提・実現したいこと

HPの修正を任されました。
IEで特定のページを印刷しようと印刷プレビューを押すと通常、2～3ページほどで済む筈が100ページ以上表示されます。

表があり、その下に余計な余白が出来て、10ページ以上下記の図のような状態になっています。
10ページ毎に表示させたい内容が表示されると下記の状態の繰り返しになります。

![![イメージ説明](fc3955c299ff00b30350d0e66d11933b.png)

Chromeでは正常に印刷が出来ています。
他のHPはIEで印刷が出来ています。

上記の特定のHPのページのみ出来ない状態になっています。

### 該当のソースコード

事象が発生しているページのCSSです。

```ここに言語名を入力
/* -------------------------
 * レイアウトが崩れているページのタイトル
 ------------------------- */
div.check_link {
  margin: 20px;
  padding: 20px;
  background-color: #f5f2f0;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
div.check_link p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
div.check_link p:before {
  position: relative;
  bottom: 1px;
  margin-right: 10px;
  content: "CHECK!";
  color: #f0a700;
  font-size: 14px;
}
div.check_link a {
  font-size: 18px;
}
div.check_link a:hover {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  color: #f8b500;
}
div.check_link a:hover:before {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

```

理由は分かりませんが、同じCSS内で指定がされていたのでそちらも記載しておきます。

```ここに言語を入力
/* -------------------------
 * レイアウトが崩れていないページのタイトルとレイアウトが崩れているページのタイトル
 ------------------------- */
ul.list {
  max-width: 560px;
  min-width: 320px;
  border: 1px solid #ccc;
}
ul.list li {
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  zoom: 1;
}
ul.list li:before,
ul.list li:after {
  content: "";
  display: table;
}
ul.list li:after {
  clear: both;
}
ul.list li div {
  float: left;
}
ul.list li div.label {
  width: 150px;
  margin: 0;
  margin-bottom: 0px;
  padding: 10px;
  padding-top: 12px;
  padding-bottom: 0px;
  font-weight: bold;
}
ul.list li div.label label {
  cursor: pointer;
}
ul.list li div.input,
ul.list li div.confirm,
ul.list li div.description {
  overflow:hidden;
  width: 370px;
  padding: 10px;
}
ul.list li.required label:after {
  content: " (*)";
  color: #f00;
  font-weight: bold;
}
```

htmlの冒頭部分と表示させたい内容の一部を記載しておきます。
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="ja">
    <title>XXXXXXXXXXX</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="XXXXXXXXXXX">
    <meta name="keywords" content="XXXXXXXXXXX">
    <meta name="application-name" content="XXXXXXXXXXX">
    <meta property="og:site_name" content="XXXXXXXXXXX">
    <meta property="og:title" content="XXXXXXXXXXX">
    <meta property="og:description" content="XXXXXXXXXXX">
    <meta property="og:url" content="XXXXXXXXXXX">
    <meta property="og:image" content="XXXXXXXXXXX">
    <meta property="og:type" content="XXXXXXXXXXX">
    <meta property="og:locale" content="XXXXXXXXXXX">
    <link rel="stylesheet" href="XXXXXXXXXXX">
    <link rel="stylesheet" href="XXXXXXXXXXX">
    <script src="XXXXXXXXXXX"></script>
    <script src="XXXXXXXXXXX></script>
  </head>
```
上記がhead内の内容です。

```ここに言語を入力
<h2>XXXXXXXXXXX</h2>
          </div>
          <div class="intro">XXXXXXXXXXX</div>
          <div class="content_inner">
            <ul class="list">
              <li>
                <div class="label">
                  <label>XXXXXXXXXXX</label>
                </div>
                <div class="description">XXXXXXXXXXX<br/>
                XXXXXXXXXXX</div>
              </li>
              <li>
                <div class="label">
                  <label>XXXXXXXXXXX</label>
                </div>
                <div class="description">
                <a style="margin-left:-9px"  width="100px">XXXXXXXXXXX</a>
		<br/>
		XXXXXXXXXXX<br/>
		XXXXXXXXXXX <br/>
		XXXXXXXXXXX<br/>
		XXXXXXXXXXX<br/>
		XXXXXXXXXXX<br/>
```
上記は表示させたい内容の一部です。

### 試したこと

最初、htmlが違うのかと思い、htmlを触っていましたが、表示させたい内容のレイアウトが崩れたりするので根本的な解決にならないのでCSSを変更しようと思い、調べながらpaddingを0pxにしたりしていますが、自分自身の知識が足らず、質問させて頂きました。

### 補足情報（FW/ツールのバージョンなど）

IE11
Windows7
をそれぞれ使用しています。

IEで印刷時特定のページのレイアウトが崩れる

ローディング中表示にProgressBarを使用しています。
これを下記のようなCSSアニメーションによるローディングに変えて欲しいとのことなのですが、どういったやり方があるでしょうか？
https://projects.lukehaas.me/css-loaders/
CSSを含むhtmlは外部から提供されます。(動的に変わるわけではありません)

今のところ思いつくのは、
■1. assetとしてhtmlを配置してWebViewで表示。
　-> 提供されるCSSをそのまま使えるメリットがあるが、ローディングしている部分が多いのでWebViewを大量に配置して重くならないか心配。

■2. CSSアニメーションを外部ツールを使ってGIFに変換し、GlideなどのGIF再生Viewで表示。
　-> 変換できるのか別途調べる必要がある。
　
■3. CSSアニメーションを自力でObjectAnimatorで動くようにコーディングでアニメーションさせる。
　-> 一番軽そうだが、かなり時間がかかりそう。少しの動きでも差し替えを要求されると面倒なのであまり現実的とは思えない。

他にもっとスマートな方法、または■1～3について何かアドバイスいただけたらと思います。
よろしくお願いいたします。

◆環境
Target SDK 26
Min SDK 21
Compile SDK 26

Android標準のProgressBarをCSSアニメーションに変更したい

HTMLで書いたフォームに対して、javascript/jqueryで条件分岐させたいと思っています。

例えばorder_serviceのvalueが仮に１の場合、order_quantity　×　1.5を　order_priceに。
order_serviceのvalueが仮に2の場合、order_quantity　×　５を　order_priceにいった処理です。

現状としては、order_quantity　×　1.5を order_priceに入れ込むことまでは出来たのですが、
条件の部分がどの様に書くべきかわからず困っています。

どなたかご教授願えませんでしょうか。よろしくお願いいたします。



```HTML
<form class="new_order" id="new_order" action="/orders" accept-charset="UTF-8" method="post">
    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />

  <select name="order[service]" id="order_service"><option value="">種類お選びください</option>
    <option value="1">選択肢１</option>
        <option value="2">選択肢２</option>
        <option value="3">選択肢３</option>
  <p>
  </p>

  <p>
     <input placeholder="量(個数)を半角で入力してください" type="text" name="order[quantity]" id="order_quantity" />
  </p>


<p class="pay_size">お支払いポイント：<span id="order_price"></span>pt(円)</p>
<br>


<input type="submit" name="commit" value="注文する" class="submit_button" data-disable-with="注文する" />
     
</form>
```

```javascript

$(function() {
  var $input = $('#order_quantity');
  var $output = $('#order_price');
  $input.on('input', function(event) {
    var value = 1.5*$input.val();
    $output.text(value);
  });
});
```

javascriptでフォームを条件分岐させたい

### 前提・実現したいこと

Windows版Firefoxで、Canvasの上にDOMのテキスト（div、pタグ等）を重ねると、なぜか文字の背景が透過されず黒く塗りつぶされてしまいます。
原因や解決策に心当たりがありましたら、よろしくお願いします。

（追記）
Windowsですが、Macの仮想環境（Parallels Desktop）での現象になります。
すみませんが、Windowsネイティブでの表示検証はできておりません。
仮想環境上のみで起こる現象の可能性もあります。

```ここに言語を入力
<style>
    #test {
        color: #fff;
        position: absolute;
        top: 200px; left: 200px;
        z-index: 2;
    }
    canvas {
        z-index: 1;
    }
</style>

<div id="container">
    <div id="test">テストテストテスト</div>
    <canvas id="canvas"></canvas>
</div>
```

![イメージ説明](4dc1289d61e23c35fa34f0cb896f86be.png)

### 試したこと

Windows版Firefoxで、canvas要素の上にテキストを重ねた時のみ起こる現象のようです。
z-indexで重なり順を逆にして、テキストの上に透過したCanvasを重ねた場合は問題ありません。
テキストを上に重ねた時のみこの現象が起きます。透過pngなど画像では問題ありません。

マークアップを変えたり色々と試しましたが、例外なく起こりました。

### 補足情報（FW/ツールのバージョンなど）

Macの仮想環境上（Parallels Desktop）での現象になります。
ネイティブでの表示検証はできておりません。
仮想環境上のみで起こる現象の可能性もあります。

Windows8.1、Windows10のFirefoxで現象を確認しました。
それ以外のブラウザやMac版Firefoxでは問題なく透過されて表示されます。

Windows版Firefoxで、Canvasの上にテキストを重ねると背景が透過されず黒くなります

現在フロントのHTMLからAPIを叩いてメールを送信しようとしています。
しかし、送信ボタンを押すと下記のようなエラーがコンソールに出力されます
`Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.`

このエラーをググったところ今いるURLから他のURLにリクエストを送ることができないようになっていると書かれてありました
そのためこれを回避するために下記のようのコードを書いたのですが、どうもエラーが解消されません。
どのように書いたらAPIを叩けるのか教えていただきたいです。

```JS
const button = document.getElementById("button");
button.addEventListener("click", function(e) {

    e.preventDefault();

    const name = document.getElementById('name').value;
    const subName = document.getElementById('subName').value;
    const companyName = document.getElementById('companyName').value;
    const pref_name = document.getElementById('pref_name').value;
    const location = document.getElementById('location').value;
    const companyLocation = document.getElementById('companyLocation').value;
    const tellNumber = document.getElementById('tellNumber').value;
    const mailAddress = document.getElementById('mailAddress').value;
    const question = document.getElementById('question').value;

    function sendmail(subject, body) {
        return fetch('MY-API', {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ subject, body })
        }).then(onLoadFunc);
    }
    sendmail(name,subName,companyName,pref_name,location,companyLocation,tellNumber,mailAddress,question);
});
```

CORSでJSからAPIを叩けない

wordpressで作っているサイトで無限スクロールを実装しようと試みています。
しかし元々ページネーションで表示しているページでページ遷移すると、http://hoge.com/page/2/のように切り替わるように無限スクロールでもやりたいのですが、パーマリンクが変わりません。
また、スクロールで１ページ目の位置まで戻るとパーマリンクも1ページ目を表すものにしたいです。

参考にしているサイトはこちらです(http://www.koikikukan.com/archives/2014/02/18-015555.php)
こちらのデモ例ですと、静的なhtmlを一部追加する構造になっているのですが、wordpressのページネーションだと動的にページそのもののリンクが生成されてしまうので、これをどう落とし込めば良いのかわかりません。

wordpressのプラグインも試してみたのですが、ただ単に無限スクロールができるようになるだけなので、理想の機能ではありませんでした。


現在のページネーションを出力しているコードは以下になります。
```functions
function responsive_pagination($pages = '', $range = 4)
{
    $showitems = ($range * 2) + 1;

    global $paged;
    if (empty($paged)) $paged = 1;

    //ページ情報の取得
    if ($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if (!$pages) {
            $pages = 1;
        }
    }

      if (1 != $pages) {
        echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
        //先頭へ
        if ($paged !== 1) {
            echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
        }
        //1つ戻る
        if ($paged !== 1) {
            echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
        }
        //番号つきページ送りボタン
        for($i=1; $i <= $pages; $i++) {
              if(1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems)) {
                echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
              }
        }
        //1つ進む
        if ($paged !== (int)$pages) {
            echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
        }
        //最後尾へ
        if ($paged !== (int)$pages) {
            echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
        }
        echo '</ul>';
      }
}
```

```html
<?php
    $paged = get_query_var('paged');
    $args = array(
      'posts_per_page' => 10,
      'paged' => $paged,
      'orderby' => 'post_date',
      'order' => 'DESC',
      'post_type' => 'post',
      'post_status' => 'publish'
    );
  };
  //ここに絞り込みの結果を出力するphp
  $wp_query_time = new WP_Query($args);
  if ($wp_query_time !== false) {
    if ( $wp_query_time->have_posts() ) :
?>
      <ul class="wpp-list">
<?php
      while ( $wp_query_time->have_posts() ) :
        $wp_query_time->the_post();
?>
        <li class="wpp-post">
          <div class="post_list">
            <div class="post_list_left">
              <?php
                if (has_post_thumbnail() ){
              ?>
                <a href="<?php echo get_permalink(); ?>">
                  <?php the_post_thumbnail(); ?>
                </a>
              <?php
                }
              ?>
            </div>
            <div class="post_list_right">
              <p>
                <a href="<?php echo get_permalink(); ?>">
                  <?php echo get_the_title(); ?>
                </a>
              </p>
              <p>
                <?php the_excerpt(); ?>
              </p>
              <p>
                更新日:<?php echo get_the_date(); ?>
              </p>
            </div>
          </div>
        </li>
<?php
      endwhile;
?>
      <?php
      if (function_exists('responsive_pagination')) {
          $max_num_pages = $wp_query_time->max_num_pages;
          responsive_pagination($max_num_pages);
      }
      ?>
<?php
      wp_reset_postdata();
?>
    </ul>
```


※追記
色々探していたところ、[こちら](https://ja.wordpress.org/themes/minnow/)のテーマの動きを実装したいです。

※追記
[こちら](http://shinnoji.main.jp/jimen75th/blog/171)を参考に
```js
$(function (){
    //infinite scroll
    var prev_data_selector = '.previous a'; //「前へ」リンクのaタグのセレクタ
    var next_data_selector = '.next a'; //「次へ」リンクのaタグのセレクタ
    var itemWrapperSelector = '.wpp-list_main'; //無限ローディングのwrapperとなるタグのセレクタ
    var itemWrapper = $(itemWrapperSelector);
    var itemInnerSelector = 'li.wpp-post'; //無限ローディングの本体（本文）となるタグのセレクタ
    var itemPagerSelector = '.pagination'; //ページャーのセレクタ
    var itemPager = $(itemPagerSelector);
    var prev_data_url;
    var next_data_url;
    var next_data_cache;
    var prev_data_cache;
    var last_scroll = 0;
    var is_loading = 0;

    if(itemWrapper[0]) {
        prev_data_url = $(prev_data_selector).attr('href');
        next_data_url = $(next_data_selector).attr('href');
        fadeInItem(true);
        initPaginator();
        loadPrevious();
        // if we have enough room, load the next batch
        if ($(window).height()>itemWrapper.height()) {
          if (next_data_url!== '') {
            loadFollowing();
          }
        }
    }

    function initPaginator() {
        $(document).off( 'scroll');
      $(document).on( 'scroll', function(){
        // handle scroll events to update content
        var scroll_pos = $(window).scrollTop();
        if (scroll_pos >= 0.9*($(document).height() - $(window).height())) {
          if (is_loading===0) {
              loadFollowing();
          }
        }
        if (scroll_pos <= 0) {
          if (is_loading===0) {
              loadPrevious();
          }
        }
        // Adjust the URL based on the top item shown
        // for reasonable amounts of items
        if (Math.abs(scroll_pos - last_scroll)>$(window).height()*0.1) {
          last_scroll = scroll_pos;
          $(itemInnerSelector).each(function() {
            if (mostlyVisible(this)) {
              history.replaceState(null, null, $(this).attr('data-url'));
              return(false);
            }
          });
        }
      });
    }


    function loadFollowing() {
      if (next_data_url){
        is_loading = 1; // note: this will break when the server doesn't respond
        itemPager.hide();
        if (next_data_cache) {
          showFollowing(next_data_cache);
          is_loading = 0;
        } else {
            $.ajax({
                url: next_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(data){
                showFollowing(data);
                    is_loading = 0;
            });
        }
      }
    }
        function showFollowing(data) {
        var out_html = $($.parseHTML(data));
          itemWrapper.append(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML);
          initPaginator();
          next_data_url = out_html.find(next_data_selector).filter(next_data_selector).attr('href');
          next_data_cache = false;
            $.ajax({
                url: next_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(preview_data){
                next_data_cache = preview_data;
            });
        }

    function loadPrevious() {
      if (prev_data_url){
        is_loading = 1; // note: this will break when the server doesn't respond
        itemPager.hide();
        if (prev_data_cache) {
          showPrevious(prev_data_cache);
          is_loading = 0;
        } else {
            $.ajax({
                url: prev_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(data){
                showPrevious(data);
                    is_loading = 0;
            });
        }
      }
    }
        function showPrevious(data) {
        var out_html = $($.parseHTML(data));
          itemWrapper.prepend(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML);
          initPaginator();
          var item_height = $(itemInnerSelector + ':first').height();
          window.scrollTo(0, $(window).scrollTop()+item_height); // adjust scroll
          prev_data_url = out_html.find(prev_data_selector).filter(prev_data_selector).attr('href');
          prev_data_cache = false;
            $.ajax({
                url: prev_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(preview_data){
                prev_data_cache = preview_data;
            });
        }

    function mostlyVisible(element) {
      var scroll_pos = $(window).scrollTop();
      var window_height = $(window).height();
      var el_top = $(element).offset().top;
      var el_height = $(element).height();
      var el_bottom = el_top + el_height;
      return ((el_bottom - el_height*0.25 > scroll_pos) && (el_top < (scroll_pos+0.5*window_height)));
    }


    });
```
上記のコードを追加してみたところ、fadeInItemが未定義とのエラーが出てしまいました

無限スクロールでパーマリンクも変更したい

[このページのテレビが比較されているtableを特定したい](https://panasonic.jp/viera/products.html)

IE11
Excel2010
Windows10

やりたいこと
IEの無名のtableの特定をしてtableのテキストを取得したい。

tableはほかにもあるのでtable(0)では取得不可です。


下記のコードではどのテーブルが取得したいテーブルかがわからないため取得できる方法をご教示お願いいたします。
```vba
    Dim i As Integer
    i = 0
    For Each objTable In objIE.document.getElementsByTagName("table")
        Debug.Print objTable.Cells(i).innerText
        i = i + 1
    Next objTable
```

idやクラスを指定していないtableを特定する方法

### 前提・実現したいこと

Chrome Extension内でGoogleフォーム側でログイン必須だった場合、レスポンスを受け取るコードを書きたいと思っているですが、どなたかご教示いただければと思います。

### 該当のソースコード

```javascript
(function(){
    let query     = location.search;
    let url       = "https://docs.google.com/forms/d/e/XXXXXXXXXX/formResponse";

    let change = url + query;

    document.getElementById("sendData").src = change;

    document.getElementById("status").innerText = "送信が完了しました";
```

ログイン必須Googleフォームのレスポンスの受け取り方法

### 前提・実現したいこと
私は、webページ上で簡易的な座席予約システムを作成したいと考えています。
作成にあたり、
座席に見立てたボタンの配列の中で、希望の座席（ボタン）を選択し、決定ボタンを押すことで、リンク先のページで選択された座席（ボタン）の名前を確認できるようなプログラムは作成することができました。

そこで、今回は選択された座席のデータを次のページに飛ばすのではなく、Cookie（データベース）に保存して、確認ページでCookieからそのデータを呼び出す方法を教えていただければと思います。
よろしくお願いいたします。






最終的には蓄積されたデータをもとに、すでに選択された座席を選択不可にすることで、座席が重複した選択されてしまうことを防ぐプログラムを作成したいと考えています。

### 現状できている画面
1:座席選択ページで希望の座席を選ぶ
![イメージ説明](26d1271acfb74fa66aab88161f2c26cf.png)
↓
2:選択された状態で確認ボタンを押す
![イメージ説明](5356c7197c0eb57a033e4f2c8c8a41f4.png)
↓
3:表示されたウィンドウのOKボタンを押し、リンク先のページで改めて選択された座席の番号を確認する。
![イメージ説明](a71c9cfd760ecccb7db7cbeef182bde6.png)
というような感じです。
座席を選択した状態で確認ボタンを押すことでCookie（データベース）にデータを蓄積したいと考えています。
また、とりあえず、別ページ（確認ページ）で蓄積されたデータを呼び出し、確認できるようにしたいと考えています。
よろしくお願いいたします。

### 該当のソースコード
```php
<?php
foreach(range("A","C") as $r){
  foreach(range(1,5) as $c){
    print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>";
  }
  print "<br>";
}
	?>
```
```php
<?PHP
$c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
if(!is_nul![イメージ説明](342ec36d91231eebd24c2b2128705731.png){
  print "選択された座席:".implode(",",$c)."<br>";

}
?>
```

```css
<style>
[name="c[]"]{display:none;}
[name="c[]"]:checked + .cx{background-Color:yellow;}
</style>
```


```javascript
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#f1').addEventListener('submit',function(e){
    var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){
      return x.value;
    }).join(",");
    if(c===""){
      alert("座席を選択してください。");
      e.preventDefault();
    }else{
      if(!confirm(c+" が選択されています。よろしいですか?")){
        e.preventDefault();
      }
    }
  });
  [].forEach.call(document.querySelectorAll('.cx'),function(x){
    x.addEventListener('click',function(e){
      var t=e.target;
      var n=document.querySelector('#c'+t.value);
      n.checked=!n.checked;
    });
  });
});
	</script>
```
```html
<input type="button" style="position: absolute; left: 35px; top: -5px; width: 250px; height: 35px; background-color: #ffffff; border-color: #000000" value="ステージ"><br><br><br>
```

Cookieを使用して複数のボタンのデータを蓄積し、そのデータを呼び出す方法

その場でしかグーグルフォームでの回答ができないように、グーグルフォームで回答できるWi-FiのIPの固定、もしくは位置情報を取得し、その場で操作をしていることを証明できるようなシステムを作りたいと考えています。
GASなどでグーグルフォームにそういった機能をつけることはできるのでしょうか