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

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

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…

moqを使ってGo言語のテストコードを書く

前にGoMockを使ったテストコードについて記事にした事がありました。 www.wheatandcat.me 当時はGoMockしか知りませんでしたが、moqというライブラリの方が簡単に使えるという話を記事をみかけたので、memoirではmoqを使用してGo言語のテストを書いてみまし…

Zennのスクラップで開発日記を投稿する

memoirの開発のログを見返せるようにしたなと思い、Zennのスクラップを使用して開発日記を投稿してみたら結構良さ気だったので、記事にしました。 Zennのスクラップについて zenn.dev ↑に記載の通りで「スレッド形式で「作業ログ」や「試行錯誤の過程」を投…

Recoilを使ってみる

memoirにRecoilを導入してみた Recoilを採用した理由 ペペロミアでは画面を跨いでのステートは全てContext APIを使用していたが、以下の理由で若干悩ましい点があった。 Context APIだと自由に書けてしまい、実装機能が増えるにつれて独自の実装が増えてしま…

memoir開発日記 ①

最近新しいアプリの開発を行っているので、それについて記事にしました。 開発中のアプリ アプリ名: memoir 開発の動機 私の家庭では週1回振り返りの時間を設けていて、その時間では互いに今週あったことを会話で共有して議事録に残すのを習慣にしています。…

@graphql-eslint/eslint-pluginを導入してgqlをlintする

チーム開発でGraphQLを利用していると、気づかぬ間にdeprecatedのフィールドを参照していたことがあったので、それの防止策を紹介 Pull Request 以下で導入 github.com 内容 @graphql-eslint/eslint-pluginを導入しました。 github.com ※似たような感じで名…

Tailwind CSSの紹介

前の記事で書いたサイト作成で、Tailwind CSSを使ってみて、かなり良いなーと思ったので紹介 www.wheatandcat.me Tailwind CSSとは tailwindcss.com Tailwind は CSS フレームワークです。 既存のBootstrapやMaterialize CSSなどフレームワークと比較して非…

Atomic Designが難しい人向けにカテゴリー分けの参考サイトを作ってみた

概要 Atomic Designをプロジェクトで採用しているが、実際にチームで運用してみると認識よってカテゴリーがズレてルールが崩壊することがあるかなあと思います。 なので、そんな人向けにAtomic Designのカテゴリー分けの参考になりそうなサイトを作成しまし…

ペペロミア v3.0.0 リリースノート

GitHub Peperomia マイルストーン Peperomia v3.0.0 PeperomiaBackend v3.0.0 PeperomiaWeb v3.0.0 PeperomiaTool v3.0.0 対応内容 [Peperomia]APIの新設計と新デザインに合わせて修正する [Peperomia]新設計に合わせてログイン前をSQLite、ログイン後をGrap…

配色ガイドラインに合わせてtheme設定を作る

アプリのthemeの整理のため配色ガイドラインを設けてそれに合わせて実装しました。 配色ガイドライン https://www.figma.com/file/YYon1ahSQ7W15Mug0LsovHws/%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%9F%E3%82%A2?node-id=2178%3A653 Figmaで画像の配色ガイドライ…

ログイン前: SQLite、ログイン後: write:RESTful API + read:Firestoreからログイン前: SQLite、ログイン後:GraphQL構成への移行

以下の2つのPull Requestで諸々のログイン前: SQLite、ログイン後:GraphQL構成への移行が完了しました github.com github.com ペペロミアのv2→v3のバージョンアップで、この辺の構成を一気に修正される予定です。 なので、改めてv2→v3への変化を記事にまとめ…

Firestoreで全文検索の機能を作成する

新設計のFirestoreの実装が、あともう少しで完了しそうなので、今回はその途中で実装した内容について記事にしてみました。 ペペロミアでは、以下みたいにタイトルを入力するとサジェストを表示する機能を実装していました。 今までは、単純に自身のCalendar…

graphql-codegen/typescript-react-apolloでHooks部分まで自動生成する

Firestoreの新設計に作り直しの作業が終わらないので、一旦途中記事を作成 https://github.com/wheatandcat/Peperomia/pull/709/files 新設計に合わせてアプリ側もGraphQLで再実装中です。 graphql-codegenとは 前に別記事で触れましたが、graphql-codegenを…

graphql-markdownでGraphQLのAPIドキュメントを自動生成する

github.com ↑最新のFirestoreの設計に合わせて全体的にGraphQLに移行していく中で、APIドキュメントを残していきたいなーと思いgraphql-markdownを使ってみました。 github.com 使い方 まずローカルで起動サーバーを起動 $ dev_appserver.py app.yaml localh…

Peperomia v2.0.6 リリースノート

GitHub Peperomia マイルストーン Peperomia v2.0.6 PeperomiaBackend v2.0.6 PeperomiaWeb v2.0.6 Peperomia LPサイト v2.0.6 PeperomiaTool v2.0.6 対応内容 [Peperomia]まだ残っているクラスコンポーネントをできるだけReact Hooksに変更する [Peperomia]…