こんにちは、PLAY CLOUD本部 技術推進室の市川です。 弊社の提供するプラットフォーム「PLAY CLOUD」は、さまざまな機能を持った複数のサービスから構成されています。 技術推進室ではこれらのサービスを横断して技術的な課題を解決し、より良いサービスを提供するための取り組みを行っています。 今回は、PLAY CLOUDの管理画面で利用している共通モジュールをnpmパッケージとして分離し各サービスで利用できるようにしたことに関して話そうと思います。 背景 共通モジュールとは 従来の課題 サービス間の差異をなくす施策 共通モジュールのnpmパッケージ化 サービス側のnpmパッケージ利用への…

皆さん、こんにちは。 プラットフォーム技術部の林と申します。 前回の投稿から気づけば2年が経ってしまいました。 しばらくご無沙汰しておりましたが、また記事を書いてみようと思います。 もし以前の記事の Playwright にご興味がある方は、こちらもぜひご覧ください。 developers.play.jp 今回は、個人的に学習している Google API の OAuth 認証について、Google Cloud Console とバックエンドに焦点を当てて解説します。フロントエンドとバックエンドの役割を分け、バックエンドで Gmail API を使って実際にメールを送信するまでの流れを紹介しま…

OTT サービス技術部の赤澤です。 前回のブログではAWSリソースのコスト削減のためにAmazon EventBridgeを利用した定期的なリソースの停止、起動の方法を紹介しました。 developers.play.jp 約2年前に執筆したブログですが、現在はCloudFormationテンプレートからの設定ではなく、クラスメソッド株式会社様が提供しているopswitchというツールを使っています。 なぜ「opswitch」に切り替えたのか？ 実際に「opswitch」でスケジュールを設定してみる AWSアカウントの連携 タスクの作成 ジョブの作成 まとめ なぜ「opswitch」に切り替えた…

こんにちは。2024年度に入社しました、PLAY CLOUD本部プラットフォーム技術部 開発第1グループ所属の朱です。 本記事では、AWS Elemental Linkを用いてMediaLiveにライブ映像を入力し、最終的にMediaPackageを経由してHLSストリーム（.m3u8）を配信する基本的なフローを整理します。Link導入の具体的な手順や考慮ポイントを整理する際の参考になれば幸いです。 AWS MediaLiveの基本構造とライブ配信フロー Input Channel Output Elemental Linkとは Elemental Linkを用いたMediaLive配信の設定…

こんにちは、4月にPLAYに入社した原田です。 入社してすぐに、前職で活用していたGitHubの設定を思い出し、現在の案件リポジトリにもいくつか適用してみました。 その結果、開発チームの生産効率が向上しました！ この記事では、私が実際に設定して効果を感じた、GitHubのおすすめ設定をご紹介します。 チーム開発の参考になれば幸いです。 ① Allow squash merging ② Always suggest updating pull request branches ③ Automatically delete head branches ④ Require pull request …

こんにちは、デザイングループの荒木です。去年、育休から復帰した一児の母デザイナーです。家事や育児の合間に仕事の効率やチームとのやり取りを考えながら、毎日バタバタしています。最近の悩みは、運動する時間がなかなか取れないことです。 デザイナーもエンジニアも迷わない環境を作るために 復帰後、久しぶりの案件参加でまず感じたのは、チーム内でデザインの作り方やデータ構成が人それぞれで、引き継ぎや案件理解に時間がかかることでした。コンポーネントや色、要件定義書、スプレッドシート、GitHubのURLなども散らばっており、全体を把握するだけでも少々手間がかかります。 その結果、「この色は正式？」「このボタンパ…

今年の5月よりLambdaのログ出力に仕様変更がありました。料金計算の際に Vended Logs として計上されるようになったほか、Vended Logs として S3 や Data Firehose へ出力できるようになりました。CloudWatch Logs 以外でのログ管理がしやすくなった他、S3 や Firehose へログ出力する際は料金面でも優遇されます。今まで通りにLambda関数を作成した場合、ログはこれまで通りにCloudWatch Logsで取込・保存され、参照もCloudWatch Logsの機能で行うことになります。ログ運用を変える予定が無い場合は、今回のローンチ以降も変更すべきことはありません。一方、CloudWatch Logsに取り込まれたログをS3へファイル出力したい場合、従来はAWSコンソールなどから手動でエクスポートするか、Data Firehose を使う必要がありました。これが今回のローンチ以降、Lambda から取り込むログを CloudWatch Logs で取り込んだ後、S3 バケットに直接出力することが可能になりました。また Lambda から取り込まれるログは Vended Logs に分類されるようになったため、 S3 や Data Firehose への出力に変更する場合は、CloudWatch Logs のログ取込料金が大幅に安くなります。

メディアサプライチェーン技術部開発第2グループの長谷川です。 2023年4月にリリースされた Node.js v20 から、組み込みのテストランナーとして node:test が安定版機能となりました。新しく開発に取り組んだバックエンドのNode.jsのプロジェクトでユニットテストを整備するにあたり、外部ライブラリに依存せずに手軽にテストを書ける組み込みテストランナーを使用してみた経験から機能の概要、実際にテストコードを書く方法、主要なオプションなどをご紹介します。バックエンドの Node.js プロジェクトにテストを導入したい方の参考になれば幸いです。 node:test とは 基本的な使い…

こんにちは、PLAY CLOUD本部 技術推進室 の石川です。「動画配信技術を実装して理解する」シリーズも4回目の記事となりました。 前回の記事はこちらになります。 developers.play.jp 今回は、前回のRTMPからHTTP-TS配信を行うプログラムを、インターネット配信のデファクトスタンダードであるHLSに変更するという部分を取り扱います。 HLS化は前回のMPEG-TSへのトランスマックスができてしまえばサクッとできますし、HLSで配信できると感動もひとしおです。 実際にデファクトスタンダードの配信プロトコルで配信する部分まで自作してしまいましょう。 では、RTMPをHLSに…

2025年7月17日（木）にエンジニアの技術力向上を目的として開催した AWS GameDay の様子を余すことなくレポートします！ AWS GameDayとは AWS GameDay は、チームベースの環境で、AWS ソリューションを利用して現実世界の技術的問題を解決することを参加者に課題として提示する、ゲーム化された学習イベントです。 AWS GameDay 公式サイト 今回は、PLAY のエンジニアだけでなく、日頃から強固な連携をいただいている HJホールディングス様、日本テレビ様、TVer 様 にもお声がけし、初の合同開催が実現しました！ 『参加者がお互いに学び合うこと』を通じて AW…

2025年7月24日（木）に、PLAY 社内で 「てっくじゃむ」を開催しました。 このイベントは PLAY の技術情報交流を活発化させるため不定期で開催している社内の LT 会です。 ジャムセッション（即興で行われる演奏会）のように、普段はあまり関わりがない人たちが、ふらりと立ち寄って話をするような場であってほしい、また、パンにジャムを塗るようにエンジニアにも知識を塗り足していきたい、といった想いを込めて「てっくじゃむ」と名付けています。 今回は3名の社員が登壇しました！ 登壇者 タイトル 土谷 Obsidianで始めるデイリーノート 坂本 n8nを使ってみよう！ 杉嵜 AWS Lambda …

こんにちは、PLAY CLOUD本部 技術推進室 の石川です。「動画配信技術を実装して理解する」も3回目の記事となりました。 前回の記事はこちらになります。 developers.play.jp 今回は、前回のHTTP-FLV配信のベースに対して、MPEG-TSにトランスマックスし、HTTP-TS配信を実装します。 本当はHLSにして配信するまでをまとめて書きたかったのですが、HLSで使うMPEG-TSへのトランスマックス処理だけで、非常に長くなってしまいました。 このため、FLVからMPEG-TSへのトランスマックス単体で記事にしたという次第です。 トランスマックスについての基礎知識は、以前…

2025年6月25,26日は AWS Summit Japan 2025 の開催日。前日に台風が接近したので心配でしたが無事に開催され、私も幕張現地まで出向いて2日間参加しました。クラウドベースのコンタクトセンターを構築できる Amazon Connect は、日本国内では東京リージョンでのみ提供されてましたが、大阪リージョンでも近日中に提供されると発表されました。加えて Amazon Connect Global Resiliency に対応するため、日本国内でのマルチリージョン構成が可能になります。申し込みは同日6月25日に開始しました。日本における生成 AI 技術の実用化を支援するプログラムとして「AWS ジャパン生成 AI 実用化推進プログラム」があります。今回、経済産業省と NEDO主催の懸賞金型プロジェクト「GENIAC-PRIZE」への応募者を支援するプランと、Agentic AI実用化への取り組みを総合的に支援するプランの追加が発表されました。生成AIの「Claude」を展開している Anthropic 社が、日本オフィスを今年の秋に開設することを発表しました。アジア太平洋地域で初の拠点となります。

こんにちは。テックリードの丸山 @maruyamaworks です。最近は Claude Code に全部賭けています。 前回、GitHub Copilot を使って Storybook を作った話を書きました。 developers.play.jp 今回はその応用編として、Storybook を MCP サーバ化して LLM に提供することで、社内 UI コンポーネントを使用したフロントエンドの開発を自動化できるのではないか、ということで実験してみたいと思います。（これをやるために Storybook を作ったといっても過言ではない） 何をやろうとしているのか まずは先駆者から学ぼう MCP…

こんにちは。テックリードの丸山 @maruyamaworks です。最近は Claude Code に全部賭けています。 弊社も生成 AI を活用することで開発効率を圧倒的に高めるべく、さまざまなツールの検証や導入、社内ルールの整備などを急ピッチで進めています。また、実際に開発支援系 AI を活用してうまくいった事例もいくつか出てきています。今回はその中から、GitHub Copilot を活用して社内 UI コンポーネントのカタログを作った話をご紹介したいと思います。 社内 UI コンポーネントについて Storybook を利用した UI カタログの整備 Story ファイルを作成してもら…

クラウドサービスを使う上でコスト管理は避けて通れない課題です。今回、AWS のコスト状況をグラフ画像にして Slack に投稿する社内ツール「Budget Falcon」を作りましたので、作った際に考えたことなどを書いていきます。弊社 Slack には元々、コストを通知するツールが点在していました。しかし、どうしても社内ツールにかけられる時間は多くなく、使いにくい状態のまま動き続けていたものもしばしば。後回しにされがちだった社内ツール改修ですが、とうとう重い腰を上げて、AWSコストを可視化するツールを全社共有で使えるように1つ作ることになりました。

こんにちは、技術推進室の石川です。「動画配信技術を実装して理解する」も2回目の記事となりました。不定期連載ですので、気ままに連載していこうと思います。 前回(第1回目)の記事はこちらになります。developers.play.jp 前回はRTMPを受信してFLVファイルに変換しましたが、今回はFLV出力をファイルではなくHTTPで配信する、いわゆるHTTP-FLV配信を実装してみたいと思います。今現在、FLVは使われてないように見えますが、実はFLVをHTTPのストリームとして配信しているという事例も存在します。今回は、その配信方式がどのような実装で成り立っているかを説明します。 では、HTT…

こんにちは。2024年度に入社しました、PLAY CLOUD本部プラットフォーム技術部 開発第2グループ所属の成瀬です。 業務でAWS上にシステムを構築する機会があり、その開発において LocalStack を利用することで、失敗を恐れずに開発を進めることができました。 本記事では、LocalStack の使用方法と、Webブラウザから LocalStack 上のAWSリソースを管理できる「LocalStack Resource Browser」をご紹介します。ぜひ参考にしていただければと思います。 LocalStack とは インストール LocalStackへのデプロイ方法 デモ Loca…

こんにちは、OTTサービス技術部 開発第1グループの清瀬です。 主にフロントエンドエンジニアを担当しております。 とあるプロダクトで、NestJSを触る機会がありました。 そのプロダクトではAPIドキュメントがなかったので、NestJSのdecoratorを利用してSwaggerSpec(APIドキュメント)を自動生成してみたので、その手順を紹介したいと思います。 そもそもNestJSって? APIドキュメント生成手順 @nestjs/swaggerのdecorator紹介 【Tips】カスタムデコレーターでエラーレスポンスを共通化しよう まとめ そもそもNestJSって? NestJSはNo…

こんにちは、OTTサービス技術部開発第一グループの麻田です。 今回は、案件で実施した型リポジトリの導入および運用効率化の取り組みについてご紹介します。 導入背景と課題 開発時の運用 GitHub Actions による CI/CD パイプライン構築 自動化の流れ 現状の課題と今後の展望 まとめ 導入背景と課題 私たちのチームでは、OTTサービス向けのWebおよびHTML5 TV（テレビ向けWebアプリ）のフロントエンドと、BFF（Backend for Frontend）の開発を担当しています。 直近でプロダクトをTypeScriptへ移行しましたが、ツールを使って一括変換したこともあり、型定…

こんにちは。24年度に入社しました、PLAY CLOUD本部プラットフォーム技術部開発第3グループに所属しています、大城と申します。 業務でSAM (Serverless Application Model) を利用してサーバレスのAPIを構築する機会があり、その過程でSAM で利用する CloudFormation で関連リソースの構築まで行いました。コンソールから手作業でリソースを作成する方法もありますが、IaC（Infrastructure as Code）の考え方で実装することで、管理のしやすさと再現性を向上させることができます。 本記事では、AWS SAMテンプレートを使ったリソース…

こんにちは、2025年度から技術推進室に異動しました、石川です。以前はフルスタックエンジニアとして動画配信における字幕に関わっていました。システムプログラミングから様々なプレイヤーの字幕表示まで、字幕に関わる問題をワンストップで一貫して対応するエンジニアとして活動していました。 今回は、趣味の一環として動画配信の技術を自分で実装して遊んでいるので "動画配信技術を実装して理解する"と題して、様々な動画配信技術を実装する観点から紹介する記事を書いてみたいと思います。ちなみに、不定期連載になる予定です。 今回は、まだまだ打ち上げプロトコルとして現役なRTMPの受信部分を実際に実装して理解してみまし…

皆様はじめまして。 24卒で新卒入社いたしました、OTTサービス技術部の篠原です。 本稿では、React 17 から React 19 へのバージョンアップに伴い実施した対応について紹介します。 前提 React 19 への移行のポイント 全体の移行方針 この移行方法を採用した背景 React 19 への移行で発生した問題と対応 React 17 の時点で対応した修正 React 17 → React 18 への移行で発生した問題 原因 対応 React 18 → React 19 への移行で発生した問題 原因 対応 codemod を使った自動移行の試み codemod とは codemod…

デザイナーの白川です。 主にプロダクトのUIをデザインしています。 前回はデザイナー向けに「Figma で実装イメージを効果的に伝えるためのデザインのコツ」という記事を書きました。 developers.play.jp 今回の記事ではエンジニアさん向けにFigmaのデザインを実装で再現するためのポイントをご紹介します。 デザイナーさんにも参考になる内容になっています 私が Figma を使う中で見えてきた課題や知見を活かしたデータの作り方を基にしています。 デザインデータ作成時に意識すべきポイントとして参考になるかと思いますので、前回書いた記事と併せて読んでいただけると嬉しいです。 Figma…

2025年3月27日（木）に 社内のエンジニアの技術力向上を目的として、 AWS 様と合同で開催したイベントについてのレポートです！ AWS 様から5名、PLAYオフィスにお越しいただき、セミナールームで実施しました。 AWS GameDayとは AWS GameDay は、チームベースの環境で、AWS ソリューションを利用して現実世界の技術的問題を解決することを参加者に課題として提示する、ゲーム化された学習イベントです。 AWS GameDay 公式サイト GameDay開催の背景 PLAY では、常に新しい技術を取り入れ、お客様に最も良い体験を提供することを目指しています。 その実現に欠か…

24卒で新卒入社いたしました。メディアサプライチェーン技術部開発第１グループの山口です。 私は業務の中で、動画に任意のテキストをテロップとして重ねられる機能を実装しました。 その際、テロップ画像をサーバーサイドで生成すると、ブラウザでプレビューを表示するまでに若干の遅延が発生する点や、サーバーの稼働コストがかかる点を考慮し、今回は、HTML 要素を画像化するという方法でブラウザ上でテロップの画像データを作成しました。 本記事では、この方法についてご紹介いたします。 HTML要素のテロップを画像化 1. SVG形式の画像を作成 2. SVG形式の画像をPNG形式の画像に変換 実際に動かしてみた …

こんにちは、Androidアプリの開発を担当しているOTTサービス技術部の山田です。 2024年4月以降、「Gemini (ジェミニ)」がAndroid Studioで標準搭載されているということで、使用感について紹介させていただきます。 Geminiとは？ 導入してみる 事前準備 構築方法 使ってみる チャットボット コード補完 エラー調査 コード説明 コードレビュー コード生成 使用制限 設定解除 所感 Geminiとは？ Geminiは、Googleが開発したマルチモーダル生成AIモデルです。 ユーザーから入力された画像/動画/音声など複数のデータを統合し、テキスト/画像を生成することが…

こんにちは、運営です。 2025年3月7日（金）に、PLAY 社内で 「てっくじゃむ」を開催しました。 このイベントは PLAY の技術情報交流を活発化させるため不定期で開催している社内の LT 会です。 ジャムセッション（即興で行われる演奏会）のように、普段はあまり関わりがない人たちが、ふらりと立ち寄って話をするような場であってほしい、また、パンにジャムを塗るようにエンジニアにも知識を塗り足していきたい、といった想いを込めて「てっくじゃむ」と名付けています。 今回は2名の社員が登壇しました！ 登壇者 タイトル 鈴木 AI を組み込んだ強制的にジムに行ける iOS アプリ作ってみた 丸山 KR…

みなさんこんにちは。 OTTサービス技術部 開発第一グループの諸岡です。 今回は少し毛色を変えて、身近な入力機器であるキーボードについて書いていこうと思います。 左右分割キーボードの利点 自作キーボードの利点 快適に作業する為のキーマップカスタマイズも可能 ファームウェアとキーマップ編集について 自作キーボードを作る場合に必要な物など キースイッチについて Keyball以外にもあるトラックボール搭載左右分割キーボード 最後に みなさんは、普段の入力に使っているキーボードは何を使用されていますか？ 私は現在、白銀ラボさんが販売されている自作キーボードキットであるKeyballシリーズを使用して…

こんにちは、PLAY CLOUD本部 プラットフォーム技術部開発第１Gのキムテヒョンです。 入社してから早くも3ヶ月が経ちました。新しい環境で様々な技術に触れながら、多くのことを学んでいます。 特に、良いコードについての考えが深まってきましたが、今回の記事ではデザインパターンについてお話ししたいと思います。 良いコードとは何か？ ストラテジーパターンとは? ストラテジーパターンの使用例 割引率計算システムでのリファクタリング プロダクションでの使用例（Passport.js） 実務での活用例 おわりに 良いコードとは何か？ 私はいつも「良いコードとは何か？」「良い設計とは何か？」について考え、…