距離センサー VL53L0X の使い方 (Arduino、ESP32)

スイッチサイエンスで、PololuのVL53L0Xモジュールを購入してArduinoとESP32で試してみたメモです。

PololuのVL53L0Xモジュールのピンアサイン

Pololuのピンホールは7つあります。

シルク 説明
VDD 電源
VIN 主電源 (基本こちらを使う)
GND グランド
SDA I2Cのシリアルデータ
SCL I2Cのシリアルクロック
XSHOT ハードウェアスタンバイ
GP01 ???

“距離センサー VL53L0X の使い方 (Arduino、ESP32)” の続きを読む

Amazon FreeRTOS ESP32-DevKit-CでMQTT Hello World (Mac版)

Amazon FreeRTOSをESP32開発ボードESP32-DevKit-Cにセットアップして、マイコンからMQTTのメッセージを送信し、AWS IoTのコンソール上で確認するHello Worldサンプルを動かしてみたので手順をまとめてみました。

FreeRTOSのセットアップ手順は公式ドキュメントの「Espressif ESP32-DevKitC と ESP-WROVER-KIT の開始方法」を参考にしています。
このドキュメントではESP-IDF v3とESP-IDF v4を利用したセットアップ方法が記載されていますが、今回は「ESP-IDF v4」の手順を選択しました。
“Amazon FreeRTOS ESP32-DevKit-CでMQTT Hello World (Mac版)” の続きを読む

小型のMP3プレーヤーモジュールDFPLayerの使い方

コピペテックで技術書典Vol8向けに書いた「ESP32 と obnizOS で作る IoT 電子工作」で使ったMP3プレーヤーモジュールのDFPlayer Miniの使い方についてまとめてみました。

ピンアサインの確認

こちらは、DFPlayerのデータシートに記載されているピンのラベル付きの写真です。

本記事で使用するピンは以下の通りです。

ピン 用途 備考
VCC 電源電圧 動作電圧は3.2から5.0Vに対応
RX UARTの入力信号端子
TX UARTの出力信号端子
SPK_1 スピーカー端子+ 3W以下
GND グランド
SPK_2 スピーカー端子- 3W以下
IO1 トリガーポート1 短く押すと前の曲、長く押すとボリュームを下げる
IO2 トリガーポート2 短く押すと次の曲、長く押すとボリュームを上げる
BUSY 再生ステータス LOWのときに再生中

“小型のMP3プレーヤーモジュールDFPLayerの使い方” の続きを読む

NeoPixelリングに使えるエフェクト実装例集

NeoPixelリングに使えそうなエフェクトをいろいろと自作してみました。
テープ状のLEDとリング上のLEDで向いているエフェクトがちょっと異なる気もしますが、今回はリング向けです。

サンプルは、Arduino UNOで動作を確認しています。

事前準備

Arduino IDEのセットアップして、ArduinoとNeoPixelリングを接続します。

NeoPixel制御用ライブラリのインストール

ライブラリはAdafruit_NeoPixelを使用します。
以下の手順で追加します。

  1. Arduino IDEのメニューから[ツール] > [ライブラリを管理…]を選択してライブラリマネージャを開きます。
  2. 「NeoPixel」で検索して「Adafruit NeoPixel by Adafruit」をインストールします。

Arduino UNOとNeoPixelリングを接続

以下の配線図に従ってArduino UNOとNeoPixelリングをつなぎます。

対応表

Arduino NeoPixelリング
DIGITAL 6 IN
5V V+
GND GND

Adafruit_NeoPixelの基本的な使い方

Adafruit_NeoPixelの使い方を以下のスケッチ例を使って説明します。

こちらは、GithubのREADMEにも載っている例simpleと同じです。

#include <Adafruit_NeoPixel.h>
#define PIN        6 // 信号用のピンを指定
#define NUMPIXELS 16 // LEDの数を指定

Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
#define DELAYVAL 500

void setup() {
  pixels.begin(); // NeoPixel出力ピンの初期化
}

void loop() {
  pixels.clear(); // すべてのLEDの色を0にセット

  for(int i=0; i<NUMPIXELS; i++) {
    pixels.setPixelColor(i, pixels.Color(0, 150, 0));
    pixels.show();
    delay(DELAYVAL);
  }
}

“NeoPixelリングに使えるエフェクト実装例集” の続きを読む

ESP32のデジタル入力 プルアップ/プルダウンを検証、Arduinoとの違い

ボタンスイッチからの入力をESP32で処理する場合、プルアップ、プルダウンという言葉が出てきますが理解が怪しかったので、実機で試しつつまとめてみました。

ESP32の開発ボードは、ESPr Developer 32で試しています。

スイッチにプルアップ、プルダウンがなぜ必要か?

スイッチの回路にプルアップ、プルダウンがなぜ必要かについてですが、もし以下のようにスイッチがGNDと入力用のピンのみに接続されている回路で内部抵抗によるプルダウンなしの場合

このとき読み取られる値は直感的には0Vになりそうですが、そうはなりません。
実際にどこにも接続されていないピンをanalogReadした値は以下のようになぞの電圧が観測されます。

“ESP32のデジタル入力 プルアップ/プルダウンを検証、Arduinoとの違い” の続きを読む

M5Stick-Cで光センサユニット(LIGHT UNIT)を試す

M5Stack-Cで、光センサーのユニットLIGHTを試してみました。

LIGHT UNITの光センサは、フォトレジスタ(CdSセル)が組み込まれているモジュールで、光の強さをアナログおよびデジタルで読み取れます。

公式リファレンスのページ: Light – M5Stack Docs

プログラムは、上記の公式リファレンスのページで紹介されているサンプルを修正してみました。

Github: M5Stack/examples/Unit/LIGHT/LIGHT.ino

公式リファレンスのM5Stack Coreを利用した例と同じ様に、LIGHT UNITから読み取ったアナログとデジタルの値をLCDに表示します。


“M5Stick-Cで光センサユニット(LIGHT UNIT)を試す” の続きを読む

LaravelプロジェクトをHerokuにデプロイする手順

LaravelプロジェクトをHerokuにデプロイする手順です。
データベースは、Heroku Postgresアドインを追加して設定します。

Qiitaなどに同様の記事はたくさんあがっていますが、改めて見返すと結構よくまとまっているので公開することにしました。

前提条件

  • composer
  • Heroku CLI

Heroku CLIのセットアップ

Heroku CLIはHomebrewでインストール可能です。

以下のコマンドでインストール
“LaravelプロジェクトをHerokuにデプロイする手順” の続きを読む

FullCalendar 4をlaravel/mixでビルドして利用する

LaravelのプロジェクトでFullCalendarを導入する方法についてまとめてみました。

FullCalendarを利用するにはscriptタグでソースを読み込む方法もありますが、メンテナンス性を考えるとパッケージをnpmで管理して、Laravel Mixを利用してビルドするのが良い方法です。

特にFullCalendar 4からはコア以外の機能はプラグインの形で都度追加する必要があるためよりパッケージ管理システムを利用することが推奨されています。

Laravel Mixとは

以前の記事、Laravel 6.x laravel/uiを利用してbootstrap 4を適用する で少し触れていますが、Laravel Mixは、Laravelのフロントエンド ビルド環境で、Webpackを簡単に利用するラッパーみたいなものです。

Laravel Mixのセットアップは以下のようにプロジェクトの作成後npm installするだけで、自らWebpack環境を用意しなくてもLaravelと組み合わせてVue.jsやReactを簡単に使い始められます。

$ composer create-project --prefer-dist laravel/laravel laravel-fullcalendar
$ cd laravel-fullcalendar
$ npm install

ビルドの設定はwebpack.mix.jsファイルに記述します。例えば、jsとcssのビルドする場合、以下のように入力ファイルと出力するディレクトリを指定するだけです。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

とても簡単ですね。

ビルドはnpm run dev、開発中はnpm run watchしてすぐ開発が進められます。

また、通常Webpackで複数の入力ファイルを扱うのは工夫が必要ですが、Laravel Mixなら以下のように簡単に追加できます。

mix.js('resources/js/blog.js', 'public/js')
    .sass('resources/sass/blog.scss', 'public/css');
mix.js('resources/js/admin.js', 'public/js')
    .sass('resources/sass/admin.scss', 'public/css');

例えば、これはブログ記事と管理画面のビューで使うjsやcssのアセットをビルドするイメージです。

FullCalendarのインストール

ここから本題ですが、まずFullCalendarのパッケージをnpmで追加していきます。

この記事では、FullCalendarのビューはTimeGrid Viewのみを使用します。
また、予定をドラッグで変更できるようにするのと、複数のタイムゾーンに対応したいので、interactionmoment-timezoneも追加します。
まとめるとコアも含めFullCalendar関連は以下の4つのパッケージをインストールします。

  • @fullcalendar/core
  • @fullcalendar/timegrid
  • @fullcalendar/interaction
  • @fullcalendar/moment-timezone

また、@fullcalendar/moment-timezoneは、moment-timezoneを別途インストールする必要があります。

以下のコマンドでインストールします。

$ npm install @fullcalendar/core @fullcalendar/timegrid @fullcalendar/interaction moment-timezone @fullcalendar/moment-timezone

FullCalendarの実装

resources/js/app.jsを編集しても良いですが、FullCalendarはすべてのページで使用することは無いと思うので、js、cssファイルを分けます。

resources/js/fullcalendar.jsを追加して以下を記述します

// resources/js/fullcalendar.js
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import momentTimezonePlugin from '@fullcalendar/moment-timezone';

document.addEventListener('DOMContentLoaded', function () {
  const calendarEl = document.getElementById('calendar');

  const calendar = new Calendar(calendarEl, {
    allDaySlot: false,
    plugins: [timeGridPlugin, momentTimezonePlugin, interactionPlugin],
    timeZone: 'Asia/Tokyo', // momentTimezonePlugin
    defaultView: 'timeGridWeek',

    events: []
  });

  calendar.render();
});

次に、スタイルシートresources/css/fullcalendar.scssを追加して以下を記述します。

// resources/css/fullcalendar.scss
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/timegrid/main.css";

Laravel Mixの設定ファイルに上記のファイルを読み込む設定を追加します。

// webpack.mix.js

mix.js('resources/js/fullcalendar.js', 'public/js')
  .sass('resources/sass/fullcalendar.scss', 'public/css');

ここでビルドしてみましょう。

$ npm run dev

以下のように、ビルドされたresources/js/fullcalendar.jspublic/js/fullcalendar.jsに、resources/css/fullcalendar.scsspublic/css/fullcalendar.cssに出力されます。

Laravel Mixでjs、cssをビルド

生成したアセットをビューで読み込んで表示してみます。

とりあえずここではwelcome.blade.phpを以下のように置き換えてみます。

// resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="{{ asset('css/fullcalendar.css') }}" rel="stylesheet">
        <script src="{{ asset('js/fullcalendar.js') }}" defer></script>
    </head>
    <body>
        <div id="calendar"></div>
    </body>
</html>

開発サーバーを起動してhttp://127.0.0.1:8000を開きます。

$ php artisan serve

予定を表示したり追加したりできませんが、FullCalendarの表示ができました。

FullCalendarをLaravelのビューに表示

Laravel Homestead内のPostgreSQLにMacのpsqlから接続する手順

少し前に開発機のMacを買い替えたためHomesteadの環境を作り直してみました。
LaravelプロジェクトのデータベースにはPostgreSQLを使っているのですが、改めて環境を作るにあたってPostgreSQLをメインの仕事で使うことは無いし、psqlでHomesteadのPostgreSQLに接続するためだけにMacのローカルにPostgreSQLサーバーをインストールしたくないと思い、psqlだけ使えるようにする方法について調べてみました。

イマイチ一次情報にた取り付けずなところも多かったのですが、執筆時点でおそらくベストっぽい構成のような気がします。

psqlのインストール

homebrewでpsqlをインストールします。

homebrewには「psql」という名前のパッケージ(Formula)は無いですが、libpqをインストールするとpsqlが含まれています。

$ brew install libpq
...
<!--more-->

==> libpq
libpq is keg-only, which means it was not symlinked into /usr/local,
because conflicts with postgres formula.

If you need to have libpq first in your PATH run:
  echo 'export PATH="/usr/local/opt/libpq/bin:$PATH"' >> /Users/hrendoh/.bash_profile

For compilers to find libpq you may need to set:
  export LDFLAGS="-L/usr/local/opt/libpq/lib"
  export CPPFLAGS="-I/usr/local/opt/libpq/include"


$ brew link --force libpq
Linking /usr/local/Cellar/libpq/12.3... 370 symlinks created

If you need to have this software first in your PATH instead consider running:
  echo 'export PATH="/usr/local/opt/libpq/bin:$PATH"' >> /Users/hrendoh/.bash_profile

インストール時に出力されるメッセージで「libqdはkeg-onlyなので、/usr/localにシンボリックリンクは作成されませんよ」と言われています。

ところで「keg-only」とは、一般用語に直すと、homebrewのパッケージが配置されるディレクトリ(Celler)へライブラリなど(Keg)をダウンロードして配置するだけのパッケージ(Fomula)ということらしいです。

Homebrew用語、よく知らないで使っていたので調べてしまいまいした。

参照

話を戻すと、libqpをインストールしてもパスが通っていないので、以下のどちらかの手順を実行してパスを通します。

  1. brew linkコマンドで/usr/local/binにシンボリックリンクを作成する
$ brew link --force libpq
  1. .bash_profileなどでパスを通す
echo 'export PATH="/usr/local/opt/libpq/bin:$PATH"' >> /Users/$(whoami)/.bash_profile

以上で、psqlが使えるようになります。

では実際に接続してみます。

Homesteadは、PostgreSQLのポートは54320でフォワードされてますので以下のようにポートを指定して接続します。

$ psql -U homestead -h localhost -p 54320
Password for user homestead: 
psql (12.3, server 12.2 (Ubuntu 12.2-2.pgdg18.04+1))
SSL connection (protocol: TLSv1.3, cipher: TLS_AES_256_GCM_SHA384, bits: 256, compression: off)
Type "help" for help.

homestead=# 

無事接続できました。しかし、Laravelで開発しててpsqlでアクセスするのってcreate databaseするときくらいのような。。

参照: Ports | Laravel Homestead – Laravel – The PHP Framework For Web Artisans

補足

Error: The following directories are not writable by your userを解決するには

$ brew install libpq 
Error: The following directories are not writable by your user:
/usr/local/lib/pkgconfig

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/lib/pkgconfig

And make sure that your user has write permission.
  chmod u+w /usr/local/lib/pkgconfig

メッセージの説明に従い、自分に対して/usr/local/lib/pkgconfigに書き込み権限を付けます

$ sudo chown -R $(whoami) /usr/local/lib/pkgconfig
$ chmod u+w /usr/local/lib/pkgconfig

Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法

ExpressでJSONのリクエストを受け付けて、JSONのレスポンスを返す処理のメモです。

たまにExpressで検証などすることがあるのですが、いつもJSONの扱い方を検索している気がするので自分でもまとめておくことにしました。

また、検索するとbody-parserをインストールするように書かれている記事が多いのですが、2020年5月現在はExpress本体にミドルウェアが用意されています。
よって、以下の方法がおそらく現在最もシンプルで標準的な手順になると思います。(公式マニュアル読めばいいという話でもありますが)
“Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法” の続きを読む