wheatandcat

概要前回の記事では、SwiftUI で RSS リーダーを作ってみた。RSS フィードの表示 / 非表示を切り替える設定を追加したので紹介する。www.wheatandcat.mePRgithub.com追加機能Config 画面に RSS フィードの表示 / 非表示を切り替えるトグルを追加設定データの保持には UserDefaults を使用UserDefaultsとはdeveloper.apple.comUserDefaults はアプリ上のデータを永続的に保存したい時に使用現状の SwiftUI には AppStorage という、同じくデータを永続的に保存できるものがあるが、こちらは View 用に簡略化して使用できるものという認識実装Model を変更時に UserDefaults で保存するように修正RssFeedReader/Modules/FeedViewModel.swiftfinal class FeedViewModel: ObservableObject {    // 省略    private enum DefaultsKey {        static let feeds = "feeds.v1"    }    func saveFeeds() {        do {            let data = try JSONEncoder().encode(feeds)            UserDefaults.standard.set(data, forKey: DefaultsKey.feeds)        } catch {            print("❌ Failed to save feeds:", error)        }    }}FeedViewModel クラスに saveFeeds メソッドを追加UserDefaults の feeds.v1 のキーで feeds の JSON エンコードしたデータを保存final class FeedViewModel: ObservableObject {    @Published var feeds: [Feed] = [] {        didSet {            saveFeeds()        }    }}feeds に didSet を設定新しい値が代入されるたびに saveFeeds が呼ばれ、UserDefaults に保存される起動時に Model に保存したデータを読み込ませるRssFeedReader/Modules/FeedViewModel.swiftfinal class FeedViewModel: ObservableObject {    // 省略    func loadFeeds() {        guard            let data = UserDefaults.standard.data(forKey: DefaultsKey.feeds)        else {            feeds = []            return        }        do {            feeds = try JSONDecoder().decode([Feed].self, from: data)        } catch {            print("❌ Failed to load feeds:", error)            feeds = []        }    }}UserDefaults の feeds.v1 のキーにデータが存在すれば JSON デコードして feeds に設定init() {    loadFeeds()    // 初回起動で空ならデフォルトを入れる    if feeds.isEmpty {        feeds = Self.defaultFeeds    }}起動時に保存されていたデータが feeds に復元される表示 / 非表示の UI を作成RssFeedReader/Pages/SettingView.swiftstruct SettingView: View {    @ObservedObject var vm: FeedViewModel    List {        Section("RSSフィード") {            ForEach($vm.feeds, id: \.self) { $feed in                Toggle(isOn: $feed.show) {                    Text(feed.url)                        .lineLimit(1)                        .truncationMode(.middle)                }                .toggleStyle(.switch)            }        }    }}show の値を Toggle にバインドして表示 / 非表示を切り替えfunc reloadAll() async {    await withTaskGroup(of: (String, [FeedItem]).self) { group in        for feed in feeds {            group.addTask {                if feed.show == false { return (feed.url, []) }                return (feed.url, [])            }        }    }}RSS フィード取得時に show == false のものは取得しないまとめ上記の実装で RSS フィードの表示 / 非表示の機能が実装できた実際にアプリを作ってみると、React で実装する時との思想の違いがよく分かって面白かったReact と SwiftUI を比較すると、SwiftUI の方が View とロジックをしっかり分割する思想に感じている

SwiftUIでMacアプリを作ってみる②：UserDefaultsでデータを保持する

概要習慣として、いくつかの技術系情報サイトを定期的に巡回している。ただ、チェックするサイトが増えてくるにつれ、毎回タブを開くのが面倒新着記事を見逃しがち本当に読みたい記事だけを効率よく追えないといった不満が出てきた。それなら RSSリーダーを自作して、自分好みにカスタマイズした方が早いのでは？ と思い、アプリ開発を始めた。どうせ作るなら Mac アプリにしたいと思い、今回初めて Xcode + SwiftUI を使って開発してみたので、その所感をまとめる。リポジトリhttps://github.com/wheatandcat/RssFeedReaderForMac作成中のアプリ画面構成は上記のようなシンプルな構成RSS Feed の URL を登録して記事一覧を表示するだけの最小実装今後、表示形式や操作性をカスタマイズしていく予定SwiftUIを使ってみた所感https://developer.apple.com/jp/swiftui/今回が初めての SwiftUI 開発だったが、言語仕様や設計思想がよく整理されていて、思った以上にスムーズに開発できた。普段触っている React Native / Flutter と比較して、特に良いと感じた点を挙げる。Xcodeのプレビュー機能開発体験として特に良かったのが、Xcode の プレビュー機能。View のコードを書きながら、リアルタイムで UI を確認できるため、React Native の場合は Storybook を用意するケースが多いが、準備コストなしでここまで快適に確認できるのは Xcode の強みだと感じた。クロージャで直感的なコードが書けるReact で Button コンポーネントを使う場合、例えば以下のように書く。<Button  title="保存"  onPress={() => save()}/>同じことを SwiftUI で書くと、次のようになる。Button("保存") {    save()}実際には以下のようなコードだが、Button("保存", action: {    save()})SwiftUI では条件を満たすとクロージャの一部を省略できるため、View に対して action が一つだけ存在するケースでは、標準機能だけで完結する開発体験React Native や Flutter では、iOS / Android の両対応各プラットフォーム差異の吸収が前提になるため、どうしてもサードパーティライブラリへの依存が増えがちになる。一方 SwiftUI は Apple のファースト環境であり、標準コンポーネントが充実しているOS との統合が自然「余計なことを考えなくていい」場面が多いといった点で、細かな開発体験の差を強く感じた。まとめ『達人プログラマー』に  「毎年新しい言語を一つ学ぶ」という話が出てくるが、今回 SwiftUI を触ってみて、その意味を実感できた。当面は、SwiftUI 周りの記事を書いていこうと思った。

SwiftUIでRSSリーダーをMacアプリ作ってみる①

概要前回の記事で必要な API を用意したので、今回は実際の機能を実装。ショートカット経由でワンタップ保存を実現する。www.wheatandcat.mePRgithub.com自作した Chrome 拡張chromewebstore.google.comモチベーション前回の記事を参照。www.wheatandcat.me設計前回作成した API を前提に、以下を実装。API Key 登録 UI の追加iOS のショートカットから API Key 経由でアイテム登録www.wheatandcat.me実装UI を作成Chrome 拡張のオプション画面に API Key の登録 と 一覧表示 を追加（コードは PR を参照）。■ API Key 登録■ API Key 一覧表示アイテム登録 API は既にデプロイ済み。token に登録済みの API Key を指定すれば登録可能。curl --location 'https://axctfbvzkacuxfhfsjic.supabase.co/functions/v1/create-item?url=https%3A%2F%2Fgithub.com%2Fwheatandcat%2FMarkyLinky&token=***********************************'iOS のショートカットを作成前回の記事で作成したショートカットを流用し、名称を MarkyLinkyにアイテム追加 に変更。www.wheatandcat.meアクションの URL の内容を取得 / URL エンコード に、上記 アイテム登録 API を設定。共有シートから受け取った URL を url パラメータに、拡張の API Key を token に差し込む。実演例として iPhone の TechFeed で記事閲覧中に保存したいケース。記事を開く。共有ボタン → MarkyLinkyにアイテム追加 をタッチ。Chrome 拡張側にもアイテムが追加される。まとめ共有シート → ショートカット → API Key経由で登録 という流れで、iPhone からもワンタップ保存を実現iOS の共有シートを直接扱うには通常アプリ拡張が必要だが、コストが高いケースではショートカット連携が有効

APIキーを使用してiOSのショートカット経由からwebページを登録できるようにする

概要前に自作した Chrome 拡張の紹介記事を書いたが、そのアプリに API Key の生成 と API Key 経由での Web ページ登録 API を追加した。www.wheatandcat.me実装には Supabase Edge Functions を採用。設計と実装手順を残す。PRgithub.com自作した Chrome 拡張chromewebstore.google.comモチベーションMarkyLinky は Web ページを保存/削除し、Markdown のリンクに変換してコピーできる Chrome 拡張。ログインすれば別ブラウザでも共有可能。仕事で技術記事のストック→共有に使っている。共有後すぐ削除できる UX が便利。課題は Chrome拡張機能前提 な点。iPhone/Android で閲覧中にワンステップで保存できない。API Key の生成 + API Key 経由登録 と、以前書いた ショートカット経由で直接 API 実行 を組み合わせ、iPhone からもワンステップ保存を狙った。www.wheatandcat.me本記事ではその中核である 「API Key の生成」と「API Key 経由登録」 を Supabase Edge Functions で実装した部分に絞って解説。Supabase Edge Functionssupabase.comSupabase が提供するサーバーレス関数。ランタイムは Supabase Edge Runtime（Deno 互換）。今回は Auth と DB を Supabase に寄せているため、API も同じ基盤で統一。Supabase CLI でローカル検証が容易。設計作る API は 2 つ。API Key 生成 APISupabase Auth で認証済みのときのみ実行可能db: api_tokens に ユーザーID と トークン を保存トークンは重複なしのランダム文字列API Key 経由でアイテム登録する API認証不要（トークン + URL を受け付け）受け取ったトークンから api_tokens を引いてユーザーを特定し items に登録URL から title と favicon URL を解析して保存実装Supabase のローカル環境構築プロジェクト初期化。supabase initスタック起動（Postgres, Kong, Studio などが立ち上がる）。supabase startStudio へのアクセス（出力ログの URL を開く）。open http://127.0.0.1:54323マイグレーション作成マイグレーション雛形を作成。supabase migration new api_tokens生成物。supabase  └── migrations      └── 20251215140600_api_tokens.sqlapi_tokens テーブルと RLS ポリシーを定義。■ supabase/migrations/20251215140600_api_tokens.sqlcreate table if not exists api_tokens (  id bigint primary key generated always as identity,  uuid uuid not null,  title text not null,  token text not null unique,  created timestamptz default now());CREATE POLICY "Users can select their own api tokens"ON public.api_tokensFOR SELECTUSING (auth.uid() = uuid);CREATE POLICY "Users can insert their own api tokens"ON public.api_tokensFOR INSERTWITH CHECK (auth.uid() = uuid);CREATE POLICY "Users can update their own api tokens"ON public.api_tokensFOR UPDATEWITH CHECK (auth.uid() = uuid);CREATE POLICY "Users can delete their own api tokens"ON public.api_tokensFOR DELETEUSING (auth.uid() = uuid);ローカルに反映。supabase migration upStudio でテーブル作成を確認。本番へ反映。supabase db push型の自動生成。supabase gen types typescript --local > schema.tsEdge Functions（API Key 生成）関数雛形を作成。supabase functions new create-token構成。supabase  └── functions        └── create-token            ├── deno.json            └── index.tsindex.ts に実装。ユニークキー生成（Base64URL）、重複時リトライ、Auth ヘッダー連携を含む。■ supabase/functions/create-token/index.tsimport "jsr:@supabase/functions-js/edge-runtime.d.ts";import { createClient } from "npm:@supabase/supabase-js@2";const corsHeaders = {  "Access-Control-Allow-Origin": "*",  "Access-Control-Allow-Headers":    "authorization, x-client-info, apikey, content-type",};function toBase64Url(bytes: Uint8Array): string {  const b64 = btoa(String.fromCharCode(...bytes));  return b64.replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "");}function generateApiKey(): string {  const bytes = new Uint8Array(32);  crypto.getRandomValues(bytes);  return toBase64Url(bytes);}function isPostgrestError(err: unknown): err is {  code?: string;  message?: string;  details?: string;  hint?: string;} {  return typeof err === "object" && err !== null && "message" in err;}function getErrorMessage(err: unknown): string {  if (isPostgrestError(err) && typeof err.message === "string") {    return err.message;  }  if (err instanceof Error) return err.message;  return String(err);}function isUniqueViolation(err: unknown): boolean {  return isPostgrestError(err) && err.code === "23505";}Deno.serve(async (req) => {  if (req.method === "OPTIONS") {    return new Response("ok", { headers: corsHeaders });  }  const authorizationHeader = req.headers.get("Authorization");  if (!authorizationHeader) {    return new Response("Unauthorized", { status: 401, headers: corsHeaders });  }  const token = authorizationHeader.replace("Bearer ", "");  try {    const { title } = await req.json();    if (!title) {      return new Response(        JSON.stringify({          error: "title is required and must be a non-empty string",        }),        {          headers: { ...corsHeaders, "Content-Type": "application/json" },          status: 400,        },      );    }    const supabaseClient = createClient(      Deno.env.get("SUPABASE_URL") ?? "",      Deno.env.get("SUPABASE_ANON_KEY") ?? "",      {        global: { headers: { Authorization: authorizationHeader } },      },    );    const { data: userData, error: userError } = await supabaseClient.auth      .getUser(token);    if (userError) throw userError;    const user = userData?.user;    if (!user) {      return new Response("Unauthorized", {        status: 401,        headers: corsHeaders,      });    }    const maxRetries = 5;    for (let i = 0; i < maxRetries; i++) {      const apiKey = generateApiKey();      try {        const { error } = await supabaseClient          .from("api_tokens")          .insert({            uuid: user.id,            title,            token: apiKey,          })          .select("token")          .single();        if (error) throw error;        return new Response(          JSON.stringify({ token: apiKey }),          {            headers: { ...corsHeaders, "Content-Type": "application/json" },            status: 200,          },        );      } catch (err) {        if (isUniqueViolation(err)) continue;        return new Response(          JSON.stringify({ error: getErrorMessage(err) }),          {            headers: { ...corsHeaders, "Content-Type": "application/json" },            status: 400,          },        );      }    }    return new Response(      JSON.stringify({ error: "could_not_generate_unique_key" }),      {        headers: { ...corsHeaders, "Content-Type": "application/json" },        status: 500,      },    );  } catch (error) {    return new Response(      JSON.stringify({ error: getErrorMessage(error) }),      {        headers: { ...corsHeaders, "Content-Type": "application/json" },        status: 400,      },    );  }});ローカル起動。supabase functions serve --no-verify-jwtStudio から認証済みユーザーを作成し、アクセストークンを取得。USER=xxxxx PASSWORD=xxxxxACCESS_TOKEN=$(curl -s -X POST "$(supabase status --output json | jq -r '.API_URL')/auth/v1/token?grant_type=password"   -H "apikey: $(supabase status --output json | jq -r '.ANON_KEY')"   -H "Content-Type: application/json"   -d '{"email":"'"${USER}"'","password":"'"${PASSWORD}"'"}' | jq -r '.access_token')curl -H "Authorization: Bearer $ACCESS_TOKEN"   "$(supabase status --output json | jq -r '.API_URL')/functions/v1/create-token"   -H "Content-Type: application/json"   -d '{"title":"test"}'テーブルにレコードが入ることを確認。Edge Functions（API Key 経由登録）雛形。supabase functions new create-itemapi_tokens を引き、URL のメタを解析して items に登録する関数を実装。プライベートネットやメタデータエンドポイント等への SSRF を簡易ブロック。■ create-item の実装例supabase/functions/create-item/index.tsimport "jsr:@supabase/functions-js/edge-runtime.d.ts";import { createClient } from "npm:@supabase/supabase-js@2";function isHttpUrl(input: string): boolean {  try {    const u = new URL(input);    return u.protocol === "http:" || u.protocol === "https:";  } catch {    return false;  }}function isBlockedHost(hostname: string): boolean {  const h = hostname.toLowerCase();  if (h === "localhost" || h.endsWith(".localhost")) return true;  if (h === "127.0.0.1" || h === "0.0.0.0") return true;  if (h.startsWith("10.")) return true;  if (h.startsWith("192.168.")) return true;  if (h.startsWith("172.")) {    const parts = h.split(".");       const second = Number(parts[1]);    if (!Number.isNaN(second) && second >= 16 && second <= 31) return true;  }  if (h === "::1") return true;  if (h === "169.254.169.254") return true;  return false;}function extractTitle(html: string): string | null {  const m = html.match(/<title[^>]*>([\s\S]*?)<\/title>/i);  if (!m) return null;  return decodeHtmlEntities(m[1].trim()).slice(0, 200);}function extractFaviconHref(html: string): string | null {  const relPriority = [    "icon",    "shortcut icon",    "apple-touch-icon",    "apple-touch-icon-precomposed",  ];  const links = [...html.matchAll(/<link\b[^>]*>/gi)].map((m) => m[0]);  type Candidate = { rel: string; href: string };  const candidates: Candidate[] = [];  for (const tag of links) {    const rel = (tag.match(/\brel\s*=\s*["']([^"']+)["']/i)?.[1] ?? "")      .toLowerCase().trim();    const href = (tag.match(/\bhref\s*=\s*["']([^"']+)["']/i)?.[1] ?? "")      .trim();    if (!rel || !href) continue;    if (rel.includes("icon")) {      candidates.push({ rel, href });      continue;    }    if (relPriority.includes(rel)) {      candidates.push({ rel, href });      continue;    }  }  candidates.sort((a, b) => {    const ai = relPriority.indexOf(a.rel);    const bi = relPriority.indexOf(b.rel);    return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);  });  return candidates[0]?.href ?? null;}function resolveUrl(baseUrl: string, maybeRelative: string): string {  try {    return new URL(maybeRelative, baseUrl).toString();  } catch {    return maybeRelative;  }}function decodeHtmlEntities(s: string): string {  return s    .replaceAll("&amp;", "&")    .replaceAll("&lt;", "<")    .replaceAll("&gt;", ">")    .replaceAll("&quot;", '"')    .replaceAll("&#39;", "'");}async function fetchHtmlWithLimits(  url: string,  timeoutMs = 8000,  maxBytes = 512_000,) {  const controller = new AbortController();  const t = setTimeout(() => controller.abort(), timeoutMs);  try {    const res = await fetch(url, {      signal: controller.signal,      redirect: "follow",      headers: {        "User-Agent": "meta-extractor/1.0",        "Accept": "text/html,application/xhtml+xml",      },    });    const finalUrl = res.url;    const contentType = res.headers.get("content-type") ?? "";    if (!contentType.toLowerCase().includes("text/html")) {      throw new Error(`Not HTML content-type: ${contentType}`);    }    const reader = res.body?.getReader();    if (!reader) throw new Error("No response body");    const chunks: Uint8Array[] = [];    let total = 0;    while (true) {      const { value, done } = await reader.read();      if (done) break;      if (!value) continue;      total += value.byteLength;      if (total > maxBytes) throw new Error(`HTML too large (> ${maxBytes} bytes)`);      chunks.push(value);    }    const all = new Uint8Array(total);    let offset = 0;    for (const c of chunks) {      all.set(c, offset);      offset += c.byteLength;    }    const html = new TextDecoder().decode(all);    return { html, finalUrl };  } finally {    clearTimeout(t);  }}const corsHeaders = {  "Access-Control-Allow-Origin": "*",  "Access-Control-Allow-Headers":    "authorization, x-client-info, apikey, content-type",};Deno.serve(async (req) => {  const requestUrl = new URL(req.url);  const url = requestUrl.searchParams.get("url");  const token = requestUrl.searchParams.get("token");  if (!url || !token) {    return new Response(      JSON.stringify({ error: "url and token are required" }),      { headers: { "Content-Type": "application/json" } },    );  }  if (!isHttpUrl(url)) {    return new Response(      JSON.stringify({ error: "url is required (http/https)" }),      { headers: { "Content-Type": "application/json" } },    );  }  const u = new URL(url);  if (isBlockedHost(u.hostname)) {    return new Response(JSON.stringify({ error: "blocked host" }), {      headers: { "Content-Type": "application/json" },    });  }  const supabaseClient = createClient(    Deno.env.get("SUPABASE_URL") ?? "",    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "",  );  try {    const { data, error } = await supabaseClient      .from("api_tokens")      .select("*")      .eq("token", token)      .single();    if (error) throw error;    if (!data) throw new Error("token not found");    const { html, finalUrl } = await fetchHtmlWithLimits(url);    const title = extractTitle(html) ?? "";    const faviconHref = extractFaviconHref(html);    const favIconUrl = faviconHref      ? resolveUrl(finalUrl, faviconHref)      : resolveUrl(finalUrl, "/favicon.ico");    const { error: itemError } = await supabaseClient.from("items").insert({      uuid: data.uuid,      url,      title,      favIconUrl,    });    if (itemError) throw itemError;    return new Response(      JSON.stringify({ title, favIconUrl }),      {        headers: { ...corsHeaders, "Content-Type": "application/json" },        status: 200,      },    );  } catch (error: any) {    return new Response(      JSON.stringify({ error: String(error?.message ?? error) }),      {        headers: { ...corsHeaders, "Content-Type": "application/json" },        status: 400,      },    );  }});動作確認。curl --location 'http://127.0.0.1:54321/functions/v1/create-item?url=https%3A%2F%2Fgithub.com%2Fwheatandcat%2FMarkyLinky%2Fissues%2F29&token=*****'想定レスポンス。{  "title": "APIキーの生成と登録のAPIの仕組みを作成 · Issue #29 · wheatandcat/MarkyLinky · GitHub",  "favIconUrl": "https://github.githubassets.com/favicons/favicon.svg"}デプロイ。supabase functions deploy create-tokensupabase functions deploy --no-verify-jwt create-item  # API Key 経由で叩くため --no-verify-jwt を付与まとめSupabase はローカル構築が簡単で、Auth/DB/Functions を一体で扱えるEdge Functions で API Key 生成 と Key 経由登録 を最小構成で実装できた

Supabase Edge FunctionsでAPI Keyの生成とAPI Key経由でのwebページ登録の仕組みを実装

概要妻にイラストを渡されて、この鳥に虹色のゲロを吐かせたいというクレイジーな依頼を受けました。元ネタは、あのアスキーアートです。dic.pixiv.net試しにcssで作ってみたら好評だったので、いろいろなパターンを作ってみました。リポジトリgithub.comweb sitewheatandcat.github.io折角なので、作成した CSS をまとめて GitHub Pages で公開。実装今回のコードは CodePen に公開しているので、それを元に解説。codepen.io①. 背景色のみ設定See the Pen oe bird simple by wheatandcat (@wheatandcat) on CodePen.透過画像の上に div を重ねて background-color を指定すると、透過部分に色を敷ける。②. 背景色を虹色に設定See the Pen oe bird gradation by wheatandcat (@wheatandcat) on CodePen.linear-gradient() で虹色グラデーションを作成。③. 背景色を虹色でアニメーションSee the Pen oe bird animation 01 by wheatandcat (@wheatandcat) on CodePen.animation を使って背景をループアニメーション。  animation と @keyframes のセットが必要。@keyframes seamless-loop {  0%   { background-position: 0% 0; }  100% { background-position: 200% 0; }}.rainbow-beam {  background: linear-gradient(    to right,    #ff0000,    #ff7f00,    #ffff00,    #00ff00,    #00ffff,    #0000ff,    #8b00ff,    #ff0000  );  /* アニメ中も色帯を切らさないよう 200% に拡張 */  background-size: 200% 100%;  animation: seamless-loop 2s linear infinite;}    ④. 下方向へ流れるアニメーションSee the Pen oe bird animation 02 by wheatandcat (@wheatandcat) on CodePen.デフォルトでは横に流れるので、rotate（または transform: rotate()）で角度を変えて下方向へ。transform: rotate(-90deg);ここまでで元依頼は達成。ただしイラスト × CSS の相性が面白かったので、さらに遊んでみました。⑤. 虹色を高速逆流See the Pen oe bird animation 03 by wheatandcat (@wheatandcat) on CodePen.animation-duration を短くして速度を上げる。animation: seamless-loop 1s linear infinite;    ⑥. 画像を震えさせるSee the Pen oe bird quake by wheatandcat (@wheatandcat) on CodePen.transform と animation の組み合わせでブルッと震える表現。⑦. 枠にエフェクト（炎風）See the Pen oe bird fire by wheatandcat (@wheatandcat) on CodePen.filter: drop-shadow で画像に影を付け、擬似的な炎の縁取りを作る。⑧. 画像の色相をアニメーションSee the Pen oe bird hue by wheatandcat (@wheatandcat) on CodePen.filter: hue-rotate() で色相を回し、サイケ風のアニメに。⑨. 画像を白黒風にSee the Pen oe bird sepia by wheatandcat (@wheatandcat) on CodePen.filter: grayscale(100%) で白黒化。⑩. ブレンドモードSee the Pen oe bird blend 01 by wheatandcat (@wheatandcat) on CodePen.  See the Pen oe bird blend 02 by wheatandcat (@wheatandcat) on CodePen.  See the Pen oe bird blend 03 by wheatandcat (@wheatandcat) on CodePen.mix-blend-mode を指定すると、背景との合成方法を変更できる。Adobe 製品の「ブレンドモード」を CSS で指定するイメージ。⑪. 横に動かすSee the Pen oe bird move 01 by wheatandcat (@wheatandcat) on CodePen.translateX() と animation の組み合わせでスライド。.move {  animation: peek 5s ease-in-out infinite;  display: inline-block;  overflow: hidden;}/* 顔出し → 止まる → 引っ込む → 顔出し → 止まる → ゆっくり通過 */@keyframes peek {  0%   { transform: translateX(-300px); }  15%  { transform: translateX(-120px); }  25%  { transform: translateX(-120px); }  35%  { transform: translateX(-300px); }  45%  { transform: translateX(-80px); }  55%  { transform: translateX(-80px); }  100% { transform: translateX(320px); }}    ⑫. アニメーションで反転See the Pen oe bird move 02 by wheatandcat (@wheatandcat) on CodePen.rotateY() で Y 軸反転。⑬. 動きの応用See the Pen oe bird move 03 by wheatandcat (@wheatandcat) on CodePen.⑪・⑫の応用で複合的な動きに。⑭. カメラ移動アニメーションSee the Pen oe bird move 05 by wheatandcat (@wheatandcat) on CodePen.object-view-box でズームや表示領域を制御し、アニメと組み合わせてカメラ移動のように見せる。⑮. 波アニメーションSee the Pen oe bird wave by wheatandcat (@wheatandcat) on CodePen.複数要素を並べ、scale と translateY を組み合わせると波のような表現に。⑯. ホロ加工アニメーションSee the Pen oe bird shiny by wheatandcat (@wheatandcat) on CodePen.CSS だけでやるには少しトリッキーだが、以下のように背景に多数の div を敷き詰め、hue-rotate を回してホログラム風に見せる。<div class="detail">  <div class="beam">    <div></div>  </div>  <img src="http://starship.174cm.com/illust/oe/oe.png" alt="Bird" class="bird" /></div>.beam {  display: flex;  flex-wrap: wrap;  justify-content: flex-end;  align-items: flex-end;}@keyframes hue {  from { filter: hue-rotate(0deg); }  to   { filter: hue-rotate(360deg); }}.beam > div {  width: 15px;  height: 15px;  animation: hue 0.5s infinite linear;  border: 0.5px solid #989797;  filter: hue-rotate(0deg);}/* 子要素を 4 つごとに色分け */.beam > div:nth-child(4n + 1) { background: #ff595e; }.beam > div:nth-child(4n + 2) { background: #ffca3a; }.beam > div:nth-child(4n + 3) { background: #8ac926; }.beam > div:nth-child(4n + 4) { background: #5eafe2; }    まとめ遊びで始めたが、やってみると CSS の奥深さを再確認できた。  今後もおもしろい使い方を見つけたら、定期的にサイトをアップデートしていこうと思う。

オエー鳥で学ぶcss講座

概要以前、iOSでショートカット経由で共有シートからAPIを実行する方法を紹介した。今回はそのAndroid版をまとめる。www.wheatandcat.meAndroidでは Web Share Target API を実装するのが手軽なので、PWA化したWebサイトに組み込んで検証した。Web Share Target APIw3c.github.ioWeb Share Target API は共有ボタン押下時に共有先としてWebアプリを選べる仕組み。選択されたURLやタイトルなどの情報を受け取れる。実装すると画像の赤枠で選択できるようになる。ネイティブで同様のことをする場合は Android アプリを作成し Intent を実装する必要があり開発コストがかかる。developer.android.comそこで今回は PWA に Web Share Target API を実装。リポジトリgithub.com使用技術React + PWA + Vite + Tailwind CSS実装以下を参考に、React + Vite でPWA環境を用意。vite-pwa-org.netlify.app1. manifest に share_target を追加■ public/manifest.webmanifest{  "share_target": {    "action": "/share-target",    "method": "POST",    "enctype": "application/x-www-form-urlencoded",    "params": {      "title": "title",      "text": "text",      "url": "url"    }  }}2. Service Worker で受信してリダイレクト■ public/sw.jsself.addEventListener("fetch", (event) => {  const url = new URL(event.request.url);  if (event.request.method === "POST" && url.pathname === "/share-target") {    event.respondWith(      (async () => {        const formData = await event.request.formData();        const title = formData.get("title") || "";        const text = formData.get("text") || "";        const urlParam = formData.get("url") || text || "";        const params = new URLSearchParams();        if (title) params.set("title", title);        if (text) params.set("text", text);        if (urlParam) params.set("url", urlParam);        // 受信データをクエリに載せて画面へリダイレクト        return Response.redirect(`/?${params.toString()}`, 303);      })()    );    return;  }});3. React 側でクエリから取り出して表示■ src/App.tsxconst getShareDataFromLocation = () => {  const params = new URLSearchParams(window.location.search);  return {    title: params.get("title") ?? "",    text: params.get("text") ?? "",    url: params.get("url") ?? "",  };};function App(): JSX.Element {  const [shareData, setShareData] = useState<ShareData | null>(() =>    getShareDataFromLocation()  );  // ...}動作確認（デモ）完成物は以下で試せる。share-target-demo.vercel.app検証手順:Android 端末で以下の QR を読み取る → デモを開く画面の「ホーム画面に追加」をタップホームにPWAが追加される任意のWebページで共有ボタン → 「Share Target API」を選択共有された URL などがクエリで渡り、画面に表示されるまとめAndroid では Web Share Target API により PWA を共有先として選べるService Worker で受け取り → 画面へリダイレクト → React でクエリを読むだけで実装は完結iOS 非対応だが、Web サービスでもアプリ的な共有連携が組めるのは便利

Androidで使用できるWeb Share Target APIを実装

Expo SDK 54にバージョンアップ + Expo GlassEffectを試してみる概要Expo SDK 54 がリリースされたので移行し、合わせて iOS の Liquid Glass 表現と expo-glass-effect を試した内容をまとめる。PRgithub.comExpo SDK 54expo.dev実装以下のコマンドで主要パッケージを更新。npx expo install expo@^54.0.0 --fix続いて警告や非推奨の指摘を解消。npx expo-doctor警告解消後もビルドでエラーが出たため、expo-web-browser をプラグインに追加。■ app.config.tsplugins: [  // ...省略  "expo-web-browser",  // ← 追加],ここまででアプリは起動できた。Androidは見た目に変化なしだが、iOS は iOS26 で起動するとヘッダーが Liquid Glass 仕様に変わる。 Android  iOS      www.apple.comExpo GlassEffectを試してみるiOS26 で追加された演出に関連して、expo-glass-effect を試す。docs.expo.dev以下のコードで View と GlassView を並べて比較。import { GlassView } from "expo-glass-effect";import { Image, StyleSheet, Text, View } from "react-native";export default function App() {  return (    <View style={styles.container}>      <Image        style={styles.backgroundImage}        source={{          uri: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",        }}      />      {/* Basic View */}      <View style={styles.view}>        <Text>test</Text>      </View>      {/* Basic Glass View */}      <GlassView style={styles.glassView}>        <Text>test</Text>      </GlassView>      {/* Glass View with clear style */}      <GlassView style={styles.tintedGlassView} glassEffectStyle="clear">        <Text>test</Text>      </GlassView>    </View>  );}const styles = StyleSheet.create({  container: {    flex: 1,  },  backgroundImage: {    width: "100%",    height: "100%",  },  view: {    position: "absolute",    top: 100,    left: 50,    width: 200,    height: 100,    borderRadius: 12,    justifyContent: "center",    alignItems: "center",    padding: 20,    borderColor: "black",    borderWidth: 1,  },  glassView: {    position: "absolute",    top: 250,    left: 50,    width: 200,    height: 100,    borderRadius: 12,    justifyContent: "center",    alignItems: "center",    padding: 20,  },  tintedGlassView: {    position: "absolute",    top: 400,    left: 50,    width: 200,    height: 100,    borderRadius: 12,    justifyContent: "center",    alignItems: "center",    padding: 20,  },  text: {    fontSize: 16,    fontWeight: "600",    color: "#000",    textAlign: "center",  },});上から View、GlassView、GlassView(glassEffectStyle="clear") の順でレンダリングされ、Liquid Glass の質感で表示される。補足として、Android では通常の View と同等の見た目になる。

Expo SDK 54にバージョンアップ + Expo GlassEffectを試してみる

概要Claude Code の登場以降、自分専用の作業スクリプトや小さなアプリを作る機会が増えた。Share Extension か App Extension の実装が必要になる。 Share Extension  App Extension     どちらも専用アプリの実装が前提で実装コストがかかる。代替として ショートカット アプリで同等のことを実現できたので手順の紹介をします。iOSのショートカットアプリショートカットApple仕事効率化無料apps.apple.comApple 公式の自動化アプリ。アクションを組み合わせてアプリ操作を自動化でき、「オートメーション」でボタン一つに束ねることもできる。やりたいこと共有シートから直接 API を実行共有シートで開いている URL をクエリパラメータとしてサーバーへ渡す事前準備共有シートの情報を受け取る API を作成し Cloud Functions にデプロイPR: iOSのショートカットと共有の情報を取得するテスト by wheatandcat以下は検証用の最小コード（Node.js）。受け取ったパラメータをログ出力する。import functions from "@google-cloud/functions-framework";/** * iOS Shortcut用のHTTP関数 * @param {Object} req - Express request object * @param {Object} res - Express response object */functions.http("processRequest", (req, res) => {  // CORS設定  res.set("Access-Control-Allow-Origin", "*");  res.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");  res.set("Access-Control-Allow-Headers", "Content-Type");  if (req.method === "OPTIONS") {    res.status(204).send("");    return;  }  try {    let url;    if (req.method === "GET") {      url = req.query.url;    } else if (req.method === "POST") {      url = req.body.url;    } else {      res.status(405).json({ error: "Method not allowed" });      return;    }    console.log("Request parameters received:");    console.log(`URL: ${url}`);    console.log(`Method: ${req.method}`);    console.log(`User-Agent: ${req.headers["user-agent"]}`);    console.log(`Timestamp: ${new Date().toISOString()}`);    if (!url) {      console.log("Error: Missing required parameters");      res.status(400).json({        error: "Missing required parameters",        required: ["url"],      });      return;    }    res.status(200).json({      success: true,      message: "Request processed successfully",      receivedData: { url },      timestamp: new Date().toISOString(),    });  } catch (error) {    console.error("Error processing request:", error);    res.status(500).json({      error: "Internal server error",      message: error.message,    });  }});動作確認コマンド例。curl --location 'https://***.cloudfunctions.net/processRequest?url=https%3A%2F%2Ftest.com'ショートカットの作成iPhone のショートカットアプリから右上の「＋」で新規作成。名称を共有シートのテストにして保存。ホームに戻り、作成したショートカットを長押しして 詳細 を開く。共有シートに表示 を ON にして保存。以降、共有シートから入力を受け取れるようになる。ここからは Mac のショートカットアプリでも編集可能。以下のアクションを順に追加。入力からURLを取得URLエンコード（GET のクエリに乗せるためエンコード）URL（Cloud Functions のエンドポイントを指定し、クエリ url= に「URLエンコード済みのテキスト」を割り当て）URLの内容を取得（メソッドを GET に設定）セットアップ完了後、Safari 等で任意のページを開き共有シートを表示。作成した 共有シートのテスト をタップすると API が実行され、サーバーログに共有元の URL が記録される。まとめ専用の Share/App Extension を作らずに、ショートカットだけで共有シート → API 実行を実現 ができる。セキュリティ担保は難しいが、自分専用ツール用途に割り切る前提なら結構便利に使える。

iOSの共有シートからショートカット経由で直接APIを実行させる方法の紹介

概要前から対応していた memoir の最新化は無事リリース完了。zenn.devリリース後に「画面下部のボタンとナビゲーションボタンが重なって操作できない」という問い合わせが入り、原因を特定して修正したので共有。PRgithub.com再現方法検証用端末では「ジェスチャーナビゲーション」を使っていたため気づけなかったが、設定から「3ボタン ナビゲーション」を ON にすると再現。アプリ起動時に「ナビゲーションボタン」と「アプリの UI」が重なり、対象のボタンがタップできない状態になる。原因根本原因は Edge‑to‑Edge。www.wheatandcat.me実装「3ボタン ナビゲーション」の高さは react-native-safe-area-context の useSafeAreaInsets から bottom として取得可能。下部の固定ボタンに対して、insets.bottom を考慮した余白を与える。■ components/layouts/Home/MemoirButton.tsximport { useSafeAreaInsets } from "react-native-safe-area-context";const MemoirButton: FC<Props> = (props) => {  const insets = useSafeAreaInsets();  return (    <View style={[styles.root]}>      <View        style={{          paddingBottom: Platform.OS === "ios" ? 0 : insets.bottom - 20, // ← ここで調整        }}      >        <TouchableOpacity onPress={props.onPress}>          <View style={[styles.memoirButton]}>            <View>              <Image                source={require("@/assets/img/icon/main.png")}                width={30}                height={30}              />            </View>            <View>              <Text>今週のmemoirを確認する</Text>            </View>          </View>        </TouchableOpacity>      </View>    </View>  );};結果ナビゲーション設定が「3ボタン」でも「ジェスチャー」でも正しく表示されるようになった。 3ボタン ナビゲーション  ジェスチャーナビゲーション     まとめEdge‑to‑Edge対応時は「3ボタン ナビゲーション」 の検証は必須！

AndroidのEdge‑to‑Edgeを有効にして「3ボタン ナビゲーション」をONにすると表示が崩れる

以前リリースした際の記事はこちらです👇https://zenn.dev/wheatandcat/articles/20220503-memoirリリース後は1年ほど更新していましたが、実装したかった機能が一通り揃ったところで更新をサボっていました。久々に追加したい機能を思いついて開発を再開したところ…結果的に半年かけて最新化＆リリースすることになったので、その軌跡をまとめます。 結論からExpo SDK 48 → 53 へアップデートしてリリースした結果はこうなりました 😇修正ファイル数: 1,057追加行数: 41,998対応した issue & PR:...

保守を1年半サボったExpo製のアプリを、最新化してリリースするのに半年かかった話

概要Expo SDKを最新版へ上げたところ、Androidで Edge‑to‑Edge がデフォルト有効化。Expo Router のヘッダーが描画されなくなった。挙動を整理して対処した内容を残す。Edge‑to‑EdgeとはEdge‑to‑Edgeを有効にすると StatusBar 領域までアプリがレンダリング可能になり、全画面 UI に役立つ。developer.android.com現象既存実装で Edge‑to‑Edge を有効にすると、ナビゲーションバーが StatusBar と重なって描画された。SafeAreaView で画面全体を wrap すると通常画面は直るが、expo‑routerのmodal で余計な余白が生じる。PRgithub.com実装詳細app/(app)/_layout.tsx を修正Beforeconst RootView = Platform.OS === "ios" ? View : SafeAreaView;return (  <RootView style={{ flex: 1 }} edges={["top", "left", "right"]}>    {/* ... */}  </RootView>);SafeAreaView で包むため Android でも上部余白が確保されるが、modal まで影響。Afterimport { useSafeAreaInsets } from "react-native-safe-area-context";export default function AppLayout() {  const insets = useSafeAreaInsets();  return (    <View style={{ flex: 1, paddingTop: Platform.OS === "android" ? insets.top : 0 }}>      {/* ... */}    </View>  );}SafeAreaView をやめ、Android のみ paddingTop で StatusBar 分を確保。Modal 画面を調整SafeAreaView が二重で wrap されていたため、modal 内の SafeAreaView から top を除外。<SafeAreaView style={styles.safe} edges={["left", "right", "bottom"]}>  {/* modal content */}</SafeAreaView>動作確認各画面でヘッダー位置と余白が正しく描画されたことを確認。まとめEdge‑to‑Edge 有効化で SafeAreaView の重複が原因となりヘッダーが消失Android は paddingTop で StatusBar 分だけ手動調整すると modal も破綻しない同様の症状が出た場合は SafeAreaView の二重定義を疑うと解決が早い

Android Edge‑to‑EdgeでExpo RouterのHeaderが消える問題を解消する

概要Replit を契約していると毎月 25 ドル分のクレジットを使い切らないともったいないという心理が働き、結果として毎月アプリを作るルーティンが発生する。 今月は "GraphQL Client" アプリを作成。AI に実装を任せたところ、ローカルで起動した GraphQL サーバーにアクセスする部分でつまずき、自力で実装した経緯を残す。PR開発したアプリの紹介   GraphQL Client を自分用に作成GraphQL エンドポイントごとにヘッダーや実行履歴を管理Docs タブで GraphQL のスキーマを閲覧可能Mac アプリとしてビルド使用技術Tauri 2実装経緯Replit でのプロトタイプまず Replit で雛形を作成。ある程度形になった段階で Claude Code に引き継ぎ、Mac 向けにビルドできるよう改修を依頼。AI がハマった箇所GraphQL Client で http://localhost のエンドポイントを扱えるようにするfetch では localhost へのアクセスが CORS でブロックされるため回避策が必要AI は vite の proxy 経由アクセスやブラウザ併用コードを提案したが、Tauri でのみ動かせば十分なので方針が噛み合わず採用を断念人力での解決Tauri 2 公式の HTTP プラグイン @tauri-apps/plugin-http を利用すればアプリ側で localhost へアクセス可能と判明。手順1. 依存関係追加npm run tauri add http2. 権限付与 – src-tauri/capabilities/default.json に追記{  "$schema": "../gen/schemas/desktop-schema.json",  "identifier": "main-capability",  "description": "Capability for the main window",  "windows": ["main"],  "permissions": [    {      "identifier": "http:default",      "allow": [{ "url": "http://localhost:*" }],      "deny": []    }  ]}3. fetch を差し替え – client/src/lib/graphql-client.tsimport { fetch as tauriFetch } from "@tauri-apps/plugin-http";// 中略let clientFetch = fetch;if (endpoint.includes("http://localhost")) {  clientFetch = tauriFetch; // localhost ならプラグイン fetch を使用}const response = await clientFetch(endpoint, fetchOptions);これでエンドポイントに http://localhost:8080/query を指定しても問題なく動作するようになった。まとめTauri 2 と @tauri-apps/plugin-http を組み合わせれば localhost へのリクエストをネイティブに通せる現状のAIのレベルだなニッチな機能の開発は弱いと実感。今回はAIで開発しようと頑張ってしまった結果。無駄に2時間くらい開発にかかってしまった。今後はこの辺の判断能力もエンジニアスキルとして必要になりそうな予感今後追加したい機能Authorization ヘッダーの自動更新スクリプト実行結果を Markdown 形式でクリップボードへコピーエンドポイントごとに背景色を変更

Tauri 2でアプリ内からhttp://localhostにアクセスする方法の紹介

概要最近、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を実装②

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

App Routerの紹介

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

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

Supabaseの紹介

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で公開しているので、興味のある人は手元で動かして頂ければと思います。手もとで実行する手順...