OpenResty(Nginx) の Lua スクリプトで CORS レスポンスヘッダーを書き換える必要がありました。その Lua スクリプト についてと、レスポンスヘッダ検証の記事です。

OpenResty(Nginx)LuaでCORS用に条件付きでレスポンスヘッダーを書き換え

GitLab API を利用した一括ダウンロードWebアプリを php で作りました。GitHub に公開しています。作成した「GitLab-Download-App」の紹介記事です。

GitLab APIを利用した一括ダウンロードWebアプリを作った

JavaScriptでiframeを使って、ダウンロードをすると、準備完了時にイベントが発生し、検知できます。ただし、Chromeではイベントが発生しないため、検知できず、Cookieを使うといった工夫が必要です。  
大前提として、ダウンロード中に他の操作をされたら困るという要件があり、その間画面をブロックする仕様とします。正確には、ダウンロード中と言うか、ダウンロード準備中です。ダウンロードが始まれば、あとはブラウザが裏でダウンロードします。  
準備完了とは、ブラウザの保存ダイアログが表示されたり、ブラウザの制御下に入るタイミングのことです。  
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-iframe.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-iframe.gif" alt="iframeを使ってダウンロード" loading="lazy"></a>  

↑  
マウスオーバーでアクションが起きる緑、青、赤、グレーのバーは、ブロックされていることを示すためで、意味は有りません。

<br />

<blockquote class="warn">
<p>【検証環境】</p>
<p><code>Windows10 Pro 64bit</code></p>
<p>　<code>IE11</code></p>
<p>　<code>Edge 40.15063.0.0(非Chromium)</code></p>
<p>　<code>Edge(Chromium) 93.0.961.38</code></p>
<p>　<code>Chrome 93.0.4577.63</code></p>
<p>　<code>Firefox 78.13.0esr</code></p>
<p>　<code>Windows版Safari 5.0.5</code></p>
<p><code>CentOS Linux release 8.3.2011</code></p>
<p>　<code>Apache/2.4.37</code></p>
<p>　<code>PHP 7.4.6</code></p>
</blockquote>

<br />

# まとめ
結論から書きますと、iframeを使ったダウンロードでChromeの場合、準備完了イベントを検知できない問題は、Cookieを使うと解決します。  

<br />

**iframeのイベントを使ってダウンロード準備完了を検知**  

| ブラウザ | ダウンロード準備完了検知 |
| ---- | ---- |
| IE11 | ○ |
| Edge(非Chromium) | ○ |
| Edge(Chromium) | × |
| Chrome | × |
| Firefox | ○ |
| Windows版Safari | ○ |
  

ChromeとEdge(Chromium)は、ダウンロード準備完了を検知できません。  
↓  

**Cookieを使ってダウンロード準備完了を検知**  

| ブラウザ | ダウンロード準備完了検知 |
| ---- | ---- |
| IE11 | ○ |
| Edge(非Chromium) | ○ |
| Edge(Chromium) | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Windows版Safari | ○ |

Cookieを使ってダウンロード準備完了を検知できます。さらに、イベントを検知するわけでは無いため、iframeを使う必要が無くなります。  
アンカーリンク（aタグ）でダウンロードしても目的(画面ブロック解除)は達成します。  
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-link.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-link.gif" alt="Cookieを使ってダウンロード準備完了を検知" loading="lazy"></a>  

<br />

# イベントの検知
各ブラウザで以下のようにダウンロード準備完了イベントの検知を試みた結果です。  
`<iframe src="/download.php" onReadyStateChange="readyStateChange()" onLoad="loaded()"></iframe>`  

<br />

**iframeのイベントを使ってダウンロード準備完了を検知**  
| ブラウザ | ダウンロード準備完了イベント |
| ---- | ---- |
| IE11 | onReadyStateChange |
| Edge(非Chromium) | 無し |
| Edge(Chromium) | 無し |
| Chrome | 無し |
| Firefox | onLoad |
| Windows版Safari | 無し |

単純にイベントだけではカバーしきれないため、  
`document.getElementById('download').contentDocument.readyState;`  
の値を調べます。  
↓  

| ブラウザ | readyState |
| ---- | ---- |
| IE11 | loading → interactive |
| Edge(非Chromium) | loading → interactive |
| Edge(Chromium) | completeのまま |
| Chrome | completeのまま |
| Firefox | uninitialized → complete |
| Windows版Safari | loading → complete |

ダウンロード準備中→ダウンロード準備完了　で、Edge(非Chromium)は、interactive、Safariは、completeを見ると分かります。  
ChromeとEdge(Chromium)は、この方法でもずっとcompleteのため、ダウンロード準備完了を検知できません。  

<br />

# Cookieで検知のしくみ
以下のようにデータ送出と同時にCookieが送られるようにして、Cookieの有無でダウンロード準備完了を検知します。  
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/cookie.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/cookie.png" alt="Cookieで検知のしくみ" loading="lazy"></a>  

<br />

# アンカーリンクでのダウンロード
既存システムの改修などでもなく、特に縛りが無い場合、iframeである必要は無くなります。
アンカーリンク（aタグ）にして、クッキー検知で統一すれば良いです。

<br />

**Cookieを使ってダウンロード準備完了を検知**  

| ブラウザ | ダウンロード準備完了検知 |
| ---- | ---- |
| IE11 | ○ |
| Edge(非Chromium) | ○ |
| Edge(Chromium) | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Windows版Safari | ○ |

<br />

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-link.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-link.gif" alt="Cookieを使ってダウンロード準備完了を検知" loading="lazy"></a>  

<br />

# 動画gifのソースコード

`画面側ソースコード：`  

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Download via iframe</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    <script>
        var intervalID;
        function readyStateChange() {
            $.modal.close();
        }
        window.onload = function () {
            $("#anchorlink").on("click", function () {
                $("#blockui").modal({
                    escapeClose: false,
                    clickClose: false,
                    showClose: false
                });
                document.cookie = "downloaded=; path=/; expires=" + new Date(0).toUTCString() + ";";//Thu, 01 Jan 1970 00:00:00 GMT
                intervalID = setInterval(function () {
                    if (document.cookie.indexOf("downloaded") >= 0) {
                        document.cookie = "downloaded=; path=/; expires=" + new Date(0).toUTCString() + ";";
                        clearInterval(intervalID);
                        $.modal.close();
                    }
                }, 500);
            });
            $("#btn").on("click", function () {
                $("#blockui").modal({
                    escapeClose: false,
                    clickClose: false,
                    showClose: false
                });
                if (!!window.chrome && /Chrome/.test(navigator.userAgent)) {//Chrome
                    document.cookie = "downloaded=; path=/; expires=" + new Date(0).toUTCString() + ";";
                    var html = '<iframe id="download" src="/download.php">';
                    document.getElementById("frame").innerHTML = html;
                    intervalID = setInterval(function () {
                        if (document.cookie.indexOf("downloaded") >= 0) {
                            document.cookie = "downloaded=; path=/; expires=" + new Date(0).toUTCString() + ";";
                            clearInterval(intervalID);
                            $.modal.close();
                        }
                    }, 500);
                } else if (/*@cc_on!@*/ false || !!document.documentMode) {//IE11
                    var html = '<iframe id="download" src="/download.php" onReadyStateChange="readyStateChange()" width=0 height=0></iframe>';
                    document.getElementById("frame").innerHTML = html;
                } else if (/constructor/i.test(window.HTMLElement) ||
                    (function (p) {
                        return p.toString() === '[object SafariRemoteNotification]';
                    })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification)) ||//Safari
                    (!(/*@cc_on!@*/ false || !!document.documentMode) && !!window.StyleMedia)) {//Edge
                    var html = '<iframe id="download" src="/download.php">';
                    document.getElementById("frame").innerHTML = html;
                    intervalID = setInterval("timer_event()", 200);
                } else {
                    var iframe = document.createElement("iframe");
                    iframe.src = "/download.php";
                    if (document.all) {
                        iframe.onreadystatechange = function () {
                            switch (this.readyState) {
                                case "complete":
                                case "interactive":
                                    $.modal.close();
                                    this.onreadystatechange = null;
                            }
                        }
                    } else {
                        iframe.onload = function () {
                            $.modal.close();
                        }
                    }
                    document.getElementById("frame").appendChild(iframe);
                }
            });
        }
        function timer_event() {
            var iframe = document.getElementById("download");
            var status;
            status = iframe.contentDocument.readyState;
            if (status == "complete" || status == "interactive") {
                clearInterval(intervalID);
                $.modal.close();
            }
        }
    </script>
    <style>
        html {
            font-family: ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
        }
        #sidenav a {position: absolute; left: -80px; transition: 0.3s; padding: 15px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0;}
        #sidenav a:hover {left: 0;}
        #about {top: 20px; background-color: #04AA6D;}
        #blog {top: 80px; background-color: #2196F3;}
        #projects {top: 140px; background-color: #f44336;}
        #contact {top: 200px; background-color: #555}
        #btn {position: absolute; top: 300px; background-color: DodgerBlue; border: none; color: white; padding: 12px 30px; cursor: pointer; font-size: 20px;}
        #btn:hover {background-color: RoyalBlue;}
        #blockui>p {text-align: center}
        #anchorlink {position: absolute; top: 400px;}
    </style>
</head>
<body>
    <div id="sidenav" class="sidenav">
        <a href="#" id="about">About</a>
        <a href="#" id="blog">Blog</a>
        <a href="#" id="projects">Projects</a>
        <a href="#" id="contact">Contact</a>
    </div>
    <button id="btn"><i class=" fa fa-download"></i> Download</button>
    <div id="blockui" style="display: none;">
        <p>Please wait</p>
    </div>
    <div id="anchorlink"><a href="/download.php">Download</a></div>
    <div id="frame" style="display: none;"></div>
</body>
</html>
```

`サーバー側ソースコード（php）：`  

```php
<?php

sleep(2);//何らかの時間がかかる処理
$file = 'test.dat';

setcookie('downloaded', 'true', time() + 3600, '/');
header('Content-type: application/octet-stream');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Length: '.filesize($file));
mb_http_output('pass');
readfile($file);
echo filesize($file);
exit;
```

<blockquote class="warn">
<p>Cookieが残ったままになるとまずいため、expires（クッキーの有効期限）を一時間後に設定しています。※念のための処置で、ダウンロード準備に一時間かかると検知できなくなるわけではありません。</p>
</blockquote>

<br />

# ajaxを使う場合
ajaxを使ってダウンロードする方法を試しました。  
参考：<a href="https://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post" target="_blank">Handle file download from ajax post(stackoverflow)</a>  

<blockquote class="warn">
<p>・ダウンロード準備完了ではなく、本当にダウンロード完了の時までブロックになりました。</p>
<p>・ダウンロード対象の容量が大きいと動作しないようです。</p>
<p>・Windows版Safariは動きませんでした。</p>
</blockquote>

この例では、`jquery.blockUI.js`で画面をブロックしています。  
`$(document).ajaxStop(stopWaiting);`のところで画面ブロックを解除しています。  

<blockquote class="info">
<p>【 ajaxStop 】</p>
<p>ajaxリクエストの送信終了時に実行される関数を引数に指定します。</p>
</blockquote>

<br />

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-ajax.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/download-iframe/download-ajax.gif" alt="ajaxでファイルダウンロード" loading="lazy"></a>  

<br />

`ajaxを使ってダウンロードのサンプルコード：`  
※php側は同じ実装とします。  

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Download from ajax</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="/jquery.blockUI.js"></script>
    <script>
        function startWaiting() {
            $.blockUI({
                message: 'Please wait...',
                css: {
                    width: '250px',
                    padding: '30px 0px',
                    border: 'none',
                    cursor: 'wait'
                }
            });
        }
        function stopWaiting() {
            $.unblockUI();
        }
        $(document).ajaxStop(stopWaiting);
        window.onload = function () {
            $('#btn').on('click', function () {
                startWaiting();
                $.ajax({
                    type: 'GET',
                    url: '/download.php',
                    xhrFields: {
                        responseType: 'blob' // to avoid binary data being mangled on charset conversion
                    },
                    success: function (blob, status, xhr) {
                        // check for a filename
                        var filename = "";
                        var disposition = xhr.getResponseHeader('Content-Disposition');
                        if (disposition && disposition.indexOf('attachment') !== -1) {
                            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            var matches = filenameRegex.exec(disposition);
                            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                        }
                        if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                            window.navigator.msSaveBlob(blob, filename);
                        } else {
                            var URL = window.URL || window.webkitURL;
                            var downloadUrl = URL.createObjectURL(blob);
                            if (filename) {
                                // use HTML5 a[download] attribute to specify filename
                                var a = document.createElement("a");
                                // safari doesn't support this yet
                                if (typeof a.download === 'undefined') {
                                    window.location.href = downloadUrl;
                                } else {
                                    a.href = downloadUrl;
                                    a.download = filename;
                                    document.body.appendChild(a);
                                    a.click();
                                }
                            } else {
                                window.location.href = downloadUrl;
                            }
                            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                        }
                    }
                });
            });
        }
    </script>
    <style>
        html {font-family: ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif;}
        #btn {position: absolute; top: 100px; background-color: DodgerBlue; border: none; color: white; padding: 12px 30px; cursor: pointer; font-size: 20px;}
        #btn:hover {background-color: RoyalBlue;}
    </style>
</head>
<body>
    <button id="btn"><i class=" fa fa-download"></i> Download</button>
</body>
</html>
```


JavaScriptでiframeを使って、ダウンロードをすると、準備完了時にイベントが発生し、検知できます。Chromeではイベントが発生しないため、検知できず、Cookieを使うといった工夫が必要です。準備完了イベントを検知できない問題は、Cookieを使うと解決します。

iframeを使ったダウンロードでChromeの場合、完了イベントを検知できない

ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得し Web 画面にグラフを表示するシステムを構築しました。いわゆる IoT です。python,wiringpi,apache を使用して、python プログラム(GitHub/wiringpi-python-bme280)でデータを取り出して記録 →Web 画面にグラフを表示までやっていきます。

BME280で取得した温湿度気圧をWeb画面に表示する(python,wiringpi,apache)

# はじめに
ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得しWeb画面にグラフを表示するシステムを構築しました。
いわゆる IoT です。  
<br />
前回の「<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">
<p><strong>【 wiringpi-php8 】</strong></p>
<p>php8対応wiringpiです。wiringpi（ワイヤリングパイ）とは、GPIOを操作するライブラリです。C言語、Pythonには有りますが、php8に対応したものが無かったため、作成し、githubに公開しました。php7対応版（<a href="https://github.com/itc-lab/wiringpi-php7" target="_blank">wiringpi-php7</a>）もあります。</p>
</blockquote>

<br />

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

<br />

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

<br />

<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">
<br />

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

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

<br />

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

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

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

<br />

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

<br />

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

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

<br />

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

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

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

<br />

```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}`  

<br />

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

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

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

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

```sh
# systemctl restart apache2
```

<br />

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

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

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

<br />

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

<br />

## 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">
<br />

```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">
<p>今回の環境では、以下のエラーになるため、phpizeの書き換えが必要でした。</p>
<p><code>/usr/bin/phpize: 1: /usr/bin/phpize: /usr/bin/sed: not found</code></p>
</blockquote>

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

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

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

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

<br />

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
```

<br />

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

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

<br />

<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にデータを記録し続けるプログラムです。  
<br />
<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">
<br />

```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 に出力されます。

<br />

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

<br />

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

<br />

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

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

<br />

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

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

<br />
ここまでで以下の配置になるはずです。

```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
```

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

<br />

`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で値を表示  
<br />
構成を図示すると、以下です。  
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/raspberrypi4-2/kousei2.svg" alt="" width="600px">  
<br />

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

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

表示されました！

<br />

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

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

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

上述の手順の通り、
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に置かれているものとします。
<br />

```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"}
```
のように現在値が返ればＯＫです。

<br />

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

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

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

<br />
<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": "洋室３"       },
        {}
]
```

<br />

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

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

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

できました！  

<br />


ラズベリーパイとセンサーを組み合わせて温度、湿度、気圧のデータを取得し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画面にグラフを表示 ・複数のノードに対応

[関連技術で絞り込み結果]

OpenResty(Nginx)LuaでCORS用に条件付きでレスポンスヘッダーを書き換え

GitLab APIを利用した一括ダウンロードWebアプリを作った

iframeを使ったダウンロードでChromeの場合、完了イベントを検知できない

BME280で取得した温湿度気圧をWeb画面に表示する(python,wiringpi,apache)

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