JavaScriptにステップアップ

ブロックプログラムは便利ですが、より高度なことがしたい場合JavaScriptを使ってプログラムするのがおすすめです。
例えば外部のDropboxやTwitterなどを使ってより深いプログラムを行ったり、
画面に3Dを描画したゲームを作るような場合です。
それらもHTMLとJavaScriptを組み合わせて作ることができます。

obnizのブロックプログラムは実はHTML/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.15.2/iothome/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/ai/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/airobot/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/ui/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/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>

コード書き出し

タイトル