Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LLA_2_20230321.pdf

myasu
March 21, 2023

 LLA_2_20230321.pdf

ラブライブ!学会 第2回大会 Day1
https://lovelive-academy.com/
https://lovelive-academy.com/pdf/abstract-2nd.pdf

myasu

March 21, 2023
Tweet

More Decks by myasu

Other Decks in Programming

Transcript

  1. ラブライブ!で IoT !!
    1
    ラブライブ!学会 第2回大会
    2023年3月

    View full-size slide

  2. 自己紹介

    ● おしごと
    ○ 現在) 医療系IT・ソフト開発、他
    ○ 過去) 製造業。某電機 → 某農業機械 の ”生産技術”
    ■ 生産技術・・・「製品を作る工場」を作る仕事
    ● 「ラブライブ!」との出会い
    ○ 某(ぶっぶー)電機社で、○みかけてた・・・
    ○ 当時(2013年1月頃)、無印1期3話のライブシーンを見て感動
    ■ 「逃げちゃダメだ」「このまま居てはダメだ!」
    → 転職
    ■ 心に余裕ができて、個人でいろいろなモノ作り活動を開始!
    myasu

    @etcinitd :モノ作り
    @myasuhb:推し活
    Github
    @trihome
    2
    Qiita
    @myasu
    muse
    = μ’s

    View full-size slide

  3. モノ作り活動
    「備中絡繰製造所」名義で自主製作・自主開発
    ● モノ作り :Maker Faire 出展
    ● 同人誌 :コミックマーケット 出展
    ● 技術系の勉強会へ参加、発表など
    3
    コミケで”技術系”同人誌頒布
    モノづくり展示会

    View full-size slide

  4. お伝えしたいこと
    ● IoTってなに?
    ● ラブライブ!とIoTを、どのように使うの?
    ○ 推し活”カイゼン”にチャレンジ
    ● 自分で作ってみたい!どうやって作るの?
    ○ 作例の紹介、情報の集め方
    4

    View full-size slide

  5. 1.IoTってなに?
    5
    なんとなく、聞いたことある・・・?

    View full-size slide

  6. "Internet of Things" - IoT
    ● 様々なモノがインターネットにつながる仕組み
    ● それを活用した製品の例
    ○ スマートロック
    ○ ロボット掃除機
    ○ Google home, Alexa, AirTag
    ○ 皆さんのお仕事の中でも・・・
    6
    (画像:pixabay.com)

    View full-size slide

  7. 2.どのように使うの?
    7
    ラブライブ!とIoTを繋げるための、考え方

    View full-size slide

  8. ラブライブ! x IoT
    着目するところ ~ ”カイゼン”
    ● 自分の推し活で、ちょっとした「困りごと」を解決する仕組みを作ること
    例)
    ● ペンライトの色替えを間違えないようにするのが大変・・・
    ● ライブ中の現場はSNS投稿(ツイート)ができない・・・
    ● コロナ禍で現場に行けず、家でペンライト振っていても侘しい・・・など
    8

    View full-size slide

  9. (カイゼン・その1)IoTペンライト
    ● 音声認識でペンライトを色替え
    ● ペンライトを”振る”ことで自動ツイート
    9
    (画像:twitter.com)

    View full-size slide

  10. (カイゼン・その1)IoTペンライト・実機
    ● 音声認識でペンライトを色替え
    ● ペンライトを”振る”ことで自動ツイート
    出典・日経BP 2018教育とICT
    10

    View full-size slide

  11. (カイゼン・その2)AIラブライバー
    ライブ動画を見ながら、一緒にペンライトを振る
    ● カメラでライブ画像を定期的に撮影
    ○ 動画に映っているキャストの顔を画像解析
    ○ キャストの名前を判別
    ■ そのキャストのメンバーカラーに
    ■ ペンライトを色換え
    ○ 電動で振り動作する
    11

    View full-size slide

  12. (カイゼン・その2)AIラブライバー・実機
    ライブ動画を見ながら、一緒にペンライトを振る
    ● カメラでライブ画像を定期的に撮影
    ○ 動画に映っているキャストの顔を画像解析
    ○ キャストの名前を判別
    ■ そのキャストのメンバーカラーに
    ■ ペンライトを色換え
    ○ 電動で振り動作する
    出典・日経BP 2020教育とICT
    12

    View full-size slide

  13. 3.つくりかた
    13
    自分で作ってみたい!どうやって作るの?

    View full-size slide

  14. いきなり「作ろう!」と言われても・・・
    14
    ⎛(cV≧Д≦V⎞ドウシタラ イイカ ワカラナイヨー
    ● やりたいことの断片が分かれば・・・
    ○ Tips(やり方)が探せる!
    ● やりかたはどこにあるの?
    ○ Webで検索すると、いろんな例がたくさんある!
    ● ”やりたい事”と”やり方”を、ひとつずつ組み立ててみよう!

    View full-size slide

  15. 小型パソコン Raspberry Pi を活用
    ● イギリス生まれの、教育用コンピュータ
    ● HDMI出力、USBポート、無線LAN、有線LAN
    ● 価格:8£~(元々は約1200円、今は数千円~2万円くらい・・・)
    15
    “Raspberry Pi Zero W” “Raspberry Pi 3 b+” (写真:Switch Science, raspberrypi.org)
    65mm
    Linux等のOSが使える

    View full-size slide

  16. 小型パソコン Raspberry Pi を活用
    16
    ● デジタルの入出力部分を装備(電気信号をやりとりするしくみ)
    ● 趣味での工作や、組み込みなどの業界(最近のガジェット的な電気製品)向けに普
    及が進む この部分・デジタル入出力

    View full-size slide

  17. 小型コンピュータ micro:bit
    ● イギリス生まれの、教育用コンピュータ
    ● Scratchとよばれるプログラム言語で記述
    ● 加速度センサ、明るさセンサなどを搭載
    17
    (写真:Switch Science, microbit.org)
    この部分・デジタル入出力
    40mm

    View full-size slide

  18. 3.1.つくりかた
      ~ IoTペンライト
    18

    View full-size slide

  19. ”やりたい事”と”やり方”
    ● 全体を動かすプログラムは?
    ○ プログラム言語 Pythonを使う
    ● 音声認識の方法は?
    ○ 現場のネットワークが繋がりにくい事を想定・・・(べ、ベルーナドーム
    ○ 単独で動く、Juliusというライブラリ(アプリ)を使う
    ● ペンライトを”振る”ことを検知するには?
    ○ microbitを、ペンライトを持つ腕に巻いて、加速度センサで検知
    ○ 振りを検知したら、RaspberryPiに無線通信(Bluetooth)で信号を送る
    ○ TwitterAPIを使って、手操作をすることなく、ツイートする
    ※(実際は色々な実験をして、上記の考えに辿り着きました)
    19

    View full-size slide

  20. 仕組み・音声認識から色替えまで
    20
    あんちゃ~ん!
    (画像:いらすとや)
    音声認識して
    文字に変換
    「あんちゃん」
    色番号(コマンド)
    に置き換え
    「1」
    ペンライト側に
    コマンド「1」を
    送信
    コマンド「1」を
    受信
    切り替えに必要な
    スイッチのクリック
    回数を計算
    スイッチの
    クリックを
    電気的に操作
    無線(Bluetooth)
    色が変わる
    マイク

    View full-size slide

  21. 実際の機材
    21
    1. ペンライト
    2. 送信側microbit+腕時計型の入れ物
    3. 咽頭マイク
    4. 音声→USB変換
    5. 受信側microbit
    6. USBハブ
    7. RaspberryPi
    8. USBモバイル電源

    View full-size slide

  22. 仕組み
    ● 咽頭マイクで声を拾う
    ○ ねらい・周囲の騒音遮断
    ● キャストさんの”愛称の読み”の辞書を元
    に音声認識
    ● ペンライトを”振った”動きを、micro:bit搭
    載の加速度センサをトリガに使って、現
    在色のキャスト名をツイート
    22
    愛称の読みの「辞書」※

    音声の認識実験をする中で、どうしても誤認識する
    キャストさんは、本来の愛称と異なる表記になって
    います・・・(推しの方、ごめんなさい
    なまえ 色番号(コマンド) なまえ 色番号(コマンド)
    あんちゃん 0・みかん色 あいきゃん 5・ホワイト
    りかこ 1・サクラピンク きんちゃん 6・イエロー
    すわわ 2・エメラルドグリーン あいにゃ 7・ヴァイオレット
    ありさ 3・レッド ふりりん 8・ピンク
    しゅか 4・ライトブルー

    View full-size slide

  23. 各機能の構成・ソフトウェア
    23

    View full-size slide

  24. 各機能の構成・ハードウェア
    24

    View full-size slide

  25. 25
    動画の説明
    サクラピンク

    (📣すわわ~)

    エメラルドグリーン

    (📣ありしゃ~)

    レッド

    (📣すわわ~)

    エメラルドグリーン

    View full-size slide

  26. 自動ツイートの実験の様子
    26
    ● ヴァイオレット👋(ブレード振る)
    ● みかん色👋
    ● ピンク👋
    ● レッド👋
    ● エメラルドグリーン👋

    View full-size slide

  27. ただし。残念ながら・・・
    27
    ● レギュレーションに抵触のため、現場には持ち込めません!
    ● 公式さま、是非作って~🙏⎛(cV≧Д≦V⎞
    現場では使えないけど・・・
    ● ネットの使えないところでの音声制御に活用できる! (画像:ラブライブ!公式 Webページ)

    View full-size slide

  28. 3.2.つくりかた
      ~ AIラブライバー
    28

    View full-size slide

  29. ”やりたい事”と”やり方”
    ● 全体を動かすプログラムは?
    ○ プログラム言語 Pythonを使う
    ● キャストさんの顔画像の認識方法は?
    ○ Darknet + YOLOというライブラリ(仕組み)を使う
    ● ペンライトを振る動きは?
    ○ 電動シリンダという産業向けの装置を使う
    ※今回は、画像認識の技術の部分だけを紹介します
    29

    View full-size slide

  30. 外観
    できるだけ、
    一般のご家庭 逸般の誤家庭にあるものを使う
    30

    View full-size slide

  31. 各機能の構成・ソフトウェア
    31

    View full-size slide

  32. 各機能の構成・ハードウェア
    32

    View full-size slide

  33. 各機能の構成・ハードウェア
    33
    産業向け通信システムを使って、100個単位の配置も可能な構成!!
    (ニジガク2ndの現場に間に合っていたらなぁ・・・)

    View full-size slide

  34. キャスト顔認識の学習データの準備
    ● 画像認識の学習に用いる画像は、1200枚 程度準備
    ○ Webクローラーを使って収集。キャスト9人分の学習データ
    ● アノテーション(キャスト画像とキャスト名の対応付け)
    ○ LabelImageを使用
    ○ 1枚ずつ手作業。”推し”の方々の画像なので、まったく苦にはならない!!
    ● 学習の実行環境
    ○ Google Colabを使用
    ○ darknetのソースと、アノテーション済のデータを Google Driveにアップロード
    ○ Google Colab上でdarknetのソースをコンパイル
    ○ Google ColabのGPUを有効にして、学習を実行
    34

    View full-size slide

  35. キャスト顔認識の学習データの準備
    35
    手作業でのアノテーション作業の様子
    (顔の部分を囲む→「あんちゃん」としてラベル付け)
    アノテーションが終わった画像の一部

    View full-size slide

  36. キャスト顔認識の学習データの準備
    36
    Google ColaboratoryとGPUを使って学習を進める 学習の進捗推移のグラフ

    View full-size slide

  37. 学習データの評価
    37
    ● とくにチューニングしていない状態で、正答率80%程度
    ○ (少々間違っても困らないので、ヨシ!)
    ● 今回使った小型パソコン(Raspberry Pi4)の性能では、物足りない・・・
    ○ 画像撮影 → 画像認識 → キャスト名変換まで  10~30秒・・・
    ○ (放っておけば横で勝手に動いてるので、ヨシ!)

    View full-size slide

  38. ペンライトの制御
    (IoTペンライトと概ね同じ仕組み)
    ● 画像認識→キャスト名に変換
    ● 左記の辞書を元に、キャストに対応する
    ペンライトの色情報を得る
    ● 動作1:発光色を切り替える信号をペン
    ライトへ送る
    ● 動作2:電動シリンダを上下動作させる
    指令を送る
    38
    なまえ 色番号(コマンド) なまえ 色番号(コマンド)
    あんちゃん 0・みかん色 あいきゃん 5・ホワイト
    りかこ 1・サクラピンク きんちゃん 6・イエロー
    すわわ 2・エメラルドグリーン あいにゃ 7・ヴァイオレット
    ありさ 3・レッド ふりりん 8・ピンク
    しゅか 4・ライトブルー

    View full-size slide

  39. (作り方の詳細は・・・)
    新刊を、今後のコミケ、あるいは技術書典で発行する予定なので、そちら
    の記事で解説します・・・
    39

    View full-size slide

  40. 3.3.つくりかた
      ~ 情報の集め方
    40

    View full-size slide

  41. どこから情報を集めるの?
    41
    ● 書籍
    ● Webページ
    ● コミュニティ

    View full-size slide

  42. Webページの情報を活用
    ● Qiita https://qiita.com/
    ● Zenn https://zenn.dev/
    IT技術、電気技術
    ● hackster.io https://www.hackster.io/
    ● instructables https://www.instructables.com/
    (英語です)いろいろな作例豊富
    42
    (写真:Qiita、hackster.ioページ)

    View full-size slide

  43. Webページ・Qiitaの例
    ラブライブ!系の技術記事
    https://qiita.com/tags/ラブライブ!
    43
    (写真:Qiitaページ)

    View full-size slide

  44. コミュニティの活用
    ● CONNPASS https://connpass.com/
    ○ コミュニティ活動のポータルサイト
    ■ IT系が多め、モノ作り系も多数あり
    ○ 有志・企業で作られたグループ
    ■ 有名なアノ会社も・・・!
    ○ 2020年以前は現地に行って参加するものが多数
    ○ コロナ事情もあって最近はオンライン開催に・・・
    ○ (2020年以降、大変参加しやすくなりました・・・)
    44
    (写真:CONNPASSページ)

    View full-size slide

  45. コミュニティの活用
    (一例)
    ● IoT縛りの勉強会! IoT LT ※
    ○ https://iotlt.connpass.com/
    ○ IoT系の製作事例を多数紹介
    ● IoT ALGYAN
    ○ https://algyan.connpass.com/
    ○ IoT技術の講演(日本マイクロソフト他)
    ○ ハンズオン→手を動かして作ってみる
    ※LT:LightningTalk・・・持ち時間5~10分程度で多人数が発表する形式
    45
    (写真:CONNPASS内各コミュニティページ)

    View full-size slide

  46. コミュニティの活用
    ● ラブライブ!系のコミュニティは、いまの
    所、無い・・・
    ● アイドルマスターさんの例 →
    ○ https://imas.connpass.com/
    46
    (写真:CONNPASSページ)

    View full-size slide

  47. 情報発信
    ● 試したこと、作ったモノは思い切って”情報発信”しよう!
    ○ ”Connecting The Dots” (Steve Jobs)
    ○ コミュニティで登壇発表、 Webで執筆、同人誌・・・
    ○ ”その情報”を知りたい人は、想像以上に多い!
    ● 学校や職場を超えたつながりへ
    ○ 雑誌、書籍の執筆の声かけ
    ○ 転職のきっかけ、スタートアップ企業へのジョイン・・・
    人生を変える きっかけになった「ラブライブ!」シリーズには、心から感謝!!
    47
    コミケC101での出店

    View full-size slide

  48. 4.まとめ
    48

    View full-size slide

  49. まとめ
    ● IoTって、以外と簡単に自分で作れる!
    ● 身の回りの、ちょっとした”カイゼン”に気軽に適用してみよう
    ○ やりたい事の断片が分かれば、 Tips(やり方)が探せる(Web、コミュニティ)
    ○ ”Done is better than perfect.” 「多分動くと思うからリリースしようぜ」でいい!
    ■ 自分で使える範囲で作りきる、活用する!
    ● 情報を得る側から、発信する側になろう
    ○ コミュニティへの登壇、 Webで執筆、同人誌即売会で頒布
    ● 推し活”カイゼン”で知見を広め、より良い 「Love Live! days!!」を!
    49

    View full-size slide

  50. ー 参考文献 ー
    (主にWebページ上の情報)
    ● Qiita https://qiita.com/
    ● Zenn https://zenn.dev/
    (作品紹介記事)
    ● 日経BP 2020教育とICT 2018教育とICT
    (著書)
    ● IoTの製作 Vol.1 (コミケC96)
    ● ラズパイマガジン2017年4/5月号(日経BP社)
    50

    View full-size slide

  51. 有り難うございました
    51

    View full-size slide