ノート/ノート

訪問者数　3627　　　　　　最終更新　2016-01-09 (土) 08:22:37

いくつか可能性があるらしい。

javascriptにもいくつか流儀があるようで、クライアント側で絵を描くがそのデータをサーバーから供給するやり方と、サーバー側で絵をかいてしまう？やり方とあるようだ。

サーバー側で動かすタイプ †

サーバー側で動かすタイプとして

どうもサーバー側で動かす」は嘘くさい。サーバー側でjavascriptで書かれた非同期サーバーを置くが、そのサーバーで結局グラフデータを読み出して表示するスクリプトをクライアントに送り込んでいるだけでは？

で、この環境を走らせるためには、サーバーを実現するためのnode.jsだのnpmだのが欲しい。

サーバーサイドのjavascriptというのは、何となく慣れないところがある。 とにかくネットで情報を探してみる。

node.jsの議論は、要するにサーバーを端末対応に大量に起動することを考えると、下手な作りではオーバーヘッドが大きくなりすぎるので、その辺を非同期とか使って軽減しているということらしい。

↑

クライアント側で動かすタイプ †

もう１つの、クライアント側で動かすタイプとして、たとえばChart.jsがある。

ポイントは、html5/canvasを使うのでこれらが使える端末なら動くことだろう。

↑

で、Chart.jsで考えてみよう †

まずは、この辺からスタート

まず、Chart.jsのサンプルは動いた。以下単純なHTMLファイル。

<!DOCTYPE html>
<html lang="ja">
<!--- chart.jsのサンプル   --->
<head>
  <script src="Chart.min.js" type="text/javascript"></script>
</head>
<body>
  <canvas id="graph-area" height="450" width="600">
  </canvas>

  <script type="text/javascript">

   // ▼グラフの中身
   var lineChartData = {
      labels : ["初期","1期","2期","3期","4期","5期","終期"],
      datasets : [
         {
            label: "緑データ",
            fillColor : "rgba(92,220,92,0.2)", // 線から下端までを塗りつぶす色
            strokeColor : "rgba(92,220,92,1)", // 折れ線の色
            pointColor : "rgba(92,220,92,1)",  // ドットの塗りつぶし色
            pointStrokeColor : "white",        // ドットの枠線色
            pointHighlightFill : "yellow",     // マウスが載った際のドットの塗りつぶし色
            pointHighlightStroke : "green",    // マウスが載った際のドットの枠線色
            data : [ 100, 97, 87, 50, 21, 13, 10 ]       // 各点の値
         },
         {
            label: "青データ",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "white",
            pointHighlightFill : "yellow",
            pointHighlightStroke : "blue",
            data : [ 30, 60, 30, 80, 95, 20, 50 ]
         }
      ]

    }
    // ▼上記のグラフを描画するための記述
    window.onload = function(){      var ctx = document.getElementById("graph-area").getContext("2d");
      window.myLine = new Chart(ctx).Line(lineChartData);
   }

  </script>
</body>
</html>

とこんなかんじ。

次に、PHPからJSONデータを渡して、javascriptで読み取る、というテスト　（PHPからJavaScriptに変数を渡すまとめ。 以下はPHPプログラムなので拡張子phpとしてファイルに作ること。

<!DOCTYPE html>
<html lang="ja">
<!--- jqueryによるデータの受け渡し --->

<head>
  <script src="Chart.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<?php
   $array = array("hoge" => "fuga",  "are" => "kore");
?>
<script>
   var array = <?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
   console.log(array); // Object { hoge: "fuga" }
   document.write(array.hoge);
   document.write("  ");
   document.write(array.are);
</script>

</body>
</html>

これを実行する（ブラウズする）と、hoge are と表示（document.write）する。

では、PHPとJSを別ファイルにするとどうなる？

jqpassdata.php

<!DOCTYPE html>
<html lang="ja">
<!--- jqueryによるデータの受け渡し、データ行き先はjqpassdata.js --->
<head>
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<?php
    $array = array("hoge" => "fuga",  "are" => "kore");
?>

<script id="script" src="jqpassdata.js"
    data-array = '<?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>' ;
>
</script>

</body>
</html>

jqpassdata.js

//<!--- jqueryによるデータの受け渡し、受け側 --->
var $script = $('#script');

var array = JSON.parse($script.attr('data-array'));
 
console.log(array); // Object { hoge: "fuga" }
document.write(array.hoge);
document.write("  ");
document.write(array.are);
↑

それでいろいろこねくり回した結果（2016-01-02) †

twdataread.php

<!DOCTYPE html>
<html lang="ja">
<!--- jqueryによるtwitterカウントデータの受け渡し、データ行き先はjqpassdata.js --->
<head>
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="refresh" content="30">
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  <script src="Chart.min.js" type="text/javascript"></script>
</head>
<body>
  <canvas id="graph-area" height="600" width="800">
  </canvas>

<?php
  $MySQLHost = 'localhost';
  $MySQLUserName = 'twitter';
  $MySQLPassword = 'chariot7';
  $MyLink = mysql_connect($MySQLHost, $MySQLUserName, $MySQLPassword);
  $MySQLDatabase = 'twitter';
  mysql_select_db($MySQLDatabase, $MyLink);
  $numdata = 72;

  $datebase = (int)date("ymdH");
  for ($i=0; $i<$numdata; $i++) {
    $tablebase = $datebase - $numdata + $i + 1;
    $tablename = "tw" . (string)($tablebase);
    $Query = "SHOW TABLES LIKE '" . $tablename . "'";
    $Result = mysql_query($Query, $MyLink);

    if ($Result==false) {
      print("<p>empty table " . $tablename . "<br>");
      $count = 0;
    } else {
      $Query = "SELECT COUNT(*) FROM " . $tablename . "";
      $Result = mysql_query($Query, $MyLink);
      if (!$Result) {
        //print("SQL fetch error<br>");
        $count = 0;
      } else {
        //while ($Row = mysql_fetch_array($Result, MYSQL_ASSOC)) {
        $Row = mysql_fetch_row($Result);
        $count = $Row[0]; 
      }
    }
    $element = array("date"=>(string)$tablebase, "count"=>(string)$Row[0]);
    $array[] = $element;
  }

?>

<script id="script" src="twdataread.js" 
   data-array = '<?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>' ;
>
</script>

</body>
</html>

twdataread.js

//<!--- jqueryによるデータの受け渡し、受け側 --->
  var $script = $('#script');

  var array = JSON.parse($script.attr('data-array'));

  //console.log(array); // Object { hoge: "fuga" }

  var $labels = [],  $datasets = [];
  var $numdata = 72;
  for (var i=0; i<$numdata; i++) {
    //document.write(array[i].date);
    //document.write("  ");
    //document.write(array[i].count);
    //document.write("<br>");
    $labels[i] = array[i].date
    $datasets[i] = array[i].count
  }

////////////////////////////////
   // ▼グラフの中身
   var lineChartData = {
      labels : $labels,
      datasets : [
         {
            label: "Hourly Number of Tweets",
            //fillColor : "rgba(92,220,92,0.2)", // 線から下端までを塗りつぶす色
            //strokeColor : "rgba(92,220,92,1)", // 折れ線の色
            //pointColor : "rgba(92,220,92,1)",  // ドットの塗りつぶし色
            fillColor : "rgba(110,110,110,0.2)", // 線から下端までを塗りつぶす色
            strokeColor : "rgba(110,110,110,1)", // 折れ線の色
            pointColor : "rgba(110,110,110,1)",  // ドットの塗りつぶし色
            pointStrokeColor : "white",        // ドットの枠線色
            pointHighlightFill : "yellow",     // マウスが載った際のドットの塗りつぶし色
            pointHighlightStroke : "green",    // マウスが載った際のドットの枠線色
            data : $datasets       // 各点の値
         }
      ]
   }

   // ▼上記のグラフを描画するための記述
   window.onload = function(){      var ctx = document.getElementById("graph-area").getContext("2d");
      window.myLine = new Chart(ctx).Line(lineChartData);
   }

結果は

twdataread.png

↑

またしてもSeLinuxでアクセス拒否問題 †

oregano上で、SeLinuxによって、ホームディレクトリ/public_html上のPHPプログラムから mySQLをアクセスすると拒否される問題が起こった。

audit.logを見ると

type=AVC msg=audit(1451721990.366:42340): avc:  denied  { read } for  pid=26270 comm="httpd" name="mysql" dev=dm-0 ino=3145787
scontext=unconfined_u:system_r:httpd_t:s0 tcontext=unconfined_u:object_r:mysqld_db_t:s0 tclass=lnk_file

いろいろ見たのだが、結局は、auditdを動かしておいて、まず

# audit2allow --module=httpd --all

module httpd 1.0;

require {
       type user_tmp_t;
       type smoltclient_t;
       type root_t;
       type mysqld_db_t;
       type httpd_t;
       type xdm_t;
       class lnk_file read;
       class file read;
       class dir create;
}

#============= httpd_t ==============
allow httpd_t mysqld_db_t:lnk_file read;

#============= smoltclient_t ==============
allow smoltclient_t user_tmp_t:file read;

#============= xdm_t ==============
allow xdm_t root_t:dir create;

にてチェック。

次に、自動修正を試みる。

# audit2allow --module-package=httpd --all
******************** IMPORTANT ***********************
To make this policy package active, execute:

semodule -i httpd.pp

のあと

# semodule -i httpd.pp

これで、

# setenforce 1

で戻しても正常にアクセスできるようになった。

↑

時間軸の引算を間違っていた　（2016-01-07） †

どうも古い方が０ばかりで、収集プログラムが死んでデータが取れていないからかと思ったら、表示プログラムにもエラーがあった。（よく見ると前の図でも横軸のメモリの値がおかしい）

時間軸を作るために、現在の日時から決められた時間（７２時間）前までの１時間おきの日時文字列（16年01月04日15時、とか）を生成しているのだが、その時うっかりと現時点(int) 16010415から72を引算する

for (i=72; i>0; i--) {date = 16010415 - i}

ということをしていた。当然ながら、15以上を引くと、16010399とかになっておかしくなる。 この誤りに気が付かなかったのは、実は16010399とかがinvalidな日時だということを チェックして居ながらエラーメッセージを出していない（無視するだけ）にしていたから だった。えらいチョンボだった。

現在の描画は３日分ちゃんと出るようになった。

twdataread-new.png

添付ファイル: filetwdataread-new.png 356件 [詳細] filetwdataread.png 395件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-09 (土) 08:22:37 (1066d)