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
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
Cursorハンズオン実践!
eltociear
2
720
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
210
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
990
明日から始めるリファクタリング
ryounasso
0
130
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
420
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
The Cult of Friendly URLs
andyhume
79
6.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
A designer walks into a library…
pauljervisheath
209
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
How to Think Like a Performance Engineer
csswizardry
27
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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が判断した答えが表示されます。
終わり