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

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

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

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

https://danmaku.ojisan.dev/videos

33ef4c1ebe619115b552db9a9f9a3509?s=128

sadnessOjisan

January 31, 2022
Tweet

More Decks by sadnessOjisan

Other Decks in Programming

Transcript

  1. div の上に コメントを流す技術 おのうえ研名誉ゼミ生 @sadnessOjisan

  2. 自己紹介 - sadnessOjisan - 尾上研究室名誉ゼミ生 - #times_seriousness_ojisan - 日大にいたことない -

    JAIST卒 - 教育心理学、オントロジー工学 - 地域コミュニティの共助意識についての研究 - 初等教育者のメンタリング知識の語彙の整理
  3. Webプロ最終成果発表会? - 󰢃Webプロ最終成果発表会 - 󰢏新春おのうえ研隠し芸大会

  4. 実は2回目 - 去年は無限メルカリレシート - メルカリの商品をバーコードでクリックできる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 に寄贈したい