wheatandcatの開発ブログ

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

2021-01-01から1年間の記事一覧

アサイン募集中の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…

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で画像の配色ガイドライ…