東海大学特別講義 2023 前半資料

東海大学特別講義 2023「コミュニケーションとテクノロジー ～すぐ試してアウトプットして自分で感じるエンジニアリング～」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 東海大学特別講義 2023
   コミュニケーションとテクノロジー
   すぐ試してアウトプットして自分で感じるエンジニアリング
   ワンフットシーバス 田中正吾
   

   View Slide

2. まず今日の進行
   

   View Slide

3. こんなスケジュール
   ➔ 前半授業 4限 13:30-15:10 100 分
   ◆ 田中のトークやリアルタイムデモを見る（約70分）
   ◆ 授業中から質問フォームから質問をする（約30分）
   ➔ 後半授業 5限 15:20-17:00 100 分
   ◆ 質問フォームから来た質問を田中が答える（約70分）
   ◆ レポートを答える時間（約30分）
   

   View Slide

4. 前半授業は40分ほど田中が話したり
   リアルタイムデモをします
   

   View Slide

5. 私が日々行っている
   様々な技術を動かし・考えて・アウトプットしていることが
   この変化する状況でどうなっているかの話をします
   

   View Slide

6. 授業中から質問を受け付けます
   後半授業で、質問フォームで挙がった質問を答える予定です
   

   View Slide

7. 質問フォームは事前にお伝えしてます
   確認よろしくお願いします！
   

   View Slide

8. 今日ご紹介する関連URL集です
   http://bit.ly/tokai-202305-tanaka
   

   View Slide

9. 後半授業は前半の質問に答えたりします
   質問フォーム優先ですが、その場で直接聞いてもOK！
   

   View Slide

10. そして最後に30分で紙のレポートを書いて
    授業の最後に提出します
    

    View Slide

11. 前半はこんな感じで進める予定
    トークに加えて、ところどころデモが入ります
    トーク
 デモ

    

    View Slide

12. うまくリアクションを共有したい！
    生徒の皆さんの反応が全部見たいんだけど、構造上なかなかむずかしいのでなんとかしたい！
    

    View Slide

13. リアクションシステムを作ってみました！
    Node-RED というツールで作っています
    

    View Slide

14. さっそくみんなが参加するデモ
    リアクションシステム
    

    View Slide

15. 良いなと思ったら「いいね！」ボタン押して反応！
    

    View Slide

16. 自己紹介
    

    View Slide

17. 田中正吾（たなかせいご）
    屋号：ワンフットシーバス
    2004年よりフリーランス。以後、FLASH制作を
    中心にインタラクティブコンテンツを主に行い現
    在に至る。
    最近ではWEBフロントエンドをベースにしなが
    らも、情報とインターフェースが合わさるアプ
    ローチという視点でIoTやMixed Realityといった
    技術も取り入れながら活動しています。
    

    View Slide

18. ルーツ
    2005
    2000 2010
    

    View Slide

19. 情報を扱うのが楽しいのでWEB制作へ
    美術大学
 PC WEB制作

    会社員→フリーランス

    2005

    2000
 2010

    

    View Slide

20. 会社員からフリーランスへ
    美術大学
 PC WEB制作

    会社員→フリーランス

    2005

    2000
 2010

    

    View Slide

21. 2010 スマホ WEB制作
    媒体がPCからスマホへ変わっていく
    デジタル サイネージ制作
    2015
    

    View Slide

22. IoT・VR・AIつながっていく
    2015
    IoT制作
    2017
    Mixed Reality制作
    

    View Slide

23. ざっくりいうと色々な技術を使って
    情報を届ける全般の手伝いをしている人
    

    View Slide

24. 最近
    

    View Slide

25. 最近は、私は IoT・AI・クラウド・VR など
    様々な技術でクライアントに関わっています
    

    View Slide

26. これらの技術はそのものも大切だが、
    うまく連携して活かしあうことこそ大事
    これはきっと皆さんがこれから学んでいく技術にも同じことが言える
    

    View Slide

27. たとえば、例として
    このように可能性が広がります
    IoT + AI = 現実のセンサデータに合わせて判断
    IoT + VR = 効率的に空間の環境を把握
    AI + VR = 現実の行動に合わせてアシスト
    

    View Slide

28. つくってみて実感して
    試行錯誤して良くしていくことが大事
    つくる前は分からない調整する点やより良くできる点がある。Google 検索して出てこない。
    重要なのは活用して自分のものにしていくこと。考えるだけでは難しい。
    

    View Slide

29. 新しい変化に対して色々な見え方ができる
    なぜこの技術が出てきたか、自分が作ってみたアレが良くなりそう、
    この仕組みは自分の知ってる作ったことがあるからつながっている
    

    View Slide

30. 試行錯誤するときの手法を紹介
    

    View Slide

31. こんな感じで進める予定
    トークに加えて、ところどころデモが入ります
    トーク
 デモ

    

    View Slide

32. こんなスケジュール
    ➔ 前半授業 4限 13:30-15:10 100 分
    ◆ 田中のトークやリアルタイムデモを見る（約70分）
    ◆ 授業中から質問フォームから質問をする（約30分）
    ➔ 後半授業 5限 15:20-17:00 100 分
    ◆ 質問フォームから来た質問を田中が答える（約70分）
    ◆ レポートを答える時間（約30分）
    

    View Slide

33. IoT
    

    View Slide

34. Internet of Things
    （インターネットのモノ化）
    

    View Slide

35. Internet of Things
    デバイスというモノや物事（アクション）を
    インターネットとつなげて
    見えないものが見えたり（＝可視化）
    より便利になったりすること
    デバイス
 WEB
 デバイス
 WEB

    

    View Slide

36. 現実世界を知覚してデータ化する流れがある
    センシングでデータとして捉え、ネットワークを通じて収集、データ蓄積をする流れ
    ネットワーク

    データ収集

    現実世界

    センシングでデータ化 

    サーバー

    データ蓄積

    

    View Slide

37. データによって現実世界に介入することもある
    サーバーでデータ分析や判断を行い、ネットワークを通じてデータ伝達、なんらかのアクションを行う
    現実世界

    なんらかのアクション 

    （アクチュエーター）

    サーバー

    データ分析・判断

    ネットワーク

    データ伝達

    

    View Slide

38. 知覚できる量も拡大し細分化している
    センサーも増えて手軽に計測できインターネット経由でデータが蓄積できる
    PC WEB制作 スマホ WEB制作 IoT
    

    View Slide

39. 知覚できる範囲は双方向性が強く
    より細かくより深くなった
    

    View Slide

40. 私のIoT技術との付き合い方
    使いやすくなったセンサー類
    

    View Slide

41. M5Stack・obnizのような
    すぐに試行錯誤できるデバイス
    今日紹介した Grove がつながるとセンシング・アクチュエータ（動き）部分も試行錯誤しやすい
    pressed A

    

    View Slide

42. obniz
    

    View Slide

43. obniz
    https://www.switch-science.com/catalog/3838/
    

    View Slide

44. obnizというデバイスも動かしてみる
    

    View Slide

45. obnizはモーターやセンサーをつなぐだけで
    すぐにクラウド経由で操作できるようになります
    

    View Slide

46. しかもJavaScriptでコードがかけて
    いろいろな試行錯誤か可能
    

    View Slide

47. さて、ここで obniz デモ。
    obniz とセンサーや動くもの（アクチュエータ）を加える
    

    View Slide

48. obniz にフルカラーLEDが制御します
    

    View Slide

49. これを遠隔でカラーを変えます
    

    View Slide

50. 実際に現場に行かなくても照明が操作できる
    

    View Slide

51. IoT の事例のコロナ前と現在の変化
    社会が変わればニーズも変わるニースが変わればセンサーが変わる
    

    View Slide

52. CO2 センサーの IoT デモします！
    リアルタイムデモ！
    

    View Slide

53. コロナ禍で換気の重要性がでてきた
    コロナ以前はトイレの空き状況や会議室の空き状況といった事例が多かった
    

    View Slide

54. 部屋の空き状況管理のIoT
    その場に行かなくてもセンサーが使用状況を把握して開き具合が分かりスムーズに使える
    センサー センサー センサー
    ！
    

    View Slide

55. 部屋の空き状況管理のIoT
    ➔ トイレでも会議室でも「実際にその部屋に行かないと状況
    が分からない」という課題が各所にあった。
    ➔ 予約管理システムがあるケースもあるが、現場の使用状況
    との整合性が取れていないケースも。
    ➔ IoT が加わり人間の代わりにセンサーによって現場がデー
    タで見れる「遠隔」要素で課題解決しやすく。
    ➔ さらに使用状況をデータとして「蓄積」したり「可視化」
    できユーザーの行動の利便性が上がった。
    ➔ より気軽にトイレや部屋が使えるという安心感の向上。
    

    View Slide

56. コロナ禍での換気 IoT
    空気のよどみを人間の呼吸をターゲットに CO2 センサーで把握して適切な換気をして快適な空間管理をする
    1473
    ppm
    センサー
    ！
    

    View Slide

57. コロナ禍での換気 IoT
    ➔ コロナの性質から換気が重要になったが、空気のよどみは
    目に見えないので対策が難しかった。
    ➔ IoT が加わり CO2 センサーで人間の知覚できない空気の
    よどみを把握でき適切な換気タイミングを知れるように
    なった。ある意味の「拡張知覚」「可視化」。
    ➔ コロナ禍で移動の制約が多くなり、現場に行かなくても状
    況が把握できる「遠隔」や「データ共有」が大切に。
    ➔ コロナ禍でも換気がよく管理された空間で活動ができると
    いう安心感の向上。（以前より身に迫った感がある）
    

    View Slide

58. CO2 センサーの IoT デモします！
    リアルタイムデモ！
    

    View Slide

59. みなさんも一緒に見れます！
    https://app-tokai-univ-2023-dashboard.herokuapp.com/ui/#!/0
    

    View Slide

60. ここにある CO2 センサーの値が
    ネットワーク経由でグラフで見えます
    

    View Slide

61. M5Stack シリーズの M5StackC Plus もあります
    

    View Slide

62. M5StackというIoTデバイスと
    Grove CO2 センサーでできています
    各パーツのくわしい紹介は後ほど触れるので大丈夫です
    CO2センサー
    M5Stack
    Grove システム
    

    View Slide

63. M5Stack は Wi-Fi につながるので
    ネットワークの先にあるデータを送ります
    MQTT ブローカーというデータを指揮する場所に知らせてる感じ
    センサー
    MQTT
    

    View Slide

64. Node-RED という通信やデータを良い感じに扱える
    ローコードツールでデータを受けとります
    Node-RED
    センサー
    MQTT
    

    View Slide

65. Node-RED がダッシュボード機能で
    データを可視化します
    Node-RED
    センサー
    MQTT
    グラフで
    可視化
    

    View Slide

66. Node-RED のデータの流れ
    CO2 センサーの値の様子を Node-RED のダッシュボードで可視化
    

    View Slide

67. 実際に動作している様子
    Node-RED のダッシュボードで CO2 センサーの状況が見える
    

    View Slide

68. みなさんも一緒に見れます！
    https://app-tokai-univ-2023-dashboard.herokuapp.com/ui/#!/0
    

    View Slide

69. それではデモスタート！
    

    View Slide

70. それぞれの IoT の仕組みで共通していること
    

    View Slide

71. 現実世界をセンサーで知覚して
    データとして捉える
    収集
    収集
    収集
    データ
    センサー（知覚）
    

    View Slide

72. スマホやPCではディスプレイ越しだったが
    センサーによって現実世界により深く触れれる
    センサー
    

    View Slide

73. データとインターネットが組み合わすと
    遠隔で何かしたり蓄積できる
    データ
    センサー（知覚） データ蓄積
    収集
    収集
    収集
    

    View Slide

74. データをまとめて可視化したり
    通知したり分析することができる
    データ
    （知覚） データ蓄積 可視化・通知
    ・分析
    

    View Slide

75. ここからフィードバック（次どうする）が生まれ
    行動が変わったり便利になったり対策が立てれる
    ！
    

    View Slide

76. このあたりが IoT で
    できるようになって大事で楽しいところ
    現実世界がデータととらえられて、データにすれば今までのITの知見でいろいろ良くできる
    収
    集
    収集
    収集
    データ
    センサー
    （知覚）
    データ蓄積 可視化・通知
    ・分析
    

    View Slide

77. では IoT により馴染むには？
    

    View Slide

78. 実際に自分で IoT に触れてみよう
    自分の身近なところから IoT でより良くしていくための機材や考え方を私の経験から話します
    

    View Slide

79. なんかこういうのってお値段高いんじゃないの？
    自分ではなかなか挑戦しづらそう！
    

    View Slide

80. いえいえ、大丈夫です
    

    View Slide

81. デバイスやセンサーは
    最近手軽に手に入りやすくなっています！
    半導体不足で手に入りにくいものもありますが、以前と比べてという話
    

    View Slide

82. たとえば、この CO2 センサーは Grove システム
    

    View Slide

83. スイッチサイエンスさんの例
    https://www.switch-science.com/collections/all/cat:%E3%83%96%E3%83%A9%E3%83%B3%E3%83%
    89%E5%B0%8F%E5%88%86%E9%A1%9E_Grove
    

    View Slide

84. Groveのように様々なセンサーが手に入りやすく
    現場実装の想像力を育てることができる
    経験がないとどうしても視野が広がりにくい
    

    View Slide

85. 私の Grove センサーたくさん持ってきたので
    よかったら後で見てみてください
    

    View Slide

86. IoT をするためのデバイスも
    手に入りやすくなっている
    

    View Slide

87. たとえば、この M5Stack というデバイスは
    すぐに IoT をはじめられる良いデバイス
    

    View Slide

88. スイッチサイエンスさんの M5Stack 紹介
    https://www.switch-science.com/catalog/7362/
    

    View Slide

89. IoT をしたいときに必要なものがモリモリ
    

    View Slide

90. Grove もつながるので IoT をサッとはじめて
    データやセンサーを試行錯誤できる
    普段の仕事を同じように、アイデアを手元ですぐに試せるので、自分の身近になり実感が湧く
    

    View Slide

91. こういうツールで自分の知っている円の中に
    IoT の感覚をうまーく馴染ませるとイイ
    

    View Slide

92. このような「サッと試すこと」の
    実務での取り組みへの活用
    田中の普段の動きから
    

    View Slide

93. 仕事で IoT に関わるまえに、自分なりに
    IoT でまわりを良くする試行錯誤ができる
    経験値が自分のハンドリングで積める！
    うまく IoT で便利になれば良い知見ゲット！課題見えても実感の精度高い知見ゲット！
    ↓ わたしの例
    

    View Slide

94. 案件で使うセンサーや IoT デバイスがなくても
    購入できる近しい構成ですぐ作って検証できる
    プロトタイピング。取得したいデータも見えてくるし、蓄積や分析などその先のやることも見えやすい。
    

    View Slide

95. 試すと設置・通信状況・データの実情など
    自分なりのものさしが見えてくる
    状況がわかるデータ取得のタイミングであったり、
    どこに設置するか、どんなデータの設計だと使いやすいか、実はどんなデータが見たいかなど
    自分でつくるときの自分ツッコミは結構リアル。業務へのひとつのものさし・こだわりが見えてくる。
    

    View Slide

96. IoT はハードウェアに目が行きがちだが
    ソフトウェアの大切さも見えてくる
    IoT の可視化・通知・分析やそれ以降となると、サッと試すクラウド環境だったり、デバイス管理だったり、
    IoT を支える技術の大事さとともに、それでもすぐ試せる必要なオールインワンな環境が見えてくる
    

    View Slide

97. すぐ試せる構成の性能レベルや課題を実感でき
    仕事で使うエンタープライズ構成の素敵さが分かる
    用途に合う機材の選定や予算感、業務での実装の先回りがしやすくなる、解像度が高まる！
    

    View Slide

98. 実は今回も SORACOM さんにある
    上位の CO2 センサーもこの空間に仕掛けています
    LTE-M CO2センサー RS-LTECO2 スターターキット
    

    View Slide

99. 自分の仕組みとくらべての素敵さや
    押さえたいポイントがよーく分かる
    入手性、なぜ LTE 通信が良いか、コンパクトさ、電源と設置のしやすさ、すぐ使える感じ　などなど
    

    View Slide

100. データの見せ方や取得タイミングであったり
     運用するために必要なものなども実感できる
     複数人のログイン・ダッシュボードの見やすさ・グラフもいいけど通知の便利さ　だったり
     

     View Slide

101. おのおのの課題への色々なアプローチが知れて
     いざ現場でもアイデアが出しやすくなる
     例：ある場所を人の検知や人の流れを知りたい
     WEBカメラで画像認識 AI も自分で試すと得手不得手や教師データ収集の大変さをみえ万能じゃないと知れたり
     あるいは同じ状況でも他のセンサーを使うと良い感じに状況がつかめるアプローチも知れるかもしれない！
     

     View Slide

102. 個人でも手が届くことで
     発想しやすく試しやすくなる
     

     View Slide

103. 使いやすいデバイス・センサー・インターネット
     こちらを駆使して試行錯誤をしてます
     

     View Slide

104. M5Stack シリーズの M5StackC Plus では
     Unit という M5Stack パーツがあります
     

     View Slide

105. 私の Unit シリーズもたくさん持ってきたので
     よかったら後で見てみてください
     

     View Slide

106. ➔ IoT もコロナ禍を通じて社会からのニーズも変化すること
     で変わり続けている
     ➔ IoT には現実世界のデータ知覚→蓄積→分析→フィード
     バック で現実を良くしていく大事なループがあり楽しい
     ➔ 最近は IoT を自分の手元ではじめやすいので、自分なりに
     IoT を試行錯誤してみると経験値や解像度が高まります
     ➔ 自分の技術と IoT を馴染ませておくと、いざ現場でも色々
     なアプローチで関わることができます
     ここまでのまとめ
     IoT の最近の雰囲気と、サッと自分から試すことの効用
     

     View Slide

107. 組込みの領域は現実世界をデータ化したり
     データで制御できたりで素敵だなと思う
     私もこのように IoT を試行錯誤していると、みなさんの領域の可能性と重要さを実感します
     

     View Slide

108. テクノロジーで現実の世界とも
     コミュニケーションができる！
     

     View Slide

109. こんなスケジュール
     ➔ 前半授業 4限 13:30-15:10 100 分
     ◆ 田中のトークやリアルタイムデモを見る（約70分）
     ◆ 授業中から質問フォームから質問をする（約30分）
     ➔ 後半授業 5限 15:20-17:00 100 分
     ◆ 質問フォームから来た質問を田中が答える（約70分）
     ◆ レポートを答える時間（約30分）
     

     View Slide

110. ツールの力ですばやく作ってためす
     

     View Slide

111. ツールの力ですばやく作ってためす
     クラウドやAIもすばやくつくれるようになってきました
     

     View Slide

112. クラウド
     様々な技術を自分でサーバーや難しい設定をすることなく、手軽に扱うことができる一連のサービス
     

     View Slide

113. 自分で作ると本来時間がかかる大変な仕組みを
     クラウドの力を借りるとすぐに試せます
     

     View Slide

114. APIを知っておくと幅が広がる
     

     View Slide

115. API=Application Programming Interface
     http://e-words.jp/w/API.html
     

     View Slide

116. API はデータをやりとりする出入り口
     

     View Slide

117. API は技術同士をつなげる良き接着剤
     AI
     データベース
     ストレージ
     IoT
     サーバレス
     開発者ツール
     ブロックチェーン
     セキュリティ
     ネットワーク
     API
     

     View Slide

118. View Slide

119. データを受け取るメリット
     世界には様々なAPIがある。出来上がった仕組みにデータを入れて色々なことを考えられる。
     

     View Slide

120. データにアクセスできるメリット
     最近は外部の高機能な仕組みをうまく利用して自分のつくりたいものを拡張できる
     例：クラウド
     

     View Slide

121. こうやって組み合わせることで
     いろいろな価値が分かりやりたいことが広がる
     

     View Slide

122. 多くのAPIはHTTPでできているので
     ここを抑えておくと自由度が上がる
     

     View Slide

123. いろいろなAPIの例 public-apis
     https://github.com/public-apis/public-apis
     

     View Slide

124. つなげやすくするツール
     

     View Slide

125. このようにデータをより細かく調整して
     試行錯誤するときにはNode-REDも良い
     IoTは、センサー・データ・蓄積先など様々な要素が変わるのでプログラムのスクラップアンドビルドが多い
     https://nodered.jp/
     

     View Slide

126. 今回の仕組みも様々なクラウドの
     Node-REDを活用しています
     Azure
     

     View Slide

127. 今回の仕組みも様々なクラウドの
     Node-REDを活用しています
     IBM Cloud
     

     View Slide

128. 作りたいものに早く到達できる
     気軽にやり直したり試すことができる
     IoTのようにハードウェアとソフトウェアを連携すると多岐に及ぶので試行錯誤のしやすさは着目しましょう
     

     View Slide

129. 1歳息子の寝姿をこっそり見る仕組みだった
     それが子育ての状況に合わせて進化しました
     

     View Slide

130. 2歳息子の寝姿をこっそり見る仕組みへ
     寝室をインターネットカメラで撮影しています
     

     View Slide

131. LINE BOT に画像を求めると
     今の寝姿を撮影してきてくれたり
     

     View Slide

132. 10秒ごと更新している寝姿が確認できる
     家のネットワーク内オンリー
     

     View Slide

133. 仕組みの話
     

     View Slide

134. 今回使っているインターネットカメラ
     

     View Slide

135. IODATA Qwatch という
     インターネットカメラ
     見守りカメラ
     Qwatch TS-NS110W
     

     View Slide

136. なかなか良い画質
     

     View Slide

137. 暗視モードもあって
     部屋の明るさで自動切換してくれる
     つまり暗闇で起きていることもこっそりと気づける
     

     View Slide

138. 公式にAPIが公開されており
     静止画撮影も反応早く撮影できる
     https://www.iodata.jp/product/lancam/api/index.htm
     

     View Slide

139. 外の Node-RED と家の中の Node-RED が活躍
     LINE BOT を受け付けるのは Azure に作った Node-RED で
     家の中の Node-RED がカメラとのやりとり（画像取得）を行っている
     Azure VM
     Node-RED
     Raspberry Pi
     Node-RED
     MQTT HTTP
     HTTP
     HTTP
     

     View Slide

140. 家だけで画像が見れる仕組み
     Node-RED が 10 秒ごとインターネットカメラから取得してストックしている。シンプルな仕組み。
     Raspberry Pi
     Node-RED
     HTTP
     

     View Slide

141. このようなフロー
     

     View Slide

142. 画像くださいって言って取ってくる仕組み
     

     View Slide

143. 画像くださいって言って取ってくる仕組み
     MQTT によって「画像ください」というお願いを家の中の Node-RED に届ける。
     カメラから画像を取得したら HTTP で Base64 文字列で戻して LINE BOT が応答している。
     MQTT HTTP
     HTTP
     Base64
     文字列
     

     View Slide

144. 10秒ごとの更新画像があるので
     外からお願いされたら中から応答する
     

     View Slide

145. 家族のフィードバックの話を
     

     View Slide

146. 泣き声が聞こえたときに部屋の外から
     もう起きるかまだ寝るかを見れる
     暗視もあるので昼夜ばっちり。これが一番利用してくれていると思う！うれしい！
     静かに起きてすぐ寝ちゃうとか分かってかわいすぎる。寝なそうな挙動も分かる。
     

     View Slide

147. 外でも状況が見れるのはよい
     どちらかひとりが買い物など行っているときに状況が分かるのは情報共有として良い。
     かわいい寝姿を気づかれずに撮影できるのもよい（スマホだと撮る気配やシャッター音で起きる場合もある）
     

     View Slide

148. このツールで家族と新しい側面の
     コミュニケーションができてとても楽しい
     テクノロジーと開発で生活に新しい側面を生まれる
     

     View Slide

149. フィードバックももらいながら
     現実にうまく対応して楽しくする実装力がつく
     テクノロジーを現実に自分なりにしっかり実装する機会を出会える作れる
     

     View Slide

150. 自分のつくる力が息子が生まれてからも
     仕事だけでなく生活にも活用できててグッとくる
     以前からこういうファミリーテックするのが目標にしていたのでよかった。引き続き、楽しんでいきたい！
     最近はスマート温湿度センサーで夏場＆冬場の温度変化を把握する実装をしてみました！
     

     View Slide

151. テクノロジーでコミュニケーションが
     うまれることもとても楽しい！
     

     View Slide

152. こんなスケジュール
     このあたりでちょうど折り返し
     ➔ 前半授業 4限 13:30-15:10 100 分
     ◆ 田中のトークやリアルタイムデモを見る（約70分）
     ◆ 授業中から質問フォームから質問をする（約30分）
     ➔ 後半授業 5限 15:20-17:00 100 分
     ◆ 質問フォームから来た質問を田中が答える（約70分）
     ◆ レポートを答える時間（約30分）
     

     View Slide

153. AI (ChatGPT)
     

     View Slide

154. ウォンバットの質問をしてみます
     Web 版ではこう返ってくる。
     

     View Slide

155. ChatGPT の私の印象
     人間の言葉（自然言語）で聞くと、うまく理解してくれて、かなりジャンルは万能に対応でき、
     人間の言葉（自然言語）で人間が分かるように返答してくれる仕組みあるいは相手
     人間の言葉を理解 人間の言葉で回答
     回答ジャンルは万能
     （得手不得手はある）
     

     View Slide

156. OpenAI 社の ChatGPT API
     使うのはこの API です
     https://platform.openai.com/overview
     

     View Slide

157. Chat completion を使います
     画像生成とか音声認識とか他にもいろいろあるんですが、話題のチャットの仕組みを使います
     

     View Slide

158. おおまかには OpenAI の Web 版で
     使えるのと近いもの
     たしかに API と Web 版で比較してやってみても同じような印象（あくまで印象ですが）
     

     View Slide

159. ウォンバットの質問をしてみます
     Web 版ではこう返ってくる。
     

     View Slide

160. こんなフローで質問チャレンジ
     

     View Slide

161. ChatGPT ノードは API Key を Token に設定
     

     View Slide

162. ChatGPT ノードに送り込む質問を
     手前の change ノードで仕込んでおく
     

     View Slide

163. デモしてみます！
     

     View Slide

164. ChatGPT はこういったカジュアルな質問も
     良い感じに答えてくれる
     人間の言葉を理解 人間の言葉で回答
     回答ジャンルは万能
     （得手不得手はある）
     

     View Slide

165. ところで、なぜ ChatGPT API をつかうの？
     

     View Slide

166. API の使う理由の一つとして
     プライバシーが保たれるので使ってます
     OpenAIのAPIを利用する場合、オプトインしない限りユーザーが送信したデータが
     学習に利用されることはない、と改定されました。とのこと。
     https://dev.classmethod.jp/articles/openai-data-usage-policy/
     

     View Slide

167. Web 版での「自然言語で答えてくれる」ことが
     他の IT な仕組みに入れにくい悩ましさがある
     これを事例に話します
     

     View Slide

168. 一見いいように素敵な回答見えるんですが
     ここからコピーしてペーストして使う手間がある
     つまり人間の目視でうまーくコピーアンドペーストして取り出す
     

     View Slide

169. このように API 経由でデータをもらえれば
     活用しやすくなるので注目してます
     

     View Slide

170. さらに IT の仕組みに ChatGPT を
     なじませるアプローチ！
     

     View Slide

171. さきほどのように返答されても
     他で扱うためには加工や抽出が重要
     JSON で返してくれた方が扱いやすいはず
     

     View Slide

172. 人間の言葉で返される特性は
     チャットには良いがシステムに組み込みにくい
     「人間の言葉で回答」部分をうまくブラッシュアップしてみます！
     人間の言葉を理解 人間の言葉で回答
     回答ジャンルは万能
     （得手不得手はある）
     

     View Slide

173. ChatGPT API でも Web 版でも
     共通に大事なのは良い質問をつくること
     プロンプトをうまく組んでみる
     

     View Slide

174. うまく JSON で返ってくる質問の
     試行錯誤をしてみました！
     いい感じのエアコン設定温度を JSON データで返答し HTTP API 的に ChatGPT が答えてくれる質問例のメモ
     https://www.1ft-seabass.jp/memo/2023/03/13/chatgpt-http-api-like-json-response-tips1/
     

     View Slide

175. いざデモしてみます！
     さきほどの質問を API で聞いてみる
     

     View Slide

176. ➔ 人間の言葉で回答というのがシステムに組み込みにくいの
     で JSON データで返すようにして親和性を高めた
     ➔ ちゃんと JSON 例を質問の中で明示すれば ChatGPT は理
     解してくれて返答してくれました。「人間の言葉を理解」
     の特性がうまく効いてる。
     ➔ JSON の回答をした上で、聞きたいことの値をうまく返答
     してくれました。
     JSON 縛り質問デモのポイント
     

     View Slide

177. ChatGPT はこちらの質問やルール次第で
     回答も JSON に合わせてくれました
     人間の言葉を理解
     JSON データに
     加工して回答
     回答ジャンルは万能
     （得手不得手はある）
     ブラッシュアップ！
     

     View Slide

178. 次は万能な回答能力をルールを決めて
     絞り込むことで回答精度アップ！
     人間の言葉を理解
     JSON データに
     加工して回答
     回答ジャンルは万能
     （得手不得手はある）
     ブラッシュアップ！
     

     View Slide

179. 回答精度をより実用へ目指してみたら
     もどかしい部分もありました
     LED へ設定する RGB 値を JSON データで返答し HTTP API 的に ChatGPT が答えてくれる質問例のメモ
     https://www.1ft-seabass.jp/memo/2023/03/14/chatgpt-http-api-like-json-response-tips2/
     

     View Slide

180. このナレッジでフロー作りました
     

     View Slide

181. template ノードで「赤」などと指定された言葉を
     質問文に埋め込んで使っています
     

     View Slide

182. それではやってみます！
     

     View Slide

183. ➔ しっかり質問を定義すれば、柔軟に返してくれる
     ➔ ただし、おなじ質問でも、少し違うカラーを返してくれる
     ことがあっておもしろい
     ➔ 例外についてはたまに JSON 縛りを忘れてしまうことが
     あっておもしろいけど、JSON データ壊れちゃうのでやめ
     てほしいw
     色の質問デモ ver.1 のポイント
     

     View Slide

184. さらにブラッシュアップしたものがこちら！
     LED への RGB 値を JSON データで返答する ChatGPT API の仕組みを Node-RED でブラッシュアップしたメモ
     https://www.1ft-seabass.jp/memo/2023/03/17/chatgpt-http-api-like-json-response-tips-with-node-red/
     

     View Slide

185. このナレッジでデモしてみます！
     

     View Slide

186. ➔ ルール・返答する JSON データ・返答前にチェック！とい
     う見出しでお願いを分かりやすくするとより通じる
     ➔ 例外処理を明確にお願いすることで説明文を加えないよう
     に誘導できる
     ➔ 説明を入れる値を入れるお願いを明確にすることで説明文
     を加えないように誘導できる
     ➔ 質問をチューニングすると、ちゃんと JSON で回答してく
     れる仕組みができる！
     色の質問デモ ver.2 のポイント
     

     View Slide

187. 回答精度をアップさせてしっかり
     JSON 回答できるようブラッシュアップ！
     人間の言葉を理解
     JSON データに
     加工して回答
     回答ジャンルは万能
     （得手不得手はある）
     ブラッシュアップ！
     ブラッシュアップ！
     

     View Slide

188. 他のシステムに馴染ませる調整の一例でした！
     ChatGPT さんは回答できるジャンルは万能だけど、あえてルールを決めて回答しやすく特化。
     さらに JSON データに加工して回答してもらい、他のシステムにつなぎやすく。もう人間同士の対話っぽい。
     人間の言葉を理解
     JSON データに
     加工して回答
     ルールを決めて
     回答しやすく特化
     ブラッシュアップ！
     ブラッシュアップ！
     人間の言葉を理解 人間の言葉で回答
     回答ジャンルは万能
     （得手不得手はある）
     ■ChatGPT の基本キャラクター
     ■他のシステムに馴染ませる調整（今回）
     

     View Slide

189. やっぱり ChatGPT でも
     IoT LEDチカチカさせてみたい！
     

     View Slide

190. obniz の LED システムに
     ChatGPT 経由で点灯命令してみます！
     さきほどの仕組みに obniz の LED 点灯をつないでみます！
     

     View Slide

191. それではやってみます！
     

     View Slide

192. 他のシステムに馴染ませる調整の一例でした！
     ChatGPT さんは回答できるジャンルは万能だけど、あえてルールを決めて回答しやすく特化。
     さらに JSON データに加工して回答してもらい、他のシステムにつなぎやすく。もう人間同士の対話っぽい。
     人間の言葉を理解
     JSON データに
     加工して回答
     ルールを決めて
     回答しやすく特化
     ブラッシュアップ！
     ブラッシュアップ！
     人間の言葉を理解 人間の言葉で回答
     回答ジャンルは万能
     （得手不得手はある）
     ■ChatGPT の基本キャラクター
     ■他のシステムに馴染ませる調整（今回）
     

     View Slide

193. テクノロジーへもコミュニケーションが
     大切になってきた！
     

     View Slide

194. こんなスケジュール
     ➔ 前半授業 4限 13:30-15:10 100 分
     ◆ 田中のトークやリアルタイムデモを見る（約70分）
     ◆ 授業中から質問フォームから質問をする（約30分）
     ➔ 後半授業 5限 15:20-17:00 100 分
     ◆ 質問フォームから来た質問を田中が答える（約70分）
     ◆ レポートを答える時間（約30分）
     

     View Slide

195. IoT + VR
     

     View Slide

196. 今日の VR デバイス
     

     View Slide

197. HoloLens 2
     https://www.microsoft.com/ja-jp/hololens/hardware
     

     View Slide

198. センサーによって人間に対して
     新しい空間感覚が提供されつつある
     

     View Slide

199. HoloLens

     OUTPUT

     INPUT

     現実空間をそのまま入出力できるデバイス
     こういった認識も高度なセンシングによって実現できている
     

     View Slide

200. IoTは現実に対してセンサーやデバイスが
     インターネットによって
     情報が相互に関わり合うもの
     デバイスやセンサー
     （現実空間）
     インターネット
     空間
     データ
     

     View Slide

201. Mixed Reality 混合現実 も
     現実空間に対して3D映像によって
     情報が相互に関わり合うもの
     現実空間
     データ上の
     3D空間
     操作・データ
     

     View Slide

202. Unity C#でいろいろ書ける
     Wi-Fiでインターネットにつながるので連携しやすい
     

     View Slide

203. Unityからのやり取りはシンプルにして
     データの流れはNode-REDで変えるとやりやすい
     

     View Slide

204. IoT＋Mixed Reality（HoloLens 2）
     HoloLens 2 内ブラウザで見てみるデモ
     

     View Slide

205. HoloLens 2 で音声認識を使った
     DeepL経由リアルタイム翻訳つくりました
     

     View Slide

206. HoloLens 2 には音声認識機能があり
     トークを日本語テキストに変換できます
     音声認識機能
     （インターネット経由）
     音声データ
     マイク入力
     テキスト
     空間に
     テキスト表示
     

     View Slide

207. こんな機能です
     https://docs.microsoft.com/en-us/dotnet/api/microsoft.mixedreality.toolkit.input.dictationhandler?v
     iew=mixed-reality-toolkit-unity-2020-dotnet-2.8.01
     

     View Slide

208. 音声認識した日本語を DeepL の翻訳 API を通して
     英語に翻訳して表示しています
     日本語
     音声認識
     （インターネット経由）
     英語
     中継サーバー
     DeepL API
     

     View Slide

209. ということで、ひとまず
     リアルタイム翻訳のデモしてみます
     

     View Slide

210. 入り口に音声認識を加えると ChatGPT でも
     より可能性が広がりました
     人間の言葉を理解
     JSON データに
     加工して回答
     ルールを決めて
     回答しやすく特化
     ブラッシュアップ！
     ブラッシュアップ！
     IoT 制御
     なんらかの音声認識
     

     View Slide

211. HoloLens2 と ChatGPT API と Node-RED で
     お手軽音声照明コントロールをつくりました
     https://twitter.com/1ft_seabass/status/1635135055503949829
     

     View Slide

212. ひとまずデモ！
     

     View Slide

213. HoloLens 2 には音声認識機能があり
     音声を日本語テキストに変換できます
     音声認識機能
     （インターネット経由）
     音声データ
     マイク入力
     テキスト
     日本語
     テキスト
     

     View Slide

214. 音声認識したテキストを ChatGPT API に伝えて
     IoT へ指示する JSON に変換され IoT が動作します
     日本語
     音声認識
     （インターネット経由）
     IoT 指示
     JSON
     自前 Node-RED
     ChatGPT API
     HoloLens2
     IoT
     

     View Slide

215. IoT 指示はこんな風に動作します
     obniz 側で IoT 指示 JSON に応じて動作します
     ● {"type":"on"}
     ○ 機能 : LED がつく
     ○ セリフ : 「おんにして」
     ● {"type":"off"}
     ○ 機能 : LED が消える
     ○ セリフ : 「おふにして」
     ● {"type": "blink", "interval": 1, "count": 3}
     ○ 機能 : 3 回点滅する
     ○ セリフ : 「3回点滅して」
     

     View Slide

216. テクノロジー同士がコミュニケーションして
     いろいろな未来が見えてくる！
     

     View Slide

217. こんなスケジュール
     ➔ 前半授業 4限 13:30-15:10 100 分
     ◆ 田中のトークやリアルタイムデモを見る（約70分）
     ◆ 授業中から質問フォームから質問をする（約30分）
     ➔ 後半授業 5限 15:20-17:00 100 分
     ◆ 質問フォームから来た質問を田中が答える（約70分）
     ◆ レポートを答える時間（約30分）
     

     View Slide

218. まとめ
     

     View Slide

219. いろいろとお話してみました
     

     View Slide

220. 試行錯誤がとても大事。いざ組んでみると、
     作る前は分からない調整点やより良くなる点がある
     

     View Slide

221. つくってみて実感して
     試行錯誤して良くしていくことが大事
     

     View Slide

222. 重要なのは使いやすいデバイスやツールを
     うまく使い、活用して自分のものにしていくこと
     発想
     プロトタイプ
     アウトプット
     

     View Slide

223. 技術を覚えていきつつ
     他者に分かりやすく伝えることは大事
     

     View Slide

224. 最近もゴールデンウイーク中
     アウトプットしてみました
     https://gw-advent.9wick.com/calendars/2023/125
     

     View Slide

225. 人と交流することで新たな発見はある
     

     View Slide

226. 最近は私も技術の広がりとともに
     関わる場所が広がってきた
     

     View Slide

227. 今後、みなさんも総合力が活きてくる
     知って組み合わせてメリットばかり
     

     View Slide

228. テクノロジーで現実の世界とも
     コミュニケーションができる！
     

     View Slide

229. テクノロジーでコミュニケーションが
     うまれることもとても楽しい！
     

     View Slide

230. テクノロジーへもコミュニケーションが
     大切になってきた！
     

     View Slide

231. テクノロジー同士がコミュニケーションして
     いろいろな未来が見えてくる！
     

     View Slide

232. 伝える手段もどんどん変わるいま
     

     View Slide

233. みなさんも是非どんどんと
     技術を広げて関わってみて下さい
     

     View Slide

234. がんばりましょう！
     

     View Slide

235. 前半授業はここで終了です
     質問あれば是非書いてみましょう
     

     View Slide

236. 質問フォームにどしどし質問ください
     確認よろしくお願いします！
     

     View Slide

237. これも質問が来るとログが出るようにしてます
     Microfost のクラウド Azure で Node-RED が受け付けてます
     

     View Slide