---
title: Web×IoTメイカーズチャレンジ2019-20 ハンズオン講習会２：02 開発の基礎知識（CHIRIMEN for Raspberry Pi 3）
tags: Web×IoTメイカーズチャレンジ
slideOptions:
theme: white
slideNumber: 'c/t'
center: false
transition: 'none'
keyboard: true
width: '93%'
height: '100%'
---
<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.8;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h1 {
margin: 0% -100%;
padding: 2% 100% 4% 100%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
animation: Gradient 60s ease infinite;
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
.reveal h2 {
text-align: center;
margin: -5% -50% 2% -50%;
padding: 4% 10% 1% 10%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
#### Web×IoTメイカーズチャレンジ2019-2020
# ハンズオン講習会（開発の基礎知識）CHIRIMEN for Raspberry Pi 3
<br>
<br>
#### 2019年11月2日午後〜11月3日午前
---
## 目次
- Step0. 学習の準備
- Step1. まずは“Lチカ”
- Step2. プッシュスイッチ
- Step3. 温度センサー
- Step4. モーター
- Step5. 温度センサーとモーターの連携
---
## Step0：学習の準備
### 作業用フォルダをデスクトップに作りましょう
- 説明の都合上「web-iot」という名前のフォルダを作ってください。
- この中にプログラムを入れていきます。
### プログラムを作成／実行するソフトを開きます。
- 「メニューアイコン」＞「プログラム」＞「Geany」を順にクリック
- タスクバーの中から黒いアイコン（LXTerninal）をクリック
### 以下のような状態で作業を進めていきます。
- Geany：プログラムを作成
- Chromium：教材確認＆アクチュエータプログラムを実行
- LXTerminal：センサープログラムを実行
- ファイルマネージャ：作業フォルダを見えるように
#### ウィンドウ配置はご自身が作業しやすいように工夫してください。
---
## Step1：まずは ”Lチカ"(別冊テキスト p.11-p.14)
### 配線図
- GND → 黒線 → 抵抗 → LEDの短い方の端子
- GPIO26ピン → 青線 → LEDの長いの端子
- 配線図 [使用する抵抗に注意。100Ω ~ 470Ωを使用。]
- 参照：ピン配置（https://www.qoosky.io/techs/25c2e558f3）
---
## Step1：まずは ”Lチカ"(別冊テキスト p.11-p.14)
### プログラム
Lチカプログラムを実行するWebアプリ（step1.html という名前で保存）
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>GPIO-Blink</title>
</head>
<body>
<!-- ブラウザによる動作の違いを吸収する -->
<script src="https://r.chirimen.org/polyfill.js"></script>
<!-- Lチカプログラムを読み込む -->
<script src="step1.js"></script>
</body>
</html>
```
Lチカプログラムの本体（step1.js という名前で保存）
```javascript=
main();
async function main() {
var gpioAccess = await navigator.requestGPIOAccess(); // GPIO を操作する
var port = gpioAccess.ports.get(26); // 26 番ポートを操作する
var v = 0; // ポートを出力モードに設定
await port.export("out");
for (;;) {
v = v === 0 ? 1 : 0; //ポートの出力値を0/1交互に変更
port.write(v); // LED を ON/OFF する
await sleep(1000); // 繰り返し毎に 1000ms 待機
}
}
```
---
## Step1：まずは ”Lチカ"(別冊テキスト p.11-p.14)
### プログラムの実行
- Chromium で step1.htmlを開きましょう
- チカチカしているか確認しましょう
- チカチカしていない場合は、
- 配線を確認（GPIO26ピンにつながっている？GNDにつながっている？LEDの向きは間違っていない？）
- Chromium ＞ 右上の「・・・」＞「その他のツール」＞「デベロッパーツール」＞「Console」タブをクリックしてエラーが出てないかを確認
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZgTjNd2Wtsw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
---
## Step2：プッシュスイッチ(別冊テキスト p.29-p.37)
### 配線図
- GND → 黒線 → プッシュスイッチの片側（黒線がない場合は他の色で）
- GPIO5ピン → 黄線 → プッシュスイッチの片側
- 参照：ピン配置（https://www.qoosky.io/techs/25c2e558f3）
- OSOYOOのタクトスイッチの方が押した感がいいのでそっちを使う
<img src="https://i.imgur.com/XGZFCYq.jpg" width="400">
---
## Step2：プッシュスイッチ(別冊テキスト p.29-p.37)
### プログラム
プッシュスイッチプログラムを実行するWebアプリ（step2.html という名前で保存）
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Push-Switch</title>
</head>
<body>
<!-- ブラウザによる動作の違いを吸収する -->
<script src="https://r.chirimen.org/polyfill.js"></script>
<!-- プッシュスイッチON/OFFプログラムを読み込む -->
<script src="step2.js"></script>
</body>
</html>
```
プッシュスイッチプログラムの本体（step2.js という名前で保存）
```javascript=
// noprotect (JSBin の無限ループ検知・停止機能を無効化)
main();
async function main() {
var gpioAccess = await navigator.requestGPIOAccess();
var ledPort = gpioAccess.ports.get(26); // LEDの付いているポート
await ledPort.export("out");
var switchPort = gpioAccess.ports.get(5); // タクトスイッチの付いているポート await switchPort.export("in");
switchPort.onchange = function(val) {
// スイッチはPullupで離すと1なので反転させる
ledPort.write(val === 0 ? 1 : 0); };
}
```
---
## Step2：プッシュスイッチ(別冊テキスト p.29-p.37)
### プログラムの実行
- Chromium で step2.htmlを開きましょう
- スイッチを押すとチカチカするかを確認しましょう
- チカチカしていない場合は、
- 配線を確認（プログラムで指定しているGPIOピン番号につながっている？GNDにつながっている？LEDの向きは間違っていない？穴の位置が一つずれてない？）
- Chromium ＞ 右上の「・・・」＞「その他のツール」＞「デベロッパーツール」＞「Console」タブをクリックしてエラーが出てないかを確認
---
## Step3：センサーの値を取得
### 配線図
- 配線：メス-メス
- RaspberryPi-GND → 黒線 → 温度センサGND
- RaspberryPi-SDA → 緑線 → 温度センサSDA
- RaspberryPi-SCL → 黄線 → 温度センサSCL
- RaspberryPi-33V → 黄線 → 温度センサVDD
---
## Step3：センサーの値を取得
### プログラム
センサー値取得を実行するWebアプリ（step3.html という名前で保存）
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Temp-Sensor</title>
</head>
<body>
<p id="head">TEST</p>
<!-- ブラウザによる動作の違いを吸収する -->
<script src="https://r.chirimen.org/polyfill.js"></script>
<script src="i2c-ADT7410.js"></script>
<!-- センサー値取得プログラムを読み込む -->
<script src="step3.js"></script>
</body>
</html>
```
以下から、i2c-ADT7410.jsをダウンロードし、web-iotフォルダに入れる
https://github.com/chirimen-oh/chirimen-TY51822r3/tree/master/bc/drivers
プッシュスイッチプログラムの本体（step3.js という名前で保存）
```javascript=
// noprotect (JSBin の無限ループ検知・停止機能を無効化)
main();
async function main() {
var head = document.getElementById("head");
var i2cAccess = await navigator.requestI2CAccess(); // i2cAccessを非同期で取得
var port = i2cAccess.ports.get(1); // I2C I/Fの1番ポートを取得
var adt7410 = new ADT7410(port, 0x48); // 取得したポートの0x48アドレスをADT7410ドライバで受信する
await adt7410.init();
for (;;) { // 無限ループ
var value = await adt7410.read();
head.innerHTML = value ? `${value} degree` : "Measurement failure";
await sleep(1000);
}
}
```
---
## Step3：センサーの値を取得
### プログラムの実行
- Chromium で step3.htmlを開きましょう
- 温度が表示されるか確認しましょう
- 温度が表示されない（TESTという表記のまま）場合は、
- 配線を確認（プログラムで指定しているGPIOピン番号につながっている？GNDにつながっている？LEDの向きは間違っていない？穴の位置が一つずれてない？）
- Chromium ＞ 右上の「・・・」＞「その他のツール」＞「デベロッパーツール」＞「Console」タブをクリックしてエラーが出てないかを確認
---
## Step4：モーター
### 配線図
---
## Step4：モーター
### プログラム
スイッチを入れてモーターを回すWebアプリ（step4.html という名前で保存）
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Moter</title>
</head>
<body>
<!-- ブラウザによる動作の違いを吸収する -->
<script src="https://r.chirimen.org/polyfill.js"></script>
<!-- センサー値取得プログラムを読み込む -->
<script src="step4.js"></script>
</body>
</html>
```
プッシュスイッチプログラムの本体（step4.js という名前で保存）
```javascript=
main(); // noprotect (JSBin の無限ループ検知・停止機能を無効化)
async function main() {
var gpioAccess = await navigator.requestGPIOAccess();
var gatePort = gpioAccess.ports.get(26); // FET（ゲート）のポート
await gatePort.export("out");
var switchPort = gpioAccess.ports.get(5); // タクトスイッチの付いているポート
await switchPort.export("in");
switchPort.onchange = function(val) { // スイッチはPullupで離すと1なので反転させる
gatePort.write(val === 0 ? 1 : 0);
};
}
```
---
## Step4：モーター
### プログラムの実行
- Chromium で step4.htmlを開きましょう
- モーターが回っているかを確認しましょう
- モーターが回っていない場合は、
- 配線を確認（プログラムで指定しているGPIOピン番号につながっている？GNDにつながっている？穴の位置が一つずれてない？）
- Chromium ＞ 右上の「・・・」＞「その他のツール」＞「デベロッパーツール」＞「Console」タブをクリックしてエラーが出てないかを確認
<iframe width="560" height="315" src="https://www.youtube.com/embed/VaEej9JA3QM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
---
## Step5：温度センサーとモーターの連携
### 配線図
---
## Step5：温度センサーとモーターの連携
### プログラム
Webアプリ（step5.html という名前で保存）
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Temp-Moter</title>
</head>
<body>
<p id="head">TEST</p>
<!-- ブラウザによる動作の違いを吸収する -->
<script src="https://r.chirimen.org/polyfill.js"></script>
<script src="i2c-ADT7410.js"></script>
<!-- センサー値取得プログラムを読み込む -->
<script src="step5.js"></script>
</body>
</html>
```
以下から、i2c-ADT7410.jsをダウンロードし、web-iotフォルダに入れる
https://github.com/chirimen-oh/chirimen-TY51822r3/tree/master/bc/drivers
プログラム本体（step5.js という名前で保存）
```javascript=
// noprotect (JSBin の無限ループ検知・停止機能を無効化)
main();
async function main() {
var head = document.getElementById("head");
var gpioAccess = await navigator.requestGPIOAccess();
var gatePort = gpioAccess.ports.get(26); // FET（ゲート）のポート
await gatePort.export("out");
var i2cAccess = await navigator.requestI2CAccess(); // i2cAccessを非同期で取得
var port = i2cAccess.ports.get(1); // I2C I/Fの1番ポートを取得
var adt7410 = new ADT7410(port, 0x48); // 取得したポートの0x48アドレスをADT7410ドライバで受信する
await adt7410.init();
for (;;) { // 無限ループ
var value = await adt7410.read();
head.innerHTML = value ? `${value} degree` : "Measurement failure";
if(value > 30.0){
console.log('Over 30 ℃'); //Consoleに表示
gatePort.write(1); //30.0℃を超えたら gatePortの値を1にする。(モーター作動)
}else{
console.log('30 ℃ or under'); //Consoleに表示
gatePort.write(0); //30.0℃以下なら gatePortの値を0にする。(モーター停止)
}
await sleep(1000);
}
}
```
---
## Step5：温度センサーとモーターの連携
### プログラムの実行
- Chromium で step5.htmlを開きましょう
- 温度に応じてファンが動くか確認しましょう。
- 配線を確認（プログラムで指定しているGPIOピン番号につながっている？GNDにつながっている？穴の位置が一つずれてない？）
- Chromium ＞ 右上の「・・・」＞「その他のツール」＞「デベロッパーツール」＞「Console」タブをクリックしてエラーが出てないかを確認
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIdWrviUOb4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Sign in with Wallet
Connect another wallet