マトリョーシカ的日常

ワクワクばらまく明日のブログ。

プログラミングの副業をもらったので、詳しく書いた。

f:id:kyokucho1989:20210905061140j:plain

はじめに

 サーバーサイドの副業をいただいた。所属してる「やんばるエキスパート」というオンラインプログラミングスクールで、募集があった。内容は教材サイトで埋め込まれている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 に変更
  • 今までのカードの動画部分は,YouTubeのサムネイル画像を表示するように変更(画像は動画と同じ16:9の想定)


やっていこう。

githubへissue追加/ブランチ作る

 まずは教材のリポジトリへissueを追加した。上記の要件を書き込む。こうすると、あとで読みやすい。プルリクのときにissue番号を添えてやればわかりやすい。

 そうしてdevelopブランチのコードを自分のローカル環境へクローンした。ブランチをつくった。developからfeature/....という要領で機能追加用のブランチを派生させた。いつものやり方である。やっていこう。
 

DBカラム名の変更

 いきなりカラム名の変更とはできない。まずはローカル上にもDBを作らないといけない。以前も同様の業務があり、幸いpostgreSQLなどの開発環境は構築できていた。dbをつくってmigrateする。

 $ rails db:create
 $ rails db:migrate

 カラム名を変更する。以下を参考にした。

Rails カラム名変更方法 - Qiita

$ 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形式でなかったら) 変換はせず、そのまま戻り値にすることにした。

動画モーダル化

 いよいよフロント側を実装する。といってもプラグインがあるので、それを付け加えるだけだった。



f:id:kyokucho1989:20210905060830p:plain


子供が起きたのでここまで。非常に楽しい副業だった。またやりたい。


Photo by Patrick Hendry on Unsplash