React Native Tech Blog

supported by maricuru (旧maricuru tech blogです)

Native Moduleの作り方

決済サービスPAY.JP でモバイルエンジニアをしている tatsuyakit といいます。PAY.JPでは先日 React Native向けプラグイン をリリースしたのですが、本稿ではその中で出会ったNative Moduleを開発する際に気をつけたいポイントについて解説します。 Native M…

ReactNavigation v.5 とReduxでタブのバッジ数を管理する

この記事でやること Reduxで管理する通知バッジ数をReactNativeのボトムタブに表示させる記事です。通知バッジ数はスクリーンをまたぐ変数なので、Reduxで管理するのが良いかと思います。 こんな感じのやつです ↓↓ (この記事ではこれの簡易版を作ります) Rea…

SnapmartにおけるCameraRollから写真の複数枚アップロードの実装

自分が作っているプロダクトであるSnapmartは、スマホのアプリから誰でも手軽に写真を売り買いできるサービスです。 スマホアプリでは、カメラロールの中から写真をアップロードをする機能があります。 この写真をアップロードする機能ですが、カメラロール…

Future of React Native

この記事は Meguro.es #25 で登壇した内容です。 はじめに 最近 React Native Community の Github org の一員となりました。去年の Advent Calendar で目標を立てていたのですが、新年入って1週間足らずで達成できました。Community の一員になれた経緯は…

React Native + FirebaseのSNSログイン機能の実装(GoogleとFacebook)

どうも、サトウダイキです。 前回の続きです。React Native + Firebaseのログイン実装について記載してきます。 前回はメールアドレスと電話番号の実装をしました。 tech.maricuru.com 今回はFacebookアカウントとGoogleアカウントでのログインについです。 …

React Native + Firebaseのログイン機能の実装(メールアドレスと電話番号)

どうも、サトウダイキです。 今日はReact NativeでのFirebaseのログインの実装について書いていきます。4つの方法を実装していきます。 メールアドレス 電話番号 Facebookアカウント Googleアカウント この記事ではメールアドレスと電話番号について書きます…

ReactNativeのフォルダ構成はどうするべきか?

どうも、佐藤大生です。マリクルのReactNativeエンジニアです。 React Nativeで開発を始める時、フォルダ構成について悩むと思います。 これが正解!といったものは残念ながらありません。試行錯誤の繰り返しです。しかし、一度フォルダ構成を決めてしまうと…

非エンジニア向けにSQL社内勉強会を開催しました

先日SQLの社内勉強会を開催しました。 今回は特に「非エンジニア」に向けて、SQLの初歩〜社内分析環境(Redash)の使い方までを勉強しました。 非エンジニアがSQLを書けるメリットとしては 自分でスピーディーに仮説を検証できる エンジニアのプロダクト開発工…

イベント開催しました!〜 第2回 ReactNativeにゆかりのあるスタートアップが集う会

先月2月21日に「ReactNativeにゆかりのあるスタートアップが集う会」の第2回目をmaricuruオフィスにて開催しました。 r-n.connpass.com 前回より多めのご来場で、30人を超すReact Nativeエンジニア、またReact Nativeに興味のある方々が集いました。 今回もL…

イベント開催しました!〜 ReactNativeにゆかりのあるスタートアップが集う会

先日、1月17日に、React Nativeのイベント「ReactNativeにゆかりのあるスタートアップが集う会」を開催しました! 初の試みでドキドキでしたが、当日は約30名の来場があり盛況に終えることが出来ました。 今回は@kangyoosamさんと共同で、弊社maricuruのイベ…

リモートワーク推進!ということでセブ島でリモートワークしてきました

こんにちは、maricuruのワダです。 弊社はリモートワークを推進しており、ここ最近はリモートで働く仕組みを整えていました。 副業や業務委託という形でとても優秀なエンジニアがジョインしてくれて、主にリモートで働いています。 その結果、僕もオフィス行…

【GO GLOBAL #1 レポ】 ベイエリアで主流になっているコーディング試験の実態と攻略Tips

こんにちは、maricuruのワダ(@takahi5)です。 先日、"GO GLOBAL" meetup #1 に参加してきました。 GO GLOBALという海外で活動に興味があるエンジニアコミュニティのイベントに参加してきました。 go-global.connpass.com 今回はとくに「コーディング試験」を…

React Native+Expoなアプリのリリースから1年たって - つらみ編

(本ブログポストは React Native Advent Calendar 2018 の4日目の記事になります。) 弊社ではmaricuruという花嫁さん向けのコミュニティアプリをReact Native + Expoな環境で開発しています。 昨年の12/20にβリリースとしてiOSストア公開したので、もうすぐ1…

ITベンチャーが語るエンジニアリング組織論とは(イベントレポ)

こんにちは、maricuruのワダです。 さて、昨日はBizteXさんとLOBさん主催の「ITベンチャーが語るエンジニアリング組織論」に参加してきました。 ゲストスピーカーは、『エンジニアリング組織論への招待』の著者である広木大地氏、Japan Node.js Association …

【React Native】【Expo】ディープリンクを実装する

こんにちは、maricuruのワダ(@takahi5)です。 弊社maricuruは今までアプリのみでしたが、現在Web版も開発しています。 Webとアプリをスムーズに移動できるようにと、ディープリンクを実装してみました♪ 今回はExpoでのディープリンクの実装についてご紹介し…

キャンペーンの効果的な運用について考えてみた!

こんにちは、maricuruのワダ(@takahi5)です。 サービスを運営していく中で、ユーザー数や投稿数を増やすためにキャンペーンを実施したりすることがあると思います。 弊社maricuruでも最近はキャンペーンをあれこれ試しながらノウハウを蓄積しようとしていま…

【React Native】【Expo】iOS/Android ストア申請用のビルドを作る

こんにちは、maricuruのワダ(@takahi5)です。 寒さに比例して南国に行きたい欲が高まってきております さて、弊社アプリはExpoで作っていますが、たまに 「Expoで作ったアプリってストアに公開できるの?」 と聞かれることがあります。 もちろんストアに公開…

【Google Apps Script】Googleカレンダーから月間の稼働時間を集計する

こんにちは、maricuruのワダ(@takahi5)です。 今回はGoogle Apps Scriptネタです。 社内のグループウェアとしてG Suiteを使ってる会社は多いのではないでしょうか。 Google App Scriptを使うと、スプレッドシートやGoogleカレンダーをプログラムで操作できる…

UGCサービスの設計 ~ 鶏が先か卵が先か~

こんにちは、maricuruのワダ(@takahi5)です。 僕はエンジニアの中でも、どちらかというとスペシャリストというよりはサービス寄りなタイプで、サービスの仕様とか考えるのも好きだったりします。 前職のDeNA時代には、特にコミュニティ系のサービス設計につ…

【React Native】【Expo】ストアのレビュー誘導ダイアログを表示する

こんにちは、maricuruのワダ(@takahi5)です。 最近 結局、人生はアウトプットで決まる という本を読んだせいでアウトプット熱が高いです。 せめて1ヶ月くらいこの熱が保たれることを願います。 さて今回はストアのレビュー誘導ダイアログをExpoで実装してみ…

LINEのLIFFを使ってみて分かったLIFFの可能性

さて1ヶ月ぶりの更新です。 この1ヶ月なにをやってたかと言うと... オフィスを引っ越ししていました! 五反田の雑居ビルから、代官山のオフィスへ引っ越しました。 以前よりだいぶキレイなオフィスです。 個人的にはトイレがウォッシュレットになったのが涙…

React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(後編)

前回( React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(前編) - maricuru tech blog )に引き続き、React Native x Cloud Firestoreでアプリを作っていきます。 前回はCloude Firestoreにデータを保存するところま…

React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(前編)

弊社ではiOS, Androidアプリの開発にReact Native + Expoを使用していますが、非常に開発効率が高く、その恩恵を日々感じています。 今回はそのバックエンドにFirebaseの提供する「Cloud Firestore」を利用して簡単なアプリを作ってみようと思います。 せっ…

【React Native】【Expo】iOSのパーミッション要求ダイアログで審査リジェクトされた話とその対応

Qiitaに書けや!ってレベルの小ネタも書いていきますよ〜w 弊社のアプリはReact Native + Expoで開発していますが、先日のiOSストア申請でリジェクトされたときのお話と、その対応です。 こんな理由でリジェクトが Guideline 5.1.1 - Legal - Privacy - Data…

【React Native】【Expo】分析ツールAmplitudeの導入方法とそのメリット

アプリの分析ツールといえば、Google Analytics, Firebase Analytics, Mix Panelなど様々ありますが、今回はAmplitudeというサービスをご紹介します。 弊社のアプリ"maricuru"では分析に、このAmplitudeをフル活用しています。 Amplitudeとは アメリカのAmpl…

【React Native】Expo SDK v28.0.0の変更点まとめ

先日Expo SDKのv28.0.0がリリースされました。 大きな変更もあったようなので、変更点をまとめてみます。 Expo SDK v28.0.0 is now available – Exposition AndroidのtargetSdkVersionが26にアップデートされました Androidの方針で、今後新規リリース、及び…

React NativeにStorybookを導入したらUI開発がめちゃめちゃ捗った話

Storybookとは StorybookはUI開発用の環境で、アプリ自体を立ち上げずにUIコンポーネント単位でレイアウトや挙動の確認をすることができます。 また、どんなコンポーネントがあるのかを一覧するための、コンポーネント図鑑のようにも使えます。 導入方法は先…

Elasticsearchを導入してみた(Rails, Docker, AWS Elasticsearch Service)

弊社アプリ"maricuru"で全文検索機能を実現するために、Elasticsearchを導入しました。 構成はこんな感じです。 サーバーサイドはRuby on Rails 環境構築はDocker 本番にはAmazon Elasticsearchを利用 このあたりを利用した導入の手順をご紹介します。 Docke…

【React Native】【Expo】Expoでプッシュ通知を送る

React Native + Expoでプッシュ通知を送る方法をご紹介します。 公式で it's almost too easy. と書かれている通りで、実装はとても簡単です。 ちなみにExpoベースのアプリでプッシュ通知を送る場合、このExpo公式のプッシュ通知を使う以外方法はありません…

【Expo】【React Native】productionとstagingを分けて配布したい

異なるバージョンのアプリケーションを配布したい、 たとえばproductionとstaging環境があって、productionユーザーに届ける前に、stagingで動作確認したい、といった状況はよくあると思います。 こういった場合に対応するため、Expoでは"Release Channel"と…