×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
TJBot でプログラミングを 体験してみよう 2020-11-23 Kakimoty-Field
Slide 2
Slide 2 text
自己紹介 柿本 大地 IBM Champion 2020 Cloud Kakimoty_Field kakimoty.field Kakimoty-Field
Slide 3
Slide 3 text
講習の準備 (推奨) ■IBM Cloud ライト アカウント作成 (3分程度) 完全無料！！クレジットカード不要！！！ ■Node-RED 環境準備 （5分~10分) あらかじめ、Node-RED 環境を IBM Cloud に準備してもらうと 後日、今日のハンズオンの復習にもなると思います。 ( https://bit.ly/3cpTXPW )
Slide 4
Slide 4 text
今日の目的とゴール • プログラムやAIを楽しむ 目的 • TJBot を使えるようになる ゴール
Slide 5
Slide 5 text
今日の流れ ■準備しよう ・ パソコンとスマホを準備 ■少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM Cloud ってなぁに。 Node-RED ってなぁに。 ■プログラムに触れてみよう ・ Node-RED を触ってみよう ■TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
Slide 6
Slide 6 text
今日の流れ ■準備しよう ・ パソコンとスマホを準備 ■少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM Cloud ってなぁに。 Node-RED ってなぁに。 ■プログラムに触れてみよう ・ Node-RED を触ってみよう ■TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
Slide 7
Slide 7 text
準備しよう ■パソコンの準備 SSID: TJBotzero PASS: TJBot0Handson ■スマホの準備 QRコードを読み込んで WiFi 接続しておきます
Slide 8
Slide 8 text
今日の流れ ■準備しよう ・ パソコンとスマホを準備 ■少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM Cloud ってなぁに。 Node-RED ってなぁに。 ■プログラムに触れてみよう ・ Node-RED を触ってみよう ■TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
Slide 9
Slide 9 text
少しお勉強 ■TJBot ってなぁに アメリカの 「IBM Reaserch」が AI 【IBM Watson】を簡単に お勉強できるように 開発したロボットです。 Raspberry-Pi が組み込まれています。 (https://www.research.ibm.com/tjbot/)
Slide 10
Slide 10 text
少しお勉強 ■Raspberry-Pi(ラズベリーパイ) イギリスの団体が開発した お勉強用の超小型パソコンです。 普段の作業用にはモチロン モーターやLEDなどのパーツをつなげることもできるので IoT の用途として利用されます。 (ウィキペディア : Raspberry Pi より)
Slide 11
Slide 11 text
少しお勉強 ■IBM Cloud 基本的な機能は無料で使える クラウドサービスです。 AI の機能、データを保存する機能、 スマホで動くアプリ(のようなもの)を 作ることができます。 (https://cloud.ibm.com/login)
Slide 12
Slide 12 text
少しお勉強 ■Node-RED ブロックをつなぐだけで 誰でも簡単にプログラムを 作ることができるツール。 インターネットにつながる「モノ」と「モノ」を繋ぐことで いろいろなアイディアを形にすることができます。 (https://nodered.jp/)
Slide 13
Slide 13 text
今日の流れ ■準備しよう ・ パソコンとスマホを準備 ■少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM Cloud ってなぁに。 Node-RED ってなぁに。 ■プログラムに触れてみよう ・ Node-RED を触ってみよう ■TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
Slide 14
Slide 14 text
プログラムに触れてみよう ■Node-REDにアクセス パソコンのブラウザを立ち上げて、 TJBot の中で動いている [Node-RED] にアクセスっ！ （お手元の URL にアクセスします） 例：http://192.168.2.xxx:1880/
Slide 15
Slide 15 text
プログラムに慣れてみよう ■ブラウザの画面を確認 パレット ワークスペース サイドバー
Slide 16
Slide 16 text
プログラムに慣れてみよう(スマホに文字を表示してみる) パレットの中から [ネットワーク]タグをさがして と を ワークスペースに置きます。 [機能] タグの をワークスペースに置いて、線をつなぎます。
Slide 17
Slide 17 text
プログラムに慣れてみよう(スマホに文字を表示してみる) ワークスペースに置いた をダブルクリックして 「URL」 を ”/start" に変えます。
Slide 18
Slide 18 text
プログラムに慣れてみよう(スマホに文字を表示してみる) をダブルクリックして 「テンプレート」 に、好きな文字を入力します。
Slide 19
Slide 19 text
プログラムに慣れてみよう(スマホに文字を表示してみる) プログラムが完成したので、画面右上の 「デプロイ」ボタンをクリックします。
Slide 20
Slide 20 text
プログラムに慣れてみよう(スマホに文字を表示してみる) スマホで、QRコードを読み込みます。 （または、以下のURLにアクセスします。) 例：http://192.168.2.xxx:1880/start ・・・はたして、どんな結果が・・・？ 201 203 204 205
Slide 21
Slide 21 text
プログラムに慣れてみよう(機能を変えてみる) [共通]タグの を ワークスペースにおいて 図のように線をつなぎます
Slide 22
Slide 22 text
プログラムに慣れてみよう(機能を変えてみる) をダブルクリックして 「テンプレート」 の中身を、違う文字に変えます。
Slide 23
Slide 23 text
プログラムに慣れてみよう(機能を変えてみる) サイドバーにある「デバッグボタン(テントウムシマーク)」を クリックしておきます。
Slide 24
Slide 24 text
プログラムに慣れてみよう(機能を変えてみる) 「デプロイ」ボタンをクリックします。 もう一度、スマホ(またはブラウザ)で、先ほどのURLにアクセスすると・・・？
Slide 25
Slide 25 text
今日の流れ ■準備しよう ・ パソコンとスマホを準備 ■少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM Cloud ってなぁに。 Node-RED ってなぁに。 ■プログラムに触れてみよう ・ Node-RED を触ってみよう ■TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
Slide 26
Slide 26 text
TJBOT を動かしてみよう ■作るもの TJBotを操作するスマホコントローラ
Slide 27
Slide 27 text
TJBOT を動かしてみよう ■カラフルリモコン TJBotの頭についているLEDの色を変えるリモコンを作ります。
Slide 28
Slide 28 text
TJBOT を動かしてみよう (カラフルリモコン) [LED]タブをクリックすると、こんなフローがあります。 左側にあるノードの 左にあるボタンを クリックしてみましょう。
Slide 29
Slide 29 text
TJBOT を動かしてみよう (カラフルリモコン) [dashboard]タグの をおいて 線をつなぎます。
Slide 30
Slide 30 text
TJBOT を動かしてみよう (カラフルリモコン) をダブルクリックして、いろいろ変えておきます。 ・「Group」:を ”[カラフルリモコン]カラフルリモコン”に変えます。 ・「Label」を "あか" に変えます。
Slide 31
Slide 31 text
プログラムに慣れてみよう(カラフルリモコン) ・「デプロイ」ボタンをクリックします。 ・サイドバーにある、このアイコンをクリックします。 また、QRコードをスマホで読み込みます。 ① ②
Slide 32
Slide 32 text
プログラムに慣れてみよう(カラフルリモコン) スマホをリモコンにするための QRコード 201 203 204 205
Slide 33
Slide 33 text
TJBOT を動かしてみよう (カラフルリモコン) を並べて 図のように線をつなげます。 の線をつなげたあとは ダブルクリックして設定も変更します。 全部並べ終わったら、 デプロイします。
Slide 34
Slide 34 text
TJBOT を動かしてみよう (カラフルリモコン) ボタンの位置や大きさを変えるには サイドバーの「ダッシュボード」から 背景が灰色の「カラフルリモコン」に マウスを充てます。 そこに表示される「レイアウト」ボタンを クリックします。 マウスを当てる
Slide 35
Slide 35 text
TJBOT を動かしてみよう (カラフルリモコン) ボタンの右上にある「鍵」のマークをクリックして「鍵を外した状態」にします。 ▼ボタンの右下の「⇔」マークをドラッグするとボタンのサイズが変えられます。 ▼ボタンをドラッグすると、ボタンの位置が変えられます。
Slide 36
Slide 36 text
TJBOT を動かしてみよう ■うでリモコン TJBotのうでを、うえにあげたり、おろしたりするリモコンを作ります。
Slide 37
Slide 37 text
TJBOT を動かしてみよう (うでリモコン) [arm]タブをクリックすると、こんなフローがあります。 これも 左側にあるの 左にあるボタンを クリックしてみましょう。
Slide 38
Slide 38 text
TJBOT を動かしてみよう (うでリモコン) [dashboard]タグの を置いて 線をつなぎます。
Slide 39
Slide 39 text
TJBOT を動かしてみよう (うでリモコン) をダブルクリックして、いろいろ変えておきます。 ・「Group」を ”[うでリモコン]うでリモコン”に変えます。 ・「Label」を "うえ" に変えます。
Slide 40
Slide 40 text
TJBOT を動かしてみよう (うでリモコン) を並べて 図のように線をつなげます。 の線をつなげて ダブルクリックして設定も変更します。 全部並べ終わったら、 デプロイします。
Slide 41
Slide 41 text
TJBOT を動かしてみよう ■おしゃべりモード TJBotに、いろいろとおしゃべりしてもらうリモコンを作ります。
Slide 42
Slide 42 text
TJBOT を動かしてみよう (おしゃべりモード) [speaker]タブをクリックすると、こんなフローがあります。 これも 左側にあるの 左にあるボタンを クリックしてみましょう。
Slide 43
Slide 43 text
TJBOT を動かしてみよう (うでリモコン) [dashboard]タグの をおいて 線をつなぎます。
Slide 44
Slide 44 text
TJBOT を動かしてみよう (おしゃべりモード) をダブルクリックして、いろいろ変えておきます。 ・「Group」を ”[おしゃべりモード]おしゃべりモード”に変えます。 ・「Label」を "おはよう" に変えます。
Slide 45
Slide 45 text
TJBOT を動かしてみよう (おしゃべりモード) を並べて 図のように線をつなげます。 の線をつなげて ダブルクリックして設定も変更します。 全部並べ終わったら、 デプロイします。
Slide 46
Slide 46 text
TJBOT を動かしてみよう (おしゃべりモード その２) と を置いて 図のように線をつなぎます
Slide 47
Slide 47 text
TJBOT を動かしてみよう (おしゃべりモード その２) をダブルクリックして、いろいろ変えておきます。 ・「Group」を ”[おしゃべりモード]おしゃべりモード”に変えます。 ・「Label」を "しゃべって" に変えます。 をダブルクリックして、 いろいろ変えておきます。 ・「Group」を ”[おしゃべりモード]おしゃべりモード”に変えます。 ・「Delay(ms)」を "0" に変えます。 設定が終ったら デプロイ します
Slide 48
Slide 48 text
TJBOT を動かしてみよう 「しゃべって！」ボタンの上にある空欄に文字を入力して 「しゃべって！」ボタンをクリックすると・・・
Slide 49
Slide 49 text
TJBOT を動かしてみよう ■お気軽カメラ TJBotの目についているカメラで写真を撮影するリモコンです。
Slide 50
Slide 50 text
TJBOT を動かしてみよう カメラとしてのリモコンは完成しているので・・・ 写真に写っているものを、AIに 見てもらいましょう
Slide 51
Slide 51 text
TJBOT を動かしてみよう ■お気軽カメラ [camera]タブのフローを表示すると、線がつながっていない場所があります。 ここに、パレットの「IBM Watson」タブから をワークスペースに置いて 図のように線をつなぎます。
Slide 52
Slide 52 text
TJBOT を動かしてみよう ■お気軽カメラ ・Watson の準備をします。 したのページの 「Visual-Recognition-API準備」をもとに APIKey と APIURL を作成します。 https://bit.ly/3713hrd 前のページで線をつないだ に APIKey と API URL を設定します。 （参考図は次のページ）
Slide 53
Slide 53 text
TJBOT を動かしてみよう ■お気軽カメラ ・[APIKey] を 貼り付けます ・[ServiceEndpoint] に "URL" を 貼り付けます。 ・[Language]を "Japanese"に 設定します。 設定が終ったらデプロイします。
Slide 54
Slide 54 text
TJBOT を動かしてみよう ■お気軽カメラ 写真を撮影した後、 すこし待っていると 写真の下に、「写真に何が写っているか」 AIが判断した答えが表示されます。
Slide 55
Slide 55 text
終わり