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
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
230
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.7k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
Laravel Boost 超入門
fire_arlo
3
220
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
Rancher と Terraform
fufuhu
2
550
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
It's Worth the Effort
3n
187
28k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Balancing Empowerment & Direction
lara
3
620
Site-Speed That Sticks
csswizardry
10
820
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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が判断した答えが表示されます。
終わり