React.jsでBGMつきスライドショーを作る

React.jsの練習としてスライドショーアプリを作ってみました。

React Slideshow Sample f:id:sanshonoki:20170801050429p:plain

単なるスライドショーでは面白くないのでBGMをYouTubeから検索して流せるようにしました。

検索ボックスに曲名などのキーワードを入れてボタンをクリックすればYouTubeから検索してそれを自動再生するようにしてあります。お気に入りである AIさんの Story をテキストボックスの初期値に入れています。:-)

他にも

「スピッツ空も飛べるはず」
「Kiroro 未来へ」

あたり今回のサンプル写真のテーマ（子どもの成長）にハマるかなと思っています。他にもハマる曲があったらぜひ教えてください

コードはこちらにあり、public/images/slick/ 以下に好きな写真を置けばその写真を使ってスライドショーができるので興味ある方はご覧ください

github.com

BGM検索＆再生

やっていることはシンプルです。

YouTubeでキーワード検索する（GET https://www.youtube.com/results?search_query=...）
検索結果のhtmlから曲のId（data-context-item-id）とタイトルを抜き出す
iframeで表示する（https://www.youtube.com/embed/{曲Id}?autoplay=1）

React.js側からYouTubeページを取得しようとすると No 'Access-Control-Allow-Origin' header is present on the requested resourceエラーが出てアクセスできないのでYouTube検索はRails側でやっています。

スライドショー

スライドショー機能は React対応した react-slick があったのでそれを使いましたが表示で少し苦戦したのでメモ

写真が真ん中に表示されず左寄せになってしまう

以下の設定をCSSに加えることにより中央に表示されるようになりました。これで正しいやり方なのかはよく分かりません..

  div.slick-initialized div.slick-slide {
    display: flex;
    justify-content: center;
  }

左右のArrowが表示されない

slick-theme.cssでなぜか color: transparent になってました。なのでCSSを上書きすると表示されるようになりました。

  .slick-next:before, .slick-prev:before {
    color: gray;
  }