月別アーカイブ: 2021年7月

WordPressをAMP化し、Gistの埋め込みに対応した

このサイトはWordPressを使って作成していますが、表示速度の向上やSEO対策のためにAMP化しました。

WordPressのAMP化

AMP化は、以下のWordPress公式プラグインを使って簡単に実現できました。

AMP

またGoogle Analyticsの設定は、「AMP → 設定 → アナリティクス」の「種類:」に「googleanalytics」と入力します。すると「JSON構成:」が自動入力されるので、「UA-」で始まるトラッキングIDを設定すればOKです。

しかし、AMP化によって一つ問題が発生しました。AMP化したことにより、Gistの埋め込みコードが表示されなくなってしまったのです。

GistのAMP対応

Gistの埋め込みコードを、AMP化したWordPressに表示する方法として、ショートコードを使う方法を紹介します。そのために、JetpackというこれまたWordPress公式プラグインを使います。

Jetpackの「設定 → 執筆」にある「ショートコードを使って作成し、人気サイトからメディアを埋め込む」にチェックを入れます。これにより、ショートコードの機能が使えるようになります。

AMP化前は、カスタムHTMLで以下のコードを記載すればGistを埋め込めました。

<script src="https://gist.github.com/shoarai/a98cf027914d43139f4dbe579f726b8b.js"></script>

AMP化後は、ショートコードで以下のテキストを記載すればGistを埋め込めます。

[gist]a98cf027914d43139f4dbe579f726b8b[/gist]

ちなみに、ショートコードはGist以外にも、Facebookの投稿やTwitterのツイートなども埋め込めます。利用可能なショートコードは以下で確認できます。
https://jetpack.com/support/shortcode-embeds/

M5StickC PlusとAmbientでCO2の推移を可視化した

前回の記事では、M5StickC PlusとMH-Z19CでCO2濃度を測定し、画面に表示しました。今回は、CO濃度の推移をチャートで見れるようにするため、測定値をクラウドに蓄積して可視化してみました。

CO2濃度の測定画面

クラウドサービス

データを蓄積するクラウドサービスはAmbientを使いました。無料枠でも、8チャネル×8種類のデータ、データの保存期間1年間と、個人で使うには十分すぎるサービスです。有料版は、データの受信監視や通知が利用できるようです。

クラウドサービスなので、M5StickC Plusからデータを送信するには、インターネットに繋がるWiFiのアクセスポイントが必要です。

セットアップ

Ambient公式ドキュメントの以下の手順で、チャネル生成まで行います。

  1. ユーザー登録(無料)
  2. チャネル生成

生成したチャネルの「チャネル設定」で、以下の通りデータ名を変更しておきます。

  • データー1:CO2
  • データー2:温度

Ambientのライブラリは、Arduino IDEのメニューバーの「ツール → ライブラリを管理…」で、「ambient」と検索すると見つかります。ライブラリ名は「Ambient ESP32 ESP8266 lib」です。バージョンは1.0.1でした。

ソースコードの更新

前回の記事のソースコードに、以下のコメント部分を追記します。「…」の部分は各自の環境に合わせて、WiFiのアクセスポイントの情報と、生成したチャネルのチャネルIDとライトキーを記載します。

#include <M5StickCPlus.h>
#include <MHZ19_uart.h>
// Ambientライブラリをインクルードする。
#include "Ambient.h"
const int rx_pin = 36;
const int tx_pin = 26;
// WiFiアクセスポイントのSSIDとパスワードを設定する。
const char* ssid = "...";
const char* password = "...";
// Ambientで作ったチャネルのチャネルIDとライトキーを設定する。
unsigned int channelId = ...;
const char* writeKey = "...";
MHZ19_uart mhz19;
// WiFiとAmbientの変数を宣言する。
WiFiClient client;
Ambient ambient;
void setup()
{
M5.begin();
pinMode(36, INPUT);
gpio_pulldown_dis(GPIO_NUM_25);
gpio_pullup_dis(GPIO_NUM_25);
Serial.begin(9600);
mhz19.begin(rx_pin, tx_pin);
mhz19.setAutoCalibration(false);
M5.Lcd.setRotation(3);
M5.Lcd.setTextSize(4);
// Wi-Fiアクセスポイントに接続する。
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(100);
}
M5.Lcd.println("WiFi connected.");
// Ambientを初期化する。
ambient.begin(channelId, writeKey, &client);
M5.Lcd.println("MH-Z19 is warming up now.");
delay(10 * 1000);
}
void loop()
{
int co2ppm = mhz19.getCO2PPM();
int temp = mhz19.getTemperature();
M5.Lcd.fillScreen(BLACK);
M5.Lcd.setCursor(0, 0);
M5.Lcd.print("co2: ");
M5.Lcd.println(co2ppm);
M5.Lcd.print("temp: ");
M5.Lcd.println(temp);
// 測定値をAmbientに送信する。
ambient.set(1, co2ppm);
ambient.set(2, temp);
ambient.send();
delay(5000);
}

チャートの確認

Ambientでデータを送信したチャネルを開くと、CO2濃度の推移を可視化できました!
左のCO2のチャートを見ると、15:30:00過ぎに600ppmぐらいまで下がっています。これはエアコンをつけて窓を締め切った部屋から、ベランダに出たためです。

Ambientのチャート画面

回路図をdraw.ioで描いてWordPressで表示する方法

以下の記事でギターアンプの回路を設計しました。回路図はdraw.ioを使って描き、描いた図をWordPressで表示しました。その時の手順を紹介します。

回路図をdraw.ioで描く

draw.ioを開いたら「Create New Diagram」を選び、図のテンプレートを選びます。ここで「Engineering → Electrical 1」を選ぶと、抵抗やコンデンサ、オペアンプやトランジスタの図が左サイドバーに表示されるので、すぐに回路図を描き始められます。

draw.ioの画面

図の描き方はここでは説明しません。わりと直感的に描けるので、そんなに困らないと思います。

回路図をWordPressで表示する

以下の手順で、draw.ioで作成した図をWordPressで表示できます。手順はdraw.io公式の記事にある通りです。

  1. 右クリックして「Select All」を選び、右サイドバーの「Text → Formatted Text」のチェックを外す。
  2. 右クリックして「Select Vertices」を選び、右サイドバーの「Text → Word Wrap」のチェックを外す。
  3. 「File → Embed → SVG…」を選ぶ。
  4. 「Lightbox」のチェックを外して、「Embed」を押し、「Copy」を押してSVGのコードをコピーする。
  5. コピーしたSVGをWordPressにカスタムHTMLとして貼る。

以下のように回路図が表示できます。

4.7kΩ220μF100Ω10μF10μF9V0.047μF220μF1kΩB100ΩB8Ω0.5WLM386N-1Blue LED154236876.3mmStereo Jack

はじめてのM5StickC PlusでCO2を測った

先日はじめてギターアンプを自作しましたが、今回はM5StickC Plusを使った電子工作です。在宅勤務が今後も続きそうなので、自宅の快適さを測りたいと思い、集中力に影響があると言われているCO2の濃度を測ることにしました。

デバイスと部品

M5StickC Plusの外観
MH-Z19Cの外観

ジャンパーワイヤー

MH-Z19Bという下位バージョンのものもありますが、フェイク品が出回っているそうで、秋月で確実に買えるMH-Z19Cにしました。その他にPC、PCとM5StickC Plusを繋ぐためのUSB Type−Cケーブルが必要です。

環境構築

  • Arduino IDEをインストールしてセットアップ

Arduino IDEのインストールやセットアップは、Interfaceの以下の記事を参考にしました。実施するのはステップ1、2だけです。
M5StickC Plusの開発環境(Arduino IDE)構築の手順 – Interface

記事ではWindows10で、僕はMacで実施しましたが問題ありませんでした。Macの場合は、zipファイルがダウンロードされ、解凍するとappファイルができます。また、記事中にある「ESP32パッケージのJSONファイルURL」は以下になります。コピペ用にどうぞ。
https://dl.espressif.com/dl/package_esp32_index.json

バージョンは以下の通り。

  • Arduino IDE:1.8.15
  • ESP32パッケージ:1.0.6

PlatformIOという開発環境もあるようですが、初心者なのでまずは基本的な環境であるArduino IDEを使ってみます。

サンプルプログラムの実行

試しにサンプルプログラムを動かしてみます。メニューバーの「ファイル → スケッチ例 → M5StickCPlus → Basics → IMU」を選ぶと、サンプルプログラムのソースコードが表示されます。画面左上の「マイコンボードに書き込む」ボタンを押して、プログラムをマイコンに書き込みます。IMUというのは加速度センサーのサンプルです。

M5StickC Plusのサンプルプログラムの画面

初めて書き込みを実行したときは、「シリアルポートが選択されていません。」というエラーが表示されました。「cu.usbserial-…」というポートを選んで再度実行したところ、正常に書き込め、プログラム実行できました。

CO2濃度の計測

M5StickC PlusとMH-Z19Cを接続します。以下のピン同士をジャンプワイヤー オス-メスで繋げます。

M5StickC PlusのピンMH-Z19Cのピン
GNDGND
5V→VIN
G26Rx
G36(G36/G25と記載されているピン)Tx

プログラムにはmhz19_uartというライブラリを使わせてもらいます。zipファイルをダウンロードし、メニューバーの「スケッチ → ライブラリのインクルード → .ZIP形式のライブラリをインストール…」からインストールします。

このライブラリには実行サンプルコードも付属しているので、使わせてもらいましょう。メニューバーの「ファイル → スケッチ例 → MHZ19_uart → MHZ19_getco2」を選ぶと、サンプルコードが表示されます。ただし、まだマイコンに書き込みません。下記のコメント記載部分を追記、変更してからマイコンに書き込みます。

// 追記:M5StickC Plusで必要なヘッダをインクルードする。
#include <M5StickCPlus.h>
#include <MHZ19_uart.h>
// 変更:接続するピンの番号を変更する。
const int rx_pin = 36;
const int tx_pin = 26;
MHZ19_uart mhz19;
void setup()
{
// 追記:M5StickC Plusの初期化と、G36ピンを使うためにG25ピンをフローティングにする。
M5.begin();
pinMode(36, INPUT);
gpio_pulldown_dis(GPIO_NUM_25);
gpio_pullup_dis(GPIO_NUM_25);
Serial.begin(9600);
mhz19.begin(rx_pin, tx_pin);
mhz19.setAutoCalibration(false);
// 追記:デフォルトだと画面が見づらいので、横向き表示でフォントを大きくする。
M5.Lcd.setRotation(3);
M5.Lcd.setTextSize(4);
// 変更:文字を画面に表示する。
M5.Lcd.println("MH-Z19 is warming up now.");
delay(10 * 1000);
}
void loop()
{
int co2ppm = mhz19.getCO2PPM();
int temp = mhz19.getTemperature();
// 追記:画面の表示とカーソルを初期化することで、前回の文字の表示を消す。
M5.Lcd.fillScreen(BLACK);
M5.Lcd.setCursor(0, 0);
// 変更:文字を画面に表示する。
M5.Lcd.print("co2: ");
M5.Lcd.println(co2ppm);
M5.Lcd.print("temp: ");
M5.Lcd.println(temp);
delay(5000);
}

CO2濃度を測定できました!!ついでに温度も!

CO2濃度の測定画面

外気のCO2濃度は400ppm前後だそうなので、870ppmは少し高めでしょうか。エアコンをつけて窓を締め切っている状態なので、感覚的には正しいように思います。
息を吹きかけてみると、10秒後ぐらいに3,000ppmぐらいになりました。息に反応する程度には計測できているようです。

とりあえず測定はできたので今回はここまで。この後はMH-Z19Cのキャリブレーションや画面表示のデザイン、クラウドへのアップロードなどを試してみたいと思います。