皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！\
前回のレッスンではアカウント登録とデバイス登録を行った後，WebAppをデバイスにインストールして温度センサを動かしたと思います．\
今回のレッスンでは，いよいよ自分でWebAppを作ってみましょう！

## アプリを作る

公式に[アプリを作る](https://obniz.com/ja/guides/browser-app/create-app)という記事があるので，それに沿ってアプリを作成していきましょう．

- ユーザーページから[アプリ開発]→[新規作成]を選びます．
  ![appCreate](./images/appCreate.png)

- 自分のデバイス(obniz1Yなど)から[空のプロジェクト]を選択し，適当な名前を付けます．
  時報なので「jihou」とでも...
  ![emptyProject](./images/emptyProject.png)

- 設定画面ではアプリにどういう動作を取り入れるか設定することが出来ます．\
  今回は時報を作るので，10分毎に動作が確認できるよう[時間で実行]に「every/10minutes」と入力します．（obnizで出来る自動実行は 144回/日 = 10分/回 が限界です．）\
  そのため，この時[デバイスがオンライン時に実行]にもチェックを入れると，obnizの電源が入ると同時にプログラムが実行されるのでアプリの動作が確認しやすいと思います．\
	プログラムを全ユーザーに公開したい場合は[公開]にチェック，限定的に公開したい場合は[URL限定リンク]から共有することが出来ます．
  ![](./images/appSetting.png)

- 設定が終わったらページ下部の[設定を更新]ボタンを押して更新し，ページ上部の[プログラムを編集]から動作させるプログラムを書きます．\
  予めテンプレートがあるので，それに今回使うパーツのライブラリのプログラムを追加します．\
	今回は時報を使うので，キットの中からブザーを使用します．\
	[パーツのページ](https://obniz.com/ja/sdk/parts/Keyestudio_Buzzer/README.md)から，ブザーを鳴らす関数を調べて時報を作りましょう．以下にプログラムの一例を載せます．\
  アプリではIDを自動で取得するので，"OBNIZ_ID_HERE"はそのままで！

```html
    <script>

      var obniz = new Obniz("OBNIZ_ID_HERE");

      // called on online
      obniz.onconnect = async function() {

      var speaker = obniz.wired("Keyestudio_Buzzer", {signal:0, vcc:1, gnd:2}); // ブザーのライブラリを使用
      ringBuzzer(speaker);

      // throw notification to app status
      Obniz.App.done({
        status: 'success',
      })

        // called while online.
        obniz.onloop = async function() {
        };
      };

      // called on offline
      obniz.onclose = async function() {
      };

      function ringBuzzer(speaker) {
        // ブザーを鳴らす
        for (var i = 0; i < 3; i++) {
          speaker.play(440)
          obniz.wait(200);
          speaker.stop();
          obniz.wait(800);
        }
        speaker.play(880)
        obniz.wait(1000);
        speaker.stop();
      }

    </script>
```

ここまで出来たら，[Ctrl]+[S]若しくは[ファイル]ボタンから[保存]を押して保存し，先ほどのアプリ設定のページに戻り[自分の持つデバイスへインストール]を選択しましょう．
![appInstallToDevice](./images/appInstallToDevice.png)

インストールしたいobnizデバイスのIDをチェックしてインストールしましょう．
![selectObnizID](./images/selectObnizID.png)

これで以上になります！
後は10分毎にプログラムが自動実行されて，時報がなるのを確かめましょう．\
上手く行っていれば，[アプリステータス]の欄に正常動作している証である緑の丸が出るはずです．\
表示が何も変わらない場合はページの更新をしてみて下さい．\
もし上手くいかなかった人は，[デバイス]からデバイスに設定したアプリの状態が確認できるので，ここに出てくるエラー等を確認してみて下さい．\
特に「30000ms Timeout」等のエラーは Obniz.App.done() を用いてアプリを終了出来ているか，変数にスペルミスがないか等確認してみて下さい．
![deviceStatus](./images/deviceStatus.png)

上手く行っていたら，今度はアプリの設定から「every/10minutes」を「every/1hour」に変更して時報の完成です！

Webアプリに関する他の説明や出来ることは，[ブラウザアプリを作る](https://obniz.com/ja/guides/browser-app/)にも載っているので，気になる人はもう少し勉強してみて下さい．

今回は発展はありません！\
もし物足りない人は，自分で拍や音符の関数を作って時報で流れるブザーの音で曲を流してみるなどどうでしょうか．\
特に往年のゲームの8bit曲など元からブザーですから綺麗に流れるのでオススメです．\
毎日定時に設定すれば自作の曲で目覚まし代わりに...なんてね．

次回は今回やったことの発展として，「アプリ定期実行で温度の値を記録してアプリステータスで確認」してみたいと思います．それでは次回をお楽しみに！