はじめに
サーバーサイドの副業をいただいた。所属してる「やんばるエキスパート」というオンラインプログラミングスクールで、募集があった。内容は教材サイトで埋め込まれているYoutube動画をモーダル化できるようにしてほしいというものだった。
動画モーダル化とは、クリックすると動画がポップアップするような状態である。今回は「modal-video.js」というJSのプラグインを使用する。
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | スタッフブログ | appleple
報酬は10,000円だった。楽しそうだったので手をあげた。
教材サイトはこちら
やんばるエキスパート教材
やることのまとめ
依頼した人(たけさん)からは要件の書き込みがあった。それをもってまとめた。
- modal-videoを用いて,モーダルで動画を再生できるように修正
- DB内のhttps://www.youtube.com/embed/動画ID に変換しているが,これを動画IDとなるように修正(※modal-videoは動画URL全部ではなく、動画IDのみ使用するため。)
- DBの動画テーブルのカラム名を url から channel_id に変更
- DB内のhttps://www.youtube.com/embed/動画IDの形式を全て動画IDに変換するrakeタスクを作成
- 今までのカードの動画部分は,YouTubeのサムネイル画像を表示するように変更(画像は動画と同じ16:9の想定)
やっていこう。
githubへissue追加/ブランチ作る
まずは教材のリポジトリへissueを追加した。上記の要件を書き込む。こうすると、あとで読みやすい。プルリクのときにissue番号を添えてやればわかりやすい。
そうしてdevelopブランチのコードを自分のローカル環境へクローンした。ブランチをつくった。developからfeature/....という要領で機能追加用のブランチを派生させた。いつものやり方である。やっていこう。
DBカラム名の変更
いきなりカラム名の変更とはできない。まずはローカル上にもDBを作らないといけない。以前も同様の業務があり、幸いpostgreSQLなどの開発環境は構築できていた。dbをつくってmigrateする。
$ rails db:create $ rails db:migrate
カラム名を変更する。以下を参考にした。
$ rails generate migration rename_url_column_to_Movies
これでmigrationファイルが生成された。生成されたファイルを編集する。
db/migrate/20210806190323_rename_url_column_to_movies.rb
class RenameUrlColumnToMovies < ActiveRecord::Migration[5.2] def change rename_column :movies, :url, :channel_id end end
OK。あとはrails db:migrateを行なって反映させる。
RSpecの変更
カラムがurlがchannel_IDとなると、いろいろと変わるところがある。まずはテストコードをすこし変えないといけない。
spec/models/movie_spec.rb
...略 context "channel_id が存在しないとき" do let(:movie) { build(:movie, channel_id: nil) } it "エラーする" do expect(movie).not_to be_valid expect(movie.errors.messages[:channel_id]).to include "を入力してください" end end ...略
ダミーデータを生成しているfactoryの方も変更しないといけない。
spec/factories/movies.rb
FactoryBot.define do factory :movie do sequence(:title) { |n| "#{n}_#{Faker::University.name}" } - sequence(:url) { |n| "#{n}_#{Faker::Commerce.department}" } + sequence(:channel_id) { |n| "#{n}_#{Faker::Address.city}" } association :genre, factory: :genre end end
Fakerというのはダミーデータをたくさん生成していくれる楽しいgem。
rakeタスク作成
さて、カラム名を変更してもDBに残っているデータはurl形式のままになっている。これを一括で変更できるようにしたい。そんなrakeタスクを作る。どうしようかと考えていたら答えはすでにコードの中にあった。
app/models/movie.rb
... before_save do format_url = YoutubeUrlFormatter.format(url) .... end ...
movieモデルを作成する前にYoutubeUrlFormatter.formatという関数を実行していた。これはなにをしているのか。
lib/autoloads/youtube_url_formatter.rb
class YoutubeUrlFormatter SRC_REGEX = ...なんらかの正規表現 YOUTUBE_ID_REGEX = ...すっごい正規非表現 def self.format(url) src_match = SRC_REGEX.match(url) url = src_match[1] if src_match youtube_id_match = YOUTUBE_ID_REGEX.match(url) "https://www.youtube.com/embed/#{youtube_id_match[1]}" if youtube_id_match end end
正規表現を使って、これがyoutube埋め込み用のURLかを判断していた。戻り値が「https://~~~/動画ID」となっていた。私はこの戻り値をIDのみにすればよかった。
そういった関数を新たに作り、rakeタスクも作った。「rails c」とコンソール上で確認したらseedデータはうまく動画ID形式になって保存されていた。よかった。
Active Adminに動画IDを保存するときのエラー
でもこのままだとエラーになることがあった。管理者画面(ActiveAdmin)経由で、channel_IDカラムにもう一度IDを保存するときである。これはさきほどの関数に条件を追加したらうまくいった。入力引数が/または=を含んでいなかったら(url形式でなかったら) 変換はせず、そのまま戻り値にすることにした。
動画モーダル化
いよいよフロント側を実装する。といってもプラグインがあるので、それを付け加えるだけだった。
子供が起きたのでここまで。非常に楽しい副業だった。またやりたい。
Photo by Patrick Hendry on Unsplash