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
81
Node-RED で画像認識と物体検出 三分クッキング
kakimotyfield
0
320
Node-RED でつなぐWatson
kakimotyfield
0
290
AzureADとIBM Cloudant をNode-REDで連携してみた
kakimotyfield
0
560
公式ハンズオンに参加したら enebular がもっと好きになれた
kakimotyfield
0
630
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
ニーリーにおけるプロダクトエンジニア
nealle
0
830
PicoRuby on Rails
makicamel
2
130
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
Is Xcode slowly dying out in 2025?
uetyo
1
270
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Embracing the Ebb and Flow
colly
86
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Done Done
chrislema
184
16k
Automating Front-end Workflow
addyosmani
1370
200k
Agile that works and the tools we love
rasmusluckow
329
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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が判断した答えが表示されます。
終わり