JavaScriptにステップアップ

ブロックプログラムは便利ですが、より高度なことがしたい場合JavaScriptを使ってプログラムするのがおすすめです。
例えば外部のDropboxやTwitterなどを使ってより深いプログラムを行ったり、
画面に3Dを描画したゲームを作るような場合です。
それらも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://obniz.io/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@2.4.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