

皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！\
ここではまずはobniz Starter kitの中でも一番動きが見えやすいパーツの「サーボモーター」というものを回してみましょう！

## サーボモーターとは？

例えばユーザーが「60度の位置に回転してね！」というと，その指定した角度まで回ってくれる便利なモーターです．\
電源を入れると『ｳｨｰﾝ』と回り続ける，皆さんがよく見るような普通のモーターとは違うということですね．

![](./images/servoHW.gif)


## 接続

まずはサーボモーターを袋から取り出しましょう．

![](./images/servoPackage.jpg)

中にはサーボモーターとサーボホーン(ホーンとも言います)というパーツが入っています．

![](./images/servoContents.jpg)


ホーンは先に何かを取り付けてその物体を動かす為のパーツですが，付けると回転や回転した方向が分かりやすいので付けてみましょう．

![](./images/servoConnection.jpg)


そうしたら，obnizと繋いでみましょう．\
サーボモーターには3つ線があり，それぞれgnd(グラウンド)，vcc(電源電圧)，signal(信号)と分かれています．

![](./images/servoPin.jpg)

今回は，以下の様に接続します．

| obnizのピン番号 | サーボモーターの線 |
| :-------------: | :----------------: |
|        0        |      gnd(茶)       |
|        1        |      vcc(赤)       |
|        2        |     signal(黃)     |


![](./images/servoPinPosition.jpg)

## プログラム

接続も終わったので，次はプログラムを書いていきましょう！\
といっても，難しく考える必要はありません．\
obniz Starter Kitの各パーツには「[ライブラリ](https://obniz.com/ja/guides/obniz-starter-kit/use-parts/)」と言うものが存在します．\
これは本来サーボモーターを動かすために必要な難しい処理が全て別の場所に記述されていて，ユーザー側はそのライブラリを用いて簡単な指示を出すだけでパーツを動作できるようになっているツールです．\
このライブラリによって，私達はサーボモーターの角度を指定するだけでサーボモーターを回すことが出来ます！\
実際に先ほどのライブラリからアクセスできる[サーボモータのライブラリ](https://obniz.com/ja/sdk/parts/ServoMotor/README.md)には，サーボモータをどう扱えるのかが様々に記載されています．\
それではそのライブラリを用いたプログラムを書いていきましょう．\
[HTML/JavaScriptでオンラインエディタを使う為の説明](https://obniz.com/ja/guides/basics-of-html-and-javascript/first-program)があるので，obnizのオンラインエディタの使い方に自信がない人や，下のプログラムを読んで「難しいな」と感じる人は覗いてみましょう．\
以下の2行以外は基本的なobnizのプログラムするときの形なので，ここに特に集中してみて下さい．\
この2行は先ほどの「ライブラリ」を使ったものなので，今後も様々なパーツを使う練習も兼ねて先ほどのページを見ながら使い方を覚えるようにしましょう．

```js
var servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });	//サーボーモーターのライブラリを指定
servo.angle(90.0);	//角度を90度に指定
```

```html
<!-- HTML Example -->
<html>

<head>
	<!-- 各種環境設定を読み込み -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
	<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>

<body>
	<script>	//ここからJavaScript
		var obniz = new Obniz("OBNIZ_ID_HERE");	//自分のobnizのIDを指定
		obniz.onconnect = async function () {	//obnizが繋がったら...
			var servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });	//サーボーモーターのライブラリを指定
			servo.angle(90.0);	//角度を90度に指定
		};
	</script>
</body>

</html>
```

このプログラムを起動してみると，サーボモーターが動くはずです！\
もしエラーが出ていないのに「動かないんだけど？！」という人は，もしかしたら元々モーターが90度の位置だったのかもしれないので，角度を90度以外に指定してからもう一度起動してみましょう．

## 発展：サーボモーターを90°↔0°に交互に動かす

ではもう少しプログラムに手を加えて，サーボモーターが0度と90度を交互に動くようにしてみましょう．\
プログラムをずっと動くようにするには，[ループを使う](https://obniz.com/ja/guides/basics-of-html-and-javascript/how-to-loop)必要があります．
このドキュメントの中から，今回はプログラムを止めたらサーボーモーターも止まるように，obniz.repeat()という種類のループを使うことにしましょう．

```html
<!-- HTML Example -->
<html>

<head>
	<!-- 各種環境設定を読み込み -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
	<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>

<body>

	<div id="obniz-debug"></div>	<!-- エラーが起きたらメッセージが出るように -->

<script>	//ここからJavaScript
		var obniz = new Obniz("OBNIZ_ID_HERE");	//自分のobnizのIDを指定

		obniz.onconnect = async function () {	//obnizが繋がったら...
			var servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });	//サーボーモーターのライブラリを指定
			var angle = 0;	//まずは0度に

			obniz.repeat(async function () {	//1秒ごとにループさせる
				servo.angle(angle);	//サーボーモーターを(angle)度に回す
				if (angle == 0) {	//0度なら
					angle = 90;	//90度に
				} else {	//0度じゃなかったら
					angle = 0;	//0度に
				}
			}, 1000);	//ループ間隔を1000ミリ秒 = 1秒に設定

		};
	</script>
</body>
</html>
```

このページの最初に見たように，サーボーモーターが手を振って"Hello World!"を返してくれましたか？\
これがブラウザからものを動かすobnizの世界です．\
次のレッスンでは，動くようになったサーボーモーターとブラウザを使って，HTML/JavaScriptならではの色んなことをしてみましょう！
