ペペロミア & memoir開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

Qaseを使用してリリース前のテスト管理をする

memoirのアプリ公開前にシナリオテストの実施をしたかったので、 Qaseを使用してテストの管理を行ってみた。 Qaseとは qase.io シナリオテストの管理ツール。 3人までなら無料で使用可能。料金に関しては以下を参照。 qase.io 実施 まず、プロジェクトを作成…

React NavigationでTextInputのautoFocusが効かない問題の対応

本番アプリの検証中に見つけた不具合の対応を記載 PR github.com 対応 TextInputにautoFocusを設定しても反応しない事象が発生。 原因は以下の通り。 github.com 内容的にはReact Navigation で画面遷移した先の画面でTextInputにautoFocusを設定してもキー…

Prismaを試してみた

Prismaに触れる機会があったので紹介 リポジトリ github.com スライド speakerdeck.com Prismaとは? Node.js製のORM RDB周りの処理を簡易に扱えるようにする Schemaファイルから型情報を自動生成 以下のDB対応をサポート PostgreSQL、MySQL、SQL Server、SQ…

GraphQLのエラーハンドリングを追加する

GraphQLではエラーになった場合でも http status 200にしてGraphQLのレスポンスをエラーにして、エラーメッセージを返すのが一般的にである。 ただ、それだと特定のエラーの場合のみフロントエンド側でハンドリングしたい時に不便だなと感じていた。 そこで…

CSSのclip-pathの紹介

memoirのLPサイトのデザインでCSSのclip-pathを使用してみた感じ結構良さ気だったのでサンプルリポジトリを作成してみたので紹介 リポジトリ github.com 紹介 以下で紹介用のサイトとスライドを作成した。 ■URL https://try-css.vercel.app/ ■スライド speak…

docsifyで開発ドキュメントの管理を行う②: 実運用まで

以下のdocsifyで開発ドキュメントの管理を行なう①: 基礎構成の記事の続きです。 docsifyで開発ドキュメントの管理を行う① - ペペロミア & memoir開発ブログ 以下に記載している内容をドキュメント化して実際の開発フローにのせる運用をやってみた。 開発手順…

zxを使用してGitHubのCHANGE_LOG.mdを作成する

www.wheatandcat.me ↑で開発ドキュメントを管理するサイトを作成したが、その際に編集履歴の画面が欲しいと思ったので、zxを使用して実装してみた。 PR github.com 実装 開発ドキュメントを管理するサイトとして以下を実装した。 wheatandcat.github.io ドキ…

frontendはformikとyupで、backendはozzo-validationを使用してバリデーションを実装する

LPサイトのお問い合わせフォームのバリデーションを作成する時に使ってみた組み合わせを紹介 PR github.com frontendのバリデーションを実装 以下を使用してバリデーションを実装 formik yup yupでは、バリデーションを以下のように実装できる。 import * as…

docsifyで開発ドキュメントの管理を行う① :基礎構成

プロジェクトの開発規模が大きくなってくると設計書の可視化が必要になってくる。 どう管理するか検討した結果、GitLabのHandbookのガイドを参考にするのが良いと思い、開発ドキュメントのWebサイトを作成した。 about.gitlab.com リポジトリ github.com 開…

アサイン募集中のissueを集めて共有するモンハンのクエストボードみたいな仕組みを作る

管理するメンバーが増える & 複数のRepositoryに跨ったプロジェクトだったりすると issueのアサインに時間が掛かることがあるので、特定の記事をモンハンのクエストボードみたいに見立てて、そこから自分に合ったissueを引き受けるような仕組みを作ると楽そ…

Slidevでスライドを作る

開発中のアプリのスライドを作成する機会があったのでスライドの作り方を調査してみた。 調べた感じ、今はSlidevちうツールがよく使われているみたいなので、こちらを使用してスライドを作ってみた。 作成したスライドの情報 ■ GitHub https://github.com/wh…

react-native-view-shotを使用してiOSで8200pxを超える画像をキャプチャした時に画像が真っ白になる不具合の対応

概要 タイトルの通りだが、react-native-view-shotに不具合があり、iOSで8200pxを超える画像をキャプチャする真っ白の画像になってしまっていた。 github.com native側の修正が必要なので、Expoでは修正不可能だなーとなっていたのを力技で解決したので、そ…

scenarigoでE2Eを実装

APIのE2Eテストを実装したいなーと思い調べていたところ、以下の記事を見つけてscenarigoが、良さげだなと思ったので実装してみた。 engineering.mercari.com PR github.com 実装 scenarigo実行まで scenarigoはGO製のscenario-based API testingのツール。…

Goでローカル開発時に必要なスタックトレースのみ表示する

概要 以前、sentry-goの記事でスタックトレースについて軽く触れたが、 www.wheatandcat.me ローカル開発中もエラー時にスタックトレースを表示したいと思い実装したら、 意外と良い感じにスタックトレースを表示させるのに手間取ったので、その辺の諸々をま…

React Navigation v5 → v6への移行

React Navigation v6がリリースされたので移行してみた reactnavigation.org PR github.com 実装 v5→v6の移行は、以下の記事を読んで進めた https://reactnavigation.org/docs/upgrading-from-5.x/ package.jsonを更新 ■ package.json "@react-navigation/na…

sentry-goを使用して、正しくエラーをハンドリングする

以前、sentry-goの実装の記事を書いたが、そこからより実践に向けのエラーをハンドリング & 情報追加をしてみました。 www.wheatandcat.me Pull Request github.com github.com 実装 導入に関しては以前の記事で紹介しているので割愛 以下は、新たに実装した…

Storybook + Loki + reg-suitでReact NativeでVisual Regression Testingを実装

React NativeでVisual Regression Testingを実装したので解説します。 ただ現状CIで実行するのは難しそうだったので(セルフホストランナーを使用すればCIでも実行できそうですが)、一旦ローカルのみ実行できる実装になっています。 PR github.com 実装 今…

react-nativeで画面スクリーンショット & 共有機能を開発

memoirする画面の共有機能を実装したので解説 Pull Request github.com 実装 内容としては、memoirする画面(1週間分のタスクを表示する)をスクリーンショットして、共有できるような感じで実装していきます。 まず、画面スクリーンショットはreact-native-…

React Nativeでチュートリアルを作成

memoirのチュートリアルを実装したので紹介 Pull Request github.com 実装 ペペロミア作成時だと、react-native-app-intro-sliderを使用していましたが、今回はライブラリを使用せず実装しました。 github.com 実装は、以下の記事を参考に作成 medium.com ス…

ts-unused-exportsを使用して不要なexportを検知する

exportしているが使用していない場合は、削除したいなーと思ったので実装してみた Pull Request github.com 実装 検知には ts-unused-exports を使用 github.com 以下のコマンドで追加 $ yarn add -D ts-unused-exports 以下のコマンドで実行できます $ yarn…

Expo + React NavigationでPush通知からのDeep Linkを実装

PUsh通知から指定の画面に遷移させる機能を作成したかったので実装 Pull Request github.com 実装 まず、以下を参考にReact NavigationでDeep Linkを実装 https://reactnavigation.org/docs/deep-linking ■ src/Router.tsx import React from 'react'; impor…

ExpoでローカルPush通知を実装する

memoirの振り返りの日程通知の機能が欲しかったのでexpo-notificationsのローカルPush機能で実装してみました。 Pull Request github.com 実装 実装は以下のドキュメントを参考に作成 docs.expo.io まず、以下でNotificationのパーミッションの許可を行い im…

GAE、Cloud Tasks、Cloud Functionの組み合わせでPush通知の送信を作成

memoirでPush通知の実装を行ったので、その構成について紹介 Pull Request 【GAE】Push通知の送信を実装 【Cloud Functions】 Push通知を送信 使用する技術 GAE: Cloud Tasksのタスクを作成 Cloud Tasks: Push通知のタスクを管理 Cloud Functions: Push通知…

gqlgenでネストしたオブジェクトのFieldの引数を取得する方法

概要 招待機能で諸々のGraphQLでネストしたオブジェクトのFieldの引数を受け取りたい場面ができて、実装に迷ったので記事にしました。 実装 招待機能を作成で、マイページの画面では招待のリクエスト数のみが欲しくて、一覧画面では招待のリクエスト情報 + …

ExpoとFirebase Storageで画像アップロード機能を実装

プロフィール画像のアップロード機能を実装したので記事にまとめた Pull Request github.com 実装 以下を使用して実装しました。 画像の選択からexpo-image-pickerを実装しました。 docs.expo.io ライブラリから選択して画像を取得する場合はImagePicker.lau…

expoでSign In with Apple、Googleログインを実装する

ログイン後の処理を実装しました。 expoのソーシャルログインは保守が大変なので最小限の実装として、iOSはSign In with Apple、AndroidはGoogleログインのみサポートする予定 Pull Request github.com 実装 iOSでSign In with Appleを実装 実装は以下を参考…

GraphQL + Firestoreでクエリカーソルを使用したページングを実装②

前回の記事でサーバー側の実装が完了したので、今回はアプリ側を対応していきます。 www.wheatandcat.me Pull Request github.com 実装 まず、ページング用のCustom Hooksを作成 ■ src/hooks/useItemsInPeriodPaging.tsx import { useState, useEffect, useC…

GraphQL + Firestoreでクエリカーソルを使用したページングを実装①

memoirの1週間の振り返り機能でGraphQL + Firestoreでクエリカーソルを使用したページングを実装しました。 Pull Request github.com ↑だと、ページング処理はうまく行かないパターンがあったので、さらに以下で修正 github.com 実装 GraphQLのページングの…

GAEをGitHub Actionsでデプロイできるようにする

今回はチーム開発なので、常の最新の状態がデプロイされている状態にしたかったので、まずbackend側のデプロイの自動化をしました。 Pull Request github.com 実装 今回はGitHub Actionsでデプロイできるようにした。 コードは以下の通り ■ .github/workflow…

Firestoreの定期バックアップを実装する

memoirのデータは全てFirestoreで管理しているのでバックアップを実装したのでメモとして残しておく コード github.com 実装 ほぼ以下のドキュメントの通り作成しただけなので手順をそのまま記載 firebase.google.com まず、保存に使用するbucketをCloud Sto…