常連

注目の的

自己紹介

表題の件について、ご教示下さい。

### 今現在の状況
- [ ] Google Analytics は、ユニバーサルアナリティクスを使用しています。
- [ ] Google Tag Managerで、アナリティクスへデータを送信し、計測・分析をしています。
- [ ] アナリティクス上で見ているのは、PVやユニークユーザー数、クリックイベントの計測等、基本的なデータのみです。
- [ ] 当サイトではアドセンス等の広告の表示はありません。



---




### 今後の実装内容。やりたいこと。

個人情報保護法の施行が６月から始まります。
※当サイトはタイ国で日本人向けに配信しているサイトですが、個人情報保護法施行に関しては、日本やヨーロッパのそれと同じものと考えていただいて大丈夫です。

- [ ] Google Analytics をGA4に変更し、これまで通りデータ計測しつつ、クッキーレスにしたい。
- [ ] GoogleのConsent Mode、Google Tag Managerを使用し、ユーザーから同意を取得したい。同意画面はCookiebotの同意ツールで実装予定。
- [ ] 同意を拒否されても、アナリティクスでのPVやクリックイベントの計測を続けたい。つまり、これまで通り、全ユーザーのPVを取得し続けたい。


---


### 質問
GA4に変更すると、クッキーの同意が必要なくなり、同意を拒否された場合にも、GA4によるデータ収集が可能なのでしょうか？
また「同意拒否でもGA4ならデータ収集可能」といった内容について解説や参考になるサイト等ございましたら、ご教示頂ければ幸いです。

というのも、下記の記事で、「gtag.js および analytics.js では、Cookie を設定しなくても Google アナリティクスにデータを送信することができます。」とあります。
https://note.com/tanukiweb/n/n337b939ebfc1

---
> ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-23/089da2b3-034b-4c4d-b177-fd2159eb1c06.png)
---

これはつまり、同意ポップアップにて、クッキー使用を拒否された場合にも、最低限必要なPVやクリックイベントの計測はGA4で可能、という認識で大丈夫でしょうか？
あるいは、Cookiebotの同意ツールでクッキー収集を拒否されれば、GA4でのPVやイベントの計測はできない、ということでしょうか？



【個人情報保護法関連】Consent Modeを使用し、クッキーを使用拒否された場合のGoogle Analyticsの動作について、何も計測できなくなるのでしょうか？

### 前提・実現したいこと

ターミナルが何のコマンドも受け付けない状態なので、元に戻したい。

### 発生している問題・エラーメッセージ

ターミナルでvimを使いながらパスを通す作業をしていて，一度ターミナルを終了→再起動したところ，なぜかプロンプトが表示されず，何のコマンドも受け付けない状態になってしまいました．ただのメモ帳アプリみたいな状態に．
ウィンドウのタイトルバーを見ると，「Terminal ― login ― 80×24」という表示に．つまりシェルが読み込まれてないわけです．ターミナルの環境設定から起動時に開くシェルを絶対パス指定しようが何しようが状況は変わらず...
```

### 試したこと

http://kzm42.blog24.fc2.com/blog-entry-22.html
・こちらの記事と同じエラーが出ていたので、記事中のアドバイスに書いてあった「アクティビティモニタでportコマンドが見えたらkill」ということを試みようとしましたが、そもそもportコマンドを見つけることができていません。
・vscodeのターミナルから,vi ~/.bash_profileと入力した後→source ~/.bashrcをvimに記述→source ~/.bash_profileとしても治らず。

どなたか解決方法をご教授ください。

ターミナルがずっとlogin 80×24の状態です。$が表示されずメモ帳のようになっています。

先日、teratailサポートチームの方に前々から気になっていた`teratail`タグの扱いについて問い合わせ
を行い、その回答によって生じた疑問に対して質問をさせて頂きます。

問い合わせた内容としては、

**どういう状況において`teratail`タグを利用することを運営側では想定しているか**

というものです。

###teratailサポートからの回答

> いつもご利用ありがとうございます。teratailサポートチームです。

> この度は、お問い合わせありがとうございます。
teratailの使い方やteratailに関する疑問点に関しての質問のときに「teratail」タグをつけることを想定しております。このとき、プログラミングと無関係の内容であっても非推奨にはなりません。

> 今後もteratailをよろしくお願いいたします。

### 追記
~~上記の問い合わせ内容をteratail内に記載出来ないかと問い合わせた所、｢検討する｣とだけ返ってきたため、
運営さんの方から正式に記載されるまでの間、
上記の内容をteratail上でユーザーが自由に引用したり出来るように投稿させて頂いた意味もあります。~~
### 更に追記(2021/04/07)
[推奨していない質問｜teratail(テラテイル)](https://teratail.com/help/avoid-asking)の方に上記問い合わせ内容が追加されていましたので追記しておきます。

![イメージ説明](6ebcafb93bc4b5b35f67126271e524f9.png)




### 本題
現在、teratailのタグにはプログラミングと直接関係ないタグが複数存在します。
例を挙げると、`Photoshop`,`Illustrator`等のAdobe製品や、`Googleマップ`等のGoogle社のサービスでしょうか。

これらのタグは何かしらプログラミングに関連づけられていないと
「プログラミングに関係のない非推奨の質問」だと認識していましたが、

**`teratail`タグが許容されるならばこれらのタグとして用意されているものは
プログラミングと無関係な内容であっても非推奨にはならないのでは？**

と思い、質問させていただいた次第です。

なので、当質問に回答頂きたい内容としては、
- Q1.これまで上記のようなタグの付いた質問に対してどういう対応をされてこられたか
- Q2.上記のタグはプログラミングと関連していない質問でも許容されるべきか

の2点をお聞きしたいと思っております。

尚、問い合わせの内容に関しましてはサポートチームの方から
> >回答頂いた内容を公開することは構いませんでしょうか。
原文のままであれば問題ありません。

許可を頂いて質問させていただいてます。


### 2021/05/10追記
いつまでも受付中にするのもアレなのでクローズします。

現時点で1番+評価の高かった回答をBAにさせて頂きますが、
私としてはまだまだ多くの意見を聞きたいと思っているので回答はいつでもお待ちしております。

プログラミングには直接関係しないタグの付いた質問の扱いについて

### 前提・実現したいこと
プログラミング初心者です
お手柔らかにお願いします

モバイル用の画面でのハンバーガーメニューをつけたのですがクリック時に
ハンバーガーメニューの3本のうち中央が右へフェイドアウトしつつ上下の2本がクロスして✖印になるアニメーションをつけたいです。またもう一度クリックすれば元の状態に戻るようにしたいです。

### 発生している問題・エラーメッセージ
ｸﾘｯｸしている間はアニメーションで変化するのですが、マウスから指を離すとｸﾘｯｸ前の状態に戻ってしまいます

### 該当のソースコード
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>MyPortfolio</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <link rel="stylesheet" href="MyPortfolio.css">
</head>
<body>
  
  <header>
    <nav class="navbar navbar-expand-md  navbar-light">
      <div class="container-fluid">      
          <a href="#" class="navbar-brand">MY PORTFOLIO</a>
          <button class="navbar-toggler" data-toggle="collapse"  type="button" data-target="#menu">
            <a class="menu-trigger" href="#">
              <span></span>
              <span></span>
              <span></span>
            </a>
          </button>
          <div class="collapse navbar-collapse" id="menu">
            <ul class="navbar-nav ml-auto " >
              <li class="nav-item"><a href="#profile" class="nav-link">Profile</a></li>
              <li class="nav-item"><a href="#service" class="nav-link">Service</a></li>
              <li class="nav-item"><a href="#works" class="nav-link">Works</a></li>
              <li class="nav-item"><a href="#policy" class="nav-link">Policy</a></li>
              <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
          </div>      
      </div>
    </nav>
  </header>


  


  


  


  


  


  


  


  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
```
```CSS
*{
  box-sizing: border-box;
  list-style: none;
}

/* ヘッダー */
.navbar-light .navbar-toggler {
  border-color: rgba(0, 0, 0, 0);
}
*:focus {
  outline: none !important;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 30px;
  height: 25px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 12.5px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

button:active span:nth-of-type(1) {
  -webkit-transform: translateY(0px) rotate(-45deg)!important;
  transform: translateY(14px) rotate(-45deg)!important;
}
button:active span:nth-of-type(2) {
  left: 200%;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0!important;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0!important;
  }
}
button:active span:nth-of-type(3) {
  -webkit-transform: translateY(-0px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}
```
### 試したこと

全くわからなかったのでスペルミスを確認したり
button:activeの部分を.menu-trigger:activeに変更したんですが変わりませんでした。

説明不足の部分もあるかもしれませんがよろしくお願いします

ハンバーガーメニューのｸﾘｯｸ時のアニメーションがｸﾘｯｸ後に戻ってしまう

質問は2つありまして、
1つ目

z-indexの自分用のテストページで（以下）、
http://kazan.bakufu.org/z-index_test/z-index_test.html

最近流行りのダークモード（ファイアフォックスのアドオンで白っぽい部分を黒っぽくして眩しさを軽減するもの）をオンにするとz-indexの-1にCSS設定している、class名green-boxが見えなくなりました。ダークモードをオフにすると現れます。
同ページ内の上部CSSでbocyのカラーは＃333333で設定しています。
対処法などありますでしょうか？


2つ目

上記テストページでは子要素（green-box）にpositionとz-index -1を指定して親（Base box）を前面に出しています。red-boxにも同様にして値を-2とすれば2つの子要素の前面に親が表示されます。このz-indexにマイナスを指定しない方法で、親を子よりも前面に表示させることはできますでしょうか？
1つ目の質問に少々関わりますが、マイナスを使わない方法だったらダークモードでもちゃんと表示されるのか試してみたいと思っています。

下記ページを読みました。
https://qiita.com/guimihanui/items/f88ac214a930dc512d5f
ここではz-indexマイナスで親を子の前面に出す方法ですが、これではない方法を探しています。

宜しくお願いします。

最近流行りのダークモードではz-indexの-1をかけた部分が消える？

現在私はnode.jsを使ってサーバ側のjsファイルを書いていますが、文が多くなったため
jsファイルを分けたいと考えているのですが、ファイルを複数作っても問題ないか・作り方が分からないためご教授願えないでしょうか？
よろしくお願いします。

node.jsにてサーバ側のjsファイルを複数作りたい

#1.実現したいこと
スクロールすることでグローバルナビエリアがウィンドウ上部に固定され、ヘッダー高さが縮小される

#2.現状の問題
グローバルナビを固定したいタイミングでclassをつけることで上記を実現しています。
グローバルナビが固定されたタイミングでコンテンツにグローバルナビの高さ分余白をつけることでスクロールのスピードが早い場合は違和感なく表示されるようにしています。
現状の問題点として、グローバルナビが固定された位置からわずかにスクロールされた場合、グローバルナビの高さが取得できず（console.logにて出力し確認すると縮小前の高さしか取得できていませんでした）、余白ができてしまう状態です。上記の問題を解決したく質問させていただきました。
![イメージ説明](b20cb7c07f4f856de5dfe12a57da56d9.png)

#3.コード
```HTML
<body>
	<div class="wrapper">
		<header id="header" class="">
			<div class="header-nofixed">
				<p>非固定エリア</p>
			</div>
			<div class="header-fixed">
				<nav class="header-nav">
					<ul class="header-nav-links clearfix">
						<li><a href="#section1">section1</a></li>
						<li><a href="#section2">section2</a></li>
						<li><a href="#section3">section3</a></li>
						<li><a href="#section4">section4</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<div class="main">
			<section class="section-wrap" id="section1">
				<div class="contents-outer">
					<p>---section1---</p>
				</div>
			</section>
			<section class="section-wrap section-sec" id="section2">
				<div class="contents-outer">
					<p>---section2---</p>
				</div>
			</section>
			<section class="section-wrap" id="section3">
				<div class="contents-outer">
					<p>---section3---</p>
				</div>
			</section>
			<section class="section-wrap section-sec" id="section4">
				<div class="contents-outer">
					<p>---section4---</p>
				</div>
			</section>
		</div>
		<footer  id="footer">
			<div class="footer-inner">
				<p>&copy; xxx.All Rights Reserved.</p>
			</div>
		</footer>
	</div>
</body>
```
```css
@charset "UTF-8";
.contents-outer {
    min-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
}
/* ---- common ---- */
img {
	width: 100%;
	height: auto;
}

/* ---- header ---- */
#header .header-nofixed {
    padding: 5em 0;
    background-color: #ffffff;
    text-align: center;
}

#header .header-fixed {
    padding: 1.5em 2em;
    background-color: #dddddd;
    transition: 0.5s all ease;
}

#header .header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .header-nav ul li {
    float: left;
    padding: 0 2em;
}

/* ナビゲーションfixedスタイル */
#header .header-fixed.fixed {
    width: 100%;
    min-width: 1280px;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
    padding: 0.5em 0.5em;
}

/* ---- footer ---- */
#footer {
    position: relative;
}

#footer .footer-inner {
    width: 100%;
    padding: 1em 2em;
    background-color: #dddddd;
    text-align: center;
}

/* ---- contents ---- */
.section-wrap {
    background-color: skyblue;
    text-align: center;
    height: 700px;
}

.section-wrap.section-sec {
    background-color: #ffffff;
}

```
```JavaScript
$(function() {
	var $win = $(window);
	var $doc = $(document);
	var $header = $('#header');
	var $header_nofixed = $header.find('.header-nofixed');
	var $header_fixed = $header.find('.header-fixed');
	var $main = $('.main');

	// スクロール量
	var win_sc = $win.scrollTop();

	// 非固定エリア高さ
	var header_nofixed_height = $header_nofixed.outerHeight();

	// グローバルナビ高さ
	var nav_height = $header_fixed.outerHeight();

	function navFixed() {
		win_sc = $win.scrollTop();

		if (win_sc > header_nofixed_height) {
			$header_fixed.addClass('fixed');
            $header_fixed.css("left",-$win.scrollLeft());

            nav_height = $header_fixed.outerHeight();
			$main.css('padding-top',nav_height + 'px');
		} else {
			$header_fixed.removeClass('fixed');
			$main.css('padding-top','0');
		}
	};

	$win.scroll(function() {
		navFixed();
		showTopBtn();
	});

	$win.resize(function(){
		header_nofixed_height = $header_nofixed.outerHeight();
		nav_height = $header_fixed.outerHeight();
		navFixed(header_nofixed_height,nav_height);
	});


});

```