はじめに

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

首都大学東京オープンユニバーシティのウェブ：https://www.ou.tmu.ac.jp/web/course/detail/1924G008/
講座の概要
- 本講座では、研究室内で開発されたデバイスを実際に自分たちで制作することで、ハードウェア開発やプログラミングを体験することを目的としています。本研究室で開発したデバイスFUJICHAN(フジチャン)を題材にし、富士山頂の気温をリアルタイムに色で提示するデバイスを実際に制作していただきます。LED制御からネットワークデータ通信までをプログラミングを通じて学習します。技術的な詳細もかなり記載していますが，本講座ではそのすべてを丁寧に説明することはできませんが，限られた時間の中で，とにかくIoTデバイスを実際に作ってみることを重点において進めていきます．
- 実施日：2019/08/26 ～ 2019/08/27
- 時間：10:30～14:00
- 場所：日野キャンパス
- 本講座で体験すること
  - 3D CAD
  - 3Dプリンタ出力
  - プログラミング（ネットワーク，LED制御）

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）を組み合わせたデバイスを制作します．

本講座で必要な環境，部品等をまとめて置きます．

PC（講座ではmacOSを利用しますが，利用するすべてのソフトウェアはWindowsでも動作します）
3Dプリンタ
ソフトウェア（すべて無料ソフトウェアです）
1. Autodesk社製 Fusion360（3D CAD作成用）
2. Arduino（ハードウェアプログラミング用）
電子部品
1. ESPr® Developer（ピンソケット実装済）
  1. https://www.switch-science.com/catalog/2652/
2. USBケーブル
  1. https://www.switch-science.com/catalog/1035/
3. フルカラーシリアルLEDタイル基板（5個入り)
  1. https://www.switch-science.com/catalog/1344/
4. ユニバーサル基板（研究室でカットしたものを使っています）
  1. http://akizukidenshi.com/catalog/g/gP-03229/

日付	時間	内容	主担当	概要
8月26日	10:30 - 11:00	研究室の紹介	馬場	活動や研究内容を簡単に紹介します．
	11:00-11:10	導入，パソコン割当等		ワークショップで使用するコンピュータの割当を行います．
	11:10-12:00	Fusion360の基礎	石曽根	3次元モデリングソフトウェアの講習
	12:00-13:00	お昼
	13:00-14:30	CADによるデバイスデザイン	石曽根	実際に自分たちでデザインし，モデルを作成します．


8月27日	10:30 - 12:00	ESP8266を利用したプログラミング	馬場	ネットワークプログラミングと，LEDの制御を学びます
	12:00 - 13:00	お昼
	13:00 - 14:30	デバイスと基板の組み立て，仕上げ	馬場	fusion360で作成，3Dプリントしたデータと基板を組み立てます

主担当：石曽根，加藤

目標：Fusion360に関する最低限必要な操作方法と基本的な内容を学習し，今回制作するデバイスのデザインができるようになること．3Dプリンタで扱える形式のデータを作成し，3Dプリント出力を体験すること．今回は基本的に山の形状を作成し，好きな山情報を提示するものを前提として進めていく．

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

ふじちゃんの制作過程をスライドにまとめましたので参考にしてください．補助教材（googleスライド）

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

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

ベース部分のモデル

ou_samplemodel.zip

担当：馬場

目標：ネットワーク上にあるデータ（気象庁データ）を取得し，その情報をプログラム内で再構成して，光に変換して提示することで，アンビエントメディアやIoT（Internet of Things）における情報提示を体験する

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

ESP8266は，Wi-Fi通信を用いた様々な使い方があります．Arduinoにも，メニューバーの[ファイル]から開ける[スケッチ例]に，サンプルプログラムが非常に多く用意されています．Fujichanのような使い方の，基本的なプログラムは[ESP8266WiFi]の中の[WiFiClient]というサンプルを参照してください．

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/

にアクセスし，自分の取得したい場所を選択しましょう．場所によって降水量が取得できない箇所もあるのでご注意ください．例として，さいたま市のアメダスページにしてみます．次に噴火情報に関してはさいたま市は特に近くに情報を持つ山がないので，デフォルトの富士山のままにしておきます（この情報は使いません）．まとめると，数字部分だけが異なる以下の2つのようなURLが用意できていればOKです．

＜アメダスurl＞：https://tenki.jp/amedas/3/14/43241.html
＜火山情報url＞：https://tenki.jp/bousai/volcano/314/

プログラムに記述する前に正しくデータが取得できるかは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＞

雛形：fujichan.zip

ファイルのダウンロード後、展開したフォルダ内の fujichan.ino をArduinoソフトウェアで開きます。以下の，Wi-Fiネットワーク設定と，取得したい場所のアメダス・火山情報のURLの部分を，上で確認したものに書き換えます．初期設定では、研究室内のWifiに接続し、富士山の気温を色で表示するプログラムになっています。まずは書き込み設定を確認し、プログラムを書き込み、動作を確認しましょう。

// 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

このプログラムでは，指定したSSIDとパスワードを使ってWi-Fiへ接続するconnect()という関数と，指定したURLを使ってWebサーバからデータを更新するupdate()という関数を用意しています．update()では，HTTPというウェブでの情報のやり取りに広く使われている通信の処理を，プログラム上で記述しています．

プログラムが変更できたら，メニューバーの[ツール]を開いて，ボードやシリアルポートの設定が以下のようになっているか確認して，ESP8266にArduinoプログラムの書き込みを行いましょう．Arduino Unoよりも時間がかかるので注意してください．

補足：データ更新の間隔

#define UPDATE_INTERVAL 10 // 更新間隔[秒]

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を終了すると反映されます．