Chapter 12

第一回「JavaScript講座::cookie」(6.15up!)

shiozumi
shiozumi
2022.06.15に更新

カリキュラム概要

さあ~、今回からは、JavaScriptの講座を学習して行きましょう! Jsの利用目的は、個々のページに機能を追加できることですね。特にページ全体を再読み込み(GET,POST)することなく、動的に変えられるのが、なにより、Jsの良いところです。(o^―^o)ニコ 今回は、自動スクロール機能について、説明して行きますが、クッキーの質問も出てきたので、こちらも合わせて、深堀して行きますね。

解説動画その1(はじめに概要~)

https://youtu.be/a92cxCVqbco

Q.「日報画面の自動スクロール機能がたまにオフになるのも、私だけなのでしょうか?」

A. ブログでの回答(R4.5.27)

考察その1(クッキーの期限と再読込み)

対応その1(クッキーが有効なら期限更新)

ぷちまとめ

それでは、実際にこのあたりのクッキーの検証も兼ねて、学習して行きましょう! とはいえ、みなさんも初めてですから、ひとつずつ、ゆっくり解説して行きますね! (o^―^o)ニコ

実際にブラウザーでクッキーを確認!

当たり前ですけど、これが(cookie)、どこに値が設定されているのか知らないと、デバッグできませんので、まずは、ここからですね~ (o^―^o)ニコ

解説動画その2(クッキーってどこにある?)

https://youtu.be/BHhsqzCBL1Y

Chrome の設定ページでの確認!

設定ページを表示するアドレス

chrome://settings/cookies/detail?site=192.168.61.10

chrome://settings/siteData

解説動画その3(ほんとの最初の一歩!)

https://youtu.be/gj-7jy4Vsjc

JaveScriptのプログラムの解説


// 下記のhtml ソースと一致させます!
// <input type="checkbox" name="auto_scroll" ~
//
var elements = document.getElementsByName('auto_scroll');

if (elements.length > 0)
{ 
  btnElem = elements[0];

    btnElem.onclick = function(e) {
      if( btnElem.checked ) {
          document.cookie = 'auto_scroll=checked; max-age=172800';
          console.log( "auto_scroll クッキーを設定しました。" );
          setTimeout(goto_scroll_main, 300);
       } else {
	
          // 有効期限を0に設定
          console.log( "auto_scroll クッキーを解除しました。" );
          document.cookie = 'auto_scroll=checked; max-age=0';
       }
       cookies_debug();
    };
    
    console.log("自動スクロール機能を追加しました!");
}

html のソース( チェックボタン )

<p>
    <input type="checkbox" name="auto_scroll" class="auto_scroll" checked>
    自動スクロール機能
</p>

// 補足
// name="auto_scroll" と、getElementsByName('auto_scroll') で、ワンセット!
// 

var elements = document.getElementsByName('auto_scroll');

この関数で、auto_scroll のチェックボックスのオブジェクトを取得できます。尚、Elemets という関数名の複数形の s の返り値は配列になりますのでご注意! elements[0] で、最初(配列の0番目)のオブジェクトを固定参照していますが、ちょっとお行儀が悪いので、getElementById() で、id="タグID" の方が、基本的にはオススメします!

関数 返り値 指定方法
getElementsByName() 配列で複数のオブジェクト name="xxx"
getElementById() 単一の参照オブジェクト id="xxx"
getElementsByClassName() 配列で複数のオブジェクト class="xxx"

実際のクッキー設定は、この1行です。

document.cookie = 'auto_scroll=checked; max-age=172800';

  1. 変数名 = 値 [ auto_scroll = checked ]
  2. 有効期限 = 値(秒数) [ max-age=172800 ]

解説動画その4

https://youtu.be/dXOxHgY7jNs

サンプル作成(実技練習その1)

それでは実際に、サンプルデモとして、お手軽な感覚で実演します。まずは、クッキーを設定してみましょう!

cookie_test_01.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
    <title>cookie_test_01.html</title>
</head>
<body>
<h1>cookie_test_01.html</h1>
<script>
    document.cookie = 'auto_scroll=checked; max-age=3600';
    console.log( "auto_scroll クッキーを設定しました。" );
</script>
</body>
</html>

解説動画その5

https://youtu.be/CZ2jjGMqe0w

Web Server for Chrome

https://goo.gl/q0QFjz

インストールすると、ここに入ります!

他のWebサーバーを使ってみたい方は、こちらを!

https://qiita.com/massie_g/items/2913066e596dae197539

解説動画その6

https://youtu.be/yjzccQYz-zk

サンプル作成(実技練習その2)

それでは実際に、サンプルデモとして、お手軽な感覚で実演しますね。checkboxボタンを作成して、JavaScriptで、on/offの値を拾って、まずはログに出力して見ましょう!

cookie_test_02.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
    <title>cookie_test_02.html</title>
</head>
<body>
<h1>cookie_test_02.html</h1>
<p>
    <input type="checkbox" name="auto_scroll" onchange="myfunc()" checked>
    自動スクロール機能
  <script>
    function myfunc() {
       console.log("クリックされました!");
    }
    </script>
</p>
</body>
</html>

解説動画その7

https://youtu.be/QDSXNS2i18k

サンプル作成(実技練習その3)

cookie_test_03.html
// 変更するプログラムのみです。先ほどのファイルを服して、以下の部分だけ、差し替えてください。
  <script>
    function myfunc() {
      var elements = document.getElementsByName('auto_scroll');
      if (elements.length > 0)
      { 
         var btnElem = elements[0];
         console.log( btnElem.checked );
         console.log("クリックされました!");
      }
      }
    </script>
// ここまで、差し替え!

var elements = document.getElementsByName('auto_scroll');

false の発音は、こちらを!

https://translate.google.co.jp/?hl=ja&tab=rT&sl=en&tl=ja&text=false&op=translate

まとめ

今回は、このあたりで終わりにして置きますが、プログラムが初めての方でも、なんとな~くでも、わかるように解説して見ましたけど、いかがでしょうか? 次回は、id="" class="" を使って行きますので、是非、時間と興味のある方は、受講してくださいね! あと、実際のスクロール機能の解説も、合わせて次回ですね。(o^―^o)ニコ

脚注
  1. みなさんの場合は、VPN経由だと、ovs-010.e-smile.local になると思いますし、証明書だと、happy.e-smile.ne.jp になりますね。chrome://settings/cookies/detail?site=happy.e-smile.ne.jp クッキーの設定ページが開けます! ↩︎