Skip to content

ポッドキャスト各エピソードにサムネイルの代わりに YouTube 埋め込みプレイヤーを表示 #1821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yasulab merged 1 commit into from
Apr 25, 2026
Merged

ポッドキャスト各エピソードにサムネイルの代わりに YouTube 埋め込みプレイヤーを表示 #1821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion app/controllers/podcasts_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ def show
@url = request.url
@title = @episode.title.split('-').last.strip
@date = @episode.published_date.strftime("%Y年%-m月%-d日（#{Podcast::WDAY2JAPANESE[@episode.published_date.wday]}）")
@youtube_id = @episode.content.match(Podcast::REGEX_YOUTUBE_ID)[1]
@content = Kramdown::Document.new(
self.convert_shownote(@episode.content),
input: 'GFM').to_html
Expand All @@ -45,8 +46,10 @@ def convert_shownote(content)
content.gsub!(/(#+) Shownote/) { shownote }

return content unless content.match?(Podcast::REGEX_YOUTUBE_ID)
youtube_id = content.match(Podcast::REGEX_YOUTUBE_ID)[1]
embed = render_to_string(partial: 'podcasts/youtube_embed', locals: { youtube_id: youtube_id })
content.gsub!(/<a[^>]+>\s*<img[^>]+Cover Photo[^>]*>\s*<\/a>/m, embed)
return content unless content.match?(Podcast::REGEX_TIMESTAMP)
youtube_id = @episode.content.match(Podcast::REGEX_YOUTUBE_ID)[1]
content.gsub!(Podcast::REGEX_TIMESTAMP) do
original_t = $1
parts = original_t.split(':')
Expand Down
3 changes: 2 additions & 1 deletion app/models/podcast.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
class Podcast < ApplicationRecord
self.table_name = 'podcasts'
DIR_PATH = 'public/podcasts'
WDAY2JAPANESE = %w(日 月 火 水 木 金 土)
WDAY2JAPANESE = %w(日 月 火 水 木 金 土)
YOUTUBE_PLAYLIST_ID = 'PL94GDfaSQTmJxxnapafkApHYgQUJ6ABUU'
# Match timestamps at the beginning of lines (YouTube format)
REGEX_TIMESTAMP = /^((\d{1,2}:)?\d{1,2}:\d{2})/
REGEX_YOUTUBE_ID = /watch\?v=((\w)*)/
Expand Down
5 changes: 5 additions & 0 deletions app/views/podcasts/_youtube_embed.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:20px;'>
<iframe src='https://www.youtube.com/embed/<%= youtube_id %>?list=<%= Podcast::YOUTUBE_PLAYLIST_ID %>&rel=0'
style='position:absolute;top:0;left:0;width:100%;height:100%;'
frameborder='0' allowfullscreen loading='lazy'></iframe>
</div>
11 changes: 3 additions & 8 deletions app/views/podcasts/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,8 @@

h1#title { margin-top: 30px; margin-bottom: 20px; text-align: center; }
.episode h2 { margin-top: 100px; }
.episode-cover {
margin: 30px auto;
@media screen and (min-width: 640px) {
max-width: 70%;
}
}
.episode-cover img { margin-bottom: 20px;}
.episode-cover { margin: 30px auto; }
.episode-cover img { margin-bottom: 20px; }
.episode ul {
padding-left: 0px;
list-style: none;
Expand All @@ -45,7 +40,7 @@
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCal5GuoCDCMDQe07w69TuJA" data-layout="full" data-count="default"></div>
</div>

<section class="text-center list" style='margin-bottom: 30px;'>
<%= render 'shared/social_buttons' %>
</section>
Expand Down
36 changes: 18 additions & 18 deletions spec/features/podcasts_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
@podcast = create(:podcast)
allow(@podcast).to receive(:exist?) { true }
allow(@podcast).to receive(:exist?).with(offset: -1) { false }
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\n..." }
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\nhttps://www.youtube.com/watch?v=test123\n..." }
allow(Podcast).to receive(:find_by).with(id: @podcast.id.to_s) { @podcast }

visit "/podcasts/#{@podcast.id}"
Expand All @@ -26,7 +26,7 @@
scenario 'Load doc file with absolute path' do
@podcast = create(:podcast)
allow(@podcast).to receive(:exist?) { true }
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\n..." }
allow(@podcast).to receive(:content) { "title\n収録日: 2019/05/10\nhttps://www.youtube.com/watch?v=test123\n..." }
allow(Podcast).to receive(:find_by).with(id: @podcast.id.to_s) { @podcast }

visit "/podcasts/#{@podcast.id}"
Expand All @@ -40,15 +40,15 @@
scenario 'Show note timestamps are converted to YouTube links' do
@podcast = create(:podcast)
allow(@podcast).to receive(:exist?) { true }
allow(@podcast).to receive(:content) {
allow(@podcast).to receive(:content) {
<<~CONTENT
タイトル
収録日: 2019/05/10

YouTubeリンク: https://www.youtube.com/watch?v=Dd9IYiF0R6E

## Shownote

00:00:00 米国系 IT 企業から CoderDojo へ、233台のノートPC寄贈
00:25:01 AI と遊んでみる回の動画 https://youtu.be/BYpa1CcYtss?t=1425
00:59:14 CASE Shinjuku 利用者と CoderDojo の繋がり
Expand All @@ -59,13 +59,13 @@

visit "/podcasts/#{@podcast.id}"
expect(page).to have_http_status(:success)

# タイムスタンプがYouTubeリンクに変換されているか確認
expect(page).to have_link '00:00:00', href: 'https://youtu.be/Dd9IYiF0R6E?t=00h00m00s'
expect(page).to have_link '00:25:01', href: 'https://youtu.be/Dd9IYiF0R6E?t=00h25m01s'
expect(page).to have_link '00:59:14', href: 'https://youtu.be/Dd9IYiF0R6E?t=00h59m14s'
expect(page).to have_link '01:00:57', href: 'https://youtu.be/Dd9IYiF0R6E?t=01h00m57s'

# 既存のURL付きタイムスタンプはそのまま表示されること
expect(page).to have_content 'AI と遊んでみる回の動画 https://youtu.be/BYpa1CcYtss?t=1425'
expect(page).to have_content 'CASE Shinjuku の英語アクセスページ https://case-shinjuku.com/english'
Expand All @@ -74,15 +74,15 @@
scenario 'Show note timestamps with mm:ss format are converted to YouTube links' do
@podcast = create(:podcast)
allow(@podcast).to receive(:exist?) { true }
allow(@podcast).to receive(:content) {
allow(@podcast).to receive(:content) {
<<~CONTENT
タイトル
収録日: 2019/05/10

YouTubeリンク: https://www.youtube.com/watch?v=test123

## Shownote

00:30 オープニング
05:45 メインテーマ
59:59 エンディング
Expand All @@ -92,7 +92,7 @@

visit "/podcasts/#{@podcast.id}"
expect(page).to have_http_status(:success)

# mm:ss形式のタイムスタンプもYouTubeリンクに変換されているか確認
expect(page).to have_link '00:30', href: 'https://youtu.be/test123?t=00m30s'
expect(page).to have_link '05:45', href: 'https://youtu.be/test123?t=05m45s'
Expand All @@ -102,15 +102,15 @@
scenario 'Show note timestamps with m:ss format (single digit minutes) are converted to YouTube links' do
@podcast = create(:podcast)
allow(@podcast).to receive(:exist?) { true }
allow(@podcast).to receive(:content) {
allow(@podcast).to receive(:content) {
<<~CONTENT
タイトル
収録日: 2019/05/10

YouTubeリンク: https://www.youtube.com/watch?v=episode21

## Shownote

0:00 ゲスト自己紹介
0:54 TFabWorks 無償レンタルプログラム
2:10 2019年の年末から動き出した
Expand All @@ -121,7 +121,7 @@

visit "/podcasts/#{@podcast.id}"
expect(page).to have_http_status(:success)

# m:ss形式（一桁の分）のタイムスタンプもYouTubeリンクに変換されているか確認
expect(page).to have_link '0:00', href: 'https://youtu.be/episode21?t=0m00s'
expect(page).to have_link '0:54', href: 'https://youtu.be/episode21?t=0m54s'
Expand Down
Loading