Zenn
🧑‍💻

私自身がツクりたいものを追い求めた結果、一般に公開できない成果物ができちゃったお話

2021/05/18に公開
AWS
Docker
MySQL
Ruby
ストリーミング
tech

● 私専用のオリジナル ミュージックストリーミングプレイヤーを Ruby on Rails で、超 カンタンに造ってしまったお話です。

私は、radiko にプレミアム登録し、関東圏の放送局をエリアフリー聴取するほど ラジオ > テレビ なユーザーです。
その中でも、 J-WAVE 81.3 FM RADIO が Weekday の 16:30〜 放送している J-WAVE GROOVE LINE の中の MIX MACHINE を切り取って普段から聴いているくらいお気に入り 🥳

※ 私がラジオ番組のダウンロードに使用しているものは こちら です。

元々、 YouTube Music のロッカー機能を利用して、聴いていたのですが、中々 使いにくい。
他に何か良いものないかなぁ… と思っていたときに、「プログラミングを勉強したのなら自分でツクればええやん！」となったことが始まりです。

● 技術仕様

その他 諸々 合わせて 3,000円程度かな？
RDS はこれ以外にも使用するし、S3 はメディアストレージとして他にも使用すると考えたら、まぁまぁ ありなのではないでしょうか。
ロスレスオーディオを提供している音楽ストリーミングサービスが約 2,000円以下なのを考えると妥当かな？だって、 一般のサービスでは配信されないものを置いてるからね！

● データベース設計

○ ユーザー管理機能

  • Devise | Ruby Gems で生成される User テーブルを使用しています。

○ 音楽（MIX MACHINE）ファイル管理機能

Field Type Null Key Default Extra
id bigint NO PRI NULL auto_increment
name varchar(255) NO NULL
title varchar(255) YES NULL
release_date date NO NULL
created_at datetime(6) NO NULL
updated_at datetime(6) NO NULL

● 全曲 シャッフル再生 機能

_controller.rb
'モデル名'.readonly.sample
  # 全レコードの中から、1つのレコードをランダムで抽出する。
  # 上書き保存をすることはないので、読み取り専用として取り出す。

# 直近に再生されたものが再び 再生されないようにする。
session[:'セッション名'] = Array.new('値')
  # 最初にスタートする際のみ、セッションをリセットする。
session[:'セッション名'].unshift @music.id
session[:'セッション名'].delete_at('値')
  # 今回 再生されるレコードの ID をセッションに保存する。

while session[:'セッション名'].include?(@music.id) do
  'モデル名'.readonly.sample
    # 取り出されたレコードがセッションに保存されている ID の場合は再抽出する。
end

● 音楽プレイヤー画面を作成する。

<%= audio_tag("https://***.cloudfront.net/#{'S3 のキー名'}", controls: true, autoplay: true, onended: "location.href='リンク先のパス'; ") %>

  • controls: true
    → 音楽の再生，停止 等を操作するコントローラを表示する。

  • autoplay: true
    → 音楽の自動再生を ON にする。

  • onended: "location.href='リンク先のパス'; "
    → 再生が完了したら指定したリンク先に遷移する。

【参考文献】 onended 属性について…

Q. <audio> タグで自動再生って、ちゃんと動くの？

結論言うと、Google Chrome 様が「あなたは、このサイトでよく音声聴いているから、これからもこのサイトの自動音声は許しておくね！」っていう状態なのが現状です。

● Google Chrome の自動再生ポリシー
  1. 動画の音声がミュートであること
  2. <iframe> タグに自動再生の許可を委ねること
  3. その他、以下の場合に許可される。
  • モバイルユーザーの場合は、サイトをホーム画面に追加しているか。または、デスクトップで PWA をインストールした。
  • デスクトップユーザーでは、過去に再生したことがある（メディアエンゲージインデックスが閾値を超えている）こと。
  • ユーザーがドメインにアクセスしたことがある。

デスクトップ版において、「設定」 > 「サイトの設定」 > 「音声」 にて、URL を許可している状態が Google アカウントでモバイル版と同期し、何度かサイト上で再生すると自動再生が許可される状態に認識されているのではないかと推測しています。

【参考文献】 Google の Autoplay 属性 ポリシー変更について…

● Docker で開発環境を構築する。

  1. MySQL データベースコンテナを起動させて、各アプリケーションコンテナとやり取りをおこなうために、 $ docker network create 'ネットワーク名' を実行して、Docker ネットワークを生成する。

  2. $ docker run --name 'コンテナ名' --network 'ネットワーク名' -it -v 'ローカル環境にデータを保存しておくパス':/var/lib/mysql -e MYSQL_ROOT_PASSWORD='パスワード' -d --rm 'イメージ名'
    を実行して、MySQL データベースコンテナを起動する。

  3. Dockerfile を新規作成し、 $ docker build -t 'イメージ名' . Docker イメージを生成する。

Dockerfile
FROM ruby:3.0.1

RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
  && apt-get update && apt-get install -y vim nodejs \
  && npm install --global yarn && gem install rails -v '6.1.3.2'

WORKDIR /var/www/'アプリケーション名'
ADD . /

RUN bundle install

  1. $ docker run --name 'コンテナ名' --network 'ネットワーク名' -it -v 'ローカル環境にデータを保存しておくパス':/var/www/'アプリケーション名' -p 3000:3000 --link 'MySQL のコンテナ名':'MySQL のホスト名' -d --rm 'イメージ名'
    を実行して、 Ruby の開発用コンテナを起動する。

  2. ローカルサーバを起動する際は、 $ docker exec -it 'コンテナ名' rails s -p 3000 -b '0.0.0.0' を実行する。

【参考文献】 Docker コンテナ間でデータ通信をおこなう。

【参考文献】 Docker コンテナ間でデータ通信をおこなう。

Discussion