Ver.0.1​​ユカイ工学株式会社

ハブラシロボットワークブック目次
基本①：はじめてのロボットづくり-キットについて-内容物-ハブラシロボットの組み立て-動かしてみよう（レースをしてみよう）-ぐるぐるまわるようにしてみよう(ブラシの毛を逆にする、糸で引っ張る)-ロボットのオリジナルデザインをつくってみよう
基本②：ハブラシロボットの操縦-スマホと接続するため，別売り部品（konashi/Koshian）を用意しよう-konashi/Koshianをハブラシロボットにつなげよう-iOSアプリをダウンロードしよう-iOSデバイスとハブラシロボットの接続-[ハブラシロボットリモコン]で操縦してみよう-[ハブラシロボットやじるしリモコン]で操縦してみよう-[ハブラシロボットかたむきリモコン]を使ってiphoneの傾きで操作してみよう-トラックコースでレースをしよう-[ハブラシロボットフルフルコントローラ]をつかって，直線コースでレースしよう
基本③：はじめてのプログラミング(ボタンを組み合わせて動きをコントロール)-[ハブラシロボットプログラム]を使って、ロボットの動きの命令を作ろう-障害物競争をしよう．（スタートからゴールにたどり着くプログラムを作ろう）-チキンレースをしよう．（机の端ギリギリで止まれるかレース）-ペンを持たせてお絵かきしてみよう．（丸、四角等の図形や文字を描いてみよう）
応用①：センサをロボットに取り付けよう-GROVEセンサ、​​GROVE拡張基板について-ハブラシロボットとGROVE拡張基板の接続-ライントレーサ-光追尾ロボット
応用②：ハブラシロボット制御プログラムを書いてみよう（コーディング）-jsdo.itとは？
-javascript,​​html,​​CSSを用いたハブラシロボットプログラムのHello​​World-既存のコードをフォークして拡張してみよう．

2

更新履歴
日付

内容

2017/11/27

Ver.0.1​​​WebサイトにてPDF公開

3

基本①：はじめてのロボットづくり
キットの概要スペースシャトル型の基板に付属のハブラシを取り付け、電池を入れるとまっすぐ走ります．あえて車輪を使わず、モーターからハブラシに伝わる振動によりシャトルが走るというユニークなロボットです。iPhone/iPadのための、フィジカル・コンピューティングツール
キット「konashi/Koshian」（別売）をつなぐと、スマホアプリから操作をしながらロボットを動かすことができます．
小学生（低学年）には、初めてのロボット作り体験とデコレーションでオリジナルロボッ
トに．小学生（中学年）～中学生には、スマホ操作ができる「konashi/Koshian」を使ってモーターの動きをコントロールするなど、プログラミングの初歩体験におすすめです．

内容物
・ハブラシロボット基板x1・ブラシx2・単4電池x2
・両面テープx4

ハブラシロボットの組み立て
基板に両面テープを取り付け，ブラシを固定します．

4単4電池を2個，向きに注意して電池ボックスに入れます．

スイッチを”standalone”にするとロボットがまっすぐ進みます．

5まずは，動かしてみよう！
スイッチをstandaloneにしてまっすぐ走らせて，直線コースでレースをしてみよう．

方法・マスキングテープなどで，机にスタートとゴールを作ります・スイッチを”standalone”に倒して，モータをふるわせた状態にします．
・下の写真のように，スタートゾーンにロボットを設置して，手で抑えます．スタートの合図とともに，手を離してどのロボットが一番先にゴールにたどり着くかを競います．
・途中に，障害物をおいておくと難易度が上がります．
※まっすぐ走らない場合は，ブラシをつける位置を調整またはブラシを左右で入れ替えてみましょう．

6

ぐるぐるまわるようにしてみよう
ロボットをその場でぐるぐるまわるようにしてみよう．

方法1
・ブラシの毛は傾いています．その傾きの向きを右と左で逆さまに取り付けます．
・スイッチを”standalone”にします．
・ロボットがその場でぐるぐる回転します．

方法2・ロボットにひもを取り付け，テーブルに固定します．
・スイッチを”standalone”にします．
・ひもが固定された場所を中心にしてロボットは円を描きながらぐるぐるまわります．

7

ロボットのオリジナルデザインをつくってみよう
ロボットのデザインを考えて，自分だけのオリジナルロボットをつくろう．

方法
・以下のものを用意します．
-ハブラシロボットキット
-フェルト
-色紙
-マスキングテープ-両面テープ-マッキー-はさみ・フェルトにペンで下書きをしてハサミでカットします．
・両面テープを使って，切った部材を貼り付けていきデザインしていきます．
・下に代表的なデザインの例を３つ示します．それぞれ，作り方を示します．

8

タイプA：好きなキャラクタの顔をのせる

タイプB：スペースシャトルをかっこよく！

タイプC：好きな動物やキャラクタを立体的に作ってロボットにのせる！

タイプA：好きなキャラクタの顔をのせる（難易度：低）・フェルトに好きなキャラクターの絵を書きます．
・その絵の外側をハサミで切り取ります．
・両面テープをフェルトにつけて，ハブラシロボット基板に取り付けます．電池ボックスのフチに両面テープを取り付けると，電池が取り外せるので便利です．

9タイプB：スペースシャトルをかっこよく！（難易度：中）・エンジンから出る炎，ロケット本体をかっこよくするパーツのかたちをフェルトに下書きします．
・ハサミで，パーツを切り抜きます．
・両面テープをフェルトにつけて，ハブラシロボット基板に取り付けていきます．

10

タイプC：好きな動物やキャラクタを立体的に作ってロボットにのせる！（難易度：高）・作るパーツは，大きく分けて顔・胴体・しっぽの３つです．
・下の写真のようにフェルトを切り抜いて，パーツを作っていきます．
・パーツが揃ったら，組み立てていきます．まず，胴体を左右の電池ボックスに下の図のように貼り付けていきます．
・続いて，顔を胴体に図のように両面テープを貼り付けて取り付けていきます．
・最後に尻尾を図のように胴体に貼り付けます．
・マッキーや追加のフェルトを使って，デザインを整えていきます．

​​​​​​11​​​​​​​​​​​​​​​​​

12基本②：ハブラシロボットの操縦

スマホと接続するため，別売り部品（konashi/Koshian）を用意しよう
konashi/Koshianは，iPhone/iPadのための、フィジカル・コンピューティングツールキッ
トです．ハブラシロボットにkonashiまたはKoshianをつなぐとロボットはBluetoothを使ってスマホと通信できるようになります．スマホからリモコン操縦してレースをしたり，動きをプログラムしたりすることができます．

価格・konashi​​
希望小売価格：¥3980
・Koshian​​
希望小売価格：¥980

販売先,​​詳細情報
http://konashi.ux-xu.com/

konashi/Koshianをハブラシロボットにつなげよう
ハブラシロボットにkonashiやKoshianをつなげましょう．

konashiの取り付け・取り外し方法
・電池を外して抜き差ししてください．
・基板の裏側のピンヘッダに，ボタン電池ホルダの絵を参考にして向きに注意して取り付けてください．

13

・ピンを曲げないようにまっすぐ抜き差ししてください．

Koshianの取り付け方法
・電池を外して抜き差ししてください．
・取り付けの際は、双方のコネクタを軽く合わせ，コネクタの真上から少しずつ押し込んで取り付けます．

Koshianの取り外し方法
・図のように長編を視点として，テコのように他方の長辺を持ち上げて慎重に取り外します・誤ってモジュールの短編を持ち上げるとコネクタを破損する危険があります．

14

iOSアプリをダウンロードしよう
AppStoreから”konashi.js”をダウンロードします．

使い方・アプリを起動して，“User”から”YUKAI”をタップします．
・ハブラシロボットを動かすサンプルが表示されます．実行したいサンプルをタップして，左上の再生ボタンをクリックします．

15

iOSデバイスとハブラシロボットの接続ハブラシロボットとスマートフォンを接続します．

方法・サンプルプログラムを実行すると表示される”konashiとつなぐ”ボタンをタップします．
・1秒ほどすると，スマートフォン周辺にあるBluetooth機器が表示されます．
・”konashi2-f0****”と表示されるのがkonashi/Koshianです．
・下4桁の文字が，konashi/Koshianに表示されているので，自分のハブラシロボットに接続したkonashi/Koshianをタップします．
・さがしているという画面の後，正しく接続された場合は，操作画面が表示されます．

16

[ハブラシロボットリモコン]で操縦してみよう
リモコンを使ってハブラシロボットを操作します．

方法
・[ハブラシロボットリモコン]を起動して，ハブラシロボットと接続します．
・スライドバーが2本の画面が表示されます．
・ひだりと書いてあるバーを使うと，ハブラシロボットの左側のモータの強さを調整できます．
・みぎと書いてあるバーを使うと，ハブラシロボットの右側のモータの強さを調整できます
・強さは0から100まで調整できます．
・ひだりを100，みぎを0にするとロボットは右に曲がります．
・ひだりを0，みぎを100にするとロボットは左に曲がります．
・ひだりを100，みぎを100にするとロボットは前に進みます．
・ハブラシロボットは，ブラシの個体差によってまっすぐ進まないことがあります．スライドバーを使って，ひだりとみぎの強さを調整してまっすぐ進むようにしてみましょう．

アプリUI

アプリUI

17

[ハブラシロボットやじるしリモコン]で操縦してみよう
方向を示す矢印ボタンでロボットを操縦してみよう．

方法
・[ハブラシロボットやじるしリモコン]を起動してハブラシロボットと接続します．
・ロボットの画像の上に表示されている緑色の矢印ボタンについて，進みたい方向のボタンをタップしましょう．
・ロボットはタップした矢印の方向に進みます．
・前述のリモコンのようにモータの強さは設定できませんが，より直感的に操縦ができます

アプリUI

アプリUI

18

[ハブラシロボットかたむきリモコン]を使ってiPhoneの傾きで操作してみよう
スマートフォンの傾きを利用して，ロボットを操作します．

方法
・[ハブラシロボットかたむきリモコン]を起動してハブラシロボットと接続します．
・スマートフォンを図のように縦に持つと，ハブラシロボットは停止状態となります．
・スマートフォンをロボットの進ませたい方向へ傾けるとその方向へロボットが進みます．
・感覚的な操作でロボットが動きます．やってみましょう．

アプリUI

アプリUI

19

トラックコースでレースをしよう
3種類のロボットのリモコンを使って，操縦の仕方を覚えたので複数台のロボットでレースをしてみましょう．

方法
・まず，身近な材料を用いてレース用のコースを作成します．直線のコースまたはトラックのようなコーナーがある周回コースを作ります．
・スタート位置とゴール位置の目印を作ります．
・3種類の操作方法（スライドバー，ボタン，スマートフォンの傾き）のうち，自分の操作しやすい方法を選んで，サンプルプログラムを起動します．
・だれが一番早いか，試合をしてみましょう．

20

[ハブラシロボットフルフルコントローラ]を使って直線コースでレースしよう
スマートフォンをフルフル振ってロボットを動かして，スピード勝負をしましょう．

方法・スタート位置とゴール位置の目印を作ります．
・[ハブラシロボットフルフルコントローラ]を起動して，ハブラシロボットと接続します．
・スマートフォンを手で持って，下のアプリ内の図のように上下に振ってみましょう．
・振った強さによってロボットが前に進む速さが決まります．
・なるべく，一定の速度で振るとロボットは安定します．
・直線のコースでだれが一番早いか，試合をしてみましょう．

​​​​​​​​アプリUI

アプリUI

21

基本③：はじめてのプログラミング[ハブラシロボットプログラム]を使って、ロボットの動きの命令を作ろう
ハブラシロボットの前進・右旋回・左旋回の動作を組み合わせて，動きの命令を作り，自動で目的の場所までロボットを誘導してみよう．

方法
・[ハブラシロボットプログラム]を起動して，ハブラシロボットと接続します．
・下のような画面が表示されます．

22

・左上の”くりあー”ボタンは，命令取り消しボタンです．
・右上の”すたーと”ボタンは，命令実行/停止ボタンです．
・真ん中の段の矢印が命令ボタンで，”まえ”，”みぎ”，”ひだり”の3種類の命令があります．
・矢印ボタンをタップすると，その下の段に命令が記録されていきます．
・実行するとその命令の順番どおりに実行されていきます．
・下の段の”まちじかんせってい[びょう]”では1つの命令の実行時間を決めます．
・下の段の”つよさ”では，左右のモータのつよさを調整します．ロボットが右側に曲がってしまうときは，左が強すぎるので左側の数字が小さくなるようにします．
・反対に，ロボットが左側に曲がってしまうときは，右が強すぎるので右側の数字が小さくなるようにします．
・下のように，命令を組み合わせて実行してみましょう．

23

障害物競争をしよう（スタートからゴールにたどり着くプログラムを作ろう）
スタートとゴールの位置を決めて，プログラムを作ってレースをしよう．

方法
・身近なものを利用してスタートとゴール位置を決めます．例では，マスキングテープを使ってコースを作ります．
・スタートとゴールの間にコーナーを設けると難易度が上がります．
・[ハブラシロボットプログラム]を起動して，ハブラシロボットと接続します．
・まずは，予想でロボットがどんな動きをするかを考えてプログラムを作ります．
・次に実際のコースで動かしてみます．
・ロボットが右に行き過ぎるようであれば右コマンドを減らします．逆であれば，コマンドを増やします．
・このように工夫してゴールにたどり着けるプログラムを作成します．
・作成が終わったら，複数台のロボットでどちらが早くゴールにたどり着けるか勝負をします．

コースの例

24

命令の例1​​​​​​​​​​命令の例2

チキンレースをしよう（机の端ギリギリで止まれるかレース）
机の端でギリギリ止まれるかチキンレースをしよう．

方法
・机の端っこを使って遊びます．
・[ハブラシロボットプログラム]を起動して，ハブラシロボットと接続します．
・スタート位置を決めます．そこから，机の端にぴったりたどり着くプログラムを作成します．(例：前前前)
・実行してみましょう．ロボットの動きをみて改良をして，机の端にギリギリに止まれるプ
ログラムを作りましょう．

25

ペンを持たせてお絵かきしてみよう（図形や文字を描いてみよう）
ハブラシロボットにペンを持たせて，お絵かきをしてみよう．

方法・ハブラシロボットに下の写真のようにペンを強力両面テープを使って固定します．
・机に紙を敷いて，絵を書けるスペースを作ります．
・[ハブラシロボットプログラム]を起動して，ハブラシロボットと接続します．
・動きの命令をプログラムして実行してお絵かきをしよう．
・みぎやひだりの命令を続けると円を描きます．
・まえ，みぎ，ひだりをうまく組み合わせていろいろな図形を描いてみましょう．
・一筆書きで書けるものであればなんでも作れます．
・自分の好きなものを描いてみよう．

26

応用①：センサをロボットに取り付けようGROVEセンサ、​​GROVE拡張基板について
GROVEセンサ
Grove​​は、Seeed​​Studio​​社が提供する電子工作初心者向けのモジュールキットです．モ
ジュール化されたセンサやアクチュエータなどを、共通のコネクタを用いて基板に接続することによって、ブロックを組み立てるような感覚で、ブレッドボードよりも簡単に回路を作成することができます．Grove​​モジュールの種類は、スイッチ、LED​​などの基本的な電子部品から、液晶ディスプレイ、MP3​​プレイヤなどの高度なモジュールまで、幅広い用途に対応したキットが提供されています．
http://wiki.seeed.cc/Grove_System/GROVE拡張基板
konashi​​Grove​​拡張基板は、フィジカル・コンピューティング・ツールキット​​konashi​​の入出力を、Seeed​​Studio​​社の​​Grove​​モジュールとつなげるための、拡張インタフェース基板です．

27

ハブラシロボットとGROVE拡張ボードの接続
konashi​​Grove拡張基板とハブラシロボットを用意して，接続しましょう．

方法・電池を取り外して抜き差ししてください．
・基板の表側のピンソケットのピン番号を参考にして向きに注意してソケットの奥まで差し込むようにして取り付けてください．
・ピンを曲げないようにまっすぐ抜き差ししてください．

28

ライントレーサ
ハブラシロボットキットに赤外線センサを取り付けて，黒いラインをトレースするライン
トレーサを作成しよう．

用意するもの・ハブラシロボットキット
・konashiまたはKoshian・konashi​​
GROVE拡張ボード
・GROVE赤外線反射センサ
・両面テープ（厚手強力タイプ）
・黒のビニールテープ
・はさみ・スマートフォン（iOS）

ロボットの設定
・ハブラシロボットキットに，konashiまたはKoshianを接続し，さらにGROVE拡張ボードを接続した状態にします．
・GROVE赤外線反射センサを用意します．

※画像出典：https://www.switch-science.com/catalog/3339/

・GROVE赤外線反射センサをハブラシロボットに取り付けます．両面テープ（厚手強力タイプ）をハブラシロボットの基板の先頭に取り付け，センサを写真のように固定します．
※床とセンサの距離が3~5mmくらいになるように調整します．

29

・GROVE赤外線センサをkonashi​​GROVE拡張ボードのPIO4端子に接続します．

コースの作成・コースを用意します．写真のように白いボードの上に，黒いビニールテープ等でラインを作ります．ラインの幅は10mm以上が推奨です．

30

センサの調整
・赤外線反射センサの感度を調整して，床の”しろ”と”くろ”とセンサの出力（基板上のLEDON/OFF）を対応させます
・写真の矢印に示すボリュームをプラスドライバーを使って調整します．
・つまみを回転させることでボリュームの抵抗値が変化します．
・白い床の上にセンサがあるときにLEDが点灯，黒い床の上にセンサがあるときにLEDが消えるようにボリュームを回して調整します．

31

センサが”しろ”を検知したときセンサが”くろ”を検知したとき※画像出典：https://www.switch-science.com/catalog/3339/

やってみよう・konashi.jsアプリを起動して，”User”から”YUKAI”をタップ．ハブラシロボット​​ライントレースを選択します．

・konashiとつなぐと，下のような画面が表示されます．
・”せんさ：”が示すのは，PIO4に接続した赤外線反射センサが”しろ”か”くろ”かを表示します．
・”ひだり”，”みぎ”のON/OFFが示すのが，ハブラシロボットの左右のモータのオンオフを示します．
・スタートボタンを押すと，ライントレースが始まります．
32

・スタートボタンを押すと，まずハブラシロボットの右のモータをONにして左に曲がって黒い線を探しにいきます．
・センサの反応が”くろ”になると，左のモータがON，右のモータがOFFとなり，右側に曲がります．
・ハブラシロボットが右に曲がると，センサの反応が”しろ”になるため，再び右モータがONで左モータがOFFになります．
・これを繰り返すことで，ロボットは黒い線を追いかけて進んでいきます．
・やってみましょう．

33

34

光追尾ロボット
光センサを使って暗闇のなかで光を追いかけるロボットを作ってみよう．

用意するもの・ハブラシロボットキット
・konashiまたはKoshian・konashi​​
GROVE拡張ボード
・GROVE​​-​​光センサ x2
・両面テープ（厚手強力タイプ）
・スマートフォン（iOS）

ロボットの設定
・ハブラシロボットキットに，konashiまたはKoshianを接続し，さらにGROVE拡張ボードを接続した状態にします．
・GROVE​​-​​光センサを2つ用意します．

画像出典：​https://www.seeedstudio.com/Grove-Light-Sensor-v1.2-p-2727.html
・GROVE​​-​​光センサをkonashi​​GROVE拡張ボードの​A0,​​A1​端子に接続します．

35

・GROVE-光センサをロボットへ固定していきます．A0へ接続したセンサをロボットを上から見たとき左側へ，A1へ接続したセンサを右側へ固定します．
・固定は，両面テープを使ってロボットに取り付けます．センサが外側を向くようにしましょう．

36

やってみよう・konashi.jsアプリを起動して，”User”から”YUKAI”をタップ．ハブラシロボット​​ひかりついびを選択します．

・konashiとつなぐと，下のような画面が表示されます．

37

・上の”せんさ0：”が示すのは，A0へ接続したセンサの明るさを示し，”せんさ1:”が示すのがA1へ接続したセンサの明るさを示します．
・明るい部屋では，おおよそ800-1000の値となります．
・暗い部屋では，0-100程度の値となります．
・指でセンサを覆い隠すと，センサの値が低くなります．やってみよう．
・つぎに部屋を暗くして，ハブラシロボットをセットします．
・スタートボタンを押すと，ひかりついびが始まります．
・スマートフォンのライトや懐中電灯などをハブラシロボットに向けて当ててみましょう．
その光の方向にロボットがついていきます．やってみよう．

38

39

応用②：ハブラシロボット制御プログラムを書いてみよう（コーディング）
jsdo.itとは？
ハブラシロボットを制御するプログラムを実際にかいてみましょう．ハブラシロボットは，konashiを使ってコントロールされています．konashiを制御するプログラムは，”jsdo.it”というWeb上の環境でjavascript,​​html,​​cssを用いて作ることができます．Web環境で作ったプ
ログラムをkonashi.jsアプリで実行することで，ハブラシロボットをコントロールします．
http://jsdo.it/javascript,​​html,​​CSSを用いたHello​​World
それでは実際に自分でハブラシロボットを動かすコードを書いていきます．

アカウントの作成
jsdo.it上でコードを作成するためには，アカウントが必要です．以下のWebサービスのアカ
ウントと紐付けることができます．アカウントを作成しましょう．

40

新たなプログラムをつくろう
・下の写真に示すStart​​codingをクリックすると，オンラインエディターが立ち上がります・”javascript”,​​“HTML”,​​“CSS”のタブに分かれています．

41

・HTMLでは，konashi.jsアプリで実行する際のページのレイアウトや文字，画像を記述します．
・javascriptでは，ハブラシロボットのモータを動かす制御やセンサからのデータをとってくる計算など動的なコードを記述します．
・CSSは，HTMLのデザイン（文字サイズやフォント）を記述します．

ハブラシロボットプログラムの基本
ハブラシロボットを動かすプログラムを作るには，３つのステップが必要です．

1.ライブラリを読み込む．
これは，HTMLに記述します．​konashi-bridege.min.jsというライブラリを読み込みます．
<script​​
src="​http://konashi.ux-xu.com/kjs/konashi-bridge.min.js​"></script>
2.konashiとスマートフォンをBluetooth接続する．
これは，javascript内に下記のように記述します．するとプログラム起動時にBluetooth一覧を取得し，タップすることでkonashiとの接続処理に入ります．
k.find();3.接続後に行う動作を記述する
javascript内に下記のように記述します．

42

k.ready(function(){​​​​​//接続後の処理をかく．
​​​​​$("#helloWorld").text("Ready!");});ハブラシロボットを進んだり止めたりしよう
以下のようなコードを書いてみましょう．
-javascript//Hello​​worldと表示します．
$("#helloWorld").text("Hello,​​World!");//konashiと接続する
k.find();//konashiと接続するとここにくる
k.ready(function(){​​​​​//接続後の処理をかく．
​​​​​//Ready!と表示​​​​​$("#helloWorld").text("Ready!");​​​​​//​​まずは，I/Oの設定をする．ハブラシロボットの振動モータを制御するピンを出力にする．
​​​​​k.pinMode(k.PIO0,​​k.OUTPUT);​​​​​k.pinMode(k.PIO1,​​k.OUTPUT);​​​​​var​​toggle​​=​​false;​​​​​intervalId​​=​​window.setInterval(function(){​​​​​​​​​if(toggle){​​​​​​​​​​​​​//​​ハブラシロボットを前進させる​​​​​​​​​​​​​k.digitalWrite(k.PIO0,​​k.HIGH);​​​​​​​​​​​​​k.digitalWrite(k.PIO1,​​k.HIGH);​​​​​​​​​}​​​​​​​​​else{​​​​​​​​​​​​​//​​ハブラシロボットを停止させる​​​​​​​​​​​​​k.digitalWrite(k.PIO0,​​k.LOW);​​​​​​​​​​​​​k.digitalWrite(k.PIO1,​​k.LOW);​​​​​​​​​}​​​​​​​​​//次の状態をセット​​​​​​​​​toggle​​=​​!toggle;​​​​​},​​500);});

43

-HTML<p​​id='helloWorld'></p><script​​src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script><script​​src="http://zeptojs.com/zepto.min.js"></script>
-CSS
*​​{
​​​margin:​​0;​​​padding:​​0;​​​border:​​0;}
body​​{​​​background:​​#FFFFFF;​​​font:​​30px​​sans-serif;}
・以上のコードがかけたら，保存をします．
・続いて，konashi.jsアプリ内で，”User”をタップして自分のユーザ名を入力します．
・ユーザーをタップして，コードを実行してみましょう．
・ハブラシロボットが，0.5秒ごとに前に進んだり止まったりします．

konashiの機能の詳細
konashiで使用できる関数の詳細については，以下のドキュメントを参照してください．
konashi-​​Documents
http://konashi.ux-xu.com/documents/

既存のコードをフォークして拡張してみよう
これまで基本編・応用編で試したプログラムもすべて上記のHTML,​​CSS,​​javascriptで記述されています．​​jsdo.itでは，これらのコードをフォークと言ってコピーして拡張することができます．“YUKAI”公式アカウントの，”ハブラシロボットリモコン”をフォークしてみましょう．

フォークの仕方・jsdo.itコード検索にて”ハブラシロボット​​リモコン”と検索します．ハブラシロボットリモ
コンをクリックします．
・さらに，右上の”Fork”ボタンをクリックします．

44

・すると，自分のアカウント内のCodeにforked:XXXXのような形でプログラムがコピーされます．
・この状態で，拡張できる状態になっています．既存のサンプルコードを応用して，オリジナルの機能を追加していきましょう．

45

以上です．これらを応用して楽しくハブラシロ
ボットで遊んでいきましょう．

46