---
# System prepended metadata

title: Web×IoTメイカーズチャレンジ2019-20 ハンズオン講習会２：02  開発の基礎知識（CHIRIMEN for Raspberry Pi  3）
tags: [Web×IoTメイカーズチャレンジ]

---

---
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：センサープログラムを実行
- ファイルマネージャ：作業フォルダを見えるように
![](https://i.imgur.com/O2H4UgB.jpg)

#### ウィンドウ配置はご自身が作業しやすいように工夫してください。

---

## Step1：まずは ”Lチカ"(別冊テキスト p.11-p.14) 
### 配線図
- GND → 黒線 → 抵抗 → LEDの短い方の端子
- GPIO26ピン → 青線 → LEDの長いの端子
- 配線図  [使用する抵抗に注意。100Ω ~ 470Ωを使用。]
- 参照：ピン配置（https://www.qoosky.io/techs/25c2e558f3）
![](https://i.imgur.com/sL9Ifpz.png)

---

## 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）
![](https://i.imgur.com/YXf2rZw.png)

- 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
![](https://i.imgur.com/hjpB5vI.png)


---

## 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：モーター
### 配線図
![](https://i.imgur.com/VB2vNJU.png)


---

## 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：温度センサーとモーターの連携
### 配線図
![](https://i.imgur.com/VRD56RD.png)


---

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