「研究室内情報」カテゴリーアーカイブ

MacでコマンドラインPHP

Mac OSXにはデフォルトで、phpが入っています。（今まで知りませんでした。）

適当なエディタを使ってphpプログラムを作成し、ターミナルで実行してみます。下の図はemacsでhello.phpを作成し、ターミナルで実行してみたところです。

php_mac

 

phpの勉強は、僕の授業のページにある「ソフトウェア開発及び演習」のメニューは一つの参考になります。

 

BusMap2とその周辺の仕組みと演習用サーバの立ち上げ

直接、BusMap2にかかわらなくても、一応、仕組みを理解しておいた方がよいかと思うので、自分用のサーバを立ち上げ、データベースの構造を学んだり、動作をテストする環境を整える実習を行います。

コンテンツマネジメントシステム(CMS)であるXOOPSのインストールを最初に行う必要がありますが、XOOPSはデータベースMySQLを使用します。MySQLはrichard.js.yamanashi.ac.jp共通ですが、これに各自のユーザ登録が必要になります。今年は、共通のユーザ名としてlab-memberを用いることにします。（パスワードやその扱いについては、８日及び１１日のゼミの時に説明します。）

http://richard.js.yamanashi.ac.jp/~toyoki/labTips/intro2xoops.html

BusMap2のDBテーブル構成は

BusMap2 DataBase tables

richardのデータベースMySQL管理のためのWebツール phpMyAdminへのアクセスは

http://richard.js.yamanashi.ac.jp/phpmyadmin/

 

演習用JSON形式データ（BusMap2関連）

研究室ゼミ用のページに書いておいたが、どこにあるかわかりにくいと思うので、ここに再掲する。

それぞれjsonpとして受け取れる。その場合には、下のようにcallback変数に受け取る関数名を与える。

jQueryでajax

東條君に質問されて、その場ではうまくいかなかったので、ここにメモしておきます。

§9-2にある例をバスマップのxmlデータの処理用に書き直したプログラムです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
<!--
    $(document).ready(function () {
        $.ajax({
            url: 'BusCategorizedRouteXml.xml',
            type: 'GET',
            //cache: false,//キャッシュを行う場合はtrue
            dataType: 'xml',
            timeout: 5000,
            success: function (data) {
                $(data).find("item").each(
                    function(){
                        $('#result').append(
                            $('<li></li>').append($(this).attr("name")));
                    }
                );
            }
        });
    });
  /* やっていること:
   * ajaxでurlで指定したものをリクエスト、
   * getできたら、successに指定した関数を実行
   * 関数では
   * 　データからitemというタグを探し(find)、
   * 　ひとつひとつ(each) <li>タグをつけて、bodyのresult部分に書きだす
   * をことを行なっている。
   */

  //-->
   </script>
</head>
<body>
<ul id="result"></ul>
</body>
</html>

テキストのyahooJquery.htmlにあるDOMの表現(data.Result[i].Titleのような)はjQuery内の関数ではうまく動かないようです。jQueryらしくyahooJquery2.htmlにあるようにfind(), each()関数はうまく動作します。

なお、jQueryの1.6以降（くらい）では、$.ajaxよりも$.get関数をもちいることが一般的なようです。（よりスマートに書けます。）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
<!--
  $(document).ready(function () {
      $.get('BusCategorizedRouteXml.xml',
            function(data) {
                $(data).find("item").each(function() {
                    $('#result').append(
                        $('<li></li>').append($(this).attr("name")));
                });
            });
  });
  //-->
</script>
</head>
<body>
<ul id="result"></ul>
</body>
</html>

ajaxプログラムのサンプル

８章のyahoo.htmlに相当するサンプルを

http://richard.js.yamanashi.ac.jp/~toyoki/local_test/js2013/getBusRouteXml.html

に置きます。xmlデータを同じディレクトリにおいて、試してみてください。

destination属性も取り出して表示できるようにするといいですね。チャレンジしてください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xmlデータの非同期読み込み（バス路線データを例に）</title>
<script type="text/javascript">
<!--
  function getXHR() {
      var req;
      try {
          req = new XMLHttpRequest();
      } catch(e) {
          try {
              req = new ActiveXObject('Msxml2.XMLHTTP');
          } catch (e) {
              req = new ActiveXObject('Microsoft.XMLHTTP');
          }
      }
      return req;
  }
  
  function asyncSearch() {
      var req = getXHR();
      req.onreadystatechange = function() {
          var result = document.getElementById('result');
          if (req.readyState == 4) {
              if (req.status == 200) {
                  var doc = req.responseXML;
                  var nodes = doc.getElementsByTagName('item'); // itemというタグを配列として取り出す
		  if (nodes.length == 0) {
		      result.innerHTML = '合致するサイトはありませんでした。';
		  } else {
		      var ul = document.createElement('ul');
		      for (var i = 0; i < nodes.length; i++) {
			  var routeName = nodes[i].getAttribute('name'); // xmlから、name属性を抽出し、routeNameに代入
			  var li = document.createElement('li'); // listオブジェクトを生成
			  var textObj =document.createTextNode(routeName); // テキストオブジェクトを生成（内容はrouteNameに入っている文字列)
			  li.appendChild(textObj);
			  ul.appendChild(li);
		      }
		  }
		  result.replaceChild(ul, result.firstChild); //'通信中...'というコンテントを、ul変数に格納されたデータで置き換える。
	      } else {
		  result.innerHTML = 'サーバエラーが発生しました。';
	      }
	  } else {
	      result.innerHTML = '通信中...';
	  }
      }
      req.open('GET', 'BusCategorizedRouteXml.xml', true);
      req.send(null);
  }

  // windowが開かれたらasyncSearch関数を実行するようonload属性に関数名を代入
  window.onload = asyncSearch;
  -->
</script>
</head>

<body>
yahoo.htmlに対応するサンプル
<h2>路線一覧表示</h2>

<div id="result"></div>
</body>
</html>

JSONデータのヘッダー

JSON形式データを生でブラウザで見たとき、日本語文字が化けて見えた件、その情報を送り出す時のヘッダーとして

“Content-type: application/json; charset=utf-8”

としているのだけど、applicationというのが引っかかって、utf-8としてデコードしてくれないのではないかと思います。上のヘッダーは規則どおりなのですが、ブラウザで生にJSONデータをみることは普通はしないので、ブラウザの動作も間違いではないのでしょう。

情報としてはたとえば、http://blog.flatlabs.net/20110304_231535/

最後にちょこっと言ったように、JSONデータのチェック用アドオンを各自のブラウザにいれて、内容をチェックできるようにしておいてください。