This website is available for multi language.

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>




最短で翌日に届きます

obniz BoardはAmazonや公式ストアから購入できます。最短で当日出荷いたします。
取り扱い店舗はこちらから。

製品紹介

フォーラム

obnizフォーラムでは、obnizユーザー同士で意見交換することができます。
疑問・質問もお気軽にどうぞ。

フォーラム

お問い合わせ

製品・サービスに関するお問い合わせや、導入・開発のご相談など、お気軽にお問い合わせください。

お問い合わせフォーム