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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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