昔のプログラミング生放送勉強会みたく弾幕を貼る方法を考えてみた
0.はじめに
この記事は「プロ生ちゃん Advent Calendar 2018」2日目の投稿になります。
参加賞狙いでAdventカレンダーに参加しました。
私は、ありふれたただのおじさんなので自己紹介は無しです。
私がプロ生ちゃんを初めて知ったのは多分YouTubeだと思います。
プロ生勉強会の録画動画で紹介されていたので初めて知りました。
その当時はプロ生勉強会はニコ生でライブしていたのでニコ生名物の弾幕が楽しみになりました。
残念ながら最近はツイッターやYouTubeでライブ放送している事が多いので弾幕があまり見れなくなりました。（※）
そこでニコ生以外のライブ配信でも弾幕が貼れる簡単な方法を考えました。
※追記
11/24のプロ生名古屋勉強会ではYouTubeのコメントを流していたようでした。
1.考えた方法
分かりづらいかもしれませんがイメージ図にすると以下みたいな感じになります。
マストドンとHTMLファイルとJS１個※１で弾幕を実現します。
マストドンはツイッター代替として話題になったSNSです。
- remark.jsを利用してHTML+Markdownでスライドを作る
- nicosreen.js（改造版）で弾幕を表示できるようにする
- HTML内JSでWebSocket通信でマストドンとストリーミング通信する
- マストドンから特定のタグ付きで投稿する
- ストリーミングデータからタグで判定して弾幕を表示する
これで弾幕が貼れるはずと思って試してみました。
※１ remark.jsとjQueryはCDNを利用
2.試した結果
以下の動画の通りです。ローカルのHTMLファイルでマストドンからストリーミングした特定タグのデータを表示出来ています。
スライドにマストドンから弾幕を貼るテスト
https://www.youtube.com/watch?v=yBQm2PCVLIM
ちゃんとプロ生ちゃんのスライドに弾幕が貼れました(*^^)v
3.参考にした記事等
作成にあたって参考にした記事等は以下です。
- remark.js
gnab/remark
有名なスライド作成用JSライブラリです。
- nicoscreen.js
ニコ動のような流れるコメントを表示するJQueryプラグインのご紹介！！
弾幕を貼るためのjQueryプラグインです。少し改造して使いました。
- Mastodon Timeline Peeping Tool
yukimochi/Mastodon-Timeline-Peeping-Tool
マストドンからストリーミング通信するためにこのツールを参考にしてます。
4.コード
一応、HTMLとJSはコードのリンクを貼っておきます。あまりきれいじゃありませんが…(;^_^A
HTMLのサンプル
https://privatebin.net/?5190495b39c2b658#Dw9mdyFUxQQezuKBulVl9qyKw5ZXz7g8y95q3OttPkI=
nicoscreen2.js（nicoscreen.jsの小改造版）
https://privatebin.net/?1c544fdf90bbf60c#jVDch/DE2eDNqyHdPc4daWqTtsmzqs2tncRBEn+nnu8=
nicoscreen.jsの改造箇所は以下です。
- 表示箇所をremarks.jsに合わせるため#nicoscreen→.remark-slides-areaに変更
- envのloopをfalseに変更
5.まとめ
テスト結果の通り、ニコ生じゃなくても弾幕は貼ってもらえるのでremark.js使うといいんじゃないかと思います。
弾幕のたくさんあるプロ生、また見たいですね。
プロ生のマストドンなんてのもいいかなと思います。
以 上