ep.59 Twitter で再生できる音声プレイヤーの作り方 | UIT INSIDE

2020/08/28 に公開1789 views

このエピソードについて

@potato4d が UIT INSIDE の Twitter 埋め込みプレイヤー対応について、 @kengo-miyamae に話を聞いてみました。

ゲスト紹介

kengo.miyamae
- '20 New Graduate
- Front-End Dev 6 Team
- LINE 公式アカウントのフロントエンド開発
- UIT INSIDE の埋め込みプレイヤーを開発

UIT INSIDE の埋め込みプレイヤー対応

【PR】 UIT INSIDE が Twitter 埋め込みでの再生に対応しました！

エピソードの URL をツイートすることで、 Twitter の埋め込み内で再生が可能に
- https://uit-inside.linecorp.com/episode/59 などを呟くとプレビューされる

Twitter で再生できる Web ページの作り方

HTML の meta タグ twitter:player を定義することで、任意の Web サイトを埋め込むことが可能
- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
今回は /episode/:id にアクセスされたとき、 /embed/:id を参照するように実装
これによってツイートした際、 /embed/:id の内容が表示される

実装していてのハマりや学び

Twitter の OGP チェッカーで確認する都合上、外部からアクセス可能な状態で開発をする必要がある
- 今回は ngrok を利用して検証
- 動作検証では OGP のキャッシュパージにも利用される Card Validator を利用
  - https://cards-dev.twitter.com/validator
- OGP 検証時でも HMR などは動作するため、極端に開発体験が悪いわけではなかった
専用の画面サイズ上での動作となる

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
イテンサイドは、twitterみ込み、プレイヤーでの再生に対応しました。イエイイエイ、

Guest 00:09
こんにちはこんにちはえ、今週のやテサイドを始めたいと思います。

Guest 00:15
UIT INSIDEは、ユーザーインターフェースと、テクのお知らせする開発のためのポンドキャストです。

Guest 00:21
最新のウェブ標準の動向や、開発、フレームワークの変遷、またまた、イワイやイベックスに関することまで、毎週フロントエンドの情報を発信していくことをも

Guest 00:31
的としております。え、ハッシュタグはUIT、アンダースコアインサイド。え、ご意見やご感想などえ、いつでもお待ちしております。

Guest 00:40
そして、今回はですね私ポテト4dがポストでですね。ゲストにえみやまさんを招待いたしま

Guest 00:47
まして、えみやまさんに実装いただいたえ、twitterの埋め込みプレイヤーについてえ、紹介していただこうと思います。みやまさん、よろしくお願いいたします、よろしくお願いします。

Guest 00:58
ということでですね。え、では、まず今回みやまさんえ、いいテンサイド初出演だと思いますので、簡単に自己紹介をお願いできますでしょうか。はいはい、

2. 宮前さん自己紹介 01:00

Guest 01:07
新卒入ってきたあの、フロントエンドエンジニアのみと申します。UITのデブログに所属していて、今は公式アカ、LINE公式アカウント、周り

Guest 01:16
のフロントの実装をさせていただいてますよろしくお願いします。

3. UIT INSIDE のミニプレイヤー実装 01:20

Guest 01:20
はい、え、みもまえさんよろしくお願いいたします

Guest 01:25
というわけでですね、今回冒頭でちょっと紹介しましたけれども、今回のエピソード公開のタイミングというか、今え、今収録が実はこの公開されている。今日の1日前、8月27日なんですけれども

Guest 01:39
8月27日にですねえ、ユナイテインサイドが、ツイート時のtwitterの埋め込みプレイヤーでの再生に対応いたしました。

Guest 01:47
今お聞きになっているですねえ、今聞になっていただいてる。テインサイド、LINEcoプドットコム、え、エピソード、ええエピソード、え、エピソード番号のようなつurlをツイートするとですね。

Guest 01:59
ogpの展開がえ、hmlプレイヤーになっていてですね。え、twitterで、そのまま、プレビューができるみたいな形になっております。ぜひぜひ皆さん拡散とかえ、そういう時に使ってみていただければと思います。

Guest 02:14
で、ですね、今日はですねえ、せっかくなので、あんまりこういったものを実装することもないかなと思うので。今回実装担当してもらったみさんに

Guest 02:23
どんな風に実装するんだっけ。とか、困ったこととかあったら、聞いていければと思っております。

Guest 02:30
ではですね、早速ですけど、twitterで再生できるウェブページって、どうやって作るんだっけ。みたいなところ、簡単にみやまさんにご紹介いただいてもよろしいでしょうか。はいはい、

Guest 02:39
メタタグogpのメタタグを付けるのと、大体同じ容量で、twitter社の方から、twitter用の、そういったogpのプロトコルが、

Guest 02:48
あのウェブ上で公開されてましてま、基本的にはメタタグを足してで、メタタグにあのtwitter埋め込み、

Guest 02:56
埋め込み先のうえ、埋め込むウェブページをどこだよ。

Guest 03:01
あので、公開してるかっていうurlを貼ってあげて、あとはさ、あの、普通にウェブページをこう作るページで

Guest 03:08
書いていくだけなので、そんなにあの目新しい技術などは必要ないですけども、

Guest 03:14
貼っている実際に貼っているurlとは別にあの埋め込む場合は、このurlみたいなのをして、できて、そこでウブアプリケーションを開発したらいい。

Guest 03:23
あ、そうです、そうです

Guest 03:24
あ、じゃあ、今回の場合も専用のページ作ってっていう感じですね。

Guest 03:28
エピソードのたい、あのページに対応する埋め込み用のページをま別のurl1つ作って、メタタグにはそっちを教えてあげています。

Guest 03:36
なるほど、なるほど、あ、いいですね、結構なんか、同じページの中で出し分けとかするってなったら、また結構めんどくさいですけど、例えばなんかはてな円ベットイコール1みたいな形になるとです。

Guest 03:47
専用のページ指定できるなら、作りやすいですし、はいはい、結構いいですね。な

Guest 03:52
びっくりしたのが、その別のページを、twitterのogpのプロトコルの方では。

Guest 03:59
ウェブ動画プレイヤーを埋め込むには、というやり方で、一応紹介されてはいるものを指定できるのは、ただのurlなんでま、何を埋め込んでもよさそうなところですね。ああ、もしかしたら

Guest 04:10
試してないですけど、例えば、ゲームみたいなやつを作っちゃったりすると、なんか、twitterのサムネイルで、そのままゲームが遊べちゃったりするかなって思うと、ちょっと面白そうだなって思ったりしましたね。

Guest 04:22
確かに結構メディヤやっぱプレイヤー埋め込みのプレイヤーって聞くと、メディアのイメージが大きいですけど、確かにゲームとか動かせるとかなり面白そうっすね。

Guest 04:31
確かにそうなんですね、じゃあ、意外となんでもできちゃう

Guest 04:36
かなって感じですね。あの、僕も今回ナクストで書いてますけど、初めてだったんですけど、ナクストまあ、こんなに。

Guest 04:45
まあ、javaスクリットでバスクリットです。けど、複雑なのを追いかいても、ちゃんと動いてくれるのかなと思ったけど、何も問題なく、javaスクリットが全部動いてたんで、

Guest 04:54
多分何置いても動くんじゃないですかね。

Guest 04:57
いや、いいっすね、なんか、こういうのができると夢がありますよね。

Guest 05:03
なるほど、なるほど、ありがとうございます

Guest 05:06
じゃあ、実際まこういったような。埋め込みして何か作りたい時は、時はほんとに普通に実装して、その上で

Guest 05:14
専用の埋め込み用のurl指定してやるってだけで、はいはい、いい感じの方ですね。なるほど、

Guest 05:20
ありがとうございます

Guest 05:23
じゃあ、そんな埋め込みの実装ですけど、今回ogp以上のえーだけでしか。多分使われない

4. OGP で動くプレイヤー実装のポイント 05:25

Guest 05:31
領域にあるってなると、結構あ、開発のフローとか。もえ、普段と違うのかなと思うんですけど、なんか開発してて、

Guest 05:39
あの埋め込みプレイヤーってものを作るにあたって、なんか困ったこととか、こういった課題があったみたいなのってあったりしますかね。

Guest 05:46
はいはい、あの、ちゃんとogpをたあのの通りに実装できていて、twitterのプレビューですか。

Guest 05:55
あの、itのプレビューのところにちゃんと表示されているかどうかを確かめるためには、あの、普段のウェブページでしたら、手元のローカルレス立てて、クロームで確認するとかって、あ、そうね。それするわけにもいかないので、

Guest 06:07
twitter社が公開してくれている、twitter、カードバリデーターでしたっけね。

Guest 06:14
あ、はいはいはい、あのocpのキャッシュとか飛ばすときに使う。はいはい、

Guest 06:17
そこにurlを教えてあげて、あのレビューするという形になるので、あの、制作開発途中の

Guest 06:25
アプリケーションをウェブに公開しなくちゃいけないところがちょっとめんどくさいですね。

Guest 06:30
はいはいはい、あの

Guest 06:31
社内プロダクスなので、公開われ載せていいのかとか思いながらもngrを使って、

Guest 06:38
あれ。はいはいはい、

Guest 06:43
やっぱそう。ああ、確かにそうですよね、普通だったら手元でなんかなんでしょう。pcだったら、そもそも手元でいいですし、モバイルでも最悪、その自分の欄内でポートを開いてや

Guest 06:54
やって、その自分のスマホからはいはい、wi-fi内で繋いだらいいってなると思うんですけど、確かにtwitterってなると、ネットワーク一旦返さないといけないですね。

Guest 07:04
なんでしょうと、インサイドとかメディアだから、まあ、最悪許されるかもしれないです。けれども、なんか、これって重要な画面とかだったら、結構まずいそうですよ。

Guest 07:12
どう、どうやって開するんですかね、

Guest 07:17
確かにそうですよね、特に、twitterのこのバリデーターとかになると、やっぱりその認証とかも挟むわけにもいかないですもんね。はいはい、普通にプレビューするってなったら、たら普通のサイト作るだけだったら、なんか認証画面かまして、

Guest 07:28
その認証しないと動きなしてたら、外に漏れてても最悪みたいなのはあると思う。まあ、好きなんですけど、

Guest 07:34
確かにそういうわけにもいかないので、

Guest 07:36
結構心配ではありますね。

Guest 07:39
なるほど、なるほどございます

Guest 07:43
いや、あとあれですね、その毎回カードばりデータで確認するってのも結構大変

Guest 07:49
しんどい、しんどいですね。

Guest 07:54
あ、でもあのデブサーバーナクトのホットモジュールロードが効くやつ。

Guest 08:00
おはいはいはい、お

Guest 08:01
フォートをそのまま公開して言えば、一応ファを更新したら、あのng6いじらなくても更新され、ほっとけば更新されるので、

Guest 08:09
またまにキャッシュが集まっておかしなことになるんですけど、あることはいい

Guest 08:14
ま、その辺りを除けば、割とま、普通に開発自体はできるって感じ。そうですね。うん、うん、なるほど、なるほど、あ、でも結構ちょっと特有の事情が

Guest 08:24
多い作業だったと思うんで。はい、ちょっと私からちょっと埋め込み。プレイヤーってなんかできるらしいけど、やってもらっていいみたいな感じでお願いしちゃって、すごい申し訳ないなと

Guest 08:35
いや、でもすごいいいですね。なんか、やっぱこうやってちょっとめんどくさいことがあっても、実際できると

Guest 08:42
こう他にはない体験です。はい、いや、ほんとにすいません、あの作成いただきありがありがとう

Guest 08:47
ほんとに面白かったですなので、全然

Guest 08:53
まあ、あれですね。今後はちょっとこれは運営的な話になっちゃいますけど、今回、あの宮さんがあのエンベットスラッシュっていう形のurlで作っていただいてたんで、

Guest 09:02
あの、私たちの運営としても、あのどれぐらいあのプレイヤー経由で聞かれてるんだろうっていうのを取りやすいかなと思ってる。

Guest 09:09
あ、なるほど、そっか、そっか、そっちにこっちのアナリティクスとればいい。

Guest 09:14
そうですね。そうですね、なんでエンベットから何人えの見に来てくれてるんだろうな、とかも取れるようになるかなって思うと、あの実はポッドキャスト運営としては、ちょっと私そういうところも

Guest 09:25
ので、面白そうです。

Guest 09:27
ちょっともしかしたら、あのなエピソードかした後に、でも、まあ、このポトキャストのどっかの会とか。まあ、年末とかでなんかあの1年振り返りとかやる時にはどれぐらい聞かれてました。みたいなのは、

Guest 09:39
今聞いていただいてる方にも、なんか出していけたらいいかなとか

Guest 09:43
と思ってますね。

Guest 09:44
そういうページ、来場者の統計みたいなやつも面白そうですね、ちょっとやったことないやってみたいです

Guest 09:50
あ、少し前にですねUIT INSIDEでも何度か話してると思うんで、シノートにも書こうと思いますけど。LINEはですね。自分たちでgoogleのアナリティクスみたいな。

Guest 09:59
アナリティクスツールを作ってたりとかしてるのもあって、ヤテンサイドも。そういうので、色々。データとか取れるようになってるんで、また、その辺の

Guest 10:10
え話が聞けた聞きたかったら、え、hノードから過去エピソード見てもらって、

Guest 10:14
できればいいかなと思います。まあ、実際どういう感じで活用するかみたいなのは、それこそ。またえと、今後のitサイドのエピソードでえ、実際のデータえ見てみた話とかもできればなと思っております

Guest 10:28
ので。ぜひ今聞いてくださってる方は、過去のエピソード。また、聞き返してもらったりとか、え、これからもた聞いていただければと思います。

Guest 10:39
というわけでですね。今回はえ、テンサイドのtwitter埋め込みプレイヤーでの再生対応について。え、宮前さんにえと、実装の話とかえ聞いていきました。

5. クロージング 10:40

Guest 10:49
LINEのですねフロントエンド開発組織え、UITではえ、このようなフロントエンドに関する議論や、キャッチアップを日々を行っております。

Guest 10:57
外向きに出している内容で言うとですね。ビューススタディえなんかは元々、実は社内の学習企画から始まったコンテンツでしてま。こういったものも、今後もえ、外向きに出していけるといいかなと思っております。

Guest 11:10
またえ、potキャストを通じて、ラインに興味を持っていただいた方は、え、ぜひぜひカジュアル面談からでもご連絡いただければと思います。今ですねえ、

Guest 11:20
この状況でもえ、オンラインでのカジュアル面談とかも気軽に行える状態でありますので、興味のある方は、え、小の下に求人への連絡先を掲載しておりますので、ぜひぜひそこからご連絡いただければと思います。

Guest 11:33
というわけで、今回はテンサイドのtwitter、埋め込み、プレイヤー対応をテーマに話していきました。えみやまさん、ありがとうございましたあとうございました。