public:ou2019

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
public:ou2019 [2019/08/05 15:39]
baba [当日のスケジュール]
public:ou2019 [2019/08/27 15:12] (現在)
ishisone [Fusion360によるデバイスのデザイン]
行 43: 行 43:
   * 息子の家の今の気温   * 息子の家の今の気温
 等をそれぞれのオブジェを模した形状でデザインして,日常の中で自然な情報呈示を実現するデバイスを制作します.情報というとテレビやラジオ,ウェブニュース,SNS等のメディアを考えると思いますが,これらは一般的にはユーザが能動的に情報取得を行うメディアとして位置づけられています.一方で,風が吹くと音がなる風鈴,風見鶏,よる冷えると凍結する水たまり,といった普段何気なく目にしているものにも,どの程度の風速で風が吹いているか,風向きはどちらか,昨晩はどの程度気温が下がったのか,といった情報が含まれており,生活する中で実は私達は様々な情報を受動的に取得してます.このような後者の性質を持つメディアをアンビエントメディアと呼び,本講座ではアンビエントメディアとIoT(Internet Of Things)を組み合わせたデバイスを制作します. 等をそれぞれのオブジェを模した形状でデザインして,日常の中で自然な情報呈示を実現するデバイスを制作します.情報というとテレビやラジオ,ウェブニュース,SNS等のメディアを考えると思いますが,これらは一般的にはユーザが能動的に情報取得を行うメディアとして位置づけられています.一方で,風が吹くと音がなる風鈴,風見鶏,よる冷えると凍結する水たまり,といった普段何気なく目にしているものにも,どの程度の風速で風が吹いているか,風向きはどちらか,昨晩はどの程度気温が下がったのか,といった情報が含まれており,生活する中で実は私達は様々な情報を受動的に取得してます.このような後者の性質を持つメディアをアンビエントメディアと呼び,本講座ではアンビエントメディアとIoT(Internet Of Things)を組み合わせたデバイスを制作します.
 +
 +==== 技術メモ ====
 +本講座で必要な環境,部品等をまとめて置きます.
 +  - PC(講座ではmacOSを利用しますが,利用するすべてのソフトウェアはWindowsでも動作します)
 +  - 3Dプリンタ
 +  - ソフトウェア(すべて無料ソフトウェアです)
 +    - Autodesk社製 Fusion360(3D CAD作成用)
 +    - Arduino(ハードウェアプログラミング用)
 +  - 電子部品
 +    - ESPr® Developer(ピンソケット実装済)
 +      - https://www.switch-science.com/catalog/2652/
 +    - USBケーブル
 +      - https://www.switch-science.com/catalog/1035/
 +    - フルカラーシリアルLEDタイル基板(5個入り)
 +      - https://www.switch-science.com/catalog/1344/
 +    - ユニバーサル基板(研究室でカットしたものを使っています)
 +      - http://akizukidenshi.com/catalog/g/gP-03229/
 +
  
 ===== 当日のスケジュール ===== ===== 当日のスケジュール =====
行 59: 行 77:
 |        |                                      |      |                                     | |        |                                      |      |                                     |
 ====== Fusion360によるデバイスのデザイン ====== ====== Fusion360によるデバイスのデザイン ======
-主担当:吉野小澤+主担当:石曽根加藤
 <WRAP center round info 60%> <WRAP center round info 60%>
-<wrap em>目標</wrap>:Fusion360に関する最低限必要な操作方法と基本的な内容を学習し,今回制作するデバイスのデザインができるようになること.3Dプリンタで扱える形式のデータを作成し,3Dプリント出力を体験すること.+<wrap em>目標</wrap>:Fusion360に関する最低限必要な操作方法と基本的な内容を学習し,今回制作するデバイスのデザインができるようになること.3Dプリンタで扱える形式のデータを作成し,3Dプリント出力を体験すること.今回は基本的に山の形状を作成し,好きな山情報を提示するものを前提として進めていく
 </WRAP> </WRAP>
  
 <html> <html>
 <p><font size="4" color="orange"><b>当日のFusion360によるデザインの流れ(仮)</b></font></p> <p><font size="4" color="orange"><b>当日のFusion360によるデザインの流れ(仮)</b></font></p>
-<a href="https://docs.google.com/presentation/d/1upPm_KuYM-pKewSd9yBWG_sjTWfe347AzXyIYhLo00w/edit?usp=sharing">googleスライドはここから</a><br><br>+ふじちゃんの制作過程をスライドにまとめましたので参考にしてください. 
 +<a href="https://docs.google.com/presentation/d/1Yu4xbgg_rmKl6W3c8hXSFT_c5UsXm3p5kUipPN2AiY0/edit?usp=sharing">補助教材(googleスライド</a><br><br>
 </html> </html>
  
行 74: 行 93:
 <html><br></html> <html><br></html>
 === ベース部分のモデル === === ベース部分のモデル ===
-{{ :public:base_model.zip |}}+{{ :public:ou_samplemodel.zip |}}
  
-====== Arduinoを利用したフィジカルコンピューティング基礎 ====== 
- 
-担当:須田,馬場 
- 
-<WRAP center round info 60%> 
-<wrap em>目標</wrap>:Arduinoを利用して,プログラミングと電子工作の基本を学び,フィジカルコンピューティング,プロトタイピングといった,実際に動くものを作る上で重要な考え方に触れる. 
-</WRAP> 
- 
-<WRAP center round important 60%> 
-復習用に追記を行いました(8/23) 
-</WRAP> 
- 
- 
-**フィジカルコンピューティング**とは,センサやアクチュエータ(出力部品)を使って,私たちの身の回りの物理的な世界と,コンピュータ上にあるような情報の世界をつなぐことです.今回は,Fujichanデバイスをベースに,日常の中で自然に情報提示する**アンビエントメディア**を制作します.LEDやスピーカーを使って,光や音といった環境の情報をコントロールします. 
- 
-**Arduino**は,エンジニアだけでなく,デザイナーやアーティストでも,マイクロコントローラ(小さなコンピュータ)を簡単に使えるように作られた汎用マイコンボードです.PC上でプログラムを記述し,それをUSBケーブルで接続されたボードに転送すると,ボード上のマイクロコントローラがプログラム通りに動作します.組み込みと呼ばれる,PCを利用しない小さなデバイスでは,一般的な開発手法です. 
- 
-https://www.arduino.cc/ 
- 
-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 |}} 
- 
-**LEDをチカチカさせるプログラム(Lチカ)** 
- 
-<code cpp sketch_blink.ino> 
-int led = 13;              // ledにつながっているピンは13番 
- 
-// setup()は,最初に一度だけ実行されます. 
-void setup() { 
-  pinMode(led, OUTPUT);    // ledのピンを出力モードに設定 
-} 
- 
-// loop()は,繰り返し実行されます. 
-void loop() { 
-  digitalWrite(led, HIGH); // ledのピンをHIGHにして点灯 
-  delay(1000);             // 1000ミリ秒(=1秒)停止 
-  digitalWrite(led, LOW);  // ledのピンをLOWにして消灯 
-  delay(1000);             // 1000ミリ秒(=1秒)停止 
-} 
-</code> 
- 
-プログラムを書き込むとき,ボードとシリアルポートが正しく選択されているか注意! 
- 
-{{ :public:arduino_board.png?nolink |}} 
- 
-{{ :public:arduino_port.png?nolink |}} 
- 
------ 
- 
-  * プログラミングに使える文字は,半角の英数字と記号です. 
-  * プログラムは基本的に,上から順番に実行されていきます. 
-  * Arduinoのプログラムには,必ず''setup()''と''loop()''が一つずつ必要です.''setup()''の''{ }''の中は最初に一度だけ実行され,''loop()''の''{ }''の中は繰り返し実行されます. 
-  * ''%%//%%''で始まる行は**コメント**といい,その行はそこから改行されるまで無視されます. 
- 
-  * ''int led = 13;''は,ledという名前の**変数**に13という値を記憶させています.変数を作るときは,データの種類を表す**型**というものを指定する必要があり,整数が記憶できる''int'',小数が記憶できる''float''などがあります.一度作った変数は,変数の名前だけで使うことができ,''=''をつけて値を書き換えるなどもできます. 
-  * ''pinMode()''や''digitalWrite()'',''delay()''のように,後ろに''( )''がついているものは**関数**といいます.''delay(1000)''は「1000ミリ秒(=1秒)停止する」という命令で''( )''の中の数字(**引数**といいます)によって,実行結果が変わります.Arduinoには様々な関数が用意されており,最初はこれらを組み合わせてプログラムを書いていきます. 
- 
-  * [[http://www.musashinodenpa.com/arduino/ref/index.php?f=2|Arduinoチュートリアル 基礎編]] 
-  * [[http://www.musashinodenpa.com/arduino/ref/|Arduino 日本語リファレンス]] 
- 
------ 
- 
-**電子工作** 
- 
-Arduinoのピンに様々な電子部品を差し込んで,プログラムで制御できる電子回路を組むことができます.ブレッドボードやジャンプワイヤを使って,半田づけをする必要なく,電子回路を試すことができます.プログラムでも電子回路でも,何度も試作を繰り返して,物を作っていく手法を**プロトタイピング**といいます. 
- 
-{{ :public:risukenlab180820_01_bb.png?nolink |}} 
- 
-  * [[https://www.switch-science.com/catalog/472/|圧電スピーカー - SWITCH-SCIENCE]] 
-  * [[https://www.switch-science.com/catalog/1398/|フルカラーシリアルLEDモジュール - SWITCH-SCIENCE]] 
- 
------ 
-<html><details><summary>音を鳴らすプログラム</summary></html> 
-<code cpp speaker.ino> 
-int speaker = 9;    // スピーカーをつないだピンは9番 
-int duration = 500; // 音の長さ 
- 
-void setup() { 
-   
-} 
-void loop() { 
-  tone(speaker, 262); // ド 
-  delay(duration); 
-  tone(speaker, 294); // レ 
-  delay(duration); 
-  tone(speaker, 330); // ミ 
-  delay(duration); 
-  tone(speaker, 349); // ファ 
-  delay(duration); 
-  tone(speaker, 392); // ソ 
-  delay(duration); 
-  tone(speaker, 440); // ラ 
-  delay(duration); 
-  tone(speaker, 494); // シ 
-  delay(duration); 
-  tone(speaker, 523); // ド 
-  delay(duration); 
-  noTone(speaker); // 音を止める 
-  delay(duration); 
-} 
-</code> 
-<html></details></html> 
------ 
- 
-**フルカラーLEDモジュールを使う** 
- 
-フルカラー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> 
-#include <Adafruit_NeoPixel.h> // ライブラリを読み込む 
- 
-Adafruit_NeoPixel led = Adafruit_NeoPixel(1, 4, NEO_GRB + NEO_KHZ800); // 制御するLEDの数1と,つないだピンの番号4を指定 
- 
-int duration = 1000; // 点灯時間 
- 
-void setup() { 
-  led.begin(); // LEDを初期化 
-} 
- 
-void loop() { 
-  led.setPixelColor(0, led.Color(50,0,0)); // 1つめのLED(0番)を赤色に設定.各色の最大値は255 
-  led.show(); // 設定を反映させる 
-  delay(duration); 
-  led.setPixelColor(0, led.Color(0,50,0)); // 緑 
-  led.show(); 
-  delay(duration); 
-  led.setPixelColor(0, led.Color(0,0,50)); // 青 
-  led.show(); 
-  delay(duration); 
-} 
-</code> 
- 
-{{ :public:risukenlab180820_02_rgb.png?nolink |}} 
- 
- 
-<html><details><summary>ふわっと光らせるしくみ</summary></html> 
-<code cpp fade2.ino> 
-#include <Adafruit_NeoPixel.h> 
- 
-Adafruit_NeoPixel led = Adafruit_NeoPixel(1, 4, NEO_GRB + NEO_KHZ800); 
- 
-void setup() { 
-  led.begin(); 
-} 
- 
-void loop() { 
-  // 変数iの初期値は0,50より小さければ繰り返す.iは繰り返すたびに1ずつ増える. 
-  for(int i=0; i<50; i++){ 
-    led.setPixelColor(0, led.Color(i, i, i)); 
-    led.show(); 
-    delay(10); // 10ミリ秒停止 
-  } 
-  // 変数iの初期値は50,0より大きければ繰り返す.iは繰り返すたびに1ずつ減る. 
-  for(int i=50; i>0; i--){ 
-    led.setPixelColor(0, led.Color(i, i, i)); 
-    led.show(); 
-    delay(10); 
-  } 
-} 
-</code> 
-<html></details></html> 
- 
-**for文**は,繰り返し処理の書き方です.''( )''の中で変化する値の初期値,繰り返しを続ける条件,値の変化のしかたの3つを設定し,条件が満たされている間''{ }''の中を実行します. 
- 
------ 
- 
-<html><details><summary>Fujichan用の色と時間を指定してLEDをふわっと光らせるプログラム</summary></html> 
- 
-Fujichanのプログラムでは,色と時間を指定してLEDをふわっと光らせるプログラムを用意しています.''Adafruit_NeoPixel''としていたところが,''myNeoPixel''になっているのは,読み込んだ別ファイルで機能を追加しているからです. 
- 
-{{ :public:sketch_fade.zip |}} 
- 
-<code cpp> 
-#include "myNeoPixel.h" // 別ファイルを読み込む 
- 
-myNeoPixel led = myNeoPixel(1, 4); // 制御するLEDの数1と,つないだピンの番号4を指定 
- 
-void setup() { 
-  led.setup(); // ledの初期設定を行う 
-} 
- 
-void loop() { 
-  led.fadeIn(50, 0, 0, 500); // 500ミリ秒かけて赤 
-  led.fadeOut(500);          // 500ミリ秒かけて消灯 
-  led.fadeIn(0, 50, 0, 500); 
-  led.fadeOut(500); 
-  led.fadeIn(0, 0, 50, 500); 
-  led.fadeOut(500); 
-} 
-</code> 
-<html></details></html> 
- 
------ 
- 
-**データによって変化させる**<wrap lo>(8/23追記)</wrap> 
- 
-複雑なものの開発では,最終的に目指す機能をいくつかに切り分けて開発し,最後にまとめるという開発手法が一般的です.IoTデバイスはインターネットからデータを取得しますが,まずはPCからデータを送ってそれに応じた音や光の変化を検討します. 
- 
-これまでUSBケーブルを通して,プログラムの書き込みを行なっていましたが,**シリアル通信**というデータの送受信を行うこともできます.以下のプログラムをArduinoに書き込んだら,ツールバー右にある虫眼鏡マークからシリアルモニターを開きます.通信速度を115200に設定して,数値を入力して送信すると,Arduinoプログラム上の噴火警戒レベルが設定できます. 
- 
-<code cpp serial1.ino> 
-int speaker = 9; 
- 
-int funkaLevel = 1; // 噴火警戒レベル(0~5)を記憶する変数を用意 
- 
-void setup() { 
-  Serial.begin(115200);    // シリアル通信を開始する 
-  Serial.println("START"); // シリアルモニターに表示 
-} 
- 
-void loop() { 
-   
-  if( Serial.available() > 0 ){      // もしデータが届いていたら 
-    float val = Serial.parseFloat(); // 変数を用意して受け取る 
-     
-    Serial.println(val); // 受け取ったデータを表示 
-     
-    funkaLevel = val; // 受け取ったデータを噴火警戒レベルに設定 
- 
-    if(funkaLevel >= 4){               // もし噴火警戒レベルが4以上に設定されたら 
-      for(int i=0; i<funkaLevel; i++){ // 噴火警戒レベルの数だけ警告音を鳴らす 
-        tone(speaker, 500); 
-        delay(400); 
-        noTone(speaker); 
-        delay(100); 
-      } 
-    } 
-  } 
-} 
-</code> 
- 
-**if文**という条件に応じた処理の書き方を使って,「もし新しいデータが届いていたら」行う処理を書いています.''if''で始まる文は,''( )''で囲った条件が満たされたとき,''{ }''で囲われた部分の処理を実行します. 
- 
------ 
- 
-アンビエントメディアとしてのデバイスをデザインするとき,たとえば次のようなことをどう設計するかが重要です. 
- 
-  * <wrap hi>気温によって,LEDがどんな色に光るか.</wrap> 
-  * <wrap hi>データが更新されたとき,どんな変化をするか.</wrap> 
- 
-下のプログラムは,シリアル通信を使って,気温,噴火警戒レベル,降水量を設定できるようにしてあります(いくつか外部ファイルを読み込んでいますが,プログラムの流れは上のプログラムと同じです). 
-  * 0 ~ : 気温[°C] 
-  * 1000~1005 : 噴火警戒レベル(0~5) 
-  * 2000~ : 降水量[mm/h](プログラムは-2000したを受け取る) 
-  * 4001 : LEDもスピーカーもOFF 
- 
-このプログラムを使って,データに応じて情報を提示するプログラムを書いてみます.まずは,これまでにやった,LEDを制御するプログラムの書き方を参考に,<wrap em>気温データを使ってLEDの色を変化させるプログラム</wrap>を書いてみましょう.噴火警報レベルは,レベル4以上のときレベルの数だけ警報を鳴らすプログラム,降水量は,Fujichan用の雨音を鳴らすプログラムが,あらかじめ動くようにしてあります. 
- 
-{{ :public:sketch_simplefujichandev.zip |}} 
- 
-<html><details><summary>sketch_simplefujichandev.ino</summary></html> 
-<code cpp> 
-#include "myNeoPixel.h"        // Fujichan用のLED制御プログラム 
-#include "rain.h"              // Fujichanの雨音プログラム 
-#include "temperature2Color.h" // Fujichanの気温を色に変換するプログラム 
- 
-myNeoPixel led = myNeoPixel(1, 4); // ledの数は1つ,LEDにつないだピンは4番 
-// int speaker = 9; // rain.hに書いてあるので,ここでは書かない 
- 
-float temperature   = 0; // 気温(単位は[°C]) 
-int   funkaLevel    = 0; // 噴火警戒レベル 
-float precipitation = 0; // 降水量(単位は[mm/h]) 
- 
-void setup() { 
-  led.setup();             // LEDの初期設定 
-  Serial.begin(115200);    // シリアル通信を開始する 
-  Serial.println("START"); // シリアルモニターに"START"と表示 
-} 
- 
-void loop() { 
-  if ( Serial.available() > 0 ) {    // もしデータが届いていたら 
-    float val = Serial.parseFloat(); // 変数を用意して取り出す 
-    if ( val < 1000 ) {  // 受け取ったデータが1000より小さいなら 
-      temperature = val; // 受け取ったデータを気温に設定 
-      // ここに,変数temperatureを使って,気温が更新された時の処理を書いてみましょう 
-      /* 気温が更新された時の処理.ここから */ 
-       
- 
- 
-       
- 
-      /* ここまで */ 
-    } 
-    else if ( val >= 1000 && val < 2000) { // 受け取ったデータが1000以上かつ2000より小さいなら 
-      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以上なら 
-      precipitation = val - 2000.0;         // 受け取ったデータから2000引いた数を降水量に設定 
-      // ここに,降水量が更新された時の処理 
-    } 
-    else if ( (int)val == 4001 ) { // 受け取ったデータが4001なら 
-      led.fadeOut(500);            // LEDを消す 
-      precipitation = 0.0;         // 雨音を止める 
-      return; 
-    } 
-    else { // それ以外なら何もしない 
-      return; 
-    } 
-    // シリアルモニタに3つのデータを表示 
-    Serial.println(); 
-    Serial.print("temperature: "); 
-    Serial.println(temperature); 
-    Serial.print("volcano warning level: "); 
-    Serial.println(funkaLevel); 
-    Serial.print("precipitation: "); 
-    Serial.println(precipitation); 
-  } 
-  makeRainSound(precipitation); // Fujichan用の雨音を鳴らす関数 
-  delay(1); 
-} 
-</code> 
-<html></details></html> 
- 
-if文をいくつかの条件に分岐させるときは,**else文**を使います.最初のif文の後に,''else if( )''のようにif文と組み合わせて書くことで,別の条件が決められます.一つのif文で「〜かつ〜」や「〜または〜」のような複数の条件を判定したい場合は,''( )''の中の条件を''&&''(かつ)や''||''(または)で区切ります. 
 ====== ESP8266を利用したネットワークプログラミング ====== ====== ESP8266を利用したネットワークプログラミング ======
  
-担当:須田,馬場+担当:馬場
  
 <WRAP center round info 60%> <WRAP center round info 60%>
-<wrap em>目標</wrap>:ネットワーク上にあるデータ(気象庁データ)を取得し,その情報をプログラム内で再構成して,光や音に変換して提示することで,アンビエントメディアやIoT(Internet of Things)における情報のあり方考え. +<wrap em>目標</wrap>:ネットワーク上にあるデータ(気象庁データ)を取得し,その情報をプログラム内で再構成して,光に変換して提示することで,アンビエントメディアやIoT(Internet of Things)における情報提示体験す
-</WRAP> +
- +
-<WRAP center round important 60%> +
-復習用に追記しました.自宅でプログラムを書き換えるときなどの参考にしてください.(8/23)+
 </WRAP> </WRAP>
  
行 444: 行 132:
  
 <アメダス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>:https://tenki.jp/bousai/volcano/314/
  
 プログラムに記述する前に正しくデータが取得できるかはPCのブラウザからでも確認できます.以下のURLはクリックすると,さいたま市の気温,富士山の噴火警戒レベル,さいたま市の降水量が確認できます.自分の取得したい場所に置き換えて,Webブラウザのアドレスバーに入力してアクセスしてみましょう. プログラムに記述する前に正しくデータが取得できるかはPCのブラウザからでも確認できます.以下のURLはクリックすると,さいたま市の気温,富士山の噴火警戒レベル,さいたま市の降水量が確認できます.自分の取得したい場所に置き換えて,Webブラウザのアドレスバーに入力してアクセスしてみましょう.
行 453: 行 141:
 http://tetsuakibaba.jp/test/fuji-chan.php?url_temp=<アメダスurl>&url_vol=<火山情報url> http://tetsuakibaba.jp/test/fuji-chan.php?url_temp=<アメダスurl>&url_vol=<火山情報url>
 </code> </code>
 +====== ESP8266に書き込むプログラム ======
 +  * 雛形:{{ :public:fujichan.zip |}}
  
------ +ファイルのダウンロード後、展フォルダ内の fujichan.ino Arduinoソフトウェアで開きます。
- +
-**ESP8266に書き込むプログラム** +
- +
-<wrap em>最終ファイル</wrap>:{{ :public:sketch_final.zip |}} +
- +
-プログラムをダウンロードしてsketch_final.inoら,fujichanClient.hというタブ選択してください. +
- +
-{{ :public:final_tab.png?nolink |}} +
 以下の,Wi-Fiネットワーク設定と,取得したい場所のアメダス・火山情報のURLの部分を,上で確認したものに書き換えます. 以下の,Wi-Fiネットワーク設定と,取得したい場所のアメダス・火山情報のURLの部分を,上で確認したものに書き換えます.
 +初期設定では、研究室内のWifiに接続し、富士山の気温を色で表示するプログラムになっています。まずは書き込み設定を
 +確認し、プログラムを書き込み、動作を確認しましょう。
  
 <code cpp> <code cpp>
行 481: 行 164:
  
 このプログラムでは,指定したSSIDとパスワードを使ってWi-Fiへ接続する''connect()''という関数と,指定したURLを使ってWebサーバからデータを更新する''update()''という関数を用意しています.''update()''では,**HTTP**というウェブでの情報のやり取りに広く使われている通信の処理を,プログラム上で記述しています. このプログラムでは,指定した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よりも時間がかかるので注意してください. プログラムが変更できたら,メニューバーの[ツール]を開いて,ボードやシリアルポートの設定が以下のようになっているか確認して,ESP8266にArduinoプログラムの書き込みを行いましょう.Arduino Unoよりも時間がかかるので注意してください.
  
-{{ :public:esp8266_upload.png?nolink&600 |}} +{{:public:スクリーンショット_2019-08-26_14.57.56.png?400|}}
- +
-アルモニタを開いて,イターネットから取得した,気温,噴火警戒レベル,降水量の情報が表示されればOKです.この情報を,先ほど作ったデータに応じた音や光の変化の処理に反映させましょう.(スピーカーのピン番号が9から16に変わっています.直接ピン番号を指定する場合は注意) +
- +
------ +
- +
-**プログラムを一つにまとめる** +
- +
-ダウンロードしたプログラム(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> <code>
-#define UPDATE_INTERVAL 60*5 // 更新間隔[秒]+#define UPDATE_INTERVAL 10 // 更新間隔[秒]
 </code> </code>
  
-手動で情報更新する場合は,シリアルモニターから「3001」を送信します. 
- 
------ 
  
-**補足:開発環境を整える**+====== 補足:開発環境の構築 ======
  
 Arduino IDEでESP8266を開発するためには,以下の作業が必要です.自宅のWi-Fiに接続するにはArduinoプログラムを書き換える必要があるので,参考にしてください. Arduino IDEでESP8266を開発するためには,以下の作業が必要です.自宅のWi-Fiに接続するにはArduinoプログラムを書き換える必要があるので,参考にしてください.
行 670: 行 186:
  
 {{ :public:esp8266_1.png?nolink |}} {{ :public:esp8266_1.png?nolink |}}
- 
 {{ :public:esp8266_2.png?nolink |}} {{ :public:esp8266_2.png?nolink |}}
  
 参考リンク:[[http://trac.switch-science.com/wiki/esp_dev_arduino_ide|Arduino IDEで開発する方法]] 参考リンク:[[http://trac.switch-science.com/wiki/esp_dev_arduino_ide|Arduino IDEで開発する方法]]
  
------+====== プログラムの基本 ====== 
 +講座の中で紹介した文法比較は下記リンクからご覧ください。 
 +  * http://tetsuakibaba.jp/ws/doku.php?id=プログラミング入門:文法比較 
 + 
 + 
 + 
 +====== 作成データ ====== 
 +** 本講座で作成した個人データを置いておきます. ** 
 +  * {{ :public:horio.zip |}} 
 +  * {{ :public:tachikawa.zip |}} 
 +  * {{ :public:tanii.zip |}} 
 +  * {{ :public:nakanami.zip |}} 
 +  * {{ :public:takahashi.zip |}}
  
 その他,気軽にメールなどで質問してください.\\ その他,気軽にメールなどで質問してください.\\
-9192hs@gmail.com(須田)\\ 
 studio@tetsuakibaba.jp(研究室) studio@tetsuakibaba.jp(研究室)
-====== 撮影 ====== 
-担当:石曽根 
-<WRAP center round info 60%> 
-<wrap em>目標</wrap>:自分で考え,作ったものを自分でプレゼンテーションする経験をすること 
-</WRAP> 
- 
-みなさんの制作物及びインタビュー動画を作成します.一人30秒程度のインタビューを行います.下記は2017年度の紹介映像になります.参考までに御覧ください. 
-<html> 
-<iframe width=100% height=480 src="https://www.youtube.com/embed/h6eGQhkYpIE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 
-</html> 
- 
-  * 担当者用補足リンク(キャプション生成用アプリケーション):http://studio.tetsuakibaba.jp/doku.php?id=public:studiocaptioncreator 
  • public/ou2019.1564987182.txt.gz
  • 最終更新: 2019/08/05 15:39
  • by baba