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
230
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
82
Node-RED で画像認識と物体検出 三分クッキング
kakimotyfield
0
330
Node-RED でつなぐWatson
kakimotyfield
0
290
AzureADとIBM Cloudant をNode-REDで連携してみた
kakimotyfield
0
560
公式ハンズオンに参加したら enebular がもっと好きになれた
kakimotyfield
0
640
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
testingを眺める
matumoto
1
140
Testing Trophyは叫ばない
toms74209200
0
840
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
8
3.4k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
470
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
AI時代のUIはどこへ行く?
yusukebe
17
8.7k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Side Projects
sachag
455
43k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
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が判断した答えが表示されます。
終わり