こんにちは、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テストの導入、及びその自動化の手助けになれば幸いです。…

こんにちは、Androidアプリの開発を担当しているソリューション技術部の呉です。 システムやアプリ開発にあたっては、タスクや不具合の管理が非常に重要です。それらを一括管理できるJiraという管理システムがあるおかげで、開発がすごくスムーズに進められるケースもたくさんあります。 自分も現在まさにJiraが使われているプロジェクトに参加しています。しかし私の場合、Jiraプロジェクトがお客様によって管理されているので、自分達の都合では自由にカスタマイズできません。 例えば下記のようなバックログリストがあります。 タスク名、ステータス、担当者が表示されていますが、開発側として対応OS、詳細対応状況…

こんにちは、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エンジンの更新にはイン…

初めまして 、ソリューション技術部の中西と申します。 エンジニアになり初めてAWSに触れることになった時、どこから勉強をすれば良いか分からない、実際に参考記事通りに操作をしてみようと思っても、注意として「時間単位でお金がかかります！終わったら消しましょう！」などの文章をよく見かけることになり、初心者にとってはなかなか気軽に手を出すことが難しいですよね。 そんな悩みを解決するのが今回ご紹介する、Cloud Questでした。 AWS Cloud Questとは？ 事前準備 Builderアカウントの作成 教材の登録 実際にやってみよう 1. 学習 2. 計画 3. 実践 4. DIY 報告 まと…

こんにちは 、ソリューション技術部の木下です。 ベンチプレス100kgは上げられるものの105kgが一向に上げられず、減量中のせいだということにして、やり過ごしている日々です。きっと増量し始めたら上げられると信じています。 さて、CORSはWeb開発を行っている方はほとんどの方が遭遇したことがあるかと思いますが、初見だとなかなか対応方法がわからない、あるいは設定方法だけはわかったけどなぜ必要なのか、何をしているのかわからないという新人の方も多いのではないでしょうか。 そんな方にお送りする「CORS入門：初心者が知るべき基本について」について、お送りします。 CORS (Cross-Origin…

最近新しい趣味を始めようと、前々から欲しかった車を買いました。 みなさんこんにちは、ソリューション技術部の隈本(クマモト)です。 今回は弊社でも新しい試みであるReact Nativeのお話です。 React Nativeを触ったことあるみなさんは、その中でもスタイリングについてどのようにされていますか？ サンプルコードによくあるようにコンポーネント内にスタイルを記述しますか？それともスタイル用のファイルを用意しますか？それともウルトラCな方法で記述してますか？ もしウルトラCをご存知の方がいれば教えてください。 今回私がReact Nativeの案件を進めるにあたり、実際に対応したスタイリン…

こんにちは。プラットフォーム技術部第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 事前準備 実装 動作確認 注意点…