スキップしてメイン コンテンツに移動

MacでESP32開発環境の構築〜VSCode版〜&動作確認”Lチカ”

こんにちは。

今回は筆者の初の記事ということで備忘録を兼ねて簡単にMacでESP32の開発環境を整えていきます。
この記事ではVisual Studio Code(以下VSCode)の拡張機能PlatformIOを利用する方法を紹介します。また初心者向けです。筆者も初心者なので間違いがあるかもしれません。
ご了承ください。

  • 注意：すでにVSCcodeのインストールは済んでいるものとして記事を掲載します。(VSCode バージョン: 1.41.0)

1. PlatformIOのインストール

1.インストールしてあるVSCodeを起動します。
2.下記の画像”例1”を参考に①のExtensionsをクリック。
3.②の検索欄にPlatformIoと入力し一番上に出るものをクリック。
4.③のinstallボタンをクリックします。
5.画像”例2”の赤で囲まれたアイコンが新しく追加されていれば成功です。

例1
例2

2. PlatformIOの簡単な使い方

・インストールが完了したら画像”例3”のように画面左下の家のアイコンをクリックすることでPlatformIOのホーム画面を開くことができます。

例3

　(また同じく左下のギアのアイコン*画像”例4”かcommand+shift+Pでコマンドパレットを起動。platfomioと検索しhomeを選択すると同じように開ける。)

例4

・PlatformIOのホームではプロジェクトの作成などができる(以外の機能は説明を省く)
　PlatformIOのホーム画面のNew Projectを選び
　Nameにプロジェクトの名前
　Bordに自分の使っているボードの名前を選択(文字の検索機能もついている)
　今回の場合ではEspressif ESP32 Dev Module
　Frameworkに今回はArdunioを選択
　Locatioにチェクを入れるとPlatformIOデフォルトのフォルダに保存されます。入れない場合は任意で選択できるようになります。 　最後にウィンドウ右下のFinishボタンを押すことでプロジェクトを作成することができます。

例5

・プロジェクトの中身を確認する
　上記の手順でプロジェクトを作成したら画像”例6”①のエクスプローラーを開き中身を確認していきます。
　srcフォルダの中にあるmain.cppにプログラムを書いていきます。
　platformio.iniにはボードなどの細かい設定を行える場所です
　(細かい説明は省略)詳しくは↓docs.platformio.org

例6

・PlatformIOでよく使うアイコン
　上記の画像の下で小さく写っているアイコンの説明をします。 　

例7


　①:Build＝ビルド
　②:Upload＝プログラムを書き込む
　③:シリアルモニタ
　④ターミナルを開く
　＊①〜③はコマンドからもできるが説明は省略。詳しくは↓

docs.platformio.org

  • 注意：②や③ではCOMポートを選択していなくて自動で選択してくれます。
    個人的には上記のplatformio.iniで選択した方がいいような...

3. 動作確認”Lチカ”

それでは動作確認をしていきます。

必要なもの

  • ESP32-WROOM-32 開発ボード
  • 抵抗(300~1kΩ)
  • LED
  • ブレッドボードなどの配線機材

ハードウェア

配線

D4⇨抵抗⇨LED⇨GNDのように繋げれば画像と同じようにする必要はありません。

ソフトウェア

次に上記の方法でプロジェクトを作成しmain.cppに以下のように書き換えて保存してください。

#include <Arduino.h>

void setup() {
  // put your setup code here, to run once:
  pinMode(4,OUTPUT);
  Serial.begin(115200);
}

void loop() {
  // put your main code here, to run repeatedly:
  digitalWrite(4,HIGH);
  delay(1000);
  digitalWrite(4,LOW);
  delay(1000);
}
  • 注意：この際Arduino.hもincludする必要があります。

その後platformio.iniに以下の文を追記してください。

upload_port = hogehoge
monitor_port = hogehoge
monitor_speed = 115200

upload_port = と monitor_port = のあとのhogehogeにはポートのパスを入力する必要があります。
パスの確認方法は画像”例8”を参考にESP32をPCに繋がずにPlatformIOのホーム画面にあるDeviceを開きます。その後ESP32を繋ぎ②のRefreshした時に新しく出てきたものがパスです。③のアイコンをクリックすることでコピーできるので先ほどのhogehogeを削除しペースと保存をしてください。

例8

最後に上記で説明した方法でESP32に書き込みます。

  • 注意：自動プログラム回路がついていない場合はDOWNLOAD_BOOTさせないといけません。 詳しくはこちらht-deko.com

無事書き込むことができたらESP32のENボタンを押してSPI_FAST_FLASH_BOOTさせます。
LEDが10秒おきに点滅すれば成功です。

まとめ

今回はMacでESP32の開発する環境を紹介しました。 紹介しなかったPlatformIOのコマンド操作も含め使い方を把握しきれていない部分が多いですがESP32を開発するには一番楽(PlatformIOしか使ったことがないだけ)なのではないかと思います。
また今回使った部品は少なかったもけれど全てHaLakeのものを使用しております。他にも色々なパーツやセンサなどもあり学習環境が整っているのでぜひ遊びに来てください。

　

コメント

コメントを投稿

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２

前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標（再掲） ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提（再掲） ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール（再掲） ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
コメントを投稿
続きを読む

M5Stackで、においセンサー（TGS2450）を使ってみる。（LCDに表示編）

今回は、においセンサー（TGS2450）から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334（スイッチとして利用） M5StackSideBB（ブレッドボード） M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー（TGS2450）について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二
コメントを投稿
続きを読む

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その１

今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注： 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ （これから書くプログラムの保存領域）
コメントを投稿
続きを読む