Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React Nativeで
YouTubeを埋め込もうとしたら
Androidで一日潰した話
2017.4.21
Yugo Matsumoto / @ymmmo1
一日潰したやつについて
• Yugo Matsumoto / @ymmmo1
• NHN comicoでフロントエンドエンジニア
• 最近、monacaで友人が作っていたアプリを引き継いで、RNでリファク
タし始めました。
• 大体、このアイコ...
いい感じにできたIOSの話
• まず、Google先生に相談
• 実例もなければ、記事もない。
• IOS自体はどうしているのか調べる。
• UIWebViewを使うと簡単に埋め込めるよって書いてあった!
• React Nativeでできんの?
React NativeのWebViewは
UIWebViewのようです!
https://github.com/facebook/react-
native/blob/da9a712a9e17942dcd05b8d955f0764c2026a...
デモりたいけど時間ないから
スクショ貼っときます
• もうこれでいい気がする。
• こんな簡単なんて、なんてReact Nativeは素晴らしいんだ!
• 高さを設定しないと潰れてしまうので、
Dimensionsを利用して、横幅を取得し、 ☓ 0.5625 する
• 0.5625はWEBでレ...
いい感じにできなかったAndroidの
話
• どんな感じなのか見せたいがもう環境がないため、見せられないで
す。すいやせん。
• ざっと説明すると、
再生ボタンをおしても、黒背景に読み込みのぐるぐるがずっと表示さ
れていて再生することができない。
とりあえず、Androidで見てみる。
おまえんとこのOSだろうが!
• 案の定、React Nativeはどこ探しても有力な手がかりはなかった。
• Androidはどうなのか調べる。
• AndroidのWebViewは微妙らしく、YouTubeの再生はブラウザのみで
はできないらしい。
• なにが必要なの?...
Androidで
YouTubeを再生するには
YouTubeのアプリが必要
• たしかに、Androidの携帯は基本的に、Googleアプリ系はプリインス
トールされていた気がする。
• 僕は、Genymotionのシミュレーターを使っていたので、アプリ入って
いませんでした。
• 実機で確認している方は関係のない話か...
Qiitaの記事を参考にして、
Play StoreをD&Dでインストール
http://qiita.com/sampo02/items/63b4ed1f19102a838932
• AndroidでWebViewを利用したYouTube再生ができた!
• これもまた、見せたいのですが環境がもうないので
見せられないです。
• なぜ再生できたのに環境がないのか、
そう、まだ問題があります…
お前んとこの(ry
再生できま...
全画面再生ができない!!
• 調べてみると、AndroidはWebViewでフルスクリーンはなにかしないと
見れないようでした。
• RNのIssueにも上がっていたが、解決せず、そもそもAndroidの問題
だからRN関係ない?
• じゃあどうするの??困ってるんです...
YouTubeAPIを使えと
Googleが言っている気がした。
• API用意しているんだから、WebViewじゃなくてこっち使えってメッセー
ジと捉えれば、まぁ言っていることはわかる気がする。
• APIを利用するということは、Javaを書くということか…
• フロントからきた僕にとっては、YouTube...
React Native YouTube
https://github.com/inProgress-team/react-native-youtube
• YouTubeAPIを利用して、YouTubeのComponentを返してくれるありが
たいやつ。
• 使い方が若干敷居高いような気がするけど、GitのREADMEは古い。
騙されちゃいけない。
• 下記のURLを参考にすると、react-...
ちなみに、YouTube APIは動画の上に何かを
載せると怒ります。
左の例だと「矯正」の部分で怒ります。
なので、対策取ります。
対策と言ってもサムネイル画像を取得して、そ
の上に再生アイコンを配置して、
クリックされたら動画のみを配置した...
できた!!
• 使い方自体はすごく簡単だった。
• 使うときに調べればわかるけど、APIキーが必要なので、
ネットで調べて取得しよう!
• IOSにも対応している…
React Native YouTube
IOSにも対応しているはずなんですけど、
僕は画面真っ白で使うことができませんでした。
もしこの中で使えた人いたら教えてください…
ちょっと困ってます。
• 1日潰したのは技術ではなく、調べること自体が大変だったためだと
思う。
• 案外探してみると、優しいエンジニアはいる。
• シミュレーターを使うときはプリインストールアプリは入れておいたほ
うが困ることないかも。Google Play入って...
ご清聴ありがとうございました!!
Rnyoutube
Rnyoutube
Upcoming SlideShare
Loading in …5
×

Rnyoutube

652 views

Published on

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

Published in: Engineering
  • Be the first to comment

Rnyoutube

  1. 1. React Nativeで YouTubeを埋め込もうとしたら Androidで一日潰した話 2017.4.21 Yugo Matsumoto / @ymmmo1
  2. 2. 一日潰したやつについて • Yugo Matsumoto / @ymmmo1 • NHN comicoでフロントエンドエンジニア • 最近、monacaで友人が作っていたアプリを引き継いで、RNでリファク タし始めました。 • 大体、このアイコンで活動します。→
  3. 3. いい感じにできたIOSの話
  4. 4. • まず、Google先生に相談 • 実例もなければ、記事もない。 • IOS自体はどうしているのか調べる。 • UIWebViewを使うと簡単に埋め込めるよって書いてあった! • React Nativeでできんの?
  5. 5. React NativeのWebViewは UIWebViewのようです! https://github.com/facebook/react- native/blob/da9a712a9e17942dcd05b8d955f0764c2026a4ad/React/Views /RCTWebView.m 次、唐突にコードです。
  6. 6. デモりたいけど時間ないから スクショ貼っときます
  7. 7. • もうこれでいい気がする。 • こんな簡単なんて、なんてReact Nativeは素晴らしいんだ! • 高さを設定しないと潰れてしまうので、 Dimensionsを利用して、横幅を取得し、 ☓ 0.5625 する • 0.5625はWEBでレスポンシブYouTube埋め込みをしようとしたときに 使う数値 マジ簡単だった
  8. 8. いい感じにできなかったAndroidの 話
  9. 9. • どんな感じなのか見せたいがもう環境がないため、見せられないで す。すいやせん。 • ざっと説明すると、 再生ボタンをおしても、黒背景に読み込みのぐるぐるがずっと表示さ れていて再生することができない。 とりあえず、Androidで見てみる。
  10. 10. おまえんとこのOSだろうが!
  11. 11. • 案の定、React Nativeはどこ探しても有力な手がかりはなかった。 • Androidはどうなのか調べる。 • AndroidのWebViewは微妙らしく、YouTubeの再生はブラウザのみで はできないらしい。 • なにが必要なの? 気を取り直して調べる
  12. 12. Androidで YouTubeを再生するには YouTubeのアプリが必要
  13. 13. • たしかに、Androidの携帯は基本的に、Googleアプリ系はプリインス トールされていた気がする。 • 僕は、Genymotionのシミュレーターを使っていたので、アプリ入って いませんでした。 • 実機で確認している方は関係のない話かもしれない。 ほう…
  14. 14. Qiitaの記事を参考にして、 Play StoreをD&Dでインストール http://qiita.com/sampo02/items/63b4ed1f19102a838932
  15. 15. • AndroidでWebViewを利用したYouTube再生ができた! • これもまた、見せたいのですが環境がもうないので 見せられないです。 • なぜ再生できたのに環境がないのか、 そう、まだ問題があります… お前んとこの(ry 再生できました。
  16. 16. 全画面再生ができない!!
  17. 17. • 調べてみると、AndroidはWebViewでフルスクリーンはなにかしないと 見れないようでした。 • RNのIssueにも上がっていたが、解決せず、そもそもAndroidの問題 だからRN関係ない? • じゃあどうするの??困ってるんですけど!! 全画面再生ができないのはきつい
  18. 18. YouTubeAPIを使えと Googleが言っている気がした。
  19. 19. • API用意しているんだから、WebViewじゃなくてこっち使えってメッセー ジと捉えれば、まぁ言っていることはわかる気がする。 • APIを利用するということは、Javaを書くということか… • フロントからきた僕にとっては、YouTubeの埋め込みでこんな重たそ うになるとは… • 諦めるのはまだ早いので、何かないかと探してみました。
  20. 20. React Native YouTube https://github.com/inProgress-team/react-native-youtube
  21. 21. • YouTubeAPIを利用して、YouTubeのComponentを返してくれるありが たいやつ。 • 使い方が若干敷居高いような気がするけど、GitのREADMEは古い。 騙されちゃいけない。 • 下記のURLを参考にすると、react-native-linkだけで使えるようにな る。簡単! https://www.npmjs.com/package/react-native-youtube-fork RN YouTubeとは…
  22. 22. ちなみに、YouTube APIは動画の上に何かを 載せると怒ります。 左の例だと「矯正」の部分で怒ります。 なので、対策取ります。 対策と言ってもサムネイル画像を取得して、そ の上に再生アイコンを配置して、 クリックされたら動画のみを配置した Componentに遷移させるだけです。
  23. 23. できた!!
  24. 24. • 使い方自体はすごく簡単だった。 • 使うときに調べればわかるけど、APIキーが必要なので、 ネットで調べて取得しよう! • IOSにも対応している… React Native YouTube
  25. 25. IOSにも対応しているはずなんですけど、 僕は画面真っ白で使うことができませんでした。 もしこの中で使えた人いたら教えてください… ちょっと困ってます。
  26. 26. • 1日潰したのは技術ではなく、調べること自体が大変だったためだと 思う。 • 案外探してみると、優しいエンジニアはいる。 • シミュレーターを使うときはプリインストールアプリは入れておいたほ うが困ることないかも。Google Play入ってるとなにかと便利。 • 環境ないとか言ってるけど、元に戻すのめんどうだっただけ。 まとめ
  27. 27. ご清聴ありがとうございました!!

×