無題

日記はここで終わっている

PHPとAjaxでチャットを作ってみる 第2回「入室と退室とセッションと」

チャット作り第2回。
いきなり予定より大幅に遅れての更新と相成りました。


チャットを作ろうと思い立ってから3週間、暇なときにチャットの作り方を
グーグル先生に聞いてみたんですが、良さげな答えがなかったので
やっぱり手作り（というか手探り）で進めるコトに。

で、普通のチャットの場合は入室時に名前を入力すると
それ以降の入力は不要なので、その流れに従います。
前回の http://www6.atpages.jp/guardiancity/weblog/chat01.html では
毎回名前を変えられるので誰が誰だか分からなくなってしまいます。


夜明けのヴァン

ヴァン・ザ・ナイスガイ

不死身のヴァン

実際は同じ人でも別の名前だとネット上では違いが分かりにくいのです。




というコトで今回はチャットの基本「入室」を作ります。

…どう作るんだろう。



チャットそのものの作り方はなくても似たような処理のロジックがあれば
参考になるかなと思い再びグーグル先生に聞いてみたところ、セッションを
使えばいいのではないかと勝手に判断しました。

---

説明しよう！
セッションとはコンピュータシステムやネットワーク通信において、
ログインしてからログオフするまでの一連の操作や通信のことである！
- IT用語辞典より

---

名前の入力が必要になるのは入室時なので、最初は名前の入力欄を表示し、
入室後にコメントの入力欄に変更するという流れにしておきます。

<？php
    // 入室時の処理
    session_start();

    // 名前欄に入力された文字列をセッションに格納
    $_SESSION['name'] = $_GET['name'];

    $xml = simplexml_load_file('log.xml');
    $node = $xml->addChild('Log');
    $node->addChild('NAME', "お知らせ");
    $node->addChild('COMMENT', $_SESSION['name']."さんが入室しました。");
    $xml->asXML('log.xml');
?>

…と、こんな感じでログ管理のxmlファイルに書き込みます。
一度セッション変数に入れた値はセッションが切れるまで保持されるので
名前を必要とするときはずっとこの値を使います。　例↓

<？php
    // 退室時の処理
    session_start();

    $xml = simplexml_load_file('log.xml');
    $node = $xml->addChild('Log');
    $node->addChild('NAME', "お知らせ");
    $node->addChild('COMMENT', $_SESSION['name']."さんが退室しました。");
    $xml->asXML('log.xml');

    // セッション破棄
    $_SESSION = array();
    if (isset($_COOKIE["PHPSESSID"])) setcookie("PHPSESSID", '', time() - 1800, '/');
    session_destroy();
?>

退室ボタンは付け忘れたんでリロードとかしたときに退室するようにしています。

現状はこちら
http://www6.atpages.jp/guardiancity/weblog/chat02.html


作り終わってから
コレってhtmlで <input type="hidden" value="入室者名"> ってすれば良くね？
と思いましたが後の祭りです。


【現状の機能まとめ】
・画面遷移せずにリロード
・セッションによる入退室管理


チャット作りはまだまだ続く。
続くったら続く。

PHPとAjaxでチャットを作ってみる

今更ですが、あけましておめでとうございます。

仕事で土曜出社や23時帰宅がデフォになり、サイトの更新作業が全くできない状況です。（それでなくても今まで怠けてましたけど）

一応プログラマー職という事でプログラミングなら勉強と更新作業を両立できると思い、
まずはチャットを作ってみるコトにしました。目標は現行チャット（レンタル）を越えるコト。
週1回ぐらいのペースで更新していこうと思っています。


まず、そもそもチャットはどういう仕組みなのか。
・コメント書き込んだらサーバーのログファイルを更新
・ログファイルを定期的に取得する
基本的にはコレだけですね。（たぶん）

それを踏まえた上でチャットの作り方を探してみたところ、こんなサンプルを発見しました。
http://www6.atpages.jp/guardiancity/weblog/chat00.php

…初めてチャットというものを見た記憶が蘇りました。
サンプルに言うのもアレですが、現行チャットにはほど遠い存在ですね。
まず何よりもリロードがダサい。

調べたところ、現行チャットのような「画面遷移をせずにリロードする」というのは
Ajaxなるものを使えば実現できるそうです。


Ajax「俺のリロードはレボリューションだ！」

今回はAjaxの一つ、prototype.jsを使用します。
Javascript内での読み込み用ソースはこんな感じ。

  new Ajax.Request(url,      // 読み込みをするURL
    {
      method: 'get',         // GETで送信する
      onSuccess: getData,    // 呼び出し成功時にgetData関数を呼ぶ
      onFailure: errMsg,     // 呼び出し失敗時にerrMsg関数を呼ぶ（今回は省略）
      parameters: paramList  // URLに付加する引数（これも省略）
    });

  function getData(data)
  {
    var item = data.responseXML.getElementsByTagName('Log');
    var log = "";
    
    for(i = 0; i < item.length; i++)
    {
      var nameTag = item[i].getElementsByTagName('NAME');       // 発言者名
      var name = nameTag[0].firstChild.nodeValue;
      
      var commentTag = item[i].getElementsByTagName('COMMENT'); // コメント
      var comment = commentTag[0].firstChild.nodeValue;
      
      log += name + "　" + comment + "\n";          // ログ出力用変数に追加
    }
    
    result.innerHTML = log;  // html側の取得結果表示部分に
}

流れとしては
・urlにログファイルのアドレスを指定
・成功するとgetData関数が呼ばれる
・getData関数でxmlの中身を取り出す

そして書き込みはphpで行います。これも同様にAjaxのRequestで呼びます。

<？php
  $name = $_GET['name'];       // GETで送られてきた発言者名を変数に格納
  $comment = $_GET['comment']; // コメントも同様
  
  $xml = simplexml_load_file('log.xml'); // ログのxmlをロードする
  $node = $xml->addChild('Log');         // 新規ノードLogを作る
  $node->addChild('NAME', $name);        // Logの子要素NAMEに発言者名を出力
  $node->addChild('COMMENT', $comment);  // コメントも同様
  $xml->asXML('log.xml');                // xmlに書き込む
?>

こうして画面遷移をせずにリロードが可能となりました。
まずは満足。
http://www6.atpages.jp/guardiancity/weblog/chat01.html

チャット作りはまだまだ続く。
続くったら続く。

「ポケビアの泉」改装について

ポケビアの泉をhtmlからphp＋MySQLへ変更しましたのでその経緯について。
ちょいとプログラマーな話になります。

以前のものだとどこがいつ更新されたか分からないなーと思い、
前々から今回のような形にしようとは思っていました。
が、なにせphpが使える無料のレンタルサーバーってのは
広告がウザイこと山の如しだったもんで、なかなか最初の一歩が踏み出せずにいました。

結局今のも邪魔くさいですけど、住めば都です。


このコンテンツを作るにあたって一番苦労したのは文字化けでした。
phpからSQL文発行したら結果が取ってこれなくてうわあああああああああああ
結果が取ってこれても中国語みたいなのが表示されてうわあああああああああ

文字化け対策の方法をググってみたところ、iniファイルの設定を変更するというのが
最もポピュラーな方法だとは知りましたが、MySQLがサーバー上にあるものしか
使えないのでこの方法は使えず、手当たり次第に文字コードを変換しまくって
やっとSQL文の送信と結果の受信が成功しました。


各ポケビアのジャンルは今までと違い、複数表示するようにしました。
複数のフラグ処理ならビット演算。そう思ってノンキにプログラムしてたら
小さい値しか入らなくてうわあああああああ
原因はMySQLのデータ型が小さかっただけでした。
普段使わないものは未知の領域が大きすぎます（´・ω・）


そして旧ポケビアの泉には無かったヘイボタン。人気順に表示するときに使います。
「ヘェ」とか「ヘエ」とかを名前に持つポケモンを探したんですけど500種類近くの
名前がありながら見つからなかったので「ヘイ」で代用しました。

ポケスペにはゴンベの「べ～」がいるんですけど、どっちかと言ったら
「ヘイ」のほうが近いのでヘイガニを採用。


こうしてガーディアンシティで最もマトモなコンテンツとなりました。


今月末にポケスペの新刊が出るそうでオラなんだかワクワクしてきたぞ！

キョウの登場モーション見てテンション上がった

ソウルシルバーのプレイ日記的なもの第4回。

やっとパピヨン率いる四天王を撃破しました。
これまでと違い、仕事してるとクリアまでにかなり時間がかかりますね。

私のパーティにドラゴンに有効打を与えられるポケモンがいなかったので、
ベジータワタル戦は微妙に育ってたハクリューに"れいとうビーム"を覚えさせ、
スカーフ巻いて特攻させてなんとか突破しました。
ドラゴンダイブの被命中率にも助けられました。


一息ついたところでポケスロン参加。おもすれー。
悲しいけどこれ、やっぱり右利き用なのよね…