JavaScript にステップアップ

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

obniz のブロックプログラムは実は HTML/JavaScript に変換されて実行されています。

なので、あなたの作成したブロックプログラムから作られる HTML/JavaScript をそこから自分で改造していけば、より細かな動きなどを JavaScript で引き続きプログラムすることができます。

コード書き出し

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

<!-- Block Program Example -->
<xml xmlns="http://www.w3.org/1999/xhtml">
  <variables>
    <variable type="obniz" id="X2:3=S(hsdv0mk{aavHW">obniz</variable>
    <variable type="UIButton" id="80uQ37Yg!_RM@zbm[`cF">button</variable>
    <variable type="UIButton" id="#7$4fAkr(P%;.%JaKIy`">backbutton</variable>
    <variable type="UIButton" id="akidXEU*0XQ}VT^!o6Sp">rightbutton</variable>
    <variable type="UIButton" id="KBvD*sLV+fD7(ieEkq5x">leftbutton</variable>
    <variable type="" id="hpvY$6K[tgY$$/L_8%xc">count</variable>
    <variable type="dcmotor" id="V?6USN(jVhQ,P{82]/*M">dcmotor</variable>
    <variable type="airobotkit" id="Jk=/mw~HxfZs@VDVmFYY">airobotkit</variable>
    <variable type="led" id="!MAt1@Dsy)#f.p,K@;=%">led</variable>
  </variables>
  <block type="obniz_connect" id="HDp1mlcGAj5s`;!=llnb" x="135" y="63">
    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
    <value name="obniz_id">
      <shadow type="text" id="5TP31WDvYyD%Gwf+wL1.">
        <field name="TEXT">OBNIZ_ID_HERE</field>
      </shadow>
    </value>
    <next>
      <block type="obniz_ui_button" id="+XPe3N3Ik`Q03;fDxOr?">
        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
        <value name="text">
          <shadow type="text" id="t8u?hB@Du;uk})idpxbu">
            <field name="TEXT">text</field>
          </shadow>
        </value>
        <next>
          <block type="obniz_parts_dcmotor_wired" id="KMvijnuH]p7_fixOk`:W">
            <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
            <field name="DCMotor" id="V?6USN(jVhQ,P{82]/*M" variabletype="dcmotor">dcmotor</field>
            <value name="forward">
              <shadow type="math_number" id="$VA8(eKRvU1%EKP0wjej">
                <field name="NUM">0</field>
              </shadow>
            </value>
            <value name="back">
              <shadow type="math_number" id="*m3[z@1NfAaul$w^bzS]">
                <field name="NUM">1</field>
              </shadow>
            </value>
            <next>
              <block type="obniz_util_repeat" id="(~5j/lhm/]dIH[20H`D9">
                <statement name="DO">
                  <block type="controls_if" id="/X}ba1{+Oi_`wVmUu~|X">
                    <mutation else="1"></mutation>
                    <value name="IF0">
                      <shadow type="logic_boolean" id="5m0M4WR4:2BPfC|_hGkd">
                        <field name="BOOL">TRUE</field>
                      </shadow>
                      <block type="obniz_ui_button_touch" id="Lbc.F/!m0q?A/1w/EK]4">
                        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
                      </block>
                    </value>
                    <statement name="DO0">
                      <block type="obniz_parts_dcmotor_move" id="`,EN+UJOcRGK!!x2U!/u">
                        <field name="DCMotor" id="V?6USN(jVhQ,P{82]/*M" variabletype="dcmotor">dcmotor</field>
                        <field name="direction">true</field>
                      </block>
                    </statement>
                    <statement name="ELSE">
                      <block type="obniz_parts_dcmotor_stop" id="_GU%brb,*Zi-0T+=MvEc">
                        <field name="DCMotor" id="V?6USN(jVhQ,P{82]/*M" variabletype="dcmotor">dcmotor</field>
                      </block>
                    </statement>
                  </block>
                </statement>
              </block>
            </next>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

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

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

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

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/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.7.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>




You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us