はてなブックマーク

こんにちは、『スタディサプリ』の iOS エンジニアのヴァンサンです。 先日、『スタディサプリ』の一部の講座の動画に日本語字幕が追加されました。音声と同じ言語の字幕は、聴覚に障がいのあるユーザーだけでなく、音声が聞こえづらい環境や、イヤホンが手元になく音を出せない環境でも有用です。さらに、字幕データ自体も検索や内容のまとめなど、さまざまな用途での活用が期待できます。そのデータがなければ、せっかく制作したコンテンツをフル活用できないでしょう。 この記事では、私たちが自動生成を選んだ経緯や字幕生成のプロセスを紹介します。私の生成 AI に関する知識はまだ浅く、改善の余地は多分にあります。また、AI 技術は急速に進化しているため、ここで紹介する方法はすぐに時代遅れになる可能性もあります。それでも、この取り組みが何かの参考になれば幸いです。 字幕 まず、生成について説明する前に、字幕の基本的な概念

こんにちは、@chaspy です。開発部長をしています。本日は小ネタで失礼します。 私たちは普段、monorepo で開発しています。monorepo については過去色んな記事で言及されているのでぜひご覧ください。 blog.studysapuri.jp blog.studysapuri.jp 最近、monorepo で Cursor Project Rules を管理する仕組みを整えたので、その話をします。 Cursor Project Rules の課題 さて、読者の皆さんの周囲でも利用している人は多いかと思いますが、AI エージェント系の開発ツールを利用しておりまして、私たちの組織では Cursor が多く使われています。 とっても便利な Cursor の Project Rules、チームで利活用できるよう育てていきたいですよね。しかし、これを monorepo で使う場合、困った

こんにちは。@chaspyです。『スタディサプリ 小学・中学・高校講座（以下、スタディサプリ小中高）』の開発部長をしています。この記事はスタディサプリProduct Team Advent Calendar 2024の25日目の記事です。 まずはじめに、このアドベントカレンダーを執筆してくださった皆さん、そして運営をしていただいたEngieering Office Team*1の皆さん、レビューいただいた広報関係者の皆さん、本当にありがとうございました。はじめての取り組み、かつ急に決まったにも関わらず、無事全ての枠が埋まり、公開できたことを嬉しく思います。この場を借りてお礼申し上げます。 本稿では、10月頃に社内で私が発表させていただいた「開発組織が事業貢献するには」という話を中心に、生成AIの活用や今後のプロダクト開発の展望など話を入れながら今年の締めくくりにできたらと思います。 開発組

こんにちは。スタディサプリ小学・中学講座の Engineering Manager をしている @ywada526 です。 今回は、現在時刻に依存する機能の動作確認コストを下げる基盤について紹介します。この基盤は、社内ではコード上の名前をとって「Time Injection」という愛称 1 で呼ばれています。この記事内でも Time Injection という名前を使って説明します。 みなさんは、現在時刻に依存する機能の動作確認や品質保証はどのように行なっていますか。「時刻を固定した環境を用意する」「データを弄る」「ユニットテストで担保するから動作確認はしない」「コードをじっと見つめて問題ないと言い切る 2」など色々あると思います。これまで、スタディサプリ小学・中学講座でも同様の手段で動作確認を行なってきましたが、動作確認コストが課題であったため、Time Injection を導入するこ

はじめに こんにちは、スタディサプリのプロダクト基盤...その中でも特に動画基盤の開発を行っている @highwide です。 これは スタディサプリProduct Team Advent Calendar 2024 16日目の記事です。 今日は動画基盤チームで利用しているFastlyの構成や、我々がハマってしまった落とし穴について書きたいと思います。 これは自分で掘った穴にハマっている長男です 動画基盤におけるFastlyの使い方 スタディサプリでは、動画の配信はFastlyを通じてHLS(HTTP Live Streaming)*1によって行っています。 HLSでは、動画再生のために必要なファイルを列挙したマニフェストファイル(m3u8)と、動画コンテンツそのものであるセグメントファイルの組み合わせによって動画の視聴を実現します。 スタディサプリでは、学習コンテンツに紐づく動画のメタデ

スタディサプリでソフトウェアエンジニアやエンジニアリングマネージャをやっている @pankona です。 Go 1.24 でツールのバージョン管理が便利になりそうという話をします。 (Go 1.23 現在) go install という便利なコマンドがある Go 1.24 の話をする前に、go install というコマンドの現状について簡単に触れておきます。 Go で書かれたツールのうち、所定の条件を満たすものは go install コマンドでインストールすることができます。たとえば goimports であれば、 go install golang.org/x/tools/cmd/goimports@latest というコマンドを実行することで我々のPCにインストールされ、使うことができるようになります。たいへん簡単で便利です。 インストールするツールのバージョンを指定したい場合はど

こんにちは。SRE の @int128 です。 スタディサプリのプロダクト開発では GitHub Actions を積極的に導入しています。本稿では、日常の風景に溶け込んでいる GitHub Actions を紹介します。 プロダクトの開発運用を支える GitHub Actions リポジトリとオーナーシップ 我々は monorepo を採用しており、すべてのマイクロサービスを同じリポジトリで管理しています。リポジトリのディレクトリ構成は下図のようになっています。 . ├── .github/workflows/ │ ├── マイクロサービス--test.yaml │ ├── マイクロサービス--deploy.yaml │ ├── ... │ └── reusable--横断的関心事.yaml ├── マイクロサービス/ │ ├── README.md │ ├── プロダクションコード..

はじめに こんにちは！ 私は教育支援小中高プロダクト開発部に所属し、スタディサプリの小中学生向けサービスの開発・運用を担当しています。 今回は、GitHub Actions で異なる Workflow 間で Artifact をやり取りする方法について解説します。 業務の中で、異なる Workflow 間での Artifact のやり取りが必要な場面があり、少々手間がかかりました。 Artifact とは？ まず、Artifact とは GitHub Actions における実行結果のファイルやデータのことを指します。 Workflow が実行されると、生成されたビルド結果やテストレポート、ログファイルなどが保存されることがありますが、これらを他のジョブや Workflow に渡すために保存したものが「Artifact」です。 例えば、ビルド結果のバイナリといった Workflow の成果

はじめに こんにちは。スタディサプリでプロダクトプラットフォームの開発を行っている @highwide です。 この度、スタディサプリの開発メンバーで技術評論社様の「Software Design 2024年9月号」の第一特集「実例から学ぶ！GraphQLでアプリケーション開発 現場における使いこなし方を徹底チェック」を執筆しましたので、紹介させていただきます。 gihyo.jp 記事の内容について 全5章の構成で、下記のような章立てとなっています。 第1章「GraphQLとは - 利点・注意点を整理して輪郭をつかむ」(@ywada526) 第2章「GraphQL導入 - クエリを書いてデータ取得を試してみよう」(@YutaUra) 第3章「サーバサイドの実装 - TypeScript＋Apollo Serverでサーバを構築する」(@y-kaanai) 第4章「クライアントアプリケーショ

こんにちは。@chaspyです。 先日こちらのイベントで登壇してきました。 findy.connpass.com 発表資料はこちらです。 概要については以下の @aoi1 さんの以下のブログも参照ください。 blog.studysapuri.jp 内容は資料を見ていただきたいですが、ポイントとしては以下になります。 基本的には検索システムと捉えている AI Search がクエリの生成と検索結果から回答生成を行っている そのため、E2E で評価しないと実際のアプリと同様の回答が得られない 若干高コストにはなるが、E2E で簡易的はリグレッションテストを行っている とにかく素早くフィードバックサイクルを回すことが重要（ソフトウェア開発と同じ） ユーザに使ってもらい、評価する、自分でテストを回して、修正する、を繰り返す 評価手法にこだわるよりは改善を繰り返す方が大事 また、アーキテクチャの補足

はじめに スタディサプリ小学・中学講座を開発している Android エンジニアの @maxfie1d です。 スタディサプリ小学・中学講座ではデザイナーがFigmaで作成したデザインデータをもとにエンジニアがUIのコードを書いています。 UIのコードを書くことはとてもクリエイティブで楽しい作業ですが、一方でUIにたくさんあるプロパティを読み取りながらコードに反映するのはそれなりに時間がかかり面倒でもあります。 この面倒な「デザインからコードを起こす作業」を効率化できないかどうかを考え、Figma の Code Connect と Code Generation APIを導入したのでご紹介します。 デザインからコードを起こす作業の課題 デザインからコードを起こす作業の課題について具体例をもとに説明します。 例えば小学講座で利用しているMainButtonコンポーネントには Size Sty

こんにちは。スタディサプリのQAチームです。 今回のBlogではスタディサプリで実施している自動化テストの一部の取り組みについて紹介させていただきます。 なお、スタディサプリQAチームの特性を活かし、本記事については日英中３言語で記載します。より多くのオーディエンスに読んで頂ければ嬉しいです。 自動化する動機 まず、なぜ自動化テストを導入するのでしょうか。 1. 新規機能が追加される度に、既存機能への影響を確認するための回帰テストをしなければなりません。 2. 繰り返し同じテストを手動実行することにより、テストコストが増加します。 3. 人間が実施すると、人為的ミスによる不具合の検出漏れが発生してしまう可能性が否定できません。 そのため、品質を担保した上でより早くリリースすることを目的とし自動化を導入しました。 現在の開発およびテストフロー QAが回帰テストの自動化テストスクリプトをGit

RAGを使った社内ドキュメント検索Botの構築 こんにちは！スタディサプリのSREをしている@_a0iです。みなさん、生成AI使っていますか〜！？ ChatGPT, Graffer AI Studio, Microsoft Copilotなど企業で使える生成AIはさまざまだと思います。 しかし、仕事で生成AIを使う際にこれらでは物足りないと思うことはありませんか？一般的な回答ではなく、仕事に特化した回答を生成してほしい、そう思ったことはないでしょうか。 今回Retrieval-Augmented Generation(通称RAG)を使って社内のドキュメントを自然言語で検索できるSlack botを作ってみました。この記事ではそのプロジェクトの背景、システム構成、工夫ポイント、効果と課題について紹介します。 RAGを使った社内ドキュメント検索Botの構築 背景 RAGとは システム構成 詳細

こんにちは。スタディサプリの小中新規開発チームで Web エンジニアをしている @YutaUra です。 去年の４月に新卒で入社をしまして約 1 年が経ちました。インターン生時代にもブログを書いているのでご興味あれば合わせてご覧ください。 GraphQL と Persisted Query スタディサプリ小中講座ではデータ通信に GraphQL を採用しています。 GraphQL を利用することで、クライアントはスキーマに定義された範囲で自由にデータを取得することができます。 query GetUser { user { name age } } また、 GraphQL はデータのグラフ構造に基づいて関連する複数のデータを一度に取得することができます。 query GetUser { user { name age posts { title content } } } GraphQL の

スタディサプリ小学・中学講座を開発している Android エンジニアの @maxfie1d と @omtians9425 です。 2024年2月26日にスタディサプリ小学・中学講座をAmazonアプリストアにて配信を開始致しました。 すなわち今後は Fire タブレット においてもスタディサプリ小学・中学講座をお使いいただくことができます！本記事では Amazon アプリストアでの配信にあたり必要な開発や Tips についてお届けします。 学習を始める方におすすめの端末をご紹介｜スタディサプリ Fire タブレット、Amazon アプリストアとは Fire タブレットは Amazon から発売されているタブレットで、代表的な Fire HD 10 などに加えてキッズモデルもラインナップされています。 OS には Fire OS が採用されています。Android をベースにした OS で

こんにちは。SREのkyontanです。Rubyが大好きなのでRubyの話をします。ちなみにリクルートはRubyKaigi 2024へGold Sponsorとして協賛しています! *1。ぜひ沖縄でお会いしましょう。 これはあるアプリケーションのメモリ消費量を示すグラフなのですが、まさかgemを入れ替えるだけでこんなに嬉しい変化が見られるとは思っていませんでした。今日はそんなgemの話をします。 話は遡って2023年4月のある日、インターネットを眺めていたところ、ShopifyがpitchforkというOSSを公開したという情報が目に留まりました。 調べてみると、どうやら著名なRackサーバー実装の1つであるunicornの派生版であり、メモリ使用量の削減に特化しているらしいのです。 github.com これはスタディサプリ小中高のあのリソースドカ食いマイクロサービス第一位である api

こんにちは、@chaspyです。プロダクト開発部の部長をしています。 スタディサプリ小中高の開発組織では、Engineering Manager (以降 EM と記す) という役割があります。*1 その役割は、エンジニアリングマネージャ/プロダクトマネージャのための知識体系と読書ガイド を引用させてもらうと、People Management + Technology Management を主に担ってもらっています。*2 ありがたいことに、ここ数年で新たに EM にチャレンジしてもらえる機会が増えました。本稿ではそんな EM の活躍をサポートするオンボーディングの仕組みについて説明します。 メンバーのオンボーディングとの違い 任用直後にグレード設定という重要な仕事がある （主に人事の内容は）秘匿された情報が多く、引き継ぎの重要性が高い 新任 EM を迎える絶対数が（相対的に）少ない EM

こんにちは。@chaspy です。プロダクト開発部の技術戦略グループのマネージャをしています。 技術戦略グループでは、日頃開発する上での課題の投げ込みや議論、解決するための計画をボトムアップで行っています。技術戦略グループの活動については過去のアウトプットもご覧ください。 blog.studysapuri.jp また、本稿のテーマである、組織やシステムの状況を把握するための Fact 収集については技術戦略 DevOps WG が担当しています。以前発表した資料もご覧ください。 このように、技術戦略グループではエンジニア1人1人が課題だと思うことを表明、宣言し、その課題をトリアージすること、および課題を評価するための Fact の発見・提供を行う仕組みが組織としてボトムアップで行える状態になっています。一方、開発部長として、事業戦略と結びつける形で技術戦略を策定する際には、現場のエンジニア

この記事は Enginnering Manager Advent Calendar その２の1日目の記事です。（大遅刻しました） こんにちは。@chaspy です。10月からスタディサプリ小中高*1プロダクト開発部の部長をしています。 本記事では、我々の組織で取り組んでいる技術戦略の現状と今後についてお伝えします。 技術戦略とは何か スタディサプリ小中高の技術戦略 開発比率適正化 課題発見と改善サイクルの確立 直近の取り組み ガイドラインの策定 マイクロサービスの命名 今後追加が予定されているもの monolith の方針検討 共有データベースに対する Model 層の管理方針 api endpoint ごとのオーナーシップ策定 技術戦略グループとして実現したいこと おわりに 技術戦略とは何か ざっくりいうと、事業計画に対して、技術投資をどこにするのか、しないか、です。"技術"投資と言って

最終更新日: 2024年05月07日(火) 1. ご挨拶 2. 本記事執筆のモチベーション 3. ワークショップを通じて得たフィードバック 3-1. Pains -過去抱えた/現在進行形で抱えている辛み- 3-2. Approaches/Solutions -Pains を解消するために取った方策や導き出した解決策- 3-2-1. えいやで場所を決め打ちしてしまう(e.g., GitHub Wiki + Google docs しか使わない) 3-2-2. 個人的に、2023/12/05時点で〜みたいな書き方を心がけている 3-3. Tips -効果的な手法- 4. オーディエンスからの反響 4-1. 気づきや学び・NEXT ACTIONS 4-2. プレゼンター(@hayat01sh1da)へのフィードバック 4-3. Slack での反応 5. おわりに 1. ご挨拶 初投稿となります

スタサプ小中高を開発している Android エンジニアの@maxfie1d、@morayl とスタサプ ENGLISHを開発している Android エンジニアの田村です。 GitHub Actions(以下 GHA) はアプリをビルドしたりストアに配信したりすることに使えるのはもちろん、もっともっと色々なタスクを自動化することができます。本記事では Androidチームによる GHA を使った自動化レシピをご紹介します。 まずはスタサプ小中 Android版での取り組みを紹介します。 自動でラベルを付与する 2023年9月に リニューアルをしたスタディサプリ 小学講座をリリースしました。アプリとしてはスタディサプリ 中学講座 と同じで 1アプリ内に中学生向けの機能と小学生向けの機能があります。 コードは中学生向けの機能と小学生向けの機能で大きく original/ elementary

こんにちは、@manicmaniac です。スタディサプリ iOS アプリ開発チームのエンジニアリングマネージャーをしています。 小ネタみたいな話ではありますが、Firebase Remote Config の変更を Slack に通知するようにしたらちょっと便利だったので記事にしようと思いました。 Firebase Remote Config とは Firebase Remote Config が何か知らない方もいると思うので、公式サイトから引用すると、 Firebase Remote Config Firebase Remote Config は、ユーザーにアプリのアップデートをダウンロードしてもらわなくても、アプリの動作や外観を変更できるクラウドサービスです。Remote Config を使用して、アプリの動作や外観を制御するためのアプリ内デフォルト値を作成できます。 です。まったく

こんにちは、Androidエンジニアの@morux2です。本記事ではJetpack Composeでスポットライト機能を実装する方法を紹介します。 はじめに スポットライトは、特定の要素を目立たせることでユーザーの行動を促す機能です。スタディサプリ中学講座のオンボーディング画面にも採用されており、現在カスタムViewからの移行を進めています。 スタディサプリ中学講座のオンボーディング 今回は実装を3つのステップに分けて紹介します。 実装の3ステップ 画面全体を半透明の黒いViewで覆う スポットライトを当てたい要素の長方形の座標を取得する 取得した座標に沿って黒いViewを切り抜く 参考にさせていただいた記事はこちらになります。 スポットライト機能の実装 1. 画面全体を半透明の黒いViewで覆う まずCanvasを使用して半透明の黒いViewを作成します。 @Composable fun

こんにちは。スタディサプリの小中高プロダクト基盤開発グループでProduct Platform Engineer兼テックリードをやっている@tooooooooomyです。 今回は、WebアプリケーションにGoの並行処理機構を導入してSLOを改善し、WebAPIを100倍速くした話をしたいと思います。 前提条件 システムを0から作らない場合、アーキテクチャの改善の際には前提条件が付きものです。そこでまずは今回のシステムの前提条件をお話します。 対象となるシステムと、アーキテクチャ 今回対象とするシステムは、ここでは security-tracker と呼び、Webアプリケーション本体はGoで書かれています。 スタディサプリの各アプリケーションにおけるユーザーのログ1を、Amazon Kinesis Firehoseを通して、リクルート全体のセキュリティチームが管理するS3バケット(スタディサ