明星大学で行ったワークショップのスライド

1. リアルの色でぬり絵
jam2019 ep.3

2. 自己紹介
名前：小野 隆之
職種：フルスタックエンジニア
(なんでも屋)
職歴：ゲーム会社、大学の指導員、フリーランス
IoT/Web/ゲーム/キャンプ/自転車/JS/
ラーメン/ブレスト/インタラクティブ
tkyk.net

3. var firebaseConfig = {
apiKey: "AIzaSyCUv38vimWgq5rykolsh8xGw5taGBmhlAs",
authDomain: "touch-draw-29c41.firebaseapp.com",
databaseURL: "https://touch-draw-29c41.firebaseio.com",
projectId: "touch-draw-29c41",
storageBucket: "touch-draw-29c41.appspot.com",
messagingSenderId: "590249102024",
appId: "1:590249102024:web:2b29ac635d3a310c6c73fd",
measurementId: "G-JXFZFBK5F8"
};

4. 明星大学OpenLabとは？
● 不定期イベント
○ jam(短期ワークショップシリーズ )
○ 公開講座
○ 勉強会
○ ハッカソン、アイディアソン
● 展示カフェ butter
● 定期的開室 milk
● プロジェクト potage 来春からHP開設予定
大学HPからのリンクが貼
られる予定

5. リアルの色でぬり絵「タッチ&ドロー」
2019年12/8 「FESTA」にて発表、展示

6. protout studio
プロトアウトスタジオ
プロトタイプを社会とつなげる

7. 今日の内容
11:00〜 ちょっと説明
11:30〜 すぐに体験 自分のPCでwebアプリを実行
12:00〜 お昼
13:00〜 自分だけのデータベースを作ろう firebase登録からwebアプリ編集、hosting
14:30〜 マイコンを使おう Arduinoでm5stickCに書き込み体験、カラーセンサー
15:30〜 ペンタブレットを作ろう 導電シートで作る

8. 持って帰ってもらうもの
1. WebアプリとArduinoなどのソースコード(1221配布)
2. それぞれの手順の資料
3. 自作タッチペン
習得、体験できるもの
1. マイコンにプログラム書き込み体験
2. Webの基礎知識
3. データベースの基礎知識
4. 自分だけのデータベース
5. Webアプリ
自宅でもできるよう
に！
1日でフルスタックエ
ンジニアに!

9. リアルの色でぬり絵ができるとどういうことがいいのか

10. 今日はコンピュータを触ります
● データベース（Firebase）
● webアプリ（p5js）

11. Webを使った通信
Webサイト閲覧
URL
例：続きを読む
Twitterのタイムライン
Gmail、Gmap
web
サイト
{req:1} {res:200}

12. 今から体験する構成図
色情報 色情報

13. 使ってみよう
1. PCにログイン（パスワードはホワイトボードに）
2. Atomを立ち上げる
3. 「File」から「Open」
4. デスクトップの「1221配布」内の「web」を選択、開く
5. 「Packages」から「atom-live-server」の「Start server」をクリック
6. ブラウザが無事立ち上がる
別紙により写真付きで解説

14. 少し編集してみよう
● 線の太さを変える
71行目： ellipse(mouseX, mouseY, 30, 30);
→ ellipse(mouseX, mouseY, 60, 60);
● 線に透明度をつける
57行目：col.setAlpha(255); → col.setAlpha(20);
● ペンを四角に
● マウスの動く速度が早ければ太く
let d = dist(pmouseX, pmouseY, mouseX, mouseY);
rect(mouseX, mouseY, d, d);

16. Makerムーブメント
● Maker Faire Tokyo 2018
● FabCafe
● Arduino
● 深センのものづくり
M5StickC

17. Arduinoにプログラムを書き込み
1. デスクトップにある 1221配布 / Arduino / colorFB / colorFB.ino をダブルクリック
センサーによってはcolorFBじゃないほう
2. PCとマイコンを繋げる
3. 上の「ツール」「シリアルポート」内を選択
4. IDE内の右矢印アイコンをクリック
別紙の内容は自宅用

18. 配線
M5StickC カラーセンサー
3V3 → 3V3
GND → GND
G0 → SCL
G26 → SDA
(G36 → LED)

19. ダブルクリック
選択、USBが含ま
れる名前
クリック

21. データベースとは？
色情報 色情報
色情報

22. どんなことに使われているか

23. Firebaseとは？
● Google製のクラウドサービス
● そのうちの一つにデータベースがある
● 基本無料
別紙通りに登録
してみよう

24. M5StickCの通信先を自分のデータベースに
Arduino内の10,11行目
を書き換える

25. Webアプリの通信先を自分のデータベースに
index.html内の
// firebaseのAPIキー
var firebaseConfig = {
apiKey: "AIzaSyD5H--oEJ2bC12KGQx0dFlHHVcyJATsJO8",
authDomain: "mytest-fffd1.firebaseapp.com",
databaseURL: "https://mytest-fffd1.firebaseio.com",
projectId: "mytest-fffd1",
storageBucket: "mytest-fffd1.appspot.com",
messagingSenderId: "539585594918",
appId: "1:539585594918:web:947b17626650f269"
};
この部分を書き換える

27. 公開
色情報 色情報

28. Hostingで公開
1. npm i firebase-tools
2. npx firebase login
3. npx firebase init
4. npx firebase deploy