wheatandcat

概要最近、AI系ツールで遊んでいたら失敗も含め学びがあったのでメモとして残す。作ったものリポジトリgithub.comスクリーンショットアプリの説明入力は Markdown。チェックボックス (- [ ]) を付けるとタスクとして認識チェックボックスを ON にすると 1 時間後にタスク完了として自動で Done へ遷移Done 状態になったタスクは Markdown から削除完了タスクの集計情報を確認可能Web 版と Mac アプリ版の両方で動作使用したサービスReplitClaude Code実装の手順Replit でのプロトタイピングまず Replit を使って開発を開始。replit.comReplit はブラウザ上で動く AI 搭載 IDE。画面左側がプロンプト入力欄で、右側にプレビューが表示される。Replit 内では以下の機能が統合されているため、環境を離れずに開発が進む。サーバーデプロイデータベース作成認証 (Auth)GitHub 連携「ログイン機能を作って」のようなプロンプトを投げると、Auth 機能込みで実装まで生成される。https://replit.com/pricing月額プランは基本$20だが使用量に応じたクレジット制Vibe Coding やデプロイでクレジットが消費される2 日ほど真面目に触っただけで月額相当を使い切るペースだった結果としてプロトタイプ段階には最適でも、継続運用にはコストが課題。現在は初期試作専用として活用中。Claude Code への乗り換え続いて Claude Code を試す。docs.anthropic.comAnthropic 提供のターミナル型 AI コーディング支援ツールで、ローカル環境からプロンプトを流し込みながら開発できる。Replit で途中まで書いたコードを取り込み、以下を依頼してリファクタリング。Replit 固有機能の削除ログイン機能の削除DB をサーバー型からローカル SQLite へ置換結果は次の PR にまとめた。github.comClaude Code 経由でもスムーズに Vibe Coding を継続できた。Vibe Coding してみての感想Vibe Coding は従来開発と実装順の最適解が異なるケースあり序盤でログイン機能を入れた結果、後半のブラッシュアップで壊れやすくデバッグ負荷が高かったまずメイン機能を磨き、その後ログインなど周辺機能を追加する方が効率的AI による実装は機能追加の敷居が低いぶんアプリが肥大化しやすい機能増加に伴い Vibe Coding 時のバグ発生率も上昇指示粒度やタイミングなど、AI との協調開発には慣れが必要だと思った

Vibe Codingで自分用のTODOアプリを作っている話

概要個人開発しているアプリをExpo SDK 52 → 53にバージョンアップした時に数点ハマった箇所があったので記事にする。PRgithub.comExpo SDK 53の変更点詳細な内容は以下の記事を参照。expo.dev影響があった主な変更点は以下の通り。ベースのネイティブコードの言語が最新化iOS: Objective-C → SwiftAndroid: java → KotlinReact 19にバージョンアップExpo Routerの強化移行の手順以下のコマンドで移行は可能。npx expo install expo@^53.0.0 --fixその後、最新の状態になっているかを expo-doctor で確認。npx expo-doctor@latestハマった箇所の紹介上記の手順で移行してビルドした際、以下のエラーが発生。Route "./(app)/screen-shot/index.tsx" is missing the required default export. Ensure a React component is exported as default.この内容からは、Expo Router 周りでコンポーネントの import に問題があるように見えたが、調査した結果、firebase の SDK を import すると発生することがわかった。その後、以下の issue にて同様の事例を確認。github.com内容としては、firebase の内部で .cjs 拡張子のファイルを含む構成があり、Metro bundler がそれを正しく解決できないというものだった。以下のように metro.config.js を修正することで対応可能。修正内容metro.config.jsconst { getSentryExpoConfig } = require("@sentry/react-native/metro");const withStorybook = require("@storybook/react-native/metro/withStorybook");const STORYBOOK_ENABLED = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true";const config = getSentryExpoConfig(__dirname);// Firebase / Expo SDK 53 対応: “.cjs” 拡張子を解決対象に含めるconfig.resolver.sourceExts = config.resolver.sourceExts || [];if (!config.resolver.sourceExts.includes("cjs")) {  config.resolver.sourceExts.push("cjs");}// Firebase や React-Native-WebView のようなパッケージの export map 問題に対応config.resolver.unstable_enablePackageExports = false;module.exports = withStorybook(config, {  enabled: STORYBOOK_ENABLED,  onDisabledRemoveStorybook: !STORYBOOK_ENABLED,});この修正により、Firebase のサブパッケージが正しくバンドルされ、アプリのビルドが問題なく通るようになった。

Expo SDK 52 → 53にバージョンアップした時にハマった箇所を紹介

概要Expo SDK 53が出たのでアップデートしたら、合わせてReact 19にアップデートされた。以前から使用していたRecoilはReact 19をサポートしていないので、Zustandに移行したので記事にした。github.comPRgithub.comZustandとはzustand-demo.pmnd.rsZustandはグローバルステートを管理するライブラリ軽量でシンプルなコードで実装できるのが特徴今回導入したアプリは、元からグローバルステートは最低限の実装しかなったので、一番シンプルなZustandを採用内部ストアの仕組みでReact Context APIを使用せず状態管理はReactからは独立しているので、RecoilのようにReact依存で使用できなくることは避けられそうなのも採用した理由の1つ実装導入以下のコマンドで導入。pnpm add zustandステートの更新 & 取得との移行RecoilのコードRecoilで情報を管理したい場合は以下のように宣言。■ store/atoms.tsimport { atom } from "recoil";import type { ItemQuery } from "@/queries/api/index";export type Item = NonNullable<ItemQuery["item"]>;type HomeItems = {  items: Item[];};const initialHomeItemsState = (): HomeItems => ({  items: [],});export const homeItemsState = atom<HomeItems>({  key: "homeItemsState",  default: initialHomeItemsState(),});値を設定したい場合は以下のように記載。■ hooks/useHomeItems.tsximport { useSetRecoilState } from "recoil";import { homeItemsState } from "@/store/atoms";const useHomeItems = () => {  const setHomeItemsState = useSetRecoilState(homeItemsState);  (略)  useEffect(() => {    if (prevLoading !== null && !loading) {      const items = (data?.itemsByDate || []).map((v) => ({        id: v?.id || "",        title: v?.title || "",        categoryID: v?.categoryID || 1,        date: v?.date || "",        like: v?.like || false,        dislike: v?.dislike || false,        createdAt: v?.createdAt || "",        updatedAt: v?.updatedAt || "",      }));      setHomeItemsState({ items });   // ←値を設定      setApiLoading(false);    }  }, [loading, prevLoading, setHomeItemsState, data]);値を設定取得したい場合は以下のように記載。■features/home/components/Connected.tsximport { homeItemsState } from "@/store/atoms";import { useRecoilValue } from "recoil";const Connected: React.FC<Props> = (props) => {  const homeItems = useRecoilValue(homeItemsState);  // ←値を取得ZustandのコードZustandでユーザーの情報を管理したい場合は以下のように宣言。■store/homeItemsStore.tsimport type { ItemQuery } from "@/queries/api/index";import { create } from "zustand";export type Item = NonNullable<ItemQuery["item"]>;type HomeItems = {  items: Item[];};const initialHomeItemsState = (): HomeItems => ({  items: [],});export const useHomeItemsStore = create<{  homeItems: HomeItems;  setHomeItems: (items: Item[]) => void;  reset: () => void;}>((set) => ({  homeItems: initialHomeItemsState(),  setHomeItems: (items) => set({ homeItems: { items } }),  reset: () => set({ homeItems: initialHomeItemsState() }),}));値を設定したい場合は以下のように記載。■hooks/useHomeItems.tsximport { useHomeDateStore } from "@/store/homeDateStore";const useHomeItems = () => {  const setHomeItemsState = useHomeItemsStore((state) => state.setHomeItems);  (略)  useEffect(() => {    if (prevLoading !== null && !loading) {      const items = (data?.itemsByDate || []).map((v) => ({        id: v?.id || "",        title: v?.title || "",        categoryID: v?.categoryID || 1,        date: v?.date || "",        like: v?.like || false,        dislike: v?.dislike || false,        createdAt: v?.createdAt || "",        updatedAt: v?.updatedAt || "",      }));      setHomeItemsState(items);   // ←値を設定      setApiLoading(false);    }  }, [loading, prevLoading, setHomeItemsState, data]);値を設定取得したい場合は以下のように記載。■features/home/components/Connected.tsximport { useHomeItemsStore } from "@/store/homeItemsStore";const Connected: React.FC<Props> = (props) => {  const homeItems = useHomeItemsStore((state) => state.homeItems);  // ←値を取得上記のコード修正でステートの更新と取得が可能になる。まとめ上記のコード修正でサクッと移行できたので次はExpo SDK 52 → 53移行を進めていく予定。

Recoil→Zustandに移行

概要expo-router導入時に一旦Storybookは考慮せずに実装していた。PRgithub.comgithub.com使用バージョンExpo SDK: 52expo-router: 4.0.19実装手順初期セットアップまずはStorybook用ファイルを作成するため、以下を実行する。npx storybook@latest init実行後、以下のようなファイルが生成される。.storybook/├── index.ts├── main.ts├── preview.tsx├── stories│   └── Button│       ├── Button.stories.tsx│       └── Button.tsx└── storybook.requires.tsエントリーポイントの切り替え対応expo-routerはファイルベースルーティングのため、package.jsonのmainフィールドを以下のように変更する。{  "main": "index.ts", // ← "expo-router/entry"から修正}次に、ルートにindex.tsを新規作成し、以下のように実装する。if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true") {  require("./.storybook");} else {  require("expo-router/entry");}.env にデフォルト設定を追加する。EXPO_PUBLIC_STORYBOOK_ENABLED=false起動コマンドの追加"scripts": {  "storybook:ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true npx expo run:ios",  "storybook:android": "EXPO_PUBLIC_STORYBOOK_ENABLED=true npx expo run:android"}Storybook 設定ファイルの修正.storybook/main.tsimport type { StorybookConfig } from "@storybook/react-native";const main: StorybookConfig = {  stories: ["../(components|features)/**/*.stories.?(ts|tsx|js|jsx)"],  addons: ["@storybook/addon-ondevice-controls", "@storybook/addon-ondevice-actions"],  reactNative: { playFn: false },};export default main;.storybook/preview.tsximport { MockedProvider } from "@apollo/client/testing";import { ActionSheetProvider } from "@expo/react-native-action-sheet";import type { Preview } from "@storybook/react";import React from "react";import { RecoilRoot } from "recoil";import Notification from "../containers/Notification";const preview: Preview = {  parameters: {    controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },  },  decorators: [    (Story) => (      <RecoilRoot>        <ActionSheetProvider>          <MockedProvider>            <Notification>              <Story />            </Notification>          </MockedProvider>        </ActionSheetProvider>      </RecoilRoot>    ),  ],};export default preview;.storybook/storybook.requires.tsimport { start, updateView } from "@storybook/react-native";import "@storybook/addon-ondevice-controls/register";import "@storybook/addon-ondevice-actions/register";const normalizedStories = [  {    titlePrefix: "",    directory: ".",    files: "(components|features)/**/*.stories.?(ts|tsx|js|jsx)",    importPathMatcher: /^\.[\\/](?:(components|features)(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,    req: require.context("..", true, /^\.[\\/](?:(components|features)(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/),  },];declare global {  var view: ReturnType<typeof start>;  var STORIES: typeof normalizedStories;}const annotations = [  require("./preview"),  require("@storybook/react-native/preview"),  require("@storybook/addon-ondevice-actions/preview"),];global.STORIES = normalizedStories;module?.hot?.accept?.();const options = { playFn: false };if (!global.view) {  global.view = start({ annotations, storyEntries: normalizedStories, options });} else {  updateView(global.view, annotations, normalizedStories, options);}export const view = global.view;.storybook/index.tsimport AsyncStorage from "@react-native-async-storage/async-storage";import { registerRootComponent } from "expo";import { view } from "./storybook.requires";const StorybookUIRoot = view.getStorybookUI({  storage: {    getItem: AsyncStorage.getItem,    setItem: AsyncStorage.setItem,  },  shouldPersistSelection: true,  enableWebsockets: false,});registerRootComponent(StorybookUIRoot);export default StorybookUIRoot;動作確認Storybook 起動コマンドを実行すると、以下のように動作確認できる。youtu.beまとめexpo-router 対応アプリに Storybook v8 を導入する方法を紹介エントリーポイントを環境変数で切り替えることで、通常アプリと Storybook を両立可能現状のディレクトリ構成に合わせた Storybook 設定も紹介プロジェクトに合わせて設定や適用範囲は柔軟に調整することを推奨

expo-routerを使ったアプリでstorybook v8を導入

expo-router に移行した際に、モー遷移を導入したので実装内容を共有する。PRgithub.com背景expo-router による通常の画面遷移では、以下の画像のように左側から新しい画面がPushされる形式になる。この形式だと、画面下部に配置されたボタンを押した際の遷移としてはやや違和感がある。そのため、Expo公式のドキュメントを参考にしながら、モーダル遷移に修正を加えた。docs.expo.devディレクトリ構成とルーティングexpo-router はファイルベースのルーティング方式を採用しており、ファイルの配置によって画面の構造を表現する。modal.tsx というファイル名で以下のように配置する。./app└── (app)      ├── index.tsx      ├── _layout.tsx      ├── modal.tsx   # ← モーダル画面      ├── items      ├── login      ├── memoirモーダル画面の実装modal.tsx の実装内容は以下の通り。■app/(app)/modal.tsx/modal.tsx)import FocusAwareStatusBar from "@/components/layouts/FocusAwareStatusBar";import theme from "@/config/theme";import Page from "@/features/memoir/components";import React from "react";/** * モーダル画面のルートコンポーネント */export default function ModalScreen() {  return (    <>      <FocusAwareStatusBar        backgroundColor={theme().color.primary.main}        style="light"      />      <Page />    </>  );}※FocusAwareStatusBar はステータスバーの色を制御するコンポーネント遷移元の画面の修正モーダル遷移を呼び出す側では、router.push() の pathname を /modal に変更する。■features/home/components/Connected.tsxconst onMemoir = useCallback(() => {  const startDate = dayjs()    .add(-6, "day")    .format("YYYY-MM-DDT00:00:00+09:00");  const endDate = dayjs().format("YYYY-MM-DDT00:00:00+09:00");  router.push({    pathname: "/modal",   // ← モーダルへの遷移に修正    params: {      startDate,      endDate,    },  });}, [router]);完成イメージexpo-routerでのmodalの設計が特殊なので、移行時には注意が必要。

Expoアプリ最新化③: expo-routerでmodalを使用してみる

概要以前はexpo/sentry-expoを使用していたが、Expo SDK 50以降で非推奨となった。現在は@sentry/react-nativeを使用する必要があるため、その手順を整理。PRgithub.comgithub.com実装ローカル起動時の実装以下の公式手順に従って@sentry/react-nativeを導入。公式ドキュメントまず以下のコマンドを実行。npx @sentry/wizard@latest -i reactNativeコマンド実行中にSentryとの接続が行われ、初期設定が自動で完了。以下のコードが追加される。環境変数への置き換えも実施。初期化コードapp/_layout.tsxconst navigationIntegration = Sentry.reactNavigationIntegration({  enableTimeToInitialDisplay: !isRunningInExpoGo(),});Sentry.init({  dsn: Constants.expoConfig?.extra?.SENTRY_DSN,  debug: Constants.expoConfig?.extra?.APP_ENV !== "production",  tracesSampleRate: 1.0,  integrations: [navigationIntegration],  enableNativeFramesTracking: !isRunningInExpoGo(),});export default Sentry.wrap(function Root() {  ... // AppProviderなどのラップ});metro.config.jsconst { getSentryExpoConfig } = require("@sentry/react-native/metro");const config = getSentryExpoConfig(__dirname);module.exports = config;この状態でローカル環境ではSentryが動作可能。起動してエラーを発生させるとSentryに通知される。詳細にはエラー箇所も表示される。EAS Build時の実装そのままEAS Buildを実行するとエラーが発生するため、必要な修正を行った。SENTRY_AUTH_TOKENの追加EAS Build時にはSENTRY_AUTH_TOKENが必要。環境変数に追加しておく。トークンの作成方法app.config.tsplugins: [  ...,  [    "@sentry/react-native/expo",    {      organization: process.env.SENTRY_ORGANIZATION,      project: process.env.SENTRY_PROJECT,      url: "https://sentry.io/",      note: "Use SENTRY_AUTH_TOKEN env to authenticate with Sentry.",    },  ],],Android Build時のexpo.core.ExpoModulesPackageエラーpnpm環境でのみ発生するバグ。以下を参考に修正。github.compackage.json"expo-modules-autolinking": "*"ローカルEAS Build時のalias関連エラーローカルでEAS Buildを実行した際に以下のエラーが出る。Cannot find module 'babel-plugin-module-resolver'原因はbabelのaliasが無効になること。github.compackage.json"babel-plugin-module-resolver": "^4.1.0"babel.config.jsmodule.exports = function (api) {  api.cache(true);  return {    presets: ["babel-preset-expo"],    plugins: [      [        "module-resolver",        {          root: ["./"],          alias: {            "@": "./",          },        },      ],    ],  };};まとめ以上の対応でローカルとEAS Buildの両方でSentryを導入可能となった。本番ビルドの動作検証後、問題がなければ最新版としてリリース予定。

Expo SDK 52でSentry導入

1年半放置したExpo製アプリを最新化してみた

過去にExpoでGoogleログインを実装したが、Expo SDK52では実装方法が変わっていたため、改めて記事にまとめる。www.wheatandcat.mePRgithub.com実装使用するライブラリ前回の実装からの移行方法を記載する。元の実装については以下の記事を参照。www.wheatandcat.meExpo SDK48の時点ではexpo-auth-sessionにexpo-auth-session/providers/googleが存在し、それを使用していた。docs.expo.dev現在、この実装方法は廃止され、@react-native-google-signin/google-signinを使用した方法が推奨されている。react-native-google-signin.github.ioフィンガープリントの設定ローカル環境のSHA-1は以下のコマンドで取得可能。$ cd android$ ./gradlew signingReport出力の中にあるAlias: androiddebugkeyのSHA1の値を確認し、FirebaseのプロジェクトのAndroidアプリに設定する。設定を誤ると、認証時に以下のエラーが発生する。[com.google.android.gms.common.api.ApiException: DEVELOPER_ERROR]コードの実装初期設定以下のコードでGoogle Sign-Inの初期設定を行う。webClientIdにはFirebaseコンソールのAuthentication→ログイン方法→Googleを選択すると表示されるウェブ クライアント IDを設定。■ hooks/useFirebaseAuth.tsx  useEffect(() => {    GoogleSignin.configure({      webClientId: Constants.expoConfig?.extra?.WEB_GOOGLE_CLIENT_ID,      offlineAccess: true,    });  }, []);Googleログインの実装以下のコードでGoogleログインを行い、認証情報を取得する。■ hooks/useFirebaseAuth.tsx  const onGoogleLogin = useCallback(async () => {    try {      const response = await GoogleSignin.signIn();      const googleCredential = GoogleAuthProvider.credential(        response.data.idToken,      );      firebaseLogin(googleCredential);    } catch (e) {      console.log("error:", e);      Alert.alert("ログインに失敗しました");      errorCallback?.();    }  }, [firebaseLogin, errorCallback]);動作確認実装後、以下のように動作する。

Expoアプリ最新化②:Expo SDK52でGoogleログインを実装

概要過去に開発していたmemoirを、最新のコードベースにリニューアル中。その途中経過をまとめる。github.comアプリはExpoで開発。最新化に伴い以下を修正中。Expo SDK 48 → 52にバージョンアップナビゲーションをReact Navigation → expo-routerに移行ディレクトリ構造をAtomic Design → Feature型に変更Linter & FormatterをESLint & Prettier → Biomeに移行PRgithub.com最初に試したことExpoのバージョンアップは以下のコマンドで可能。$ npx expo install expo@latestこれでバージョンアップを試みたが、EAS Buildが通らなかった。docs.expo.devEAS Buildが通らないとデバッグができないため、一時的にeas.jsonを削除してExpo Goで起動できるように対応を進めた。Expo Goでは問題なく起動したため、コードの最新化を兼ねてまずexpo-routerへの移行から実装を開始。expo-routerとはdocs.expo.devExpo Routerは、React Navigationを基盤にしたExpo向けのナビゲーションライブラリで、Next.jsのようなファイルベースのルーティングシステムを採用。基本的なディレクトリ構造は以下の通り。./app  ├── _layout.tsx  // 画面全体の共通処理  ├── index.tsx  // ホーム画面  ├── items  │   └── [id].tsx  // アイテム詳細画面（URLパラメータ対応）  ├── my-page  │   ├── index.tsx  // マイページ画面  │   └── update-profile  // プロフィール更新画面  └── search      └── index.tsx // 検索画面実装認証周りの実装expo-routerでは、認証関連の構造もファイルベースで以下のように表現可能。./app├── (app)│   ├── _layout.tsx // ログイン後の共通処理│   ├── index.tsx  // ログイン後のTOP画面│   ├── items│   ├── login│   ├── memoir│   ├── my-page│   ├── search│   └── setting├── _layout.tsx└── sign-in.tsx  // ログイン画面以下に各ファイルを示す。app/_layout.tsximport { SessionProvider } from "@/ctx";import makeApolloClient from "@/lib/apollo";import { ApolloProvider } from "@apollo/client";import { ActionSheetProvider } from "@expo/react-native-action-sheet";import { Slot } from "expo-router";import { RecoilRoot } from "recoil";export default function Root() {  const client = makeApolloClient();  return (    <ActionSheetProvider>      <ApolloProvider client={client}>        <RecoilRoot>          <SessionProvider>            <Slot />          </SessionProvider>        </RecoilRoot>      </ApolloProvider>    </ActionSheetProvider>  );}app/sign-in.tsximport Page from "@/features/top/components/Connected";import useUser from "@/hooks/useUser";import { NotoSansJP_700Bold } from "@expo-google-fonts/noto-sans-jp";import { RobotoCondensed_700Bold } from "@expo-google-fonts/roboto-condensed";import * as Font from "expo-font";import { useCallback, useState } from "react";export default function SignIn() {  const { user, onSaveWhenNotLogin } = useUser();  const [create, setCreate] = useState(false);  const onSkip = useCallback(() => {    setCreate(true);    onSaveWhenNotLogin();  }, [onSaveWhenNotLogin]);  const [fontsLoaded] = Font.useFonts({    "RobotoCondensed-Bold": RobotoCondensed_700Bold,    "NotoSansJP-Bold": NotoSansJP_700Bold,  });  if (!fontsLoaded) {    return null;  }  return (    <Page      onSkip={onSkip}      setCreate={setCreate}      create={create}      isExistUser={!!user.id}    />  );}app/(app)/_layout.tsx/_layout.tsx)import { useSession } from "@/ctx";import { Redirect, Stack } from "expo-router";import { Text } from "react-native";export default function AppLayout() {  const { session, isLoading } = useSession();  if (isLoading) {    return <Text>Loading...</Text>;  }  if (!session) {    return <Redirect href="/sign-in" />;  // 未ログイン時にリダイレクト  }  return <Stack />;}URLパラメータ、GETパラメータの取得memoirでは、アイテム詳細画面を以下のように設定。./app└── (app)    └── items        └── [id].tsxアイテム詳細画面では、URLパラメータid以外にも、dateを画面に渡す仕様。以下のコードで遷移先を指定。features/home/components/Connected.tsxconst onItem = useCallback(  (itemID: string) => {    const date = dayjs(homeDate.date).format("YYYY-MM-DD");    router.push({      pathname: `/items/${itemID}`,      params: {        date,      },    });  },  [router, homeDate.date],);以下でパラメータを受け取る。features/items/components/index.tsximport { useLocalSearchParams } from "expo-router";import type { FC } from "react";import { memo } from "react";import Connected from "./Connected";const ItemDetail: FC = () => {  const { id, date } = useLocalSearchParams<{ id: string; date: string }>();  return <Connected date={date} itemID={id} />;};export default memo(ItemDetail);まとめここまでの移行作業により、大半の画面は以下の画像のように移行が完了。残作業として以下を進行予定。EAS Buildの復活Googleログインの移行Deep Linkの実装Expoは便利だが、最新化を怠るとデバッグもできなくなるため、継続的な対応が必要だと感じた。

Expoアプリ最新化①：SDKアップデートとexpo-routerへの移行

前回の記事では、バーコードを用いて商品画像を取得する機能を実装したが、以下の課題が浮上した。バーコードから商品情報を取得できないケースがあるバーコードが外箱に記載されており、画像から取得が困難な場合があるこれらの課題を解決するため、OCR（Optical Character Recognition）を活用し、画像から商品情報を取得する方法を試した。PRgithub.comOCRとはOCRは、画像やスキャンされた文書に含まれる文字を認識し、それをテキストデータとしてデジタル化する技術。今回の実装では、OCRで商品画像から文字情報を取得し、それを基に商品を特定する。使用するライブラリ & サービスgoogle_mlkit_text_recognition画像から文字列を抽出Cloud Natural Language | Google CloudOCRで取得したテキストから商品名を抽出Yahoo!ショッピングAPI抽出したキーワードで商品情報を取得実装詳細1. OCRで画像から文字を抽出■dart/app/lib/utils/image_mobile.dartimport 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';import 'dart:io';Future<List<String>> imageTextRecognizer(File image) async {   final inputImage = InputImage.fromFile(image);  final textRecognizer = TextRecognizer(script: TextRecognitionScript.japanese);  final RecognizedText recognizedText =      await textRecognizer.processImage(inputImage);  final texts = recognizedText.blocks      .map((block) => block.text.replaceAll('\n', ' '))      .where((text) => text.length > 1 && !RegExp(r'^\d+$').hasMatch(text))      .toList();  return texts;}このコードは画像内の文字列を抽出する。例えば、以下の画像をOCRに通すと次のような文字列が得られる。実装的には画像の情報をtextRecognizer.processImageに渡してあげればOK。■抽出結果：[  "38%",  "\\売上/",  "No.",  "※インテージSRI+",  "一般用ウェッ外ティッシ",  "累計販売金額",  "207年\\月20B",  "▲ここまで引っぱってご使用ください。",  "シルコット",  "ウェットティッシュ",  "、純水99%",  "手·口まわりの汚れに",  "メイク時の手指の拭き取りに デ",  "コアウォーター",  "ノンアルコール"]OCRは文字をある程度の精度で認識するが、完全ではない。このため、追加の処理を加える必要がある。2. 抽出文字列から商品名を特定Cloud Natural Languageを使用cloud.google.comGoogle Cloud Natural Languageの「エンティティ分析」を使ってテキストを解析し、商品名を自動抽出する。■typescript/backend/src/lib/analyzeText.tsimport { LanguageServiceClient } from '@google-cloud/language'export const analyzeText = async (text: string) => {  const client = new LanguageServiceClient()  const document = {    content: text,    type: 'PLAIN_TEXT' as const,  }  const [result] = await client.analyzeEntities({ document })  const { entities } = result  const entityList = entities.filter(    (entity) => entity.type === 'CONSUMER_GOOD'  )  const topEntities = entityList    .sort((a, b) => b.salience - a.salience)    .slice(0, 3)    .map((entity) => entity.name)  if (topEntities.length === 0) {    return {      productNames: entities.slice(0, 3).map((entity) => entity.name),      extractedWords: [],    }  }  // 抽出して単語を全て取得  const extractedWords = entities    .map((entity) => entity.name)    .filter((name) => !topEntities.includes(name))  return {    productNames: topEntities,    extractedWords,  }}この実装では、テキストから商品名（CONSUMER_GOOD）を抽出する。ただし、OCRの精度やフォントの影響で期待した商品名が抽出できない場合があるため、ユーザーの手動選択を組み合わせた機能も用意した。3. 商品検索の自動・手動連携自動検索の結果OCRとCloud Natural Languageを組み合わせ、Yahoo!ショッピングAPIで商品情報を取得する。例えば、「ウェットティッシュ」で検索すると以下の結果が得られる。取得できた値を返してアプリに表示させると以下のように表示される手動検索機能手動で商品名を修正できるUIを追加した。以下の流れで操作する。1.「テキストで検索」ボタンを押下2.抽出されたテキスト一覧から商品名を選択または修正3.検索ボタンをタッチ例えば、OCRが「キャノーノーラ油」と認識した場合、ユーザーが正しい商品名「キャノーラ油」に修正することで適切な結果を取得できる。実装結果と課題この新しい仕組みで約8割の商品画像を自動登録可能となった。一方で以下の課題が残っている。フォントやデザインの影響でOCRの精度が低下する場合がある商品画像が鮮明でない場合に認識精度が低下自動抽出の精度向上が必要実際の動作例実際の動作は以下の動画で確認できる。www.youtube.comまとめこの仕組みにより、在庫管理アプリが大幅に使いやすくなった。今後はOCR精度の向上や、さらに効率的な商品検索アルゴリズムの開発を検討している。

【flutter】商品画像取得の実装改善：OCRを活用した新たなアプローチ

アプリの画面数が増えると、ホットリロードが効かない画面が出てきてUI改修が難しくなることがある。その対策として、Flutter版StorybookであるWidgetbookを導入した。以下にその実装内容をまとめる。導入したPR実際の変更内容は以下のPRを参照。github.comgithub.comWidgetbookとはWidgetbookはFlutterでUIカタログを作成するためのツール。UIコンポーネントの状態を簡単に切り替えながら確認できる。詳細は公式サイトを参照。www.widgetbook.io実装初期セットアップ公式のクイックスタートガイドを参考に導入を進めた。docs.widgetbook.ioコマンドを実行すると、以下のようなフォルダ構成が生成される。app/└── widgetbook     ├── README.md     ├── analysis_options.yaml     ├── android     ├── build     ├── ios     ├── lib     ├── linux     ├── macos     ├── pubspec.lock     ├── pubspec.yaml     ├── web     ├── widgetbook.iml     └── windowsコンポーネントの追加自作のButtonコンポーネントをWidgetbookに追加するため、以下のコードを作成。■ dart/app/widgetbook/lib/button.dart/lib/button.dartimport 'package:flutter/material.dart';import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;// Import the widget from your appimport 'package:stockkeeper/components/button/button.dart';  // ← ここが自作のButtonコンポーネント@widgetbook.UseCase(name: 'Default', type: Button)Widget buildCoolButtonUseCase(BuildContext context) {  return Button(title: 'Hello', onPressed: () {});}コード生成以下のコマンドを実行し、Widgetbook用のコードを生成する。$ dart run build_runner build -dこれにより、widgetbook/lib/main.directories.g.dartが自動生成される。動作確認widgetbook/lib/main.goをVSCodeで開き、F5キーを押してデバッグを実行する。Chromeが起動し、以下のようにUIカタログが表示される。Providerを使ったMock対応アプリでProviderを使用している場合、WidgetbookでもMockを作成して対応可能。公式ガイドを参考に実装した。docs.widgetbook.io以下は、ProviderをMockしてコンポーネントを表示する例。■ dart/app/widgetbook/lib/components/item/input.dartimport 'package:flutter/material.dart';import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;import 'package:stockkeeper/components/item/input.dart';import 'package:mocktail/mocktail.dart';import 'package:graphql_flutter/graphql_flutter.dart';import 'package:hooks_riverpod/hooks_riverpod.dart';import 'package:stockkeeper/providers/graphql.dart';// Mockクラスの作成class FakeQueryOptions extends Fake implements QueryOptions {}class MockGraphQLClient extends Mock implements GraphQLClient {}@widgetbook.UseCase(name: 'Default', type: Input)Widget buildInputUseCase(BuildContext context) {  final mockGraphQLClient = MockGraphQLClient();  // ←ProviderのMockを作成して  when(() => mockGraphQLClient.query(any())).thenAnswer(    (_) async => QueryResult(        options: QueryOptions(document: gql('')),        source: QueryResultSource.network,        data: null),  );  return ProviderScope(    overrides: [graphqlClientProvider.overrideWithValue(mockGraphQLClient)], // ←Providerを設定    child: Input(      onPressed: (item) {},      loading: false,    ),  );}導入の効果各コンポーネントの状態をサイドメニューから簡単に切り替え可能UI改修の効率が向上Providerを使用したコンポーネントもMockで柔軟に対応可能Widgetbookの導入により、FlutterアプリのUI開発が効率化された。画面数が多いプロジェクトでは、UIカタログを用いた開発が特に有効だと感じた。

Widgetbookを導入してみた

Firebase App Checkを実装したので紹介

ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする

最近読んだ技術書を簡単紹介

作成中のFlutterアプリの中間発表

Firebase App Checkへの対応について、PRgithub.comgithub.com実装Firebase App Checkを実装firebase.google.comFirebase App Checkを実装するとiOSではApp AttestとDeviceCheck、AndroidではPlay Integrityで正常に端末からアクセスされているかを判定できるFlutterでApp Checkを使用するには、まず* firebase_app_check**パッケージを導入するpub.dev次にアプリ側に以下のコードを追加■dart/app/lib/main.dart  final appEnv = dotenv.env['APP_ENV'];  await FirebaseAppCheck.instance.activate(    // Androidの場合はApp Distributionを使用する Play Integrityの認証が成功しないのでdebugの方で実装    androidProvider: appEnv == 'production'        ? AndroidProvider.playIntegrity        : AndroidProvider.debug,    appleProvider:        kReleaseMode ? AppleProvider.deviceCheck : AppleProvider.debug,  );Firebase App Distributionでテスト用のアプリを配信している場合は、aabで配信していても通常のPlay Store経由でインストールされたと認識されず、認証時にエラーが発生してしまうため、AndroidProvider.debugを使用して認証するように実装今回はアプリで取得したApp Checkトークンによって、認証された端末以外からのAPIアクセスを禁止するようにした。バックエンドでApp Checkトークンの認証を行う方法は以下のとおりまず、アプリ側でApp Checkのトークンを発行し、APIのHeaderに設定■dart/app/lib/utils/graphql.dart  // App Checkトークンを設定するAuthLink  final AuthLink appCheckAuthLink = AuthLink(    getToken: () async {      final appCheckToken = await getAppCheckToken();      return appCheckToken;    },    headerKey: 'X-Firebase-AppCheck', // App Check用  );  final link = authLink.concat(appCheckAuthLink).concat(httpLink);getAppCheckToken関数は以下の通り。App Checkトークンは1時間有効なので、キャッシュして利用■ dart/app/lib/utils/graphql.dartFuture<String?> getAppCheckToken() async {  const tokenKey = 'appCheckToken';  const tokenTimeKey = 'tokenFetchTime';  try {    final cachedAppCheckToken = await secureStorage.read(key: tokenKey);    final tokenFetchTimeString = await secureStorage.read(key: tokenTimeKey);    if (cachedAppCheckToken != null && tokenFetchTimeString != null) {      final tokenFetchTime = DateTime.parse(tokenFetchTimeString);      final currentTime = DateTime.now();      final difference = currentTime.difference(tokenFetchTime);      if (difference.inHours < 1) {        return cachedAppCheckToken;      }    }    final appCheckToken = await FirebaseAppCheck.instance.getToken(); // ←ここでApp Checkのトークンを取得    if (appCheckToken != null) {      await secureStorage.write(key: tokenKey, value: appCheckToken);      await secureStorage.write(          key: tokenTimeKey, value: DateTime.now().toIso8601String());      return appCheckToken;    }  } catch (e) {    print('Error fetching App Check token: $e');  }  return "";}この実装により、APIアクセス時にHeaderのX-Firebase-AppCheckにApp Checkトークンが設定されるバックエンドでは、上記で渡されたX-Firebase-AppCheckデータを以下のコードで認証■typescript/backend/src/common/guards/auth/auth.guard.ts    if (this.configService.get('NODE_ENV') === 'production') {      const appCheckToken = request.headers['x-firebase-appcheck']      if (!appCheckToken) {        throw new Error('App Check token not found')      }      try {        await getAppCheck().verifyToken(appCheckToken)      } catch (e) {        console.log('error', e)        throw new Error('Unauthorized (App Check)')      }    }この実装により、APIアクセス時にApp Checkトークンが存在しない場合はエラーが表示されるただし、上記の実装だけでは、実機からのアクセスおよび正式にストアからインストールされたアプリ以外ではAPIが実行できなくなる。開発時にはApp Checkのデバッグトークンを使用して認証を行う。iOSでデバッグトークンを取得する方法は、Flutter アプリをXcodeで起動 Firebase App Check Debug Token: *****が出力されるこれをFirebaseのコンソールから App Checkのデバッグトークンを登録すれば認証が可能Android + エミュレータ機能の場合もほぼ同じ。ローカルでアプリが起動するとログにEnter this debug secret into the allow list in the Firebase Console for your project: *****が出力されるこれをFirebaseコンソールで登録することで、認証が可能になる。最後に、Firebase App DistributionでAndroidアプリを配布した場合も同様で、Play Store経由でインストールされていないため、Play Integrityの認証が通らず、デバッグトークンが必要になる以下の手順で取得できる - 1.  Firebase App DistributionでAndroidアプリを実機でインストール - 2. PCと Androidの実機をUSBケーブルで接続 - 3. PCのターミナルで以下のコマンドを実行して、Androidのログを出力させる$ adb logcat | grep "Firebase Console for your project"これでエミュレータと同様にEnter this debug secret into the allow list in the Firebase Console for your project: *****の値が出力される。この値をFirebaseのコンソールから App Checkのデバッグトークンとして登録することで認証が可能これでApp Checkの認証およびデバッグ時の実装が完了した

FlutterでFirebase App Checkに対応（+Firebase App Distributionで配信時の対応）

引越しをしていて間が空いてしまったが、次から通常の更新頻度に戻る予定在庫管理アプリの開発で商品の画像取得に商品検索（v3） - Yahoo!デベロッパーネットワークのAPIを使ってみたので紹介PRgithub.comgithub.com実装実装のイメージは以下の通り - アプリでバーコード読み取り画面を実装 - バーコードのJANコードをbackendに渡して、商品検索（v3）APIで商品の情報を取得まずはbackendの実装。JANコードから商品情報の取得はYahooが提供している以下のAPIから取得可能。developer.yahoo.co.jpAPIは簡単でような感じで商品情報を取得できるcurl --location 'https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=*****&jan_code=4901777062702&image_size=300'※appidの部分は自分のアカウントのアプリケーションのClient IDを設定レスポンスは以下みたいに返ってくる上記のAPIを使用して以下のPRでbackendのAPIを作成github.com次にアプリ側の実装。バーコードをスキャンしてJANコードを取得するためにmobile_scannerを使用pub.dev実装は以下の通り■ dart/app/lib/features/item/new/components/barcodeScannerScreen.dartimport 'package:mobile_scanner/mobile_scanner.dart';（略）  @override  Widget build(BuildContext context) {    final cameraController = useMemoized(() => MobileScannerController());    // アニメーションコントローラを定義（ここでは3秒でスキャンラインが1サイクル）    final animationController = useAnimationController(      duration: const Duration(seconds: 2),    )..repeat(reverse: true); // 繰り返しアニメーションを実行    return Scaffold(      appBar: const CommonAppBar(title: ""),      body: Stack(        children: [          // カメラでのバーコード読み取り          MobileScanner(            controller: cameraController,            onDetect: onScan,  // バーコードを読み込んだ時に、onScanを実行          ),■dart/app/lib/app/items/new/page.dartvoid> onScan(BarcodeCapture capture) async {      final List<Barcode> barcodes = capture.barcodes;      final value = barcodes.first.rawValue;      if (value != null && barcodes.first.format == BarcodeFormat.ean13) {        final String code = value;        print('Scanned JAN code: $code');  // ここでスキャンしたバーコード情報からJANコードを取得できる        final result = await client.query<Query$ItemFromQR>(QueryOptions(            document: documentNodeQueryItemFromQR,            variables: {'janCode': code}));        if (result.hasException) {          debugPrint(result.exception.toString());          scan.value = true;          return;        }        defaultValue.value = InputItem(          name: result.data!['itemFromQR']['name'],          imageURL: result.data!['itemFromQR']['imageURL'],          stock: 0,          order: 0,        );        scan.value = true;      }    }上記でバーコードからJANコードを読み込んで商品情報が取得できるようになったこのままだとカメラ起動時にバーコードを読み取らせている感が薄かったので、ChatGPTにアニメーションを作らせて以下のコードになった■ dart/app/lib/features/item/new/components/barcodeScannerScreen.dartimport 'package:flutter/material.dart';import 'package:flutter_hooks/flutter_hooks.dart';import 'package:mobile_scanner/mobile_scanner.dart';import 'package:stockkeeper/components/appBar/common.dart';class BarcodeScannerScreen extends HookWidget {  final Future<void> Function(BarcodeCapture capture) onScan;  const BarcodeScannerScreen({    super.key,    required this.onScan,  });  @override  Widget build(BuildContext context) {    final cameraController = useMemoized(() => MobileScannerController());    // アニメーションコントローラを定義（ここでは3秒でスキャンラインが1サイクル）    final animationController = useAnimationController(      duration: const Duration(seconds: 2),    )..repeat(reverse: true); // 繰り返しアニメーションを実行    return Scaffold(      appBar: const CommonAppBar(title: ""),      body: Stack(        children: [          // カメラでのバーコード読み取り          MobileScanner(            controller: cameraController,            onDetect: onScan,          ),          // スキャンエリアのオーバーレイ          CustomPaint(            size: MediaQuery.of(context).size,            painter: ScannerOverlay(),          ),          // スキャンラインのアニメーション          AnimatedBuilder(            animation: animationController,            builder: (context, child) {              // アニメーションの進行に基づいてスキャンラインの位置を計算              final position = animationController.value * 300; // 0から300まで移動              return Positioned(                top: MediaQuery.of(context).size.height * 0.22 + position,                left: 40,                right: 40,                child: child!,              );            },            child: Container(              height: 2,              color: Colors.redAccent,            ),          ),        ],      ),    );  }}class ScannerOverlay extends CustomPainter {  @override  void paint(Canvas canvas, Size size) {    final paint = Paint()      ..color = Colors.black.withOpacity(0.5)      ..style = PaintingStyle.fill;    // スクリーン全体を半透明で塗りつぶす    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);    // スキャンエリア（中央部分の透明な四角形）    paint.color = Colors.transparent;    final scanRect = Rect.fromLTWH(40, size.height / 4, size.width - 80, 300);    canvas.drawRect(scanRect, paint);    // スキャンエリアの枠線を描く    final borderPaint = Paint()      ..color = Colors.white      ..strokeWidth = 3      ..style = PaintingStyle.stroke;    canvas.drawRect(scanRect, borderPaint);  }  @override  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;}これらを実装して以下みたいな動作が完成www.youtube.com

バーコード読み込んで商品画像を取得する機能を実装

開発中のアプリでデータ共有で招待QRコードを発行して、スキャンでゲストログインできる仕組みを実装したので記事化PRgithub.com実装の概要backend/アプリのゲストログインの実装ゲストユーザーログインのトークンを発行してHeaderに設定して認証するミドルウェアを実装QRコード作成/スキャンQRコード作成: qr_flutterQRコードスキャン: mobile_scannerQRコードをスキャンした時にアプリに指定の動作をさせるiOS: ユニバーサルリンクAndroid: アプリリンク上記のリンクからアプリを起動するためのURLスキーム設定: go_routerユニバーサルリンク/アプリリンクについては前回の記事で紹介している実装まず、backendのゲストログインの実装詳しいtable設計は省略するが、以下のように認証のコードを修正■ typescript/backend/src/common/guards/auth/auth.guard.ts    const authorization = request.headers.authorization    if (!authorization) {      throw new Error('Authorization header not found')    }    if (authorization?.startsWith('Bearer ')) {      const token = authorization.split('Bearer ')[1]      const result = await admin.auth().verifyIdToken(token)      const user = await this.prisma.user.findFirst({        where: {          uid: result.uid,        },      })      if (!user) {        throw new Error('User not found')      }      request.auth = {        guest: false,        uid: user.uid,        userId: user.id,        user: user,      } as Auth    } else if (authorization?.startsWith('Guest ')) {      const guestUid = authorization.split('Guest ')[1]      const guest = await this.prisma.guest.findFirst({        where: {          uid: guestUid,        },      })      if (!guest) {        throw new Error('Guest not found')      }      const user = await this.prisma.user.findFirst({        where: {          id: guest.userId,        },      })      if (!user) {        throw new Error('User not found')      }      request.auth = {        guest: true,        guestUId: guestUid,        uid: user.uid,        userId: user.id,        user: user,      } as Auth    }HeaderのAuthorizationの値がBearer xxxxxxの場合はFirebaseで認証、Guest xxxxxxの場合はゲストログインとして自前のdbと検索して認証を行い、招待されたユーザーのデータをAPI上で参照できるようにする。この仕組みを作った上で次にアプリを実装アプリでは招待する側は招待用のQRコードを qr_flutterを使用して生成pub.devコードは以下のように実装■dart/app/lib/features/category/components/share/bottomSheet.dart    final inviteURL =        "https://stock-keeper-review.web.app/guest/login/${code.value}";    return Padding(        padding: const EdgeInsets.only(            top: Spacing.md,            bottom: Spacing.xl,            left: Spacing.md,            right: Spacing.md),           （省略）                    child: loading                        ? const Progress(                            color: AppColors.textDark,                          )                        : QrImageView(                            data: inviteURL,  // ← dataにURLを設定                            version: QrVersions.auto,                            size: 125.0,                          ),                  )),QrImageViewのdataには前回の記事で紹介したユニバーサルリンク/アプリリンクの設定をしたURLを指定go_routerで上記のURLを指定した時にゲストログインの画面に遷移できるように修正■dart/app/lib/main.dartfinal goRouter = GoRouter(  initialLocation: '/',  routes: [    GoRoute(        path: '/',        name: "home",        pageBuilder: (context, state) {          return MaterialPage(key: state.pageKey, child: const AuthWrapper());        },        routes: [          GoRoute(            path: "guest/login/:code",  // ← ゲストログインできる画面            name: "guest_login",            pageBuilder: (context, state) {              final code = state.pathParameters['code']!;              return BottomSheetPage(builder: (_) => ShareBottomSheet(code: code));            },          ),この実装でアプリでQRコードスキャンアプリでスキャンした時にゲストログイン動作の実装は完了www.youtube.com最後にアプリ内にも招待QRコードのスキャンの画面を実装してアプリ内からもゲストログインを可能にするflutterでQRコードのスキャンは mobile_scannerを使用pub.devコードは以下のように実装■dart/app/lib/features/login/components/bottomSheet.dartvoid onScan(BarcodeCapture capture) {      final List<Barcode> barcodes = capture.barcodes;      final value = barcodes.first.rawValue; // valueでQRコードの値を取得      // 省略    }    return Padding(      padding: const EdgeInsets.only(          top: Spacing.md,          bottom: Spacing.xl,          left: Spacing.md,          right: Spacing.md),          （省略）                      child: SizedBox(                          height: 200,                          width: 200,                          child: MobileScanner(                            controller: MobileScannerController(                              detectionSpeed: DetectionSpeed                                  .noDuplicates, // 同じ QR コードを連続でスキャンさせない                            ),                            onDetect: onScan,  // ← ここがQRコードスキャンのハンドラー                          )),この実装でアプリ内でQRコードをスキャンした時にゲストログイン動作の実装も完了www.youtube.com最後現状の実装だとゲストログインのセキュリティが甘いので、最終的にはFirebase App Checkまで実装して機能的には完成の予定firebase.google.com

QRコードでゲストログインの機能を実装

QRコードからのゲストログインの機能を作成中。PRgithub.comgithub.com実装ユニバーサルリンクは以下の記事を参考に実装zenn.devまず、URLとアプリの紐づけが必要なので、今回はFirebase Hostingで実装以下のコマンドでFirebase Hostringの初期設定をする$ firebase init hostingiOS実装iOSのユニバーサルリンクは指定のhostの.well-known/apple-app-site-associationに以下のファイルを設置する必要があるので、Firebase Hostringのフォルダに以下のファイルを作成■ typescript/appLink/public/.well-known/apple-app-site-association{  "applinks": {    "apps": [],    "details": [      {        "appID": "7KWTGL2ZDY.com.unicorn.stockkeeper",        "paths": [          "*"        ]      }    ]  }}appIDはteam idとbundle idで指定XcodeでRunner/Info.plistを開いてFlutterDeepLinkingEnabled: Yesで追加XcodeでSigning & Capabilitiesを開いてAssociated Domainsにapplinks:対象のURLのhostを設定Androidの実装AndroidのApp Linksは指定のhostの.well-known/assetlinks.jsonに以下のファイルを設置する必要があるので、Firebase Hostringのフォルダに以下のファイルを作成■typescript/appLink/public/.well-known/assetlinks.json[  {    "relation": ["delegate_permission/common.handle_all_urls"],    "target": {      "namespace": "android_app",      "package_name": "com.unicorn.stockkeeper",      "sha256_cert_fingerprints": [        "B7:FA:3A:2D:DA:29:22:6B:FF:02:40:55:69:E8:6D:8D:54:40:89:CE:69:8C:E6:E3:7C:FF:1B:9B:8E:82:EF:A8"      ]    }  }]android/app/src/main/AndroidManifest.xmlに以下を追加■dart/app/android/app/src/main/AndroidManifest.xml            <intent-filter android:autoVerify="true">                <action android:name="android.intent.action.VIEW" />                <category android:name="android.intent.category.DEFAULT" />                <category android:name="android.intent.category.BROWSABLE" />                <data android:scheme="http" android:host="stock-keeper-review.web.app" />                <data android:scheme="https" />            </intent-filter>android:hostに対象のURLのhostを設定Firebase Hostingのデプロイ上記の修正ができたら以下のコマンドでFirebase Hostringをデプロイ$ firebase deploy --only hosting以下のコマンドで検証可能■ iOSで検証$ xcrun simctl openurl booted "https://stock-keeper-review.web.app"■ Androidで検証$ adb shell 'am start -a android.intent.action.VIEW \    -c android.intent.category.BROWSABLE \    -d "https://stock-keeper-review.web.app"' \    com.unicorn.stockkeeperユニバーサルリンクで特定の画面に遷移URLで特定の画面遷移はNavigatorよりもgo_routerの方が実装しやすいので、以下のPRで移行github.com移行後は単純に以下のコマンドのようにURLにgo_routerで設定したpathを指定すればOK$ adb shell 'am start -a android.intent.action.VIEW \    -c android.intent.category.BROWSABLE \    -d "https://stock-keeper-review.web.app/cart"' \    com.unicorn.stockkeeper

Flutterでユニバーサルリンクを実装して特定の画面に遷移させる

前回、GitHub ActionsでiOSアプリをビルドしてFirebase App Distribution にデプロイする方法を紹介したので、今回はAndroidの方を紹介www.wheatandcat.mePRgithub.com使用アプリ: FlutterCI: GitHub Actionsデプロイ先: Firebase App Distribution実装①. Keystoreを作成以下のコマンドで Keystoreを作成$ keytool -genkey -v -keystore key.jks -alias *** -keyalg RSA -validity 10000※***は適当な文字列でOK（後で使用するのでメモしておく）コマンド実行する以下の入力が始まるので、自身の情報を入力Enter keystore password:Re-enter new password:  // パスワードは後で使用するのでメモしておくWhat is your first and last name?  [Unknown]:  Your NameWhat is the name of your organizational unit?  [Unknown]:  DevelopmentWhat is the name of your organization?  [Unknown]:  Your Company NameWhat is the name of your City or Locality?  [Unknown]:  ShinjukuWhat is the name of your State or Province?  [Unknown]:  TokyoWhat is the two-letter country code for this unit?  [Unknown]:  JPIs CN=John Doe, OU=Development, O=MyCompany, L=Tokyo, ST=Tokyo, C=JP correct?  [no]:  yes上記で key.jksファイルが作成されるのでandroid/key.jksに配置②. android/app/build.gradleにKeystoreの設定を追加local.propertiesに ①で作成したKeystore を設定を追加■ android/local.propertiesstoreFile=key.jksstorePassword=****  // ①で入力したパスワードkeyPassword=****   // ①で入力したパスワードkeyAlias=****     // ①で入力した aliasandroid/app/build.gradleに以下の設定を追加■ android/app/build.gradledef localProperties = new Properties()def localPropertiesFile = rootProject.file('local.properties')if (localPropertiesFile.exists()) {    localPropertiesFile.withReader('UTF-8') { reader ->        localProperties.load(reader)    }}(略)android {(略)    signingConfigs {      release {          keyAlias localProperties['keyAlias']          keyPassword localProperties['keyPassword']          storeFile rootProject.file(localProperties['storeFile'])          storePassword localProperties['storePassword']      }    }}③. SHA-1 フィンガープリント取得Firebaseを使用している場合、SHA-1 フィンガープリントをコンソールで設定する必要がある。$ cd android$ ./gradlew signingReport出力の中からConfig: releaseの値を確認して、SHA1の値を確認Variant: releaseConfig: releaseStore: ***/android/key.jksAlias: ***MD5: ***SHA1:  ***SHA-256:  ***Valid  ****④. 作成したファイルをGitHub Actions の secrets に設定①と②で作成したkey.jksとlocal.propertiesはビルド時に使用するので以下のコマンドでbase 64に変換してGitHub Actions の secrets に設定$ base64 -i ./android/key.jks | pbcopy$ base64 -i ./android/local.properties | pbcopy⑤. fastlaneでFirebase App Distribution にデプロイ以下のfastlaneのファイルを作成■dart/app/android/fastlane/Fastfile:android)platform :android do  desc "Upload an apk to Firebase App Distribution"  lane :distribution do    # Firebase App Distributionにアップロード    firebase_app_distribution(      app: ENV['REVIEW_ANDROID_FIREBASE_APP_ID'],      firebase_cli_token: ENV['REVIEW_FIREBASE_CLI_TOKEN'],      android_artifact_type: "APK",      android_artifact_path: "build/app/outputs/app-release.apk",      groups: "testers",    )   endendappとfirebase_cli_tokenの値は以下のページを参考に取得firebase.google.com⑥. GitHub Actionsでデプロイできるようにする以下のyamlファイルを作成することでCI上でデプロイできる■.github/workflows/depoly_android_app_review.yamlname: レビュー環境のAndroidアプリをFirebase App Distributionにデプロイするon:  push:    branches:      - mainenv:  REVIEW_ANDROID_FIREBASE_APP_ID: ${{ secrets.REVIEW_ANDROID_FIREBASE_APP_ID }}  REVIEW_FIREBASE_CLI_TOKEN: ${{ secrets.REVIEW_FIREBASE_CLI_TOKEN }}  REVIEW_GOOGLE_SERVICE_JSON: ${{ secrets.REVIEW_GOOGLE_SERVICE_JSON }}  REVIEW_DART_FIREBASE_OPTIONS: ${{ secrets.REVIEW_DART_FIREBASE_OPTIONS }}  REVIEW_JKS: ${{ secrets.REVIEW_JKS }}  REVIEW_ANDROID_PROPERTIES: ${{ secrets.REVIEW_ANDROID_PROPERTIES }}jobs:  deploy:    runs-on: ubuntu-latest    defaults:      run:        working-directory: dart/app    steps:      - name: Checkout repository        uses: "actions/checkout@v4"      - uses: actions/setup-java@v4        with:          distribution: "temurin"          java-version: "11.x"      - name: Create google-services.json        run: echo $REVIEW_GOOGLE_SERVICE_JSON | base64 --decode > ./android/app/google-services.json      - name: Create key.jks        run: echo $REVIEW_JKS | base64 --decode > ./android/key.jks      - name: Create local.properties        run: echo $REVIEW_ANDROID_PROPERTIES | base64 --decode > ./android/local.properties      - name: Create lib/firebase_options.dart        run: echo $REVIEW_DART_FIREBASE_OPTIONS | base64 --decode > ./lib/firebase_options.dart      - name: Set up Ruby        uses: ruby/setup-ruby@v1        with:          ruby-version: "2.7"      - name: Cache Flutter dependencies        uses: actions/cache@v4        with:          path: |            ${{ env.FLUTTER_HOME }}/.pub-cache            **/.flutter-plugins            **/.flutter-plugin-dependencies            **/.dart_tool/package_config.json          key: ${{ runner.os }}-flutter-${{ hashFiles('dart/app/pubspec.lock') }}          restore-keys: |            ${{ runner.os }}-flutter-      - name: Cache Bundler dependencies        uses: actions/cache@v4        with:          path: vendor/bundle          key: ${{ runner.os }}-bundler-${{ hashFiles('dart/app/android/Gemfile.lock') }}          restore-keys: |            ${{ runner.os }}-bundler-      - name: Set up Flutter        uses: subosito/flutter-action@v2        with:          channel: stable          cache: true      - name: check version        run: flutter --version      - name: Install Flutter dependencies        run: flutter pub get      - name: Install dependencies        run: |          cd android          bundle install      - name: build apk        run: |          BUILD_NUMBER=$(date +%s)          echo "Current build number is $BUILD_NUMBER"          flutter build apk --release --build-number=$BUILD_NUMBER      - name: mv apk        run: |          mkdir -p android/build/app/outputs          mv ./build/app/outputs/flutter-apk/app-release.apk ./android/build/app/outputs/app-release.apk      - name: distribution apk        run: |          cd android          bundle exec fastlane distribution        env:          RUBYOPT: "-rostruct".gitignoreしているファイルが結構あるので、除外しているファイルをGitHub Actions の secrets 経由で生成してCIで実行CIが正常に動作すれば以下みたいな感じでFirebase App Distributionからアプリをダウンロードできるようになる

GitHub ActionsでAndroidアプリをビルドしてFirebase App Distribution にデプロイする

作っているアプリで実機検証をやりやすくすためにCIで自動でデプロイできるようにしたの記事化PRgithub.com使用アプリ: Flutterビルド:  fastlaneCI: GitHub Actionsデプロイ先: Firebase App Distribution実装①. Apple Developer で証明書を作成まず、iOSアプリを配布するためにApple Developerでアプリの証明書を作成する必要があるので、以下のコマンドでprivate.keyとcsr.pemを作成$ openssl genrsa -out private.key 2048$ openssl req -new -key private.key -out csr.pemkey作成時の入力は以下みたいな感じで自身の設定を入力Country Name (2 letter code) [AU]:JPState or Province Name (full name) [Some-State]:TokyoLocality Name (eg, city) []:TokyoOrganization Name (eg, company) [Internet Widgits Pty Ltd]:Your Company NameOrganizational Unit Name (eg, section) []:Common Name (e.g. server FQDN or YOUR name) []:Your NameEmail Address []:your-email@example.comPlease enter the following 'extra' attributesto be sent with your certificate requestA challenge password []:An optional company name []:Apple DeveloperにログインしてCertificatesを画面を開いて、+をクリックして以下の通りに操作Apple Distributionを選択以下の画像の画面でcsr.pemをアップロード証明書をダウンロードしてdistribution.cerの名前で保存②. p12 ファイルを作成 & インポート以下のコマンドで①でダウンロードしたdistribution.cerを元にp12ファイルを作成$ openssl x509 -in distribution.cer -inform der -out distribution.pem$ openssl pkcs12 -legacy -export -out distribution.p12 -inkey private.key -in distribution.pem※ 以下の記事の通り、legacyのオプションを付けないと mac でパスワード認証ができないので注意OpenSSL 3 系で発行された p12 形式の証明書が macOS にインポートできない以下でパスワードを入力Enter Export Password:Verifying - Enter Export Password:作成されたdistribution.p12をダブルクリックし、mac のキーチェーンにインストール③. 配信用の証明書をプロビジョニングプロファイルを作成Apple Developer にログインして、配信用の証明書をプロビジョニングプロファイルを作成Profiles にアクセスして、+をクリックAd Hocを選択App ID を選択Certificates で①で作成した証明書を選択プロビジョニングプロファイルをダウンロードしてadhok.mobileprovisionの名前で保存④. Xcodeでプロビジョニングプロファイルが正しく作成されたか確認以下のコマンドでFlutterアプリをXcodeで開く$ open ios/Runner.xcworkspaceXcode でプロジェクトを開き、Signing & Capabilitiesを選択Automatically manage signingにチェックがついている場合は外すProvisioning Profileで③でダウンロードしたadhok.mobileprovisionを選択以下の画像の通り表示されていればOK（認証できていない場合はエラーが表示される）⑤. 作成したファイルをGitHub Actions の secrets に設定②と③で作成した証明書とプロビジョニングプロファイルはデプロイ時に使用するので以下のコマンドでbase 64に変換してGitHub Actions の secrets に設定$ base64 -i distribution.p12 | pbcopy$ base64 -i adhok.mobileprovision | pbcopy⑥. fastlaneで配布用のビルドを作成 & Firebase App Distribution にデプロイ以下のfastlaneのファイルを作成■ dart/app/ios/fastlane/Fastfile# Fastfiledefault_platform(:ios)platform :ios do  desc "Build and distribute iOS app for Adhoc"  lane :adhoc do        p12_base64 = ENV['CERTIFICATES']    p12_password = ENV['CERTIFICATES_PASSWORD']    File.write("certificate.p12", Base64.decode64(p12_base64))         create_keychain(      name: "build.keychain",      password: "keeper",      default_keychain: true,      unlock: true,      timeout: 36000,      lock_when_sleeps: false    )   `curl -OL https://www.apple.com/certificateauthority/AppleWWDRCAG3.cer`    import_certificate(      keychain_name: "build.keychain",      keychain_password: "keeper",      certificate_path: "fastlane/AppleWWDRCAG3.cer",    )    import_certificate(      keychain_name: "build.keychain",      keychain_password: "keeper",      certificate_path: "fastlane/certificate.p12",      certificate_password: p12_password    )    current_time = Time.now.to_i    increment_build_number(      build_number: current_time,      xcodeproj: "Runner.xcodeproj"    )    build_app(      workspace: "Runner.xcworkspace",      scheme: "Runner",      export_options: {        method: "ad-hoc",        provisioningProfiles: {          "com.unicorn.stockkeeper" => "keeper-adhoc"        },        signingStyle: "manual"      },      clean: true,      output_name: "app.ipa",      output_directory: "build"    )    # Firebase App Distributionにアップロード    firebase_app_distribution(      app: ENV['REVIEW_IOS_FIREBASE_APP_ID'],      firebase_cli_token: ENV['REVIEW_FIREBASE_CLI_TOKEN'],      ipa_path: "build/app.ipa",      groups: "testers"    )     delete_keychain(name: "build.keychain")  endend以下の部分で証明書作成 & キーチェーンにインポート    p12_base64 = ENV['CERTIFICATES']    p12_password = ENV['CERTIFICATES_PASSWORD']    File.write("certificate.p12", Base64.decode64(p12_base64))         create_keychain(      name: "build.keychain",      password: "keeper",      default_keychain: true,      unlock: true,      timeout: 36000,      lock_when_sleeps: false    )   `curl -OL https://www.apple.com/certificateauthority/AppleWWDRCAG3.cer`    import_certificate(      keychain_name: "build.keychain",      keychain_password: "keeper",      certificate_path: "fastlane/AppleWWDRCAG3.cer",    )    import_certificate(      keychain_name: "build.keychain",      keychain_password: "keeper",      certificate_path: "fastlane/certificate.p12",      certificate_password: p12_password    )同じbuild_numberのアプリはデプロイできないので以下のコードで現在日時で更新    current_time = Time.now.to_i    increment_build_number(      build_number: current_time,      xcodeproj: "Runner.xcodeproj"    )以下のコードでプロビジョニングプロファイルを指定してiOSアプリをビルド    build_app(      workspace: "Runner.xcworkspace",      scheme: "Runner",      export_options: {        method: "ad-hoc",        provisioningProfiles: {          "com.unicorn.stockkeeper" => "keeper-adhoc"        },        signingStyle: "manual"      },      clean: true,      output_name: "app.ipa",      output_directory: "build"    )最後に以下のコードでFirebase App Distributionにアップロード    firebase_app_distribution(      app: ENV['REVIEW_IOS_FIREBASE_APP_ID'],      firebase_cli_token: ENV['REVIEW_FIREBASE_CLI_TOKEN'],      ipa_path: "build/app.ipa",      groups: "testers"    ) appとfirebase_cli_tokenの値は以下のページを参考に取得firebase.google.com⑥. GitHub Actionsでデプロイできるようにする以下のyamlファイルを作成することでCI上でデプロイできる■ .github/workflows/depoly_ios_app_review.yamlname: レビュー環境のiOSアプリをFirebase App Distributionにデプロイするon:  push:    branches:      - main    paths:      - "dart/app/**"env:  REVIEW_IOS_FIREBASE_APP_ID: ${{ secrets.REVIEW_IOS_FIREBASE_APP_ID }}  REVIEW_FIREBASE_CLI_TOKEN: ${{ secrets.REVIEW_FIREBASE_CLI_TOKEN }}  CERTIFICATES: ${{ secrets.CERTIFICATES }}  CERTIFICATES_PASSWORD: ${{ secrets.CERTIFICATES_PASSWORD }}  REVIEW_PROVISIONING_PROFILE: ${{ secrets.REVIEW_PROVISIONING_PROFILE }}  REVIEW_GOOGLE_SERVICE_INFO_PLIST: ${{ secrets.REVIEW_GOOGLE_SERVICE_INFO_PLIST }}  REVIEW_DART_FIREBASE_OPTIONS: ${{ secrets.REVIEW_DART_FIREBASE_OPTIONS }}  REVIEW_RUNNER_INFOPLIST: ${{ secrets.REVIEW_RUNNER_INFOPLIST }}jobs:  deploy:    runs-on: macos-latest    defaults:      run:        working-directory: dart/app    steps:      - name: Checkout repository        uses: "actions/checkout@v4"      - name: Create GoogleService-Info.plist        run: echo $REVIEW_GOOGLE_SERVICE_INFO_PLIST | base64 --decode > ./ios/Runner/GoogleService-Info.plist      - name: Create Provisioning File        run: |          mkdir -pv ~/Library/MobileDevice/Provisioning\ Profiles/          cd ~/Library/MobileDevice/Provisioning\ Profiles/          echo $REVIEW_PROVISIONING_PROFILE | base64 --decode > ./keeper-adhoc.mobileprovision      - name: Create lib/firebase_options.dart        run: echo $REVIEW_DART_FIREBASE_OPTIONS | base64 --decode > ./lib/firebase_options.dart      - name: Create dart/app/ios/Runner/Info.plist        run: echo $REVIEW_RUNNER_INFOPLIST | base64 --decode > ./ios/Runner/Info.plist      - name: Set up Ruby        uses: ruby/setup-ruby@v1        with:          ruby-version: "2.7"      - name: Cache Flutter dependencies        uses: actions/cache@v4        with:          path: |            ${{ env.FLUTTER_HOME }}/.pub-cache            **/.flutter-plugins            **/.flutter-plugin-dependencies            **/.dart_tool/package_config.json          key: ${{ runner.os }}-flutter-${{ hashFiles('dart/app/pubspec.lock') }}          restore-keys: |            ${{ runner.os }}-flutter-      - name: Cache Bundler dependencies        uses: actions/cache@v4        with:          path: vendor/bundle          key: ${{ runner.os }}-bundler-${{ hashFiles('dart/app/ios/Gemfile.lock') }}          restore-keys: |            ${{ runner.os }}-bundler-      - name: Cache CocoaPods        uses: actions/cache@v4        with:          path: |            dart/app/ios/Pods          key: ${{ runner.os }}-pods-${{ hashFiles('dart/app/ios/Podfile.lock') }}          restore-keys: |            ${{ runner.os }}-pods-      - name: Set up Flutter        uses: subosito/flutter-action@v2        with:          channel: stable          cache: true      - name: Install Flutter dependencies        run: flutter pub get      - name: Install dependencies        run: |          cd ios          bundle install      - name: Install CocoaPods dependencies        run: |          cd ios          pod install      - name: Build and distribute with Fastlane        run: |          cd ios          bundle exec fastlane adhoc.gitignoreしているファイルが結構あるので、除外しているファイルをGitHub Actions の secrets 経由で生成してCIで実行CIが正常に動作すれば以下みたいな感じでFirebase App Distributionからアプリをダウンロードできるようになる

GitHub ActionsでiOSアプリをビルドしてFirebase App Distribution にデプロイする

今Flutterで開発しているアプリがある程度形になったので報告リポジトリgithub.comgithub.com画面使用している技術FlutterNestJSPrismTiDB ServerlessCloud RunFirebase AuthenticationFirebase Storage各画面で使っているライブラリ紹介アプリアイコンの設定pub.devflutter_launcher_iconsを使用以下の記事を参考に実装【Flutter】アプリアイコンに必要な画像と追加方法（flutter_launcher_icons,Figma）スプラッシュスクリーンの実装pub.dev flutter_native_splashを使用以下の記事を参考に実装【Flutter】コマンド一発でスプラッシュ画面を実装する【flutter_native_splash】Firebase Authenticationでログイン作成pub.devpub.dev firebase_authとgoogle_sign_inを使用して実装実装に関しては以下で記事にしているFlutterでFirebase Authenticationを実装① - wheatandcatの開発ブログ画像アップロード & トリミング & 圧縮画像アップロードは以下を使用image_picker | Flutter packagefirebase_storage | Flutter package実装に関しては以下で記事にしているFlutterで画像アップロード機能を実装 - wheatandcatの開発ブログ画像のトリミングはimage_cropper | Flutter packageを使用画像の圧縮はflutter_image_compress | Flutter packageを使用状態管理 & グローバルな状態管理pub.devpub.dev単一画面の状態管理はflutter_hooksを使用これを使うことでReact Hooksとほぼ同じ感じで状態管理ができるグローバルな状態管理はflutter_riverpodを使用今後開発予定のものメイン機能は作れたので、今後は以下あたりを対応してリリース予定 - Firebase App Distributionでテスト用のアプリを配布できるようにする - Widgetbookを導入 - テストコードの実装 - QRコードを読み込んで、データの共有管理機能の追加年内くらいにリリースできれば良いかなーと思っている

Flutterで作成中のアプリの中間報告

Flutter HooksとRiverpodの解説

PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた

Flutterで画像アップロード機能を実装したので記事にしたPRgithub.com実装以下を使用して実装 - image_picker | Flutter package - image_cropper | Flutter package - firebase_storage | Flutter packageまずはimage_pickerで画像選択部分を実装pub.dev使い方は以下の通りfinal picker = ImagePicker();@overrideWidget build(BuildContext context) {  final image = useState<File?>(null);  Future<void> onTap() async {    final pickedFile = await picker.pickImage(source: ImageSource.camera);    if (pickedFile != null) {      image.value = File(pickedFile.path);    }  } picker.pickImage(source: ImageSource.camera)を呼ぶと以下みたいな感じでカメラが起動する次にimage_cropperで以下のように実装  Future<void> onTap() async {    final pickedFile = await picker.pickImage(source: ImageSource.camera);    if (pickedFile != null) {      return;     }    final croppedFile = await ImageCropper().cropImage(      sourcePath: pickedFile.path,      uiSettings: [        AndroidUiSettings(            toolbarTitle: '画像を切り取る',            initAspectRatio: CropAspectRatioPreset.square,            lockAspectRatio: true,            aspectRatioPresets: [              CropAspectRatioPreset.square,            ]),        IOSUiSettings(          title: '画像を切り取る',          minimumAspectRatio: 1.0,          aspectRatioPresets: [            CropAspectRatioPreset.square,          ],          aspectRatioLockEnabled: true,        ),        WebUiSettings(          context: context,        ),      ],    );    if (croppedFile != null) {      image.value = File(croppedFile.path);    }  }ImageCropper().cropImageにpickImageで取得した画像のpathを指定すると以下のように画像のトリミングの画面が起動する今回はアップロードする画像は正方形にしたいのでsquare & アスペクト比を固定に設定最後にfirebase_storageを使用してアップロードの処理を作成  onInputPressed() async {    try {      final uuid = const Uuid().v4();      final fileName = "$uuid.${image.value!.path.split('.').last}";      final res = await storageRef          .child('category/$fileName}')          .putFile(image.value!);      final imageUrl = await res.ref.getDownloadURL();      imageURL.value = imageUrl;    } catch (e) {      print("error: $e");      return;    }  }ファイル名はuuidで生成して、storageRef.child('category/$fileName}').putFile(image.value!)で指定したファイルをFirebase Storageにアップローできる上記の全部を実装すると以下のようなコードになって画像アップロードが実装できる■ lib/features/category/components/input.dartimport 'dart:io';import 'package:flutter/material.dart';import 'package:flutter_hooks/flutter_hooks.dart';import 'package:sampleflutter/components/button/button.dart';import 'package:firebase_storage/firebase_storage.dart';import 'package:image_picker/image_picker.dart';import 'package:uuid/uuid.dart';import 'package:image_cropper/image_cropper.dart';import 'package:flutter/cupertino.dart';class InputCategory {  late final String name;  late final String? imageURL;  InputCategory({    required this.name,    this.imageURL,  });}class Input extends HookWidget {  final void Function(InputCategory) onPressed;  final InputCategory? defaultValue;  final picker = ImagePicker();  Input({    super.key,    this.defaultValue,    required this.onPressed,  });  @override  Widget build(BuildContext context) {    final inputText = useTextEditingController(text: defaultValue?.name ?? '');    final image = useState<File?>(null);    final imageURL = useState<String?>(defaultValue?.imageURL);    final storageRef = FirebaseStorage.instance.ref();    Future<void> cropImage(String path) async {      final croppedFile = await ImageCropper().cropImage(        sourcePath: path,        uiSettings: [          AndroidUiSettings(              toolbarTitle: '画像を切り取る',              initAspectRatio: CropAspectRatioPreset.square,              lockAspectRatio: true,              aspectRatioPresets: [                CropAspectRatioPreset.square,              ]),          IOSUiSettings(            title: '画像を切り取る',            minimumAspectRatio: 1.0,            aspectRatioPresets: [              CropAspectRatioPreset.square,            ],            aspectRatioLockEnabled: true,          ),          WebUiSettings(            context: context,          ),        ],      );      if (croppedFile != null) {        image.value = File(croppedFile.path);      }    }    void showPickImage() {      showModalBottomSheet(        context: context,        builder: (BuildContext context) {          return Padding(              padding: const EdgeInsets.only(                  top: 10.0,                  bottom: 40.0,                  left: 10.0,                  right: 10.0), // 上に20、下に10の余白を追加              child: Wrap(                children: <Widget>[                  const ListTile(                    title: Text("画像をアップロード",                        style: TextStyle(                            fontSize: 20, fontWeight: FontWeight.bold)),                  ),                  ListTile(                    leading: const Icon(Icons.camera_alt),                    title: const Text('カメラを起動する'),                    onTap: () async {                      Navigator.pop(context);                      final pickedFile =                          await picker.pickImage(source: ImageSource.camera);                      if (pickedFile != null) {                        cropImage(pickedFile.path);                      }                    },                  ),                  ListTile(                    leading: const Icon(Icons.image_search),                    title: const Text('アルバムから選択する'),                    onTap: () async {                      Navigator.pop(context);                      final pickedFile =                          await picker.pickImage(source: ImageSource.gallery);                      if (pickedFile != null) {                        cropImage(pickedFile.path);                      }                    },                  ),                ],              ));        },      );    }    onInputPressed() async {      if (image.value != null) {        try {          final uuid = const Uuid().v4();          final fileName = "$uuid.${image.value!.path.split('.').last}";          final res = await storageRef              .child('category/$fileName}')              .putFile(image.value!);          final imageUrl = await res.ref.getDownloadURL();          imageURL.value = imageUrl;          //print("imageURL: $imageUrl");        } catch (e) {          //print("error: $e");          showDialog(              context: context,              builder: (BuildContext contextDialog) {                return CupertinoAlertDialog(                  title: const Text("エラーが発生しました"),                  content: Text("画像のアップロードに失敗しました。もう一度お試しください。(エラーコード: $e)"),                  actions: [                    CupertinoDialogAction(                      child: const Text('OK'),                      onPressed: () => Navigator.pop(contextDialog),                    ),                  ],                );              });          return;        }      }      if (inputText.text.isEmpty) {        showDialog(            context: context,            builder: (BuildContext contextDialog) {              return CupertinoAlertDialog(                title: const Text("入力エラー"),                content: const Text("部屋の名前を入力してください。"),                actions: [                  CupertinoDialogAction(                    child: const Text('OK'),                    onPressed: () => Navigator.pop(contextDialog),                  ),                ],              );            });        return;      }      onPressed(InputCategory(name: inputText.text, imageURL: imageURL.value));    }    return Column(      mainAxisAlignment: MainAxisAlignment.start,      crossAxisAlignment: CrossAxisAlignment.center,      children: <Widget>[        Center(            child: TextField(                controller: inputText,                cursorColor: Colors.white,                style: const TextStyle(                    color: Colors.white,                    fontSize: 20,                    fontWeight: FontWeight.bold),                decoration: const InputDecoration(                  labelText: "部屋の名前",                  labelStyle: TextStyle(color: Colors.white, fontSize: 26),                  enabledBorder: UnderlineInputBorder(                    borderSide: BorderSide(color: Colors.white),                  ),                  focusedBorder: UnderlineInputBorder(                    borderSide: BorderSide(color: Colors.white),                  ),                ))),        Container(          padding: const EdgeInsets.only(top: 30),          child: InkWell(              onTap: showPickImage,              child: image.value != null                  ? Image.file(image.value!, width: 250, height: 250)                  : imageURL.value != null                      ? Image.network(imageURL.value!, width: 250, height: 250)                      : Card(                          color: Colors.black26,                          shape: const RoundedRectangleBorder(                            borderRadius: BorderRadius.zero, // Cardの角を直角にする                          ),                          elevation: 0,                          child: SizedBox(                              width: 250,                              height: 250,                              child: Container(                                width: 40,                                height: 40,                                padding: const EdgeInsets.all(2), // ボーダーの幅を調整                                child: const Icon(                                  Icons.camera_alt,                                  color: Colors.white,                                  size: 40,                                ),                              )))),        ),        Flexible(            child: Center(                heightFactor: 3,                child: Button(title: "保存", onPressed: onInputPressed))),      ],    );  }}上記のコードで以下みたいな画面が実装できる

Flutterで画像アップロード機能を実装

前回記事の続き、今回はバックエンドとアプリの続きを実装PRbackendgithub.comアプリgithub.com実装まずはbackendを実装Guardの機能を使いFirebase認証を作成docs.nestjs.comコードは以下のような感じ■ src/common/guards/auth/auth.guard.tsimport { CanActivate, ExecutionContext, Injectable } from '@nestjs/common'import { GqlExecutionContext } from '@nestjs/graphql'import { PrismaService } from '@src/modules/prisma/prisma.service'import admin from 'firebase-admin'import { type User } from '@prisma/client'export type Auth = {  uid: string  userId: number  user: User}@Injectable()export class AuthGuard implements CanActivate {  constructor(private prisma: PrismaService) {}  async canActivate(context: ExecutionContext): Promise<boolean> {    const ctx = GqlExecutionContext.create(context)    const request = ctx.getContext().req    const token = request.headers['authorization']    const result = await admin.auth().verifyIdToken(token)    const user = await this.prisma.user.findFirst({      where: {        uid: result.uid,      },    })    if (!user) {      throw new Error('User not found')    }    request.auth = {      uid: result.uid,      userId: user.id,      user: user,    } as Auth    return true  }}コードの中でHeaderに設定しているAuthorizationを取得して、Firebaseで認証を行い、ユーザー情報を取得request.authに設定作成したGuardは、以下のように設定して参照することができる■ src/resolver/user.tsimport { AuthGuard } from '@src/common/guards/auth/auth.guard'import admin from 'firebase-admin'import { Prisma } from '@prisma/client'@Resolver('')export class UserResolver {  constructor(private prisma: PrismaService) {}  @Query('me')  @UseGuards(AuthGuard)  async me(@Context() context): Promise<QueryType['me']> {    const user = context.req.auth    const r = await this.prisma.user.findFirst({      where: {        uid: user.uid,      },    })    return format(r)  }これでbackendでFrontendから送ったFirebaseのtoken IDを認証してFirebaseのユーザーデータを取得する処理が実装できた認証情報はグローバルステートで定義したいのでRiverpodを使用して実装pub.devコードは以下のような感じで実装■lib/providers/user.dartimport 'package:firebase_auth/firebase_auth.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import 'package:graphql_flutter/graphql_flutter.dart';import 'package:hooks_riverpod/hooks_riverpod.dart';import 'package:sampleflutter/providers/graphql.dart';import 'package:sampleflutter/graphql/me.gql.dart';class UserData {  late final String id;  late final String uid;  UserData({    required this.id,    required this.uid,  });  void update(UserData newUser) {    id = newUser.id;    uid = newUser.uid;  }}final firebaseAuthProvider =    Provider<FirebaseAuth>((ref) => FirebaseAuth.instance);final authStateChangesProvider = StreamProvider<User?>((ref) {  return ref.read(firebaseAuthProvider).authStateChanges();});final userDataProvider = FutureProvider.autoDispose<UserData?>((ref) async {  final user = ref.watch(authStateChangesProvider).asData?.value;  if (user != null) {    final client = ref.read(graphqlClientProvider);    final result = await client.query<Query$Me>(      QueryOptions(        document: documentNodeQueryMe,      ),    );    if (result.hasException) {      return null;    }    final userData = result.data!['me'];    return UserData(      id: userData['id'],      uid: userData['uid'],    );  }  return null;});firebaseAuthProviderを宣言して、authStateChangesで認証状態を監視。ユーザーが取得できたらUserDataを更新するように実装■ lib/app/categories/page.dartimport 'package:sampleflutter/providers/user.dart';import 'package:sampleflutter/app/items/new/page.dart';import 'package:sampleflutter/features/category/hooks/useItems.dart';class MyHomePage extends HookConsumerWidget {  const MyHomePage({super.key});  @override  Widget build(BuildContext context, WidgetRef ref) {    final userDataAsyncValue = ref.watch(userDataProvider);    debugPrint('userDataAsyncValue: ${userDataAsyncValue.asData?.value?.id}') // ← ここで認証したユーザーデータを参照できるこんな感じでFirebase認証までの実装が完了。基本的な開発は終わったので次回からアプリ自体の作り込みを行う予定

Flutter + NestJsでFirebase Authenticationを実装②

4月は3週間の海外旅行に行っていたので久々の更新。FlutterでFirebase Authenticationを実装してみたので記載。今回は純粋なアプリのログインのみ実装。次回の記事でbackendの接続とアプリの状態保持を記載する予定。PRgithub.com使用パッケージfirebase_auth | Flutter packagegoogle_sign_in | Flutter package今回はGoogleログインのみ実装したので使用flutter_secure_storage | Flutter package実装まず、Firebase接続の事前準備が必要なので以下の記事を参考にinfo. plistを追加 & 修正qiita.com次に以下のコマンドでFirebaseの接続情報を追加$ firebase login$ dart pub global activate flutterfire_cli接続したいFirebaseのプロジェクトを指定すると以下のファイルが追加される（接続情報が載っているのでGitのcommitからは除外）■ lib/firebase_options.dart// File generated by FlutterFire CLI.// ignore_for_file: type=lintimport 'package:firebase_core/firebase_core.dart' show FirebaseOptions;import 'package:flutter/foundation.dart'    show defaultTargetPlatform, kIsWeb, TargetPlatform;/// Default [FirebaseOptions] for use with your Firebase apps.////// Example:/// ```dart/// import 'firebase_options.dart';/// // .../// await Firebase.initializeApp(///   options: DefaultFirebaseOptions.currentPlatform,/// );/// ```class DefaultFirebaseOptions {  static FirebaseOptions get currentPlatform {    if (kIsWeb) {      return web;    }    switch (defaultTargetPlatform) {      case TargetPlatform.android:        return android;      case TargetPlatform.iOS:        return ios;      case TargetPlatform.macOS:        return macos;      case TargetPlatform.windows:        return windows;      case TargetPlatform.linux:        throw UnsupportedError(          'DefaultFirebaseOptions have not been configured for linux - '          'you can reconfigure this by running the FlutterFire CLI again.',        );      default:        throw UnsupportedError(          'DefaultFirebaseOptions are not supported for this platform.',        );    }  }  static const FirebaseOptions web = FirebaseOptions(    apiKey: '******'',    appId: '******'',    messagingSenderId: '******'',    projectId: '******',    authDomain: '******',    storageBucket: '******',    measurementId: '******',  );（略)上記のコードを使用してアプリ起動時ににFirebaseの初期化の処理を追加■lib/main.dartimport 'firebase_options.dart';void main() async {  WidgetsFlutterBinding.ensureInitialized();  await Firebase.initializeApp(    options: DefaultFirebaseOptions.currentPlatform,  );  await initHiveForFlutter();  runApp(const MyApp());}これで準備完了なので残りはコードを追加■lib/app/login/page.dartimport 'package:flutter/material.dart';import 'package:flutter_hooks/flutter_hooks.dart';import 'package:sampleflutter/components/appBar/common.dart';import 'package:sampleflutter/components/button/button.dart';import 'package:firebase_auth/firebase_auth.dart';import 'package:google_sign_in/google_sign_in.dart';import 'package:sampleflutter/utils/auth.dart';class Login extends HookWidget {  const Login({Key? key}) : super(key: key);  static final googleLogin = GoogleSignIn(scopes: [    'email',    'https://www.googleapis.com/auth/contacts.readonly',  ]);  @override  Widget build(BuildContext context) {    onPressed() async {      try {        //Google認証フローを起動する        final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();        //リクエストから認証情報を取得する        final googleAuth = await googleUser?.authentication;        //firebaseAuthで認証を行う為、credentialを作成        final credential = GoogleAuthProvider.credential(          accessToken: googleAuth?.accessToken,          idToken: googleAuth?.idToken,        );        //作成したcredentialを元にfirebaseAuthで認証を行う        UserCredential userCredential =            await FirebaseAuth.instance.signInWithCredential(credential);        if (userCredential.additionalUserInfo!.isNewUser) {          //新規ユーザーの場合の処理          debugPrint("新規ユーザー");        } else {          //既存ユーザーの場合の処理          debugPrint("既存ユーザー");        }        final AuthService authService = AuthService();        await authService.refreshAndStoreToken();      } on FirebaseException catch (e) {        debugPrint(e.message);      } catch (e) {        print(e);      }    }    onLogout() async {      final AuthService authService = AuthService();      await authService.deleteToken();      await FirebaseAuth.instance.signOut();    }    return Scaffold(        appBar: const CommonAppBar(title: "ログイン"),        body: Center(            child: StreamBuilder(                stream: FirebaseAuth.instance.authStateChanges(),                builder: (BuildContext context, AsyncSnapshot<User?> snapshot) {                  if (!snapshot.hasData) {                    return Button(                        title: "Google ログイン", width: 300, onPressed: onPressed);                  } else {                    return Button(                        title: "ログアウト", width: 300, onPressed: onLogout);                  }                })));  }}これで以下みたいにログインの実装が可能www.youtube.com後はGraphQLに認証トークンを追加する場合は以下にように実装まず、Auth用のServiceを追加■ lib/utils/auth.dartimport 'package:firebase_auth/firebase_auth.dart';import 'package:flutter/foundation.dart';import 'package:flutter_secure_storage/flutter_secure_storage.dart';class AuthService {  final FirebaseAuth _auth = FirebaseAuth.instance;  final FlutterSecureStorage secureStorage = const FlutterSecureStorage();  // トークンを取得して安全に保存する  Future<void> refreshAndStoreToken() async {    User? user = _auth.currentUser;    if (user != null) {      String? token = await user.getIdToken(true);      await secureStorage.write(key: 'token', value: token);      await secureStorage.write(          key: 'tokenDate', value: DateTime.now().toIso8601String());    }  }  // トークンの有効性をチェックし、必要に応じて更新  Future<String?> getToken() async {    try {      String? token = await secureStorage.read(key: 'token');      if (token == null) {        return null;      }      String? storedDate = await secureStorage.read(key: 'tokenDate');      if (storedDate == null) {        return null;      }      DateTime tokenDate = DateTime.parse(storedDate);      DateTime now = DateTime.now();      // トークンの有効期限を設定（Firebaseのデフォルトは約1時間）      if (now.difference(tokenDate).inHours >= 1) {        await refreshAndStoreToken();        token = await secureStorage.read(key: 'token'); // 更新されたトークンを取得      }      debugPrint('token: $token');      return token;    } catch (e) {      return null;    }  }  Future<void> deleteToken() async {    await secureStorage.delete(key: 'token');    await secureStorage.delete(key: 'tokenDate');  }}上記で追加したgetTokenを以下のメソッドに追加してHeaderに追加■lib/main.dartclass MyApp extends StatelessWidget {  const MyApp({super.key});  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    final HttpLink httpLink =        HttpLink('https://stock-keeper-voytob3xvq-an.a.run.app/graphql');    final AuthService authService = AuthService();    final authLink = AuthLink(getToken: () async => authService.getToken());    final link = authLink.concat(httpLink);    final ValueNotifier<GraphQLClient> client = ValueNotifier<GraphQLClient>(      GraphQLClient(        link: link,        cache: GraphQLCache(store: InMemoryStore()),      ),    );これでAPIでFirebase Authを使用する準備が整った。次回の記事でbackendの接続とアプリの状態保持を記載する予定。

FlutterでFirebase Authenticationを実装①

以下の記事で紹介したが現在開発中のアプリでPlanetScaleを使用していたが無料プランがなくなってしまうので、代替のDBサービスを試してみたので紹介www.wheatandcat.mePlanetScaleの無料プランがなくなる件planetscale.com5GBまでなら無料で使用できていましたが、4月8日からアップグレードしないと使用できなくなってしまうので個人開発は置き換えることにした代替の条件今回は個人開発で使用する前提なので以下の条件で調査 - 個人開発で使用する範疇なら無料で使用できるDBサービス - Prismaを使用できる候補以下の2つをサービスを試してみた - Neon - TiDB ServerlessNeonneon.tech概要サーバーレスのフルマネージドPostgresコードはGitHubで公開されているneondatabase/neonRust製始め方はサイトにアクセスして初期設定をすれば、即使用可能AWS AuroraやAlloyDBと似た機能を持ったアーキテクチャを採用（詳しくは以下の記事を参照）https://neon.tech/blog/architecture-decisions-in-neonPrismaでの使用方法■ PRgithub.com基本は以下のサイトを参考に実装可能neon.techメリット無料枠が512MBブランチングができるので、環境毎にDBを複製ことが可能Webのコンソールの機能が充実していて以下の機能が使用できるSQL editorIP制限定期バックアップVercelやDatadogなどの多くの既存システムとのインテグレーションの仕組みなどなど、機能サポート面はかなり充実しているOSSとしてGitHubで公開しているデメリット東京リージョンが現状ない（なので、日本で使用する場合はシンガポールリージョンが一番近くなりそう）TiDB Serverlesspingcap.co.jp概要MySQL互換のあるNewSQLを使用高い分散性能を持っており、大規模プロジェクトでも使用されているコードはGitHubで公開されているhttps://github.com/pingcap/tidbGo製詳細なアーキテクチャは以下の記事を参照https://docs.pingcap.com/ja/tidb/stable/tidb-architecture#tidb-architecturePrismaでの使用方法■ PRgithub.com基本は以下のサイトを参考に実装可能docs.pingcap.comメリット無料枠が5000万リクエストユニット（RU）/月NewSQLなのにPrismaが使用できる自動でデータ分散管理されるためシャーディングが不要柔軟なトランザクションの設定が用意されていて用途に合わせて変更可能https://docs.pingcap.com/ja/tidb/stable/transaction-isolation-levelsWriteのスケールも可能運営会社のPingCAPに日本支社ができたので日本語のドキュメントが充実しているhttps://docs.pingcap.com/ja/tidb/stable/overviewデメリットMySQLは完全互換では無い（詳細は以下に記載）https://docs.pingcap.com/ja/tidb/stable/mysql-compatibility学習コストが高い複雑なアーキテクチャをしているので運用やチューニングに専門的な知識が必要以下の記事を参考TiDBにおけるパフォーマンス検証の進め方とつまづきポイントPerformance TuningまとめどちらもPrismaで問題なく動作したのが、やはりNeonの方は東京リージョンがないデメリットが大きいので、TiDB Serverlessの方を採用して開発することにした。まだ使い始めたばっかりで、そこまで分かってないことが多いので開発してネタができたら、また記事を書こうと思います。

現状FlutterでAPI接続するにはGraphQLが良さ気だったので実装してみたリポジトリ以下で開発■ Fluttergithub.com■ backendgithub.com開発構成FrontendFlutterBackendNestJSPrismaPlanetScaleGraphQL Code GeneratorCloud RunモチベーションFlutterでもgraphql_codegenで型安全で実装はできるので、それを使って開発実装graphql_codegenで型安全にするためにbackendから以下のスキーマファイルを取得■ src/schema.graphqltype Query {  categories: [Category]  category(id: Int!): Category}type Category {  "カテゴリーID"  id: ID!  "カテゴリー名"  name: String!  "順番"  order: Int!}graphql_codegenでは上記のスキーマファイルとフロントエンド側でアクセスするgqlファイルを元にGraphQLのアクセス用のファイルを自動生成する。なので、次はフロントエンド側でアクセスに使用するgqlファイルを作成■ lib/graphql/category.gqlquery Category($id: Int!) {  category(id: $id) {    id    name    order  }}以下のコマンドでgraphql_codegenに必要ライブラリをインストール$ flutter pub add --dev graphql_codegen build_runner$ flutter pub add graphql graphql_flutter flutter_hooksbuild_runnerの設定ファイルを作成■build.yamltargets:  $default:    builders:      graphql_codegen:        options:          scopes:            - lib/graphql/**          clients:            - graphql            - graphql_flutter以下のコマンドでgraphql_codegenを実行$ dart run build_runner buildコマンド実行で以下のファイルが生成される■ lib/graphql/category.gql.dart（略）graphql_flutter.QueryHookResult<Query$Category> useQuery$Category(        Options$Query$Category options) =>    graphql_flutter.useQuery(options);graphql.ObservableQuery<Query$Category> useWatchQuery$Category(        WatchOptions$Query$Category options) =>    graphql_flutter.useWatchQuery(options);（略）上記で生成したファイルを使用してGraphQLを実行、今回はHooksを使用した方法で実装■lib/app/items/page.dartimport 'package:flutter/material.dart';import 'package:sampleflutter/components/appBar/common.dart';import 'package:sampleflutter/graphql/category.gql.dart';import 'package:flutter_hooks/flutter_hooks.dart';import 'package:sampleflutter/utils/graphql.dart';class Items extends HookWidget {  final int id;  const Items({super.key, required this.id});  @override  Widget build(BuildContext context) {    final queryResult = useQuery$Category(        Options$Query$Category(variables: Variables$Query$Category(id: id)));    final result = queryResult.result;    if (result.isLoading) {      return const Scaffold(        appBar: CommonAppBar(title: ""),        body: Center(          child: CircularProgressIndicator(),        ),      );    }    final Query$Category$category category = extractGraphQLData(      data: result.data,      fieldName: "category",      fromJson: Query$Category$category.fromJson,    );    return Scaffold(      appBar: const CommonAppBar(title: ""),      body: Column(        children: [          Padding(            padding: const EdgeInsets.only(left: 10, right: 10),            child: Card(              color: Colors.transparent,              elevation: 0,              shape: const Border(                  bottom: BorderSide(color: Colors.white, width: 3)),              child: ListTile(                contentPadding: EdgeInsets.zero,                title: Text(category.name,                    style: const TextStyle(（略）こんな感じで、ほぼReact & GraphQL Code Generatorで開発している時と、ほぼ同じ感覚でFlutterでも開発できるので、なかなか便利でした。 一旦、Flutter & GraphQLで開発を進めて行こうと思います。

Flutterでgraphql_codegenを使って型安全でAPIアクセスを実装する

Flutter × GraphQLでアプリを作ってみる

App Routerの紹介

 T3 Stack（応用編: Next Auth & SSRの実装紹介）

新しいアプリ開発でbackendをNode.jsでAPIをやってみようと思いタイトルの構成でAPIサーバーを作成してみたら、結構ハマりどころがあったので記事したリポジトリgithub.comモチベーション現在Flutterでアプリを作成中FlutterでAPIのやり取りで型安全にするならgraphql_codegenが使えるもし、React NativeだったらGraphQLでは無くtRPCを採用していたと思うが、Flutterはサポートしていないので除外他の言語も検討したが、Prismaを使用したかったので Node.jsを採用使用技術NestJSFastifyMercuriusPrismaPlanetScaleGraphQL Code GeneratorCloud Run実装NestJSだと以下で新規プロジェクトを作ってくれるので、そこから作成$ npm i -g @nestjs/cli$ nest new project-nameまず、Fastifyを導入■ src/main.tsimport { NestFactory } from '@nestjs/core'import {  FastifyAdapter,  NestFastifyApplication,} from '@nestjs/platform-fastify'import { AppModule } from './app.module'async function bootstrap() {  const app = await NestFactory.create<NestFastifyApplication>(    AppModule,    new FastifyAdapter({ logger: true })  )  const port = Number(process.env.PORT) || 8080  console.log(`Listening on port ${port}`)  await app.listen(port, '0.0.0.0')}bootstrap()次にGraphQLはSchema Firstで実装したかったので、GraphQLの定義を作成■ src/schema.graphqltype Query {  hello: String  categories: [Category]}type Category {  "カテゴリーID"  id: ID!  "カテゴリー名"  name: String!  "順番"  order: Int!}type Item {  "アイテムID"  id: ID!  "カテゴリーID"  categoryId: ID!  "アイテム名"  name: String!  "在庫数"  stock: Int!  "消費期限"  expirationDate: Time}input NewCategory {  "カテゴリー名"  name: String!  "順番"  order: Int!}type Mutation {  createCategory(input: NewCategory!): Category!}scalar Timeコードの方は以下のように実装■src/app.module.tsimport { Module } from '@nestjs/common'import { GraphQLModule } from '@nestjs/graphql'import { MercuriusDriver, MercuriusDriverConfig } from '@nestjs/mercurius'import { AppController } from '@src/app.controller'import { AppService } from '@src/app.service'import { HelloResolver } from './hello.resolver'import { CategoryResolver } from '@src/resolver/category'import { PrismaService } from '@src/modules/prisma/prisma.service'@Module({  controllers: [AppController],  providers: [AppService, HelloResolver, CategoryResolver, PrismaService],  imports: [    GraphQLModule.forRoot<MercuriusDriverConfig>({      driver: MercuriusDriver,      graphiql: true,      typePaths: ['./**/schema.graphql'],    }),  ],})export class AppModule {}resolverでGraphQLのtypeを使用したいのでGraphQL Code Generatorで型を自動生成■codegen.tsimport type { CodegenConfig } from '@graphql-codegen/cli'const config: CodegenConfig = {  overwrite: true,  schema: './src/schema.graphql',  generates: {    'src/generated/graphql.ts': {      plugins: ['typescript'],    },  },}export default configpackage.jsonに以下のコマンドを追加■ package.json  "scripts": {     ...    "codegen": "graphql-codegen --config codegen.ts"  }以下のコマンド実行でtypeファイルを作成$ pnpm run codegen作成されたファイルが以下src/generated/graphql.ts...export type Category = {  __typename?: 'Category';  /** カテゴリーID */  id: Scalars['ID']['output'];  /** カテゴリー名 */  name: Scalars['String']['output'];  /** 順番 */  order: Scalars['Int']['output'];};export type Item = {  __typename?: 'Item';  /** カテゴリーID */  categoryId: Scalars['ID']['output'];  /** 消費期限 */  expirationDate?: Maybe<Scalars['Time']['output']>;  /** アイテムID */  id: Scalars['ID']['output'];  /** アイテム名 */  name: Scalars['String']['output'];  /** 在庫数 */  stock: Scalars['Int']['output'];};上記のtypeファイルを使用してresolverを作成※Guardとかの概念の説明は長くなるので次回の記事で紹介する■src/resolver/category.tsimport { Resolver, Query, Mutation, Args, Context } from '@nestjs/graphql'import { UseGuards } from '@nestjs/common'import {  Query as QueryType,  NewCategory,  Category,} from '@src/generated/graphql'import { PrismaService } from '@src/modules/prisma/prisma.service'import { format } from '@src/lib/graphql'import { AuthGuard } from '@src/common/guards/auth/auth.guard'@Resolver('')export class CategoryResolver {  constructor(private prisma: PrismaService) {}  @Query(() => String)  @UseGuards(AuthGuard)  async categories(@Context() context): Promise<QueryType['categories']> {    const user = context.req.auth    const r = await this.prisma.category.findMany({      where: {        userId: user.userId,      },      orderBy: {        order: 'asc',      },    })    return r.map((c) => format(c))  }  @Mutation('createCategory')  @UseGuards(AuthGuard)  async createCategory(    @Args('input') input: NewCategory,    @Context() context  ): Promise<Category> {    const user = context.req.auth    const r = await this.prisma.category.create({      data: {        userId: user.userId,        name: input.name,        order: input.order,      },    })    return format(r)  }}ローカルで起動して実行してレスポンスを確認問題なく動作しているのを確認したので、Cloud Runでデプロイの準備 Cloud Native Buildpacksを使用してDockerfile無しでの実装を検討したが以下の記事の通り、うまくいかなったzenn.devなので、以下のDockerfileを用意■ Dockerfile# ステージ1: 依存関係のインストールとビルドFROM node:18 AS builderWORKDIR /usr/src/app# pnpmのインストールRUN npm install -g pnpm# package.jsonとpnpm-lock.yamlをコピーCOPY package.json pnpm-lock.yaml ./# 依存関係のインストールRUN pnpm install# Prismaクライアントの生成COPY prisma ./prisma/RUN npx prisma generate# アプリケーションのソースコードをコピーCOPY . .# アプリケーションのビルドRUN pnpm run build# ステージ2: 本番環境用イメージの作成FROM node:18-alpine AS productionWORKDIR /usr/src/app# 環境変数 NODE_ENV を production に設定ENV NODE_ENV=production# pnpmのインストールRUN npm install -g pnpm# package.jsonとpnpm-lock.yamlをコピーCOPY package.json pnpm-lock.yaml ./# 本番依存関係のみをインストールRUN pnpm install# ビルドしたファイルをコピーCOPY --from=builder /usr/src/app/dist ./distCOPY --from=builder /usr/src/app/node_modules ./node_modulesCOPY --from=builder /usr/src/app/prisma ./prismaCOPY --from=builder /usr/src/app/src ./src# アプリケーションがリッスンするポート番号EXPOSE 8080CMD ["node", "dist/src/main"]上記でdocker buildしたら以下のエラーが発生PrismaClientInitializationError: Prisma Client could not locate the Query Engine for runtime "linux-musl-arm64-openssl-3.0.x".This happened because Prisma Client was generated for "darwin-arm64", but the actual deployment required "linux-musl-arm64-openssl-3.0.x".Add "linux-musl-arm64-openssl-3.0.x" to `binaryTargets` in the "schema.prisma" file and run `prisma generate` after saving it:generator client {  provider      = "prisma-client-js"  binaryTargets = ["native", "linux-musl-arm64-openssl-3.0.x"]}PrismaはLinuxとMacで実行時のbinaryTargetsを指定しないとエラーになるので、エラーに記載の通りに以下を追加■prisma/schema.prismagenerator client {  provider      = "prisma-client-js"  binaryTargets = ["native", "linux-musl-openssl-3.0.x"]}これで以下のコマンドでビルド成功$ docker build --platform linux/amd64  -t gcr.io/your-project-id/stock-keeper-backend .$ docker push gcr.io/your-project-id/stock-keeper-backend最後に以下のコマンドでデプロイ完了$ gcloud run deploy stock-keeper \  --image gcr.io/your-project-id/stock-keeper-backend2 \  --platform managed \  --region asia-northeast1 \  --allow-unauthenticated中なハマりどころの多かったが、なんとかデプロイまで出来るようになった

Nestjs + Fastify + Mercurius + PrismaでAPIサーバーを立てて、Cloud Runでデプロイする

前から記事で紹介していたサービスが公開できるレベルまで開発が完了。GitHubgithub.comURLoomaka.vercel.app使用技術web & サーバーT3 StackNext.jsApp Routerで実装tRPCTailwind CSSTypeScriptPrismaNextAuth.jsその他DatabaseSupabaseデプロイVercelサービス概要年間のスケジュールをおおまかに登録できるwebサービス1ヶ月に5つまでタスクが登録できて、1画面で1年間を確認できるログインしないでも使用可能ログインすると閲覧にパスワード機能が使用できる（ログインしない場合はURLを知っている場合は誰でも閲覧可能）機能紹介 & こだわりポイント紹介印刷ボタンを押した時にきっちり一枚になるように実装印刷ボタンを押した時にきっちり一枚になるように実装@media printを使用すれば、styleの変更が可能// 印刷プレビューを開く直前のハンドリングwindow.addEventListener('beforeprint', handleBeforePrint);// 印刷プレビューが閉じた直前のハンドリングwindow.addEventListener("afterprint", handleAfterPrint);ログインログインはNextAuth.jsで実装next-auth.js.orgアイコン系は全てemojiで表現アイコン系は全てemojiで表現。サイト全体でほぼ画像を使用していないのでパフォーマンスも結構良い感じになっている。Lighthouseの結果は以下の通りFaviconも干支で切り替わるように設定Next.jsだと簡単に画面毎に動的にFaviconを変わるように実装可能icon.tsxを配置するのみでOK。コード以下のような感じになる■ src/app/schedule/[id]/icon.tsximport { ImageResponse } from "next/og";import dayjs from "dayjs";import { JpZodiac } from "~/utils/emoji";export const size = {  width: 32,  height: 32,};export const runtime = "edge";export const contentType = "image/png";export default function Icon() {  return new ImageResponse(    (      <div        style={{          fontSize: 24,          borderRadius: "50%",          width: "100%",          height: "100%",          display: "flex",          alignItems: "center",          justifyContent: "center",          color: "#333",        }}      >        <span>{JpZodiac[(dayjs().year() + 8) % 12]} </span>      </div>    ),    {      ...size,    },  );}ちなみにOGP画像も以下みたいな感じ実装できる■ src/app/api/og/route.tsximport { ImageResponse } from "@vercel/og";export const runtime = "edge";export async function GET() {  const fontData = await fetch(    new URL("../../../../public/NotoSansJP-Bold2.ttf", import.meta.url),  ).then((res) => res.arrayBuffer());  return new ImageResponse(    (      <div        style={{          background: "white",          display: "flex",          flexDirection: "column",          alignItems: "center",          justifyContent: "center",          width: "100%",          height: "100%",          fontFamily: '"NotoSansJP"',        }}      >        <div          style={{ height: 40, backgroundColor: "#000000", width: "100%" }}        />        <div          style={{            flex: 1,            maxWidth: "80%",            display: "flex",            justifyContent: "center",            flexDirection: "column",            paddingTop: 30,            paddingBottom: 30,          }}        >          <div            style={{              fontSize: 28,            }}          >            年間スケジュール、まとめるなら          </div>          <div            style={{              fontSize: 72,              fontWeight: 800,              letterSpacing: "0.5rem",              paddingLeft: "2rem",            }}          >            OOMAKA          </div>        </div>        <div          style={{ height: 40, backgroundColor: "#000000", width: "100%" }}        />      </div>    ),    {      width: 1200,      height: 630,      fonts: [        {          name: "NotoSansJP",          data: fontData,          style: "normal",        },      ],    },  );}サービスを作成した感想個人開発でwebサービスを作ったのが久々だったので学びが多かったNext.jsのサポートしている機能が多く、痒いところにも手が届く感が凄いただやりすぎている箇所もあるのでRemix派の気持ちも分かったtRPCは最初はTypescriptでしか使えないなら微妙かなと思っていたが、Prismaとの相性が良すぎて生産性の向上に、かなり貢献したNextAuthはサーバーサイドとクライアントサイドのどちらでも認証情報が取得できてNext.jsでの認証では必須最近アプリの開発ばかりしていたが、久々に別の最新技術に触れると刺激的で楽しかった

T3 Stackで「OOMAKA」というサービスを作ったので紹介

今までPages Routerだった処理サイトをApp Routerに移行してみたの記事にしてみたnextjs.orgPRgithub.com実装App Routerに移行する場合は、以下を確認してディレクトレリを変更する必要があるnextjs.org基本はsrc/pages/schedule/[id].tsx→src/app/schedule/[id]/page.tsxみたいな感じでディレクトレリを変更すればOK 👌App RouterはReact Server Components(RSC)でレンダリングされているので対応、以下のようなコードになった■ src/app/schedule/[id]/page.tsximport { getServerAuthSession } from "~/server/auth";import { redirect } from "next/navigation";import { Template } from "~/app/_components/schedule/template";import { api } from "~/trpc/server";export default async function Page({ params }: { params: { id: string } }) {  const session = await getServerAuthSession();  const url = await api.url.exists.query({ id: params.id });  if (url === false) {    // 存在しないURLの場合はトップページに戻す    redirect("/");  }  const schedules = await api.schedule.fetch.query({ urlId: params.id });  return <Template login={!!session} schedules={schedules} id={params.id} />;}■ src/app/_components/schedule/template.tsx"use client";import { signIn, signOut } from "next-auth/react";import { useEffect, useCallback, useState } from "react";import { useRouter } from "next/navigation";import Period from "~/features/schedules/components/Period";import Items from "~/features/schedules/components/Items";import dayjs from "~/utils/dayjs";import { monthItems, getScheduleInMonth } from "~/utils/schedule";import Pagination from "~/features/schedules/components/Pagination";import { toast } from "react-toastify";import Layout from "~/components/Layout/Layout";import { type Schedule } from "@prisma/client";type Props = {  login: boolean;  id: string;  schedules: Schedule[];};export function Template(props: Props) {  const router = useRouter();  const [startDate, setStartDate] = useState(dayjs());  const [print, setPrint] = useState(false);  const months = monthItems(    Number(startDate.format("M")),    Number(startDate.year()),  );  const onLogout = useCallback(async () => {    window.localStorage.setItem("URL_ID", "");    await signOut({      callbackUrl: "/",    });  }, []);  const onToIndex = useCallback(() => {    window.localStorage.setItem("URL_ID", "");    router.push("/");  }, [router]);  const onShare = useCallback(async () => {    await global.navigator.clipboard.writeText(`${window.location.href}/share`);    toast.success("URLをコピーしました！", {      position: "top-center",      autoClose: 2000,      hideProgressBar: false,      closeOnClick: true,      pauseOnHover: true,      draggable: true,      progress: undefined,      theme: "light",    });  }, []);  const onPrint = useCallback(() => {    setPrint(true);    setTimeout(() => window.print(), 100);  }, []);  useEffect(() => {    const handleAfterPrint = () => {      setPrint(false);    };    window.addEventListener("afterprint", handleAfterPrint);    return () => {      window.removeEventListener("afterprint", handleAfterPrint);    };  }, []);  return (    <Layout>      <>        <main className="screen-container container mx-auto max-w-screen-xl gap-12 pt-3">          <div className="no-print">            <div className="absolute right-28 top-0 hidden sm:block">              <div                className="flex w-14 cursor-pointer flex-col items-center pt-3 text-xl hover:bg-blue-100"                onClick={() => void onShare()}              >                🔗                <div className="text-xxs text-center text-gray-500">シェア</div>              </div>            </div>            <div              className="absolute right-14 top-0 hidden sm:block"              onClick={() => void onPrint()}            >              <div className="flex w-14 cursor-pointer flex-col items-center pt-3 text-xl hover:bg-blue-100">                🖨️                <div className="text-xxs text-center text-gray-500">印刷</div>              </div>            </div>            <div              className="absolute right-0 top-0 hidden sm:block"              onClick={() => {                if (props.login) {                  void onLogout();                } else {                  void signIn("credentials", {                    callbackUrl: "/",                  });                }              }}            >              <div className="flex w-14 cursor-pointer flex-col items-center pt-3 text-xl hover:bg-blue-100">                {props.login ? "🔓" : "🗝️"}                <div className="text-xxs text-center text-gray-500">                  {props.login ? "ログアウト" : "ログイン"}                </div>              </div>            </div>          </div>          <div className="relative hidden justify-between sm:flex">            <Period              startDate={startDate.format()}              endDate={startDate.add(1, "years").format()}            />            <Pagination              onNext={() => setStartDate(startDate.add(1, "months"))}              onPrev={() => setStartDate(startDate.subtract(1, "months"))}            />          </div>          <div className="flex flex-col flex-nowrap justify-center pt-10 sm:flex-row sm:flex-wrap sm:justify-start">            {months.map((item, index) => (              <div                key={index}                className="item-container px-0 pb-6 sm:pb-16 sm:pr-16"              >                <Items                  urlId={props.id}                  date={item}                  defaultItems={getScheduleInMonth(item, props.schedules ?? [])}                  share={print}                />              </div>            ))}          </div>          <div className="no-print mb-10 flex justify-center">            {props.login ? (              <button                type="button"                className="mb-1 mr-1 rounded-md border border-red-700 px-5 py-2.5 text-center text-sm font-medium text-red-700 hover:bg-red-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500 dark:hover:text-white dark:focus:ring-red-800"                onClick={() => void onLogout()}              >                ログアウト              </button>            ) : (              <button                type="button"                className="mb-1 mr-1 rounded-md border border-gray-700 px-5 py-2.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-300 dark:border-gray-500 dark:text-gray-500 dark:hover:bg-gray-500 dark:hover:text-white dark:focus:ring-gray-800"                onClick={() => void onToIndex()}              >                トップページに戻る              </button>            )}          </div>        </main>      </>    </Layout>  );}修正ポイントとしては以下の部分になるRSCだとawaitが使用できるので以下のようなコードを書くことができるexport default async function Page({ params }: { params: { id: string } }) {  const session = await getServerAuthSession();  const url = await api.url.exists.query({ id: params.id });  if (url === false) {    // 存在しないURLの場合はトップページに戻す    redirect("/");  }  const schedules = await api.schedule.fetch.query({ urlId: params.id });  return <Template login={!!session} schedules={schedules} id={params.id} />;useEffectやuseStateに関してはRSCだと使用できないので、使用する場合はファイルの先頭でuse clientを宣言してClient Componentでimportする必要がある"use client";import { signIn, signOut } from "next-auth/react";import { useEffect, useCallback, useState } from "react";変更して見た感じの感想ですが、RSCにすることによって初回レンダリング時の認証やデータ取得のコードはシンプルになった、変更前と変更後のコードを比較すると以下の通り実装内容はDBのUrlのtableにアクセスして該当のデータがなけばTOPページにリダイレクト & Urlのデータに認証情報が設定している場合に一致しない場合はTOPページにリダイレクト■ 変更前function Schedule() {  const { data: sessionData } = useSession();  const router = useRouter();  const { id } = router.query;  const url = api.url.exists.useQuery({ id: String(id) });  useEffect(() => {    if (url.data === false) {      // 存在しないURLの場合はトップページに戻す      void router.push("/");    }    if (url.data.userId != "" && url.data.userId != sessionData?.user?.id) {      // userId設定のあるURLで認証情報が一致しない場合はトップページに戻す      void router.push("/");    }  }, [url.data, router, sessionData?.user?.id]);■ 変更後export default async function Page({ params }: { params: { id: string } }) {  const session = await getServerAuthSession();  const url = await api.url.exists.query({ id: params.id });  if (url === null) {    // 存在しないURLの場合はトップページに戻す    redirect("/");  }  if (url.userId != "" && url?.userId !== session?.user?.id) {    // URLのユーザーIDとログインしているユーザーIDが一致しない場合はトップページに戻す    redirect("/");  }こんな感じでuseEffectを使わなくても済むのでシンプルになるかなと思います。useEffectやuseStateを使いたい画面では必ずcomponentを分割してuse clientを宣言しないといけないのが手間だとも感じたので、今のところ凄い大きなメリットがある感じでも無いですが、App Routerじゃないと使用できない機能があったので、今回は移行してみました。

Next.jsでApp Routerに移行してみる

NextAuth.jsでログイン画面をカスタマイズしてみたので記事にするPRgithub.comgithub.com実装NextAuth.jsを使うと以下のような感じで簡単にログインを実装できる。■ src/server/auth.tsexport const authOptions: NextAuthOptions = {  providers: [    DiscordProvider({      clientId: env.DISCORD_CLIENT_ID,      clientSecret: env.DISCORD_CLIENT_SECRET,    }),    AppleProvider({      clientId: env.APPLE_ID,      clientSecret: env.APPLE_SECRET,    }),    GoogleProvider({      clientId: env.GOOGLE_CLIENT_ID,      clientSecret: env.GOOGLE_CLIENT_SECRET,    }),  ],ログインのプロバイダーは以下を参考に設定next-auth.js.org以下でsignInを参照すればログイン可能import { signIn } from "next-auth/react";<button onClick={() => signIn("credentials", {callbackUrl: "/",})}>  ログイン</button>デフォルトで以下の画像のように表示されるこれだけでも十分使用できるが、サービスのロゴや規約のリンクを表示させたい場合はカスタマイズが必要 next-auth.js.org実際にコード化してみると以下の通り以下で表示するcomponentのpathを指定■src/server/auth.tsexport const authOptions: NextAuthOptions = {  pages: {    signIn: "/auth/signin",  // ← 追加    error: "/auth/signin",    // ← 追加  },以下で実際のUIを作成■src/pages/auth/signin.tsximport type {  GetServerSidePropsContext,  InferGetServerSidePropsType,} from "next";import { getProviders, signIn } from "next-auth/react";import { getServerSession } from "next-auth/next";import { authOptions } from "~/server/auth";import { useRouter } from "next/router";import SignInError from "~/features/auth/components/SignInError";const authStyle: Record<string, { className: string; color: string }> = {  Discord: {    className: "bg-blue-600 text-white border border-blue-500",    color: "blue",  },  GitHub: {    className: "bg-gray-700 text-white border border-gray-700 ",    color: "gray",  },  Google: {    className: "bg-white text-black border border-black",    color: "gray",  },  Apple: {    className: "bg-black text-white border border-black",    color: "gray",  },};export default function SignIn({  providers,}: InferGetServerSidePropsType<typeof getServerSideProps>) {  const { error } = useRouter().query;  return (    <div>      <div className="signin-bg fixed top-0 h-screen w-screen" />      <div className="flex items-center justify-center">        <div className="container z-10 flex h-screen flex-col items-center justify-center">          <div className=" rounded-xl border bg-white px-20 py-4">            <div>              <div className="pb-10 pt-5 text-center">                <div className="signin-mini-logo-title">                  年間スケジュール、まとめるなら                </div>                <div className="signin-logo-title text-xl font-bold">                  OOMAKA                </div>              </div>              {error && (                <div className="pb-6">                  <SignInError error={String(error)}></SignInError>                </div>              )}              <div className="flex flex-col items-center pb-10">                {Object.values(providers ?? {}).map((provider) => {                  const item = authStyle[String(provider?.name)];                  return (                    <div key={provider.name}>                      <button                        className={`my-3 w-72 rounded-lg px-4 py-2 font-bold ${String(                          item?.className                        )}`}                        onClick={() => void signIn(provider.id)}                      >                        {provider.name} でログイン                      </button>                    </div>                  );                })}              </div>              <div className="pb-5 text-center text-sm text-gray-500">                利用規約およびプライバシーポリシーに同意の上、                <br />                ログインへお進みください。              </div>            </div>          </div>        </div>      </div>    </div>  );}export async function getServerSideProps(context: GetServerSidePropsContext) {  const session = await getServerSession(context.req, context.res, authOptions);  if (session) {    return { redirect: { destination: "/" } };  }  const providers = await getProviders();  return {    props: { providers: providers ?? [] },  };}props.providersに設定したプロバイダーの設定が入っているので、この情報を使用してログイン画面を作成して最終的に以下のような表示になったこれでNextAuth.jsでログイン画面をカスタマイズ完了。それっぽく出来たので満足

NextAuth.jsでログイン画面をカスタマイズしてみる

T3 Stack + Supabaseでアプリを作ってみる

前回紹介したwebアプリでT3 Stackでwebサービスを作成中。www.wheatandcat.meT3 StackでSSRを実装を試していたら、かなり簡単に実装できることに気づいたので記事化。PRgithub.com実装T3 StackでSSRする場合にどうすれば良いか分からなかったので初めはNext.jsでの実装と同様にgetServerSidePropsを使用して実装しようとしてみたが以下のtRPCのドキュメントを読んでSSRの場合は、getServerSidePropsを書かなくても実装できることが判明。trpc.io単純にcreateTRPCNextのオプションにssr: trueを設定するのみでOKだった。■src/utils/api.tsexport const api = createTRPCNext<AppRouter>({  ...(略)  },  /**   * Whether tRPC should await queries when server rendering pages.   *   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false   */  ssr: true, // ← 変更する});上記を実装することサーバーサイド側でtRPCの通信ができるようになります。ssr:falseに設定することも可能。■src/features/schedules/components/Items.tsx  const schedules = api.schedule.fetchInPeriod.useQuery(    {      urlId: props.urlId,      startDate: props.date.toDate(),      endDate: props.date.endOf("month").toDate(),    },    {      trpc: {        ssr: false, // ← 変更する      },    }  );上記の修正でOOMAKAでもSSRができるようになった。NextAuth.js • Create T3 Appコードは以下のようになった。■ src/pages/index.tsxexport const getServerSideProps: GetServerSideProps = async (ctx) => {  const session = await getServerAuthSession(ctx);  return {    props: { session },  };};function Home() {  const { data: sessionData } = useSession();Next.jsだけでもSSRはかなり簡単に実装できる印象だったが、T3 Stackはそれよりもさらに簡単に実装ができるようになっていて素晴らしい 🎉

T3 StackでSSRさせてみる

作りたいwebサービスが出来たので気になっていたT3 Stackを使用して実装してみたので紹介create.t3.ggサービスについては、まだ開発中なので、何回か記事にする予定リポジトリgithub.com作成中のWebサービスoomaka.vercel.appサービス名: OOMAKAURL: https://oomaka.vercel.app概要: 大まかに未来の予定を可視化するサービス※まだログアウトの実装がミスっているので現在修正中 😅T3 Stackとは最近、話題のWebアプリーケーション開発の構成で以下の技術を使用している。Next.jstRPCTailwind CSSTypeScriptPrismaNextAuth.jsこの構成で簡単に環境構築できるコマンドラインツールが以下で提供されている。create.t3.gg今回のサービスも上記のコマンドラインツールを使って実装使用技術 基本構成T3 StackデータベースSupabaseデプロイvercelデザインFigma実装の紹介以下のコマンドラインを実行して、環境を構築$ pnpm create t3-app@latestSupabaseの接続は環境変数（.env）を以下を設定すればOK ■ .env# Prisma# https://www.prisma.io/docs/reference/database-reference/connection-urls#envDATABASE_URL="postgresql://postgres:*****@db.*****.supabase.co:****/postgres"ログインはDiscordを使用■ .env# Next Auth Discord ProviderDISCORD_CLIENT_ID="************"DISCORD_CLIENT_SECRET="************"上記でログインとデータベースの接続は完了まずはDBの構築から実装■ prisma/schema.prismamodel Url {    id       String     @id @default(cuid())    userId   String?    schedule Schedule[]}model Schedule {    id        String   @id @default(cuid())    urlId     String    date      DateTime    day       Int?    emoji     String?  @db.VarChar(5)    text      String   @db.VarChar(10)    createdAt DateTime @default(now())    updatedAt DateTime @updatedAt    url       Url      @relation(fields: [urlId], references: [id], onDelete: Cascade)    @@index([urlId, date, day])}以下のコマンドでマイグレーションを実行$ npx prisma migrate dev --name init以下のコマンドでローカルで起動$ pnpm devログインについては以下の感じで実装できる■ src/pages/index.tsximport { signIn, signOut, useSession } from "next-auth/react";（略）  // ログインしている場合は sessionDataからログイン情報が取得できる  const { data: sessionData } = useSession();  // signIn()、signOut()を参照することでログイン/ログアウトを実装できるAPIアクセスはAPI Routesを使用 まず、APIの実装は以下の通りに実装■ src/server/api/routers/schedule.tsexport const scheduleRouter = createTRPCRouter({  (略)  fetchInPeriod: publicProcedure    .input(      z.object({        urlId: z.string(),        startDate: z.date(),        endDate: z.date(),      })    )    .query(async ({ ctx, input }) => {      const schedules = await ctx.prisma.schedule.findMany({        where: {          urlId: input.urlId,          date: {            gte: input.startDate,            lte: input.endDate,          },        },        orderBy: {          day: "asc",        },      });      return schedules;    }),上記のAPIをフロントエンドから呼ぶ場合は以下の通りに実装■ src/features/schedules/components/Items.tsx  const schedules = api.schedule.fetchInPeriod.useQuery(    {      urlId: props.urlId,      startDate: props.date.toDate(),      endDate: props.date.endOf("month").toDate(),    }  );tRPCとPrismaを使用して実装しているのでデータ取得については以下のようにコーディングで補完が効くので開発体験は、かなり良い感じに実装できる。上記のような感じでWebアプリのベース部分である認証、APIアクセス、データベースアクセスがサクッと実装できるWebアプリが出来たら以下を参考にvercelにデプロイcreate.t3.ggこれでWebアプリのリリースまで実装完了できるまとめT3 Stack はサーバーサイド、フロントエンドが一括管理できる & 型安全が簡単に担保できて、非常に開発体験が良かった。 サクッとWebアプリを作りたい時は、かなり良い感じの構成だったので、今後も使っていくと思います。

T3 Stack × Supabaseで本格的なサービスを作ってみる①

Supabaseの紹介

Slackが無料だと90日までしかメッセージを保持しなくなったので、個人開発系の通知系はDiscordに引っ越中discord.comその中で、Discord Botの開発をしてみたのでやり方を紹介今回作ったものPRgithub.com内容Discordに日本語、英語のチャンネルがあり、日本語のチャンネルに投稿すると英語のチャンネルに翻訳したメッセージを投稿するBotを作成言語はGoで作成タイトルにも記載したが、デプロイしたら無料運用は無理そうだったので、一旦ローカルで起動で動作するところまで実装翻訳はGCPのCloud Translationで実装動作は以下みたいな感じ実装Discord Botの作成は以下のサイトの通りに作成www.geeklibrary.jpDiscord Botはdiscordgoを使って実装github.comコードは以下の通りに実装■ main.gopackage mainimport (    "fmt"    "os"    "cloud.google.com/go/translate"    "github.com/bwmarrin/discordgo"    "golang.org/x/net/context"    "golang.org/x/text/language")func main() {    Token := os.Getenv("DISCORD_BOT_TOKEN")    dg, err := discordgo.New("Bot " + Token)    if err != nil {        fmt.Println("Error creating Discord session,", err)        return    }    dg.AddHandler(messageHandler)    err = dg.Open()    if err != nil {        fmt.Println("Error opening connection,", err)        return    }    fmt.Println("Bot is now running. Press CTRL+C to exit.")    select {}}func messageHandler(s *discordgo.Session, m *discordgo.MessageCreate) {    // 自分のメッセージは無視    if m.Author.ID == s.State.User.ID {        return    }    jcid := os.Getenv("JAPANESE_CHANNEL_ID")    ecid := os.Getenv("ENGLISH_CHANNEL_ID")    var l, sl language.Tag    var destinationChannelID string    if m.ChannelID == jcid {        destinationChannelID = ecid        sl = language.Japanese        l = language.English    } else if m.ChannelID == ecid {        destinationChannelID = jcid        sl = language.English        l = language.Japanese    } else {        // 対象チャンネル以外はスルー        fmt.Println("OUT")        return    }    // 翻訳処理    ctx := context.Background()    client, err := translate.NewClient(ctx)    if err != nil {        fmt.Println("Translation error:", err.Error())        return    }    defer client.Close()    resp, err := client.Translate(ctx, []string{m.Content}, l, &translate.Options{        Source: sl,        Format: translate.Text,    })    if err != nil {        fmt.Println("Translation error:", err.Error())        return    }    translatedText := resp[0].Text    // メッセージURLを生成    messageURL := fmt.Sprintf("https://discord.com/channels/%s/%s/%s", m.GuildID, m.ChannelID, m.ID)    message := messageURL + "\n" + "> " + m.Content + "\n" + translatedText    _, err = s.ChannelMessageSend(destinationChannelID, message)    if err != nil {        fmt.Println("Error sending message to Discord:", err.Error())    }}以下の環境変数を設定export DISCORD_BOT_TOKEN=xxxxxx // Discord Botのトークンexport JAPANESE_CHANNEL_ID=xxxxxx // Discordの日本語チャンネルのIDexport ENGLISH_CHANNEL_ID=xxxxxx  // Discordの英語チャンネルのIDexport GOOGLE_APPLICATION_CREDENTIALS=xxxxxx  // GCPのサービスアカウントのパス上記を設定して以下のコマンドで起動で動作する。go run main.go意外と手軽に実装できるなと思い、次にデプロイ先を検討していた。ただ、Discord側にメッセージ投稿された時にWebhookを実行する機能が無いのでDiscord Botはサーバーレスへのデプロイは難しかった。なので、EC2などの順次起動のサービスにデプロイする必要があり、それを考慮すると無料運用は難しいなとなった。無料で運用できる方法があれば、もう少し可能性がありそうだなと思ったので、今後模索していこうとかなと思います。

Discord Botで翻訳ボットを作ってみたが、無料運用ができなくて一旦ボツにした話

@storybook/react-nativeが v6.5にバージョンアップしたので移行した。結構書き方が変わったので紹介PRgithub.comStorybook v5 → v6で変わった内容Component Story Format (CSF) がサポートされたStorybookのファイルの書きからが以下のように変更。■ 既存import React from 'react';import { storiesOf } from '@storybook/react-native';import { View } from 'react-native';import Text from './';storiesOf('atoms', module).add('Text', () => (  <View>    <Text>default</Text>  </View>));■ 新規import React from 'react';import { View } from 'react-native';import Text from '.';const Story = () => (  <View>    <Text>default</Text>  </View>);export default {  title: 'atoms/Text',  component: Story,};export const Default = {};上記みたいな感じでstoriesOfは使わず、exportすることでstorybookの表示が行える。Storybook v6.5への移行作業以下の記事を参考に移行作業をした。storybook.js.orgまず、.storybookのフォルダを作成して以下のexampleのリポジトリを参考にファイルを配置github.compackage.jsonに以下を追加■ package.json  "scripts": {      ...(略)    "start-server": "react-native-storybook-server",    "storybook-generate": "sb-rn-get-stories",    "storybook-watch": "sb-rn-watcher",    "storybook": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start",    "storybook:ios": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start --ios",    "storybook:android": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start --android",次に既存のstoryファイルを移行。storybookがマイグレーション用のコマンドを用意してくれているので、以下のコマンドを実行で自動的変換できる。$ npx storybook@next migrate storiesof-to-csf --glob="src/**/*.stories.tsx"※上記のコマンドで変換されるのは、CSF1のフォーマットなので注意。現状の最新はCSF3なので、そちらに変換したい場合は、CSF1に変更後に手動で修正する必要がある（CSF1でも動作はするので、今回はこのまま実装）memoirには既存で以下のように、1つのstoryファイルに複数のComponentのstoryを表示しているファイルがあった。以下のようなファイルはコマンドではうまく変換できなかった。■ src/components/organisms/Memoir/stories.tsximport React from 'react';import { storiesOf } from '@storybook/react-native';(略)storiesOf('organisms/Memoir/DateCards', module)  .add('default', () => (    <View style={styles.root}>      <DateCards {...props()} />    </View>  ))  .add('loading', () => (    <View style={styles.root}>      <DateCards {...props()} loading />    </View>  ));storiesOf('organisms/Memoir', module).add('Card', () => (  <Card    {...item()}    user={{      id: 'test',      displayName: 'suzuki',      image: 'https://placehold.jp/150x150.png',    }}  />));storiesOf('organisms/Memoir/ScreenShot', module).add('default', () => (  <View style={styles.root}>    <ScreenShot {...screenShotProps()} />  </View>));CSFは1ファイル、1Componentのフォーマットになっているので、以下のスクリプトを作成して、既存のstories.tsxをrename■ scripts/storybookRename/main.jsconst fs = require('fs');const path = require('path');const dirPath = 'src/components';const traverseDirectory = (dir, callback) => {  fs.readdirSync(dir).forEach((file) => {    const fullPath = path.resolve(dir, file);    if (fs.lstatSync(fullPath).isDirectory()) {      traverseDirectory(fullPath, callback);    } else {      callback(fullPath);    }  });};traverseDirectory(dirPath, (filePath) => {  const dirname = path.dirname(filePath);  const basename = path.basename(filePath);  if (basename === 'stories.tsx') {    const newBasename = `${path.basename(dirname)}.${basename}`;    const newPath = path.resolve(dirname, newBasename);    fs.renameSync(filePath, newPath);    console.log(`Renamed: ${filePath} --> ${newPath}`);  }});上記のスクリプトを実行して、stories.tsx→Text.stories.tsxにrenameしてフォーマットをCSFに合わせていった。CSFの変換完了後は以下のコマンドで実行。まず、以下のコマンドでstorybook-serverを起動。$ yarn start-server次に以下のコマンドでstorybookを起動。$ yarn storybook:iosこれで以下の通りに起動ができた。@storybook/react-nativeはv5で大分更新が止まっていたのでweb版に移行も検討していた。ただ、web版だとNative固有のコードが動かせないので困るなーと思っていたので更新がきてよかったです。

@storybook/react-native v6.5にバージョンアップ

tRPCの紹介

Plasmoの紹介

Playwrightの紹介

右手が腱鞘炎になったエンジニアを支える技術

Vitestの紹介

TauriでカスタマイズしたTODOアプリを作ってみる

1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。詳しい開発のログは以下のスクラップにまとめています 👌https://zenn.dev/wheatandcat/scraps/78d2c5aa4c9435 リリースしたアプリダウンロードはこちら。■ iOShttps://apps.apple.com/jp/app/memoir/id1613532672■ Androidhttps://play.google.com/store/apps/details?id=com.wheatandcat.memoir LPサイトhttps://memoi...

【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた

React Native製、予定作成アプリ「ペペロミア」を公開しました以前記事にしたペペロミアが公開してから1年経ったので振り返りも兼ねて記事にまとめてみました。個人プロダクトのアーキテクトとかの参考になれば良いかなと思います。主に使用している技術アプリE...

React Nativeで作ったアプリをリリースしてから1年経ったので振り返ってみる

以前Qiitaで紹介したアプリペペロミアにダークモードを実装してみたので、実装方法について紹介します。■ React Native製、予定作成アプリ「ペペロミア」を公開しましたhttps://qiita.com/wheatandcat/items/3324dfd1417...

React Native製の公開しているアプリにダークモードを実装してみた

以前、「React Native製、予定作成アプリ「ペペロミア」を公開しました」の記事を投稿しましたが、その続編です。■React Native製、予定作成アプリ「ペペロミア」を公開しましたhttps://qiita.com/wheatandcat/items/3324...

エンジニアでも出来る！Figmaを使って自作アプリをリニューアル

個人で開発していたアプリがApple StoreとGoogle Play Storeで公開するまでいけたので、公開までの話を紹介していきます。ソースコードをGitHubで公開しているので、興味のある人は手元で動かして頂ければと思います。手もとで実行する手順...