カスタムコードStudio

特定ページだけパスワード保護する方法｜『Studio』実装ガイド🔐

ノーコードWeb制作ツール『Studio』で特定ページだけをパスワード保護する方法を解説✨ SHA-256暗号化で安全に会員専用ページを実装できます🔐

公開 2025年10月28日更新 2025年12月30日読了目安約10分

「サイト全体」ではなく「このページだけ」にパスワードをかけたい…そんな時、ありませんか？🤔

実は『Studio』の有料プランなら、ちょっとしたカスタムコードを使って特定ページのみのパスワード保護が実現できるんです👏

今回は、実際にクライアント様からのご要望で制作した「会員専用ページ」の実装例をもとに、手順と仕組みをわかりやすく解説します✨

⚠️ 注意事項（必ずお読みください）
本記事で紹介している方法は、「簡易的なアクセス制御」を目的とした実装です。その仕組み上、パスワードはブラウザ上で処理され、十分なセキュリティを保証するものではありません。

以下のようなケースでは本実装は適していません。

機密情報・個人情報を扱うページ

契約情報・顧客データ・社内共有資料などを含むページ

高度な認証・セキュリティが必要な場合は、Studio公式が提供する「カスタムプロキシアドオン」のご利用を推奨します。当Tipsはあくまで限定公開や軽微な共有用途を想定した参考実装です。ご利用の際は、情報の取り扱いに十分ご注意ください。

1. 『Studio』のパスワード保護機能とは🔐

『Studio』の有料プランでは、管理画面の「公開設定」からサイト全体にパスワードを設定することが可能です。閲覧者はパスワードを入力しないとサイト全体のページを見られない仕組みになっています。

ただし、この方法ではすべてのページが保護対象になるため、「会員専用ページだけを保護したい」「一部のページだけを限定公開にしたい」といったケースには不向きです。

2. ページ単位でパスワードをかけたいケース💡

実際のWeb制作現場では、こんなケースで「ページ単位の保護」が必要になります。

ユーザー登録者向けのデータ配布ページ
会員限定のコンテンツ配信ページ
イベント資料の公開ページ

こうした場合、「トップページやサービスページは公開したいけど、特定ページだけ制限したい」というニーズが非常に多いんです。

3. 実装の仕組み🧠

今回の方法では、共通パスワードを設定しておき、そのパスワードが正しく入力されたユーザーのみが対象ページを閲覧できるようにします。ポイントはこの2つです。

認証情報をlocalStorageに保存しておく
各ページでその認証情報を確認して、未認証ならログインページへリダイレクト

つまり、「一度パスワードを入力したら、同じブラウザ内のセッション中は再入力不要」という流れです✨

4. 実際のコードと設定手順💻

🔸ログインページを作成

① 新規ページ追加でログインページを作成し、パスを/loginに設定

② ログインに必要になる共通パスワードを作成します。

今回はSHA-256を使って共通パスワード（認証情報）をlocalStorageに保存しておきます。暗号化された共通パスワードは下記の方法で簡単に生成できます。

ChromeやSafariなどで任意のページを開く
⌘ + Option + I（Mac）またはF12（Windows）で開発者ツールを実行して「コンソール」を開く
下記のコードを貼り付けて実行（エンターキーを押してください）※あなたのパスワードをご自身の共通パスワードへ書き換えてご使用ください

(async()=>{
  const text = "あなたのパスワード"; // ここを書き換える
  const enc = new TextEncoder().encode(text);
  const buf = await crypto.subtle.digest("SHA-256", enc);
  const hex = Array.from(new Uint8Array(buf)).map(b=>b.toString(16).padStart(2,"0")).join("");
  console.log(hex);
})();

出力された文字列が暗号化された共通パスワードです。これをコピーして、次の手順で使用するカスタムコードのPASS_HASH_HEXに貼り付ければOKです👍

③ ログインページのページ設定でカスタムコードをセット

以下のコードをコピーして、<body>内の末尾に下記コードを貼り付け。カスタムコード内のPASS_HASH_HEXに前の手順で出力された共通パスワードを書き換える。

<script id="shared-pass-login-script">
(function(){
  if (window.__shared_pass_login_loaded__) return;
  window.__shared_pass_login_loaded__ = true;

  var PASS_HASH_HEX = "ここに出力されたパスワードを入力してください"; // ← "password" のSHA-256値
  var REDIRECT_URL  = "/member"; // 認証後に移動するページ
  var TOKEN_KEY     = "shared_pass_granted_v1";

  // 認証済みなら即リダイレクト
  if (localStorage.getItem(TOKEN_KEY) === "1") window.location.href = REDIRECT_URL;

  function $(id){ return document.getElementById(id); }
  var input = $("sp_input"), btn = $("sp_btn"), msgEl = $("sp_msg");

  function showMsg(t, ok){ if(msgEl){ msgEl.textContent=t; msgEl.style.color=ok?"#0a0":"#c00"; } }

  function sha256Hex(text){
    var enc = new TextEncoder().encode(text);
    return crypto.subtle.digest("SHA-256", enc).then(buf => 
      Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2,"0")).join("")
    );
  }

  function enter(){
    var val = input.value.trim();
    if(!val){ showMsg("パスワードを入力してください。"); return; }
    btn.disabled = true;

    sha256Hex(val).then(hex => {
      if(hex === PASS_HASH_HEX){
        localStorage.setItem(TOKEN_KEY,"1");
        showMsg("認証OK！移動します…",true);
        setTimeout(()=>window.location.href=REDIRECT_URL,350);
      }else{
        showMsg("パスワードが違います。");
        input.value=""; input.focus();
      }
    }).finally(()=>btn.disabled=false);
  }

  btn.addEventListener("click", enter);
  input.addEventListener("keydown", e=>{ if(e.key==="Enter") enter(); });
})();
</script>

④ ログインページに下記3つのパーツ要素をエディタで追加し、それぞれにIDを付与します。

パスワード入力欄｜ID sp_input
ログイン実行ボタン｜ID sp_btn
メッセージ表示｜ID sp_msg

🔸 保護対象のページ側を作成

① 新規ページ追加で保護ページを作成し、パスを/memberに設定

② 保護ページのページ設定でカスタムコードをセット

以下のコードをコピーして、<body>内の末尾に下記コードを貼り付け。ログアウトボタンを設置する場合（任意）は、エディタ上でボタンパーツを追加してIDをlogout_btnと設定し、下記のカスタムコードを<body>内の末尾に貼り付ける。

<script id="shared-pass-guard">
(function(){
  var TOKEN_KEY = "shared_pass_granted_v1";
  var LOGIN_URL = "/login";
  if (localStorage.getItem(TOKEN_KEY) !== "1") {
    window.location.href = LOGIN_URL;
  }
})();
</script>

会員ページ内に「ログアウト」ボタンを設置する場合は下記も追加します。

<button id="logout_btn">ログアウト</button>

<script id="shared-pass-logout">
(function(){
  var TOKEN_KEY = "shared_pass_granted_v1";
  var btn = document.getElementById("logout_btn");
  if(!btn) return;
  btn.addEventListener("click", function(){
    localStorage.removeItem(TOKEN_KEY);
    window.location.href = "/login";
  });
})();
</script>

これで「特定ページだけを守るパスワード制限」が完成です！🎉

5. 暗号化（SHA-256）の仕組み🔐

🔸SHA-256とは？

SHA-256（Secure Hash Algorithm 256-bit）は、パスワードを一方向に変換する暗号化アルゴリズムです。入力（例：password）をハッシュ化すると、次のような長い文字列が生成されます。

5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8

この文字列は元のパスワードに戻すことができません（不可逆変換）。つまり、コード内にこの値を保存しても、パスワード自体が漏れることはありません。

6. 注意点と応用アイデア⚙️

この仕組みは共通パスワード制限に最適です。
個別ユーザーごとのログイン管理が必要な場合は、Firebase認証など外部連携が必要になります。
パスワードは一度入力すれば同ブラウザ内では保持されますが、別ブラウザ・別端末では再入力が必要です。
ログアウト処理を用意しておくと、共有端末でのセキュリティを確保できます。

⚠️ 注意事項（必ずお読みください）
本記事で紹介している方法は、「簡易的なアクセス制御」を目的とした実装です。その仕組み上、パスワードはブラウザ上で処理され、十分なセキュリティを保証するものではありません。機密情報・個人情報・契約情報・顧客データなどを扱うページには適していません。高度な認証・セキュリティが必要な場合は、Studio公式が提供する「カスタムプロキシアドオン」のご利用を推奨します。

7. まとめ🌟

『Studio』の有料プランなら、ほんの数行のカスタムコードを使うだけで、「特定ページだけをパスワード保護」する仕組みを実装できます🔒

さらに、SHA-256でパスワードを安全にハッシュ化することで、セキュリティを保ちながら会員向けページや限定公開ページを簡単に作れるのが魅力です。クライアントワークでも「限定公開ページがほしい」というリクエストはよくあるので、この仕組みをひとつ覚えておくと提案の幅がグッと広がります👏