public:理数研究ラボ2018補助教材

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
public:理数研究ラボ2018補助教材 [2018/08/23 14:40]
suda 		public:理数研究ラボ2018補助教材 [2018/08/23 23:41] (現在)
suda [ESP8266を利用したネットワークプログラミング]
行 73: 行 73:
 </WRAP> </WRAP>
  
-**フィジカルコンピューティング**とは，センサやアクチュエータ（出力部品）を使って，私たちの身の回りの物理的な世界と，コンピュータ上にあるような情報の世界をつなぐことです．+<WRAP center round important 60%> 
 +復習用に追記を行いました（8/23） 
 +</WRAP>
  
-今回は，Fujichanデバイスをベースに，日常の中で自然に情報提示する**アンビエントメディア**を制作します．LEDやスピーカーを使って，光や音といった環境の情報をコントロールします． 
  
------+**フィジカルコンピューティング**とは，センサやアクチュエータ（出力部品）を使って，私たちの身の回りの物理的な世界と，コンピュータ上にあるような情報の世界をつなぐことです．今回は，Fujichanデバイスをベースに，日常の中で自然に情報提示する**アンビエントメディア**を制作します．LEDやスピーカーを使って，光や音といった環境の情報をコントロールします．
  
 **Arduino**は，エンジニアだけでなく，デザイナーやアーティストでも，マイクロコントローラ（小さなコンピュータ）を簡単に使えるように作られた汎用マイコンボードです．PC上でプログラムを記述し，それをUSBケーブルで接続されたボードに転送すると，ボード上のマイクロコントローラがプログラム通りに動作します．組み込みと呼ばれる，PCを利用しない小さなデバイスでは，一般的な開発手法です． **Arduino**は，エンジニアだけでなく，デザイナーやアーティストでも，マイクロコントローラ（小さなコンピュータ）を簡単に使えるように作られた汎用マイコンボードです．PC上でプログラムを記述し，それをUSBケーブルで接続されたボードに転送すると，ボード上のマイクロコントローラがプログラム通りに動作します．組み込みと呼ばれる，PCを利用しない小さなデバイスでは，一般的な開発手法です．
行 83: 行 84:
 https://www.arduino.cc/ https://www.arduino.cc/
  
-Arduinoには，性能や大きさによって様々な種類がありますが，このワークショップでは最も一般的なArduino Unoを使います．Arduino IDEは，[[https://www.arduino.cc/en/Main/Software|こちら]]からダウンロードできます．<wrap lo>（8/23追記）</wrap>+Arduinoには，性能や大きさによって様々な種類がありますが，このワークショップでは最も一般的なArduino Unoを使います．購入する場合は，周辺機器が揃っている[[https://www.switch-science.com/catalog/181/|Arduinoをはじめようキット - SWITCH-SCIENCE]]などがおすすめです．Arduino IDEは，[[https://www.arduino.cc/en/Main/Software|こちら]]からダウンロードできます．<wrap lo>（8/23追記）</wrap>
  
 {{ :public:arduino_uno_ide.png?nolink |}} {{ :public:arduino_uno_ide.png?nolink |}}
  
-さっそく、以下のプログラムを書き込んでみましょう． +**LEDをチカチカさせるプログラム（Lチカ）**
- +
-<wrap em>LEDをチカチカさせるプログラム（Lチカ）</wrap>+
  
 <code cpp sketch_blink.ino> <code cpp sketch_blink.ino>
行 108: 行 107:
 </code> </code>
  
-<html> +プログラムを書き込むとき，ボードとシリアルポートが正しく選択されているか注意！
-<details><summary>プログラムを書き込むとき，ボードとシリアルポートが正しく選択されているか注意！</summary> +
-</html> +
- +
-**Arduino Unoの場合**+
  
 {{ :public:arduino_board.png?nolink |}} {{ :public:arduino_board.png?nolink |}}
  
 {{ :public:arduino_port.png?nolink |}} {{ :public:arduino_port.png?nolink |}}
- 
-<html> 
-</details> 
-</html> 
  
 ----- -----
行 126: 行 117:
   * プログラミングに使える文字は，半角の英数字と記号です．   * プログラミングに使える文字は，半角の英数字と記号です．
   * プログラムは基本的に，上から順番に実行されていきます．   * プログラムは基本的に，上から順番に実行されていきます．
-  * ''setup()''の''{ }''の中は最初に一度だけ実行され，''loop()''の''{ }''の中は繰り返し実行されます．+  * Arduinoのプログラムには，必ず''setup()''と''loop()''が一つずつ必要です．''setup()''の''{ }''の中は最初に一度だけ実行され，''loop()''の''{ }''の中は繰り返し実行されます．
   * ''%%//%%''で始まる行は**コメント**といい，その行はそこから改行されるまで無視されます．   * ''%%//%%''で始まる行は**コメント**といい，その行はそこから改行されるまで無視されます．
  
行 138: 行 129:
  
 **電子工作** **電子工作**
 +
 +Arduinoのピンに様々な電子部品を差し込んで，プログラムで制御できる電子回路を組むことができます．ブレッドボードやジャンプワイヤを使って，半田づけをする必要なく，電子回路を試すことができます．プログラムでも電子回路でも，何度も試作を繰り返して，物を作っていく手法を**プロトタイピング**といいます．
  
 {{ :public:risukenlab180820_01_bb.png?nolink |}} {{ :public:risukenlab180820_01_bb.png?nolink |}}
  
-  * [[https://www.switch-science.com/catalog/181/|Arduinoをはじめようキット - SWITCH-SCIENCE]] 
   * [[https://www.switch-science.com/catalog/472/|圧電スピーカー - SWITCH-SCIENCE]]   * [[https://www.switch-science.com/catalog/472/|圧電スピーカー - SWITCH-SCIENCE]]
   * [[https://www.switch-science.com/catalog/1398/|フルカラーシリアルLEDモジュール - SWITCH-SCIENCE]]   * [[https://www.switch-science.com/catalog/1398/|フルカラーシリアルLEDモジュール - SWITCH-SCIENCE]]
  
 ----- -----
- +<html><details><summary>音を鳴らすプログラム</summary></html>
-<wrap em>tone()関数を使って音を鳴らす</wrap>+
 <code cpp speaker.ino> <code cpp speaker.ino>
 int speaker = 9;    // スピーカーをつないだピンは9番 int speaker = 9;    // スピーカーをつないだピンは9番
行 176: 行 167:
 } }
 </code> </code>
 +<html></details></html>
 ----- -----
  
-<wrap em>フルカラーLEDモジュールを使う</wrap>+**フルカラーLEDモジュールを使う**
  
 +フルカラーLEDモジュールを使うには，ライブラリを読み込む必要があります．ライブラリの追加方法などは以下を参照してみてください．
 [[http://ws.tetsuakibaba.jp/doku.php?id=arduino:出力基礎:led|http://ws.tetsuakibaba.jp/doku.php?id=arduino:出力基礎:led]] [[http://ws.tetsuakibaba.jp/doku.php?id=arduino:出力基礎:led|http://ws.tetsuakibaba.jp/doku.php?id=arduino:出力基礎:led]]
 +
 +複数のLEDの同時制御なども簡単にできますが，以下のプログラムでは1つのLEDに色を設定し，反映させる関数を紹介します．
  
 <code cpp neoPixel.ino> <code cpp neoPixel.ino>
行 194: 行 189:
  
 void loop() { void loop() {
-  led.setPixelColor(0, led.Color(50,0,0)); // 1つめのLED（0番）を赤色に設定．+  led.setPixelColor(0, led.Color(50,0,0)); // 1つめのLED（0番）を赤色に設定．各色の最大値は255
   led.show(); // 設定を反映させる   led.show(); // 設定を反映させる
   delay(duration);   delay(duration);
行 207: 行 202:
  
 {{ :public:risukenlab180820_02_rgb.png?nolink |}} {{ :public:risukenlab180820_02_rgb.png?nolink |}}
- 
------ 
- 
  
  
-**ふわっと光らせるしくみ**+<html><details><summary>ふわっと光らせるしくみ</summary></html>
 <code cpp fade2.ino> <code cpp fade2.ino>
 #include <Adafruit_NeoPixel.h> #include <Adafruit_NeoPixel.h>
行 237: 行 229:
 } }
 </code> </code>
 +<html></details></html>
  
-* **for文**は，繰り返し処理の書き方です．''( )''の中で変化する値の初期値，繰り返しを続ける条件，値の変化のしかたの3つを設定し，条件が満たされている間''{ }''の中を実行します．+**for文**は，繰り返し処理の書き方です．''( )''の中で変化する値の初期値，繰り返しを続ける条件，値の変化のしかたの3つを設定し，条件が満たされている間''{ }''の中を実行します． 
 + 
 +-----
  
 <html><details><summary>Fujichan用の色と時間を指定してLEDをふわっと光らせるプログラム</summary></html> <html><details><summary>Fujichan用の色と時間を指定してLEDをふわっと光らせるプログラム</summary></html>
  
-Fujichanのプログラムでは，色と時間を指定してLEDをふわっと光らせるプログラムを用意しています．''Adafruit_NeoPixel''としていたところが，''myNeoPixel''になっているのは，読み込んだ別ファイルで機能を拡張しているからです．+Fujichanのプログラムでは，色と時間を指定してLEDをふわっと光らせるプログラムを用意しています．''Adafruit_NeoPixel''としていたところが，''myNeoPixel''になっているのは，読み込んだ別ファイルで機能を追加しているからです．
  
 {{ :public:sketch_fade.zip |}} {{ :public:sketch_fade.zip |}}
行 252: 行 247:
  
 void setup() { void setup() {
-  led.setup();+  led.setup(); // ledの初期設定を行う
 } }
  
行 265: 行 260:
 </code> </code>
 <html></details></html> <html></details></html>
 +
 ----- -----
  
行 292: 行 288:
     funkaLevel = val; // 受け取ったデータを噴火警戒レベルに設定     funkaLevel = val; // 受け取ったデータを噴火警戒レベルに設定
  
-    if(funkaLevel >= 4){               // もし噴火警戒レベルが4以上なら+    if(funkaLevel >= 4){               // もし噴火警戒レベルが4以上に設定されたら
       for(int i=0; i<funkaLevel; i++){ // 噴火警戒レベルの数だけ警告音を鳴らす       for(int i=0; i<funkaLevel; i++){ // 噴火警戒レベルの数だけ警告音を鳴らす
         tone(speaker, 500);         tone(speaker, 500);
行 304: 行 300:
 </code> </code>
  
------ +**if文**という条件に応じた処理の書き方を使って，「もし新しいデータが届いていたら」行う処理を書いています．''if''で始まる文は，''( )''で囲った条件が満たされたとき，''{ }''で囲われた部分の処理を実行します．
- +
-  * **if文**という条件に応じた処理の書き方を使って，「もし新しいデータが届いていたら」行う処理を書きます．''if''で始まる文は，''( )''で囲った条件が満たされたとき，''{ }''で囲われた部分の処理を実行します．+
  
 ----- -----
  
-ここまでにやった，LEDを光らせるプログラム，スピーカーで音を鳴らすプログラムを組み合わせて，+アンビエントメディアとしてのデバイスをデザインするとき，たとえば次のようなことをどう設計するかが重要です．
  
-  * 気温によって，LEDがどんな色に変化するか． +  * <wrap hi>気温によって，LEDがどんな色に光るか．</wrap> 
-  * データが更新されたとき，どんな変化をするか． +  * <wrap hi>データが更新されたとき，どんな変化をするか．</wrap>
-  * ゆるやかな情報提示と，緊急の情報提示． +
- +
-といったことを考えて，音や光の変化のしかたを検討してみましょう． +
- +
-下のプログラムは，シリアル通信を使って，気温，噴火警戒レベル，降水量を設定できるようにしたものです．+
  
 +下のプログラムは，シリアル通信を使って，気温，噴火警戒レベル，降水量を設定できるようにしてあります（いくつか外部ファイルを読み込んでいますが，プログラムの流れは上のプログラムと同じです）．
   * 0 ~ ： 気温[°C]   * 0 ~ ： 気温[°C]
   * 1000~1005 ： 噴火警戒レベル（0~5）   * 1000~1005 ： 噴火警戒レベル（0~5）
   * 2000~ ： 降水量[mm/h]（プログラムは-2000したを受け取る）   * 2000~ ： 降水量[mm/h]（プログラムは-2000したを受け取る）
   * 4001 ： LEDもスピーカーもOFF   * 4001 ： LEDもスピーカーもOFF
 +
 +このプログラムを使って，データに応じて情報を提示するプログラムを書いてみます．まずは，これまでにやった，LEDを制御するプログラムの書き方を参考に，<wrap em>気温データを使ってLEDの色を変化させるプログラム</wrap>を書いてみましょう．噴火警報レベルは，レベル4以上のときレベルの数だけ警報を鳴らすプログラム，降水量は，Fujichan用の雨音を鳴らすプログラムが，あらかじめ動くようにしてあります．
  
 {{ :public:sketch_simplefujichandev.zip |}} {{ :public:sketch_simplefujichandev.zip |}}
  
 +<html><details><summary>sketch_simplefujichandev.ino</summary></html>
 <code cpp> <code cpp>
 #include "myNeoPixel.h"        // Fujichan用のLED制御プログラム #include "myNeoPixel.h"        // Fujichan用のLED制御プログラム
行 334: 行 327:
 myNeoPixel led = myNeoPixel(1, 4); // ledの数は1つ，LEDにつないだピンは4番 myNeoPixel led = myNeoPixel(1, 4); // ledの数は1つ，LEDにつないだピンは4番
 // int speaker = 9; // rain.hに書いてあるので，ここでは書かない // int speaker = 9; // rain.hに書いてあるので，ここでは書かない
- 
  
 float temperature   = 0; // 気温（単位は[°C]） float temperature   = 0; // 気温（単位は[°C]）
 int   funkaLevel    = 0; // 噴火警戒レベル int   funkaLevel    = 0; // 噴火警戒レベル
 float precipitation = 0; // 降水量（単位は[mm/h]） float precipitation = 0; // 降水量（単位は[mm/h]）
- 
  
 void setup() { void setup() {
-  led.setup(); // LEDの初期設定 +  led.setup();             // LEDの初期設定
-  +
   Serial.begin(115200);    // シリアル通信を開始する   Serial.begin(115200);    // シリアル通信を開始する
   Serial.println("START"); // シリアルモニターに"START"と表示   Serial.println("START"); // シリアルモニターに"START"と表示
行 349: 行 339:
  
 void loop() { void loop() {
-   
   if ( Serial.available() > 0 ) {    // もしデータが届いていたら   if ( Serial.available() > 0 ) {    // もしデータが届いていたら
     float val = Serial.parseFloat(); // 変数を用意して取り出す     float val = Serial.parseFloat(); // 変数を用意して取り出す
-     
     if ( val < 1000 ) {  // 受け取ったデータが1000より小さいなら     if ( val < 1000 ) {  // 受け取ったデータが1000より小さいなら
       temperature = val; // 受け取ったデータを気温に設定       temperature = val; // 受け取ったデータを気温に設定
-       
       // ここに，変数temperatureを使って，気温が更新された時の処理を書いてみましょう       // ここに，変数temperatureを使って，気温が更新された時の処理を書いてみましょう
 +      /* 気温が更新された時の処理．ここから */
 +      
 +
 +
 +      
  
 +      /* ここまで */
     }     }
     else if ( val >= 1000 && val < 2000) { // 受け取ったデータが1000以上かつ2000より小さいなら     else if ( val >= 1000 && val < 2000) { // 受け取ったデータが1000以上かつ2000より小さいなら
       funkaLevel = val - 1000.0;           // 受け取ったデータから1000引いた数を噴火警戒レベルに設定       funkaLevel = val - 1000.0;           // 受け取ったデータから1000引いた数を噴火警戒レベルに設定
- 
       // ここに，噴火警戒レベルが更新された時の処理       // ここに，噴火警戒レベルが更新された時の処理
-      +      if(funkaLevel >= 4){               // もし噴火警戒レベルが4以上なら 
 +        for(int i=0; i<funkaLevel; i++){ // 噴火警戒レベルの数だけ警告音を鳴らす 
 +          tone(speaker, 500); 
 +          delay(400); 
 +          noTone(speaker); 
 +          delay(100); 
 +        } 
 +      }
     }     }
     else if ( 2000 <= val && val < 3000 ) { // 受け取ったデータが2000以上なら     else if ( 2000 <= val && val < 3000 ) { // 受け取ったデータが2000以上なら
       precipitation = val - 2000.0;         // 受け取ったデータから2000引いた数を降水量に設定       precipitation = val - 2000.0;         // 受け取ったデータから2000引いた数を降水量に設定
-       
       // ここに，降水量が更新された時の処理       // ここに，降水量が更新された時の処理
-       
     }     }
     else if ( (int)val == 4001 ) { // 受け取ったデータが4001なら     else if ( (int)val == 4001 ) { // 受け取ったデータが4001なら
行 379: 行 376:
       return;       return;
     }     }
- 
     // シリアルモニタに3つのデータを表示     // シリアルモニタに3つのデータを表示
     Serial.println();     Serial.println();
行 389: 行 385:
     Serial.println(precipitation);     Serial.println(precipitation);
   }   }
- +  makeRainSound(precipitation); // Fujichan用の雨音を鳴らす関数
-  makeRainSound(precipitation); // Fujichan用の雨音を鳴らす関数．鳴らさない場合はコメントにする．+
   delay(1);   delay(1);
 } }
 </code> </code>
 +<html></details></html>
  
------ +if文をいくつかの条件に分岐させるときは，**else文**を使います．最初のif文の後に，''else if( )''のようにif文と組み合わせて書くことで，別の条件が決められます．一つのif文で「〜かつ〜」や「〜または〜」のような複数の条件を判定したい場合は，''( )''の中の条件を''&&''（かつ）や''||''（または）で区切ります．
- +
-  * if文をいくつかの条件に分岐させるときは，最初のif文のの後に，**else文**を使います．''else if( )''のようにif文と組み合わせて，別の条件が決められます． +
-  * 一つのif文で「〜かつ〜」や「〜または〜」のような複数の条件を判定したい場合は，''( )''の中の条件を''&&''（かつ）や''||''（または）で区切ります． +
- +
------+
 ====== ESP8266を利用したネットワークプログラミング ====== ====== ESP8266を利用したネットワークプログラミング ======
  
行 409: 行 400:
 </WRAP> </WRAP>
  
-**ESP8266**は，小型で安価なWi-Fiモジュールです．単体でインターネットに接続することができ，Arduinoのプログラムを書き込むこともできるので，IoTの制作に最適です．+<WRAP center round important 60%> 
 +復習用に追記しました．自宅でプログラムを書き換えるときなどの参考にしてください．（8/23） 
 +</WRAP>
  
-[[https://www.switch-science.com/catalog/2500/|ESPr® Developer（ESP-WROOM-02開発ボード） - スイッチサイエンス]] +**ESP8266**は，小型で安価なWi-Fiモジュールです．単体でインターネットに接続することができ，Arduinoのプログラムを書き込むこともできるので，IoTの制作に最適です．電源供給や，プログラムの書き換えにはmicroBタイプのUSBケーブルが必要です．
-[[http://trac.switch-science.com/wiki/esp_dev_arduino_ide|Arduino IDEで開発する方法]]+
  
 +  * [[https://www.switch-science.com/catalog/2500/|ESPr® Developer（ESP-WROOM-02開発ボード） - スイッチサイエンス]]
 +  * [[https://www.switch-science.com/catalog/1035/|USB2.0ケーブル(A-microBタイプ)50cm - スイッチサイエンス]]
  
 ----- -----
  
-**取得したい場所の2つのURLを取得する**+<wrap lo>ESP8266は，Wi-Fi通信を用いた様々な使い方があります．Arduinoにも，メニューバーの[ファイル]から開ける[スケッチ例]に，サンプルプログラムが非常に多く用意されています．Fujichanのような使い方の，基本的なプログラムは[ESP8266WiFi]の中の[WiFiClient]というサンプルを参照してください．</wrap>
  
-データを取得するプログラムはすでにウェブ上に準備してあり，ESP8266からアクセスすることで，気温，噴火警戒レベル，降水量を取得することができます．ただし場所によって降水量が取得できない箇所もあるのでご注意ください．気温，降水量はtenki.jpのアメダスから，噴火レベルはtenki.jpの火山情報から取得します．ESP8266に書き込むArduinoのプログラムの中に，取得したい場所のURLを記述するので，Webブラウザから+**Wi-Fiに接続するには** 
 + 
 +普段から，インターネットを使うとき，Wi-Fiに接続することが多いと思います．Wi-Fiに接続するには，**SSID**というネットワークの名前と，接続するための**パスワード**が必要です．今回は，プログラムの中にこの2つを直接記述します．ワークショップでは，研究室のWi-Fiに接続しましたが，自宅のWi-Fiに接続する場合は，この2つを変更する必要があります． 
 + 
 +**Webから情報を取得するには** 
 + 
 +普段，ChromeやSafariなどのWebブラウザからウェブ上の情報を取得するとき，**URL**というウェブ上の場所を特定する文字列によって，アクセスを行っています．IoTデバイスから，ウェブ上の情報を取得するときも同様で，今回は，プログラムの中で必要なURLを作ります．データを取得するプログラムはすでにウェブ上にプログラムが準備してあり，ESP8266からアクセスすることで，気温，噴火警戒レベル，降水量を取得することができます． 
 + 
 +プログラムのURL：%%http://tetsuakibaba.jp/test/fuji-chan.php%% 
 + 
 +**取得したい場所の2つのURLを用意する** 
 + 
 +準備したウェブ上のプログラムには，取得したい場所のURLを送って，特定の場所の情報が取得できるようにしてあります．取得したい場所のURLは，気温，降水量はtenki.jpのアメダスから，噴火レベルはtenki.jpの火山情報からそれぞれ取得します．Webブラウザから
  
 https://tenki.jp/ https://tenki.jp/
  
-にアクセスし，自分の取得したい場所を選択しましょう．例として，さいたま市のアメダスページにしてみます．次に噴火情報に関してはさいたま市に関しては特に近くに情報を持つ山がないので，デフォルトの富士山のままにしておきます（この情報は使いません）．まとめると以下の2つです．+にアクセスし，自分の取得したい場所を選択しましょう．場所によって降水量が取得できない箇所もあるのでご注意ください． 
 +例として，さいたま市のアメダスページにしてみます．次に噴火情報に関してはさいたま市は特に近くに情報を持つ山がないので，デフォルトの富士山のままにしておきます（この情報は使いません）．まとめると，数字部分だけが異なる以下の2つのようなURLが用意できていればOKです．
  
-  * ＜アメダスurl＞：https://tenki.jp/amedas/3/14/43241.html +＜アメダスurl＞：https://tenki.jp/amedas/3/14/43241.html\\ 
-  * ＜火山情報url＞：http://www.tenki.jp/bousai/volcano/detail-53.html+＜火山情報url＞：http://www.tenki.jp/bousai/volcano/detail-53.html
  
-プログラムに書く前に正しくデータが取得できるかはPCのブラウザからでも確認できます．以下のURLはクリックすると，さいたま市の気温，富士山の噴火警戒レベル，さいたま市の降水量が確認できます．自分の取得したい場所に置き換えて，Webブラウザのアドレスバーに入力してアクセスしてみましょう．+プログラムに記述する前に正しくデータが取得できるかはPCのブラウザからでも確認できます．以下のURLはクリックすると，さいたま市の気温，富士山の噴火警戒レベル，さいたま市の降水量が確認できます．自分の取得したい場所に置き換えて，Webブラウザのアドレスバーに入力してアクセスしてみましょう．
  
 http://tetsuakibaba.jp/test/fuji-chan.php?url_temp=https://tenki.jp/amedas/3/14/43241.html&url_vol=http://www.tenki.jp/bousai/volcano/detail-53.html http://tetsuakibaba.jp/test/fuji-chan.php?url_temp=https://tenki.jp/amedas/3/14/43241.html&url_vol=http://www.tenki.jp/bousai/volcano/detail-53.html
行 438: 行 445:
 ----- -----
  
-**ESP8266に書き込む**+**ESP8266に書き込むプログラム**
  
-<wrap em>最終ファイルこれです！</wrap> +<wrap em>最終ファイル</wrap>：{{ :public:sketch_final.zip |}}
-{{ :public:sketch_final.zip |}}+
  
-このプログラムの以下の部分を，自分の取得したい地域のアメダスurl，火山情報urlに書き換えます．''url_temp''はアメダスurl，''url_vol''は火山情報urlです．+このプログラムをダウンロードしてsketch_final.ino開いたら，fujichanClient.hというタブを選択してください． 
 + 
 +{{ :public:final_tab.png?nolink |}} 
 + 
 +以下の，Wi-Fiネットワーク設定と，取得したい場所のアメダス・火山情報のURLの部分を，上で確認したものに書き換えます．
  
 <code cpp> <code cpp>
 +// Wi-Fiネットワーク設定
 +const char* ssid = "********";
 +const char* pass = "********";
 +
 +// Webサーバ上のプログラムのURL
 +const char* host = "tetsuakibaba.jp";
 +const char* path = "/test/fuji-chan.php";
 +
 // 取得したい場所のアメダス・火山情報のURL // 取得したい場所のアメダス・火山情報のURL
 const char* url_temp = "https://tenki.jp/amedas/5/25/50066.html"; // Mt.Fuji const char* url_temp = "https://tenki.jp/amedas/5/25/50066.html"; // Mt.Fuji
行 451: 行 469:
 </code> </code>
  
-**ESP8266書き込み設定**+このプログラムでは，指定したSSIDとパスワードを使ってWi-Fiへ接続する''connect()''という関数と，指定したURLを使ってWebサーバからデータを更新する''update()''という関数を用意しています．''update()''では，**HTTP**というウェブでの情報のやり取りに広く使われている通信の処理を，プログラム上で記述しています． 
 + 
 +<html><details><summary>fujichanClient.h</summary></html> 
 +<code cpp> 
 +#include "Arduino.h" 
 +#include <ESP8266WiFi.h> 
 +#include "myNeoPixel.h" 
 +#include "rain.h" 
 +#include "temperature2Color.h" 
 + 
 +myNeoPixel led = myNeoPixel(1, 4); 
 + 
 +// Wi-Fiネットワーク設定 
 +const char* ssid = "********"; 
 +const char* pass = "********"; 
 + 
 +// Webサーバ上のプログラムのURL 
 +const char* host = "tetsuakibaba.jp"; 
 +const char* path = "/test/fuji-chan.php"; 
 + 
 +// 取得したい場所のアメダス・火山情報のURL 
 +const char* url_temp = "https://tenki.jp/amedas/5/25/50066.html"; // Mt.Fuji 
 +const char* url_vol = "http://tenki.jp/bousai/volcano/314/index.html"; // Mt.Fuji 
 + 
 +// Wi-Fiへ接続する関数 
 +void connect() { 
 +  Serial.println(); 
 +  Serial.println(); 
 +  Serial.print("Connecting to "); 
 +  Serial.println(ssid); 
 +  WiFi.begin(ssid, pass); 
 +  while (WiFi.status() != WL_CONNECTED) { 
 +    //delay(500); 
 +    led.fadeIn(50, 50, 50, 500); 
 +    led.fadeOut(500); 
 +    Serial.print("."); 
 +  } 
 +  Serial.println(); 
 +  Serial.print("WiFi connected ( IP address: "); 
 +  Serial.print(WiFi.localIP()); 
 +  Serial.println(" )"); 
 +} 
 + 
 +// Webサーバからデータを取得する関数 
 +void update(float* _temperature, int* _funkaLevel, float* _precipitation) { 
 +  // (1)Webサーバーに接続する（TCP接続） 
 +  Serial.println(); 
 +  Serial.print("connecting to "); 
 +  Serial.println(host); 
 +  WiFiClient client; 
 +  const int httpPort = 80; // HTTP通信のポート番号は80 
 +  if (!client.connect(host, httpPort)) { 
 +    Serial.println("connection failed"); 
 +    return; 
 +  } 
 +  // (2)要求するファイルのURLを用意する 
 +  String url = path; 
 +  url += "?url_temp="; 
 +  url += url_temp; 
 +  url += "&url_vol="; 
 +  url += url_vol; 
 +  Serial.print("Requesting URL: "); 
 +  Serial.println(url); 
 +  // (3)HTTPリクエストをWebサーバーに送信する 
 +  client.print(String("GET ") + url + " HTTP/1.1\r\n" + 
 +               "Host: " + host + "\r\n" + 
 +               "Connection: close\r\n\r\n"); 
 +  unsigned long timeout = millis(); 
 +  while (client.available() == 0) { 
 +    if (millis() - timeout > 5000) { 
 +      Serial.println(">>> Client Timeout !"); 
 +      client.stop(); 
 +      return; 
 +    } 
 +  } 
 +  // (4)HTTPレスポンスから必要なデータを取り出す 
 +  while (client.available()) { 
 +    String line = client.readStringUntil('\r'); 
 +    //Serial.print(line); // この行を有効にするとHTTPレスポンスの全体が確認できます。 
 +    // 気温、噴火レベル、降水量の順番で並んでおり、カンマで区切られています。 
 +    int commaIndex = line.indexOf(",");          // 行の先頭から何文字目に 
 +    int lastCommmaIndex = line.lastIndexOf(","); // 最初のカンマと2つめのカンマがあるか 
 +    if (commaIndex >= 0) { 
 +      *_temperature = line.substring(0, commaIndex).toFloat(); 
 +      *_funkaLevel = line.substring(commaIndex + 1).toInt(); 
 +      *_precipitation = line.substring(lastCommmaIndex + 1).toFloat(); 
 +    } 
 +  } 
 +  Serial.println(); 
 +  Serial.println("closing connection"); 
 + 
 +  Serial.print("temperature: "); 
 +  Serial.println(*_temperature); 
 +  Serial.print("volcano warning level: "); 
 +  Serial.println(*_funkaLevel); 
 +  Serial.print("precipitation: "); 
 +  Serial.println(*_precipitation); 
 +   
 +  Serial.println(">>> Fuji-chan updated!"); 
 +} 
 +</code> 
 +<html></details></html> 
 + 
 +プログラムが変更できたら，メニューバーの[ツール]を開いて，ボードやシリアルポートの設定が以下のようになっているか確認して，ESP8266にArduinoプログラムの書き込みを行いましょう．Arduino Unoよりも時間がかかるので注意してください．
  
 {{ :public:esp8266_upload.png?nolink&600 |}} {{ :public:esp8266_upload.png?nolink&600 |}}
  
-シリアルモニターを開いて，インターネットから情報が取得できていればOKです． +シリアルモニターを開いて，インターネットから取得した，気温，噴火警戒レベル，降水量の情報が表示されればOKです．この情報を，先ほど作ったデータに応じた音や光の変化の処理に反映させましょう．（スピーカーのピン番号が9から16に変わっています．直接ピン番号を指定する場合は注意）
-データの更新はデフォルトだと5分おきに行われます． +
-シリアルモニターから「3001」を送ると，手動で更新できます．+
  
 ----- -----
  
-**プログラムを合わせて完成させる**+**プログラムを一つにまとめる** 
 + 
 +ダウンロードしたプログラム（sketch_final）の大部分は，先ほどシリアルモニターでデータを送ったプログラム（sketch_simpleFujichanDev）と同じです．<wrap hi>先ほど作ったデータに応じた音や光の変化の処理を，プログラムの同じ場所に移動させましょう．</wrap> 
 + 
 +''setup()''の最後で，fujichanClient.hに用意されている，Wi-Fiに接続する''connect()''関数を実行しています．接続中はLEDが白色に点滅します．接続に成功すると，Webサーバからデータを取得する''update()''関数を実行して，気温，噴火警戒レベル，降水量のデータを更新しています．''update2()''は，インターネットから取得したデータをLEDやスピーカーへ反映するプログラムです．<wrap hi>下の方に''update2()''関数の本体があるので，この中にも，先ほど作ったデータに応じた音や光の変化の処理を書きます．</wrap> 
 + 
 +<code cpp> 
 +#include "FujichanClient.h" 
 + 
 +#define UPDATE_INTERVAL 60*5 // 更新間隔[秒] 
 + 
 +float temperature   = 0; // 気温（単位は[°C]） 
 +int   funkaLevel    = 0; // 噴火警戒レベル 
 +float precipitation = 0; // 降水量（単位は[mm/h]） 
 + 
 +void setup() { 
 +  led.setup();             // LEDの初期設定 
 +  Serial.begin(115200);    // シリアル通信を開始する 
 +  Serial.println("START"); // シリアルモニターに"START"と表示 
 + 
 +  // Wi-Fiへ接続する関数 
 +  connect(); 
 +  // Webサーバからデータを取得する関数 
 +  update(&temperature, &funkaLevel, &precipitation); // 情報を更新します 
 +  update2();                                         // LEDやスピーカーへ反映します 
 +} 
 + 
 +void loop() { 
 +   
 +  ~中略~ 
 + 
 +  if ( metro(UPDATE_INTERVAL) == true ) {              // 更新時間が来たら 
 +    update(&temperature, &funkaLevel, &precipitation); // 情報を更新します 
 +    update2();                                         // LEDやスピーカーへ反映します 
 +  } 
 +} 
 + 
 +void update2(){ 
 +  /* 気温が更新された時の処理．ここから */ 
 +       
 + 
 +  /* ここまで */ 
 +} 
 + 
 +// 更新時間を教えてくれる関数 
 +static unsigned long int time = 0; 
 +bool metro(int seconds) { 
 +  if ( (millis() - time) > seconds * 1000 ) { 
 +    time = millis(); 
 +    return true; 
 +  } 
 +  else { 
 +    return false; 
 +  } 
 +} 
 +</code> 
 + 
 +----- 
 + 
 +**補足：データ更新の間隔** 
 + 
 +データ更新の間隔は，一番下の更新時間を教えてくれる関数で管理しています．''loop()''の最後で，''metro()''関数を呼び出して，更新時間が来ていれば，''update()''と''update2()''を行います．更新間隔はプログラム冒頭の以下の行で設定できます． 
 + 
 +<code> 
 +#define UPDATE_INTERVAL 60*5 // 更新間隔[秒] 
 +</code> 
 + 
 +手動で情報更新する場合は，シリアルモニターから「3001」を送信します． 
 + 
 +----- 
 + 
 +**補足：開発環境を整える** 
 + 
 +Arduino IDEでESP8266を開発するためには，以下の作業が必要です．自宅のWi-Fiに接続するにはArduinoプログラムを書き換える必要があるので，参考にしてください． 
 + 
 +  - macOSの場合はメニューバーの[Arduino]から[Preference]，Windowsの場合はメニューバーの[ファイル]から[環境設定]を開いて，[追加のボードマネージャのURL]に，以下のURLを入力して[OK]を押します．''%%http://arduino.esp8266.com/stable/package_esp8266com_index.json%%'' 
 +  - メニューバーの[ツール]から[ボード]の中にある[ボードマネージャ]を開いて，検索バーに「ESP8266」と入力し，該当するものを[インストール]します．選択できるボードの一覧に「ESP8266 Modules」が出ていれば，環境構築は完了です．※出ない場合は，一度Arduino IDEを終了すると反映されます． 
 + 
 +{{ :public:esp8266_1.png?nolink |}} 
 + 
 +{{ :public:esp8266_2.png?nolink |}} 
 + 
 +参考リンク：[[http://trac.switch-science.com/wiki/esp_dev_arduino_ide|Arduino IDEで開発する方法]] 
 + 
 +-----
  
-先ほど作ったデータに応じた音や光の変化（sketch_simpleFujichanDev）を，インターネットからデータを取得するプログラム（sketch_simpleFujichan）に移動させれば，プログラムは完成です．+その他，気軽にメールなどで質問してください．\\ 
 +9192hs@gmail.com（須田）\\ 
 +studio@tetsuakibaba.jp（研究室）
 ====== 撮影 ====== ====== 撮影 ======
 担当：石曽根 担当：石曽根
  • public/理数研究ラボ2018補助教材.1535002823.txt.gz
  • 最終更新: 2018/08/23 14:40
  • by suda