再構築LEDバーの作り方(その3・プログラム編)

昨日の続きで、再構築LEDバーの作り方を解説します。
今回は、ESPr Developerにプログラムを書き込む手順と、Movable Typeの管理画面のカスタマイズの手順を取り上げます。

1.ESPr Developerのプログラム

ESPr Developerには、再構築の管理画面からの通信に応じて、LEDを点灯させるプログラムを入れます。

1-1.プログラムのダウンロード

プログラムは以下からダウンロードします。

1-2.プログラムの書き換え

ダウンロードしたZipファイルを解凍すると、「RebuildLEDESPr」というフォルダができ、その中に「RebuildLEDESPr.ino」というファイルができます。
Arduino IDEを起動してこのファイルを開いたあと、先頭の方の以下の各行を書き換えます。

#define NUM_LEDS 60

「60」のところを、LEDバーのLEDの数に合わせて書き換えます。

const char* ssid = "your_ssid";

「your_ssid」の部分を、お使いのWiFiルータのESS IDに書き換えます。

const char* password = "your_password";

「your_password」の部分を、お使いのWiFiルータのパスワードに書き換えます。

const IPAddress led_ip = IPAddress(192, 168, 12, 34);

「192, 168, 12, 34」の部分を、ESPr Developerに割り当てるIPアドレスに書き換えます。
WiFiルーターのネットワークに接続できるIPアドレスを指定してください。
なお、4つの数字の間は通常はピリオドで区切りますが、このプログラムでは4つの数字を関数の引数として渡しているので、ピリオドではなくコンマで区切ります。

1-3.プログラムの書き込み

プログラムの書き換えが終わったら、USBケーブルでパソコンとESPr Developerを接続し、プログラムを書き込みます。

まず、「ツール」→「シリアルポート」メニューで、ESPr Developerが接続された仮想シリアルポートを指定します。
そして、ツールバーの「マイコンボードに書き込む」ボタン（左から2つ目）をクリックします。
プログラムのコンパイルと書き込みが終わり、Arduino IDE下部のステータスの部分に、「ボードへの書き込みが完了しました。」と表示されたら、ESPr Developerを取り外します。

2.Movable Typeの管理画面の書き換え

次に、Movable Typeの再構築中の管理画面を書き換えて、ESPr Developerと通信するようにします。
なお、管理画面の書き換えは、Movable Typeのalt-tmplの仕組みで行いました。

2-1.管理画面テンプレートのダウンロード

まず、管理画面のテンプレートを、以下からダウンロードします。

RebuildLEDMT.zip

2-2.テンプレートの書き換え

ダウンロードしたZipファイルを解凍すると、以下のフォルダとファイルができます。

alt-tmplフォルダ
└ cmsフォルダ
　 ├ popupフォルダ
　 │ ├ rebuild_confirm.tmplファイル
　 │ └ rebuilt.tmplファイル
　 └ rebuiding.tmplファイル

3つのファイルのそれぞれで、先頭の方に以下の行があります。

var led_url = 'http://192.168.12.34';

それらの「192.168.12.34」の部分を、ESPr Developerに割り当てるIPアドレス（手順1-2と同じIPアドレス）に書き換えます。

ファイルの書き換えが終わったら、「alt-tmpl」フォルダを、Movable Typeのインストール先ディレクトリにアップロードします。

お知らせ