React Naitve でYouTube埋め込もうとしたら1日潰した話

1. React Nativeで
YouTubeを埋め込もうとしたら
Androidで一日潰した話
2017.4.21
Yugo Matsumoto / @ymmmo1

2. 一日潰したやつについて
• Yugo Matsumoto / @ymmmo1
• NHN comicoでフロントエンドエンジニア
• 最近、monacaで友人が作っていたアプリを引き継いで、RNでリファク
タし始めました。
• 大体、このアイコンで活動します。→

3. いい感じにできたIOSの話

4. • まず、Google先生に相談
• 実例もなければ、記事もない。
• IOS自体はどうしているのか調べる。
• UIWebViewを使うと簡単に埋め込めるよって書いてあった！
• React Nativeでできんの？

5. React NativeのWebViewは
UIWebViewのようです！
https://github.com/facebook/react-
native/blob/da9a712a9e17942dcd05b8d955f0764c2026a4ad/React/Views
/RCTWebView.m
次、唐突にコードです。

7. デモりたいけど時間ないから
スクショ貼っときます

9. • もうこれでいい気がする。
• こんな簡単なんて、なんてReact Nativeは素晴らしいんだ！
• 高さを設定しないと潰れてしまうので、
Dimensionsを利用して、横幅を取得し、 ☓ 0.5625 する
• 0.5625はWEBでレスポンシブYouTube埋め込みをしようとしたときに
使う数値
マジ簡単だった

10. いい感じにできなかったAndroidの
話

11. • どんな感じなのか見せたいがもう環境がないため、見せられないで
す。すいやせん。
• ざっと説明すると、
再生ボタンをおしても、黒背景に読み込みのぐるぐるがずっと表示さ
れていて再生することができない。
とりあえず、Androidで見てみる。

12. おまえんとこのOSだろうが！

13. • 案の定、React Nativeはどこ探しても有力な手がかりはなかった。
• Androidはどうなのか調べる。
• AndroidのWebViewは微妙らしく、YouTubeの再生はブラウザのみで
はできないらしい。
• なにが必要なの？
気を取り直して調べる

14. Androidで
YouTubeを再生するには
YouTubeのアプリが必要

15. • たしかに、Androidの携帯は基本的に、Googleアプリ系はプリインス
トールされていた気がする。
• 僕は、Genymotionのシミュレーターを使っていたので、アプリ入って
いませんでした。
• 実機で確認している方は関係のない話かもしれない。
ほう…

16. Qiitaの記事を参考にして、
Play StoreをD&Dでインストール
http://qiita.com/sampo02/items/63b4ed1f19102a838932

17. • AndroidでWebViewを利用したYouTube再生ができた！
• これもまた、見せたいのですが環境がもうないので
見せられないです。
• なぜ再生できたのに環境がないのか、
そう、まだ問題があります…
お前んとこの(ry
再生できました。

18. 全画面再生ができない！！

19. • 調べてみると、AndroidはWebViewでフルスクリーンはなにかしないと
見れないようでした。
• RNのIssueにも上がっていたが、解決せず、そもそもAndroidの問題
だからRN関係ない？
• じゃあどうするの？？困ってるんですけど！！
全画面再生ができないのはきつい

20. YouTubeAPIを使えと
Googleが言っている気がした。

21. • API用意しているんだから、WebViewじゃなくてこっち使えってメッセー
ジと捉えれば、まぁ言っていることはわかる気がする。
• APIを利用するということは、Javaを書くということか…
• フロントからきた僕にとっては、YouTubeの埋め込みでこんな重たそ
うになるとは…
• 諦めるのはまだ早いので、何かないかと探してみました。

22. React Native YouTube
https://github.com/inProgress-team/react-native-youtube

23. • YouTubeAPIを利用して、YouTubeのComponentを返してくれるありが
たいやつ。
• 使い方が若干敷居高いような気がするけど、GitのREADMEは古い。
騙されちゃいけない。
• 下記のURLを参考にすると、react-native-linkだけで使えるようにな
る。簡単！
https://www.npmjs.com/package/react-native-youtube-fork
RN YouTubeとは…

24. ちなみに、YouTube APIは動画の上に何かを
載せると怒ります。
左の例だと「矯正」の部分で怒ります。
なので、対策取ります。
対策と言ってもサムネイル画像を取得して、そ
の上に再生アイコンを配置して、
クリックされたら動画のみを配置した
Componentに遷移させるだけです。

25. できた！！

26. • 使い方自体はすごく簡単だった。
• 使うときに調べればわかるけど、APIキーが必要なので、
ネットで調べて取得しよう！
• IOSにも対応している…
React Native YouTube

27. IOSにも対応しているはずなんですけど、
僕は画面真っ白で使うことができませんでした。
もしこの中で使えた人いたら教えてください…
ちょっと困ってます。

28. • 1日潰したのは技術ではなく、調べること自体が大変だったためだと
思う。
• 案外探してみると、優しいエンジニアはいる。
• シミュレーターを使うときはプリインストールアプリは入れておいたほ
うが困ることないかも。Google Play入ってるとなにかと便利。
• 環境ないとか言ってるけど、元に戻すのめんどうだっただけ。
まとめ

29. ご清聴ありがとうございました！！