【特別企画】 トラフィックエクスチェンジを作ってみよう! > 3、ログインできるようにしてみる

3、ログインできるようにしてみる

前回まででトラフィックエクスチェンジっぽいサーフ画面ができました。 形だけですが、フレームとタイマーですね。 あと足りないものは何だろう? そこに表示するデータです。

じゃあまずは仮のデータを作って……とも思ったのですが、 やっぱり形から入りましょう。ログイン画面を作ります。

今回からはPHPを使います。 今まではサーバーにアップロードしなくてもお手元のパソコンで動作させることができていました。 が、PHPを動作させるにはWebサーバーが必要です(Apacheのような)。 今回以降のサンプルソースを試すにはPHPが使えるサーバーにアップロードするか、 またはお手元のパソコンにWebサーバーをインストールしておいてください。 なのでつまりそのなんていうか、がんばってください。 あ、この最後の部分の言い方ちょっとだけ「部活の憧れの先輩の試合前に思い切って声をかけた女学生」みたいだ。きゃあ言っちゃった。

フォームを作る

前回までのサーフ画面からは一旦離れて、そこへ入るためのログインのフォームを作ります。

ログインと言っても今回はID登録せずに使うタイプのものなので、URLを入力するだけです。 つまり、フォームにはURLを入力するためのテキスト欄とボタンだけがあって、 ボタンを押すとサーフ画面に移動、という仕様ですね。

したがって、フォーム部分のHTMLはこんな感じですかね。

<form method="post" action="surf.html">
    <input type="text" name="url">
    <button>サーフ画面へ</button>
</form>

formタグの中に2つ属性があります。method と action です。
methodは get と post の2種類があります。どちらを使うか迷うところですが、 迷ったときはコインを投げて決めましょう。というわけで今回は post にしてます。
actionはつまり、ボタンを押したときの移動先です。 ここに前回まで作っていたサーフページのファイル名を書いておく。

ではとりあえず login.html とでもいうファイル名で保存して、ブラウザでアクセスしてみましょう。

うむ。完璧。
ボタンを押してみると……。

うむ。完璧。

しかしこのままでは入力したURLが何なのかわかりませんね。
というわけで、ここでいよいよPHPさんの登場です。 今まではサーフページをhtmlとして作ってましたが、これをPHPに変換しましょう。 変換と言っても拡張子を .php に変更するだけです。

surf.html → surf.php

はい、これで「PHPファイル」ということになりました。
まるで画用紙を長方形に切り抜いてクレヨンで「1000円」と書いたら千円札になるみたいなお手軽さですね。まさに夢のよう。 無限にPHPファイルを作って世間を混乱の渦に叩き込みたくなるってもんです。ニューオレオレオーダーの始まりだぜ。オラオラァ。

ではさて、PHPの機能を使ってフォームからの入力データを受け取るにはどうすればいいのでしょう? 
こうすればいいんだぜ、オラオラァ。

<?php
    
    $url = $_POST['url'];

?>

まず、「これはPHPのコードですよ」という意味で「<?php ....... ?>」で囲っています。 ここに囲われた内側が「PHPの世界」です。 これをPHP化を遂げた我らがサーフページの surf.php のソース内に書く。 ではさて、どこに書けばいいか、ですが……。

これも前回のJavaScriptのときと同じように、どこに書いてもOK、 と言いたいところですが、今回は一番上に書き加えておくことをオススメします。

つまりこうですね。

surf.php (元surf.html)
<?php

    $url = $_POST['url'];
    
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>トラフィックエクスチェンジだぜ!</title>
        
        
        ~ 中略 ~
        
        
    </head>
    <body>

        <!-- タイマーが表示される側 -->
        <div id="surfNavi">
            あと<span id="timer"></span>秒
        </div>

        <!-- 宣伝先のページが表示される側 -->
        <iframe id="surfFrame" src="http://xxxxxxxxxxx"></iframe>

    </body>
</html>

こうしておくと、PHPの処理が先に実行されます。
いや、こうしなくても先に実行されるのはPHPなのですけど、 そういうことが言いたいんじゃなくってぇ、ああんもう、つまり何が言いたいかっていうと、一度しか言いませんよ? 好き!
つまり、

1、ログインページの側からデータ受け取って、
2、ログイン処理的なことをして、
3、しかる後にサーフページを表示

という思い描いた夢が実現するというわけです。だったらいいじゃない。付き合っちゃいなよ。ボンッ(赤面の効果音)

余談
さらに本当のことを言うと、こんなふうにPHPのコードとHTMLのコードを1つのファイル内に混在させるのは良くない、というのが業界の慣例です。 今回は解説をシンプルにするために1つのファイルに書いてますが、 こういうコードを出すところに出すと旅館の池に撒かれた麩に鯉が群がってくるかのごとくツッコミがわんさか飛んでくるでしょう。 興味のある人は試しにやってみてね。旅館で。

しかしPHPってPerlやC++に比べて「そういうことができる」のがウリなんじゃなかったでしたっけ?  他にもJavaに対するJSPなんかも同じで「そういうことをする」ためのもののはずなのに、 「混在するのダサイよね〜」という風潮があってフレームワークが乱立する。 エライ人たちは結局何がしたいのか、私にはさっぱりわかりません。

ただ、処理自体が長くなるならファイルを分ける方が作業しやすいかな、とは思います。 それをやり出すとフレームワークを作りたい誘惑が発生してしまうというわけですが、 テーマが脱線していまうので今回は一枚のファイルにベタ書きしていきます。元気なお友達は挑戦してみてね。

ではさて、先に作っておいたログインフォームの action 属性の方もファイル名を変更しておきましょう。

<form method="post" action="surf.php">
    <input type="text" name="url">
    <button>サーフ画面へ</button>
</form>

この状態でURLを入力してボタンを押すと……

よーし、PHP化したサーフ画面だぜ!
と、語尾にビックリマークをつけてみても何かが虚しい。 見た目に変化がないですからね。これでは一体何をしたのかわかりません。 しかし内部的にはこれで入力したURLを受け取れているハズです。ハズなんです。ならば確認するために表示してみようではありませんか。

タイマー側のエリアに「MyURL」を表示する。

<!-- タイマーが表示される側 -->
<div id="surfNavi">
    
    MyURL : <?php print $url; ?> <br>
    あと<span id="timer"></span>秒
    
</div>

追加したのは「<?php print $url; ?>」です。 これも「<?php ....... ?>」で囲んであるので「PHPの世界」です。 そして「print $url」というのが、このファイルの冒頭でフォームから取得したURLの文字列を表示する処理です。 だから好きって言ったじゃない、ってやつです。わかりにくいかもしれませんがついてきてください。

では、この状態でもう一度「ログイン」してみるぞ。

よっしゃあ! ログイン成功だぜ!
ログイン時に入力したURLがタイマー側のエリアに表示されております。 さきほどと比べると目に見えた変化がある分、語尾のビックリマークにも説得力がこもるというもの。

しかし「ログイン」というより、単に入力されたURL文字列を右から左に受け流しただけですよね。 こんなことでログインと呼べるのかッッッ!!!!  じゃあどんなことだったら「ログイン」って呼べるんですか? 中学生らしいって何なんですか?

ログイン? ログインって何だ?

ところでみなさん、「色」とは何でしょう?
「色」とは光の波長です。それを人間の目の細胞が受け取って脳へ信号を送り、「色」として解釈される。 つまり「色」とは人間の認識の中にのみ存在するものなのであり、現実には存在しないものなのです。 「女性」とは男性の妄想の中にのみ存在するものなのであり、現実には存在しないものなのです。おおっとキーボードが滑った。ゲフンゲフン。

「ログイン」も同じです。
「ログイン」とは「ユーザーにとってのログイン体験」です。 サーバーの側に「ログイン」という明確な実体が存在するというわけではないのだッッッ!!  いや、そういう実装方法もあるかもしれないですが、結局は妄想という名の天に向かってバベルの塔を積み上げたに過ぎません。 要はユーザーが「ああ、私、今ログインしてるのね! ウキウキ!」と感じることができるかどうかってことです。 たとえば「MyURL」が表示される、とかね。

とは言え、そこは僕らの強い味方PHP。
明確な実体というわけではありませんが、「ログイン」っぽいことを実現するためにぴったりな機能があるのでした。

セッションを使う

「ログインしている」というのはどういうことか?  平たく言えば「その後、同じサイト内でページを移動しても、データの一貫性が保たれる」ってことです。 そういうのがまさにユーザーにとっての「私ってログインしてるぅ。るんるん」な感じってやつですよね。るんるんかどうかはさておき。

ユーザーのパソコン(ブラウザ)とウェブサイトが設置されているサーバーはネットを隔てて遠く離れた別々のマシンですので、 種も仕掛けもないならば、通常はページを移動するたびに(アクセスしなおすたびに)お互いに「初対面」です。 あるページで「はじめまして、こんにちわ。私の名前は……」と名刺交換したとしても、 別のページへ移動したりページを再読み込みしたりすると、そのことはすっかり忘れて再び「はじめまして、こんにちわ」になってしまう。

これでは困る。

何とかして「さっきの私と今の私は同一人物(ブラウザ)ですよ」という「サーバーとの関係を維持」する仕掛けが欲しい。 その「維持された関係」のことを「セッション」と言います。 (こんな説明でいいんかな、エライ人?)

理屈はこれぐらいにして、実際にPHPでセッションを使ってみましょう。

<?php
    
    $url = $_POST['url'];
    
    session_start();
    
?>

「session_start()」というのがPHPで「セッションを開始」するコードです。 これでブラウザとサーバーとの間に「セッション」が開始されたというわけです。 と、言われても、これだけでは「なんのこっちゃ」という感じであることでしょう。

ではこうしてみます。

<?php
    
    $url = $_POST['url'];
    
    session_start();
    
    $_SESSION['url'] = $url;
    
?>

$_SESSION というのが PHP での「セッション」そのものを表すオブジェクト、とでも言えばいいでしょうか。 そのセッションオブジェクトに 'url' という名前で $url の値を格納している、というわけです。

はい、これでフォームで入力したログイン情報(URL)がセッション上に保存されました。

確かめてみましょう。
どうやって確かめるか?
「別のページに移動したときにログイン情報が残っていて画面に表示される」ようになっているとそれっぽいですよね。

ではさて、確認用に別のページを用意して、次のように書いてみることとします。

anotherPage.php
<?php
    
    session_start();
    
    $url = $_SESSION['url'];
    
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>テスト用の別ページ</title>
</head>
<body>
    
    <?php print $url; ?>でログイン中

</body>
</html>

さきほどは「session_start()」の後、$_SESSION に値を入れていましたが、 今回は逆で、$_SESSION から値を取得しています。ここにさっき入れた値が入っているハズ。 うまくいっていれば、「<?php print $url; ?>でログイン中」のところにURLが表示されるハズ。

さて、ログイン画面でURLを入力して……

サーフ画面へ無事に「ログイン」。
ここでさきほど追加した確認用ページへ移動してみましょう。 リンクでもあればいいのですけど、面倒なのでブラウザのアドレス欄にファイル名を入力することとします。 元気が余ってるお友達はAタグを書いて試してみてね。

おお、URLが取得できたァーー!!
どうやら「ログイン」できてるみたいですよ。もはや疑う余地なし。やったぜ!
これで心置きなく語尾にビックリマークをつけられるというもの。キミの心は今ときめいているか?!

今回のまとめ

つまり、

<?php
    
    $url = $_POST['url'];
    
    session_start();
    
    $_SESSION['url'] = $url;
    
?>

セッションを開始してセッションオブジェクトにログイン情報を入れただけでログインしたことになるという驚きのお手軽さ。 なんだかダマされたみたいな感じですが、本当にコレでいいんでしょうか?

もっと凝ったことをしようと思えばいろいろとやりようはあります。 たとえば今のままだと、別のパソコンから同時にログインできてしまいます。 別にパソコンが2台なくっても、同じマシン上で別のブラウザを立ち上げればログインできます。 そういう操作をしたときに「すでにログイン中です」というような表示が出てログインできないようにしたいかもしれません。 それを実現するにはセッションだけではなく、サーバーの側で何かデータを保持しておく、というような処理が必要になります。 元気が余っている人は作り込んでみてください。きっと楽しいですよ。 ですが……MMORPGじゃあるまいし、そこまでする必要があるか? って話ですよ。 たかがトラフィックエクスチェンジ。多重ログイン上等だぜ。なぁ兄弟? ガハハ。

では最後に今回の分のソース全体を載せておきます。

ログイン画面 login.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ログイン画面</title>
    </head>

    <body>

        <form method="post" action="surf.php">
            <input type="text" name="url">
            <button>サーフ画面へ</button>
        </form>

    </body>
</html>
サーフ画面 surf.php
<?php
    
    $url = $_POST['url'];
    
    session_start();
    
    $_SESSION['url'] = $url;
    
?> 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>トラフィックエクスチェンジだぜ!</title>

        <script>
        
            // 初期の秒数。
            var time = 10;
        
            // 最初に実行される処理
            function start() {
                
                // 秒数を表示(関数化しました)
                updateTimer();

                // countDownという名前の関数を 1000ミリ秒後に実行
                setTimeout ( countDown, 1000 );
            }
    
            // タイマーの表示を更新
            function updateTimer() {
    
                var timer = document.getElementById("timer");
                timer.innerHTML = time;
            }
            
            // カウントダウンの処理
            function countDown() {
        
                // カウントダウン
                time -= 1;
        
                // そしてゼロ判定
                if ( time <= 0) {
            
                    // ゼロになっていたら「サーフ完了」の処理を実行
                    surfCompleted();

                } else {
            
                    // まだゼロじゃないので、再びタイマーをセット
                    setTimeout(countDown, 1000);
                }
        
                // タイマーの表示を更新
                updateTimer();
        
            }
            
           // サーフ完了時の処理
            function surfCompleted() {

                /*
                    次回のお楽しみ
                    (あ、これは「複数行のコメント」です)
                */

                // 今日のところはタイマーの数字を元に戻して再びカウント続行することにします。
                time = 10;
                updateTimer();
                setTimeout(countDown, 1000);
            }

        </script>

        <style>
            /*  画面端のスキマをぴっちりと詰めておく */
            html,body {
                margin:0;
                padding:0;
                height : 100%;
            }

            /*  タイマー側 */
            #surfNavi {
                width : 100%;
                height : 20%;
                background-color : #eeeeff;
            }

            /*  宣伝ページ側 */
            #surfFrame {
                width : 100%;
                height : 80%;
                border : 0px;
                position : absolute;
            }
        </style>

    </head>
    <body onload="start();">
    
        <!-- タイマーが表示される側 -->
        <div id="surfNavi">
        
            MyURL : <?php print $url; ?> <br>
            あと<span id="timer"></span>秒
        
        </div> 
        <iframe id="surfFrame" src="defaultPage.html"></iframe>
 
    </body>
</html>

サーフ画面からログイン画面に戻るリンクぐらいあってもいいような気がしますね。タイマーの付近にでも。 でも元気がないので上記のソースにはそれは追加しませんでした。 元気が残ってるお友達は追加してみてください。

次回予告

こうしてログインの機能がつきました。めでたしめでたし。
でも何か物足りない。
なぜだ?
ログインと言いつつ、サーバー側に何も記録されていないからだ! めでたいなんて嘘っぱちだぜ!  本来ならログインすることで、それまでに獲得したポイントが取得できたりするはず。 つまり「URLとポイント」という組み合わせのデータが「ユーザーのデータ」としてサーバー側に登録されている必要がある。 というわけで次回はそこのところの処理を追加します。お楽しみに!

サイトTOPへ戻る
目次へ戻る
前のページ
次のページ