開発中のアプリでデータ共有で招待QRコードを発行して、スキャンでゲストログインできる仕組みを実装したので記事化 PR github.com 実装の概要 backend/アプリのゲストログインの実装 ゲストユーザーログインのトークンを発行してHeaderに設定して認証するミ…

QRコードからのゲストログインの機能を作成中。 標準のQRスキャンアプリでスキャンしたらゲストログインできる仕組みにしたかったので、ユニバーサルリンクを実装 PR github.com github.com 実装 ユニバーサルリンクは以下の記事を参考に実装 zenn.dev まず…

前回、GitHub ActionsでiOSアプリをビルドしてFirebase App Distribution にデプロイする方法を紹介したので、今回はAndroidの方を紹介 www.wheatandcat.me PR github.com 使用 アプリ: Flutter CI: GitHub Actions デプロイ先: Firebase App Distribution …

作っているアプリで実機検証をやりやすくすためにCIで自動でデプロイできるようにしたの記事化 今回はiOSアプリのみ、次回Androidアプリのデプロイ方法も記事にする予定 PR github.com 使用 アプリ: Flutter ビルド: fastlane CI: GitHub Actions デプロイ先…

今Flutterで開発しているアプリがある程度形になったので報告 リポジトリ github.com github.com 画面 使用している技術 Flutter NestJS Prism TiDB Serverless Cloud Run Firebase Authentication Firebase Storage 各画面で使っているライブラリ紹介 アプ…

Flutterで画像アップロード機能を実装したので記事にした PR github.com 実装 以下を使用して実装 - image_picker | Flutter package - image_cropper | Flutter package - firebase_storage | Flutter package まずはimage_pickerで画像選択部分を実装 初期…

前回記事の続き、今回はバックエンドとアプリの続きを実装 PR backend github.com アプリ github.com 実装 まずはbackendを実装 今回はNestJSのGuardの機能を使いFirebase認証を作成 docs.nestjs.com コードは以下のような感じ ■ src/common/guards/auth/aut…

4月は3週間の海外旅行に行っていたので久々の更新。 FlutterでFirebase Authenticationを実装してみたので記載。今回は純粋なアプリのログインのみ実装。 次回の記事でbackendの接続とアプリの状態保持を記載する予定。 PR github.com 使用パッケージ fireba…

以下の記事で紹介したが現在開発中のアプリでPlanetScaleを使用していたが無料プランがなくなってしまうので、代替のDBサービスを試してみたので紹介 www.wheatandcat.me PlanetScaleの無料プランがなくなる件 planetscale.com 5GBまでなら無料で使用できて…

現状FlutterでAPI接続するにはGraphQLが良さ気だったので実装してみた リポジトリ 以下で開発 ■ Flutter github.com ■ backend github.com 開発構成 Frontend Flutter Backend NestJS Prisma PlanetScale GraphQL Code Generator Cloud Run モチベーション F…

新しいアプリ開発でbackendをNode.jsでAPIをやってみようと思いタイトルの構成でAPIサーバーを作成してみたら、結構ハマりどころがあったので記事した リポジトリ github.com モチベーション 現在Flutterでアプリを作成中 FlutterでAPIのやり取りで型安全に…

前から記事で紹介していたサービスが公開できるレベルまで開発が完了。 コードがGitHubで公開しているので、諸々紹介 GitHub github.com URL oomaka.vercel.app 使用技術 web & サーバー T3 Stack Next.js App Routerで実装 tRPC Tailwind CSS TypeScript Pr…

今までPages Routerだった処理サイトをApp Routerに移行してみたの記事にしてみた nextjs.org PR github.com 実装 App Routerに移行する場合は、以下を確認してディレクトレリを変更する必要がある nextjs.org 基本はsrc/pages/schedule/[id].tsx→src/app/sc…

NextAuth.jsでログイン画面をカスタマイズしてみたので記事にする PR github.com github.com 実装 NextAuth.jsを使うと以下のような感じで簡単にログインを実装できる。 ■ src/server/auth.ts export const authOptions: NextAuthOptions = { providers: [ D…

前回紹介したwebアプリでT3 Stackでwebサービスを作成中。 www.wheatandcat.me T3 StackでSSRを実装を試していたら、かなり簡単に実装できることに気づいたので記事化。 PR github.com 実装 T3 StackでSSRする場合にどうすれば良いか分からなかったので初め…

作りたいwebサービスが出来たので気になっていたT3 Stackを使用して実装してみたので紹介 create.t3.gg サービスについては、まだ開発中なので、何回か記事にする予定 リポジトリ github.com 作成中のWebサービス oomaka.vercel.app サービス名: OOMAKA URL:…

Slackが無料だと90日までしかメッセージを保持しなくなったので、個人開発系の通知系はDiscordに引っ越中 discord.com その中で、Discord Botの開発をしてみたのでやり方を紹介 今回作ったもの PR github.com 内容 Discordに日本語、英語のチャンネルがあり…

@storybook/react-nativeが v6.5にバージョンアップしたので移行した。 結構書き方が変わったので紹介 PR github.com Storybook v5 → v6で変わった内容 Component Story Format (CSF) がサポートされた Storybookのファイルの書きからが以下のように変更。 ■…

作成したChrome拡張でデータをサーバー上から同期させる機能をSupabaseを使って実装してみたので紹介 PR github.com Supabaseとは？ supabase.com SupabaseはFirebaseの代替として注目されているBaas 以下のサービスを提供している Authentication Database …

前の記事で作っていたブラウザ拡張をChrome Web Storeに公開してみたので記事にしてみた www.wheatandcat.me 公開したChrome Web Store chrome.google.com リポジトリ github.com 公開方法 Plasmoで開発している場合は、基本は以下の通りに進めればOK。 docs…

最近、話題のtRPCを試してみたので記事にしました。 tRPCとは？ trpc.io スキーマやコード生成なしで型安全なAPIの連携が行えるPRCフレームワーク TypeScriptに特化しており、非常にシンプルに実装できる 比較対象としては、GraphQLやOpenAPIなどの技術に該…

最近、社内で記事の共有などをする機会が増え、ブラウザのブックマークやGoogle Keepを使用していたが、仕事とプライベートで使用しているブラウザ、Googleアカウントなどが違ったりして、どこに保存したか分からなくなることが多かったので、自作でchrome拡…

Expo SDK 48にアップデートをしたらReactのバージョンが最新になり、Enzymeがサポートされなくなったので、すべてのテストケースをtesting-library/react-nativeに置き換えた PR github.com 実装 今までEnzymeのshallowを使用して、テスト対象となるcomponen…

TodoアプリにPlayWrightを導入してみたので紹介 PR github.com github.com PlayWrightとは？ playwright.dev 最新のE2Eテストフレームワーク コードジェネレータが使えて便利 モチベーション 以前、記事で紹介した開発中のTODOアプリでmarkdown-to-jsxを使用…

一ヶ月前に右腕が腱鞘炎になってしまい、最近やっとある程度は仕事ができる状態になりました。 この記事では腱鞘炎になってから試したガジェット/アプリ/行動などをまとめたので、同じ境遇のエンジニアの参考になればと思います ‍♂️ 腱鞘炎前の状態の紹介 PC…

新しいプロジェクトでVitestを導入してみたので紹介 PR github.com 紹介 vitest.dev VitestはVite環境で動作する高速なテストフレームワーク 領域的にはJestと同じ 最新のテストフレームワークなので、細かいカスタマイズがされている 実装 以下のコマンドで…

Next.jsで作成してLPサイトにSSRをサポートしていないComponentパッケージを導入しようとしたところ、意外とハマったので記事にした。 PR github.com 実装 お試しでmemoir用のKo-fiのページを作ってみたのでNext.jsで作成したLPサイトにリンクを追加する開発…

元々、1つの処理内でfirestoreに複数件の書き込みをしている箇所は、バッチ書き込みで同時に書き込み処理を実行していた。 firebase.google.com GoのFirestore SDKのv1.9.0から、バッチ書き込みでclient.Batchを使用するのは非推奨になった。 pkg.go.dev そ…

以下の記事から引き続き、TODOアプリを作成中。 www.wheatandcat.me Window Menuの改修をしたので記載。 PR github.com 実装 現状ローカルストレージにTODOのデータを保存しているのみの構成。 なので、アプリ削除で全てのデータが消えしまうので保存データ…

仕事のタスク管理をslackで行っていたが、いい加減ちゃんと管理しくなってきたのでデスクトップアプリを自作したので、その内容を記事にした。 リポジトリ github.com アプリの説明 Markdownベースで記載できるTODOアプリ できるだけシンプルに作成 まだ開発…