wheatandcatの開発ブログ

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

2025-01-01から1年間の記事一覧

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に移行…