PLAY DEVELOPERS BLOG
https://developers.play.jp/
HuluやTVerなどの日本最大級の動画配信を支える株式会社PLAYが運営するテックブログです。
フィード
Docker を使った Redis Cluster 開発環境を構築し Rails などのアプリから接続する方法
PLAY DEVELOPERS BLOG
こんにちは、OTTサービス技術部 開発第2グループの榊です。 今回は、当社でRuby on RailsでのRedisクライアントのクラスターモード対応を行った際の事例についてお話しします。 私が担当しているプロジェクトでは、これまでAmazon ElastiCache with Redis OSS compatibility(以下、ElastiCache (Redis OSS) と記載します)をクラスターモード無効の状態で運用しており、この設定ではシャード1のリードレプリカが最大5つまでと制限があります。徐々にデータ量が増加してきて今回ノード数の増強が必要になったため、クラスターモードを有効に…
9日前
動画配信サービスへの入稿に使用される Universal Media Catalog および MovieLabs Digital Distribution Framework の概要
PLAY DEVELOPERS BLOG
2024年も終わりが近づいてまいりました。 メディアサプライチェーン技術部開発第1グループの松尾です。業務では動画配信サービスへの入稿を支援するプロダクトを開発しています。 みなさんが使っている Netflix や Amazon Prime Video などの動画配信サービスでは、ドラマやアニメなどさまざまなコンテンツを視聴できます。このコンテンツの配信に必要なデータは、コンテンツ所有者が動画配信サービスへ入稿しています。入稿するために必要なデータは各動画配信サービスが決めており、「このようなデータ構造で入稿してください」という入稿スタイル(及び入稿規定)も各動画配信サービスで様々です。入稿ス…
16日前
MinIO を用いてローカル開発環境に S3 互換ストレージを構築する
PLAY DEVELOPERS BLOG
24卒で新卒入社いたしました、OTTサービス技術部第2グループの比嘉です。 私が配属されて初めて行なった業務で使って便利だったMinIO*1というツールについてご紹介します。 MinIOはクラウドサービスとして提供されていますが、Dockerなどを用いてローカル環境として使用することもできます。 今回はRuby on Rails + MinIOをローカル環境で使う方法とS3を並行して使う際の環境ごとの向き先制御についてお話しします。 背景 問題点1:AWSに接続できない 問題点2:バケット名決まってない MinIOとは LocalStackとの違い 使用環境 DEMO環境構築 1. Rails…
23日前
App Development with Swift の受験をした話
PLAY DEVELOPERS BLOG
こんにちは。ULIZAサービス部の松原です。 先日、趣味で「App Development with Swift Certified User」および「Associate」を受験しましたので、その体験談をお話ししようと思います。 App Development with Swift とは 試験概要 教材と勉強法 教材 私の勉強法 試験結果 英語の試験について 資格を取得して 終わりに App Development with Swift とは 「App Development with Swift」は、SwiftとXcodeを使用したアプリ開発の基礎知識を証明するApple認定の資格です。 現…
2ヶ月前
Figma で実装イメージを効果的に伝えるためのデザインのコツ
PLAY DEVELOPERS BLOG
デザイナーの白川です。 主にプロダクトのUIをデザインしています。 自分がデザインしたUIの実装をエンジニアさんにお任せする場合、実装イメージをエンジニアさんに伝える必要があります。 デザインパーツひとつを例にとっても、 ・どこで使われているのか(どこまで使い回されるのか) ・どんな表示バリエーションがあるのか ・どこまでコンポーネントに含めるべきなのか ・そもそもコンポーネント化が必要なのか といったコンポーネント化の観点から、 ・サイズは固定なのか、値に応じて変化するのか ・親要素や画面サイズに追従して位置やサイズが変化するのか ・過大な値が入力された場合はどう表示するのか ・最大/最小サ…
3ヶ月前
UI とロジックを分離することで UI パーツの再利用性と開発効率を改善できた話
PLAY DEVELOPERS BLOG
こんにちは。プラットフォーム技術部開発第3グループの荒川です。プロダクトの「PLAY VIDEO STORES」の開発をしています。 フロントエンドの開発をしている際、デザインを確認するために特定の操作を行わなければならなかったり、コードを変更したりしなければならない場合があります。 これらの課題を解決するためにStorybookの導入とUIコンポーネントの分離をしました。今回は、そのプロセスと利点についてご紹介します。 課題 Storybookとは デザインとロジックを分離する Storybookを使ってUIコンポーネントを作成する UIコンポーネントをパッケージとして公開する ロジック側の…
3ヶ月前
Code 兄弟 (CodePipeline/CodeBuild/CodeDeploy) を使ってデプロイを自動化してみた
PLAY DEVELOPERS BLOG
こんにちは、OTTサービス技術部開発第1Gの大元です。 みなさんはどのようにデプロイを行っていますか? 私の担当している案件ではビルド、ECSタスクのエラーの確認、切り替えなど手動で行っていました。 手動で行うとミスも発生しやすいですし、デプロイに毎回時間を取られて大変ですよね。 この手動で行っていたデプロイ方法を CodePipeline / CodeBuild / CodeDeployを使用して自動化しました。 今回は、このデプロイ自動化について紹介していきます。 従来のデプロイ方法と課題 自動デプロイのメリット デプロイの流れ 前提条件 デプロイの構成 ファイルの配置 Code兄弟による…
3ヶ月前
社内 LT 会「てっくじゃむ」を開催しました!
PLAY DEVELOPERS BLOG
こんにちは、テックリードの丸山です。 最近、PLAY 社内で LT 会「てっくじゃむ」を開催しました。「てっくじゃむ」という名前は、ジャムセッション(即興で行われる演奏会)のように、普段はあまり関わりがない人たちが、ふらりと立ち寄って話をするような場であってほしい、また、パンにジャムを塗るようにエンジニアにも知識を塗り足していきたい、といった想いを込めて運営メンバーで考えて決めたものです。 ▼ 社内のデザイナーさんにロゴも用意していただきました! 今回は私を含め 6 名のメンバーが登壇を行いました。 登壇者 発表テーマ 丸山 PLAY CLOUD に Vite を導入して開発効率を改善した話 …
4ヶ月前
Path Hierarchy を活用した Elasticsearch におけるファイルシステム検索の実現
PLAY DEVELOPERS BLOG
こんにちは、メディアサプライチェーン技術部開発第1グループの渕です。 任意に指定したパスの直下にあるフォルダ・ファイルを取得するファイルシステム検索をElasticsearchで実現するために、Path hierarchyというトークナイザーを使用してみました。 Path hierarchyとは Path hierarchyによる検索 インデックスへの設定 Path hierarchyを使用した検索 Path hierarchyを使用しない方法 Path hierarchyと階層数によるファイルシステム検索の実現 階層数の追加 指定したフォルダ直下にあるフォルダ・ファイルの取得 最後に Pat…
4ヶ月前
UI テストツールの XCUITest と Maestro を実際の iOS アプリで比較してみた
PLAY DEVELOPERS BLOG
こんにちは、iOSアプリの開発を担当しているOTTサービス技術部開発第3Gの鈴木です。 皆様、UIテストは実施しておりますでしょうか。 UIテストを実施する場面としては、リグレッションテストが多いかと思います。 そんなUIテストが自動化されているかというと、まだまだ人力で頑張っているような状況が多いかと思います。 自動化できるテストはどんどん自動化していきたいですね。 ということで、今回はiOSアプリ開発におけるUIテスト自動化ツールとして候補に上がりがちな、「XCUITest」と、「Maestro」の二つを比較します。 本記事が皆様のUIテストの導入、及びその自動化の手助けになれば幸いです。…
5ヶ月前
スプレッドシートと Jira を連携し課題リストを作成する
PLAY DEVELOPERS BLOG
こんにちは、Androidアプリの開発を担当しているソリューション技術部の呉です。 システムやアプリ開発にあたっては、タスクや不具合の管理が非常に重要です。それらを一括管理できるJiraという管理システムがあるおかげで、開発がすごくスムーズに進められるケースもたくさんあります。 自分も現在まさにJiraが使われているプロジェクトに参加しています。しかし私の場合、Jiraプロジェクトがお客様によって管理されているので、自分達の都合では自由にカスタマイズできません。 例えば下記のようなバックログリストがあります。 タスク名、ステータス、担当者が表示されていますが、開発側として対応OS、詳細対応状況…
5ヶ月前
AWS DMS を使って Aurora MySQL の無停止エンジン更新を試してみた
PLAY DEVELOPERS BLOG
こんにちは、SaaSプロダクト開発部の滝波です。弊社プロダクト「PLAY VIDEO STORES」のエンジニアを担当しています。 昨年末、AWSから重要な通知が届きました。 Amazon Aurora MySQL は、2024 年 1 月 15 日にバージョン 3.01 と 3.02 (MySQL 8.0.23 互換) を廃止する予定です。 お客様の AP-NORTHEAST-1 リージョンでは前述した Aurora MySQL マイナーバージョンで実行されている Aurora MySQL クラスターが 1 つ以上あるため、3 か月前にお知らせします。 多くの場合、DBエンジンの更新にはイン…
6ヶ月前
初心者必見! AWS の基礎をゲーム感覚で身につけられる AWS Cloud Quest のご紹介
PLAY DEVELOPERS BLOG
初めまして 、ソリューション技術部の中西と申します。 エンジニアになり初めてAWSに触れることになった時、どこから勉強をすれば良いか分からない、実際に参考記事通りに操作をしてみようと思っても、注意として「時間単位でお金がかかります!終わったら消しましょう!」などの文章をよく見かけることになり、初心者にとってはなかなか気軽に手を出すことが難しいですよね。 そんな悩みを解決するのが今回ご紹介する、Cloud Questでした。 AWS Cloud Questとは? 事前準備 Builderアカウントの作成 教材の登録 実際にやってみよう 1. 学習 2. 計画 3. 実践 4. DIY 報告 まと…
7ヶ月前
初心者が知るべき CORS の基本
PLAY DEVELOPERS BLOG
こんにちは 、ソリューション技術部の木下です。 ベンチプレス100kgは上げられるものの105kgが一向に上げられず、減量中のせいだということにして、やり過ごしている日々です。きっと増量し始めたら上げられると信じています。 さて、CORSはWeb開発を行っている方はほとんどの方が遭遇したことがあるかと思いますが、初見だとなかなか対応方法がわからない、あるいは設定方法だけはわかったけどなぜ必要なのか、何をしているのかわからないという新人の方も多いのではないでしょうか。 そんな方にお送りする「CORS入門:初心者が知るべき基本について」について、お送りします。 CORS (Cross-Origin…
7ヶ月前
大規模案件におけるReact Nativeでのスタイリング手法
PLAY DEVELOPERS BLOG
最近新しい趣味を始めようと、前々から欲しかった車を買いました。 みなさんこんにちは、ソリューション技術部の隈本(クマモト)です。 今回は弊社でも新しい試みであるReact Nativeのお話です。 React Nativeを触ったことあるみなさんは、その中でもスタイリングについてどのようにされていますか? サンプルコードによくあるようにコンポーネント内にスタイルを記述しますか?それともスタイル用のファイルを用意しますか?それともウルトラCな方法で記述してますか? もしウルトラCをご存知の方がいれば教えてください。 今回私がReact Nativeの案件を進めるにあたり、実際に対応したスタイリン…
7ヶ月前
YouTube, X, Instagram で OAuth 2.0 を実装してみた
PLAY DEVELOPERS BLOG
こんにちは。プラットフォーム技術部第2グループの冷牟田です。 今回は、自社プロダクト開発を進める中でOAuth 2.0というものに触れました。いくつか実際に処理を実装したため、簡単にご紹介させていただきます。 OAuth 2.0について OAuthとは OAuth 1.0とOAuth 2.0の違い OAuth 2.0の認可フロー プラットフォームによるOAuth 2.0での実装の違い YouTubeのOAuth 2.0 事前準備 実装 動作確認 X(旧Twitter)のOAuth 2.0 事前準備 実装 動作確認 注意点 InstagramのOAuth 2.0 事前準備 実装 動作確認 注意点…
8ヶ月前
字幕つきの動画配信を行おう
PLAY DEVELOPERS BLOG
こんにちは。クラウド推進技術部の牧田です。 今回は、HLS での VOD 配信において字幕のつけ方をご紹介したいと思います。 はじめに 動画に字幕をつけるには 1. 字幕ファイルを用意する。 2. 字幕のメディアプレイリストに字幕ファイルを記述する。 3. マルチバリアントプレイリストに字幕のメディアプレイリストを記述する。 VTT ファイルの内容 VTT ファイルのサンプル VTT ファイル作成のルール おわりに はじめに 字幕には大きく、オープンキャプションとクローズドキャプションがあります。 オープンキャプションは焼き込み字幕とも呼ばれ、動画自体に字幕を入れる方式であり、常に字幕が動画に…
9ヶ月前
AndroidTV・FireTV でアクティブ率を高めるために対応したい機能のご紹介
PLAY DEVELOPERS BLOG
こんにちは、Androidアプリの開発を担当しているソリューション技術部の宮本です。 AndroidTV・FireTVのアプリは、スマホに比べると対応している数が少なくどういった機能に対応できるかあまり認知されていないと感じる場面があったので、一部機能を紹介させていただきます。 AndroidTV Recommendations チャンネルの作成 プログラムの追加 Watch Next プログラムの追加 FireTV リニアTV ホームでのコンテンツ表示 番組表への連携 リニアTV上での再生 VSK(Video Skills Kit) AndroidTV Recommendations チャン…
9ヶ月前
多言語翻訳サービスの WOVN について調べてみた
PLAY DEVELOPERS BLOG
こんにちは、SaaSプロダクト開発部第1開発グループの平原です。 最近テイルズオブヴェスペリアをプレイしましたが、なんと開始時に日本語/英語が選べるんです。そんな15年以上前のゲームに思いを馳せつつ、今回は多言語翻訳について話します。 今回は開発の一環で調査した多言語翻訳サービス、中でも個人的に一番公式ドキュメントが丁寧で良かったWOVNについて紹介します。 多言語翻訳サービスとは WOVNの基本情報 対応言語 対応ブラウザ 利用上限について 言語の切り替え方法 WOVNでの翻訳導入形式 スクリプト方式 ライブラリ方式 プロキシ方式 終わりに 多言語翻訳サービスとは サイト上のテキストやコンテ…
9ヶ月前
AWS CDK を使ってみよう
PLAY DEVELOPERS BLOG
こんにちは、SaaSプロダクト開発部の村山です。 業務でAWS CDKを使って環境構築を行う機会がありましたので 、今回はAWS CDKの紹介をしていきます。 AWS CDKとは? AWS CDKの構造 アプリケーション スタック コンストラクト やってみる 準備 VPCの作成 Lambdaの作成 最後に AWS CDKとは? TypeScript、JavaScript、Python、Java、C#/.Net、Goのいずれかのプログラミング言語を使用してAWSのインフラストラクチャを定義し、AWSにプロビジョニングできるフレームワークです。 記述したコードはCloudFormationのリソー…
9ヶ月前
ユーザーフレンドリーなシェル「fish」に乗り換えてみた
PLAY DEVELOPERS BLOG
こんにちは、プラットフォーム技術部第一グループのワンです。 コマンドラインの世界って、ちょっと取っ付きにくいって思っていませんか?黒い画面にずらっと並ぶ白い文字… なんだか難しそうに見えますよね。でも、fishは、そんなコマンドラインに対するイメージを変えてくれるかもしれません。 fishは、「friendly interactive shell」の略です。つまり、他のシェルと比較すると、使いやすくて、対話的に操作できるのが特徴なんです。 例えば、コマンドを入力していくと、候補を予測して表示してくれたり、過去の履歴を参考に見せてくれたりします。これなら、タイピングが減るし、コマンドを覚えるのも…
10ヶ月前
Lambdaから外部サービスにリクエストする際のIPアドレスを固定した話
PLAY DEVELOPERS BLOG
みなさまはじめまして。ソリューション技術部の岡田です。 年始に今年やりたいことを100個書き出したのですが、2ヶ月ほど過ぎた現在まだ6つしか達成できていない状況に若干の焦りを感じながら過ごしている今日この頃です。 さて今回はある開発にてAWS LambdaでAPIサーバーを構築したのですが、APIサーバーから外部サービスにリクエストする際に、IPアドレスの制限がかかっているためIPアドレスを固定化する必要があったので、その対応方法についてとそれをCloudFormationで対応する方法について紹介します。 CloudFormationではなくAWSのコンソール画面から対応したいという方にもど…
10ヶ月前
ファイアウォール機器のリプレース時に通信断が発生するケースについて
PLAY DEVELOPERS BLOG
こんにちは、ソリューション技術部の平良です。 弊社で利用しているファイアウォール製品(以下、FW)にてEOSL*1の発表があり、機器自体のリプレースを行うべく事前検証を行った際に発生した事象についてご紹介します。 スイッチ*2などネットワーク機器を触る上で昔からよく耳にするARP*3問題ですが、今なお健在でしたので簡単に発生状況や原因、対応方法などご紹介していきます。 機器切替の流れ 切替直後に通信断が発生 原因の切り分け 判明した原因 対策 機器切替の流れ 新FWの設定は現行踏襲とし、同一IP、同一設定で構築し並列に配置しておきます。 切替作業は旧FWから新FWへLANケーブルの物理的な差替…
10ヶ月前
Rubocop のコーディング規約をもとに読みやすいコードについて考えた
PLAY DEVELOPERS BLOG
こんにちは。ソリューション技術部OTTサービスソリューション統括部LOGICAプロダクトグループの田上です。 最近、チームリーダー的な立場でソースコードレビューすることも多く、また不具合発生などにより過去の処理を読み解くことがよくあります。 その際、複雑でわかりにくいコードなどがあると処理を追うのに時間がかかり、また複雑なコードほどバグが発生する確率が高いです。 現在、私が使用しているRubyにはRubocopというコーディング規約を設定してチェックするツールがあります。 github.com Rubocopを導入するとコーディング規約で制限するので、全体的に書き方が統一され第三者が見たとき読…
10ヶ月前
Rails 4 から Rails 7 にバージョンアップした話
PLAY DEVELOPERS BLOG
こんにちは。ソリューション技術部プロフェッショナルサービス第2グループの渡邉です。今回はRuby, Railsのバージョンアップにあたり実施したことをまとめて紹介します。 実はこの会社に入る前に独学でRailsのWebアプリを作ったことがあり(6年以上前です)、もう一度開発し直してみようと思ったことがありました。その時のRailsのバージョンが4.2.8ですが、一方で、現在使用している端末がAppleシリコンのMacだったため当時のRails 4に適合したgemがインストールできず、結果起動できなかったため思い切ってRailsのバージョンを7に上げることにしました。その過程が結構な手間だったこ…
1年前
署名付きURLを使用したAmazon S3へのマルチパートアップロードを実装してみた
PLAY DEVELOPERS BLOG
初めまして、弊社のプロダクト「KRONOS DRIVE」開発メンバーの大野です。 2024年に突入しましたが、年末年始はどのように過ごされましたでしょうか? 私はというと、カリフォルニアのディズニーランドで年越しをしてきました。初めての年越しディズニーでとても楽しかったのですが、夜寒すぎたのと疲労でニューイヤーのイベントが終わったらすぐにホテルへ戻りました笑 さて、以前「KRONOS DRIVE」の機能開発において、AWS SDKをフロント側で使用せず、APIで発行した署名付きURLでブラウザからS3へ直接アップロードする機能を実装したため、その方法を紹介させていただきます。 Amazon S…
1年前
Snowflake のクラスタリングキーを設定したらデータの集計が爆速になった話
PLAY DEVELOPERS BLOG
こんにちは、SaaS プロダクト開発部の池田です。 主に視聴動向データの分析を行うサービスの開発・運用を担当しております。 視聴動向データの分析基盤で採用している Snowflake において、クラスタリングキーの設定をすることで、クエリの応答速度が爆速になった話を紹介したいと思います。 もし、Snowflake をご利用中で、クラスタリングキーの設定をした覚えがない人は必見です!この記事を読んだ後は、クラスタリングキーを設定したくてウズウズしていると思います(笑) そもそも Snowflake の導入をご検討中の方は、以前丸山が紹介した記事がとても役立つと思うので参考にしてください。 dev…
1年前
VS Code のおすすめの拡張機能をご紹介 & 拡張機能を自作してみた
PLAY DEVELOPERS BLOG
こんにちは、SaaSプロダクト開発部第1開発グループの陳です。 今回は開発でよく使うコードエディターVS Codeの拡張機能&便利な使い方について、紹介していきます。 おすすめの拡張機能 Turbo Console Log Pretty TypeScript Errors Search In Browser Error Lens CodeSnap 拡張機能を作成してみます プロジェクト作成 デバッグ スニペットを作成してみます スニペットファイルの作成 スニペットを作成 最後に おすすめの拡張機能 Turbo Console Log 開発中にconsole.log()をよく使う人におすすめです…
1年前
Apple シリコンの macOS で “Docker Desktop vs OrbStack” を検証してみた
PLAY DEVELOPERS BLOG
こんにちは。今年の4月に入社したプラットフォーム技術部の杉森です。データ分析基盤の構築を行っております。 弊社のとあるアプリケーションの開発環境として Docker を使用しているのですが、 Apple シリコンの macOS での開発環境の立ち上げに多くの時間がかかっており、その問題を改善できないか調査したのでご紹介します。 問題 原因 解決策 “Rosetta 2 の使用” Docker Desktop “Rosetta for Linux” OrbStack 試してみる Docker Desktop “Rosetta for Linux” OrbStack 結論 “Docker Desk…
1年前
映像と音響の魅力を高める Dolby Vision・Dolby Atmos の基礎と動画配信での活用
PLAY DEVELOPERS BLOG
こんにちは、プラットフォーム技術部第1グループの川端です。 突然ですが、みなさん、高画質な映像と迫力のある立体音響に魅了されますよね?これらを実現する技術に、ドルビー・ラボラトリーズ(以降Dolby社)が開発したDolby Vision・Dolby Atmosがあります。昨今Netflixといった大手ストリーミングサイトのオリジナルコンテンツにおいてデファクトに近い形で採用されております。*1 配信を支える当社から、今回はDolby Vision・Dolby Atmosについてご紹介したいと思います。Dolby VisionはHDR技術に準拠した技術になりますので、HDRについてもご紹介します…
1年前