スタディプラスメンバーの作業環境事情 こんにちは。ForSchool事業部の田口です。 COVID-19の影響で在宅勤務になってしばらく経ちましたが、みなさんいかがおすごしでしょうか。 スタディプラスでは以前からリモートワークが可能でしたが、今回の騒動で原則在宅勤務となりました。 そして、会社の好意により5月の給与振込日に在宅勤務手当が振り込まれました。在宅勤務が続く中でこのような手当がいただけるのはありがたいですね。 元々リモートワークを行っていたメンバーならまだしも、今回の騒動でほとんど経験のない在宅勤務を行う必要が出てきたという方も多いと思うので、今回は在宅勤務に馴染みのある職種以外の方も含めてスタディプラスのいろんな職種の方の在宅作業環境を紹介しようと思います。 この記事では、作業環境を紹介してくれるみなさんに作業環境の写真を提供していただき、各メンバーに (もしあれば)こだわって

こんにちは。ForSchool事業部の石上です。最近、弊チームのスクラムマスター id:atomiyama さんから、「伝えにくい事とか相手の注意引きたい時に幼児言葉を使うと有効です。」というテクニックを教えてもらいました。今後はなるべく実践していきたいでちゅ 👶 今日は、Studyplus for SchoolのCSS事情について書かせてもらいます。 以前に書いたやりたいことベースでWebpackにCSS周りの設定をする - Studyplus Engineering Blogとだいぶ重複する部分もありますが、今回はWebpackのloaderの話ではなく、なにが欲しくてなにを使っているのかという形式で整理していきたいと思います。 ちょうど最近 id:tagucch さんがうちのチームに異動してきてくれたので、 id:tagucch さんへの説明も兼ねています。 CSSのためにいろいろ

こんにちは。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で開発を

自作キーボードを社内で始めたきっかけ 先日、本ブログにてキーボードに関する記事「突撃！隣のキーボード Studyplus 2019」を書きましたが、その執筆の最中に社内のキーボード好きの熱が高まり、今回、有志で集まってのもくもく会の開催となりましたので、その様子をご報告します。 当日の様子 参加者は4名でしたが、それぞれキットやキーボード関連のパーツ、道具を持ち寄り自作キーボード作成や関連作業を行いました。 各メンバーが撮った写真とあわせてご紹介します。 みんなでワイワイ半田付け アクリルプレートをレーザーカッターで切ってきた冨山氏 Let's Splitが映える！！ Lube(キースイッチの潤滑)体験コーナー 菅原さんが訳あってキースイッチのはんだを吸い取り中。全てのキースイッチを取り外す頃にははんだ吸い取りを完全に理解していたように見えました。※大石談 当日は社外から自作キーボード好き

こんにちは、こんばんは、For School事業部のid:atomiyamaです。 先日フルリニューアルされたStudyplus for Schoolのサーバーサイド開発、フロントエンド開発の一部を担当しました。 新しいStudyplus for School 以前のStudyplus for School リニューアルに至った理由 画面読込速度の改善 これまでのStudyplus for Schoolは基本的にRuby on Rails(Slim)で実装されており、複雑な処理が実行されるslimでは表現できないような部分のみreact_on_railsでReactコンポーネントをマウントするような実装になっていました。 また主要な機能の多くのページに実装されている絞り込み条件設定や、表示期間変更などでは変更されるたびに画面全体が再描画されていました。 これらの問題を解決するために今回のリ

こんにちは。今年の5月に入社したiOSエンジニアの大石(id:k_oishi)です。 私は入社時のオリエンテーション終了後、最初にしたことが社内のSlackでキーボードチャンネルの検索という程度にキーボードが好きな者です。 当然ではありますが、以前から他のエンジニアがどのようなキーボードを使っているのか気になっていました。 そこで今回は弊社のエンジニアに社内で使用しているキーボードやこだわりなどを聞いてみました。 現在使用しているキーボード エンジニアは入社時に希望するPCやスペックを選択することができますが、現在は全員がMacBook Proを使用しています。 まずはオフィスでどのようなキーボードを使用しているか聞いてみました。 やはりMacBook Proにビルドインされているキーボードを使っている人が多く、それ以外のキーボードを使っている人は少数派であることがわかりました。 また、外

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をべた書きした仮実装を行う． クライアントサイド，サーバーサイドの開発者が互いにフィードバッ

こんにちは、ForSchool事業部の石上です。 あるSPAを作る際、CSSを書きやすくするためにいくつかWebpackの設定を書きました。 今回は、これらの設定がなぜ今こうなっているのかを社内のメンバーに説明するつもりで、どれが何のために必要な設定なのかを書いてみます。 背景 ウェブフロントエンド全般に言えることですが、CSS周りにもツールや設定方法はたくさんあります。一から用意する際は、毎回何を選んでどうすればいいのか悩んでしまいます。そこで今回のプロジェクトに使う設定をやりたいことベースで整理したところ、以下のような要件となりました。 配信するときは1ファイルで、なるべくサイズを小さくしたい コンポーネントごとにスタイルを閉じたいけど、BEMは面倒 デザイナーさんに用意してもらった変数を一箇所で管理したい ベンダープレフィックスを自動でつけてほしい 設定 MiniCssExtract

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がレンダリ

こんにちは、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の

インフラエンジニアの菅原です。 弊社のオフィス移転が完了しました。 前編で引越しの計画を立てたものの、事は上手く運ばず、色々学びがありました。 今回はインフラエンジニアがオフィス移転で考えたこと[前編]の続きとして振り返りと学びを共有したいと思います。 プロバイダー契約 振り返り 現状の棚卸しをしたところインターネット回線の２重契約や電話回線の契約に不要なFAXの契約が入っていたりしていたため、契約プランを変更することでコストカットを進めました。 また、前編でも話した通り社内ネットワークの平行期間を設けました。具体的には以下の様にインターネット回線契約を「解約」と「新規」にしました。 「解約」・・・旧オフィスを12月末まで 「新規」・・・新オフィスを12月頭から 平行期間を設けることで余裕を持って動作確認を行うことが出来ました。 しかし、全て上手くいったわけではありませんでした。プロバイダ

はじめまして、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に簡単なアプ

こんにちはスタディプラスCTOの島田です。 はじめに スタディプラスは、RubyWorld Conference 2018 にPlatinumスポンサーとして協賛をさせて頂きました。 それに伴って、ブースも出展いたしました。 2018.rubyworld-conf.org 島根到着からブース出展までの内容と、同行した各エンジニアの印象に残ったセッションの感想を紹介させて頂きます。 出雲縁結び空港と会場 出雲縁結び空港には、早速RubyWorld Conferenceのポスターが。 カンファレンス当日は晴天に恵まれました。(大橋川にてしじみ漁をしている模様) 企業ブース出展をする大展示場の様子。 ブース出展 スタディプラスのブースでは、Studyplusのサービスにちなんで、「好きなRubyの技術書を投票！！」という企画を実施しました。 投票してもらうRuby技術書を独断と偏見で5冊ピックア

はじめに 課題 理想状態 アプローチ案 理想状態を実現する方法を幅広く考える。 定期的に不要なチャンネルを精査する Web APIを利用したアプローチ 今回やること 実現方法 手順 GCPの事前準備 SalckのTokenを生成 実装 プログラムの構成 もろもろ準備 デプロイ Google Apps Scriptで定期実行を登録する 実行 まとめ はじめに こんにちはスタディプラスでCTOしています島田です。 現在スタディプラスには新メンバーが続々と入社して、うれしい悲鳴があがっています。 その悲鳴にほんのり応えた例の紹介です。 課題 Slackチャンネルが乱立(186のパブリックチャンネル)。そのため新メンバーが、どのチャンネルでどんな目的の会話をしているかを把握する事が困難 上記の理由により、質問や必要な情報を取得するチャンネルを探すコストが上がっていた 理想状態 新メンバーが必要なS

ForSchool事業部の石上です。ウェブのフロントエンドを中心にStudyplus for Schoolの開発に携わっています。 あるアプリケーションのElmのバージョンを0.18から0.19に上げる対応をしました。今回はこのことについて書きます。 背景 Studyplus for School で新たにちょっとしたサブシステムが必要になり、その小さなSPAのためのウェブフロントエンドの言語として今回、Elmを採用しました。 弊社のプロダクトのほとんどは、サーバーサイドはRuby on Railsで作られており、ウェブフロントエンドはJavaScriptかTypeScriptです。Elmでウェブのフロントエンドを書くことはけっこう挑戦的でしたが、会社としても他の言語に手を伸ばしていきたいという話もあり、CTOとチームリーダーから許しをいただきElmでの実装に至りました。 ある程度実装が終