【ESP32】ゼルダエフェクトーンを自作してみた

www.bpnavi.jp

ツイッター上で話題になったゼルダエフェクトーン。
見た瞬間に「これ作れそう」と思って材料を購入し、勢いで自作しました。
使った材料や回路図を記録する意味でも記事にしておきます。

※電子回路もプログラムも知識が浅いため、ツッコミどころが多いと思います。注意してください

・追記：回路とプログラムの改良版ができました
rikoubou.hatenablog.com

１：材料
以下が今回使用した材料です。合計2500円ぐらいです。

・ESP32-DevKitC（以下記事内ではESP32と記述）　商品ページ
・20ピン基板用ピンソケット[20ピン×1列]【21601X20GSE】×２　商品ページ
　（ESP32の片側の足は19本なので一つ余る）
・ユニバーサル基盤（ICB288）　商品ページ
・電池ケース 単4×2本（BH421A）　商品ページ
・圧電ブザー（buz-1.5-9.5mm）　商品ページ
・ケース入りリードスイッチ（磁石付セット）ＭＣ－１４ＡＧ　商品ページ
・基板用スライドスイッチ(横型)【GB-SSW-SPDT-RAGL】　商品ページ
・SW型プラスチックケース【SW85S】　商品ページ
・３ｍｍプラスチックネジ（７ｍｍ）＋ナットセット　商品ページ

※あと半田ごてとか接着剤とか電動ドリルとか単４電池とかもろもろ

２：回路図

ものすごく単純な回路です。
単４ケースは、ユニバーサル基盤にドリルで穴を開けてプラスチックのネジとナットで基盤自体に固定させています。

３：ケースの加工
電源スイッチをケースの外に出す必要があるので、以下の写真のように側面に穴を開けます。

４：ESP32へプログラムを書き込む
前提としてESP32が使用できる環境が必要です。
【備忘録】ESP-32 DevKitCの環境構築方法 - ソースに絡まるエスカルゴ

ESP32に書き込むプログラムは以下の通りです。

・Effectone.ino

#define BUZZER_PIN 23       // ブザーを鳴らすためのピン
#define MAGNET_PIN 12       // 磁石スイッチのHIGHを出力するピン
#define JUDGE_PIN 14        // 磁石スイッチの判断をするピン

#define BEAT 150            // 一つの音を鳴らす時間
#define LEDC_CHANNEL 0      // チャンネル
#define LEDC_TIMER_BIT 13
#define LEDC_BASE_FREQ 5000

bool soundFlg = false; // 音を鳴らしたかどうかのフラグ

void setup() {
  // マグネットスイッチに関係するピンの準備
  pinMode(MAGNET_PIN, OUTPUT);
  pinMode(JUDGE_PIN, INPUT);

  // マグネットスイッチのをHIGHにする
  digitalWrite(MAGNET_PIN, HIGH);
  
  // 音を鳴らす準備
  ledcSetup(LEDC_CHANNEL, LEDC_BASE_FREQ, LEDC_TIMER_BIT);
  ledcAttachPin(BUZZER_PIN, LEDC_CHANNEL);
}

void loop() {
  int val = digitalRead(JUDGE_PIN);
  if (!soundFlg && val == LOW) {
    callZeldaSound();   // ゼルダの謎解き音を鳴らす
    soundFlg = true;
  } else if (val == HIGH) {
    soundFlg = false;
  }
  delay(100);
}

/**
 * ゼルダの謎解き音
 */
void callZeldaSound() {
  ledcWriteTone(LEDC_CHANNEL, 3136); // ソ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 2960); // ♯ファ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 2489); // ♯レ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 1760); // ラ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 1661); // ♯ソ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 2637); // ミ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 3322); // ♯ソ
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 4186); // ド
  delay(BEAT);
  ledcWriteTone(LEDC_CHANNEL, 0);    // 音を止める
}

ESP32ではブザーを鳴らす関数としてledcWriteToneを使います。

・参考記事
ESP-WROOM-32

５：ケースにつめる
基盤の実装とESP32へのプログラムの書き込みが終了したら、次はケースに詰めます。SW85Sにはネジ穴はついてないので、接着剤でナットをケースの底に固定させています。位置が確定したら、フタを被せてブザーが来る位置に穴を開けます。

６：完成したので遊ぶ
動かすとこんな感じになります。

とりあえず自作ゼルダエフェクトーンできた（音量小さめかも） pic.twitter.com/cswS3jY7AW

— シン・ほいっぷ (@sin_deviding) 2017年5月29日

リードスイッチは振動に弱いらしく、現状のプログラムのままだとケースを振るだけで音が鳴ります。また音も小さいので、穴を増やしたり大きくしたりした方が良いかもしれません。

以上が今回作ってみた自作ゼルダエフェクトーンになります。プログラムを修正すれば他の音も鳴らせますし、ESP32はWifiやBluetooth接続もできるのでさらに遊べると思います。（正直今回程度のことを実現するならオーバースペックすぎますし……）

ブザーを増やして和音を鳴らせたりするのも面白いかもしれません。

【備忘録】KKHMF LM393 IR赤外線障害物回避センサモジュール Arduino用について

amazonで見つけた怪しいぐらいに安い距離センサー（KKHMF LM393 IR赤外線障害物回避センサモジュール Arduino用）についての備忘録です。

下記商品ページのレビューにある内容と実際のものがちょっと違っていたので記録しておきます。
Amazon CAPTCHA

■大体の仕様
結論部分だけまとめると以下のようになります。

物理的距離	OUTの出力	輸出表示のLED
設定距離より遠い	HIGH	消灯
設定距離より近い	LOW	点灯

可変抵抗を回して設定距離を変更可能。
判定はOUTのデジタル出力HIGH or LOWで判断。

• OUTがHIGH　：　設定距離より遠い
• OUTがLOW　 ：　設定距離より近い

「輸出表示」と文字のある部分のLEDが光っている時は近い、光っていない時は遠いと見た目でもわかるようになっている。可変抵抗を反時計回りに回すと設定距離が短く、時計回りに回すと設定距離が長くなる。

※ただし、どちらの場合でも可変抵抗を限界まで回すと検知できなくなるので注意

単に近いかどうかを判定するだけなら十分使えるセンサーだと思います。
これで何かを作りたいですね。

【備忘録】ESP-32 DevKitCでのWiFi接続方法（APモード）

APモードのESP-32にWiFi接続する方法を残しておこうと思った次第です。

というのも、

• esp8266で使っていたソースが流用できない。
• サンプルにAPモードでの接続のものが見当たらない。

という状況だったので、まとめようと決意しました。

では以下に方法をまとめていきます。
※一つ前の記事で環境構築が済んでいることが前提です。

■ESP-32でAPモードでWiFiを起動するソース

結論から言うと、以下のソースでいけます。

ESP32_WiFi.ino

#include <WiFi.h>

WiFiServer server(80);

const char ssid[] = "ESP32-WiFi";  // SSID
const char pass[] = "esp32wifi";   // password

const IPAddress ip(192, 168, 20, 2);      // IPアドレス
const IPAddress subnet(255, 255, 255, 0); // サブネットマスク

void setup() {
  Serial.begin(115200);

  WiFi.softAP(ssid, pass);           // SSIDとパスの設定
  delay(100);                        // 追記：このdelayを入れないと失敗する場合がある
  WiFi.softAPConfig(ip, ip, subnet); // IPアドレス、ゲートウェイ、サブネットマスクの設定
  
  IPAddress myIP = WiFi.softAPIP();  // WiFi.softAPIP()でWiFi起動
  server.begin();                    // サーバーを起動(htmlを表示させるため)

  /* 各種情報を表示 */
  Serial.print("SSID: ");
  Serial.println(ssid);
  Serial.print("AP IP address: ");
  Serial.println(myIP);

  Serial.println("Server start!");
}

void loop() {
  WiFiClient client = server.available();
  
  if (client) {
    String currentLine = "";
    Serial.println("new client!");
    while (client.connected()) {
      if (client.available()) {  
        if (currentLine.length() == 0) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-type:text/html");
          client.println();
          client.println("hello!");
          break;
        } else {
          currentLine = "";
        }
      }
    }

    // 接続が切れた場合
    client.stop();
    Serial.println("client disonnected");
  }
}

上記のプログラムをESP-32 DevKitCに書き込むと、ESP32-WiFiというWiFiが飛ぶようになります。
それを選択し、passで設定したパスワードを入力すると接続完了です。

その状態でブラウザを開いて、IPアドレスに設定した192.168.20.2に接続すると「hello!」と表示されます。

SSID、pass、ipなどは定数になっているので任意に変更することができます。

・2017/07/18　追記
　久々にWifiのAPモードをESP32で実行しようとしたところ、なぜか起動しないという不具合が確認できました。色々調べて行くと「WiFi.softAPのあとにdelayを入れないと失敗する場合がある」ことがわかりました。
　なので上記プログラムにdelayを追記しています。

　抜粋すると以下の部分になります。

WiFi.softAP(ssid, pass);           // SSIDとパスの設定
delay(100);                        // 追記：このdelayを入れないと失敗する場合がある
WiFi.softAPConfig(ip, ip, subnet); // IPアドレス、ゲートウェイ、サブネットマスクの設定

・参考ページ
github.com

【備忘録】ESP-32 DevKitCの環境構築方法

ESP32をのせた開発ボードESP-32 DevKitCが秋月で売られていることに気がついたので、秋葉原に行ったついでに購入してきました。
akizukidenshi.com

ということで、早速環境構築をやってみたのでまとめます。
※MacOSでの環境構築になります。

１：Arduino IDEをインストールする
以下のサイトでOSを選択してインストールします。
Arduino - Software

２：Pythonをインストールする（Windows以外のOSの場合に必要）
途中でpythonのファイルを実行する場面があるので、以下のページからダウンロードしてPythonをインストールします。
www.python.org

３：必要なファイルをダウンロードして適切な場所に配置する
基本的には以下のページにある方法に沿っていけば大丈夫です。
github.com

・gitがすでにインストールされている場合
すでに記述した手順のArduino IDE、pythonに加えて、gitもインストールされている場合は、ターミナルを開いて以下のコマンドを1行ずつコピペして実行するだけでOK。

mkdir -p ~/Documents/Arduino/hardware/espressif
cd ~/Documents/Arduino/hardware/espressif
git clone https://github.com/espressif/arduino-esp32.git esp32
cd esp32/tools/
python get.py

・gitがインストールされていない場合
gitがインストールされてない場合は上記URLの左側にある「Clone or download」から「Download ZIP」を選択して.zipファイルをダウンロードします。

ダウンロードが完了したら.zipファイルを解凍します。解凍すると「arduino-esp32-master」というフォルダが作成されるので、このフォルダの名前を「esp32」に変更します。

その後Arduinoのスケッチが保存されるフォルダ（ユーザ名/Documents/Arduinoのフォルダ）に「hardware」という名前のフォルダを作成します。

作成した「hardware」フォルダの中にさらに「espressif」という名前のフォルダを作成します。

「espressif」の中に先ほど解凍して名称を変更した「esp32」というフォルダを移動させます。

構成図は以下のようになります。

Arduinoフォルダ
　|- hardware # 作成
　　　|- espressif # 作成
　　　　　|- esp32 # .zipファイルを解凍したフォルダ(arduino-esp32-masterの名称を変更したもの)

ここまで完了したらターミナルを立ち上げて、esp32の中にあるtoolsフォルダに移動し、以下のコマンドを実行します。

python get.py

４：Arduno IDEを立ち上げて各種設定を行う
１〜３の手順が終わったらArduino IDEを立ち上げます。
ツール -> ボード -> ESP32 Dev Moduleが追加されているのでESP32 Dev Moduleを選択します。

選択すると諸々の設定などができるようになるので各種設定を行います。
自分の場合は以下のような設定にしています。

５：ESP-32 DevKitCとの接続確認を行う
設定まで終わったらUSBにESP-32 DevKitCを繋いでシリアルポートに認識されるかを確認します。自分の場合は特に問題なく認識しましたが、ドライバを入れないと認識しない場合もあるそうです。（要検証）

あとは普通のArduinoを扱うようにスケッチを書き込めば動くようになります。

以上、ざっと環境構築手順をまとめてみました。
ESP-32 DevKitCを使ってこれから色々遊んでみたいです。

・参考ページ（こちらの方がわかりやすいかも）
blog.boochow.com
www.mgo-tec.com

【Android Studio】備忘録#2 ScrollView内でListViewを動作させる方法

Android Studioで適当なアプリ開発を進めていますが
デフォルトの設定だと色々できなくて「ふんがー！」となっている日々です。

その「ふんがー！」となった内の一つが今回のタイトルにある
「ScrollView内でListViewを動作させる方法」です。

何も設定せずにScrollView内にListViewを配置させると
「一行分しか表示されない上にListView自体のスクロールができない」
という謎の仕様。

解消するために調べても簡単な方法がなかなかみつからなかったのですが
ようやく見つけたので備忘録として残しておきます。

■ScrollView内でListViewを動作させる方法

結論から言うと、以下のページの内容にある通りのことをすれば実現できます。
android-note.open-memo.net

ただこれだとScrollViewにListViewを使う画面に
毎回メソッドを実装しなくてはならないので
以下のようにstaticなクラスに実装しました。

Common.java

public class Common {
    /**
     * ScrollViewにListViewを入れ込む時に使う関数
     * @param listView ListView
     */
    public static void setListViewOnTouchListener(ListView listView) {
        listView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                v.getParent().requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });
    }
}

ScrollViewを表示させる画面のActivityから
上記のメソッドを呼び出します。

■呼び出し記述方法

ListView listView = (ListView) findViewById(R.id.[ListViewのID]);    // ListView
Common.setListViewOnTouchListener(listView);

これでScrollView内でListViewが正常に動くようになります。

【Android Studio】備忘録#1 メッセージダイアログについて

最近ちょっとしたAndroidアプリでも作ってみるかと思い立ってAndroid Studioを触り始めました。「メッセージダイアログを表示させてOK、キャンセルで違う挙動をさせたい」と考えて調べてもすぐにはできない様子。

ググってコピペしていじってを繰り返してなんとか動くものができたので残しておこうと思った次第です。

１：メッセージダイアログ画面の作成

まずは表示させたいメッセージダイアログ画面を作成します。タイトル、内容、OK、CANCELの各要素があれば良いと思ったので以下のようにしました。

dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.test.test.util.CustomDialogFragment">

    <TextView
        android:id="@+id/dTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="注意"
        android:textAlignment="center"
        android:textColor="?android:attr/editTextColor"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/dMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="dMessage"
        android:textColor="?android:attr/panelColorForeground"
        android:textSize="20sp" />

    <Button
        android:id="@+id/dOK"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="OK" />

    <Button
        android:id="@+id/dCancel"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="Cancel" />
</LinearLayout>

ちなみにプレビューは以下のとおり。

２：メッセージダイアログ画面を表示させるクラスの作成

CustomDialogFragmentという名前で以下のようにクラスを作成します。

CustomDialogFragment.java

/**
 * メッセージダイアログを表示させるクラス
 */
public class CustomDialogFragment extends DialogFragment {

    // 画面に設定するキー
    public static final String FIELD_TITLE = "title";
    public static final String FIELD_MESSAGE = "message";
    public static final String FIELD_LABEL_POSITIVE = "label_positive";
    public static final String FIELD_LABEL_NEGATIVE = "label_negative";

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // ダイアログの設定
        Dialog dialog = new Dialog(getActivity());
        dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        dialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
        dialog.setContentView(R.layout.dialog);
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.argb(255, 255, 255, 255)));

        // 画面の各情報
        Bundle args = getArguments();

        // 各種画面の要素を取得
        TextView dTitle = (TextView)(dialog.findViewById(R.id.dTitle));
        TextView dMessage = (TextView)(dialog.findViewById(R.id.dMessage));
        Button dOK = (Button)(dialog.findViewById(R.id.dOK));
        Button dCancel = (Button)(dialog.findViewById(R.id.dCancel));

        // argsにある各文字列を設定
        if (args.containsKey(FIELD_TITLE)) {
            dTitle.setText(args.getString(FIELD_TITLE));
        }
        if (args.containsKey(FIELD_MESSAGE)) {
            dMessage.setText(args.getString(FIELD_MESSAGE));
        }
        if (args.containsKey(FIELD_LABEL_POSITIVE)) {
            dOK.setText(args.getString(FIELD_LABEL_POSITIVE));
        }
        if (args.containsKey(FIELD_LABEL_NEGATIVE)) {
            dCancel.setText(args.getString(FIELD_LABEL_NEGATIVE));
        }

        // OKボタンが押された時の処理
        dOK.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                IActivity callingActivity = (IActivity) getActivity();
                callingActivity.onReturnValue(true);
                dismiss();
            }
        });

        // キャンセルボタンが押された時の処理
        dCancel.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                IActivity callingActivity = (IActivity) getActivity();
                callingActivity.onReturnValue(false);
                dismiss();
            }
        });

        return dialog;
    }
}

簡単に説明すると、
タイトルやメッセージ、OKボタン、CANCELボタンに表示させる文字列は
Bundle argsで渡しているのでそれを取得して設定しています。

そしてボタンが押された場合、
呼び出し元に実装されているonReturnValue(boolean value)の引数valueに
OKならtrue、CANCELならfalseが渡されて実行されます。

IActivity.java

public interface IActivity {
    /**
     * OK/Cancelのダイアログの戻り処理
     * @param value true:OK、false:Cancel
     */
    public void onReturnValue(boolean value);
}

またIActivityというインターフェースを使うことで
呼び出し元でonReturnValueを実装するのを忘れないようにしています。

３：メッセージダイアログを呼び出す

実装したメッセージダイアログを呼び出す方法は以下の通りです。

MainActivity.java

public class MainActivity extends FragmentActivity implements IActivity {

     // 各要素に設定する文字列
     Bundle args = new Bundle();
     args.putString(CustomDialogFragment.FIELD_TITLE, "注意");  // タイトルの設定
     args.putString(CustomDialogFragment.FIELD_MESSAGE, "別の画面に移動します。\nよろしいですか？"); // メッセージの設定

     // メッセージダイアログ作成
     CustomDialogFragment cdf = new CustomDialogFragment();
     cdf.setArguments(args);
     cdf.show(getSupportFragmentManager(),"dialog");

    /**
     * OK/Cancelのダイアログの戻り処理
     * @param value true:OK、false:Cancel
     */
    public void onReturnValue(boolean value) {
        if (value) {
            // OKの場合の処理
            Intent intent = new Intent(getApplication(), SubActivity.class); // SubActivityの画面へ移動
            startActivity(intent);
        } else {
            // キャンセルの場合の処理
        } 
    }
}

上記の方法で自作のメッセージダイアログを作成し、
onReturnValueという関数の引数に結果が渡されるので
if文によって処理を変えることができます。

また別のクラスでもIActivityインターフェースを使うことで
同じようにメッセージダイアログを使うことができます。

これである程度は汎用的に扱えるようになったはずです。

【備忘録】esp8266の扱い方について

毎回ググって調べるのがアホらしいので、備忘録として描いておこうと思った次第です。

１：Arduino IDEでesp8266を使えるようにする
Arduino IDEのメニューから環境設定を選択し、追加ボードマネージャのURLに以下を記述して、OKを押す。
http://arduino.esp8266.com/stable/package_esp8266com_index.json

その後、ツール->マイコンボード->ボードマネージャを選択し「esp8266 by ESP8266 Community」をインストールする。
するとマイコンボードに「Generic ESP8266 Module」が追加されます。

２：書き込み時の設定値
Generic ESP8266 Moduleを選択すると各種設定値を以下のように設定する。

３：esp8266とPCをUSBケーブルで接続する
２までの準備ができたら、USBケーブルでPCに接続する。
接続しても認識されない場合は、PCの再起動やUSBケーブルを充電用ではなくシリアル通信できるものに交換する。
また電力が足りないと認識されないそうなので、充電器を刺したりUSBハブを使わずに直接接続してみる。

それでも認識しない場合は、以下の３'のドライバのインストールを実行してみる。

３'：ドライバをインストールする(場合によっては飛ばせるかも)
以下のサイトから該当するOSを選択してドライバをインストールしてから、再起動する。
（これをするとドライバがダウングレードするという話も見かけたので、どうしても認識しない場合にやるといいかも）
www.ftdichip.com

４：esp8266への書き込み
esp8266が認識できたら、GNDとGPIO:0を繋いで書き込みモードにする。
その状態でRESETとFLASHボタンを両方押してから書き込む。

以上がざっとしたesp8266の流れです。
Macではドライバを入れていても認識しなかったりしますが、充電器を刺して再起動を繰り返すと認識するようになる場合もあります。