PHP(6) Log file graph

ログファイルからデータの取得と描画

TinyWebDBに、センサーデータ収集ログを解析して、画像にした!表示したのでは、温度(最高、最低)、気圧、バッテリー電圧。

ハードウェアの制作はこちら

https://uc4.net/2018/04/02/wemos-d5-weather-bureau/

送信プログラムはこちら

https://github.com/edu2web/TinyWebDB-WeatherStation

今回は、受信データの描画方法を説明する。

  1. fileを配列に読み込む
  2. json_decodeでディコード
  3. 描画データ配列生成
  4. jpgraphで描画する

データの取得

ファイル名draw.phpとする。

<?php
include ("./jpgraph/jpgraph.php");
include ("./jpgraph/jpgraph_line.php");

$tempers = file($_GET['logfile']);
$p_time = 0;
$datax = array();  // Local time p_time, "2001-04-01","2001-04-02","2001-04-03",...
$datay = array();  // temperature p_low
$data2y = array(); // temperature p_high
$datap = array();  // pressure
$datab = array();  // battery

foreach($tempers as $temper) {
        list($dummy,$tagValue) = explode('--', $temper);

        $obj = json_decode($tagValue);
        $temp = round($obj->{'temperature'}, 2);
        $localt = $obj->{'localTime'};
        $pressure = $obj->{'pressure_hpa'};
        $battery = $obj->{'battery_Vcc'};
        list($ldate,$ltime) = explode(' ', $localt);
        $p_time2 = $ldate . " " . substr($ltime, 0, 2); // Truncat to Hour

        if ($p_time2 != $p_time) {
                if ($p_time) {
                        array_push( $datax, $p_time);
                        array_push( $datay, $p_low);
                        array_push( $data2y, $p_high);
                        array_push( $datap, $pressure);
                        array_push( $datab, $battery);
                        // echo "$p_time, $p_low, $p_high <br>";
                }
                $p_time = $p_time2;
                $p_high = $temp;
                $p_low = $temp;
        } else {
                $p_low = ($p_low > $temp or $p_low == 0) ? ($temp) : ($p_low);
                $p_high = ($p_high < $temp or $p_high == 0) ? ($temp) : ($p_high);
        }
}

array_push( $datax, $p_time);
array_push( $datay, $p_low);
array_push( $data2y, $p_high);
array_push( $datap, $pressure);
array_push( $datab, $battery);

// data ready for JpGraph

データの描画

TinyWebDBに、センサーデータ収集ログを解析した画像でした!

PHP(5) Use JpGraph

JpGraphとは

JpGraphはAditus Consultingが開発しているグラフ生成ライブラリ。
JpGraphを利用することで、数行のコーディングで簡単に動的にグラフを生成することができる。

JpGraphダウントード

JpGraphのダウンロードは下記URLから行える。
http://jpgraph.net/download/

JpGraphインストール

PHPでグラフを出力する方法はいくつかあり、何れにしてもGDライブラリがインストールされていることが前提条件となっている。

この記事は、DreamHostで演習を前提とするので、GDライブラリがすでに用意されている。日本語の表示はフォントのインストールなど必要だが、省略する。そのためソースコードに日本語の表示に関連する箇所はコメントアウトする。

JpGraphはどこに設置しても動作する。

この演習では、jpgraphと言うフォルダに入れて、ソースから直接インクルードする。

// 折れ線グラフ描画に必要なライブラリ
include (“./jpgraph/jpgraph.php”);
include (“./jpgraph/jpgraph_line.php”);

JpGraphサンプル

折れ線グラフを生成するプログラムtest.php

<?php
// 折れ線グラフ描画に必要なライブラリ
include ("./jpgraph/jpgraph.php");
include ("./jpgraph/jpgraph_line.php");

// データ、凡例、描画色を準備
$data = array(
  'data' => array(
    array(151, 170, 140, 116, 157),
    array(161, 147, 182, 105, 140),
    array(115, 110, 90, 93, 88),
  ),
  'legends' => array('Tokyo', 'Akihabara', 'Ueno'),
  'colors' => array('red', 'green', 'blue'),
);

// グラフの描画先
$g = new Graph(400, 400); // サイズ
$g->setScale('textlin'); // 目盛り
// $g->title->setFont(FF_MINCHO, FS_NORMAL, 14); // タイトルフォント
// $g->title->set('上半期 店舗別販売件数'); // タイトル
// $g->legend->setFont(FF_MINCHO, FS_NORMAL, 14); // 凡例フォント

// 配列から順に折れ線グラフを生成&キャンバスに追加
for ($i = 0; $i < count($data['data']); $i++) {
  $l[] = new LinePlot($data['data'][$i]); // データ
  $l[$i]->setLegend($data['legends'][$i]); // 凡例
  $l[$i]->setColor($data['colors'][$i]); // 描画色
  $g->add($l[$i]); // 追加
}

// グラフを描画
$g->stroke();

作成方法は、

  1. グラフの描画キャンバスのGraphオブジェクトを生成
  2. 配列から順に折れ線グラフを生成
  3. LinePlotクラスを直接にaddメソッドでキャンバスのGraphオブジェクトに追加
  4. グラフを描画

参考

  1. https://www.buildinsider.net/web/bookphplib100/025

PHP(4) Search a tag

処理内容

tagを検索する実装

  1. tag Search form
  2. tag Search Action
    1. Search file database for a tag
    2. return value

検索フォーム

GetValueForm.phpと保存してください。

<h3> Search database for a tag</h3>
<form action="GetValueAction.php" method="post" enctype=application/x-www-form-urlencoded>
   <p>Tag:<input type="text" name="tag" /></p>
   <input type="hidden" name="fmt" value="html">
   <input type="submit" value="Get value">
</form>

 

検索Action

  • tag Search Action
    1. Search file database for a tag
    2. return value

GetValueAction.phpと保存してください。

// JSON_API , Post Parameters : tag
$tagName  = $_REQUEST['tag'];
$tagValue = '';
is_file($tagName . ".txt") && ($tagValue = file_get_contents($tagName . ".txt"));
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode(array(
    "VALUE",
    $tagName,
    $tagValue
));

 

 

PHP(3) Store file

処理内容

受け取ったデータは、2種類のファイルに保存する。

  1. tag-valueペアをファイルに保存する。
  2. ログファイル

accept form date and store to file.

  1. Store a tag-value pair in the file
  2. Append log on logfile

tag-valueペアをファイルに保存する

受信したtag-valueペアをファイルに保存する。ファイル名はtagNameそのまま、拡張子はtxtになる。

[tagName].txt

ソースコード

$fh = fopen($tagName . “.txt”, “w”) or die(“check file write permission.”);
fwrite($fh, $tagValue);
fclose($fh);

ログを保存する

error_log関数を利用して、ログファイルを生成する。

$file_name = ‘tinywebdb_’ . date(‘Y-m-d’) . ‘.log’;
error_log($log_message, 3, $file_name);

処理をまとめる

一連の処理を StoreAValueAction,php と保存してください。

<?php
            // JSON_API , Post Parameters : tag,value
            $tagName     = $_POST['tag'];
            $tagValue    = $_POST['value'];
            $apiKey      = '';	// $_POST['apikey'];
            $log_message = sprintf("%s:%s\n", date('Y-m-d H:i:s'), "storeavalue: ($apiKey) $tagName -- $tagValue");
            echo $log_message;
            $fh = fopen($tagName . ".txt", "w") or die("check file write permission.");
            fwrite($fh, $tagValue);
            fclose($fh);

            $file_name = 'tinywebdb_' . date('Y-m-d') . '.log';
            error_log($log_message, 3, $file_name);
?>

受け取ったデータは表示、そしてファイルに保存されるはず。

PHP(2) Form Action

このシリーズは、TinyWebDB の実装を目的とする。

TinyWebDBとは

まずTinyWebDB のリポジトリを確認。

https://github.com/edu2web/tinywebdb-php

 

TinyWebDB Protocol:

Action URL Post Parameters Response
Get Value {ServiceURL}/getvalue tag JSON: [“VALUE”,”{tag}”, {value}]
Store A Value {ServiceURL}/storeavalue tag,value JSON: [“STORED”, “{tag}”, {value}]

Store A Value Form

Store A Valueを実装するため、tag-value pair Formをコーディングする。StoreAValueForm.php と保存してください。

<h3>Store a tag-value pair in the databse</h3>
<form action="StoreAValueAction.php" method="post" enctype=application/x-www-form-urlencoded>
 <p>Tag: <input type="text" name="tag" size="30"/></p>
 <p>Value: <input type="text" name="value" size="30"/></p>
 <input type="hidden" name="fmt" value="html">
 <input type="submit" value="Store a value">
</form>

Store A Value Action

フォームに入力された値のPHPによる取得方法の実装。下記のコードを StoreAValueAction,php と保存してください。

<?php
            // JSON_API , Post Parameters : tag,value
            $tagName     = $_POST['tag'];
            $tagValue    = $_POST['value'];
            $apiKey      = '';	// $_POST['apikey'];
            $log_message = sprintf("%s:%s\n", date('Y-m-d H:i:s'), "storeavalue: ($apiKey) $tagName -- $tagValue");
            echo $log_message;
?>

受け取ったデータは表示されるはず。

PHP(1) Hello

PHP勉強の本

 

PHPの基本的な書き方

以下の内容で hello.php という名前のファイルを作成。

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <?php echo '<p>Hello World</p>'; ?> 
 </body>
</html>

 

このサンプルではHTMLファイルの中にPHPのプログラムを埋め込んで、echoでブラウザに文字列を出力しています。

サーバに転送

Web サーバーのルートディレクトリ (DOCUMENT_ROOT) に置いてください。

サーバに転送はftp(filezilla)を利用
https://ja.osdn.net/projects/filezilla/releases/69900
ZIP版をダウンロードして、解凍してください。

動作確認

WEBブラウザで実行すると「Hello World」が出力されます。

文法概要

変数

変数とはプログラムで扱いデータを一時的に保存する箱のようなものです。

変数はそれぞれのプログラミング言語で使用する予約語以外なら好きな名前を付けられます。

PHPで変数を指定するときは、ドル記号($)のあとに変数名を記述します。

コメント

プログラムにおいてコメントは、ファイル名のバージョンやクラス名、関数名を記述したり、処理内容の始まりや終わりを記述するために使います。

複雑な処理でもコメントを確認すれば処理の内容がわかるようになるなど、大きなメリットがあります。

コメントには行頭に「//」を付けるスタイルや「/* */」で囲む方法、行頭に「#」を付ける方法などがあります。

DreamHost Hosting

DreamHostには、One-Click-Installsという機能があり、WordPressとMySQLを10分程度で簡単にインストールすることができる。

1)サイト追加

新しいサイトにWordPressインストールするなら、まずサイトを追加する。

管理画面から「Manage Domains」を開き、「Add Hosting to a Domain / Sub-Domain」をクリックして追加する。ドメイン名など適切なパラメータを設置し、「Fully host this domain」でサイト作成。

2)「One-Clock Installs」選択

「One-Clock Installs」ページで「WordPress」を選ぶ。

3)インストール先のサイト選択

先ほど追加したサイトのドメイン名を選ぶ、インストールパス、DB名はそのままでも良い。「Install it for me now!」をクリック。インストール結果メール待ち。

4)パスワード再設定

インストール結果メールには、パスワードリセットするリンクがついてるので、クリックしてパスワード再設定する。

5)サイトにログイン

メールアドレスと再設定したパスワードでサイトにログイン。

WordPressのツール「Press This」

「Press This」とは

WordPressの管理画面にログインし
[ダッシュボード]→[ツール]→[利用可能なツール]と開きます。

開くと図の様なページが表示されます。

この「Press This」と言うツールを使います。

このPressThis、簡単に言うと、
任意の記事から、掲載したい記事を抜粋して
簡易投稿画面から投稿可能と言う優れものなんです。

Press Thisの使い方

では使い方の解説です。

先ほど開いた画面の図のボタンを
ブックマークバーにドラッグ&ドロップで追加します。

次に、掲載したい記事を開きます。

 

記事の掲載したい部分をドラッグで選択し・・・

 

先ほど追加した[PressThis]ボタンをクリックします。

 

自身のブログにログインしていない場合は
ログインを促されますのでログインしてください。

 

別ウィンドウで図の様な簡易投稿画面が表示されます。

引用元もバッチリと追加してくれていますし
投稿ボタン一つでそのままサクっと投稿する事もできるので
いちいちコピーして・・・
管理画面を開き・・・
投稿から新規投稿画面を開き・・・
ペーストして編集して・・・
引用元を掲載して・・・
と言う、二度手間三度手間を省く事ができて非常に便利です。

WordPress 4.9 Press This 分離

ツールメニューにあるPress thisというブックマークレットが、4.9で削除されます。

従来から、このブックマークレットを使用している場合は、ブックマークレットをクリックすると、インストールボタンが表示されインストールできるようになります。

インストール後、古いブックマークレットをクリックすると
The WordPress bookmarklet was deprecated. Please delete it from your web browser.

と表示されるので、インストール後ツールから、ブックマークレットをセットしなおすといいようです。

新たに使う場合は、Press This — WordPress プラグインから、インストール可能です。

また wp-admin/press-this.php を開くと, 次のように表示され、プラグインをインストールするように促す:

ここでクリックして、プラグインをインストール、有効化すれば、 Press Thisが使えるようになる。

WP- REST-API(v2) Setup

WP4.4 からの WordPress の oEmbed ブログカード埋め込み処理でも一部使われていましたが、wp4.7 からWordPressで REST API が広く有効化されたらしく、試してみる。

まず、プラグインで導入する必要ない、デフォルトで有効になっています。

エンドポイント

試しに、サイトのURLにwp-json/を足して、v1のエンドポイントへアクセスしてみると、たくさんの文字が出力される。

http://xie.mki.biz/wordpress/wp-json/

ここで、Chromeの拡張機能のPostmanを導入して、データを見る

postman

v1より大分長くなり、なんだろう。v2から、エンドポイント変わったね!

先人のブログを参照し、Postsだけ見るにと、出力だいぶ減り

http://xie.mki.biz/wordpress/wp-json/wp/v2/posts

Postmanからデータを見る

image

この画面はなぜかGetのした、Authorizationの表示が出って。認証すると、もっと機能が増える?

認証に関して

認証に関して、v1と変わらないみたい

このAPIにおいては、認証にはいくつかの選択肢があり、基本的に以下のように選びましょう。

  • そのサイトで有効化されたテーマやプラグインから利用するのであれば クッキー認証
  • デスクトップアプリ、ウェブアプリ、モバイルアプリなどのサイトの外からアクセスするクライアントから API を利用するのであれば OAuth 認証, アプリケーションパスワード または ベーシック認証

 

OAuth 認証は複雑なので、しかもv1.0 (OAuth 1.0a specification) の難しい方だ。まず開発段階ではベーシック認証が便利でしょう。

ベーシック認証とアプリケーションパスワードは、HTTP Basic Authentication (published as RFC2617) を利用しており、Basic Auth plugin または Application Passwords plugin のどちらかを有効化する必要があります。

ベーシック認証を使用するには、ユーザー名とパスワードをリクエストごとにAuthenticationヘッダーで送信するだけです。この値は認証のたびにBase64エンドコードでエンコードされるべきです。