div 上にコメントを流す技術

2022年1月の日本大学文理学部、Webプログラミングの最終発表会(おのうえ研新春隠し芸大会)に、乱入した時の資料です。

https://danmaku.ojisan.dev/videos

Transcript

1. div の上に コメントを流す技術 おのうえ研名誉ゼミ生 @sadnessOjisan
2. 自己紹介 - sadnessOjisan - 尾上研究室名誉ゼミ生 - #times_seriousness_ojisan - 日大にいたことない - JAIST卒 - 教育心理学、オントロジー工学 - 地域コミュニティの共助意識についての研究 - 初等教育者のメンタリング知識の語彙の整理
3. Webプロ最終成果発表会？ - 󰢃Webプロ最終成果発表会 - 󰢏新春おのうえ研隠し芸大会
4. 実は２回目 - 去年は無限メルカリレシート - メルカリの商品をバーコードでクリックできるChrome拡張、 - クリックした結果をレシートして出力 - 無限に長いレシートを作って遊ぶ - その場にメルカリ社員がいたことを忘れていたポカを犯す
5. 今年作ったもの
6. 今年作ったもの きしめええええええ きしめええええええええん きしめええええええええん きしめええええええええん きしめええええええええん きしめええええええええん
7. つまりニコ動？ - ニコ動ではない - 無断で、動画の上にコメントを流すと怒られる - なので <div></div> の上にコメントを流せるサービスを作った - marquee タグでコメント流せば終わり https://danmaku.ojisan.dev/
8. DEMO https://danmaku.ojisan.dev/
9. できること - 背景を投稿 - リアルタイムにコメントを投稿 - プレミアム会員になるとAPI経由でコメントを投稿できる - つまり弾幕を作りやすい！ https://danmaku.ojisan.dev/
10. 技術的な話 - 真面目な話は面白くないので割愛 - 構成 - Client: NextJS, NextUI, CloudRun, Firestore, zod - Trigger/API: CloudFunctions, NodeJS, zod - IaC: Terraform CDK - 挑戦ポイント - Firebase を GCP 側から Terraform 経由で建てる - CloudFunctions, CloudRun のパイプラインを GitHub で握る - Firestore のトリガーを GCP の CloudFunctions から行う
11. ハマったところ - marquee タグが使えなくなっている - って今の若い子たちは marquee タグを知らないっか〜〜〜 ^^
12. marquee とは - <marquee>左に流れまーーーす</marquee> https://qiita.com/sadnessOjisan/items/51bb949466fdd065a5a6
13. marquee が使えない - marquee は HTML5 で deprecated になった - が、ブラウザが勝手に実装して使えていた - Chrome で amount オプション（繰り返し回数）が効かなくなっていた
14. CSSアニメーション
15. サービスに込めた想い - 0年代は著作権ガン無視で動画がアップロードされていた - 久々にログインしたら全部消えていた - 弾幕も全部消えていた -> 寂しい - 弾幕を保全したい - 著作権を違反しない形で弾幕を楽しめるサービスを作ろう！ https://danmaku.ojisan.dev/
16. 皆さんも弾幕を作ってください！
17. 皆さんも弾幕を作ってください！
18. 皆さんも弾幕を作ってください！
19. 皆さんも弾幕を作ってください！
20. 皆さんも弾幕を作ってください！
21. ＿人人人人人人人人人人＿ ＞　ボーナスステージ　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
22. この演出やってみたかった Thanks Oden君......
23. スロット スロット楽しいよな！！！！！！
24. スロットゲームをCLIで作った - 元ネタはGoで作るファイルパーミッションスロット - チャネルとGoroutineがあるとできるらしい https://qiita.com/jiro4989/items/2530c4f789916521a47a
25. hekopanda-cli-tools - Rust製CLI - スロットゲーム - グラビアモード https://github.com/sadnessOjis an/hekopanda-cli-tools
26. DEMO https://github.com/sadnessOjisan/hekopanda-cli-tools
27. なぜ Rust - Rustに channel と Goroutine 相 応のものがある - mpsc - native thread - CLI を作るための環境が揃ってい る - clap: CLI option parser - cross: cross compile https://speakerdeck.com/sadnessojisan/rust-depaso narukarawozhen-duan-dekiru-cli-wozuo-tuta
28. シングルバイナリで配布 - Homebrew でも配布 - brew tap sadnessOjisan/hekopanda - brew install sadnessOjisan/hekopanda - src: https://github.com/sadnessOjisan/hekopanda-cli-tools
29. チャネルとスレッド - スロットは無限ループ - スロットを止める命令を入力できない - スロット描画は別スレッドに切り出す - 停止命令をチャネルで送りつける
30. マルチスレッドプログラミングの常套手段 https://speakerdeck.com/sadnessojisan/sabaakitekutiyatofei-tong-qi-rantaimuiroiro
31. 困ったこと - コンパイル - TUI の作成
32. コンパイル - Win/Linux向けコンパイルでは C 側で怒られる - build.rs に依存を足せばできるかも（？） - めんどくさいので Mac だけサポート https://blog.ojisan.io/rust-ffi-cpp-wakaran/
33. TUIの作成 - Go の人が使っていたtermboxがRustでは動かない - 仕方ないので C実装の nurcess の Rust バインドを使う。歴史が長いので安 定してるはず。 - threadセーフでなく、スロットを止められない
34. TUIがなくてもスロットは作れる - 結局普通の標準出力で作った - 先頭に \r をつけると出力結果を書き換えられる - スロットの描画が可能
35. 想定される質問 - Q: どうやってへこぱんだのAAを作ったのですか？
36. 想定される質問 - Q: どうやってへこぱんだのAAを作ったのですか？ - A: 公式サイトから画像を持ってきて、AA変換ツールに食わせた
37. おしまい vdslab org に寄贈したい