はじめに

こんにちは！大ちゃんの駆け出し技術ブログです。

今回はYouTube動画とツイートを表示させる方法について書きたいと思います。これはRUNTEQの応用編で習うものなのです。 RUNTEQで紹介している技術なので現場でも使うのかなと思いまして今回記事にしてみることにしました。

今回はRUNTEQのYouTube動画は以下の動画です。

youtu.be

本記事での使用アプリ

今回はいわゆる現場Railsと言われるRUNTEQで推奨している書籍のアプリを使用します。

www.amazon.co.jp

いつも自分はrails newを使ってscaffoldを作り1から実装したり、みなさんが使用していないアプリを使っていますが、みなさんが手元で同じアプリを使用して実装する方が遥かに理解ができるかなと思いました。

現場RailsのChapter7まで終えていればアプリの状態は同じです。今回の実装ではTaskモデルに対して、新たにカラム「media_url」を実装して、それをタスク詳細画面のビューに表示するように実装します。

現状のタスク詳細画面は以下のようになっています。

ここにYouTube動画の埋め込みをできるように実装します。

カラムを追加

media_urlカラムをタスクテーブルに追加します。

$ rails g migration AddYoutubeUrlToTasks media_url:string
Running via Spring preloader in process 14590
      invoke  active_record
      create    db/migrate/20210210071748_add_youtube_url_to_tasks.rb

マイグレーションファイルは以下のような感じになっています。

class AddYoutubeUrlToTasks < ActiveRecord::Migration[5.2]
  def change
    add_column :tasks, :media_url, :string
  end
end

このままDBにカラムを反映させましょう。

$ rails db:migrate

無事カラムが追加されました。

# db/schema.rb
create_table "tasks", force: :cascade do |t|
  t.string "name", null: false
  t.text "description"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.bigint "user_id"
  t.string "media_url"
  t.index ["user_id"], name: "index_tasks_on_user_id"
end

パラメーター取得の設定

次にapp/views/tasks/_form.html.slimに新しく作成したカラムを入力できるようにします。

# app/views/tasks/_form.html.slim
.form_group
  = f.label :image
  = f.file_field :image, class: 'form-control'
# 追加↓↓↓↓↓↓
.form_group
  = f.label :media_url
  = f.text_field :media_url, class: 'form-control'

コントローラのパラメーターの取得にmedia_urlを追加します。

# app/controllers/tasks_controller.rb
def task_params
  params.require(:task).permit(:name, :description, :image, :media_url)
end

URLハッシュ値取得用のメソッドを定義

また、独自メソッドとしてsplit_id_from_youtube_urlを定義します。

# app/models/task.rb
def split_id_from_youtube_url
  media_url.split('/').last if media_url.present?
end

これはURLの後ろの部分を取得するためです。例えば、YouTubeの共有URLを見てみましょう。

https://youtu.be/nB3ceSVmHeY

YouTubeのURLはその動画を表すハッシュ値がyoutu.be/以降に存在します。split('/')によってURLを'/'ごとに分割した配列に変更します。

task.media_url.split('/')
=> ['https:', 'youtu.be', 'nB3ceSVmHeY']

そしてlastメソッドにより最後のハッシュ値のみを取得しています。

Task.media_url.split('/').last
=> 'nB3ceSVmHeY'

これによりその動画固有のハッシュ値が取得できるようになります。

詳細ページを編集

最後にタスク詳細ページにビューを追加します。src:オプションで先ほど定義したsplit_id_from_youtube_urlメソッドを使用しています。

tr
  th= Task.human_attribute_name(:image)
  td= image_tag @task.image if @task.image.attached?
# 追加↓↓↓↓↓↓
tr
  th= Task.human_attribute_name(:media_url)
  td= content_tag 'iframe', nil, src: "https://www.youtube.com/embed/#{@task.split_id_from_youtube_url}", \
      frameborder: 0, gesture: 'media', allow: 'encrypted-media', allowfullscreen: true