タグ

ブックマーク / blog.studysapuri.jp (10)

  • Android対応から見つめるReact Native - スタディサプリ Product Team Blog

    モバイルエンジニアの@chiiia12です。 先日@m-sugawaraからReact Native開発全般についての記事が公開されましたが、今回はAndroid対応にフォーカスして紹介します。 QuipperではReact Nativeで書かれた業務用アプリがあり、iOSでのみ提供していました。対象ユーザーは内部のスタッフに限られていたため、会社から配布している業務用iOS端末のみで正しく動作すれば十分だったためです。しかし私用端末でも使える方が業務上効率が良いこと・業務用の端末を用意するコストの観点から、会社からの端末配布をやめ、iOS/Android両プラットフォームでアプリを提供し私用端末で利用してもらうことになりました。 今回は私達のチームが遭遇したReact NativeアプリでのAndroid対応をサプライズ度(★★★)と一緒に紹介します。React Nativeのマルチプラ

    Android対応から見つめるReact Native - スタディサプリ Product Team Blog
  • Quipper の Monorepo な Web アプリ開発における Git 戦略 - スタディサプリ Product Team Blog

    Rails Developers Meetup 2019 の自社スポンサーセッションはいっそ休憩室にすればいいのでは? と言い出した Web dev の @mtsmfm です。お弁当や神授業、そして Quipper からは 3 名が登壇しましたが、発表は楽しんでいただけましたでしょうか。 僕は自分の発表 を @jeremy さんが聞いてくださったり、キーノートでは Rails 6 で入ったパッチを紹介してもらったりして感無量です。 この場を借りて Rails DM の開催に尽力された @yhirano55 さん他みなさまには感謝を述べたいと思います。当にありがとうございました。 今日は、Quipper における GitランチKubernetes を組み合わせた、開発から番デプロイまでの流れを紹介したいと思います。 流れ ざっくりとした概要としては Git flow をアレンジ

    Quipper の Monorepo な Web アプリ開発における Git 戦略 - スタディサプリ Product Team Blog
  • モバイルチームを支える小さな作業効率化たち - スタディサプリ Product Team Blog

    モバイルエンジニアの@chiiia12です。 私がQuipperのモバイルチームにjoinした際に驚いたことの一つが、自動化スクリプト/便利ツール等が多く使われていることでした。 今回はモバイルチームで最近導入されたものをいくつか紹介したいと思います。 DeployGateのビルドバージョン通知 私達のチームではDeployGateを使ってQAチームやデザインチームに開発中のアプリを配布しています。 QAテスト期間中は、不具合を改修した後に改修が含まれたバージョンのアプリをQAチームに確認をお願いしています。その際にDeployGateのバージョンを伝えてテストをしてもらっていますが、開発者にとってはDeployGateのビルドバージョンを確認するのはひと手間かかる作業になっていました。 これをissueがリンクされたpull requestのマージをトリガーに、どのDeployGateの

    モバイルチームを支える小さな作業効率化たち - スタディサプリ Product Team Blog
  • React Nativeアプリのメモリリークを追いかける - Quipper Product Team Blog

    モバイルエンジニアの@hotchemiです。 今回は少し前にReact Nativeアプリの開発中にメモリリークを調査、解決した体験が学びが多かったので調査の顛末を共有できればと思います。 概要 今回問題となったのは、上記の課題・宿題を管理する画面の開発でした。 QA中に発覚した問題としては、「アプリを操作していると特定の端末(主にiPhone5)でアプリが落ちたり、その他の端末でも次第に筐体が熱くなる事がある」というもので、表示するデータはそれなりにあるものの画像や動画を表示する画面ではないのでさすがにおかしいだろうという事と、プロセス起動から時間が経つに従い事象が発生・深刻化していくという特性を考慮しメモリのリークが発生しているという仮説を元に調査を開始しました。 モニタリング 「推測するな、計測せよ」の格言通り、まずはメモリの使用量を計測する所から始めてみます。 Native Rea

    React Nativeアプリのメモリリークを追いかける - Quipper Product Team Blog
  • TypeScriptでreact-native-i18nを型安全に扱う - スタディサプリ Product Team Blog

    こんにちは。モバイルエンジニアの@hotchemiです。 今回は先日オープンソースとして公開したreact-native-i18n-tsについて簡単にご紹介できればと思います。 モチベーション React Nativeで開発していくにあたり文字列リソースのInternationalizationにはreact-native-i18nを使う事が殆どだと思いますが、アプリの規模が大きくなっていくに辺り開発体験を阻害する以下の様な問題点が生じてきました。 長いkey名を思い出せず補完も効かないので定義ファイルとソースコードを行ったり来たりせざるを得ない 実行時にしかエラーを検知できないので間違ったkey名でも気づかない事がある 間違ったkey名を指定した場合 これらの課題を解決する為に、AndroidのR.javaに倣い「IDE補完の恩恵を受けれる事」「コンパイル時に間違ったエラーを検知できる事

    TypeScriptでreact-native-i18nを型安全に扱う - スタディサプリ Product Team Blog
  • Sketch + InVision + Zeplin + Abstractで効率化するデザインフロー

    デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所&短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています(2018年9月時点) 今回の記事では、現状のデザインツール&フローに至った経緯を紹介していきます。 目次 1. プロダクト&チーム プロダクト チーム 2. ワイヤーフレーム:自由 3. モックアップ:Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ:InVision

    Sketch + InVision + Zeplin + Abstractで効率化するデザインフロー
  • React Nativeハイブリッドアプリへの挑戦 ~ Part3: 振り返り/今後 ~ - スタディサプリ Product Team Blog

    エントリは3部作のPart3となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1、2では実際にインテグレーションを進めてきた中で得られた知見を公開してきましたが、今回は半年程の運用を経て我々は当初の目的を達成できているのか、という事に関しての振り返りと今後について共有できればと思います。 振り返り 現状を軽く復習しておくと私達は今年の初頭からハイブリッドスタイルの開発を初め、現在のコード比率はNative75%, React Native 25%程となっています。 Good まず、Part1で宣言した3つの目標に関して振り返ってみます。 モバイルエンジニア不足の解消(◎) 達成する事ができました。一例を紹介すると現在Quipperには3名のiOSエンジニアがいます

    React Nativeハイブリッドアプリへの挑戦 ~ Part3: 振り返り/今後 ~ - スタディサプリ Product Team Blog
  • React Nativeハイブリッドアプリへの挑戦 ~Part1: Monorepo/CI~ - スタディサプリ Product Team Blog

    エントリは3部作のPart1となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 数週間前にReact Native at Airbnb(非公式の日語訳)が世間を賑わせましたが、皆様いかがお過ごしでしょうか。 弊社でもここ数ヶ月Nativeで書かれたスタディサプリのiOS/AndroidアプリにReact Nativeを部分的に導入していく、いわゆるハイブリッドアプリ開発体制に挑戦しており、そこで得られた知見を何回かに分けて公開していければと思います。 Goals まず、なぜハイブリッドアプリという選択をしたのかについて、我々が目指していたゴールは以下の様なものです。 モバイルエンジニア不足の解消 Quipperは元々Webエンジニアの数が多い一方でモバイルエンジニアの人数

    React Nativeハイブリッドアプリへの挑戦 ~Part1: Monorepo/CI~ - スタディサプリ Product Team Blog
  • QuipperにおけるReact Native活用事例 - スタディサプリ Product Team Blog

    この記事はReact Native Advent Calendar 2017の5日目の記事です。 こんにちは。モバイルエンジニアの@hotchemiです。 今回はQuipperにおけるReact Native活用事例に関して紹介したいと思います。 目次 導入の背景/効能 開発におけるメリット/デメリット リリースサイクル 技術スタック おわりに 導入の背景/効能 Quipperが開発しているスタディサプリでは合格特訓プランという現役大学生コーチによる学習伴走サービスを提供しており、コーチとユーザーのコミュニケーションをより円滑にする為にメッセージ機能をベースとした業務補助iOSアプリの開発を実施する事になりました。 最初のバージョンこそSwiftで開発を進めていたものの以下の組織的・技術的な課題に直面した為、React Nativeを用いた開発に方針転換し現在では運用が軌道に乗っています。

    QuipperにおけるReact Native活用事例 - スタディサプリ Product Team Blog
  • Quipper での CodePush を使った OTA 配信とその自動化 - スタディサプリ Product Team Blog

    この記事は React Native Advent Calendar 2017 6 日目の記事です。5 日目は Quipper 同僚の @hotchemi によるQuipperにおけるReact Native活用事例でした。 こんにちは、Quipper で Software Engineer をやっている @yuya-takeyama です。 入社以来ほとんど Web のサーバサイド・クライアントサイドをやってきましたが、最近は React Native アプリのプロジェクトTypeScript を書いています。 昨日の記事でも軽く触れてますが、Quipper で最近運用が始まった OTA (Over The Air) によるアプリ配信の運用とその自動化について詳しく紹介します。 なお、実際に動くコード例として以下のリポジトリを用意しました。 quipper/ReactNativeCo

    Quipper での CodePush を使った OTA 配信とその自動化 - スタディサプリ Product Team Blog
  • 1