情報処理学会 インタラクション 2021
IPSJ Interaction 2021

1A01
2021/3/10

実世界と動画を連携した
IoT プログラミング学習支援システム
川谷 知寛1

塚田 浩二1

栗原 一貴2

概要：近年，IoT が一般化している中で，Arduino や Raspberry Pi などの IoT デバイスの動作や仕組みを他者と共有する機会が増えてきている．この際，ソースコードやテキストのみではデバイスの振る舞いを伝えることは困難であるため，オンラインでのチュートリアル動画が広く利用されている．しかし，チュートリアル動画は，従来のテキストと比較すると，ソースコードとのリンクが弱く，動画上のデバイスの挙動の詳細理解が難しいという問題がある．そこで，本研究では，Web 上のチュートリアル動画に対して，時間軸に応じたスクリプト言語を埋め込むことで，特定のタイミングで IoT デバイスを制御できるシステムを開発する．本稿では，システムのコンセプトと機能，及び実装例を紹介する．

1. はじめに問題がある．前者については，動画を見ながら対応のソースコードを探すのは見る場所が増えてしまうため効率が悪

近年，IoT(Internet of Things) のような，身の回りのもくなる．一方，動画上でソースコードを解説する場合は，のとインターネットを繋げたアイテムが一般化しつつあ製作者の手間もかかる上に，ユーザは直接コードを編集でる．この中でも，手軽に IoT デバイスに触れることができきないため，柔軟性に欠ける．後者については，ユーザはる Arduino や Raspberry Pi などを個人で利用する場面も動画を見ながら自分の手元でデバイスを動かせないため，少なくはない．また，小学校でのプログラミング教育が必センサをどのくらい傾けたら数値が変化するかなど感覚が修化 [6] され，授業でもブロックプログラミングを使用し掴めない．このような理由から，ユーザは動画を視聴してて回路やセンサに触れる機会もある．さらに，コロナ禍にデバイスの挙動を軽く理解することはできても，手元のデ伴い大学でのプログラミング演習のオンライン化も急速にバイスでの再現を行うのは簡単ではないと考える．

進められており，オンラインでのプログラミング教育支援の必要性も増えている [5]．

IoT プログラミング学習の特徴として，コードを書いてPC 上で実行する従来のプログラミング学習と違い，マイコンなどのデバイスの物理的な装置の振る舞いがあることが挙げられる．そのため，テキストや写真などの静的コンテンツではデバイスの振る舞いを伝えることは困難であるため，オンラインでのチュートリアル動画が広く利用されている．また，IoT プログラミング学習では，動画の内容やソースコード，ユーザの手元にあるデバイスや回路と言った複数の要素を意識して学習していく必要がある．したがって，初学者はこの複数の要素のどれを意識すればいいのか・どこから見ればいいのか，分からずに困ってしまうということがある．

図 1 システムの概略図

さらに，チュートリアル動画は，ソースコードとのリンクが弱く，さらには動画とデバイスのリンクがないという
1
2

公立はこだて未来大学
津田塾大学© 2021 Information Processing Society of Japan

そこで本研究では，IoT デバイスのチュートリアル動画にスクリプト言語を埋め込むことで，実世界の IoT デバイスと Web 上でのソースコード提示を制御し，動画視聴者

103情報処理学会 インタラクション 2021IPSJ Interaction 2021

1A01
2021/3/10の学習を支援するシステムを提案・開発する．例えば，図1 のような動画上のデバイスの動きに対応して，実世界のデバイス操作とソースコードの提示を行うことができる．
システムを用いることで，動画視聴者のデバイスに関する理解度の上昇やモチベーションの向上といった効果が期待できる．

2. 関連研究時系列コンテンツの特定時刻にスクリプトを実行することは，Adobe Flash の時代から広く用いられてきたが，その用途は主にアニメーションへのインタラクティブ性の付与等に限定されていた．Sikuli[7] は，プログラムに画像を使用して，自動化補助や検索を行えるようにしたシステ

図 2 システムのコンセプト図

ムである．動画にスクリプトを関連づけて拡張する例として，Text Alive[1] や Songle Sync[2] がある．これらは，解デバイスの連動と，動画とソースコードのスムーズな連携析された音楽情報を基にした動画アニメーションの作成，ができるシステムの構築を目指す．そこで，以下の２点のスマートフォンなどの様々な実世界のデバイスと連動させシステム要件を満たす必要があると考えた．

ることができる．

1． ユーザの手元でデバイスが動作する：動画上でデバ

また，IoT デバイスと Web を連携する仕組みとしては，イスの挙動を見るだけでなく，実際に手元のデバイスが同

obniz Board*1 や m5stack*2 といったプラットフォームがあじ挙動をしたり，ユーザによる入力で動くことが詳細理解る．これらは電気回路と直接接続可能なマイコンであり，には必要だと考える．ユーザは手元のデバイスでプログラクラウドを介して，Web 上からソースコードの記述や実行ムを即時に実行することで，センサの感度やアクチュエーが可能なソフトウェアを備えている．このように，時系列タの駆動範囲等を体験的に理解することができる．また，コンテンツへのスクリプトの組み込みや，Web と実世界の動画と連動して手元のデバイスが動くという体験によっデバイスを連動させる仕組みは存在していたが，両者を統て，IoT デバイスの初学者の学習意欲の向上，維持にもつ合した試みはほとんど行われてこなかった．

ながるのではないかと考えている．

そこで本研究では，時系列コンテンツである動画にスク

2． デバイスの動作タイミングに合わせたソースコードリプトを埋め込み，Web と実世界のデバイスの連動を組みの表示：1 章で挙げた通り，動画上のデバイスの動作がソー合わせたシステムを作成し，動画視聴者の理解度の向上とスコードのどの部分実現されているか確認するのは難しい．

動画とソースコードのスムーズな連携を行う．

そこで，動画上でデバイスが動いたタイミングで，Web 上

3. 提案システム
3.1 システムコンセプト
システムのコンセプトを図 2 に示す．大きく分けて，Web上の要素である動画とソースコード，実世界の要素であるのテキストエリアに対応するソースコードをコピーなどの編集操作が可能な状態で自動的に表示することにより，動画とソースコードの連携を行えると考えた．

4. 実装

IoT デバイスの 3 つの要素がある．ここで，動画の時間軸

本研究では，動画視聴者が使用する閲覧システムと動画を中心として，ソースコードの表示や実世界の IoT デバイ製作者が使用する編集支援システムを作成した．この章でスの挙動を連携して制御する．ユーザは，Web 要素（動画は主に本研究のメインシステムである閲覧システムについとソースコード）を見ることによってデバイスの挙動と対て述べる．編集支援システムについては，5.2 で述べる.

応するソースコードの関係の理解しやすくなる．また，動閲覧システムのスクリーンショットを図 3 に，全体的な画と連動する手元のデバイスを見ることによって，動画だシステム構成図を図 4 に示す．システムは誰でもアクセス

けでは伝わらないデバイスの挙動を理解することができるしやすいように，Web アプリで実装した．実装には，フロと考える．

ントエンドに HTML, CSS, JavaScript 等を用いた．バッ
クエンドには，Google のクラウドサービスである Firebase

3.2 システム要件
本研究では，チュートリアル動画視聴時における動画と*1*2

https://obniz.com/ja/
https://m5stack.com© 2021 Information Processing Society of Japanを用いて，ホスティングとデータベースの管理を行った．
閲覧システムは，Web アプリ，YouTube 等の動画共有サービス，obniz 系マイコンといった要素から成る．Webアプリはソースコードエディタやデータベースを備えつ

104情報処理学会 インタラクション 2021IPSJ Interaction 2021

つ，外部からチュートリアル動画や動画に埋め込むスクリ

1A01
2021/3/10

4.1 使用する IoT デバイス

プトを読み込んでページに表示する．ソースコードエディ

チュートリアル動画の題材として，前述した obniz 系マタは，指定した言語の色付けなどを自動で行う CodeMirror

イコンの基本動作を解説したチュートリアル動画を作成すという JavaScript のライブラリを用いた．

る．obniz 系マイコンとは，obnizOS が導入された ESP32

動画に埋め込むスクリプトとしては，YouTube の字幕型マイコンのことである．これらは，マイコンの ON/OFFファイルに JavaScript を埋め込んで，特定のタイミングでやセンサ，IO 制御などをクラウドの API 経由で行えるた実行する srt.js というフレームワークを使用する．srt.js にめ，Web 上から操作することが可能になっている．また，ついては 4.2 章で詳しく述べる．図 5 の使用例にあるようデバイス毎に登録されている ID によって即座に Web と繋に，動画上で LED が光ったタイミングで，ソースコードげることができる．さらには，Web 上のエディタでコードエディタに対応するコードを表示しつつ，ユーザの手元にを書き即時実行したり，node.js を使用してローカル環境ある LED を光らせるといった流れになっている．

での実行も可能である．obniz 系マイコンを使う理由としては，JavaScript によって Web 上から操作が可能なため，後述する「srt.js」との相性が良いことが挙げられる．

4.2 srt.js
動画の特定時刻と連動して Web 要素の操作や，IoT デバイスを操作する手法として，JavaScript のフレームワークである「srt.js」[4] を使用する．この「srt.js」は，動画の字幕情報を記述するフォーマットである srt 形式のファイルを拡張し，時系列に応じて JavaScript の実行を指示する
図 3

閲覧システムのスクリーンショットフォーマットである．これによって，動画の特定のタイミングで対応するコードを実行することで動画やそれに伴うコンテンツを拡張することができる．動画上の何分何秒という時間を設定して，そのタイミングで実行するコードを記述していく（図 6）．書くタイミングで通し番号を設け，そこから改行までを 1 ブロックとしている．この機能を使って，デバイスを動かすタイミングやソースコードを表示するタイミング，ハイライトの切り替えなどを操作する．
また，YouTube の動画を操作するための YouTube Player

API を標準で実行できる．例えば，動画の再生や停止，指定の時間までスキップなどが行える．この機能によって，手元のデバイスに注目させたい時や，ソースコードを見て欲しい時などに動画の管理を行うことができる．閲覧シス
図 4 システム構成図

テムでは，YouTube の動画 ID に応じた srt ファイルを外部データベースから読み込んでいる．

図 5 閲覧システムの使用例© 2021 Information Processing Society of Japan

図 6

srt.js 形式ファイルの記述例

105

情報処理学会 インタラクション 2021
IPSJ Interaction 2021

4.3 Web アプリ

1A01
2021/3/10

ないことが挙げられる．そこで，デバイスに搭載されていWeb アプリの構成は図 3 のようになっており，YouTubeる加速度センサやジャイロセンサを利用して，ユーザがデから埋め込まれた動画表示部分，ソースコード表示部分，バイスを手に取っている時は動画を停止し，手から離すと動画概要欄などが付属している．そのうち Web 上の要素動画を再生する機能を作成した．実世界のデバイスの状態である動画とソースコードにおいては，図 7 のように注目によって動画の再生状態が変化するため，本研究の目的のさせたいコンテンツをハイライト表示させることができる．

１つである “実世界と動画の連携” にもつながっている．

ハイライト表示を切り替えるには，前述した srt.js に切り

しかし，この機能が使用できるのはデバイスに加速度セン替えたいタイミングでハイライト対象を指定する．手元のサが搭載されている場合に限られ，また動画を停止したまデバイスに注目させる方法として，obniz の画像を Web 上まにしたい時でも，デバイスを触っていなければ勝手に再に設置し, その画像を点滅させる簡易的な手法を用いた．

生されてしまうという制約がある．

手元のデバイスに注目させる手法に関しては，実世界の要素であるため，本機能で注目させることはできない．その5.2 動画編集支援システムため，現在様々な方法を検討中である．検討中の要素につ

これまでは閲覧システムを使う側に注目してきたが，本いては，5.1 で述べる加速度センサを利用して動画の操作

章ではコンテンツを作る側の支援について述べる．まず，を行う機能や，6.2 の議論において述べる．

コンテンツの作成をする際は，• 撮影者が事前にプログラムや IoT 作品を準備し，それらを解説しながら動画を撮影• 完成した動画を YouTube にアップロードし，動画を見返しながら動画上の挙動に合わせて，対応するコードを記述• 動画全体のコードを書き終えたら，srt 形式のファイルをデータベースにアップロードという手順で行っていた．この srt 形式ファイルを作成するには，動画上でデバイスが動作した場合に動画を停止して，秒数や対応のコードをエディタで手動で記述していく必要があった．この作業は非常に手間がかかるため，これを補助する編集支援システムの開発を進めている．
編集支援システムのスクリーンショットを図 8 に示す．
閲覧システムと同じく Web アプリであり，フロントエンド及びバックエンドにも同様の技術を使用している．画面下
図7

ハイライトの表示の例（上：動画のみ，下：動画とソースコード）側にあるタイムラインは動画の時間軸と対応しており，タイムラインをダブルクリックすることで，クリックした場

次に，Web アプリの処理の流れを述べる．ページがロー所に対応した動画の経過時間を自動で取得し srt ファイルドされる際に URL に指定した YouTube から動画 ID に対を編集できる．画面右上にあるコードエディタは，左側に応した動画を読み込む．その時，動画 ID に応じた srt ファ

制作者が事前に作成したコードを表示し，右側に srt ファ

イルを Firebase のデータベースから読み込んでいる．ペー

イルを記述できる．対応するコードをコピー＆ペースト等

ジにアクセスした際に使用する obniz マイコンの ID を入で記述し，編集の時間短縮につながるようにしている．最力し，ID を元に obniz マイコンと Web アプリを obniz ク

後に “ファイルを書き出す” ボタンを押せば，専用のデータラウドを介して接続する．接続を確認し動画を再生すると，ベースに srt ファイルがアップロードされる仕組みになっsrt ファイルが実行され，obniz のディスプレイへの接続確ている．アップロード後に閲覧システムの URL が提示さ認，各センサや LED などの使用準備を行う．その後，動画れ，すぐに動作を確認できる．の内容に合わせて任意のタイミングでソースコードやデバイスの操作，ハイライト切り替えを行う形になっている．

5. 応用例
5.1 IoT デバイスの状態に応じた動画の操作
手元のデバイスに注目しづらい要因の１つとして，ユーザが手元デバイスを触っている時でも動画の再生が止まら© 2021 Information Processing Society of Japan

6. 議論
ここでは，今までに作成したチュートリアル動画のコンテンツ事例を挙げつつ，動画作成者と視聴者からみたメリット，デメリットについて述べる．また，ユーザが動画と連動している手元のデバイスの動作を見逃してしまう問題についても議論する．

106情報処理学会 インタラクション 2021
IPSJ Interaction 2021

図 8

1A01
2021/3/10

srt 編集支援システムのスクリーンショット

6.1 コンテンツの撮影方法
これまでに，通常，ライブコーディング，動画と実世界のデバイスが連動している様子の 3 種類 (図 9) を作成した．

1 点目については，動画とソースコードをわかりやすく見ることができる反面，動画と手元のデバイスがいつ連動するのかや，ユーザの入力が必要な場面がわからないといった問題があった．
２点目については，動画上でソースコードの表示や口頭での解説があり，特定のタイミングで手元のデバイスがコードに対応した挙動をするため，コードとデバイスの相互理解に繋がりやすいと考える．しかし，コードを書きながら解説をしていくため，動画時間が長くなりやすく手軽さが失われてしまう．また，デバイスの挙動を伝えることができないため，複雑な IoT 作品になった時に動画本来の良さが失われてしまう可能性があると考えられる．
３点目については，手元のデバイスがいつ動くのかはわ
かりやすくなったが，肝心の動画が見づらいという問題点

図 9

３つの撮影方法の図．上から，通常，ライブコーディング，動画と実世界のデバイスが連動している様子があった．
以上の考察結果から，本研究のコンセプトに一番あっての UI や UX の改善を行い，システムに使用する動画コン

いる 1 点目の撮影方法を採用しつつ，手元のデバイスに注テンツの拡張も行っていく予定である．これらのコンテン目させる方法を整理／実装していきたい．

ツは，Web プログラミングのためのチュートリアルに関する調査研究 [3] を参考に作成していく．また，現在の課題

6.2 手元のデバイスへの注目であるユーザの注目をどこに向けさせるかの問題や，コン前述した通り，いつ手元のデバイスが動くのかわからずテンツの利用者／製作者を支援する機能の拡張を引き続き見逃してしまったり，ユーザの入力がいる場面がわからず検討していく．その後，実際にユーザを募ってシステムをに動画が進んでしまうという問題がある．これらの問題を使用してもらう評価実験を行っていく．

解決する手法として，現在は Web 上に obniz の状態を示したエージェントを点滅させる手法（図 3 の右下にあるデバイスの写真が点滅）を用いている．今後は，エージェント

参考文献[1]の表現の拡張や 5.1 で述べた機能の改善，動画上で何らかのアクションがあるタイミングを．時間軸として Web ア
プリ上に表示しておくという手法を検討していく．

7. まとめと今後の課題[2]

本研究では，IoT デバイスのチュートリアル動画にスクリプト言語を埋め込むことで，実世界の IoT デバイスとWeb 上でのソースコード提示を制御し，動画視聴者の学習を支援するシステムを提案・開発した．今後も，システム© 2021 Information Processing Society of Japan[3]

Kato, Jun and Nakano, Tomoyasu and Goto, Masataka.:
TextAlive: Integrated Design Environment for Kinetic
Typography, In Proceedings of the 33rd Annual ACM
Conference on Human Factors in Computing Systems,
pp. 3403-3412, (2015).
Kato, Jun and Ogata, Masa and Inoue, Takahiro andGoto, Masataka.: Songle Sync: A Large-Scale Web-based
Platform for Controlling Various Devices in Synchronization with Music, In Proceedings of the 26th ACM International Conference on Multimedia, pp. 1697-1705, (2018).
Kim, Ada. Suhkyung. and Ko, Andrew. Jensen.: A Pedagogical Analysis of Online Coding Tutorials, In Proceedings of the 2017 ACM SIGCSE Technical Symposium on107

情報処理学会 インタラクション 2021
IPSJ Interaction 2021

1A01
2021/3/10

Computer Science Education, pp. 321–326 (2017).
栗原一貴, 橋本美香. srt.js:映像コンテンツへの IoT 指向拡
張プログラム埋め込みフレームワーク, 日本ソフトウェア
科学会 第 23 回インタラクティブシステムとソフトウェアに関するワークショップ (WISS 2016) 論文集, pp.24-29,（2016）.
[5] 又吉 康綱, 中村 聡史. askTA : 消極的な受講生でも質問可
能なオンライン演習講義支援システム, 第 28 回インタラ
クティブシステムとソフトウェアに関するワークショップ（WISS 2020）, （2020）.
[6] 文部科学省（2020）：小学校プログラミング教育の手引（第三版）[7] Yeh, Tom and Chang, Tsung Hsiang and Miller, RobertC.: Sikuli: Using GUI screenshots for search and automation, In UIST 2009 - Proceedings of the 22nd Annual
ACM Symposium on User Interface Software and Technology, pp. 183-192, (2009).
[4]© 2021 Information Processing Society of Japan108