こんにちは。テックリードの丸山 @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） 実務での活用例 おわりに 良いコードとは何か？ 私はいつも「良いコードとは何か？」「良い設計とは何か？」について考え、…

株式会社PLAYでiOSエンジニアをしております鈴木斗夢と申します。 WWDCのApple Intelligenceに関する発表がかなり刺激的だったのでご紹介いたします。 Apple Intelligenceとは何か Apple Intelligenceは私たちの生活をどう変えるか 画面の内容を認識する 免許証の写真からフォームに自動入力 ｢妻がこの前送ったポッドキャストを再生して｣ に応えるSiri 「まるで秘書のような」スケジュール管理をするApple Intelligence ChatGPTとの連携 SiriとChatGPTが協力する新しい体験 書類やプレゼンテーションのサポート プライ…

こんにちは、運営です。 2025年1月16日（木）に、PLAY 社内で 「てっくじゃむ」を開催しました。 このイベントは PLAY の技術情報交流を活発化させるため不定期で開催している社内の LT 会です。 ジャムセッション（即興で行われる演奏会）のように、普段はあまり関わりがない人たちが、ふらりと立ち寄って話をするような場であってほしい、また、パンにジャムを塗るようにエンジニアにも知識を塗り足していきたい、といった想いを込めて「てっくじゃむ」と名付けています。 今回は中途で入社した2名の社員が登壇しました！ 登壇者 タイトル 清瀬 技術負債のリアル 石川 （社外秘のため公開 NG ！） フリ…

こんにちは。2024年5月に中途入社しました、OTTサービス技術部第2グループの千葉です。 私は前職でエンジニアとしてのキャリアをスタートし、その後、エンジニアとして開発業務を続けながらプロジェクトマネージャー（PM）も兼務して、自社サービスの開発に携わっていました。 そして現在はPLAYでエンジニアとして、動画配信サービスの開発を行っています。 エンジニアとPMを両立する立場を経験したことで、技術的な視点だけでなくプロジェクト全体を俯瞰する視点を意識するようになり、少しずつですが以前より広い視野で物事を捉えられる場面が増えたと感じています。その経験は、現在のエンジニア業務にも少しずつ活かされ…

こんにちは、OTTサービス技術部 開発第2グループの榊です。 今回は、当社でRuby on RailsでのRedisクライアントのクラスターモード対応を行った際の事例についてお話しします。 私が担当しているプロジェクトでは、これまでAmazon ElastiCache with Redis OSS compatibility（以下、ElastiCache (Redis OSS) と記載します）をクラスターモード無効の状態で運用しており、この設定ではシャード1のリードレプリカが最大5つまでと制限があります。徐々にデータ量が増加してきて今回ノード数の増強が必要になったため、クラスターモードを有効に…

2024年も終わりが近づいてまいりました。 メディアサプライチェーン技術部開発第１グループの松尾です。業務では動画配信サービスへの入稿を支援するプロダクトを開発しています。 みなさんが使っている Netflix や Amazon Prime Video などの動画配信サービスでは、ドラマやアニメなどさまざまなコンテンツを視聴できます。このコンテンツの配信に必要なデータは、コンテンツ所有者が動画配信サービスへ入稿しています。入稿するために必要なデータは各動画配信サービスが決めており、「このようなデータ構造で入稿してください」という入稿スタイル（及び入稿規定）も各動画配信サービスで様々です。入稿ス…

24卒で新卒入社いたしました、OTTサービス技術部第2グループの比嘉です。 私が配属されて初めて行なった業務で使って便利だったMinIO*1というツールについてご紹介します。 MinIOはクラウドサービスとして提供されていますが、Dockerなどを用いてローカル環境として使用することもできます。 今回はRuby on Rails + MinIOをローカル環境で使う方法とS3を並行して使う際の環境ごとの向き先制御についてお話しします。 背景 問題点１：AWSに接続できない 問題点２：バケット名決まってない MinIOとは LocalStackとの違い 使用環境 DEMO環境構築 1. Rails…

こんにちは。ULIZAサービス部の松原です。 先日、趣味で「App Development with Swift Certified User」および「Associate」を受験しましたので、その体験談をお話ししようと思います。 App Development with Swift とは 試験概要 教材と勉強法 教材 私の勉強法 試験結果 英語の試験について 資格を取得して 終わりに App Development with Swift とは 「App Development with Swift」は、SwiftとXcodeを使用したアプリ開発の基礎知識を証明するApple認定の資格です。 現…

デザイナーの白川です。 主にプロダクトのUIをデザインしています。 自分がデザインしたUIの実装をエンジニアさんにお任せする場合、実装イメージをエンジニアさんに伝える必要があります。 デザインパーツひとつを例にとっても、 ・どこで使われているのか(どこまで使い回されるのか) ・どんな表示バリエーションがあるのか ・どこまでコンポーネントに含めるべきなのか ・そもそもコンポーネント化が必要なのか といったコンポーネント化の観点から、 ・サイズは固定なのか、値に応じて変化するのか ・親要素や画面サイズに追従して位置やサイズが変化するのか ・過大な値が入力された場合はどう表示するのか ・最大/最小サ…

こんにちは。プラットフォーム技術部開発第3グループの荒川です。プロダクトの「PLAY VIDEO STORES」の開発をしています。 フロントエンドの開発をしている際、デザインを確認するために特定の操作を行わなければならなかったり、コードを変更したりしなければならない場合があります。 これらの課題を解決するためにStorybookの導入とUIコンポーネントの分離をしました。今回は、そのプロセスと利点についてご紹介します。 課題 Storybookとは デザインとロジックを分離する Storybookを使ってUIコンポーネントを作成する UIコンポーネントをパッケージとして公開する ロジック側の…

こんにちは、OTTサービス技術部開発第1Gの大元です。 みなさんはどのようにデプロイを行っていますか？ 私の担当している案件ではビルド、ECSタスクのエラーの確認、切り替えなど手動で行っていました。 手動で行うとミスも発生しやすいですし、デプロイに毎回時間を取られて大変ですよね。 この手動で行っていたデプロイ方法を CodePipeline / CodeBuild / CodeDeployを使用して自動化しました。 今回は、このデプロイ自動化について紹介していきます。 従来のデプロイ方法と課題 自動デプロイのメリット デプロイの流れ 前提条件 デプロイの構成 ファイルの配置 Code兄弟による…

こんにちは、テックリードの丸山 @maruyamaworks です。 最近、PLAY 社内で LT 会「てっくじゃむ」を開催しました。「てっくじゃむ」という名前は、ジャムセッション（即興で行われる演奏会）のように、普段はあまり関わりがない人たちが、ふらりと立ち寄って話をするような場であってほしい、また、パンにジャムを塗るようにエンジニアにも知識を塗り足していきたい、といった想いを込めて運営メンバーで考えて決めたものです。 ▼ 社内のデザイナーさんにロゴも用意していただきました！ 今回は私を含め 6 名のメンバーが登壇を行いました。 登壇者 発表テーマ 丸山 PLAY CLOUD に Vite …

こんにちは、メディアサプライチェーン技術部開発第１グループの渕です。 任意に指定したパスの直下にあるフォルダ・ファイルを取得するファイルシステム検索をElasticsearchで実現するために、Path hierarchyというトークナイザーを使用してみました。 Path hierarchyとは Path hierarchyによる検索 インデックスへの設定 Path hierarchyを使用した検索 Path hierarchyを使用しない方法 Path hierarchyと階層数によるファイルシステム検索の実現 階層数の追加 指定したフォルダ直下にあるフォルダ・ファイルの取得 最後に Pat…

こんにちは、iOSアプリの開発を担当しているOTTサービス技術部開発第3Gの鈴木です。 皆様、UIテストは実施しておりますでしょうか。 UIテストを実施する場面としては、リグレッションテストが多いかと思います。 そんなUIテストが自動化されているかというと、まだまだ人力で頑張っているような状況が多いかと思います。 自動化できるテストはどんどん自動化していきたいですね。 ということで、今回はiOSアプリ開発におけるUIテスト自動化ツールとして候補に上がりがちな、「XCUITest」と、「Maestro」の二つを比較します。 本記事が皆様のUIテストの導入、及びその自動化の手助けになれば幸いです。…