活用情報

パスワード認証ページの作成方法

パスワードを入力することで、会員など限られた人だけに入れるページ（ここでは、「パスワードページ」と呼びます）の作成方法です。

1. パスワードページを作成します。

2. 半角英数字でパスワードを決めます。

3. ページのプロパティを開き、「詳細」欄にパスワードを入力します。

4. ページメニューで、このページを「ナビゲーションに表示しない」に設定します。

5. 次に、パスワードを入力するログイン画面を作成します。ページのどこかでも良いですし、専用のページを作る方法もあります。（例：下図のようなテキストを用意する）

6. その下に挿入メニュー「埋め込む」から「埋め込みコード」を使って、次のコードを入力し（コピペ）、赤字部分を修正します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<form name="myform" id="loginForm">

 <input type="password" name="PW" id="passwordInput" placeholder="パスワードを入力">

 <input type="submit" value="ログイン" />

</form>

<script>

 document.getElementById('loginForm').addEventListener('submit', function(event) {

    event.preventDefault(); // 自動リフレッシュを防ぐ

    var pw = document.getElementById('passwordInput').value;

    // パスワードが空の場合は処理しない

    if (!pw) return; 

    var targetUrl = "https://sites.google.com/view/****/" + pw;

    // 【解決策】新しいタブ（ウインドウ）でページを開く

    window.open(targetUrl, '_blank');

 });

</script>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

赤字部分の例として、パスワードページ（ページのプロパティ＝pspage）、「https://sites.google.com/view/gsdehp/login/pspage」の場合は、

上記コードの****赤字部分を「https://sites.google.com/view/gsdehp/login/」と

入力し「次へ」から「保存」します。

PDFフォームの活用

事業案内や広報紙やパンフレットなどPDFをHPに貼り付ける事は多いと思います。何らかの募集を行う場合は、案内と共に申込用紙もPDFで貼り付けることもあります。

通常のPDF申込用紙に記入するためには、ダウンロードした方がAcrobatなど記入が可能なアプリ・ソフトが無いとできません。

しかし、PDFフォームを使うとPCにはほぼ入っているAcrobatリーダーでも記入が可能となります。

左側のPDFをクリックしてからダウンロードしてください。そして、ダウンロードファイルをAcrobatリーダーで開くと、右図のようにハイライト表示されます。

ハイライト部分はクリックして入力できます。

PDFフォームを作るには有料版のAcrobatが必要になります。

PDFデータをAcrobatの編集モードからフォーム作成で簡単につくることができます。自動で空白部分を認識して作成してくれます。空白部分の状態で完全ではないので、多少不要部分の削除や移動・拡大縮小は必要ですが、それほど手間はかかりません。

Acrobatをお持ちの方は試してみてください。なお、無料で作成できるツールもあります。