public:ou2019

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
public:ou2019 [2019/08/05 15:42]
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 |}}
  
 ====== 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>
  
行 117: 行 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ブラウザのアドレスバーに入力してアクセスしてみましょう.
行 126: 行 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>
行 154: 行 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プログラムを書き換える必要があるので,参考にしてください.
行 343: 行 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.1564987365.txt.gz
  • 最終更新: 2019/08/05 15:42
  • by baba