サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
tech.studyplus.co.jp
こんにちは。ForSchool事業部の@okuparaです。最近入社しました。今後ともよろしくお願いします。 Studyplus for SchoolはReactを使用したSPAとして構築されています。フロントエンドのテスト関しては以前よりReduxやロジックに対してのテストがいくつか存在していたものの、コンポーネント(UI)のテストはあまり存在していませんでした。最近自分の方でこの辺の足りていなかったUIテストへの対応を行ったので、その時のお話を書きたいと思います。 Unit tests, Integration testsについて 元々フロントエンドのリポジトリにはEnzymeが入っていましたが、今回react-testing-libraryにしました。Integration testsを書くのに相性が良いと思ったからです。 テストの話をする際に、Unit tests、Integrat
はじめまして、今年の5月に中途入社したサーバーサイドエンジニアの葉坂です。最近、弊社のサービスの検索改善を行ったのですが、その際にCloudSearchを初めて触りました(検索エンジンサービス自体触るのが初でした)。なので私の復習も兼ねてRuby+CloudSearchを用いたデータの検索機能の実装について説明していきたいと思います。 そもそもCloudSearchとは? ご存知の方も多いかと思いますが、AWSが提供する検索機能を手軽に構築、実装できるクラウド型のサービスです。全文検索はもちろんのこと、ブール型検索(ANDやOR、NOTを用いた絞り込み)、プレフィックス検索(前方一致で該当する文字列の検索)、サジェスト検索などたくさんの機能があります。 Ruby + CloudSearchでデータの検索ができるようになるまでの流れ Amazon CloudSearch ドメインの作成 Am
スタディプラスメンバーの作業環境事情 こんにちは。ForSchool事業部の田口です。 COVID-19の影響で在宅勤務になってしばらく経ちましたが、みなさんいかがおすごしでしょうか。 スタディプラスでは以前からリモートワークが可能でしたが、今回の騒動で原則在宅勤務となりました。 そして、会社の好意により5月の給与振込日に在宅勤務手当が振り込まれました。在宅勤務が続く中でこのような手当がいただけるのはありがたいですね。 元々リモートワークを行っていたメンバーならまだしも、今回の騒動でほとんど経験のない在宅勤務を行う必要が出てきたという方も多いと思うので、今回は在宅勤務に馴染みのある職種以外の方も含めてスタディプラスのいろんな職種の方の在宅作業環境を紹介しようと思います。 この記事では、作業環境を紹介してくれるみなさんに作業環境の写真を提供していただき、各メンバーに (もしあれば)こだわって
こんにちは、SREチームの菅原(id:ksugahara08)と栗山(id:shepherdMaster)です。 新型コロナウイルスが流行して世の中では外出自粛になる中、Studyplusは例年以上に多くのユーザー様に利用していただく機会を得ました。それに伴って4月からサーバーへのアクセスが増えていき、5月にはコロナ前と比べて約2倍のリクエスト数がAWS ALBに来るようになりました。 リクエスト数が増えた結果何が起きたかというと、タイトルからお察しの通りAmazon AuroraのCPU負荷が上がり、頻繁にアラートが発砲されるようになりました。 EC2に関してはAutoScalingを設定していたため負荷に応じてスケールアウトしていたのですが、Auroraに関してはインスタンス数固定で運用してきたため、このようなことが起きるようになりました。 そこでサーバーサイド+SREチームでは他の作
こんにちは、スタディプラスの栗山(id:shepherdMaster)です。 今回はRubyアプリケーションのメモリ使用量上昇問題をjemallocを使うことで解決した話です。 Rubyアプリケーションのメモリ使用量上昇問題 弊社ではRuby on Railsをメインで使っていますが、Rubyアプリケーションを長時間稼働させていると、次第にメモリ使用量が増えていく問題に悩まされていました。 これは、Rubyのメモリ領域の断片化によって引き起こされるそうです(参考) puma worker killerによる定期的な再起動 この問題に対応するため、 puma_worker_killerという定期的にpumaのworkerをrestartさせるためのgemを使用し、メモリ使用量が上昇するのを抑えていました。 しかし、puma worker killerの実行のタイミングでたまにNo conne
こんにちは、スタディプラスの須藤(id:kurotyann)です。 昨年の9月にFlutterとFirebaseで新規サービス「ポルト Porto」をリリースしました。 tech.studyplus.co.jp ポルトはアプリ内課金を未実装でローンチしました1。ローンチ時の決済手段は、Stripeを使ったWebクレジット決済(月額制で無料トライアル14日間)のみです。 高校生をメインターゲットとしながらもアプリ内課金がないのは大きな課題であったため、今年の2月25日にアプリ内課金をリリースしました。 そこで、今回は「FlutterとFirebaseに焦点をあてて」アプリ内課金の定期購入の実装ポイントを紹介します。 1. 技術選定 システム構成図 まず、システム構成図で全体像を示します。 アプリ内課金(定期購入) 定期購入のステータス変更通知 Flutter(アプリ側) Flutterにはア
こんにちは。サーバーサイドエンジニアの金澤です。 コロナウィルスがいまだに猛威を振るっていますが、みなさんはご無事に過ごされているでしょうか。 この奇禍によってリモートワークを余儀なくされている方も多いかと思います。 弊社も例外ではなく、現在はほぼ全ての社員がフルリモートで勤務しています。 以前からリモートワークの導入を進めていたとはいえ、実際に顔を合わせるタイミングがあるのと、それが無いのとでは全く違う働き方が必要なのだなと実感させられています。 事態が収束したら体制がどうなるかというのはまだ未定ですが、我々がどうやってこの状況に対応しているかというお話をさせていただきます。 仕事の進め方 弊チームは一週間単位のスプリントで開発を進めており、スプリントレビュー、レトロスペクティブ、そして次週のプランニングを毎週行なっています。 フルリモートという性質上どうしても顔を合わせる機会は減ってし
こんにちは。ご機嫌いかがでしょうか? SREチームの栗山(id:shepherdMaster)です。 弊社ではKubernetesを導入するために着々と準備を進めております。 どんなシステム上でアプリケーションを動かすにせよ、ログ収集は必要になってきます。 Kubernetes上でログ収集をするために色々調べましたが実用的な情報があまり豊富ではなかったので、今回はKubernetes上でのログ収集、特にFluentdの設定について共有をしたいと思います。 なおまだ実運用は開始してないので今後細かい部分は変わるかもしれません。 ログ収集&ログ分析の構成 構成は以下にしました。 Fluentd + S3 + Amazon Athena 理由は以下です。 S3に保存すると非常に安い SQLでログを検索できるのは非常に便利 Fluentdの設定の柔軟性 既存のログ収集基盤がFluentd + S3
SREチームの栗山(id:shepherdMaster)と菅原(id:ksugahara08)です。 年末ということもあり、弊社SREチームが2019年に行ってきた取り組みの中で大きめのトピックを紹介したいと思います。 本来ならもっともっと書きたいことがあるのですが、今回はスタディプラスのSREチームが何をやってきたのか概要がわかるように書いていきたいと思いますのでぜひ最後まで読んで頂けるとありがたいです。 SREチーム発足 SREという職種の共有会 ポストモーテム導入 脱AWS Elastic BeanstalkとKubernetes移行 Terraform移行 ログ収集基盤改善 Rubyバージョンアップ jemallocの導入 勉強会開催 Kubernetesハンズオン Kubernetetsの各機能の勉強会 コンテナ監視ツール勉強会 サービスメッシュ勉強会 CI/CD勉強会 AWS
こんにちは。ForSchool事業部の石上(id:shgam)です。今回はStorybookの話です。 7/17にリニューアルしたStudyplus for Schoolでしたが、このとき導入したStorybookを活用できていませんでした。そもそも整備が足りてなかったので、1日もらってStorybookを整理しました。 社内esaとの重複もありますが改めてチームメンバーへの共有も兼ねて、このブログ記事を書いています。 Studyplus for School の Storybook 背景 コンポーネントカタログとして導入してあるStorybookでしたが、リリースに向けて忙しくなるうちに整理が後回しになり、ちゃんと活用できない状態になってしまっていました。 作業の話を始める前に、なぜコンポーネントカタログが必要か、そしてどんな問題があったかを整理しておきます。 そもそもなぜStorybo
こんにちは、スタディプラスの須藤(id:kurotyann)です。 タイトルどおり、9/17にFlutterとFirebaseで新しいサービスをリリースしました。 サービス名は「ポルト(Porto)」です。 受験生に人気の参考書を月額980円でスマホで読める電子参考書サービスです。 iOSとAndroidで利用でき、無料で読める参考書もあります。受験生でない方も試しにインストールしてみてください。 ポルト 大学受験向けの参考書が読み放題 Studyplus Inc.教育無料apps.apple.com play.google.com 【公式】ポルト 参考書読み放題サービス【14日間無料体験のお申し込みはこちら】 さて、リリースされたばかりのポルトですが、今回のブログでは以下の3点を書きます。 「(1) 技術スタック」 「(2) 開発期間」 「(3) FlutterとFirebaseで開発を
こんにちは。今年の5月に入社したiOSエンジニアの大石(id:k_oishi)です。 今回は弊社がリリースしているStudyplusのiOSアプリのライブラリ管理をCocoaPodsからCarthageに移行した件をご報告します。 プロジェクトの構成と開発PCのスペック 現在のStudyplus iOSは以下の構成となっています。 開発環境: Xcode 10.3 言語: Swift, Objective-C(割合は86:14) ライブラリ管理: CocoaPods, Carthage CI/CD: fastlane, CircleCI, DeployGate また、私が入社時に希望して用意されたMacBook Proのスペックは以下のとおりです。 気になるライブラリのビルド時間 私が入社した時点でCarthageの導入はされていましたが、Carthageで管理されていたライブラリは一部の
自作キーボードを社内で始めたきっかけ 先日、本ブログにてキーボードに関する記事「突撃!隣のキーボード Studyplus 2019」を書きましたが、その執筆の最中に社内のキーボード好きの熱が高まり、今回、有志で集まってのもくもく会の開催となりましたので、その様子をご報告します。 当日の様子 参加者は4名でしたが、それぞれキットやキーボード関連のパーツ、道具を持ち寄り自作キーボード作成や関連作業を行いました。 各メンバーが撮った写真とあわせてご紹介します。 みんなでワイワイ半田付け アクリルプレートをレーザーカッターで切ってきた冨山氏 Let's Splitが映える!! Lube(キースイッチの潤滑)体験コーナー 菅原さんが訳あってキースイッチのはんだを吸い取り中。全てのキースイッチを取り外す頃にははんだ吸い取りを完全に理解していたように見えました。※大石談 当日は社外から自作キーボード好き
こんにちは、Studyplus Androidチームの中島です。 2019年6月より、Studyplus AndroidアプリはTarget SDK28への対応、合わせてAndroidXへの移行を行いました。 今まで「AndroidXに対応したらここ直しましょう」としていたところをガシガシ直していくのは楽しかったです。 閑話休題、今回のブログではAACのNavigationで DialogFragment を表示した話をしたいと思います。 developer.android.com はじめに Navigation によるFragment遷移の基本 Navigation によるDialogFragment遷移 CustomNavigatorの実装 navigate()メソッドでFragmentの表示方法を指定する popBackStack()でバックキーを押した時の挙動を指定する Dialo
こんにちは。今年の5月に入社したiOSエンジニアの大石(id:k_oishi)です。 私は入社時のオリエンテーション終了後、最初にしたことが社内のSlackでキーボードチャンネルの検索という程度にキーボードが好きな者です。 当然ではありますが、以前から他のエンジニアがどのようなキーボードを使っているのか気になっていました。 そこで今回は弊社のエンジニアに社内で使用しているキーボードやこだわりなどを聞いてみました。 現在使用しているキーボード エンジニアは入社時に希望するPCやスペックを選択することができますが、現在は全員がMacBook Proを使用しています。 まずはオフィスでどのようなキーボードを使用しているか聞いてみました。 やはりMacBook Proにビルドインされているキーボードを使っている人が多く、それ以外のキーボードを使っている人は少数派であることがわかりました。 また、外
こんにちは、スタディプラスの栗山(id:shepherdMaster)です。 みなさんは社内でどんなプロジェクト・タスク管理ツールを使ってますでしょうか? 今回はスタディプラスで最近使い始めたプロジェクト・タスク管理ツールのmonday.comを紹介したいと思います。 Taskworld時代 社内では以前はTrelloに似たカンバン形式のプロジェクト・タスク管理ツールのTaskworldを使っていました。 しかしTaskworldは使い続けていると動作が重くなってきたり、たびたびTaskworldに障害が発生したり、Slackへ簡単に通知連携できなかったり、そもそもツールとして使いづらかったりと不満が上がっていました。 そのため新しいプロジェクト・タスク管理ツールを選定することになりました。 新しいプロジェクト・タスク管理ツールの選定 社内で新しいプロジェクト・タスク管理ツールを選定するた
Androidチームの若宮(id:D_R_1009)です。 今朝方、Twitterを眺めていたら下記のツイートが目にとまりました。 ここ最近、超絶便利に感じていた Pull Reminders が GitHub に買収されて、誰でも自由に使えるようになったみたいだ。 GitHub + pull request でチーム開発をしていて、Slack も使っているところであれば、とりあえず試してみると良いと思う。https://t.co/xvHdkDu7YR— suzuki (@suzuki) June 17, 2019 「これは便利そうだ!」と感じたため社内Slackに投稿し、 利用を開始したところ 期待以上の便利さだったので、本ブログでも紹介したいと思います。 Pull Pandaとは https://pullpanda.com/ GitHubのリリースでは下記のように紹介されています。 W
こんにちは,For School事業部のid:atomiyamaです. 現在Studyplus for Schoolはサービスのフルリニューアルを行っています. 弊サービスはこれまでRailsでslimを使いViewを提供してきましたが,今後より良い体験をユーザーへ届けるためにリニューアルを行いサーバーサイドとクライアントサイドを分離しました. リニューアルに向けて現在サーバーサイドはRailsでJSON APIサーバーの開発を行っており,その中で導入したスキーマ駆動開発の話をします. TL;DR 技術スタックはOpenAPI3.0, swaggerUI,committee クライアントサイド開発者と連携してJSONスキーマを仮決定する. サーバーサイドの開発者はRailsコントローラにそのJSONをべた書きした仮実装を行う. クライアントサイド,サーバーサイドの開発者が互いにフィードバッ
こんにちは、Studyplus iOSチームの明渡(ID: m_yamada1992)です。 今回は、今年3月にリリースしたStudyplusアプリにて大学の情報を表示する画面でYouTubeの再生に対応したお話、およびiOSアプリ側の実装にて盛大にやらかした話をつづっていきます。 YouTubeをStudyplusのアプリで表示する 動画を表示することになった背景 Studyplusは現状受験生のユーザーが非常に多く、「同じ志望校を目指す仲間と励まし合いたい!」というニーズに応えるため大学にまつわる情報を取り扱う機能が手厚く揃っております。志望大学を探す機能、同じ大学を志望しているユーザーの勉強時間ランキングなど。 そうすると、「Studyplusで志望大学を探すユーザーに自校をもっとアピールしたい!」という大学さんも少なからず存在するわけです。アピールする新しい手段の1つとして、動画を
こんにちは、ForSchool事業部の石上です。 あるSPAを作る際、CSSを書きやすくするためにいくつかWebpackの設定を書きました。 今回は、これらの設定がなぜ今こうなっているのかを社内のメンバーに説明するつもりで、どれが何のために必要な設定なのかを書いてみます。 背景 ウェブフロントエンド全般に言えることですが、CSS周りにもツールや設定方法はたくさんあります。一から用意する際は、毎回何を選んでどうすればいいのか悩んでしまいます。そこで今回のプロジェクトに使う設定をやりたいことベースで整理したところ、以下のような要件となりました。 配信するときは1ファイルで、なるべくサイズを小さくしたい コンポーネントごとにスタイルを閉じたいけど、BEMは面倒 デザイナーさんに用意してもらった変数を一箇所で管理したい ベンダープレフィックスを自動でつけてほしい 設定 MiniCssExtract
こんにちは、Androidチームの若宮(id:D_R_1009)です。 先日、JasperというOSSライブラリをリリースしました! github.com 今回は開発目的やモチベーション、今後の方針などを記したいと思います。 Jasperとは Jasperを作成した理由について 多くの人の目を通してUIコンポーネントの質を高める 様々な要望を想定することでAPI設計を洗練させる 依存関係をクリーンな状態に保つ Jasperの今後 終わりに Jasperとは スタディプラス Androidアプリ内で利用しているUIパーツをベースに開発した、UIコンポーネントライブラリです。 2019年3月時点ではJasper-BottomNavigationViewのみとなりますが、今後ゲージやグラフなどのパーツを追加する予定です。 Jasperを作成した理由について 遡ること2016年、Androidアプ
スタディプラスでサーバーサイドを担当している花井です。 先日田口さんが投稿したこちらのプロジェクトで、実験的にCloud Firestore / Cloud StorageとRailsでAPIを構築したので、その顛末を紹介します。 Firestoreの理由 今回のプロジェクトの要件に、一度データを入稿してしまえば変更はほとんど必要ないような要件がありました。 極端なことを言えば、yamlかjsonファイルをマスタデータとして扱うという選択でもよかったのですが、それだと変更のたびにデプロイが必要なのとスケールするかが心配でした。 また、普段AWSを使っているので単純にGCP環境を使う実績解除という意味あいも多分にありました。そんなわけで、画像の置き場としてCloud Storage、データベースがわりにCloud Firestore を使う構成になりました。 Railsから使う instal
ForSchool事業部でStudyplus for Schoolのサーバーサイドを担当している松田です。 Studyplus for Schoolでは、一部でChart.jsを利用したグラフの表示をしています。 Chart.jsはHTMLのCanvasでグラフを描画するライブラリです。 今回はこのグラフをサーバーで出力したくなったので、どうしたかを書いてみたいと思います。 はじめに まず最初にサーバーサイドはRailsを使っているのでRubyを利用した出力を考えましたが、フロントと同様の見た目にしたいのでどうにかChart.jsをサーバーサイドで使いたいです。 サーバーサイドJSといえばNode.jsですが、Node.js上にはCanvasのAPIは用意されていません。 が、SeanSobey/ChartjsNodeCanvasを利用することで、Node.jsでChart.jsがレンダリ
こんにちは。 入社して一ヶ月が経過したiOSエンジニアの弘田です。 今回はUIPickerViewをキーボードの様に表示する方法を解説します。 なぜそんなことをするの? 昔のiPhoneでしたら画面の中心などにUIPickerViewを表示しても画面サイズが小さかったので片手で操作できていましたが、最近は大画面化が進み片手での操作が難しくなってきました。 操作性を損なわずにUIPickerViewを使用してもらう為にも今回の方法が役にたつと思います。 Human Interface GuidelinesでもPickerついて触れているページがありこの様な記載があります。 Avoid switching screens to show a picker. A picker works well when displayed in context, below or in close prox
こんにちは、CTOの島田です。 今回は、StudyplusのDBのmigrationで発生した問題とその解決ステップを説明したいと思います。 前提 schema.rbでの運用 ridgepoleの導入 "0000-00-00 00:00:00" 問題 問題の原因は? 暫定対応 問題の解消 あるべき姿 まとめ 前提 まずは前提。 Aurora MySQL 5.7 Rails 5.1.6 (対応当時。今は5.2.2) schema.rbでの運用 Studyplus本体のmigrationは、色々な経緯によって2018年5月まで、いわゆるRailsのmigration の作法とは異なる方法で運用されてました。 schema.rb でスキーマの状態を管理してはいたのですが通常とはやや異なる管理がされていました。 以下、改変して一部抜粋。 ActiveRecord::Schema.define do
こんにちは。Studyplus開発部の田口です。 新規で立ち上がった開発プロジェクトにVueとVuexを採用してみたので、今回はその所感を書こうと思います。 Vue/Vuexの採用理由 今回のプロジェクトで開発するのは、Studyplusのアプリ内ブラウザのWebViewページです。 プロジェクトを開始するにあたって、アプリケーション自体は小規模で、画面の遷移がありつつサーバーとの通信を極力避けユーザーの入力情報を保持したいため、SPAで開発することにしました。 開発にあたって、 モダンな技術を採用し、社内に知見を貯めたい フロントエンドの専任がチームにいないため、専任でないエンジニアがコードを読むときなるべくコストがかからない (上記に関連して)日本語のドキュメントがあるとよい メインで開発を行う自分が過去に少しだけFluxアーキテクチャを触ったことがある という理由でVueとVuexの
はじめまして、for School事業部のサーバーサイドエンジニアの冨山です。 今回はfor SchoolのリニューアルにおいてAPIでリアルタイムなデータをページネーションする上でJinraiというカーソルベースのページネーションライブラリを開発しました。 今回はその開発の経緯や直面した課題についてお話していきたいと思います。 TL:DR ページベースのページネーションだとクライアントへ渡すデータに重複が発生する。 基点となるレコードを示すカーソルをクライアントへ渡すことでOFFSETを意識することなく特定の範囲のデータを取得できる。 IDをクライアントに渡したくない場合、カーソルとして渡す値がユニークで無いとクライアントに渡らない情報が発生する。 ソートキーの値が重複する場合IDでもソートすることで上の問題が解決する Jinraiの使い方 class Post < Applicatio
こんにちは、CTO島田です。 2018年12月13日、Ruby biz Grand prix2018の表彰式が開催され、スタディプラスが大賞を受賞いたしました! まさか大賞を頂けるとは思っていませんでしたので、とても嬉しいです。 今回、Ruby biz Grand prix応募にあたり、当社の取り組みやRubyの活用方法を応募用紙にしたためました。 この開発者ブログをご覧いただいている方に当社についてより詳しく知っていただきたく、コンフィデンシャルな部分を除いて部分的にこちらに公開します。 スタディプラスについてご興味をお持ちの方、また次回以降のRuby biz Grand prixへエントリーを検討されている方にとって、学びにしていただけますと幸いです。 募集要項(一部) 1. 応募団体の概要 2. 商品・サービス (1) 商品・サービスの名称等 (2)商品・サービスの概要 (3) 商品
はじめまして、Studyplus開発部でサーバーサイドを担当している栗山です。 背景 Studyplusではコンテナ化を進めたいと思っていますが、まだAWS Elastic BeanstalkやEC2上でアプリケーションが動いています。 今後コンテナ化するにあたり、 コンテナ化を進めていきたいが、コンテナのデプロイや管理はどうすればいいかわからない。 コンテナ管理するためにKubernetesというのが良いらしいが覚えることが多くて難しそう。 そもそもコンテナよくわからないし、敷居が高そう といった不安や疑問が部内にあったのでそれらを解消すべく、Kubernetesのハンズオンを実施しました。 目的 ハンズオンの目的としては以下です。 Kubernetesが何を解決するかを知る Kubernetesの機能を知る Kubernetesの各概念を知る GCP上のKubernetesに簡単なアプ
次のページ
このページを最初にブックマークしてみませんか?
『Studyplus Engineering Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く