This website is available for multi language.

UIボタンと連携させよう

今回はプログラムの画面の中にボタンを表示して、ボタンとobnizを連携させてみましょう!
「ボタンが押したらobnizの画面に文字が出る」なんて楽しそうですね。

UIボタン

UIボタンとは、ブロックプログラムを動かしているブラウザ上に出せるボタンのことです。
この下の写真にある「ボタン」と書かれたものがそうです。

ブロックプログラムでこのようにボタンを出したり、ボタンが押された時に何をするかというプログラムができます。

今回はボタンが押されたらobnizの画面に文字を出してみます。

ボタンを作る

まずは、ボタンを表示する必要があります。

ボタンは左側の「UI」という中にあります。

「button を "text"で作る」 というものです。
これをobnizがつながってすぐのところに入れてみます。

text の部分は自分で文字を入れることができます。
今回は「ボタン」にします。

<!-- 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="Z8!^LPO*[5?q{e*57()u" x="154" y="225">
    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
    <value name="obniz_id">
      <shadow type="text" id="XmI_$os3vVOeQ~scg106">
        <field name="TEXT">OBNIZ_ID_HERE</field>
      </shadow>
    </value>
    <next>
      <block type="obniz_ui_button" id="6f,*tW`x1z8QTswYk@R0">
        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
        <value name="text">
          <shadow type="text" id="e~!4XWXTgFHN.yxr9k{H">
            <field name="TEXT">ボタン</field>
          </shadow>
        </value>
        <next>
          <block type="obniz_util_repeat" id="p0}Pg~s6Ds*c4`8cB]0`">
            <statement name="DO">
              <block type="obniz_debug_text" id="e+()Yb@2p51R(`z-n?)x">
                <value name="text">
                  <shadow type="text" id="1dT(c-7Cr9sl;{nI,z9J">
                    <field name="TEXT">つながった</field>
                  </shadow>
                </value>
              </block>
            </statement>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

これを実行するだけでobnizと繋があとに画面上にボタンが出てきます。

もしもブロック

次に、ボタンが押されたのを知って、押されたらobnizのディスプレイに文字を出してみます。
どうやるかというと、早速前のレッスンでやった「ループ」と、あたらしい「もしも」を使います。

「もしも」は「論理」の中にあるブロックです。

「もしも」もループと同じようにブロックの中にブロックを入れられます。
ただし、中に入れたブロックが実行されるのは もしも の条件がOKだったときだけです。

もしも の右側に true と書いてある部分があります。ここに条件を入れることができます。
ちなみに、条件は必ずひし形をしています。

これをobnizがつながったあとに入れてボタンを追加する部分を中に入れてみましょう。

この状態で実行してもちゃんとボタンが出ると思います。
「もしも」にある true というのは「正しい」という意味ですが、これが実行される条件となります。
つまり、trueだったからその中に入れたボタンを作るブロックが実行されてボタンが表示されたのです。

ちょっと変えてみましょう。trueのところを選んでfalseに切り替えてみます。

falseにして実行するとボタンは表示されなくなります。
falseは「正しくない」ということです。これでは、「もしも」の中のブロックが実行されないので、ボタンが表示されません。
表示されないまま次の「ずっと実行」に入ってしまい、二度と実行されないのでボタンがでなかったということです。

繰り返しを使う

ボタンが押されたらobnizの画面に文字を書くにはどうしたらいいでしょう。

繰り返し、ボタンが押されているかを「もしも」でチェックしなければいけません。そして、押されていたらobnizの画面に文字を描画するように、してみましょう。

まず、先ほどの「もしも」をはずして、ボタンは必ず作るようにします、
そしてずっと実行の中のコンソールに表示はもういらないので消してしまいます。

ずっと実行の中に「もしも」を入れます。そして、「obniz」の中にある「ディスプレイを消す」と、「Hello Worldを表示する」ブロックを「もしも」ブロックの中に新しく入れます。

あとは「もしも」をボタンが押された時にすれば完璧です。
ボタンが入っていた「UI」の中に「buttonがクリックされた」というひし形のブロックがあります。
これを「もしも」のtrueやfalseのあるひし形の部分にはめます。

ひし形やだ円のブロックをうまく入れるには、ブロックを持っている指やマウスが入れたい場所に入っているとうまくいきます。

うまくはまれば、このようなブロックになります。これで完成です!

<!-- 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="Z8!^LPO*[5?q{e*57()u" x="154" y="225">
    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
    <value name="obniz_id">
      <shadow type="text" id="XmI_$os3vVOeQ~scg106">
        <field name="TEXT">OBNIZ_ID_HERE</field>
      </shadow>
    </value>
    <next>
      <block type="obniz_ui_button" id="6f,*tW`x1z8QTswYk@R0">
        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
        <value name="text">
          <shadow type="text" id="e~!4XWXTgFHN.yxr9k{H">
            <field name="TEXT">ボタン</field>
          </shadow>
        </value>
        <next>
          <block type="obniz_util_repeat" id="p0}Pg~s6Ds*c4`8cB]0`">
            <statement name="DO">
              <block type="controls_if" id="V;yd?A05CxkfZ!NXfb=U">
                <value name="IF0">
                  <shadow type="logic_boolean" id="dTmdKibF6A^)pV:?Fy%#">
                    <field name="BOOL">TRUE</field>
                  </shadow>
                  <block type="obniz_ui_button_click" id="VG$Xvw2AMdaR]7//M1_r">
                    <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
                  </block>
                </value>
                <statement name="DO0">
                  <block type="obniz_display_clear" id="VK,b!b/7%OPN]B]^F(Nn">
                    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
                    <next>
                      <block type="obniz_display_print" id="P[Aee+@,o#:sy(SS9,b6">
                        <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
                        <value name="print_text">
                          <shadow type="text" id="{M2N08#k{.axEHsDQqoT">
                            <field name="TEXT">Hello, World!</field>
                          </shadow>
                        </value>
                      </block>
                    </next>
                  </block>
                </statement>
              </block>
            </statement>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

実行してobnizにつながると画面にボタンが出ると思います。
そして、obnizのディスプレイには何やら数字などが表示されていると思います。

画面上のボタンを押してみましょう。ボタンを押すことでobnizのディスプレイに「Hello World」と表示されるはずです。

IoTっぽいプログラムが完成しました。あなたのobnizはインターネット経由であなたのスマホ/PCから遠隔操作されています!



Next : できごとを覚えてみよう

最短で翌日に届きます

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

製品紹介

フォーラム

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

フォーラム

お問い合わせ

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

お問い合わせフォーム