読み込み中...

chevron_left Lanama

News&Updates

Kohaku

Outlineに「このスクリプトでのCookie利用について」を追加

最新: v1.0.0

Outline

Kohaku.phpとは

kohaku.phpは、個人サイトの特定のページに簡易的な鍵をかけるPHPスクリプトです。

認証されていないときは、Kohaku.phpによってパスワード入力ページのみを出力するという処理が行われます。

デモページ

Kohaku.phpの特徴

  • スクリプト本体ファイル1つにパスワードリスト、フォーム、フォームのスタイル設定など一式揃っている
  • 鍵かけ対象のページだけをPHPにすればよいので、サイト内で鍵をかけない部分はHTMLファイルのままでOK
  • ページ単位でパスワードのヒントとパスワードを設定
  • サーバー側でパスワードを定義するので、閲覧者にパスワードリストは見えない
  • ブラウザを閉じるまでor一定時間の間は何度もパスワードを入れなくてOK(サーバ設定によります)
  • パスワード入力フォームは本体スクリプトの中に作成済みなので準備不要
  • URLの拡張子を見せないサイトにも対応(確実に動く保証はないです)
  • パスワード入力フォームのボタンカラーは変更可能
  • 隠したいページ側で鍵のプログラムを読み込むので、ページに直接アクセスしても鍵が機能する

Kohaku.phpの注意点

  • 厳重な認証機能ではないため、個人情報などの重要な情報の保護には向きません
    (パスワード暗号化や二段階認証等は無いのでワンクッション程度のものです)
  • レンタルサーバー等の環境によっては、意図した動作が行われない場合があります
  • ページがPHPになるため、オフラインのパソコンで動きを確認するにはPHPの動く環境が必要になります
    (オフラインでの確認はしなくてOK、という場合は準備必須ではないです)
  • フォルダやサイト全体を一括で鍵かけするものではありません
  • ご利用中のサーバがPHP非対応、または古いPHPだと動かせません(PHP8.0以上推奨)
  • WordPressなどのCMSには導入できません
  • タグ打ちとファイルアップロードが必要なので、これらに関する知識は必要です
  • ディレクトリ区切りのレンタルサーバでは使用できません
  • ディレクトリ区切りのレンタルサーバで発生する問題

    https://〇〇〇.〇〇/XXXX このようなサイトURLのXXXX以下が割り振られるようなレンタルサーバでは、kohaku.phpでの認証状態がサイト間で共有できてしまいます。同じファイル名で認証したページは他の人のページでも認証済みになる等の問題が起きますので使用しないでください。

    独自ドメインやサブドメインを割り当てられる場合は問題ありません。詳しくは「使い方についてのQ&A」のQ4「ディレクトリ区切りのレンタルサーバではどうして使用できないのですか?」を参照してください。

導入にあたって必要なもの

  • 鍵をかけたいページのhtmlファイル(内容によっては既にphp化されていてもOK)
  • htmlファイルなどを編集できる何らかのエディタ(メモ帳でも可)
  • PHPの動作テストができる環境(無くても可)
  • htmlをアップロードするときに使うファイルアップロードツール

このスクリプトでのCookie利用について

  • セッション管理のため、ファーストパーティCookieを使用しています(他サイトにCookieを渡すことはありません)。
  • 入力内容や個人を特定できる情報は保持しません。
  • ブラウザでCookieを無効にしている場合、正常に動作しないことがあります。

License

Kohaku.phpはMITライセンスです。

  • 自由にソフトウェアを利用、コピー、改変、再配布することができます。
  • ソフトウェアを商用利用することも可能です。

ただし、以下の条件を守る必要があります。

  • 著作権表示をコード内に含めること。(プログラム上部に書いてあるコメントは消さないでください)
  • このソフトウェアは「現状のまま」提供されており、いかなる保証もありません。
kohaku.php ver 1.0.0
Author: Mizuna Shima
Release Date: November 4, 2024
https://lanama.net/scripts/kohaku/

MIT License

Copyright (c) 2024 Mizuna Shima

Permission is hereby granted, free of charge, to any person obtaining a copy 
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Download

Kohaku.phpのダウンロード

鍵かけ対象のコンテンツサンプルも含めてダウンロードする場合はこちら

サンプルファイルごとダウンロード

kohaku.php本体のみダウンロードする場合はこちら

スクリプト本体のみダウンロード

Guide

Kohaku.php導入の流れ

Kohaku.phpは以下のステップで導入することができます。

  1. スクリプトをダウンロード
  2. 鍵かけ対象ページのHTMLファイルの拡張子を.phpに変更
  3. 鍵かけ対象ページで規定のスクリプトを読み込む(4行)
    <?php
    define('USE_KOHAKU', true);
    require 'kohaku.php';
    ?>
  4. kohaku.phpの中の設定コードを必要に応じて変更、パスワードもスクリプト内に書きこむ(↓の他に数個あります)
    $settings = [
      // パスワードが違うときに表示するエラーメッセージ
      'error_message' => 'パスワードが違います',
      // パスワード入力フィールドが空のときに表示しておくテキスト
      'placeholder' => 'パスワード',
      // 送信ボタンのテキスト
      'submit_button_text' => '送信',
      // パスワードダイアログ内に表示するテキストリンク
      'back_link_text' => '',
      // パスワードダイアログ内に表示するテキストリンクのリンク先
      'back_link_url' => ''
    ];
    
    $pages = [
      'novel' => [
        'hint' => 'リンゴを英語で書くと?',
        'password' => 'apple',
      ],
    ];
    
  5. サーバにアップロード

基本的な使い方の詳しい手順は次のTutorialをご覧ください。

Tutorial

1. スクリプトをダウンロード

  1. Downloadからスクリプト本体のみダウンロード

    完成イメージを見たい場合はサンプルファイルごとダウンロードしてください

  2. ファイルを解凍し、フォルダの中身を確認
    • kohaku.php:本体スクリプト。共通設定、各ページのパスワード情報もこちらに書きます。
  3. 鍵かけ対象のファイルと同じフォルダに配置

    こだわりが無い限り、スクリプトは鍵かけ対象のページのファイルと同じ階層のフォルダに配置してください。同じフォルダに入れておくと、呼び出しのコード指定がシンプルで楽になります。

2. 鍵かけ対象ページのHTMLファイルの拡張子を.phpに変更

  1. 鍵をかけたいページのhtmlファイルを用意

    作成例は以下です。

  2. <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Kohaku.phpサンプル</title>
    </head>
    <body>
      <h1>白鳥の妖精</h1>
      <p>湖にいる白鳥の妖精は「アストラ」と呼ばれて親しまれています。</p>
      <p>アストラの歌声は人々の心を癒し、国王さえも存在を知っているほどです。</p>
    </body>
    </html>
    

    解説ではファイル名をnovel.htmlとしますが、ご自身のサイトの運用ルールに合わせたファイル名.htmlで構いません。
    文章やデザインはこの時点で完成させておいてください。

    この後の工程では、PHP環境のないパソコン上ではオフラインのWebページとして開けなくなります。
    後で編集したいかも、という場合はhtmlファイルのバックアップをとっておくと良いです。

  3. HTMLファイルの拡張子を.phpに変更

    例:novel.html → novel.php

    もし他のページからリンクを貼っている場合は、リンクの拡張子も変更します。
    例:<a href="novel.html"> → <a href="novel.php">

    ひとつ前の手順で拡張子を変えた、鍵かけ対象のphpファイルをエディタで開きます。

3. 鍵かけ対象ページで規定のスクリプトを読み込む

  1. エディタで鍵かけ対象phpファイルを開く

    ひとつ前の手順で拡張子を変えた、鍵かけ対象のphpファイルをエディタで開きます。

  2. phpファイルの先頭に追記

    コードを先頭に追記します。
    これはサーバ側で実行するphpプログラムの記述です。kohaku.phpの動作に必要なコードと、読み込みコードです。

    <?php
    define('USE_KOHAKU', true);
    require 'kohaku.php';
    ?>

    既にphpプログラムが含まれているファイルで導入する場合は、<?phpのすぐ下に上記コードの2行目と3行目を追記してください。 ただし、他のPHPプログラムの内容によっては、うまく共存できずにエラーになったり既存のコードが動かなくなることがあります。

    本体スクリプトの配置場所が別のフォルダの場合は、ファイル名だけでなくパスも必要に応じて指定してください。

    以下のようにできたら上書き保存します。鍵かけ対象ページ側の編集はこれで完了です。

    <?php
    define('USE_KOHAKU', true);
    require 'kohaku.php';
    ?>
    
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Kohaku.phpサンプル</title>
    </head>
    <body>
      <h1>白鳥の妖精</h1>
      <p>湖にいる白鳥の妖精は「アストラ」と呼ばれて親しまれています。</p>
      <p>アストラの歌声は人々の心を癒し、国王さえも存在を知っているほどです。</p>
    </body>
    </html>
    

4. kohaku.phpを編集

  1. エディタでkohaku.phpファイルを開く

    ダウンロードしておいた本体スクリプトをエディタで開きます。

  2. ダイアログ出力共通設定を必要に応じて変更

    パスワード入力フォームの共通設定を確認・変更します。

    コードの中から↓の部分を探します。

    // ダイアログ出力共通設定
    $settings = [
      // パスワードが違うときに表示するエラーメッセージ
      'error_message' => 'パスワードが違います',
      // パスワード入力フィールドが空のときに淡く表示しておくテキスト
      'placeholder' => 'パスワード',
      // 送信ボタンのテキスト
      'submit_button_text' => '送信',
      // パスワードダイアログ内に表示するテキストリンク
      'back_link_text' => '',
      // パスワードダイアログ内に表示するテキストリンクのリンク先
      'back_link_url' => ''
    ];

    各行の右側にあるクォーテーション「'」2つの間に任意の設定を書きます。

    パスワード入力ページにはリンクが一切ないので、もし利便性を上げるのであれば下2つのリンク系は設定を入れておくのがおすすめです。リンクを用意したくない場合は変更しなくても問題ありません。
    ちなみに、リンク設定についてはページごとのパスワード設定の際に上書き可能です。

    全体的に変更する例:

    // ダイアログ出力共通設定
    $settings = [
      // パスワードが違うときに表示するエラーメッセージ
      'error_message' => 'パスワードが違います。別のパスワードを入力してください。',
      // パスワード入力フィールドが空のときに表示しておくテキスト
      'placeholder' => 'password',
      // 送信ボタンのテキスト
      'submit_button_text' => '送信する',
      // パスワードダイアログ内に表示するテキストリンク
      'back_link_text' => 'サイトトップに移動する',
      // パスワードダイアログ内に表示するテキストリンクのリンク先
      'back_link_url' => 'https://サイトのURL'
    ];
  3. その他の共通設定を必要に応じて変更

    その他の共通設定を確認・変更します。

    コードの中から↓の部分を探します。

    // 待機時間(秒) 0にはしないでください
    $wait_time = 5;
    
    // パスワード入力inputのタイプ 0:テキスト表示 1:隠す
    // 1の場合は半角英数字と一部の記号しか入力できなくなるので、設定するpasswordに注意してください
    $input_pass = 1;
    
    // 送信ボタンの色
    $button_color = '#4878b2';

    ひとつずつ内容を確認します。

    待機時間 $wait_time は、パスワードが正しくなかったときに再送信が可能になるまでの時間です。変更したい場合は任意の自然数に書き換えてください。攻撃防止のため、0にはしないでください。

    ただし、サーバとブラウザの仕組み上、この待機時間をある程度回避する方法はあります。その点はご了承ください。

    $input_pass はパスワード入力の表示形式を設定するためのフラグです。以下を確認して、0か1を設定してください。

    • 1:入力内容が「●●●」のように隠されます。
      入力中に変換ができないので、パスワードに使える文字は制限があります。
    • 0:入力内容がそのまま表示されます。
      漢字などの文字も入力できますが、横から見ている人にも入力中の文字が見えます。

    送信ボタンの色 $button_color は、送信ボタンの色指定です。初期値は青系の色(#4878b2)になっています。変更したい場合は、お好きな色コード(例: #4CAF50 や #FF9800 など)にしてください。

  4. 鍵ページのパスワード設定

    鍵ページ個別の設定をします。

    コードの中から↓の部分を探します。共通設定より上にあります。

    $pages = [
      'novel' => [
        'hint' => 'リンゴを英語で書くと?',
        'password' => 'apple',
      ],
    ];

    $pagesの中に、鍵をかけたいページごとに「ヒント」と「パスワード」を設定します。

    • novel:以前の工程で作ったファイル「novel.php」の拡張子を除いたファイル名
    • hintの右側:入力フォームの上部に表示するパスワードのヒント
    • passwordの右側:パスワード

    サンプルファイルのパスワードは短いものを設定していますが、実際に設定するパスワードは長い方が推測されにくくなります。

    複数のページに鍵をかけるには、以下のように設定を追加します。

    novel.php、art.php、music.phpの3ページ分の設定をする例:

    $pages = [
      'novel' => [
        'hint' => 'リンゴを英語で書くと?',
        'password' => 'apple',
      ],
      'art' => [
        'hint' => '猫を英語で書くと?',
        'password' => 'cat',
      ],
      'music' => [
        'hint' => '犬を英語で書くと?',
        'password' => 'dog',
      ],
    ];

    特定のページだけ、フォーム内のリンクとURLを独自に設定することも可能です。
    例えば、music.phpだけ共通設定とは違う文字リンクとリンク先を設定したい場合、次のように書きます。

    $pages = [
      'novel' => [
        'hint' => 'リンゴを英語で書くと?',
        'password' => 'apple',
      ],
      'art' => [
        'hint' => '猫を英語で書くと?',
        'password' => 'cat',
      ],
      'music' => [
        'hint' => '犬を英語で書くと?',
        'password' => 'dog',
        'back_link_text' => '一覧ページに移動',
        'back_link_url' => 'https://XXXXXX.XXXXXX.XXXXXX/list.html',
      ],
    ];
    
    • 指定しない場合は、共通設定のリンクとURLが適用されます。
    • リンクは絶対パスやフルURLでの指定推奨です。

    保存したらkohaku.phpの編集は以上で完了です。鍵かけページを増やすときにはその都度$pagesに追記してください。

5. サーバにアップロード

  1. 新規のファイルと、修正した既存ファイルをアップロード

    kohaku.php、鍵かけ対象ページ、必要に応じてリンク元のファイルをサーバにアップロードしてください。

    kohaku.phpと鍵かけ対象ページは同じフォルダにアップロードする必要があります。
    ただし、手順の「3. 鍵かけ対象ページで規定のスクリプトを読み込む」で別フォルダ用に読み込みコードのパスを変更している場合は、任意のフォルダにkohaku.phpをアップロードしてください。

  2. 動作確認

    鍵かけ対象ページにアクセスして、鍵がかかっていること、鍵を解除してコンテンツが見られることを確認します。テキストリンクの設定を入れた場合はリンクもチェックします。

    鍵かけ対象ページのURLの拡張子は.htmlから.phpに変わっているので、アクセス先を間違えないようにご注意ください。

    うまく鍵がかかっていれば導入完了です。おつかれさまでした!

keyboard_control_key