<script> function getCookie(name) { const cookies = document.cookie .split(';') // セミコロンで分割 .map(cookie => cookie.trim()); // 各クッキーをトリムして余分なスペースを削除 const targetCookie = cookies.find(cookie => cookie.startsWith(`${name}=`)); return targetCookie ? targetCookie.split('=')[1] : null; // 指定したクッキー名の値を取得 } const browserChecked = getCookie("browser_checked"); if (!browserChecked) { fetch(`check_browser.php?_=${new Date().getTime()}`, { method: "POST" }) .then(response => console.log("ブラウザ確認完了")) .catch(error => console.error("エラー:", error)); document.cookie = "browser_checked=1; max-age=3600; path=/"; } </script>
ブラウザキャッシュの影響
リクエストがキャッシュされていて、サーバーがリクエストを認識しない可能性があります。
対処法: リクエストURLにタイムスタンプを追加することでキャッシュを回避します。
check_browser.php
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { // カウンター更新処理 echo "ブラウザからのアクセスと確認されました。"; } ?>
document.cookie = "userType=admin; path=/blog/yuu/; expires=Fri, 09 May 2025 12:00:00 UTC"; document.cookie = "userType=; path=/blog/yuu/; expires=Thu, 01 Jan 1970 00:00:00 UTC"; <?php if (isset($_COOKIE["userType"])) { echo "Cookieの値: " . $_COOKIE["userType"]; } else { echo "Cookieが存在しません。"; } ?> <label> <input type="checkbox" id="cookieCheckbox"> 管理者モード </label> document.getElementById("cookieCheckbox").addEventListener("change", function() { const isChecked = this.checked; if (isChecked) { // チェックされている場合にCookieを設定 document.cookie = "userType=admin; path=/; expires=Fri, 09 May 2025 12:00:00 UTC"; console.log("Cookieを設定しました！"); } else { // チェックが外された場合にCookieを削除 document.cookie = "userType=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC"; console.log("Cookieを削除しました！"); } });
<input type="text" id="textBox" placeholder="文字を入力してください"> <script> function checkByteLength(inputElement, maxBytes) { const text = inputElement.value; let byteLength = new TextEncoder().encode(text).length; // バイト数を計算する if (byteLength > maxBytes) { const overBytes = byteLength - maxBytes; alert(`${overBytes}バイトオーバーです`); } } // 例: テキストボックスの入力イベントにバイト数チェックを追加 const textBox = document.getElementById("textBox"); textBox.addEventListener("input", () => checkByteLength(textBox, 50)); // 50バイトが制限 </script>
<input type="text" id="textbox" value="全選択されるテキスト">
const textbox = document.getElementById('textbox'); textbox.addEventListener('focus', () => { textbox.select(); });
主に以下の2種類があります：
共通鍵暗号（対称暗号）:
同じ鍵を使ってデータを暗号化・復号します。
例: AES（Advanced Encryption Standard）
利点: 処理が高速。
課題: 鍵を安全に共有する必要がある。
公開鍵暗号（非対称暗号）:
公開鍵で暗号化し、対応する秘密鍵で復号します。
例: RSA、ECC（Elliptic Curve Cryptography）
利点: 鍵を共有する必要がない（公開鍵は誰でも使える）。
課題: 処理が遅い。
公開鍵暗号の仕組み
公開鍵暗号では、以下のような流れでデータを保護します：
鍵ペアの生成:
公開鍵と秘密鍵のペアを生成します。
公開鍵は暗号化に使用され、誰でも利用可能です。
秘密鍵は復号に使用され、厳重に保管します。
暗号化:
公開鍵を使ってデータを暗号化します。
暗号化されたデータは、公開鍵に対応する秘密鍵でしか復号できません。
復号:
秘密鍵を使って暗号化されたデータを復号します。
公開鍵では復号できないため、秘密鍵が漏洩しない限り安全です。
1. 公開鍵は暗号化にしか使用されない:
公開鍵は暗号化のプロセスに使用されます。一方で、復号に必要なのは「秘密鍵」のみです。そのため、暗号化プロセスで使用された公開鍵がリロードによって更新されても、暗号化されたデータは生成された秘密鍵で復号可能です。
2. 暗号化データと秘密鍵の関係:
RSA（または非対称暗号）の仕組みにより、暗号化されたデータは公開鍵に対応する秘密鍵だけで復号できます。暗号化されたデータ自体は公開鍵の更新によって影響を受けません。つまり、元の秘密鍵を保持していれば復号が可能です。
3. 復号は新しい公開鍵に依存しない:
新しい公開鍵が生成されたとしても、復号処理ではその新しい公開鍵は使われません。復号時に必要なのは、暗号化時に使用された公開鍵に対応する秘密鍵です。この秘密鍵が正しく入力されていれば、暗号化されたデータを正常に復号できます。
4. 暗号化データの変更がない限り有効:
暗号化されたデータそのものが破損したり変更されたりしていない限り、元の秘密鍵を用いることで復号可能です。
公開鍵は暗号化にしか使用されない。復号時に必要なのは暗号化時の秘密鍵。
ビデオが終了した際にendedイベントが発火し、this.load()を呼び出すことでビデオをリロードし、ポスター画像を再表示します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Video Poster Example</title> </head> <body> <video id="myVideo" width="600" poster="poster.jpg" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <script> document.getElementById('myVideo').addEventListener('ended', function() { this.load(); // ビデオをリロードしてポスター画像を再表示 }); </script> </body> </html>
<form id="myForm" method="post"> <input type="radio" name="option" value="1" id="option1" checked> <label for="option1">Option 1</label> <input type="radio" name="option" value="2" id="option2"> <label for="option2">Option 2</label> </form>
document.addEventListener('DOMContentLoaded', (event) => { const form = document.getElementById('myForm'); const radioButtons = form.querySelectorAll('input[type="radio"]'); radioButtons.forEach((radio) => { radio.addEventListener('change', () => { form.submit(); }); }); });
<form id="myForm" method="post"> <div> <label for="pref">都道府県</label> <select id="pref" name="pref"> <option value="01">北海道</option> <option value="02" selected>青森県</option> <option value="03">岩手県</option> </select> </div> <div> <label for="comment">コメント</label> <textarea id="comment" name="comment" required></textarea> </div> <div> <button type="submit">登録</button> </div> </form>
document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // デフォルトのフォーム送信を防ぐ var pref = document.getElementById('pref').value; var comment = document.getElementById('comment').value; fetch('submit.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'pref=' + encodeURIComponent(pref) + '&comment=' + encodeURIComponent(comment) }) .then(response => response.text()) .then(data => { alert('データが正常に送信されました'); }) .catch(error => { console.error('エラーが発生しました:', error); }); });
submit.php
<?php $servername = "localhost"; $username = "your_username"; $password = "your_password"; $dbname = "your_database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("接続に失敗しました: " . $conn->connect_error); } $pref = $_POST['pref']; $comment = $_POST['comment']; $sql = "INSERT INTO your_table (pref, comment) VALUES ('$pref', '$comment')"; if ($conn->query($sql) === TRUE) { echo "新しいレコードが作成されました"; } else { echo "エラー: " . $sql . "<br>" . $conn->error; } $conn->close(); ?>
function isEdge() { return /Edge/.test(navigator.userAgent); } if (isEdge()) { console.log("This is Edge browser."); } else { console.log("This is not Edge browser."); }
shuffledString = string.split('').sort(() => .5 - Math.random()).join('');