Help us understand the problem. What is going on with this article?

Go+Nuxt+etc...を使ってライブ配信サイト+Twitterのコメビュを作ってみた

この記事はJsys Advent Calendar 2019の記事です
Qiita初投稿になりますので色々と突っ込みどころがあるかもしれないです

やったこと

Go+Nuxt+その他諸々を使ってリアルタイムにライブ配信サイト10種+Twitterの特定のハッシュタグでつぶやかれた内容を自動的に表示するソフトフェアを作った

目次

  • 使った言語+フレームワーク
  • 実行に必要な前提要件
  • 使い方
  • 実装方法
  • 感想的な何か

使った言語+フレームワーク

フロントエンド

  • Nuxt.js
    フロントをモダンに書きたいのと使い慣れてるので採用

サーバーサイド

  • Go
    個人的な慣れで採用
    オブジェクト指向のような手続き型のような謎の言語
    モダンな書き方が大体採用されてる
    青いホリネズミがキモカワイイ

  • フレームワーク

    • Gin
      高機能なHTTP/HTTPS通信用フレームワーク
      Nuxtから吐き出した静的ファイルを一行でルーティングできたりする
    • Melody
      小機能のWebsocket通信用ライブラリ
      Javascriptライクな実装ができたり、セッション情報を一時的に保存できる機能が元々あるなど地味に便利

前提要件

  • IFTTT
    スプレッドシートにTwitterのデータをぶっこ抜くのに使用
    Twitter・Google Driveとのインテグレーションをオンにしておくこと
  • Google Service Account
    スプレッドシートからローカルサーバーへデータを転送するのに使用
  • MultiComment Viewer
    Youtube等の配信サイトからのデータをぶっこ抜くのに使用
  • HTML Comment Generator
    コメントのデータをひっぱるのに使用

使い方

  1. マルチコメントビューワーでHTML5コメジェネのパスを通す
  2. マルチコメントビューワーで通常通りコメントを収集する
  3. localhost:8080にアクセスする
  4. コメントが表示されるようになる
  5. カラーキーを指定して背景をぶっこ抜くことでOBS上で一定時間以上コメントがない場合は自動的に透明になるよ!

実装方法

  1. localhostにアクセスされたらconfigを読み出し、Websocketでの通信に切り替える
  2. TwitterからIFTTTを通してスプレッドシートに送られたデータと、マルチコメビュから出力されたxmlを読み込む
  3. 2で得られたデータの今までに送信したデータとの差分を取って残りをwebsocketで送る
  4. 受け取ったらキューに格納して一定時間ごとに取り出す
  5. キューの中にデータが一定時間以上なくなったら表示部分をopacity: 0;にして消去

感想的な何か

そもそもローカルでしか動かないのにサーバーサイドとは()
現在アプリケーションとして開発中です・・・

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした