日々のエンジニア的なお仕事を備忘録としてまとめています
スイッチサイエンスで、PololuのVL53L0Xモジュールを購入してArduinoとESP32で試してみたメモです。
Pololuのピンホールは7つあります。
| シルク | 説明 |
|---|---|
| VDD | 電源 |
| VIN | 主電源 (基本こちらを使う) |
| GND | グランド |
| SDA | I2Cのシリアルデータ |
| SCL | I2Cのシリアルクロック |
| XSHOT | ハードウェアスタンバイ |
| GP01 | ??? |
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版)” の続きを読む
コピペテックで技術書典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のときに再生中 |
NeoPixelリングに使えそうなエフェクトをいろいろと自作してみました。
テープ状のLEDとリング上のLEDで向いているエフェクトがちょっと異なる気もしますが、今回はリング向けです。
サンプルは、Arduino UNOで動作を確認しています。
Arduino IDEのセットアップして、ArduinoとNeoPixelリングを接続します。
ライブラリはAdafruit_NeoPixelを使用します。
以下の手順で追加します。
以下の配線図に従ってArduino UNOとNeoPixelリングをつなぎます。
対応表
| Arduino | NeoPixelリング |
|---|---|
| DIGITAL 6 | IN |
| 5V | V+ |
| GND | GND |
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);
}
}
ボタンスイッチからの入力をESP32で処理する場合、プルアップ、プルダウンという言葉が出てきますが理解が怪しかったので、実機で試しつつまとめてみました。
ESP32の開発ボードは、ESPr Developer 32で試しています。
スイッチの回路にプルアップ、プルダウンがなぜ必要かについてですが、もし以下のようにスイッチがGNDと入力用のピンのみに接続されている回路で内部抵抗によるプルダウンなしの場合
このとき読み取られる値は直感的には0Vになりそうですが、そうはなりません。
実際にどこにも接続されていないピンをanalogReadした値は以下のようになぞの電圧が観測されます。
M5Stack-Cで、光センサーのユニットLIGHTを試してみました。
LIGHT UNITの光センサは、フォトレジスタ(CdSセル)が組み込まれているモジュールで、光の強さをアナログおよびデジタルで読み取れます。
公式リファレンスのページ: Light – M5Stack Docs
プログラムは、上記の公式リファレンスのページで紹介されているサンプルを修正してみました。
Github: M5Stack/examples/Unit/LIGHT/LIGHT.ino
公式リファレンスのM5Stack Coreを利用した例と同じ様に、LIGHT UNITから読み取ったアナログとデジタルの値をLCDに表示します。
LaravelプロジェクトをHerokuにデプロイする手順です。
データベースは、Heroku Postgresアドインを追加して設定します。
Qiitaなどに同様の記事はたくさんあがっていますが、改めて見返すと結構よくまとまっているので公開することにしました。
Heroku CLIはHomebrewでインストール可能です。
以下のコマンドでインストール
“LaravelプロジェクトをHerokuにデプロイする手順” の続きを読む
LaravelのプロジェクトでFullCalendarを導入する方法についてまとめてみました。
FullCalendarを利用するにはscriptタグでソースを読み込む方法もありますが、メンテナンス性を考えるとパッケージをnpmで管理して、Laravel Mixを利用してビルドするのが良い方法です。
特にFullCalendar 4からはコア以外の機能はプラグインの形で都度追加する必要があるためよりパッケージ管理システムを利用することが推奨されています。
以前の記事、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のパッケージをnpmで追加していきます。
この記事では、FullCalendarのビューはTimeGrid Viewのみを使用します。
また、予定をドラッグで変更できるようにするのと、複数のタイムゾーンに対応したいので、interactionとmoment-timezoneも追加します。
まとめるとコアも含めFullCalendar関連は以下の4つのパッケージをインストールします。
また、@fullcalendar/moment-timezoneは、moment-timezoneを別途インストールする必要があります。
以下のコマンドでインストールします。
$ npm install @fullcalendar/core @fullcalendar/timegrid @fullcalendar/interaction moment-timezone @fullcalendar/moment-timezone
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.jsはpublic/js/fullcalendar.jsに、resources/css/fullcalendar.scssはpublic/css/fullcalendar.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の表示ができました。
少し前に開発機のMacを買い替えたためHomesteadの環境を作り直してみました。
LaravelプロジェクトのデータベースにはPostgreSQLを使っているのですが、改めて環境を作るにあたってPostgreSQLをメインの仕事で使うことは無いし、psqlでHomesteadのPostgreSQLに接続するためだけにMacのローカルにPostgreSQLサーバーをインストールしたくないと思い、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をインストールしてもパスが通っていないので、以下のどちらかの手順を実行してパスを通します。
brew linkコマンドで/usr/local/binにシンボリックリンクを作成する$ brew link --force libpq
.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
$ 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でJSONのリクエストを受け付けて、JSONのレスポンスを返す処理のメモです。
たまにExpressで検証などすることがあるのですが、いつもJSONの扱い方を検索している気がするので自分でもまとめておくことにしました。
また、検索するとbody-parserをインストールするように書かれている記事が多いのですが、2020年5月現在はExpress本体にミドルウェアが用意されています。
よって、以下の方法がおそらく現在最もシンプルで標準的な手順になると思います。(公式マニュアル読めばいいという話でもありますが)
“Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法” の続きを読む