wheatandcatの開発ブログ

技術系記事を投稿してます

OpenAIのModeration APIは雑にレビューの書き込みのチェックが出来て良い

概要 趣味で作成しているサービスでレビュー機能を実装する機会があった。 その際に初めて OpenAI の Moderation API を使ってみたが、思いのほか使い勝手が良いと感じたので紹介。 Moderation APIとは? developers.openai.com OpenAI が提供する APIで、テ…

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

概要 前回の記事では、SwiftUI で RSS リーダーを作ってみた。 今回はその拡張として、RSS フィードの表示 / 非表示を切り替える設定を追加したので紹介する。 www.wheatandcat.me PR github.com 追加機能 Config 画面に RSS フィードの表示 / 非表示を切り…

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

概要 習慣として、いくつかの技術系情報サイトを定期的に巡回している。 ある程度固定化された巡回先があるため、これまでは各サイトをブックマークし、気が向いたときに個別に開いていた。 ただ、チェックするサイトが増えてくるにつれ、 毎回タブを開くの…

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

概要 前回の記事で必要な API を用意したので、今回は実際の機能を実装。ショートカット経由でワンタップ保存を実現する。 www.wheatandcat.me PR github.com 自作した Chrome 拡張 chromewebstore.google.com モチベーション 前回の記事を参照。 www.wheata…

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

概要 前に自作した Chrome 拡張の紹介記事を書いたが、そのアプリに API Key の生成 と API Key 経由での Web ページ登録 API を追加した。 www.wheatandcat.me 実装には Supabase Edge Functions を採用。設計と実装手順を残す。 PR github.com 自作した Ch…

オエー鳥で学ぶcss講座

概要 妻にイラストを渡されて、この鳥に虹色のゲロを吐かせたいというクレイジーな依頼を受けました。 元ネタは、あのアスキーアートです。dic.pixiv.net 試しにcssで作ってみたら好評だったので、いろいろなパターンを作ってみました。 cssアニメーションや…

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

概要 以前、iOSでショートカット経由で共有シートからAPIを実行する方法を紹介した。今回はそのAndroid版をまとめる。 www.wheatandcat.me Androidでは Web Share Target API を実装するのが手軽なので、PWA化したWebサイトに組み込んで検証した。 Web Share…

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

Expo SDK 54にバージョンアップ + Expo GlassEffectを試してみる 概要 Expo SDK 54 がリリースされたので移行し、合わせて iOS の Liquid Glass 表現と expo-glass-effect を試した内容をまとめる。 PR github.com Expo SDK 54 expo.dev 実装 以下のコマンド…

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

概要 Claude Code の登場以降、自分専用の作業スクリプトや小さなアプリを作る機会が増えた。 スマホのブラウザで開いている URL を直接保存・参照したい場面があるが、iPhone から他サービスへ情報を渡すには Share Extension か App Extension の実装が必…

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

概要 前から対応していた memoir の最新化は無事リリース完了。 まとめ記事を Zenn に投稿したので詳細は以下も参照。 zenn.dev リリース後に「画面下部のボタンとナビゲーションボタンが重なって操作できない」という問い合わせが入り、原因を特定して修正…

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

概要 Expo SDKを最新版へ上げたところ、Androidで Edge‑to‑Edge がデフォルト有効化。 その影響で Expo Router のヘッダーが描画されなくなった。挙動を整理して対処した内容を残す。 Edge‑to‑Edgeとは Edge‑to‑Edgeを有効にすると StatusBar 領域までアプリ…

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

概要 Replit を契約していると毎月 25 ドル分のクレジットを使い切らないともったいないという心理が働き、結果として毎月アプリを作るルーティンが発生する。 今月は "GraphQL Client" アプリを作成。AI に実装を任せたところ、ローカルで起動した GraphQL …

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

概要 最近、AI系ツールで遊んでいたら失敗も含め学びがあったのでメモとして残す。 作ったもの リポジトリ github.com スクリーンショット アプリの説明 入力は Markdown。チェックボックス (- [ ]) を付けるとタスクとして認識 チェックボックスを ON にす…

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

概要 個人開発しているアプリをExpo SDK 52 → 53にバージョンアップした時に数点ハマった箇所があったので記事にする。 PR github.com Expo SDK 53の変更点 詳細な内容は以下の記事を参照。 expo.dev 影響があった主な変更点は以下の通り。 ベースのネイティ…

Recoil→Zustandに移行

概要 Expo SDK 53が出たのでアップデートしたら、合わせてReact 19にアップデートされた。 以前から使用していたRecoilはReact 19をサポートしていないので、Zustandに移行したので記事にした。 github.com PR github.com Zustandとは zustand-demo.pmnd.rs …

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

概要 expo-router導入時に一旦Storybookは考慮せずに実装していた。 今回、storybook v6からv8へのバージョンアップと、expo-router対応の再導入を行ったため記事にまとめる。 PR github.com github.com 使用バージョン Expo SDK: 52 expo-router: 4.0.19 実…

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

expo-router に移行した際に、モー遷移を導入したので実装内容を共有する。 PR github.com 背景 expo-router による通常の画面遷移では、以下の画像のように左側から新しい画面がPushされる形式になる。 この形式だと、画面下部に配置されたボタンを押した際…

Expo SDK 52でSentry導入

概要 以前はexpo/sentry-expoを使用していたが、Expo SDK 50以降で非推奨となった。現在は@sentry/react-nativeを使用する必要があるため、その手順を整理。 PR github.com github.com 実装 ローカル起動時の実装 以下の公式手順に従って@sentry/react-nativ…

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

過去にExpoでGoogleログインを実装したが、Expo SDK52では実装方法が変わっていたため、改めて記事にまとめる。 www.wheatandcat.me PR github.com 実装 使用するライブラリ 前回の実装からの移行方法を記載する。元の実装については以下の記事を参照。 www.…

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

概要 過去に開発していたmemoirを、最新のコードベースにリニューアル中。その途中経過をまとめる。 github.com アプリはExpoで開発。最新化に伴い以下を修正中。 Expo SDK 48 → 52にバージョンアップ ナビゲーションをReact Navigation → expo-routerに移行…

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

前回の記事では、バーコードを用いて商品画像を取得する機能を実装したが、以下の課題が浮上した。 バーコードから商品情報を取得できないケースがある バーコードが外箱に記載されており、画像から取得が困難な場合がある これらの課題を解決するため、OCR…

Widgetbookを導入してみた

アプリの画面数が増えると、ホットリロードが効かない画面が出てきてUI改修が難しくなることがある。その対策として、Flutter版StorybookであるWidgetbookを導入した。以下にその実装内容をまとめる。 導入したPR 実際の変更内容は以下のPRを参照。 github.c…

FlutterでFirebase App Checkに対応(+Firebase App Distributionで配信時の対応)

Firebase App Checkへの対応について、 Firebase App Distributionで配信したアプリにApp Checkを対応させる際、いくつかハマりポイントがあったので記事にた PR github.com github.com 実装 Firebase App Checkを実装 firebase.google.com Firebase App Che…

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

引越しをしていて間が空いてしまったが、次から通常の更新頻度に戻る予定 在庫管理アプリの開発で商品の画像取得に商品検索(v3) - Yahoo!デベロッパーネットワークのAPIを使ってみたので紹介 PR github.com github.com 実装 実装のイメージは以下の通り - …

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

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

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

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

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

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

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

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

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

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

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

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