Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TJBot でプログラミングを 体験してみよう
Search
Kakimoty-Field
November 23, 2020
Programming
0
210
TJBot でプログラミングを 体験してみよう
TJBot で IoT と AI の
プログラミングを
体験してみよう
Kakimoty-Field
November 23, 2020
Tweet
Share
More Decks by Kakimoty-Field
See All by Kakimoty-Field
Amazon S3 で Webサイトを作ってみよう
kakimotyfield
0
78
Node-RED で画像認識と物体検出 三分クッキング
kakimotyfield
0
280
Node-RED でつなぐWatson
kakimotyfield
0
250
AzureADとIBM Cloudant をNode-REDで連携してみた
kakimotyfield
0
530
公式ハンズオンに参加したら enebular がもっと好きになれた
kakimotyfield
0
600
Other Decks in Programming
See All in Programming
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
140
Exploring: Partial and Independent Composables
blackbracken
0
100
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
140
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
7
1.3k
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
780
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
nekko cloudにおけるProxmox VE利用事例
irumaru
3
430
Beyond ORM
77web
7
910
Featured
See All Featured
Building Your Own Lightsaber
phodgson
103
6.1k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
A Philosophy of Restraint
colly
203
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Visualization
eitanlees
146
15k
Mobile First: as difficult as doing things right
swwweet
222
9k
Transcript
TJBot でプログラミングを 体験してみよう 2020-11-23 Kakimoty-Field
自己紹介 柿本 大地 IBM Champion 2020 Cloud Kakimoty_Field kakimoty.field Kakimoty-Field
講習の準備 (推奨) ▪IBM Cloud ライト アカウント作成 (3分程度) 完全無料!!クレジットカード不要!!! ▪Node-RED 環境準備
(5分~10分) あらかじめ、Node-RED 環境を IBM Cloud に準備してもらうと 後日、今日のハンズオンの復習にもなると思います。 ( https://bit.ly/3cpTXPW )
今日の目的とゴール • プログラムやAIを楽しむ 目的 • TJBot を使えるようになる ゴール
今日の流れ ▪準備しよう ・ パソコンとスマホを準備 ▪少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM
Cloud ってなぁに。 Node-RED ってなぁに。 ▪プログラムに触れてみよう ・ Node-RED を触ってみよう ▪TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
今日の流れ ▪準備しよう ・ パソコンとスマホを準備 ▪少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM
Cloud ってなぁに。 Node-RED ってなぁに。 ▪プログラムに触れてみよう ・ Node-RED を触ってみよう ▪TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
準備しよう ▪パソコンの準備 SSID: TJBotzero PASS: TJBot0Handson ▪スマホの準備 QRコードを読み込んで WiFi 接続しておきます
今日の流れ ▪準備しよう ・ パソコンとスマホを準備 ▪少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM
Cloud ってなぁに。 Node-RED ってなぁに。 ▪プログラムに触れてみよう ・ Node-RED を触ってみよう ▪TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
少しお勉強 ▪TJBot ってなぁに アメリカの 「IBM Reaserch」が AI 【IBM Watson】を簡単に お勉強できるように
開発したロボットです。 Raspberry-Pi が組み込まれています。 (https://www.research.ibm.com/tjbot/)
少しお勉強 ▪Raspberry-Pi(ラズベリーパイ) イギリスの団体が開発した お勉強用の超小型パソコンです。 普段の作業用にはモチロン モーターやLEDなどのパーツをつなげることもできるので IoT の用途として利用されます。 (ウィキペディア :
Raspberry Pi より)
少しお勉強 ▪IBM Cloud 基本的な機能は無料で使える クラウドサービスです。 AI の機能、データを保存する機能、 スマホで動くアプリ(のようなもの)を 作ることができます。 (https://cloud.ibm.com/login)
少しお勉強 ▪Node-RED ブロックをつなぐだけで 誰でも簡単にプログラムを 作ることができるツール。 インターネットにつながる「モノ」と「モノ」を繋ぐことで いろいろなアイディアを形にすることができます。 (https://nodered.jp/)
今日の流れ ▪準備しよう ・ パソコンとスマホを準備 ▪少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM
Cloud ってなぁに。 Node-RED ってなぁに。 ▪プログラムに触れてみよう ・ Node-RED を触ってみよう ▪TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
プログラムに触れてみよう ▪Node-REDにアクセス パソコンのブラウザを立ち上げて、 TJBot の中で動いている [Node-RED] にアクセスっ! (お手元の URL にアクセスします)
例:http://192.168.2.xxx:1880/
プログラムに慣れてみよう ▪ブラウザの画面を確認 パレット ワークスペース サイドバー
プログラムに慣れてみよう(スマホに文字を表示してみる) パレットの中から [ネットワーク]タグをさがして <http in ノード> と <http response ノード>を
ワークスペースに置きます。 [機能] タグの <template ノード> をワークスペースに置いて、線をつなぎます。
プログラムに慣れてみよう(スマホに文字を表示してみる) ワークスペースに置いた <http inノード> をダブルクリックして 「URL」 を ”/start" に変えます。
プログラムに慣れてみよう(スマホに文字を表示してみる) <template ノード> をダブルクリックして 「テンプレート」 に、好きな文字を入力します。
プログラムに慣れてみよう(スマホに文字を表示してみる) プログラムが完成したので、画面右上の 「デプロイ」ボタンをクリックします。
プログラムに慣れてみよう(スマホに文字を表示してみる) スマホで、QRコードを読み込みます。 (または、以下のURLにアクセスします。) 例:http://192.168.2.xxx:1880/start ・・・はたして、どんな結果が・・・? 201 203 204 205
プログラムに慣れてみよう(機能を変えてみる) [共通]タグの <debug ノード> を ワークスペースにおいて 図のように線をつなぎます
プログラムに慣れてみよう(機能を変えてみる) <template> をダブルクリックして 「テンプレート」 の中身を、違う文字に変えます。
プログラムに慣れてみよう(機能を変えてみる) サイドバーにある「デバッグボタン(テントウムシマーク)」を クリックしておきます。
プログラムに慣れてみよう(機能を変えてみる) 「デプロイ」ボタンをクリックします。 もう一度、スマホ(またはブラウザ)で、先ほどのURLにアクセスすると・・・?
今日の流れ ▪準備しよう ・ パソコンとスマホを準備 ▪少しお勉強 ・ TJBot ってなぁに。 ラズベリーパイってなぁに。 IBM
Cloud ってなぁに。 Node-RED ってなぁに。 ▪プログラムに触れてみよう ・ Node-RED を触ってみよう ▪TJBot を動かしてみよう ・ スマホコントローラで TJBot を動かしてみよう
TJBOT を動かしてみよう ▪作るもの TJBotを操作するスマホコントローラ
TJBOT を動かしてみよう ▪カラフルリモコン TJBotの頭についているLEDの色を変えるリモコンを作ります。
TJBOT を動かしてみよう (カラフルリモコン) [LED]タブをクリックすると、こんなフローがあります。 左側にある<inject>ノードの 左にあるボタンを クリックしてみましょう。
TJBOT を動かしてみよう (カラフルリモコン) [dashboard]タグの <button ノード> をおいて 線をつなぎます。
TJBOT を動かしてみよう (カラフルリモコン) <button ノード> をダブルクリックして、いろいろ変えておきます。 ・「Group」:を ”[カラフルリモコン]カラフルリモコン”に変えます。 ・「Label」を "あか"
に変えます。
プログラムに慣れてみよう(カラフルリモコン) ・「デプロイ」ボタンをクリックします。 ・サイドバーにある、このアイコンをクリックします。 また、QRコードをスマホで読み込みます。 ① ②
プログラムに慣れてみよう(カラフルリモコン) スマホをリモコンにするための QRコード 201 203 204 205
TJBOT を動かしてみよう (カラフルリモコン) <button ノード> を並べて 図のように線をつなげます。 <button ノード> の線をつなげたあとは
ダブルクリックして設定も変更します。 全部並べ終わったら、 デプロイします。
TJBOT を動かしてみよう (カラフルリモコン) ボタンの位置や大きさを変えるには サイドバーの「ダッシュボード」から 背景が灰色の「カラフルリモコン」に マウスを充てます。 そこに表示される「レイアウト」ボタンを クリックします。 マウスを当てる
TJBOT を動かしてみよう (カラフルリモコン) ボタンの右上にある「鍵」のマークをクリックして「鍵を外した状態」にします。 ▼ボタンの右下の「⇔」マークをドラッグするとボタンのサイズが変えられます。 ▼ボタンをドラッグすると、ボタンの位置が変えられます。
TJBOT を動かしてみよう ▪うでリモコン TJBotのうでを、うえにあげたり、おろしたりするリモコンを作ります。
TJBOT を動かしてみよう (うでリモコン) [arm]タブをクリックすると、こんなフローがあります。 これも 左側にある<inject ノード>の 左にあるボタンを クリックしてみましょう。
TJBOT を動かしてみよう (うでリモコン) [dashboard]タグの <button ノード> を置いて 線をつなぎます。
TJBOT を動かしてみよう (うでリモコン) <button ノード> をダブルクリックして、いろいろ変えておきます。 ・「Group」を ”[うでリモコン]うでリモコン”に変えます。 ・「Label」を "うえ"
に変えます。
TJBOT を動かしてみよう (うでリモコン) <button ノード> を並べて 図のように線をつなげます。 <button ノード> の線をつなげて
ダブルクリックして設定も変更します。 全部並べ終わったら、 デプロイします。
TJBOT を動かしてみよう ▪おしゃべりモード TJBotに、いろいろとおしゃべりしてもらうリモコンを作ります。
TJBOT を動かしてみよう (おしゃべりモード) [speaker]タブをクリックすると、こんなフローがあります。 これも 左側にある<inject ノード>の 左にあるボタンを クリックしてみましょう。
TJBOT を動かしてみよう (うでリモコン) [dashboard]タグの <button ノード> をおいて 線をつなぎます。
TJBOT を動かしてみよう (おしゃべりモード) <button ノード> をダブルクリックして、いろいろ変えておきます。 ・「Group」を ”[おしゃべりモード]おしゃべりモード”に変えます。 ・「Label」を "おはよう"
に変えます。
TJBOT を動かしてみよう (おしゃべりモード) <button ノード> を並べて 図のように線をつなげます。 <button ノード> の線をつなげて
ダブルクリックして設定も変更します。 全部並べ終わったら、 デプロイします。
TJBOT を動かしてみよう (おしゃべりモード その2) <button ノード> と <text input ノード>
を置いて 図のように線をつなぎます
TJBOT を動かしてみよう (おしゃべりモード その2) <button ノード> をダブルクリックして、いろいろ変えておきます。 ・「Group」を ”[おしゃべりモード]おしゃべりモード”に変えます。 ・「Label」を
"しゃべって" に変えます。 <text input ノード> をダブルクリックして、 いろいろ変えておきます。 ・「Group」を ”[おしゃべりモード]おしゃべりモード”に変えます。 ・「Delay(ms)」を "0" に変えます。 設定が終ったら デプロイ します
TJBOT を動かしてみよう 「しゃべって!」ボタンの上にある空欄に文字を入力して 「しゃべって!」ボタンをクリックすると・・・
TJBOT を動かしてみよう ▪お気軽カメラ TJBotの目についているカメラで写真を撮影するリモコンです。
TJBOT を動かしてみよう カメラとしてのリモコンは完成しているので・・・ 写真に写っているものを、AIに 見てもらいましょう
TJBOT を動かしてみよう ▪お気軽カメラ [camera]タブのフローを表示すると、線がつながっていない場所があります。 ここに、パレットの「IBM Watson」タブから <visual recognition ノード> をワークスペースに置いて
図のように線をつなぎます。
TJBOT を動かしてみよう ▪お気軽カメラ ・Watson の準備をします。 したのページの 「Visual-Recognition-API準備」をもとに APIKey と APIURL
を作成します。 https://bit.ly/3713hrd 前のページで線をつないだ <visual recognition ノード>に APIKey と API URL を設定します。 (参考図は次のページ)
TJBOT を動かしてみよう ▪お気軽カメラ ・[APIKey] を 貼り付けます ・[ServiceEndpoint] に "URL" を
貼り付けます。 ・[Language]を "Japanese"に 設定します。 設定が終ったらデプロイします。
TJBOT を動かしてみよう ▪お気軽カメラ 写真を撮影した後、 すこし待っていると 写真の下に、「写真に何が写っているか」 AIが判断した答えが表示されます。
終わり