# はじめに
ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。
いわゆる IoT です。 
 
前回の「<a href="https://itc-engineering-blog.netlify.app/blogs/pelfuqnq5o" target="_blank">Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する</a>」は、センターとLCDの取り付け、単体動作確認まででしたが、今回は、<a href="https://github.com/itc-lab/wiringpi-php8" target="_blank">wiringpi-php8</a>を使用して、phpプログラムでデータを取り出して記録→Web画面にグラフを表示までやっていきます。

<blockquote class="warn">
【 wiringpi-php8 】
php8対応wiringpiです。wiringpi（ワイヤリングパイ）とは、GPIOを操作するライブラリです。C言語、Pythonには有りますが、php8に対応したものが無かったため、作成し、githubに公開しました。php7対応版（<a href="https://github.com/itc-lab/wiringpi-php7" target="_blank">wiringpi-php7</a>）もあります。
</blockquote>

 

・[環境構築 - apache2インストール](#anchor1) 
・[環境構築 - phpインストール](#anchor2) 
・[wiringpi-php8 インストール](#anchor3) 
・[wiringpi-php8 動作確認](#anchor4) 
・[Web画面にグラフを表示](#anchor5) 
・[複数のノードに対応](#anchor6) 

 

<blockquote class="warn">
今回の検証環境は、
<code>LABISTS Raspberry Pi 4 STARTER KIT</code>
<code>Raspbian GNU/Linux 10 (buster)</code>
<code>Python 2.7.16</code>
<code>温湿度気圧センサBME280</code>
<code>LCD 1602A</code>
<code>gpio(wiringpi) 2.52</code>
<code>Apache 2.4.38</code>
<code>PHP 8.0.7</code>
になります。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# 環境構築 - apache2インストール
ラズパイ本体にWebサーバーapache2をインストールします。まずは、以下の状況を目指します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei1.png" alt="" width="600px">
 

```sh
$ sudo passwd root
$ su
# apt update
# apt install apache2
```

<blockquote class="warn">
以降、sudoを省略し、root権限でコマンドを入力しているものとします。<code>apt install</code>には-yを付けて、<code>? [Y/n]</code>のような確認は省略します。
</blockquote>

 

`/var/www/html/index.html` が自動的に作成されますので、 
`http://[ラズパイのIPアドレス]/` 
にアクセスします。 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image1.png" alt="" width="600px">
 

⇒Apache2 Debian Default Pageが表示されればＯＫです。 

 

<a class="anchor" id="anchor2"></a>

# 環境構築 - phpインストール
## php8インストール
PHP 8のパッケージは、DEB.SURY.ORG リポジトリにあるため、DEB.SURY.ORG リポジトリをインストールします。 

```sh
# apt update
# apt install -y lsb-release ca-certificates apt-transport-https software-properties-common
```

<blockquote class="info">
<code>lsb-release</code> コマンドは、OS(Linux)のバージョン番号、リリース コード名、ディストリビューター ID などの情報（LSB = Linux Standard Base）を返すコマンドです。
<code>apt-transport-https</code> は、aptのhttps通信対応版です。
<code>ca-certificates</code> は、<code>apt-transport-https</code> のSSL通信に必要です。</code>
<code>software-properties-common</code> は、サードパーティーのパッケージ、個人開発パッケージPPA(Personal Package Archive)を管理するツール類になります。</code>
</blockquote>

 

APTリポジトリにPHPパッケージの情報を追加します。 

```sh
# echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/sury-php.list
```

 

APT署名をダウンロードして、登録します。→apt.gpgは、phpパッケージが改ざんされていないか確認するものです。 

```sh
# wget -qO - https://packages.sury.org/php/apt.gpg | apt-key add -
```

<blockquote class="info">
<code>-O</code> : ダウンロードファイルの保存先です。ファイル名を - とすると、ファイルに保存せずに標準出力されます。
<code>-q</code> : 進捗などの詳細表示を表示しないようにします。
</blockquote>

 

```sh
# apt update
# apt upgrade -y
# apt install -y php8.0
# php -v
PHP 8.0.7 (cli) (built: Jun 4 2021 23:17:30) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.7, Copyright (c) Zend Technologies
 with Zend OPcache v8.0.7, Copyright (c), by Zend Technologies
```

時期によりバージョンは一致しないかもしれませんが、PHP 8.0.*であれば、インストール成功です。 
phpモジュールを追加するときは、以下のようにインストールしますが、今回特に必要無いため、実行せず、進めます。 
`# apt install -y php8.0-{mysql,cli,common,imap,ldap,xml,fpm,curl,mbstring,zip}` 

 

## php8動作確認
動作確認用にphpファイルを作成します。

```sh
# vi /var/www/html/info.php
```

info.phpは、以下の内容とします。

```php
<?php phpinfo ();?>
```

```sh
# systemctl restart apache2
```

 

`http://[ラズパイのIPアドレス]/info.php` 
にアクセスします。 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image2.png" alt="" width="600px">
 

⇒phpinfoの画面が表示されれば、ＯＫです。 

 

<a class="anchor" id="anchor3"></a>

# wiringpi-php8 インストール
## wiringpi
まずは、wiringpiをインストールします。 

```sh
# cd /tmp
# wget https://project-downloads.drogon.net/wiringpi-latest.deb
# dpkg -i wiringpi-latest.deb
# gpio -v
gpio version: 2.52
Copyright (c) 2012-2018 Gordon Henderson
This is free software with ABSOLUTELY NO WARRANTY.
For details type: gpio -warranty

Raspberry Pi Details:
 Type: Pi 4B, Revision: 02, Memory: 4096MB, Maker: Sony
 * Device tree is enabled.
 *--> Raspberry Pi 4 Model B Rev 1.2
 * This Raspberry Pi supports user-level GPIO access.
```

<blockquote class="info">
<code>dpkg</code>は、ダウンロードしたパッケージを指定してインストールするコマンドです。（RedHat,CentOSの<code>rpm</code>に相当。）
</blockquote>

 

## wiringpi-php8
php8に拡張機能`wiringpi-php8`を組み込みます。

<a href="https://github.com/itc-lab/wiringpi-php8" target="_blank">wiringpi-php8</a> から `wiringpi-php8-main.zip` をダウンロードして、/home/piに置かれているものとします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image3.png" alt="" width="600px">
 

```sh
# cd /home/pi
# unzip wiringpi-php8-main.zip
# cd wiringpi-php8-main
# apt install -y php8.0-dev
# vi /usr/bin/phpize
```

<blockquote class="warn">
今回の環境では、以下のエラーになるため、phpizeの書き換えが必要でした。
<code>/usr/bin/phpize: 1: /usr/bin/phpize: /usr/bin/sed: not found</code>
</blockquote>

```sh
SED="/usr/bin/sed"
↓
SED="/bin/sed"
```

```sh
# phpize
# ./configure
# make && make install
```

<blockquote class="warn">
phpizeとは、拡張モジュールをビルドするビルドツールです。これを使用することにより、PHPをソースから再コンパイルすることなく拡張モジュールをビルドすることができます。
</blockquote>

⇒`/usr/lib/php/20200930/wiringpi.so` ができます。

 

php.iniに拡張モジュールの設定を追加します。 

```sh
# vi /etc/php/8.0/cli/conf.d/wiringpi.ini
```

以下の内容とします。※/etc/php/8.0/cli/php.ini→/etc/php/8.0/cli/conf.d/*.ini の順に読み込まれるため、`wiringpi.ini`に限らず、どこかに書けば良い設定になります。

```sh
extension=wiringpi.so
```

 

apacheのユーザーwww-dataでi2c,gpio,spiデバイスのアクセス権が与えられるようにwww-dataの所属グループを追加します。

```sh
# adduser www-data i2c
# adduser www-data spi
# adduser www-data gpio
```

 

<a class="anchor" id="anchor4"></a>

# wiringpi-php8 動作確認

<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a>の `opt/bme280.php` を使って、動作確認をします。 
`opt/bme280.php` は、温湿度気圧センサBME280からデータを取得し、LCD 1602Aに表示すると同時に、/var/log/bme280log/YYYYMMDD.logにデータを記録し続けるプログラムです。 
 
<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a> から <code>wiringpi-php-bme280-main.zip</code> をダウンロードして、/home/piに置かれているものとします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image4.png" alt="" width="600px">
 

```sh
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd /home/pi/wiringpi-php-bme280-main/opt
# chmod 755 bme280.php
# ./bme280.php
```

⇒/var/log/bme280log/YYYYMMDD.log に 

```sh
# tail /var/log/bme280log/20210627.log
date time temp humid press
2021/06/27 17:05:00 26.15 47.05 999.00
2021/06/27 17:10:00 25.79 42.96 998.98
2021/06/27 17:15:00 25.91 46.81 999.21
2021/06/27 17:20:00 26.13 50.05 999.40
```

のように記録されていれば、phpと温湿度気圧センサBME280の動作は、ＯＫです。※５分間隔で記録します。起動して５分後に初めてYYYYMMDD.log に出力されます。

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/php_lcd.gif" alt="">
 
のようにLCDに表示されていれば、phpとLCD 1602Aの動作は、ＯＫです。 

 

ここまででで確認した内容を図示すると、以下になります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei1.png" alt="" width="600px">

 

止めるときは、以下のコマンドになります。

```sh
# cd /home/pi/wiringpi-php-bme280-main/opt
# ./bme280.php stop
```

 

<a class="anchor" id="anchor5"></a>

# Web画面にグラフを表示
グラフ表示用にプログラムを配置します。
```sh
# cd /home/pi/wiringpi-php-bme280-main
# cp -r html/* /var/www/html/.
```

 
ここまでで以下の配置になるはずです。

```sh
# find /var/www/html -type f
/var/www/html/index.html
/var/www/html/info.php
/var/www/html/bme280.html
/var/www/html/js/jquery.flot.tooltip.min.js
/var/www/html/js/jquery-1.8.3.min.js
/var/www/html/js/excanvas.min.js
/var/www/html/js/jquery.flot.min.js
/var/www/html/js/jquery.flot.crosshair.min.js
/var/www/html/getlogdata.php
```

 
以下のような流れで、グラフを表示します。 

 

`http://[ラズパイのIPアドレス]/bme280.html` をブラウザで表示 
↓ 
jQueryのajaxで 
`http://[ラズパイのIPアドレス]/getlogdata.php` にアクセス 
↓ 
[ラズパイのIPアドレス] の /var/www/html/getlogdata.php が /var/log/bme280log/YYYYMMDD.log を読み取って、jsonを返す。 
↓ 
ブラウザにjsonデータが返ってきて、/js/jquery.flot.min.jsでグラフ描画 
グラフ上にマウスホバーすると、/js/jquery.flot.tooltip.min.jsで値を表示 
 
構成を図示すると、以下です。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei2.svg" alt="" width="600px"> 
 

`http://[ラズパイのIPアドレス]/bme280.html` にアクセスしてみます。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image5.png" alt="" width="600px">
 

表示されました！

 

<a class="anchor" id="anchor6"></a>

# 複数のノードに対応
以下の構成にして複数のノード（ラズパイ＋センサ）の結果を一画面に表示します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei3.svg" alt="">
 

## インストール - ラズパイ２台とも
ノード（ラズパイ＋センサ）を作成します。（今回は２台） 
以下の構成にしてデータ収集と応答だけに特化します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei4.svg" alt="">
 

上述の手順の通り、
apache、php、wiringpi-php8をインストールして、<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a> から <code>wiringpi-php-bme280-main.zip</code> をダウンロードして、/home/piに置かれているものとします。
 

```sh
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd /home/pi/wiringpi-php-bme280-main/opt
# chmod 755 bme280.php
# ./bme280.php
```

```sh
# cd /home/pi/wiringpi-php-bme280-main
# cp html/getlogdata.php /var/www/html/
```

```sh
# curl -X POST --data "TYPE=CURRENT" http://localhost/getlogdata.php
{"datetime":"2021\/06\/27 18:37:13","temp":"26.14","humid":"49.15","press":"999.71"}
```
のように現在値が返ればＯＫです。

 

## インストール - 画面兼中継サーバー
以下の構成にして画面表示とデータ中継を担います。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei5.svg" alt="">
 

Apacheとphpが動作する場合、特に縛りは無いですが・・・ 
分かりやすく、上述の手順の通り、apache、phpがインストール済みとします。（wiringpi-php8は不要です。） 
 
**中継サーバーは、curlの機能を使うため、curlのphp extensionが必要です。**

```sh
# apt install -y php8.0-curl
```

 
<a href="https://github.com/itc-lab/wiringpi-php-bme280" target="_blank">wiringpi-php-bme280</a> から <code>wiringpi-php-bme280-main.zip</code> をダウンロードして、/home/piに置かれているものとします。 

```sh
# cd /home/pi
# unzip wiringpi-php-bme280-main.zip
# cd wiringpi-php-bme280-main
# cp -r html/js /var/www/html/
# cp html_relay/rooms.json /var/www/html/
# cp html_relay/proxyproc.php /var/www/html/
# cp html_relay/bme280s.html /var/www/html/
```

```sh
# vi /var/www/html/rooms.json
```

この例のように、ノード（ラズパイ＋センサ）の台数分のIPアドレスを設定します。
今回は、 
192.168.2.32 
192.168.2.38 
２台とします。※192.168.2.33、192.168.2.34はコメントアウトされています。 
↓ 

```json
[
 { "url": "http://192.168.2.38/", "name": "居間" },
 { "url": "http://192.168.2.32/", "name": "洋室１" },
 { "//url": "http://192.168.2.33/", "name": "洋室２" },
 { "//url": "http://192.168.2.34/", "name": "洋室３" },
 {}
]
```

 

## Web画面にグラフを表示
以下の仕組みにより、まとめてグラフを表示します。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei6.svg" alt="">
 

`http://[画面兼中継サーバー]/bme280s.html` にアクセスします。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/image6.png" alt="" width="600px">
 
 

できました！

ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。 いわゆる IoT です。 前回の「Raspberry Pi 4に温湿度気圧センサBME280を取り付けてデータをLCD 1602Aに表示する」は、センターとLCDの取り付け、単体動作確認まででしたが、今回は、wiringpi-php8を使用して、phpプログラムでデータを取り出して記録→Web画面にグラフを表示までやっていきます。 【 wiringpi-php8 】 php8対応wiringpiです。wiringpi（ワイヤリングパイ）とは、GPIOを操作するライブラリです。C言語、Pythonには有りますが、php8に対応したものが無かったため、作成し、githubに公開しました。php7対応版（wiringpi-php7）もあります。 ・環境構築 - apache2インストール ・環境構築 - phpインストール ・wiringpi-php8 インストール ・wiringpi-php8 動作確認 ・Web画面にグラフを表示 ・複数のノードに対応

BME280で取得した温湿度気圧をWeb画面に表示する(wiringpi-php8使用)