本ページは首都大学東京「理数研究ラボ」講座である「アンビエントメディアIoTデバイスのデザインと開発」の補助教材ページです．あくまで補助教材ですので，ここに掲載されている内容が講座内容の全範囲を網羅しているわけではないことに注意してください．

FUJICHAN（フジチャン）は富士山頂の気温と噴火警告レベルを呈示するアンビエントIoTデバイスです．災害情報に意識を向けることは重要と知りながらも，日々の日常ではつい忘れてしまいがちです．そこで私たちは山岳信仰文化を出発点として，インターネット接続とLEDを活用してそれらの情報に自然とアクセス可能なデバイスを開発しました．

FUJICHANは常時インターネットに接続し，気象情報や噴火レベル情報をリアルタイムで取得します．富士山では噴火警告レベルが発表されており，FUJICHANではそのレベルに応じて異なる色や音を出力します．噴火警告レベルは気象庁策定に基づく5段階表示で，対応色がデバイス底面LEDで示されます．富士山頂の気温は専用に作成した気温マップにもとづき，デバイス上部のLED色にて示されます． このプロジェクトを通じ，災害情報を日常の中でより自然に取得可能な仕組みづくりを私たちは目指しています．

Fuji-chan was created as a way of visualising hazard information in an unconventional way. The device provides information visually through LEDs at the top (indicating temperature) and base (indicating volcanic eruption), with an aural alarm also for volcano eruption warnings. By communicating this information simply, virtually anyone can understand the warnings. We also hope that this device promotes the idea of an “Internet of Beautiful Things”, with IoT technology being applied to aesthetically pleasing interactive works.

本研究プロジェクトは2015年よりPaul Haimes（現在産総研所属）と一緒に実施したアンビエントな災害情報提示プロジェクトです． 日常に溶け込むIoT災害デバイスを目指しています．Paulが実施したプロジェクトは

• Taifu-rin
  • https://dl.acm.org/citation.cfm?id=3001830
  • 論文
• Fujichan
  • ウェブサイト：http://fuji.haimes.jp
  • https://dl.acm.org/citation.cfm?id=3083223
  • p246-haimes.pdf
  • Gogen2017スポンサー賞：https://gugen.jp/2017contest-result

上記，Fujichanの開発フレームワークをそのまま流用し，日本国内の気温や天候を呈示するデバイスを制作します．Fujichanの場合は，富士山頂の気温と噴火レベルでしたが，例えば

• 実家の今の天気
• 好きな場所の今の天気
• 好きな山の今の天気
• おばあちゃん家の今の気温

等をそれぞれのオブジェを模した形状でデザインして，日常の中で自然な情報呈示を実現するデバイスを制作します．情報というとテレビやラジオ，ウェブニュース，SNS等のメディアを考えると思いますが，これらは一般的にはユーザが能動的に情報取得を行うメディアとして位置づけられています．一方で，風が吹くと音がなる風鈴，風見鶏，よる冷えると凍結する水たまり，といった普段何気なく目にしているものにも，どの程度の風速で風が吹いているか，風向きはどちらか，昨晩はどの程度気温が下がったのか，といった情報が含まれており，生活する中で実は私達は様々な情報を受動的に取得してます．このような後者の性質を持つメディアをアンビエントメディアと呼び，本講座ではアンビエントメディアとIoT（Internet Of Things）を組み合わせたデバイスを制作します．

主担当：吉野，小澤

当日のFusion360によるデザインの流れ（仮)

3次元モデリングソフトウェアであるFusion360を利用して，デバイスをデザインします．作成したモデルはその日のうちに3Dプリンタで出力し，明日の組み立ての際に利用します．Fusion360はAutodesk社が提供するモデリングソフトウェアで，教育機関に所属する学生であれば無料で利用することができるので，興味のある方は事前に自宅のPC等でソフトウェアを扱ってみるとよいです．すでにウェブ上に多くの教材があります．

• フリーでも使える高機能3D CAD Fusion360とは

base_model.zip

担当：須田，馬場

フィジカルコンピューティングとは，センサやアクチュエータ（出力部品）を使って，私たちの身の回りの物理的な世界と，コンピュータ上にあるような情報の世界をつなぐことです．

今回は，Fujichanデバイスをベースに，日常の中で自然に情報提示するアンビエントメディアを制作します．LEDやスピーカーを使って，光や音といった環境の情報をコントロールします．

Arduinoは，エンジニアだけでなく，デザイナーやアーティストでも，マイクロコントローラ（小さなコンピュータ）を簡単に使えるように作られた汎用マイコンボードです．PC上でプログラムを記述し，それをUSBケーブルで接続されたボードに転送すると，ボード上のマイクロコントローラがプログラム通りに動作します．組み込みと呼ばれる，PCを利用しない小さなデバイスでは，一般的な開発手法です．

https://www.arduino.cc/

Arduinoには，性能や大きさによって様々な種類がありますが，このワークショップでは最も一般的なArduino Unoを使います．Arduino IDEは，こちらからダウンロードできます．（8/23追記）

さっそく、以下のプログラムを書き込んでみましょう．

LEDをチカチカさせるプログラム（Lチカ）

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秒)停止
}

• プログラミングに使える文字は，半角の英数字と記号です．
• プログラムは基本的に，上から順番に実行されていきます．
• setup()の{ }の中は最初に一度だけ実行され，loop()の{ }の中は繰り返し実行されます．
• //で始まる行はコメントといい，その行はそこから改行されるまで無視されます．

• int led = 13;は，ledという名前の変数に13という値を記憶させています．変数を作るときは，データの種類を表す型というものを指定する必要があり，整数が記憶できるint，小数が記憶できるfloatなどがあります．一度作った変数は，変数の名前だけで使うことができ，=をつけて値を書き換えるなどもできます．
• pinMode()やdigitalWrite()，delay()のように，後ろに( )がついているものは関数といいます．delay(1000)は「1000ミリ秒(=1秒)停止する」という命令で( )の中の数字（引数といいます）によって，実行結果が変わります．Arduinoには様々な関数が用意されており，最初はこれらを組み合わせてプログラムを書いていきます．

• Arduinoチュートリアル 基礎編
• Arduino 日本語リファレンス

電子工作

• Arduinoをはじめようキット - SWITCH-SCIENCE
• 圧電スピーカー - SWITCH-SCIENCE
• フルカラーシリアルLEDモジュール - SWITCH-SCIENCE

tone()関数を使って音を鳴らす

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);
}

フルカラーLEDモジュールを使う

http://ws.tetsuakibaba.jp/doku.php?id=arduino:出力基礎:led

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番）を赤色に設定．
  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);
}

ふわっと光らせるしくみ

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);
  }
}

#include "myNeoPixel.h" // 別ファイルを読み込む
 
myNeoPixel led = myNeoPixel(1, 4); // 制御するLEDの数1と，つないだピンの番号4を指定
 
void setup() {
  led.setup();
}
 
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);
}

Fujichanデバイスでは，気温，降水量，噴火警戒レベルの，3つのデータに応じた音や光で情報提示をします． インターネットから情報を取得する前に，パソコンから有線でデータを送って，音や光を検討します．

sketch_simplefujichandev.zip

#include "myNeoPixel.h"
#include "rain.h"
#include "temperature2Color.h"
#define UPDATE_INTERVAL 60*5 // 更新間隔[秒]
 
myNeoPixel led = myNeoPixel(1, 4);
 
float temperature   = 0; // 気温（単位は[°C]）
int   funkaLevel    = 0; // 噴火警戒レベル
float precipitation = 0; // 降水量（単位は[mm/h]）
 
void setup() {
  pinMode(speaker, OUTPUT);
  led.setup();
  // シリアル通信を開始する
  Serial.begin(115200);
  // シリアルモニターに"START"と表示
  Serial.println("START");
}
 
void loop() {
  // もしデータが届いていたら
  if ( Serial.available() > 0 ) {
    // 変数を用意して取り出す
    float val = Serial.parseFloat();
    // Setting for Temperature
    if ( val < 1000 ) {
      temperature = val;
      /* 気温が更新された時の処理．ここから */
 
 
 
      /* ここまで */
    }
    // Setting Volcano Activity Level
    else if ( val >= 1000 && val < 2000) {
      funkaLevel = val - 1000.0;
      /* 噴火警戒レべルが更新された時の処理．ここから */
 
      // 噴火警戒レベルによってブザーを鳴らす
      if(funkaLevel >= 4){ // もし噴火警戒レベルが4以上なら
        for(int i=0; i<funkaLevel; i++) { // 噴火警戒レベルの数だけ繰り返す
          tone(speaker, 1000);
          delay(400);
          noTone(speaker);
          delay(100);
        }
      }
 
      /* ここまで */
    }
    // Setting for rain[mm] sound
    else if ( 2000 <= val && val < 3000 ) {
      precipitation = val - 2000.0;
      /* 降水量が更新された時の処理．ここから */
 
 
 
      /* ここまで */
    }
    // Command for manual update
    else if ( (int)val == 3001 ) {
      //update(&temperature, &funkaLevel, &precipitation);
    }
    // Command for turn off all LEDs and Sound
    else if ( (int)val == 4001 ) {
      precipitation = 0.0;
      led.fadeOut(500);
      return;
    }
    else {
      return;
    }
 
    Serial.println();
    Serial.print("temperature: ");
    Serial.println(temperature);
    Serial.print("volcano warning level: ");
    Serial.println(funkaLevel);
    Serial.print("precipitation: ");
    Serial.println(precipitation);
  }
 
  makeRainSound(precipitation);
  delay(1);
}

このプログラムをArduinoに書き込んだら，ツールバー右にある虫眼鏡マークからシリアルモニターを開きます． 通信速度を115200に設定して，以下の数値を入力して送信すると，Arduinoプログラム上の気温，噴火警戒レベル，降水量が設定できます．

• 0 ~ ： 気温[°C]
• 1000~1005 ： 噴火警戒レベル（0~5）
• 2000~ ： 降水量[mm/h]（プログラムは-2000したを受け取る）
• 4001 ： LEDもスピーカーもOFF

データに応じた音や光の変化を書いてみましょう．

• if文は，条件に応じた処理の書き方です．( )内に書いた条件が満たされているときだけ，{ }の中を実行します．
• for文は，繰り返し処理の書き方です．( )で変化する値の初期値，繰り返しを続ける条件，値の変化のしかたの3つを設定し，条件が満たされている間{ }の中を実行します．
• Arduino 日本語リファレンス

担当：須田，馬場

ESP8266は，小型で安価なWi-Fiモジュールです．単体でインターネットに接続することができ，Arduinoのプログラムを書き込むこともできるので，IoTの制作に最適です．

ESPr® Developer（ESP-WROOM-02開発ボード） - スイッチサイエンス Arduino IDEで開発する方法

取得したい場所の2つのURLを取得する

データを取得するプログラムはすでにウェブ上に準備してあり，ESP8266からアクセスすることで，気温，噴火警戒レベル，降水量を取得することができます．ただし場所によって降水量が取得できない箇所もあるのでご注意ください．気温，降水量はtenki.jpのアメダスから，噴火レベルはtenki.jpの火山情報から取得します．ESP8266に書き込むArduinoのプログラムの中に，取得したい場所のURLを記述するので，Webブラウザから

https://tenki.jp/

にアクセスし，自分の取得したい場所を選択しましょう．例として，さいたま市のアメダスページにしてみます．次に噴火情報に関してはさいたま市に関しては特に近くに情報を持つ山がないので，デフォルトの富士山のままにしておきます（この情報は使いません）．まとめると以下の2つです．

• ＜アメダスurl＞：https://tenki.jp/amedas/3/14/43241.html
• ＜火山情報url＞：http://www.tenki.jp/bousai/volcano/detail-53.html

プログラムに書く前に正しくデータが取得できるかは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=＜アメダスurl＞&url_vol=＜火山情報url＞

ESP8266に書き込む

最終ファイルこれです！ sketch_final.zip

このプログラムの以下の部分を，自分の取得したい地域のアメダスurl，火山情報urlに書き換えます．url_tempはアメダスurl，url_volは火山情報urlです．

// 取得したい場所のアメダス・火山情報の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

ESP8266書き込み設定

シリアルモニターを開いて，インターネットから情報が取得できていればOKです． データの更新はデフォルトだと5分おきに行われます． シリアルモニターから「3001」を送ると，手動で更新できます．

プログラムを合わせて完成させる

先ほど作ったデータに応じた音や光の変化（sketch_simpleFujichanDev）を，インターネットからデータを取得するプログラム（sketch_simpleFujichan）に移動させれば，プログラムは完成です．

担当：石曽根

みなさんの制作物及びインタビュー動画を作成します．一人30秒程度のインタビューを行います．下記は2017年度の紹介映像になります．参考までに御覧ください．

• 担当者用補足リンク（キャプション生成用アプリケーション）：http://studio.tetsuakibaba.jp/doku.php?id=public:studiocaptioncreator