サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
シン・〇〇
blog.studysapuri.jp
こんにちは。Webアプリケーションエンジニアの @ttokutake です。 今回はスタディサプリのWebアプリケーション開発がどのように行われているかをざっと紹介したいと思います。 スタディサプリ 大学受験講座 の開発の話がメインです。 スタディサプリ 中学講座 は今回の話とはやや異なる部分もあるため、それはまた別のブログ記事で紹介されるかもしれません！ スタディサプリ ENGLISH は全く別物のシステムです。 そちらの開発については こちらのサイト のブログ記事を読むといろいろと雰囲気が掴めそうです。 Webサービスの構成 まずはWebサービスの構成を紹介します。 右半分にはDBを共有している複数のWebアプリケーションが描かれています。 これらは歴史の長いWebアプリケーションがそれなりにあり、いわゆる「分断されたモノリス」状態となっています。 左半分にはマイクロサービス群が描かれ
こんにちは、ujihisa といいます。現在スタディサプリのProduct Platform Team で Product Platform Engineerとして仕事を行っています。 Ruby 3.2 3ヶ月ちょっと前の2022-12-25 (JST) に、Ruby 3.2.0がリリース されました。2023-03-05現在の最新安定版はRuby 3.2.1です。 スタディサプリではRailsなどのwebアプリケーションが26個あり、それ以外も含めると全部で29個のRubyのプロジェクトがあります。記事執筆現在、これらの中で最も古いRubyバージョンは3.0.4です。 一般に、プロジェクトでは常に最新のバージョンのRubyが使えるべきで、当たり前ですが最新バージョンの新機能をうまく使っていって仕事を進めることができるのはとても気持ちいいですよね。逆に、最新バージョンが使えないならば、今後
こんにちは。Androidエンジニアの@morux2です。先日スタディサプリ中学講座にまなレポ機能が追加されました🎉 まなレポは学習状況・学習履歴を確認できる機能です。リアルタイムで学習状況が表示されるので、学習後すぐに成果の振り返りをしていただくことができます。 この記事ではまなレポ機能の実装の裏側をご紹介します。画面はJetpack Composeで構築しています。 まなレポ画面 まなレポ画面の概要 画面要件は大きく2つあります。 日と週のタブを切り替えて、日次・週次の学習履歴を確認できる タブがSticky Headerになる(スクロールするとステータスバーの下にタブが張り付く) ここからは2つの画面要件をどう実現したかお話ししていきます。 Sticky Header Jetpack Composeでタブを切り替えられるようにする タブにはTabRowを用いています。選択されたタブ
こんにちは、 Web フロントエンドエンジニアの @progfay です。 今回はプロジェクトで遭遇した URL 長による GraphQL Request の失敗と Apollo Link による解決方法を紹介します。 引数に配列を受け取る GraphQL field 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信に GraphQL を採用しています。 その中で、以下のような field を実装しています。 type Query { entities(ids: [ID!]!): [Entity!]! } これに対して、以下のような Query を叩きます。 query specificEntities($ids: [ID!]!) { entities(ids: $ids) { name } } Request-URI Too Large ある日、この
はじめに こんにちは、小中高プロダクト基盤開発グループの @kazu9su です。 この記事では、小中高プロダクト基盤開発グループのProduct Platform Engineer(プロダクトプラットフォームエンジニア)とは何をするポジションなのかを具体例を交えて紹介させていただければと思っています。 1. Daily Standup and Service Monitoring 仕事が始まってしばらくしたら、Daily Standup(進捗状況について話し合い、障害を特定するための短い毎日のミーティングです)を行い、雑談をしたり、みんなの予定やSprint Backlog を確認したりします。 Sprint Backlogの様子 その後、担当サービスのモニタリングを行います。 小中高プロダクト基盤開発グループでは、 認証ログサービス 同意証跡サービス のようなサービスをいくつか持ってお
Darklaunchという便利なものと、その未来 3行要約 スタディサプリのRubyバックエンドで気軽に誰でも使える、"Darklaunch"という Feature toggles 機構がある 4年強ほど運用してきて、様々な知見、多様なユースケース、問題などが明らかになった 知見を活かして、近い将来Darklaunch v2というのを社内で作って公開予定 (HTTP APIであり、Rubyバックエンドだけでなく全環境から直接利用可能) Feature togglesとは Feature togglesとかFeature flagsとかchankoとかcanary releaseとかA/BテストとかlaunchdarklyとかflipperとかDarklaunchなどという言葉を見聞きした機会のある方は多いと思います。ちょっとそれぞれレイヤーやカバレッジは違いますが、ようするに「コードの変更
はじめまして！2022年の9月の中頃にジョインしたiOSエンジニアの@komajiです。まだ歴が浅くキャッチアップしている最中ではありますが、私が担当しているスタディサプリ中学講座のiOSアプリが2022年12月現在どのような環境で開発されているのかを紹介していきます。 開発体制 スタディサプリ中学準備講座は、Web, iOS, Androidの３プラットフォームで提供しており、開発チームは以下の縦割りの３チームに分かれています。 growthチーム: サービス全体の利用促進 learning-encourageチーム: 学習促進 learning-coreチーム: 学習体験の向上 iOSエンジニアは、私が所属しているgrowthチームとlearning-encourageチームに２名ずつ所属しております。learning-coreチームは前述した通り学習体験の向上を担うチームですが、ネイ
こんにちは、データエンジニアの @masaki925 です。 今年の春リニューアルされたスタディサプリの中学講座にて、レコメンドシステムを新規構築しました。 そのアーキテクチャが、当初意図していなかったものの、結果的にはCQRS (Command Query Responsibility Segregation) パターンと呼べるものになっていました。 本記事では、CQRS の特徴に則って当該アーキテクチャを紹介しつつ、今後に向けて考察します。 CQRS パターン + イベントソーシング なぜCQRS + イベントソーシングか 1. 分析用の学習ログと、レコメンドシステム用の学習ログは分けたい 2. 直前の学習状況をリアルタイムに反映したレコメンドをしたい 3. レコメンドロジックはルールベースで開始し、ログが溜まったのちに機械学習(ML) ベースに移行したい 4. 学習ログはスナップショ
こんにちは、 Web フロントエンドエンジニアの @progfay です。 この記事は Recruit Engineers Advent Calendar 2022 の 12 日目の記事です。 今回はプロジェクト内で使っている @graphql-codegen/typescript-react-apollo package との思い出を書き綴っていきます。 出会い 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信に GraphQL を採用しています。 また、 GraphQL Code Generator を使って GraphQL にまつわる型や関数の生成を行なっています。 Web Frontend では API Client として Apollo Client を使用しており、 TypeScript と React と Apollo Client を合わ
こんにちは。スタディサプリ小中高 / Quipper SREの@kyontanです。 この記事は Recruit Engineers Advent Calendar 2022 の1日目の記事です。 開発チームが事実に基づいて(= fact-basedな)意思決定をできるようにするための一助として、SREチームではSLO (Service Level Objective)が設定されていることをサービス公開時の要件としています。 スタディサプリ小中高におけるSLOの運用については、以前弊チームの@chaspyが SRE NEXT 2020 で「SLO Review」というタイトルで登壇しました #srenext という記事を書いているので、こちらもご参照ください。 本記事では、これまでしきい値によるアラートを設定していたSLOについて、Burn Rateによるモニタリングを試してみたので、ざっ
こんにちは、iOS エンジニアの @manicmaniac です。 現在スタディサプリ iOS アプリ開発チームのエンジニアリングマネージャをしています。 「スタディサプリ」ブランドで出ているアプリは数多くあるのですが、今回は今年リリースされたばかりの「スタディサプリ 中学講座」というアプリについて書きます。 flaky test とは タイトルにある flaky test について、先に説明します。 2016 年の Google Testing Blog の記事によると、flaky test とは同一のコードで成功と失敗の両方の結果を生むものとされています。 We define a "flaky" test result as a test that exhibits both a passing and a failing result with the same code. こうなっ
こんにちは、小中高プロダクト基盤開発グループの @kazu9su です。 この記事では、チームで取り組んでいるInternal Platform開発についてご紹介できればと思います。 Internal Platformとは AWS, GCP, Shopifyのような、SaaS/IaaS/PaaSとして提供され、それ自体で利益を生むPlatformをExternal Platformと呼びます。Internal Platformとは、External Platformのようにそれ自体で利益を生むことを目的とせず、ユーザーである自社の開発者が本来集中したいことに集中できるようにすることを目的としたPlatformです。 *1 スタディサプリにおけるInternal Platform開発 スタディサプリは、 小学講座 中学講座 高校・大学受験講座 大学受験講座合格特訓コース などの複数のサービス
こんにちは。10月にAndroidエンジニアとしてジョインした@morux2です。スタディサプリ中学講座の開発に携わっています。今回はオンボーディングの締めくくりとして、チームに抱いた率直な印象をお伝えできればと思います。 1. オープンコミュニケーション チームにジョインして初めに驚いたことは、基本的なコミュニケーションが中学講座(通称 : tara)の開発者全体のチャンネルで行われることです。特定の個人やプラットフォームに閉じた相談や質問であっても、オープンに話せる内容は全てここで会話されます。またオンライン会議もtara-devs-ja*1のhuddleチャンネルで行うことがほとんどです。 tara-devs-jaには現在147名のメンバーが所属しています。主に会話しているのはiOS/Android/Webの開発者約30名です。 Android開発者に閉じた会話やオンボーディングがt
こんにちは。ソフトウェアエンジニアの @ttokutake です。 この記事では、スタディサプリ小中高プロダクト開発部の技術戦略グループの活動内容を紹介していこうと思います。 「いきなり何ですか？」と思った方がほとんどだと思われますので、まずは「技術戦略グループとは何なのか」から順を追ってご紹介させていただきます。 @chaspy さんが SRE NEXT 2022 ONLINE で発表している内容と被っている部分がありますが、ご容赦いただけたらと思います。 ちなみに自分は2021年10月〜2022年9月の期間で技術戦略グループの中の横断ワーキンググループをリードする役割を担当していました。 (横断ワーキンググループの説明はこのあとすぐ！) 技術戦略グループとは このグループの目的と目標は以下のようになっています。 目的 プロダクト開発組織とそのシステムをより変化に強くする 目標 技術的な
こんにちは、 Web フロントエンドエンジニアの @progfay です。 今回は PR に紐づいたプレビュー環境のビルドに 10 分半かかっていたところを 3 分半ほどまでに短縮した改善活動についてお話しします。 技術改善 Day 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では「技術改善 Day」を 2 週間に 1 回実施しています。 「技術改善 Day」とは、案件開発を進めていく中で出てきた技術的負債の解消に丸 1 日チームで集中して取り組む日です。 tara 内の Web フロントエンドメンバーで解消したい技術的負債を考えたところ、その中の一つに Web フロントエンドアプリケーションのビルドに時間がかかっている問題 が挙がりました。 tara プロジェクトではデバッグや QA を効率的に行うために PR ごとに紐づいたプレビュー環境を用意しています
こんにちは。フロントエンドエンジニアの @sakamuuy です。 私たちのチームではエラートラッキングに Sentry というサービスを利用しています。この運用を開始して半年が経過しました。 今回は私が所属するフロントエンドチームでのSentry運用について、苦労したこととその打ち手についてお話したいと思います。 はじめに エラーを検知し重大なバグなどに早めに気づくことは、Sentryを運用する一つの目的だと思います。 そのためには未解決のエラー件数をなるべく少なくし、発生したエラーを監視できている状態を保つことが必要だと考えています。この状態を保てるように運用で工夫していることについてお話します。 チーム チームでの運用についてお話する前に、私の所属しているtara学習コアチーム (taraとはスタディサプリ中学講座のリニューアルプロジェクトの通称です) についてお話します。 tara
こんにちは。QA Engineerの@testtattoです。 今回はE2Eテストの自動化にあたって、どういった考えでツール選定を行ったのかを話したいと思います。 対象読者 以下に興味や関心を持つ方を対象読者として想定しています。 E2Eテスト自動化によって課題を解決したいが、どういった技術があるのか分からなくて困っている人 E2Eテストの自動化は実現できているが、継続に課題を抱えている人 テスト自動化なら何でも興味がある人 まえがき 読んでもらう前にいくつかの前提を共有します。 リリースサイクルについて 当社のwebプラットフォームのリリースサイクルは一部のマイクロサービスを除いて基本的には週次です。 決まった曜日で各プロダクトのプルリクエストを取り込んで、リグレッションテストを実施し、リリースブロッカーがなければリリースしています。 流れとしてはこんな感じです。 月 火 水 木 金 特
こんにちは。SRE Team の @chaspy です。次の10月で Engineering Manager をつとめて1年になります。 本記事ではもしかするとメンバーからわかりづらい Engineering Manager のしごとについて、昨年10月からの約1年間を振り返りながら説明しようと思います。 ところで「エンジニアリングマネージャのしごと」もうすぐ発売ですね。筆者もとても楽しみにしています。検索のノイズになるのは本意ではないので記事のタイトルはカタカナではなく英語表記にしました。 www.oreilly.co.jp なお、リクルートでは人事制度上 "Engineering Manager" というロールはなく、GM (Group Manager) が正式なロールです。EM と GM は重複する部分、そうでない部分ありますが本記事では割愛します。 基本情報 会社組織編 SRE T
（この記事は約5分で読めます） こんにちは、スタディサプリ TPM（Technical Product Manager）の@risa-hayashi です。 振り返りにGitHub Projects(beta)のInsightsという機能を利用してみたところ、振り返りが効果的にできるようになったのでその運用方法や効果を紹介したいと思います！ GitHub Projects(beta) Insightsとは？ とてもざっくり言うと、任意のGitHub Project(beta)に載せられたissueから、このようなチャートを作れる機能です。 しかもこのチャートの見た目（グラフの種類やX/Y軸の基準）は適宜カスタムすることができます。便利！ 私の所属しているスタディサプリ合格特訓コース、個別指導コースの開発チームでは、この機能を利用して数ヶ月前から振り返りの運用を行っています。 なぜInsig
この記事は移転しました。自動的に新記事へ移動します。移動しない場合はココをクリックしてください。
こんにちは、ujihisa といいます。現在スタディサプリのProduct Platform の Software engineerとしての仕事を行っています。先月から社内留学で、開発支援チームからコーチングチームに一時的に移籍して、そちらの仕事をやっています。 Rubyのコードの書き方 まずは全体的なコーディングスタイルなどについて。 現在社内で統一的に使用しているコーディングスタイルの標準化などはとくに行われておりません。各チームごとに、それぞれのチームが開発運用している (= ownershipをもっている) コンポーネントそれぞれに対して個別のRuboCop設定などはあります。また、複数のチームの境界にある、歴史的な共有サービスに関しては (そう、まだあります、そしてこれは今後もかなり長いあいだ付き合っていくことになるでしょう) testdouble/standard というTes
こんにちは！iOSエンジニアの @chuymaster です。今回は私たちのチームが2月にリリースした「スタディサプリ 中学講座」のIn-App Purchase（IAP）の実装について書きたいと思います。SwiftUI x IAPの事例をお探しの方必見です！ 背景 「スタディサプリ 中学講座」では、ユーザーが月額料金を支払うことで、講座の動画を見る・演習をすることができます。iOSアプリでの決済手段として、In-App Purchase（IAP）機能を提供しています。 「スタディサプリ 中学講座」のApp内課金導線 既存アプリの実装が参考にできるとはいえ、IAPの仕様はかなり複雑で理解しにくい部分が多いです。また、UIKitで開発された既存アプリと違って、「スタディサプリ 中学講座」はフルSwiftUIで実装されたので、いかにSwiftUIらしく設計・実装できるかかなり悩みました。 この
こんにちは。SRE の @int128 です。 背景 スタディサプリではいろいろな役割の人が協力してプロダクトを開発していくための文化と仕組みがあります。 例えば、Pull Request を作成すると自動的にプレビュー環境がデプロイされる仕組みや本番相当のデータで動作確認するための仕組みなどがあります。 これらは、開発途中の画面をすぐに Designer や Product Manager と共有したり、本番相当のデータでデザインやユーザ体験を確認したりする、といったスムーズな開発体験を支えています。 スタディサプリでは、本番環境と同等*1のデータベースを開発環境で利用するための仕組みを「データベースリストア」と呼んでいます。 データベースリストアは2010年代の前半から動いており、スタディサプリの開発体験を支える重要な仕組みとなっています。 本稿では、スムーズな開発体験を支えるデータベ
こんにちは。スタディサプリで Web Engineer をしている@indigolainです。最近はフロントエンドの割合を高めに開発をしています。 今回はスタディサプリで提供している学習コンテンツの中でも特徴的な縦書き学習コンテンツに関して、それを実現する上で利用した CSS プロパティと、その奥深さを紹介したいと思います。 なぜ Web で縦書き スタディサプリではユーザが普段目にするであろう学習教材に近い形式で学習コンテンツを提供するために、学習コンテンツ作成者が問題を HTML ライクな形式である程度自由な表現で入稿し、ユーザに提供できるようにしています。 特に国語のコンテンツなどはこれに従う形で、入稿次第で一部の学習コンテンツを縦書きとして表現できるようにしています。 どうやって縦書きを実現しているか 縦書きの学習コンテンツを web で提供したい場合、縦書きにしたい要素に対して、
こんにちは、iOSエンジニアの @elliekwon です。去年のiOSDC Japan 2021「スタディサプリ」がFull SwiftUIを選択した先に見えてきたものの発表で紹介させて頂いた通り、SwiftUIで開発してきた「スタディサプリ中学講座」ですが、SwiftUIでは対応しきれず、ごく一部UIKitを利用した機能も存在しています。この記事ではそれらのケースと対応策を紹介します。 事前知識 その前にSwiftUIからUIKitを使うため、先に知って貰えたいものがあります。 一つは UIViewRepresentable / UIViewControllerRepresentable と言うprotocolで、これらはSwiftUIでUIKitのUIView/UIViewControllerを使えるようにしてくれるwrapperです。 UIViewRepresentableに準拠し
こんにちは。iOS エンジニアの wadash です。先月2022年2月に無事リリースした「スタディサプリ 中学講座」のチームで開発に携わっています。 今回は iOS バージョンによる SwiftUI の挙動差異と制限のまとめをご紹介します。 SwiftUI の採用とサポートバージョンについて 「スタディサプリ 中学講座」では、SwiftUI を全面的に採用した開発を行っており、アプリのサポートバージョンを iOS 14 以上としています。 プロジェクト発足当初は iOS 13 以上をサポートバージョンにする方針で議論していましたが、プロジェクト期間途中の2020年9月にリリースされた iOS 14 にて、iOS 13 時点で一般に認識されていた SwiftUI の不安定な挙動がある程度改善されたことを確認したため、プロダクト自体の品質向上という目的と、ローンチのタイミングでユーザーがイン
つい先日リニューアルされた スタディサプリ 中学講座 の開発チームでインターン生をしている @YutaUra です。今回はインターンの中で New Relic と Prisma を連携させる業務に取り組んだのでそれに関してご紹介したいと思います！ スタディサプリ中学講座では、バックエンドの一部に TypeScript x GraphQL x Prisma を採用しており、パフォーマンスの計測などに New Relic を用いています。New Relic は Prisma を正式にサポートしていないため、導入するためには自分たちで実装する必要がありました。 そこで今回はライブラリを作成し、最終的に OSS（newrelic-node-prisma）として公開したので、それらについて実装と合わせて紹介します。 New Relic とは New Relic のトップページ Web サービスにおけ
こんにちは。 SRE の @suzuki-shunsuke です。 Terraform Modules を Monorepo で versioning して管理するようにした話を紹介します。 先日紹介したとおり、弊プロダクトではインフラを Terraform の Monorepo で管理しており、 CI は GitHub Actions + tfaction で実行しています。 blog.studysapuri.jp 弊プロダクトの Terraform Modules の管理手法は、この 2.5 年の間に 2 回ほど変化がありました。 Terraform Monorepo 内で管理し Local paths で Module を指定 Module を versioning するために Module ごとにリポジトリを作成し、 Terraform Monorepo とは別リポジトリで管理 M
こんにちは！iOSエンジニアの @chuymaster です！私たちのチームが2年近くかけて開発した 「スタディサプリ 中学講座」 のiOSアプリがようやくリリースされました！🎉🎉 いやぁ〜みんなで頑張りましたよ！中学生のお子様がいらっしゃる方はぜひお試しください！ ところで、皆さんはメモリリークに気をつけていますか？「スタディサプリ 中学講座」はMVVMアーキテクチャで、SwiftUIとCombineを使って開発をしています。SwiftUIのViewはとても軽いのでメモリ管理についてはあまり意識しなくてもいいですね。しかし、ViewModel の方は気をつけなければ循環参照が発生して、メモリリークが起きてしまうことがあります。それを防ぐ3つのTipsを、この記事で紹介します。ぜひ試してみてください！ 前提 本記事で紹介したコードと現象は、Xcode 13.2.1 / iOS 15.2
次のページ
このページを最初にブックマークしてみませんか？
『スタディサプリ Product Team Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
