ネタバレ隠し

最初から表示する「説明」と、ボタンを押すと表示する「ネタバレ」を設定し、それらを表示するページを作成します。

エディタ

プログラム

●(Sを)BASE64URLエンコードとは
  SをBASE64エンコード。
  それの「+」を「-」に置換。
  それの「/」を「_」に置換。
  それの「=」を空に置換。
  それを戻す。
ここまで。

●(Sを)BASE64URLデコードとは
  Sの「-」を「+」に置換。
  それの「_」を「/」に置換。
  それをBASE64デコード。
  それを戻す。
ここまで。

暗号化関数は『() => {
  const te = new TextEncoder();
  const td = new TextDecoder();
  const getKey = async (keyStr) => {
    const pbkdf2Key = await crypto.subtle.importKey(
      "raw",
      te.encode(keyStr),
      "PBKDF2",
      false,
      ["deriveKey"],
    );
    return await crypto.subtle.deriveKey(
      {
        "name": "PBKDF2",
        "hash": "SHA-256",
        "salt": te.encode("ネタバレ隠し"),
        "iterations": 10000,
      },
      pbkdf2Key,
      {
        "name": "AES-CBC",
        "length": 128,
      },
      false,
      ["encrypt", "decrypt"],
    );
  };

return { encrypt, decrypt };
}』を[]でJS関数実行。

●(KでSを)暗号化とは
  暗号化関数$encryptを[K, S]でAWAIT実行して戻す。
ここまで。

●(KでSを)復号とは
  暗号化関数$decryptを[K, S]でAWAIT実行して戻す。
ここまで。

「() => location.hash.replace(/^#/, "")」を[]でJS関数実行。
それを「,」で区切る。
引数はそれ。
もし、引数の要素数が2と等しいならば
  説明は引数@0をBASE64URLデコード。
  ネタバレデータは引数@1。
  それのラベル作成。
  それの「white-space」に「pre-wrap」をDOMスタイル設定。
  改行作成。
  ネタバレオープンボタンは「ネタバレを見る」のボタン作成。
  改行作成。
  ネタバレラベルは空のラベル作成。
  それの「white-space」に「pre-wrap」をDOMスタイル設定。

ネタバレオープンボタンのクリックされた時には
    説明でネタバレデータを復号。
    ネタバレラベルにそれをテキスト設定。
    ネタバレオープンボタンにオフをDOM有効設定。
  ここまで。
違えば
  「説明 (最初から見える)：」のラベル作成。
  改行作成。
  説明欄は空のテキストエリア作成。
  改行作成。
  「ネタバレ (ボタンを押すと見える)：」のラベル作成。
  改行作成。
  ネタバレ欄は空のテキストエリア作成。
  改行作成。
  実行ボタンは「ページ作成 (新しいタブで開く)」のボタン作成。

実行ボタンのクリックされた時には
    説明は説明欄のテキスト取得。
    ネタバレはネタバレ欄のテキスト取得。
    ネタバレ暗号は説明でネタバレを暗号化。
    URLは「() => new URL(location.href)」を[]でJS関数実行。
    URL$hashは「{説明をBASE64URLエンコード},{ネタバレ暗号}」。
    「(url) => window.open(url, "_blank", "noopener")」を[URL$href]でJS関数実行。
  ここまで。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ