まったり技術ブログ

Webエンジニアのセキュリティブログ

【開発日誌】『生つべ』というサービス作ったので利用技術の紹介

先日、『生つべ』というWebサービス開発しました。リリースをしたのはよいが「完成!」と言えるような状態になるのは、まだまだ時間が掛かりそう。
どのようなサービスなのかを簡単に説明をすると「YouTubeの動画を皆で見ながらチャットしようよ」というもの。

namatube.motikan2010.com

ソースコードも公開してある。

github.com

利用している技術・API群の紹介

認証

このサービスでは、動画の登録にはログインすることが必要です。
 「Twitter」と「GitHub」アカウントを用いたOAuth認証方式のみをサポートしています。

サービス内だけの認証(ログインIDとパスワードを登録)も用意しようか迷いましたが、最近のWebサービスでは、認証方法にOAuth認証のみというのを目にするようになっているので、今回はOAuth認証のみとしました。(2つのサービスのOAuth認証は少ないと思われるが・・・)

この記事通りにやったらできました。

【Rails4.2.x】omniauth(twitter/facebook/github)実装まとめ - Qiita

◆ なぜGitHubアカウント?
 Twitterアカウントは多くの人が持っているので、認証方法として適していると思うが、なぜこのサービスに持っている人が限られているであろうGitHubアカウントを用いているかというと、こんな経緯があったりします。
 サービス開発の当初は、技術者向けのサービスとして開発しようと考えいました。具体的には、YouTubeをはじめとするニコニコ動画などといった動画配信サービスに登録されている技術系の動画を1つのサイトにまとめ、検索・評価できるようなサービス。 の予定だったが、途中で微妙...と感じ断念_(:3 」∠ )_ 。

もともとは「Tech TV」というサービス名だったという名残があります。

add アイコンの追加 · motikan2010/NamaTube@714a89f · GitHub

チャット

f:id:motikan2010:20180712213852p:plain

Rails5になって「Action Cable」というWebSocketを簡単に扱えるようになる機能が追加されたので利用しました。

Action Cable の概要 - Railsガイド

モデルの構成など大枠の作成こちらを参考にしました。

Rails 5 + ActionCableで作る!シンプルなチャットアプリ(DHH氏のデモ動画より) - Qiita

今回は動画毎にチャットルームが異なるようになっているので、ルーム毎にメッセージを送る方法は下記を参考にしました。

Rails 5 Action Cable メッセージとルームを紐付ける。 - Qiita

タグ生成

f:id:motikan2010:20180712214102p:plain  動画新規登録時のタグ生成の処理は「Google Natural Language API」を利用して実現しています。 その中のエンティティ分析を活用することにより、動画タイトルから固有名詞のみを抽出し、タグとして登録しています。

Googleクラウド自然言語APIを使ってみた - Qiita

▼ APIを利用しているのは、この辺り

NamaTube/analyze_entity_util.rb at 20180710 · motikan2010/NamaTube · GitHub

動画の再生位置の制御

f:id:motikan2010:20180712214135p:plain 動画の埋め込みは「YouTube Player API」を利用しています。このAPIを活用することによって、動画ページを開いた時の再生位置を制御できています。

iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API

動画再生ページを開いた時の時間によって再生位置を決めていますので、このサービスの肝である「みんなが同じ動画を見ている」というはこの部分で実現されています。

▼ この辺りで再生位置の計算・制御を行っている

NamaTube/videos.js at 20180710 · motikan2010/NamaTube · GitHub

動画のタイトル・再生時間の取得

動画のタイトルや長さを取得は「YouTube Data API」を利用しています。

API Reference  |  YouTube Data API  |  Google Developers

▼ APIを利用しているのは、この辺り

NamaTube/youtube_api_util.rb at 20180710 · motikan2010/NamaTube · GitHub

動的なフロント部分

 動的なUIを実現するために「jQuery」と「React」で迷ったのだが、保守的なことを考えてReactを採用することにしました。JSXの方がタグ構造を直感的に把握しやすく、書き直しが簡単だと感じているので。  フロントに関しては、ほぼ知識がないようなものなので、とりあえず動くのを目指して実装。

新規登録画面

f:id:motikan2010:20180712215519p:plain

まずはこっちの方をReactで実装した。
▼ソースコード NamaTube/new.js at 20180710 · motikan2010/NamaTube · GitHub

編集画面

f:id:motikan2010:20180712215534p:plain
 最初は「React DnD」というライブラリを利用して、ドラッグ&ドロップで上下移動させることを考えていたのだが、想像よりも実装に時間が掛かりそうだったので断念。
 結局、ボタン押下で上下移動させるようにした。

React DnD

▼ソースコード

NamaTube/edit.js at master · motikan2010/NamaTube · GitHub

今後(TODO)

▲優先度高

  • トップページ(ランディングページ)の作成
  • スマホ向けのレイアウト
  • OAuth認証の対象を増やす
  • HTTPS化
  • マイページの拡充
  • アプリ固有のエラー画面の作成
  • React(フロント)側のリファクタリング
  • MySQLへの移行

▼優先度低