audiobook.jp作品のサンプルコンテンツを埋め込める様になりました

こんにちは、普段サーバーサイドやWeb開発をやりつつフロントエンド入門中の岩Dです。
コロナも怖いですが、そろそろインフルエンザも怖くなってくる時期ですね。皆様インフルエンザの予防接種はお済みですか？私は午前に予防接種を受けてきて左腕が重い今日この頃です。

さて、今回のネタは「Embed (埋め込みコンテンツ)を作ってみた」です。

Embed って？

鈴村健一・堀江由衣共演！『君の膵臓をたべたい』

この様な感じで、ブログやWebページ内にYoutubeなどのコンテンツを埋め込んで表示ができるもので、埋め込んだページ内で動画や音声の再生などが出来たり、ページが華やかになったりと様々な良いことがあります。

参考 oEmbed

実装した Embed

今回実装したのがこの Embed です。この様にオーディオブックの書籍画像とサンプル音源の再生画面が表示され、audiobook.jp の商品ページへ行かずともサンプル音源が再生できる様になっています。
※サンプル音源が備わっていない作品につきましては、Embedを埋め込んでも再生画面が表示されません。

Embed 埋め込みサンプル

<iframe
  width="100%"
  height="253"
  src="https://audiobook.jp/embed/product/234391"
  frameborder="0"
  scrolling="no">
</iframe>

実装要件

この Embed は以下の様な要件で実装されております。

• PC/SP で縦幅が同じになる様にする
• 様々な端末で表示ができる様レスポンシブ対応にする
• 社内デザイナーがデザインした様な見た目のサンプル音源再生を実現する
• サンプル音源がない場合はサンプル音源再生部分に商品概要を表示させる
• タイトル、著者などの表示について、PCでは1行で、SPでは2行で表示させて Embed の横幅を超える場合は省略表示させる
• 販売されていないオーディオブックが埋め込まれた場合、コンテンツが表示できない事を表示させる

気を遣った点

縦幅について

PC/SP で表示が若干異なるものの、縦幅を同じにしなければいけない要件がありました。著者の情報がないもの、サンプル音源がないものなど表示内容に欠損があったとしても縦幅が変わる事なく表示できる様にするため、各項目の表示領域に対して親要素の幅から計算し height を適切な値で設定する事で Embed の高さが変わらない様にしています。また、SP表示の時はサンプル音源再生の部分が書籍画像の下に配置されますが、書籍画像のサイズをPC表示より少し小さくし、PC表示と同じ高さになる様に色々計算をしています。

PC表示

SP表示

サンプル音源の再生について

サンプル音源の再生について、今回は <audio> タグと MediaElement.js を使い、css で見た目の最終調整をして表示させています。

before

after

これは、audiobook.jp の商品ページ(君の膵臓をたべたい by audiobook.jp)などで表示しているサンプル音源再生の部分でもほぼ同じ仕組みが使われていますが、 css で見た目を調整するだけで随分と変わるものですね。

終わりに

PC/SPで Embed の縦幅が同じになる様にし、様々な端末で表示できる様レスポンシブ対応させつつ、サンプル音源再生を表示させるなど様々な苦労点がありました。一番こだわったサンプル音源再生の部分については、再生・停止ボタンを変更した以外は css で見た目の調整をしたのみで、さほど手間をかけずに良いものができたと思います。

今回の様な見た目として反映されるものを作るのが好きなので、今後もこの様な見た目を良くする仕事をしていきたいです。

また、この Embed について社内 note にも記載があるのでこちらも併せてどうぞ。 note.com

末筆になりますが、水樹奈々さん妊娠おめでとうございます。お子様にはぜひ「おやすみ、ロジャー」をお読み聞かせください。