JavaScriptに変換しよう

ブロックプログラムでは用意されていないようなより高度なことがしたい場合、JavaScriptで高度にプログラムすることができます。

obnizのブロックプログラムはJavaScriptとそれを動かすためのHTMLという形に書き出すことができます。
この機能を使えば、ブロックである程度まで作ったプログラムを途中からJavaScriptに変換してより高度にしていくことが簡単にできます。

今回はコード変換のやり方について紹介します。

このレッスンはブロックプログラムにある JavaScriptにステップアップと同じものです。

コード書き出し

例えばこのブロックプログラムを作って、そのコードを見てみる場合、

ブロックプログラムエディタの左上のファイル名をクリックし、
「コードを見る」を押すことでHTMLとjavascriptを確認できます。

そうしますと
このようなHTMLがでてきます。

ブロックエディタのバージョンによりプログラムは多少違います。

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://unpkg.com/obniz@3.3.0/obniz.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/iothome/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/ai/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/airobot/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/ui/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/airobot/opencv3.4/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.5"> </script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@0.2.2"> </script>
</head>
<body>
Block Program running...
<div id="OBNIZ_OUTPUT"></div><br/>

<script>
(async function(){
  var obniz, button, dcmotor;


  obniz = new Obniz('8506-3053');
  await obniz.connectWait();
  button = new ObnizUI.Button('text');
  dcmotor = obniz.wired("DCMotor",{"forward":0, "back":1});
  while (true) {
  await ObnizUI.Util.wait(0);
    if (button.isTouching()) {
      dcmotor.move(true);
    } else {
      dcmotor.stop();
    }
  }

})();
</script>
</body>
</html>

コード書き出し

タイトル