この章では、ログイン画面からログイン後のページへの遷移について、機能を実装していきます。

※この記事は執筆・公開から3年以上経過しています。記事の情報が古くなっている場合がありますのでご注意ください。

公開日時:2016/02/11 17:35
最終更新:2019/12/10 00:34

画面遷移の検証~ 365日の紙PHP(6日目)

昨日はスタイルシートを使ってログインフォームの体裁を整えました。

前回までで作成した画面

今日はログイン後に表示するページを作ってから、ログイン処理での画面遷移動作を検証してみたいと思います。

まず、NetBeans IDEを起動してからfirstLoginプロジェクトのソース・フォルダを右クリックし「新規」で「PHPのWebページ」を選びます。

ログイン後のWEBページの作成

index.phpの

タグで action に login.php を指定したので、ファイル名に login と入力し login.php を作成します(拡張子は自動で付きます)。

ファイル名の指定

終了をクリックすると login.php ファイルが作成され開かれます。

作成されたWEBページ

ここでは再び、タグの中にHTMLコードを記述します。

    <body>
        <h1>ようこそ</h1>
        <p>ログイン処理が成功しました。ようこそ●●さん。</p>
    </body>

<h1/>タグは見出しです。<h1/>から<h6/>までの6段階が設定できます。<h1/>は最上位の見出しで、1ページに1つだけ設定することが推奨されています。

<p/>タグは段落タグです。1つの文章の纏まりを指定します。

今はこれだけです。では、Apacheを起動してからNetBeans IDEの画面上部の緑の▲ボタンでindex.phpを実行し、実際の画面遷移を試してみましょう。

まず、昨日作ったログイン画面が開くので、何も入力せずに「送信」ボタンをクリックしてください。画面が遷移し、今作ったログイン後の画面が表示されることと思います。

完成したログイン後のWEBページ

これで準備が整いました。では、検証していきましょう。

JavaScriptによる入力チェック

ログイン画面をもう一度開きましょう。

先ほどはIDとパスワードに何も入力していないのに「送信」ボタンをクリックしただけでログインしてしまいました。

今度はIDかパスワード欄にカーソルを立て、Enterキーを押してみてください。またログイン後の画面に遷移してしまうことと思います。これは

今度はIDかパスワード欄にカーソルを立て、Enterキーを押してみてください。またログイン後の画面に遷移してしまうことと思います。これは<form/>内にsubmit(送信)を行うボタンがあると、Enterを入力しただけで自動で送信が行われるからです。

勿論、実際にはこの画面遷移の間にIDとパスワードが正しいかの判定をする処理をこの後記述することになるのですが、このようにIDとパスワードが入力されておらず明らかにログインできないことが分かっている状態でも認証処理を行うのは非常に無駄です。

ですから、IDとパスワードが入力されていない時は送信は行わず、エラーメッセージを表示するようにしましょう。

方法は2つあります。

違いは、Enterキーでも送信を行うかどうかです。ここは好みの問題になってしまいますが、IDを入力してEnterを押したら意図せず入力チェックが行われてエラーメッセージが出た、というのは鬱陶しいので(そういうシステムが沢山あります)、2つ目のように自動送信を禁止してしまい「送信」ボタンをクリックしたところで検査を行うようにしましょう。

そのためには index.php の

タグ内のの type を submit から button にします。

<button type="button">送信</button>

これでこのボタンは送信ボタンではなく、ただのボタンになりました。ボタンには挙動がまだ何も設定されていませんので、クリックしても画面は遷移しませんし、Enterキーを入力しても遷移しません。

このようにした上で、このボタンの挙動をプログラムで記述していきます。

このプログラムはPHPではありません。PHPはサーバー側で動作するプログラムですが、ボタンはユーザーのブラウザ上にあるため、ブラウザで動作するプログラムを書く必要があります。ブラウザで動作するプログラムの種類はいくつかありますが、HTML5ではJavaScriptが一般的です。ここではJavaScriptとjQueryでの操作について説明します。

その前にjQueryとは何かということについて簡単に説明します。jQueryはJavaScriptで簡単にHTMLページを操作するためのライブラリです。JavaScriptで書かれていて、JavaScriptの複雑なコードを使いやすく纏めたAPIという形でインターフェイスが提供されていて、JavaScriptよりも解りやすく、ずっと少ないコードで同じ事が実現できます。

ただ、JavaScriptをラップしているので、動作速度は最適に書いた純粋なJavaScriptよりほんの少しだけ遅くなります。

それからJavaScriptですが、Javaとは全く別物です。よくJavaScriptの事をJavaと呼ぶ人がいますが、それはレッサーパンダの事をパンダと呼ぶのと同じくらい間違った表現です。インドネシアの事をインドと呼ぶのと同じです。「ああ、この人全然知識が無いな」と思われないためにも、絶対にJavaScriptをJavaと呼んではいけません。

ただし、JavaScriptという名前は当時流行り始めていたJavaにあやかって付けられたといいます。長い物には巻かれろ、という事ですね。

ではこれからJavaScriptとjQueryでのボタンの挙動を設定していきます。

まず、JavaScriptとjQueryからボタンの入力を検知し、IDとパスワード欄の値を調べて<form/>の送信を行うため、それぞれに識別子を設定していきます。

タグ内のコードを以下のようにします。

<form id="login-form" action="login.php" method="POST">
    <span class="login-label">ID</span> : <input type="text" id="id-field" name="user_id" value=""><br>
    <span class="login-label">パスワード</span> : <input type="password" id="pass-field" name="pass" value=""><br>
    <button type="button" id="submit-button">送信</button>
</form>

変更箇所は<form/><input/><input/><button/>タグに、それぞれ別のidを指定しています。

idはJavaScriptでHTMLを扱う上で、一番簡単な識別子です。理由は、idはページ内でユニーク(他に同じものがない事)であるため、簡単かつ高速に要素を特定できるからです。

idと似たものにclassやnameがありますが、これらは複数ある事が許容されているので少し処理が複雑になります。これらにもそれぞれ使い方があるのですが、今回はidでの指定が適切です。

さて、下準備ができましたのでこのidを使って値の検査とフォームの送信を行うプログラムを書いていきましょう。

firstLoginプロジェクトを右クリックし「新規」から「JavaScriptファイル」を選びます。

JavaScriptファイルの作成

ファイル名は login.js にしましょう(拡張子は自動で付きます)。

ファイル名の入力

終了をクリックすると login.js ファイルが作成され開かれます。ここにJavaScriptかjQueryのコードを書いていくことになります。

その前に、login.cssの時と同じようにlogin.jsもindex.phpの内で読み込みを行います。login.cssとは違ってタグで読み込みます。

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="login.css" media="screen">
    <script src="login.js"></script>
</head>

これで login.js ファイルが読み込まれるようになりました。

JavaScriptでの検査と送信

ではまず、JavaScriptのコードを書いてみましょう。

まず、ボタンがクリックされた事を判定します。そのためには、ボタンをJavaScriptで認識しなければいけません。

認識するためのコードは次のようになります。

document.getElementById("submit-button");

これがJavaScriptでの送信ボタンの認識です。submit-button はタグにつけたidです。つまりidで要素を特定しています。「このドキュメントで、エレメント(要素)をID "submit-button"で取得する」という意味です。英語そのままですね。

こうして特定した要素にイベントリスナーを登録します。イベントリスナーというのは、その要素に何かイベントが起きるとそれを検知して指定された処理を行うための機能です。

ここではボタンがクリックされたことを検知したいので、clickイベントを登録しましょう。

window.onload = function()
{
    document.getElementById("submit-button").addEventListener("click", checkAndSubmit, false);

    function checkAndSubmit(){
        alert("clickされました。");
    }
};

エディタ画面

まず、window.onloadですが、ページ読み込みが完了したらfunction(){}内を実行するという意味です。

login.jsはページの表示に先立って読み込みの段階で評価されます。その段階ではまだ<form/>も<button/>も認識されていないため、document.getElementById("submit-button")で値が取得できません。

ですから、ページ全体の読み込みが終わるのを待ってから処理する必要があります。

ページの読み込みが終わった段階で晴れて、addEventListener()でイベントとその処理を登録します。

addEventListener( )内のカンマで区切られた3つの値のことを引数(ひきすう)と呼びます。

第1引数は待ち受けするイベントです。今回はクリックを待つので"click"を指定します。

第2引数は、そのイベントが発生した時に実行する処理を記述します。checkAndSubmitはこの行の後に書かれてあるfunction(関数)の名前です。この名前は何でも構いませんが、実行する内容を端的に表した名前が良いでしょう。

ちなみにJavaScriptはユニコードに対応しているため、英数字だけでなく、function 値の検査(){ } のように、日本語を指定する事も出来てしまいます。あまりそのようにすべきではありませんので、知識だけにとどめておきましょう。

第3引数はイベントの伝播(でんぱ)形式です。今回はfalseにしましたが、trueにすると上位のHTML要素にイベントを伝播します、という事ですが、今は意味がわからなくても構いません。

さて、では例によってindex.phpを実行して送信ボタンをクリックしてみましょう。"clickされました。"というアラートが表示されたでしょうか?

表示されたアラート

無事表示されたらここまでのプログラムは適切に動作している事が確認できたので、実際のIDとパスワードの入力を検査するプログラムを書いていきます。

ID欄の識別子は"id-field"ですので、JavaScriptで認識するためのコードは document.getElementById("id-field") になります。 同様にパスワード欄は document.getElementById("pass-field") ですね。

このそれぞれの入力値は value というプロパティで取得できます。

document.getElementById("id-field").value;
document.getElementById("pass-field").value;

これが空でないかを検査します。

    function checkAndSubmit(){
        if(
                document.getElementById("id-field").value === "" ||
                document.getElementById("pass-field").value === ""
        ){
            alert("IDとパスワードを入力してください。");
            return;
        }
    }

エディタ画面

if( ){ } は、( ) 内の条件の通りであれば { } 内を実行する、という意味です。( ) 内の === は「左辺と右辺が同じであれば」という意味です。= の数はこの場合は2つでも構いませんが、1つではダメです。

大抵のプログラミング言語では = が1つだと代入にとして扱われ、前にある変数に値を設定する意味になってしまいます。

= が2つの場合と3つの場合の違いは、比較するにあたって変数の型についても一致条件とするかどうかなのですが、ここでは複雑になるので説明は省きます。

|| というのは「または」という意味です。

日本語配列キーボードの場合は、キーボードの一番右上にあるキーをShiftキーと一緒に押すと入力できます。

この記号は「パイプライン(またはパイプ)」と呼びます。UnixやLinux等のコマンドライン入力を前提としたOSでは、1つのコマンドの出力結果を次のコマンドの入力として利用するように作られていて複数のコマンドを列挙して実行できますが、この複数のコマンドを接続するキャラクタが | を利用しおり、このための出力と入力を繋ぐパイプラインという意味で命名されているのだと思われます。

つまり ( ) 内の意味は「IDフィールドが空、またはパスワードフィールドが空の時は」となります。この場合に { } 内が実行され「IDとパスワードを入力してください。」が表示されます。

その後の return は、そこでこの関数 checkAndSubmit() を抜ける、という意味です。

では実際に実行してみましょう。IDかパスワードのどちらかが空の状態で送信ボタンを押してみると、アラートメッセージが表示されるはずです。また、IDとパスワードを両方入力した場合はアラートが出ない事を確認してください。

表示されたアラート

ここまできたら後は、両方入力されていたら送信を行うコードを書くだけです。フォームの送信(submit)を行うので、フォームを識別しましょう。

document.getElementById("login-form");

これに対し、submitを実行します。

document.getElementById("login-form").submit();

エディタ画面

では、IDとパスワードの両方を入力して送信してみましょう。無事ログイン後の画面が表示されれば成功です。

これで、サーバーにはIDフィールドのname値:user_idという名前でその値、パスワードフィールドのname値:passという名前でその値が送信されています。

jQueryによる入力チェック

次はjQueryでの検査と送信をしてみましょう。

まず、jQueryライブラリの読み込みを行います。jQueryライブラリファイルをダウンロードしてきて配置しても良いですが、CDNで提供されているのでこれを読み込んでしまいましょう。

jQuery CDN

CDNというのはコンテンツ・デリバリー・ネットワークの略で、ウェブコンテンツの配信を高速化する仕組みということになりますが、詳しい意味についてはここでは説明しません。

上記のCDNのページのjQuery 1.xのminifiedを右クリックしてリンクアドレスをコピーしましょう。クリックしてコードをブラウザで開き、アドレスバーのURLをコピーするのでも構いません。

なお、jQuery 2.x (IE <9 not supported)の方を選んでも大抵は構いません。こちらはより新しいもので、IE8以前をサポートしないバージョンです。IE8はMicrosoftがサポートを終了しているので、これからは通常、jQuery 2系に切り替えてしまうのが理想的です。

こうして取得したURLをの login.js の前に読み込みます。login.jsではjQueryライブラリを呼び出すのでかならずその前にjQueryが読み込んでおきましょう。そうしないと、プログラムの書き方によってはエラーが発生し混乱することになります。

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="login.css" media="screen">
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="login.js"></script>
    </head>

読み込みのための記述が終わったら実際にコードを書いてみましょう。

まず、先ほど書いたJavaScriptコードを/* */で囲ってコメントアウトしましょう。

altテキスト

これでこのコードはコメント扱いになり、動作しなくなりました。

次にJavaScriptの時と同じように、ページの読み込みが終わったら処理を実行するコードを書きます。

$(document).ready(function(){

});

altテキスト

ドキュメントが準備出来たら function(){ } 内を実行するという意味です。

次は<button/>がクリックされたら、というコードです。<button/>には submit-button というidが指定してありますので、やはりこのidを使って識別します。

$("#submit-button").on("click", function(){

});

エディタ画面

この"#submit-button"のような表記の事をHTML5では「セレクタ」と呼びます。#は続く文字列がidであることを指しています。classを指定したい時は .(ピリオド) で始め、".some-class"のように書きます。nameで指定する場合は少しめんどくさいですが、"[name=some-name]"のように書きます。

これで、"#submit-button"に"click"イベントが起きた時はfunction(){ }が実行されるという意味になります。詳しく説明すると、on()メソッドの第1引数に"click"、第2引数にfunction(){} を指定しています。

このように関数(function(){}) を引数として渡す方法をクロージャと呼びます。最初の $(document).ready() でも function を第1引数に渡していました。関数を引数として渡した場合、渡された先では自由なタイミングでこのクロージャを使って処理を実行できるようになります。jQueryでは特別意識していなくても、このクロージャを頻繁に利用する事になります。

後はfunction(){ } 内にイベント時の処理を記述します。

IDフィールドとパスワードフィールドを識別する方法は上記のセレクタを使い、

$("#id-field");
$("#pass-field");

となります。その値はJavaScriptでは value プロパティを直接参照していましたが、jQueryでは val() というメソッドで取得します。value の短縮形ですね。val()メソッドでは内部的に、value プロパティの値を参照してそれを返しています。プロパティではなくメソッドなので最後に()を記述するのを忘れないで下さい。

こうして取得した値がそれぞれ空でないかを検査します。

$(document).ready(function(){
    $("#submit-button").on("click", function(){
        if(
                $("#id-field").val() === "" ||
                $("#pass-field").val() === ""
        ){
            alert("IDとパスワードを入力してください。");
            return;
        }
    });
});

if文、||、return はJavaScriptと同じです。これはJavaScriptの決まりごとで、jQueryはJavaScriptのラッパーですから普通のJavaScriptがそのまま使えるということです。

後はIDとパスワードが入力されていたら<form/>のsubmitを行うだけです。

<form/>のidは"login-form"ですので、これをセレクタで指定し、submitを行います。

$(document).ready(function(){
    $("#submit-button").on("click", function(){
        if(
                $("#id-field").val() === "" ||
                $("#pass-field").val() === ""
        ){
            alert("IDとパスワードを入力してください。");
            return;
        }

        $("#login-form").submit();
    });
});

以上がjQueryでの検査と送信です。

コメントアウトしたJavaScriptのコードと見比べてみましょう。jQueryの方がずっとコードが少ないことに気づくはずです。

jQueryは非常に便利です。今では全世界の全てのサイトの60%近くでjQueryが導入されているそうです。ギリギリの速度を求められるのでなければjQueryを積極的に使っていくのが今風の開発になります。

お疲れ様でした、今日はここまでです。

次はいよいよ、送信された値を使って認証を行うPHPコードを書いていきます。

記事リンク