wheatandcat

概要前回の記事で、技術書典21に出展することを紹介した。www.wheatandcat.me現在は本の執筆を終え、試し刷りの到着待ち。あとは最終チェックと修正をして完成する予定。同人誌を作るにあたり、印刷に関しては完全に素人だった。同人誌を何冊か作ってきた妻にアドバイスをもらいながら学んだことを、この記事にまとめる。宣伝techbookfest.org技術書典21は2026年11月23日に、池袋・サンシャインシティ 展示ホールD（文化会館ビル2F）で開催される。「せ 01」にて、同人誌を2冊販売予定。学んだこと天・地、小口・ノドの設定本を印刷するときは、天・地・小口・ノドを設定する。それぞれの意味は以下の通り。天：本の上側の端地：本の下側の端小口：本を開く側の端。背表紙の反対側ノド：本を開いたときの、ページの綴じ目に近い内側の部分各項目の詳細は以下の記事を参照。printmall.jpRe:VIEWを使う場合は、基本的にはTechBoosterが提供しているテンプレートを使えば問題ない。github.com製本方式にもよるが、一般的には本のページ数が増えるほど本が厚くなり、開きにくくなる。そのため、ページ数が多い場合はノドを広く取る傾向にある。ノドを広げたい場合は、articles/config.ymlのtexdocumentclassにあるgutterの値を調整すればよい。■ articles/config.ymltexdocumentclass:  [    "review-jsbook",    "media=print,...,line_length=40zw,...,head_space=25mm,gutter=34.75mm,..."  ]また電子版では、ページ数が増えてもノドを広げる必要はない。Re:VIEWのテンプレートを使っている場合、印刷版ではarticles/config.ymlの設定を使い、電子版ではarticles/config-ebook.ymlによって一部の設定を上書きして適用できる。LaTeX記法Re:VIEWは書籍のレイアウトや組版にLaTeXを使い、PDFを生成している。LaTeXでは、たとえば以下のように記述する。\documentclass[uplatex,dvipdfmx]{jsarticle}% 日本語の技術書向けに余白を設定\usepackage[  top=25mm,  bottom=25mm,  left=20mm,  right=20mm]{geometry}% 画像を扱うためのパッケージ\usepackage[dvipdfmx]{graphicx}\title{個人開発の技術書}\author{著者名}\date{\today}\begin{document}% タイトルを表示\maketitle% 目次を生成\tableofcontents\section{はじめに}これはLaTeXで作成した技術書のサンプルです。\subsection{LaTeXとは}LaTeXは文書の組版システムです。文章の一部を\textbf{太字}にしたり、\textit{斜体}にしたりできます。\section{画像の挿入}以下は画像を挿入する例です。\begin{figure}[htbp]  \centering  \includegraphics[width=0.8\textwidth]{sample.png}  \caption{サンプル画像}  \label{fig:sample}\end{figure}\section{箇条書き}\begin{itemize}  \item React Native  \item Flutter  \item Go\end{itemize}\section{まとめ}LaTeXを使うことで、文書の構造とレイアウトを管理できます。\end{document}Re:VIEWには書籍化に必要な基本的なレイアウトがデフォルトで用意されている。ただし、たとえば以下のページのように、1ページを章のタイトルと画像で構成するレイアウトにしたい場合は、LaTeX記法で新たなレイアウトを作る必要がある。LaTeXでレイアウトを修正できることは知っていたが、記法はかなり複雑で、サンプルを読むだけでは作るのが難しかった。以前なら実装を諦めていたところだが、複雑な記法もAIエージェントに頼めるようになった。今回の本では、デフォルトのレイアウト以外もカスタマイズして使っている。作り方としては、Re:VIEWのarticles/sty/review-custom.styに以下を追加する。% 章扉: 原稿で章見出しの直前に \reviewchapterimage{画像パス} を置くと、% その章の最初のページを「タイトル + 画像」だけの扉ページにする\makeatletter\def\review@chapterimage{}\newcommand{\reviewchapterimage}[1]{\gdef\review@chapterimage{#1}}\let\review@orig@makechapterhead\@makechapterhead\def\@makechapterhead#1{%  \ifx\review@chapterimage\@empty    \review@orig@makechapterhead{#1}%  \else    \vspace*{\stretch{1}}%    {\parindent\z@\centering\normalfont      {\large\headfont\@chapapp\thechapter\@chappos\par}%      \vskip\Cvs      {\Huge\headfont #1\par}%      \vskip 2\Cvs      \includegraphics[width=\textwidth,height=0.7\textheight,keepaspectratio]{\review@chapterimage}\par}%    \vspace*{\stretch{2}}%    \gdef\review@chapterimage{}%    \clearpage  \fi}\makeatother参照側の.reファイルでは、以下のように記載すれば先ほどの画像のように出力される。//embed[latex]{\reviewchapterimage{images/03-oomaka/top1.png}//}= OOMAKA編画像がグレースケール印刷だとにじむ1章を書き終えたタイミングで、印刷時の見た目を自宅のプリンターで試してみた。出力されたのが以下の画像。それまではWebとカラーのPDFでしか確認していなかったため、印刷すると一部の画像が薄く、にじんだように見えることに気づかなかった。調べたところ、原因として以下の3つが考えられた。画像の余白が大きく、ページ内で画像全体が小さく表示されている画像の解像度が低いグレースケールにしたとき、コントラストが足りず色が潰れているそれぞれ次のように対応した。1. 余白のトリミング画像はなるべく大きく表示したいため、不要な余白をトリミングした。2. 解像度の見直し一般的に、カラー印刷なら300〜350dpiあればはっきり印刷される。一方で、グレースケール印刷では600〜1200dpi程度が必要とのことだったため、解像度を見直した。3. 印刷用画像の補正AIエージェントに、グレースケールにしてもはっきり見えるよう画像を補正するスクリプトを作ってもらった。あわせて、電子版ではカラーの原本、紙版では補正した印刷用画像を使うように切り替える仕組みも実装した。その結果、印刷した画像は以下のようになり、以前よりはっきり表示されるようになった。まとめ同人誌を作るときは、原稿を書く以外にも印刷時のレイアウトや画像の見え方を確認する必要がある。ページ数や製本方式に応じて、ノドを適切に調整するRe:VIEWではLaTeXを使うことで、標準にないレイアウトも追加できる紙版は実際に試し刷りをして、画像の解像度・余白・コントラストを確認するPDFだけでは分からないことも多いため、早い段階で紙に印刷して確認するのが重要だった。試し刷りが届いたら、最終チェックをして技術書典21に向けて仕上げていく。

技術書典の同人誌を作った時のRe:VIEWと印刷の学びのまとめ

概要技術書典21のオフライン参加に当選したので、現在同人誌を執筆中。techbookfest.org今回の本は、過去5年ほど個人開発してきたプロダクトをベースに、技術やプロダクトに対する考え方をまとめた内容になる予定。執筆にはRe:VIEWを使っている。テキストは8割ほど書き終え、現在はPDFへ変換した際のレイアウトを調整中。ただし、デフォルトでは自動リロードに対応しておらず、修正結果の確認に手間がかかっていた。そこで、PDFを自動リロードできるようにしたので、その方法を紹介する。Re:VIEWとは書籍や技術同人誌などを執筆するための、オープンソースの文書作成・組版システム。独自フォーマットで原稿を書き、PDF・EPUB・HTMLなど複数の形式へ変換できる。reviewml.org技術系の同人誌でよく使われている。モチベーションまずは文章を書かないと本は完成しないので、とりあえず書き始める。この段階ではビルドが速く、ホットリロードにも対応しやすいHTMLへ変換して確認していた。ある程度文章を書き終えたら、次は実際に本にしたときの見た目を考える。本にするには、PDF形式で出力する必要がある。Webでは文章を追加しても表示領域が広がり、スクロールバーが長くなるだけ。一方で物理的な本には1ページという概念があるため、Webと同じような表示にはならない。たとえば大きな画像を2つ表示したい場合、以下のように1ページに収まらないと、不自然に下部へ空白ができてしまう。画像のサイズやレイアウトを調整したくなる場面がある。そこで、以下の問題が発生した。npm run pdfの生成に時間がかかるPDFを新しく生成しても自動リロードされないため、ファイルを開き直す必要があるPDFを開き直すと1ページ目が表示される。30ページ目を修正した場合は、そのページまで毎回移動しなければならないこの手間を減らせないか調べたところ、Skimを使えばWeb開発のホットリロードのような確認フローを作れることが分かった。Skimskim-app.sourceforge.ioSkimは、macOS向けのオープンソースPDFリーダー。ファイル更新を自動検知する機能があり、これを利用することでやりたいことを実現できる。設定は、メニューの設定から同期タブを開き、ファイルの変更をチェックと自動リロードを有効にすればOK。実装Skimの設定だけでも、ほぼ目的は達成できる。あとはファイル更新のたびにPDFを生成するよう、package.jsonへpdf:watchとpdf:devを追加する。■ package.json  "scripts": {    "pdf": "grunt pdf",    "pdf:watch": "watchexec -w articles/contents -w articles/images -w articles/config.yml -w articles/sty -e re,yml,png,jpg,sty --debounce 1000 -- npm run pdf",    "pdf:dev": "npm run pdf&& open -a Skim articles/ReVIEW-Template.pdf && npm run pdf:watch"  }open -a Skim articles/ReVIEW-Template.pdfで対象のPDFファイルをSkimで開く。watchexecでファイルの更新を監視し、更新のたびにPDFを新しく生成すればOK。これで、以下のように修正した直後にPDFへの反映を確認できるようになった。www.youtube.comPDFの生成には多少時間がかかるものの、PDFを開き直す手間がなくなり、レイアウト調整の作業をかなり軽減できた。まとめSkimのファイル変更検知と自動リロードを有効にするwatchexecでRe:VIEWの原稿・画像・設定ファイルを監視し、変更時にPDFを生成する修正したページを開いたままレイアウトを確認できるため、PDF編集時の確認フローが快適になるPDFのレイアウト調整は細かな修正と確認の繰り返しになりやすい。PDFを毎回開き直す小さな手間を省くだけでも、執筆の流れを止めずに作業できるようになった。

Skimを使ってRe:VIEWのPDF生成を自動リロードさせる

概要現在、Cacika という GitHub の集計 Mac アプリを作成している。LPサイトも作成した。cacika.netLPサイトには Mac アプリのスクリーンショットを掲載しているが、まだ開発中ということもあり見た目が高頻度で変わっている。UI を変更するたびに手動でスクリーンショットを撮り直すのは手間なので、スクリプトで自動化してみた。今回はその内容を紹介する。リポジトリMac アプリ本体はプライベートリポジトリなので、今回はスクリーンショットを撮影するツール側だけ記載する。github.comやりたいこと自動で LP サイトに掲載している Mac アプリのスクリーンショットを最新のものへ差し替えたいそのために、以下の 2 点ができれば組み合わせでスクリプト化できると考えた。① コマンド実行で Mac アプリに指定の画面を表示させる② コマンド実行で指定したアプリのスクリーンショットを撮影して保存する実装コマンド実行でMacアプリに指定の画面を表示させるこれは Mac アプリ側で、デバッグ用の引数を受け取れるようにすれば実現できる。具体的には以下のコードを追加した。#if DEBUG    import Foundation    enum ScreenshotTarget: String, CaseIterable {        case main        case schedule        case config        case githubToken = "github-token"        case dataManagement = "data-management"        case license    }    enum ScreenshotMode {        static let argumentName = "-screenshot-mode"        /// 撮影対象。通常起動では nil        static let target: ScreenshotTarget? = {            let args = ProcessInfo.processInfo.arguments            guard let index = args.firstIndex(of: argumentName), index + 1 < args.count else {                return nil            }            return ScreenshotTarget(rawValue: args[index + 1])        }()        static var isActive: Bool { target != nil }        /// 撮影用の UserDefaults suite        static let defaultsSuiteName = "cacika.screenshot"        /// 撮影用の Application Support ディレクトリ名        static let appDirectoryName = "cacika-screenshot"        /// ライセンス画面に出すダミーキー（実キーがLPに写り込まないようにする）        static let dummyLicenseKey = "CACIKA-DEMO-1111-2222-33334444"    }#endifデバッグビルドでのみ有効なコードとして作成している。ProcessInfo.processInfo.arguments で起動時の引数を取得できるので、その値を見て特定の画面へ遷移するように実装した。遷移まで実装したら、以下のコマンドでアプリ起動時に画面遷移するか確認する。# デバッグビルドのMacアプリに「screenshot-mode」を設定して起動$ ./app/build/Debug/cacika.app/Contents/MacOS/cacika -screenshot-mode schedulescreenshot-mode で指定した schedule 画面が表示されるのを確認。コマンド実行で指定のアプリのスクリーンショットを撮影して保存こちらは Swift でスクリプトを作成した。Swift の CGWindowListCopyWindowInfo を使うことで、Mac のデスクトップ上にあるウィンドウ情報を取得できる。developer.apple.comこの情報を使って、指定したアプリのウィンドウ情報を取得し、そのままキャプチャするスクリプトを作成した。■ appshot.swiftimport AppKitimport CoreGraphicsimport Foundation// ---------------------------------------------------------------- 引数struct Options {    var query = ""    var out: String?    var all = false    var list = false    var apps = false    var shadow = true    var activate = false    var delay: Double = 0}func parseArgs(_ argv: [String]) -> Options {    var o = Options()    var i = 0    while i < argv.count {        let arg = argv[i]        switch arg {        case "-o", "--out":            i += 1            o.out = i < argv.count ? argv[i] : nil        case "--all": o.all = true        case "--list": o.list = true        case "--apps", "--list-apps": o.apps = true        case "--no-shadow": o.shadow = false        case "--activate": o.activate = true        case "--delay":            i += 1            o.delay = i < argv.count ? (Double(argv[i]) ?? 0) : 0        case "-h", "--help":            print("""            usage: appshot <アプリ名の一部> [-o out.png] [--all] [--list] [--no-shadow] [--activate] [--delay 0.5]                   appshot --apps    # いま画面にある全ウィンドウを一覧表示する            """)            exit(0)        default:            if o.query.isEmpty { o.query = arg }        }        i += 1    }    return o}func fail(_ message: String) -> Never {    FileHandle.standardError.write((message + "\n").data(using: .utf8)!)    exit(1)}// ---------------------------------------------------------------- ウィンドウ探索struct Window {    let id: CGWindowID    let pid: pid_t    let app: String    let title: String    let x: Int, y: Int, width: Int, height: Int    var area: Int { width * height }}/// 画面に出ている「通常の」ウィンドウを集める。/// レイヤー 0 だけを見て、メニューバーのポップオーバーや影用の極小ウィンドウは弾く。func onScreenWindows() -> [Window] {    // NSWorkspace 側の localizedName も見る。kCGWindowOwnerName は実行ファイル名寄りなので、    // 「メモ」「Google Chrome」のような表示名でも引っかかるようにするため    var localizedNames: [pid_t: String] = [:]    for app in NSWorkspace.shared.runningApplications {        if let name = app.localizedName { localizedNames[app.processIdentifier] = name }    }    guard let infos = CGWindowListCopyWindowInfo(        [.optionOnScreenOnly, .excludeDesktopElements],        kCGNullWindowID    ) as? [[String: Any]] else {        fail("ウィンドウ一覧を取得できませんでした")    }    return infos.compactMap { info in        guard let id = info[kCGWindowNumber as String] as? CGWindowID,              let pid = info[kCGWindowOwnerPID as String] as? pid_t,              info[kCGWindowLayer as String] as? Int == 0,              let bounds = info[kCGWindowBounds as String] as? [String: Any],              let x = bounds["X"] as? Int, let y = bounds["Y"] as? Int,              let w = bounds["Width"] as? Int, let h = bounds["Height"] as? Int,              w > 100, h > 100        else { return nil }        let owner = info[kCGWindowOwnerName as String] as? String ?? ""        let app = localizedNames[pid] ?? owner        // 画面収録の権限が無いとタイトルは空で返る        let title = info[kCGWindowName as String] as? String ?? ""        return Window(id: id, pid: pid, app: app, title: title, x: x, y: y, width: w, height: h)    }}/// 一覧表示の 1 行。--list と --apps で同じ形式を使うfunc describe(_ w: Window) -> String {    // 画面収録の権限が無いとタイトルだけが空で返る（ID やサイズは取れる）    let title = w.title.isEmpty ? "(タイトル不明: 画面収録の権限が要ります)" : w.title    return "\(w.app)  id=\(w.id) pid=\(w.pid)  \(w.width)x\(w.height) @ \(w.x),\(w.y)  \(title)"}/// アプリ名の部分一致（大文字小文字は区別しない）。完全一致を優先し、あとは面積の大きい順func match(_ windows: [Window], query: String) -> [Window] {    let q = query.lowercased()    let hits = windows.filter { $0.app.lowercased().contains(q) }    return hits.sorted { a, b in        let aExact = a.app.lowercased() == q, bExact = b.app.lowercased() == q        if aExact != bExact { return aExact }        return a.area > b.area    }}// ---------------------------------------------------------------- 撮影@discardableResultfunc run(_ launchPath: String, _ args: [String]) -> (status: Int32, stderr: String) {    let task = Process()    task.executableURL = URL(fileURLWithPath: launchPath)    task.arguments = args    let pipe = Pipe()    task.standardError = pipe    try? task.run()    let data = pipe.fileHandleForReading.readDataToEndOfFile()    task.waitUntilExit()    return (task.terminationStatus, String(data: data, encoding: .utf8) ?? "")}/// -l（ウィンドウ指定）から順に試す。macOS のバージョンや権限の状態によっては/// -l が "could not create image from window" で弾かれるので、最後は座標で切り取るfunc capture(_ window: Window, to path: String, shadow: Bool) -> Bool {    var methods: [(label: String, args: [String])] = []    methods.append(("ウィンドウ", ["-x", "-l", String(window.id)]))    if !shadow { methods.insert(("ウィンドウ（影なし）", ["-x", "-o", "-l", String(window.id)]), at: 0) }    methods.append(("矩形", ["-x", "-R", "\(window.x),\(window.y),\(window.width),\(window.height)"]))    try? FileManager.default.removeItem(atPath: path)    for method in methods {        let result = run("/usr/sbin/screencapture", method.args + [path])        if result.status == 0, FileManager.default.fileExists(atPath: path) {            let size = (try? FileManager.default.attributesOfItem(atPath: path)[.size] as? Int) ?? 0            // 権限が無いと真っ黒な画像になる。真っ黒は極端に軽いので大きさで弾く            if size < 5_000 {                FileHandle.standardError.write("  \(method.label): 画像が小さすぎます（画面収録の権限が無い可能性）\n".data(using: .utf8)!)                try? FileManager.default.removeItem(atPath: path)                continue            }            if method.label != "ウィンドウ" {                print("  撮影方法: \(method.label)")            }            return true        }        let message = result.stderr.trimmingCharacters(in: .whitespacesAndNewlines)        FileHandle.standardError.write("  \(method.label): \(message.isEmpty ? "失敗" : message)\n".data(using: .utf8)!)    }    return false}func sanitize(_ name: String) -> String {    name.replacingOccurrences(of: "/", with: "-")        .replacingOccurrences(of: " ", with: "-")        .lowercased()}func outputPath(_ base: String?, app: String, index: Int, total: Int) -> String {    let stem = base ?? "\(sanitize(app)).png"    guard total > 1 else { return stem }    let url = URL(fileURLWithPath: stem)    let ext = url.pathExtension.isEmpty ? "png" : url.pathExtension    return url.deletingPathExtension().path + "-\(index + 1)." + ext}// ---------------------------------------------------------------- mainlet opts = parseArgs(Array(CommandLine.arguments.dropFirst()))let all = onScreenWindows()// アプリ名を指定しない一覧表示。--list をアプリ名なしで呼んだときも同じ扱いにするif opts.apps || (opts.list && opts.query.isEmpty) {    guard !all.isEmpty else { fail("画面に通常のウィンドウがありません") }    let sorted = all.sorted { ($0.app.lowercased(), -$0.area) < ($1.app.lowercased(), -$1.area) }    for w in sorted { print(describe(w)) }    exit(0)}guard !opts.query.isEmpty else {    fail("アプリ名を渡してください: appshot <アプリ名の一部>（一覧だけなら appshot --apps）")}let hits = match(all, query: opts.query)guard !hits.isEmpty else {    let names = Set(all.map(\.app)).sorted().joined(separator: ", ")    fail("""    「\(opts.query)」に一致するウィンドウが画面にありません。    最小化中・別の Space にある場合も見つかりません。    いま画面にあるアプリ: \(names)    """)}if opts.list {    for w in hits { print(describe(w)) }    exit(0)}if opts.activate {    if let app = NSRunningApplication(processIdentifier: hits[0].pid) {        app.activate()        Thread.sleep(forTimeInterval: 0.4)    }}if opts.delay > 0 { Thread.sleep(forTimeInterval: opts.delay) }let targets = opts.all ? hits : [hits[0]]var failed = 0for (i, window) in targets.enumerated() {    let path = outputPath(opts.out, app: window.app, index: i, total: targets.count)    if capture(window, to: path, shadow: opts.shadow) {        print("\(path)  ← \(window.app) (\(window.width)x\(window.height))")    } else {        failed += 1        FileHandle.standardError.write("撮影できませんでした: \(window.app) id=\(window.id)\n".data(using: .utf8)!)    }}if failed > 0 {    FileHandle.standardError.write("""    「画面収録」の許可があるか確認してください（システム設定 > プライバシーとセキュリティ > 画面収録）。    同じターミナルで `screencapture -x /tmp/test.png` が通るかを見ると切り分けられます。    """.data(using: .utf8)!)    exit(1)}以下のコマンドでファイルをビルドする。$ swiftc -O appshot.swift -o appshot以下のコマンドで、デスクトップ上にあるウィンドウ情報を出力できる。$ ./appshot --appsArc  id=141752 pid=1365  1920x1050 @ 1920,30  ブログ記事編集 - はてなブログcacika (Debug)  id=144150 pid=31972  620x432 @ 3149,206  レポート出力ChatGPT  id=79246 pid=669  1492x863 @ 2094,57  ChatGPTCursor  id=141470 pid=26284  1920x1080 @ 0,0  README.md — appshotGoogle Chrome  id=141508 pid=61209  943x696 @ 2007,190  GoogleGraphiQL  id=30525 pid=45967  1382x845 @ 2286,131  GraphiQLiTerm2  id=113993 pid=7283  587x497 @ 1946,100  -zshPostman  id=87630 pid=63235  1348x814 @ 2033,106  PostmanWarp  id=117868 pid=13876  1682x929 @ 2390,30  ./appshotメモ  id=138965 pid=24166  1301x828 @ 2118,30  すべてのiCloudこの一覧に cacika があったので、以下のコマンドでキャプチャする。$ ./appshot cacika -o images/cacika.png以下の画像が保存されたことを確認。これで必要な仕組みの作成は完了。組み合わせて各画面をキャプチャここまでで、指定した画面を表示する仕組みと、指定したアプリのウィンドウを保存する仕組みが揃った。あとはこの 2 つを組み合わせたスクリプトを作れば、各画面のキャプチャを自動生成できる。実際には以下のような形で動作する。www.youtube.comこの仕組みで保存した画像を使うことで、LPサイトのスクリーンショットを常に最新のアプリ状態へ保てるようになった。まとめMac アプリ側でデバッグ用の起動引数を受け取れるようにすると、表示したい画面を外部から切り替えられるCGWindowListCopyWindowInfo を使うと、画面上のウィンドウ情報を取得して対象アプリを特定できる画面表示とキャプチャをスクリプトで組み合わせることで、LP 用のスクリーンショット更新を自動化できる開発中で見た目が頻繁に変わるアプリほど、この仕組みの効果が大きいLPサイト向けの画像は手作業で管理すると更新漏れが起きやすいが、こうして自動化しておくとアプリ側の変更にも追従しやすくなる。

LPサイトで使用するMacアプリのスクリーンショットの画像を自動生成できるスクリプトを作成

概要以前、PWAでWeb Pushを検証した記事を書いた。www.wheatandcat.meそのサービスで、今回はホームアイコンにBadgeを表示する機能を実装してみた。実際に実装してみると、iOSとAndroidではBadgeの仕組みや実装方法が異なっていたので、その違いも含めて紹介する。リポジトリgithub.com今回はBadgeの実装部分にフォーカスして紹介する。サービス自体については、次回の記事で紹介する予定。Badgeとはアプリアイコンの右上などに表示される、未読や通知の存在を示す表示。上の画像では、右がiOS、左がAndroid。iOSとAndroidでは表示にも少し違いがあり、iOSでは数値を表示できるが、Androidでは基本的にドットのみが表示される。このBadgeはPWAでも利用できる。ただし、iOSとAndroidではBadgeに対する設計思想が異なっており、実装方法も同じではないので注意が必要。それぞれの実装方法を紹介する。今回の実装でやっていること今回のサービスでは、対象年月のチェックリストに未完了の項目が残っている場合、ホームアイコンにBadgeを表示する仕様にした。チェックリストがすべて完了したらBadgeを消し、未完了の項目がある間はBadgeを維持する。実装iOSiOSではBadging APIを使用して実装する。developer.mozilla.org実装自体はシンプルで、navigator.setAppBadge(count)を実行するとホームアイコンにBadgeを表示できる。Badgeを削除する場合はnavigator.clearAppBadge()を使用する。■ src/lib/badge.tsexport async function applyBadge(   count: number,   { closeWhenEmpty = true }: { closeWhenEmpty?: boolean } = {},): Promise<BadgeResult> {    // Androidのドットは通知の有無で決まるので、Badging APIの対応可否に関わらず先に消す    if (count === 0 && closeWhenEmpty) await closeNotifications();    // Androidは setAppBadge() が成功してもドットが出ないため、通知でドットを維持する    await keepBadgeNotificationIfNeeded(count);    if (typeof navigator.setAppBadge !== 'function') return 'unsupported';    if (        typeof Notification === 'undefined' ||        Notification.permission !== 'granted'    ) {        return 'denied';    }    try {        if (count > 0) {            // 未完了数をBadgeとして表示            await navigator.setAppBadge(count);        } else {            // 未完了がなくなったらBadgeを削除            await navigator.clearAppBadge?.();        }        return 'ok';    } catch (err) {        console.error('badge update error:', err);        return 'error';    }}iOSでは、このようにアプリ側からBadgeの値を直接制御できる。今回のように「未完了のチェックリスト数をBadgeとして表示する」といった用途では、かなり扱いやすい。AndroidAndroidではiOSと考え方が異なる。AndroidのBadgeは通知と連動しており、未読の通知が存在するとアプリアイコンにBadge（通知ドット）が表示される仕組みになっている。developer.android.comそのため、Badgeを表示するだけならPush通知を作成して未読通知を残しておけばよい。ただし、今回の用途ではここで問題が発生した。通知をタップすると、その通知は通常削除される。通知がなくなるとAndroid側のBadgeも消えるため、チェックリストがまだ残っているにもかかわらずBadgeが非表示になってしまう。今回のBadgeは「未完了のチェックリストが残っていることを知らせるリマインダー」として使いたい。そのため、通知をタップしただけではBadgeを消さず、チェックリストが残っている間はBadgeを維持したい。そこで、通知をタップしたタイミングでチェックリストの状態を確認し、未完了項目が残っている場合は通知を再作成するようにした。■ public/sw.js#L199-L211self.addEventListener('notificationclick', (event) => {  event.notification.close();  const url = event.notification.data?.url ?? '/';  event.waitUntil(    Promise.all([      self.clients        .matchAll({ type: 'window', includeUncontrolled: true })        .then((clients) => {          const existing = clients.find((c) => c.url === url);          return existing ? existing.focus() : self.clients.openWindow(url);        }),      // タップで閉じた通知を、未チェックが残っていれば貼り直してドットを維持する      keepBadgeNotification(true),    ]),  );});notificationclickで通知のクリックを検知し、keepBadgeNotification(true)を実行している。keepBadgeNotificationでは、チェックリストが残っている場合に通知を再作成する。■ public/sw.js#L135async function keepBadgeNotification(force = false) {  try {    // チェックリストが残っている場合は再度通知を作成    await self.registration.showNotification(KEEP_ALIVE_TITLE, {      body: KEEP_ALIVE_BODY,      icon: '/icons/icon-192.png',      data: { url: '/checklist' },      tag: NOTIFICATION_TAG,      // 音やバイブレーションを発生させずに通知を再作成      silent: true,    });  } catch (err) {    console.error('keep-alive notification error:', err);  } finally {    await writeKv(BADGE_DEBUG_KEY, log).catch(() => {});  }}showNotificationで通知を再作成することで、Android側にも再び通知が存在する状態になるため、ホームアイコンの通知ドットを維持できる。また、Badge維持のためだけに通知を再作成するたびに音やバイブレーションが発生すると邪魔なので、silent: trueを設定している。これでAndroidでも、チェックリストが残っている間はホームアイコンのBadgeを維持できるようになった。まとめPWAでもホームアイコンにBadgeを表示できるiOSではBadging APIを使い、setAppBadge / clearAppBadgeで直接Badgeを制御できるAndroidではBadgeが通知と連動しており、未読通知が存在すると通知ドットが表示されるiOSとAndroidではBadgeに対する設計思想が異なるため、同じ実装では期待する動作にならないPWAでもOSごとの仕様を考慮して実装すれば、ネイティブアプリに近い体験を作れる今回、Badgeの仕様がiOSとAndroidでかなり違うことを初めて知った。PWAはOSごとの差分を意識する必要はあるものの、Web PushやBadgeまで組み合わせると、実装次第ではかなりネイティブアプリに近いものを作れると感じた。

PWAでiOS/AndroidでホームアイコンにBadgeをつけてみる

概要以前、iOSのショートカットを利用してWebページを登録する方法を紹介した。www.wheatandcat.me今回は、そのAndroid版を実装したので紹介する。Web Share Target APIの仕組み自体は以前の記事で詳しく解説しているため、本記事では実際の機能実装を中心に紹介する。www.wheatandcat.mePRgithub.com作成したPWAのWebサイトmarkylinky-share.pages.dev自作した Chrome 拡張chromewebstore.google.comやりたいことAndroidの共有シートから、自作のChrome拡張「MarkyLinky」にワンタップでURLを保存できるようにしたい。使用技術PWAWeb Share Target APIdeveloper.mozilla.org実装PWAサイトを作成今回はPWA + Web Share Target API + API実行ができれば十分だったため、HTMLとJavaScriptだけで実装した。■URLhttps://markylinky-share.pages.dev/まずはホーム画面から起動してもらわないとWeb Share Target APIが利用できないため、通常ブラウザからアクセスした場合は以下の画面を表示する。「アプリをインストール」を押すと promptEvent.prompt(); を実行し、ホーム画面へPWAとして追加できる。promptEvent.prompt(); は標準化されていないため、実質Chrome系ブラウザ向けの機能となる。developer.mozilla.orgWeb Share Target APIを設定manifest に share_target を追加する。"share_target": {  "action": "/share.html",  "method": "GET",  "params": {    "title": "title",    "text": "text",    "url": "url"  }}これだけで共有シートにアプリが表示される。share.html 側でパラメータを取得してAPIを実行すれば完了。const params = new URLSearchParams(location.search);const url = extractUrl({  url: params.get("url"),  text: params.get("text"),  title: params.get("title"),});検証すると、Chromeでインストールした場合はWebAPKになるが、Braveなどではショートカット扱いとなり共有シートに表示されなかった。web.devそのためChrome以外では警告を表示するようにした。動作確認事前にPWAをインストールしAPI Keyを設定しておく。TechFeedの記事を開く。共有ボタンから「MarkyLinky」を選択。登録完了画面が表示される。Chrome拡張側にも問題なく追加される。まとめWeb Share Target APIを利用することでAndroidの共有シートからURLを受け取れるAPI Key認証と組み合わせることで自作サービスへ安全に登録できるChromeでインストールしたWebAPKのみ共有シートへ表示される点には注意AndroidでもワンタップでURL保存できるようになった

APIキーを使用してAndroidのPWA経由でwebページを登録できるようにする

概要現在作ろうとしているサービスでWeb Pushを使う予定なので、iOS・Android・PCでどのように動作するか検証した。iOSでも iOS 16.4以降 はWeb Pushに対応しているため、実装方法と各環境での違いを確認してみた。実装コードgithub.com使用技術フレームワーク: AstroWeb Push: @mmmike/web-pushデプロイ: Cloudflare WorkersCron: Cloudflare Cron Trigger検証した内容今回検証した内容は以下。iOS / Android / PCでWeb Pushを受信できるか確認Web画面で日付を設定指定日の午前8時にWeb Pushを送信検証用の画面は以下。今回は機能検証が目的なので、画面は簡易的な構成で実装した。実装@mmmike/web-pushの採用Web Pushの実装には @mmmike/web-push を使用した。最初は利用実績の多い web-push の採用を検討したが、デプロイ先であるCloudflare Workersでは動作しなかった。Cloudflare WorkersはV8エンジンをベースにした独自のWorkersランタイム上で動作する。Node.js互換APIも用意されているが、Node.jsのすべてのAPIが利用できるわけではない。そのため、Node.js向けの実装に依存している web-push はCloudflare Workers上では動作しなかった。代替を調査したところ、Web Crypto APIを利用する @mmmike/web-push であればCloudflare Workers上でも動作したため、こちらを採用した。VAPIDキーの生成Web Pushを使うには、VAPID（Voluntary Application Server Identification） と呼ばれる公開鍵と秘密鍵のペアが必要。以下のコマンドでVAPIDキーを生成できる。node --input-type=module -e "import { generateVapidKeys } from '@mmmike/web-push/vapid';console.log(JSON.stringify(await generateVapidKeys()));"実行すると以下の形式で公開鍵と秘密鍵が出力される。{  "publicKey": "*****",  "privateKey": "*****"}取得した publicKey と privateKey を sendPushNotification の第3引数に設定する。■ src/lib/push/webpush.tsimport { sendPushNotification, type PushSubscriptionData } from '@mmmike/web-push';export function sendReminderPush(  subscription: PushSubscriptionData,  targetDate: string,  env: Env) {  return sendPushNotification(    subscription,    {      title: 'Renewal Reminder',      body: `Today (${targetDate}) is your reminder date!`,      url: '/',    },    {      publicKey: env.VAPID_PUBLIC_KEY,   // ← 公開鍵      privateKey: env.VAPID_PRIVATE_KEY, // ← 秘密鍵      subject: env.VAPID_SUBJECT,    },  );}フロントエンド側の対応Web Pushを受信できるように、先ほど生成した公開鍵を使ってPush Subscriptionを登録する。■ src/pages/index.astroimport {  subscribeToPush,  serializeSubscription,} from '@mmmike/web-push/client';（略）const keyRes = await fetch('/api/vapid-public-key');const { publicKey } = (await keyRes.json()) as { publicKey: string };const subscription = await subscribeToPush(publicKey);if (!subscription) {  statusEl.textContent = '通知の許可が得られませんでした';  return;}subscribeToPush を実行すると、ブラウザに通知許可のダイアログが表示される。通知を受け取るには、ここで許可を選択する必要がある。次に、Web Pushの送信に必要なSubscription情報をサーバーへ登録する。■ src/pages/index.astroconst res = await fetch('/api/subscribe', {  method: 'POST',  headers: {    'content-type': 'application/json',  },  body: JSON.stringify({    subscription: serializeSubscription(subscription), // ← Web Pushに必要な情報    targetDate: dateInput.value,  }),});ここで送信したSubscription情報をDBへ保存し、後からサーバー側でWeb Pushを送信する際に利用する。Service WorkerでPush通知を受信する最後に、Service Workerへ push イベントリスナーを追加する。■ public/sw.jsself.addEventListener('push', (event) => {  const data = event.data ? event.data.json() : {};  event.waitUntil(    self.registration.showNotification(data.title ?? 'Reminder', {      body: data.body ?? '',      icon: '/icons/icon-192.png',      data: {        url: data.url ?? '/',      },    }),  );});self.registration.showNotification を使うことで、受信したPushメッセージを通知として表示できる。developer.mozilla.org実行すると以下のように通知が表示される。Cloudflare Cron Triggerで定期実行指定日の午前8時にWeb Pushを送信するため、Cloudflare Cron Trigger を使用した。developers.cloudflare.comCloudflare Cron Triggerでは、wrangler.jsonc の triggers.crons に実行したい時刻を設定する。■ wrangler.jsonc{  "triggers": {    "crons": ["0 23 * * *"]  }}Cloudflare Cron TriggerはUTC基準なので、0 23 * * * は日本時間の午前8時に相当する。triggers.crons を設定すると、Cloudflare Workersの scheduled が指定時刻に実行される。■ src/worker.tsexport default {  async fetch(request, env, ctx) {    return handle(request, env, ctx);  },  async scheduled(_controller, env, ctx) {    // ← Cron Triggerから実行される    ctx.waitUntil(runDailyPushJob(env));  },} satisfies ExportedHandler<Env>;Cron内では、その日に通知対象となるデータをDBから取得し、順番にWeb Pushを送信する。■ src/lib/push/cron.tsexport async function runDailyPushJob(env: Env) {  const date = todayJst();  const { results } = await env.DB.prepare(    `SELECT       s.id AS schedule_id,       sub.id AS sub_id,       sub.endpoint,       sub.p256dh,       sub.auth     FROM schedules s     JOIN subscriptions sub ON sub.user_id = s.user_id     WHERE s.target_date = ?       AND s.sent_at IS NULL`,  )    .bind(date)    .all<DueRow>();  for (const row of results) {    try {      const delivered = await sendReminderPush(        {          endpoint: row.endpoint,          keys: {            p256dh: row.p256dh,            auth: row.auth,          },        },        date,        env,      );      if (delivered) {        await env.DB.prepare(          'UPDATE schedules SET sent_at = ? WHERE id = ?',        )          .bind(new Date().toISOString(), row.schedule_id)          .run();      } else {        await env.DB.batch([          env.DB.prepare(            'DELETE FROM subscriptions WHERE id = ?',          ).bind(row.sub_id),          env.DB.prepare(            'UPDATE schedules SET sent_at = ? WHERE id = ?',          ).bind(            new Date().toISOString(),            row.schedule_id,          ),        ]);      }    } catch (err) {      console.error(        `push failed for schedule ${row.schedule_id}`,        err,      );    }  }}ここまでの実装で、PCとAndroidではWeb Pushを受信できるようになった。ただし、iOSではもうひと手間必要になる。iOS対応iOSでWeb Pushを受け取るには、Webサイトを PWA化してホーム画面へ追加し、ホーム画面から起動した状態で通知を登録する 必要がある。そのため、iOSのSafariで開いた場合は、ホーム画面への追加方法を表示するようにした。Safariの共有メニューからホーム画面へ追加する。追加後、ホーム画面のアイコンからアプリを起動し、日付を指定して通知を予約する。これでiOSでもWeb Pushを受信できることを確認できた。まとめWeb Pushはブラウザの標準機能を使って比較的シンプルに実装できるPCとAndroidではブラウザ上からそのまま通知登録できるiOSではPWA化し、ホーム画面から起動して通知登録する必要がある各OSで多少の違いはあるものの、iOSを含めてWeb Pushを実用的に使えることを確認できた。次回の記事では実際にWeb Pushを使って作成したサービスを紹介する予定。

iOS/Android/PCでWeb Pushを検証

概要前回の記事では、ESP32C3とリードスイッチを使って郵便受けの開閉を検知し、Discordへ通知するところまで実装した。www.wheatandcat.meただ、この実装には大きな課題があった。前回のコードでは loop() で常にリードスイッチの状態を監視しているため、ESP32C3が常時起動したままになる。そこで今回は、バッテリー問題への対策としてESP32C3の Deep Sleep 機能を実装したので紹介する。Deep Sleepとは？ESP32C3には、バッテリー消費を抑えるための Deep Sleep 機能が搭載されている。docs.espressif.comDeep Sleepを使うと、ESP32C3を低消費電力状態にできる。そのため、以下のように「普段はDeep Sleepで待機し、郵便受けが開いた時だけ起動する」構成にする。普段 → Deep Sleep開閉検知↓起動↓Wi-Fi接続↓Discord送信↓Deep Sleepこれにより、常時起動する方式と比べてバッテリー消費をかなり抑えられる想定。実装Deep Sleepは以下のコードで実装できる。const int reedPin = D2;void setup() {  Serial.begin(115200);  delay(3000);  pinMode(reedPin, INPUT_PULLUP);  // Deep Sleepから起床した理由を取得  esp_sleep_wakeup_cause_t wakeupReason =      esp_sleep_get_wakeup_cause();  if (wakeupReason == ESP_SLEEP_WAKEUP_GPIO) {    connectWiFi();    sendDiscordMessage("📬 郵便受けが開きました");  }  // Deep Sleepから起床する条件を設定  esp_deep_sleep_enable_gpio_wakeup(      1ULL << GPIO_NUM_4,      ESP_GPIO_WAKEUP_GPIO_HIGH);  gpio_pullup_en(GPIO_NUM_4);  gpio_hold_en(GPIO_NUM_4);  gpio_deep_sleep_hold_en();  // Deep Sleep開始  esp_deep_sleep_start();}void loop() {}loopは空にするDeep Sleepを使う場合は、前回のように loop() で常時監視する必要がない。void loop() {}起動後に必要な処理を実行し、最後に esp_deep_sleep_start() でDeep Sleepへ移行する。loop() は空で問題ない。起床理由を取得する以下のコードで、ESP32C3がDeep Sleepから起床した理由を取得できる。esp_sleep_wakeup_cause_t wakeupReason =    esp_sleep_get_wakeup_cause();今回の実装では、GPIOによって起床した場合のみDiscord通知を送信する。if (wakeupReason == ESP_SLEEP_WAKEUP_GPIO) {  connectWiFi();  sendDiscordMessage("📬 郵便受けが開きました");}これにより、初回起動時には通知せず、郵便受けが開いたタイミングでDeep Sleepから起床した場合だけ通知できる。Deep Sleepから起床する条件を設定するDeep Sleepから起床する条件は esp_deep_sleep_enable_gpio_wakeup で設定する。esp_deep_sleep_enable_gpio_wakeup(    1ULL << GPIO_NUM_4,    ESP_GPIO_WAKEUP_GPIO_HIGH);第一引数の 1ULL << GPIO_NUM_4 は、起床トリガーに使うピンを指定している。GPIO_NUM_4 を指定している。第二引数の ESP_GPIO_WAKEUP_GPIO_HIGH は、GPIO4が HIGH になったらDeep Sleepから起床するという意味。今回のリードスイッチの配線では、以下のような状態になる。磁石あり↓LOW磁石なし↓HIGHつまり、郵便受けが開いて磁石がリードスイッチから離れるとGPIO4がHIGHになり、ESP32C3がDeep Sleepから起床する。郵便受けが開く↓磁石が離れる↓GPIO4がHIGHになる↓Deep Sleepから起床↓Discord通知内部プルアップ設定を保持する以下のコードは、Deep Sleep中も内部プルアップの設定を保持するために記載している。gpio_pullup_en(GPIO_NUM_4);gpio_hold_en(GPIO_NUM_4);gpio_deep_sleep_hold_en();今回の検証ではこの設定で動作しているが、実運用では外付けの 10kΩ プルアップ抵抗 を付ける方が安定しそう。uxcell カーボン抵抗 炭素皮膜抵抗器 アキシャルリードタイプ 1/4W 250V 10K Ohm 50 本入uxcellAmazon動作確認上記の実装により、以下の流れで動作するようになった。郵便受けが閉まっている↓ESP32C3はDeep Sleep状態↓郵便受けが開く↓リードスイッチから磁石が離れる↓GPIO4がHIGHになる↓ESP32C3が起床↓Wi-Fi接続↓Discord通知↓再びDeep Sleepへ移行これで郵便受けが閉まっている間はDeep Sleepで待機し、開いた時だけ起動してDiscord通知を送信できるようになった。まとめESP32C3のDeep Sleepを使うことで、常時起動を避けられるesp_deep_sleep_enable_gpio_wakeup を使うとGPIOの状態変化で起床できる今回はD2(GPIO4)がHIGHになった時に起床するように設定郵便受けが閉まっている間はDeep Sleep、開いた時だけ通知する構成にできた

ESP32C3で郵便受け開閉センサーを自作してみる②Deep Sleepの実装

概要自宅の郵便受けは、外から中身の有無が分かりづらい構造になっている。そのため、郵便が来ているか確認する開けてみる何も入っていない閉めるという作業を何度も繰り返していた。そこで、「 郵便受けが開いたらスマホに通知してくれる仕組みを作れないか？」と思い、自作に挑戦してみることにした。電子工作は今回が初挑戦だったが、AIと相談しながら進めれば何とかなるのではと思い開発を開始。まだ完成していないため実運用はしていないが、今回はリードスイッチを使った開閉検知まで実装できたので紹介。リポジトリgithub.com開発手法今回は ChatGPT と相談しながら開発を進めている。普段であればコード生成は Claude Code に任せることが多いが、電子工作は未知の分野だったため、どの部品を買うべきか配線はどうするのか電池で動かすにはどうするのかなど、コード以外の用途が多かったのでChatGPTと相談しながら開発するスタイルで進めた。作りたいもの郵便受けの開閉を検知したいスマホへ通知したい（今回は Discord Webhook で通知）郵便受けまでは Wi‑Fi が届く郵便受けに電源はない電池で1ヶ月以上動かしたい基本構成郵便受け（閉）↓磁石 ←→ リードスイッチ↓ESP32C3↓Wi‑Fi↓Discord Webhook↓スマホ通知普段は磁石とリードスイッチが近接している状態。郵便受けが開くと磁石が離れるため、その変化を ESP32C3 が検知して通知する。購入したものSeeed Studio XIAO ESP32C3 - Tiny MCU Board mit Wi-Fi und BLE für IoT-Steuerungsszenarien. Mikrocontroller mit Batterieladung, energieeffizient und Reichhaltige Schnittstelle für winziges maschinellesseeed studioAmazonサムコス ブレッドボード 400穴 ジャンパーワイヤーセット 400タイポイント ミニブレッドボード 電子工作 arduino用 収納ケース付 (2個入り，D)サムコスAmazonリードスイッチ メタル 磁気リードスイッチ 電子振動センサー ミニチュアリードコンタク 2mm*14mmKEAIDUOAmazonLesimoll はんだごて ハンダゴテ 14-in-1はんだごてセット 溶接工具 精密半田ごて 電気ハンダゴテ 60W 温度調節可能(200～480℃) 5つ無酸素銅こて先 50g高純度はんだ ON/OFFスイッチ付き 半田吸取器 日本語取扱説明書付き PSE認証 GTC認証推奨品 家電修理・回路基板・基盤などにの電子作業・電気DIY用(14点セット)LesimollAmazonXIAO ESP32C3小型Wi‑Fi搭載Deep Sleep対応電池駆動向き郵便受けのような狭い場所に設置する用途に向いている。リードスイッチ磁石が近づくと導通するセンサー。郵便受けの開閉検知に利用する。ブレッドボードはんだ付けなしで回路を試作できる基板。はんだごてESP32C3 にピンヘッダを取り付けるために使用。開発環境Arduino IDE を使用する。support.arduino.ccArduino IDE はマイコン向けの開発環境で、コードを書くESP32へ書き込むシリアルログを確認するといった作業を行える。開発手順ESP32C3に書き込んで動作確認まず ESP32C3 を USB で Mac と接続する。Arduino IDE を起動してボードから XIAO ESP32C3 を選択する。以下のコードを書き込む。void setup() {  Serial.begin(115200);}void loop() {  Serial.println("Hello ESP32");  delay(1000);}Arduino IDE の左上の「→」ボタンを押して書き込む。シリアルモニタで以下のように表示されれば成功。これで ESP32C3 にプログラムを書き込めることを確認できた。ESP32C3にピンヘッダをはんだ付け購入時は以下の状態。このままではブレッドボードに挿せないため、ピンヘッダをはんだ付けする。リードスイッチを接続配線は以下。D2↓リードスイッチ↓GND実際の配線。開閉確認コードを作成secrets.hconst char* WIFI_SSID = "WifiのSSID";const char* WIFI_PASSWORD = "Wifiのパスワード";const char* DISCORD_WEBHOOK_URL = "通知用のDiscord Webhook URL";mailbox-sensor.ino#include <WiFi.h>#include <HTTPClient.h>#include "secrets.h"/** * @brief リードスイッチの状態変化をDiscordへ通知する * * @example * 磁石を離して OPEN になったタイミングでDiscordに通知する。 */const int reedPin = D2;int previousState = HIGH;/** * @brief Wi-Fiへ接続する */void connectWiFi() {  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);  Serial.print("Connecting to WiFi");  while (WiFi.status() != WL_CONNECTED) {    delay(500);    Serial.print(".");  }  Serial.println("WiFi connected");}/** * @brief Discord Webhookへメッセージを送信する * * @param message Discordに送る本文 */void sendDiscordMessage(const String& message) {  if (WiFi.status() != WL_CONNECTED) {    connectWiFi();  }  HTTPClient http;  http.begin(DISCORD_WEBHOOK_URL);  http.addHeader("Content-Type", "application/json");  String payload = "{\"content\":\"" + message + "\"}";  int httpCode = http.POST(payload);  Serial.print("Discord response: ");  Serial.println(httpCode);  http.end();}void setup() {  Serial.begin(115200);  delay(1000);  pinMode(reedPin, INPUT_PULLUP);  connectWiFi();  previousState = digitalRead(reedPin);  Serial.println("Mailbox sensor started");}void loop() {  int currentState = digitalRead(reedPin);  if (currentState != previousState) {    if (currentState == LOW) {      Serial.println("CLOSED");    } else {      Serial.println("OPEN");      sendDiscordMessage("📬 郵便受けが開きました");    }    previousState = currentState;  }  delay(50);}実装内容は以下。D2 を INPUT_PULLUP で監視状態変化を検知OPEN になったら Discord に通知動作確認磁石を付けた状態で起動し、磁石を離すと Discord に通知が飛ぶ。次回ここまでで開閉検知は実装できた。ただし現状は loop() で常時監視しているため、ESP32 がずっと起きたままになっている。これでは電池駆動には向かない。実運用するためには、Deep SleepGPIOウェイクアップ必要な時だけWi‑Fi接続といった実装が必要になる。次回は ESP32C3 の Deep Sleep を使って、電池駆動向けに改善していく予定。まとめ初めての電子工作だったが、センサーが反応した瞬間はちょっと感動した。ソフトウェア開発とはまた違う面白さがあるので、今後もいろいろ試していく予定。

ESP32C3で郵便受け開閉センサーを自作してみる①リードセンサーのハンドリングまで

概要現在 Mac アプリを作成している。Xcodeでの手順まずは Xcode で普段やっている操作を整理する。Xcode で Product → Archive をクリックArchives 画面で Distribute App → Direct Distribution を選択完了後に Export App でアプリを書き出す今回の CLI 手順では、この Direct Distribution と同じ内容をコマンドで再現する。CLIで実行ExportOptions.plistを作成Xcode で Direct Distribution を選んだ時と同じ挙動にするため、事前に以下のファイルを作成する。■ ExportOptions.plist<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict>  <key>method</key>  <string>developer-id</string>  <key>signingStyle</key>  <string>automatic</string>  <key>teamID</key>  <string>XXXXXX</string></dict></plist>ポイントは以下の通り。method: developer-id を指定すると Direct Distribution 相当になるteamID: 自分の Apple Developer アカウントの Team ID を設定するMacアプリの公証を設定する※この作業は初回のみ必要Apple のアプリ用パスワードが必要になるので、以下を開いて アプリ用パスワード を作成する。https://account.apple.com/account/manage作成したら、以下のコマンドで認証情報を Keychain に登録する。$ xcrun notarytool store-credentials myapp-notary \  --apple-id "you@example.com" \  --team-id XXXXXXXXXX \  --password "<App用パスワード>"xcodebuildでアプリのアーカイブを作成する以下のコマンドでアーカイブを作成できる。$ xcodebuild archive \  -project "myapp.xcodeproj" \  -scheme "myapp" \  -configuration "Release" \  -destination 'generic/platform=macOS' \  -archivePath "./build/myapp.xcarchive" \  -allowProvisioningUpdatesアプリにDirect Distributionの設定を反映する次に、先ほど作成した ExportOptions.plist を使ってエクスポートする。$ xcodebuild -exportArchive \  -archivePath "./build/myapp.xcarchive" \  -exportOptionsPlist ExportOptions.plist \  -exportPath "./build/export" \  -allowProvisioningUpdatesMacアプリを公証する公証のために、まずアプリを zip 化する。$ ditto -c -k --keepParent "./build/export/myapp.app" "./build/myapp.zip"その後、公証を実行する。$ xcrun notarytool submit "./build/myapp.zip" --keychain-profile myapp-notary --wait最後に、公証チケットをアプリへ埋め込む。$ xcrun stapler staple "./build/export/myapp.app"これで ./build/export/myapp.app に配布用アプリが生成される。ついでに不要になった zip を削除しておく。$ rm -f ./build/myapp.zip作成したアプリを検証するビルドしたアプリは以下のコマンドで確認できる。$ xcrun stapler validate build/export/myapp.appThe validate action worked! が出力されれば、公証チケットの埋め込みは成功。続いて Gatekeeper 観点で確認する。$ spctl -a -vvv -t install build/export/myapp.appaccepted が表示されれば、警告なしで起動できる状態になっている。ここまで完了すれば、安全に配布できる状態になる。まとめXcode の GUI で行っていた Archive → Export → Notarize の流れは CLI でも再現できるxcodebuild と notarytool を組み合わせることで、配布用ビルドを自動化しやすくなる今回の作業で、今まで何となく使っていた Xcode 周りのコマンドもかなり整理できた

xcodebuildコマンドでMacアプリを配布用にビルドする

概要これまで静的サイトはだいたい Next.js × Vercel で作っていた。カウカウ をリリースして以降、このサービスだけで Vercel の無料枠を使い切り、他サイトのデプロイに影響が出るようになっていた。そこで、一部の静的サイトを Astro × Cloudflare Pages に移行したので、その内容をまとめる。PRgithub.comAstroとは？astro.buildAstro は静的サイト構築に適した Web フレームワーク。JavaScript を極力含まないシンプルな HTML になるのが特徴。また今回は使っていないが、Astro は Islands architecture を採用しており、Astro の中にそのまま React、Preact、Vue、Svelte などのコンポーネントを import して使える。docs.astro.buildAstroでのコンポーネントの書き方Vue の SFC に近い書き方で、1ファイルの中にスクリプト、HTML、CSS をまとめて表現できる。---const title = 'Hello Astro';---<h1>{title}</h1><style>  h1 {    color: red;  }</style>実装Next.js → Astroへの移行こういう移行作業は AI の得意分野なので、Claude Code に依頼して修正してもらった。■ （Before）src/components/organisms/Top/News.tsximport React from "react";import { FeedItem } from "@/lib/feed";import dayjs from "dayjs";type Props = {  feedItems: FeedItem[];};const News: React.FC<Props> = (props) => (  <div>    <h1 className="text-2xl mb-7">Tech blog</h1>    <div>      <div className="my-2">        <span className="bg-gray-300 py-1 px-2 text-xs font-bold">Hatena</span>      </div>      <div className="font-light">        {props.feedItems          .filter((v) => v.type === "hatena")          .slice(0, 3)          .map((v) => (            <div key={v.title} className="mb-5">              <div>{dayjs(v.createdAt).format("YYYY-MM-DD")}</div>              <a href={v.url} target="_blank" rel="noopener noreferrer">                {v.title}              </a>            </div>          ))}        <div className="pt-3 pb-8">          <div className="text-xs">            <a              href="https://www.wheatandcat.me/"              target="_blank"              rel="noopener noreferrer"            >              もっと読む            </a>          </div>        </div>      </div>      <div className="my-2">        <span className="bg-gray-300 py-1 px-2 text-xs font-bold">Zenn</span>      </div>      <div className="font-light">        {props.feedItems          .filter((v) => v.type === "zenn")          .map((v) => (            <div key={v.title} className="mb-5">              <div>{dayjs(v.createdAt).format("YYYY-MM-DD")}</div>              <div>                <a href={v.url} target="_blank" rel="noopener noreferrer">                  {v.title}                </a>              </div>            </div>          ))}        <div className="pt-3 pb-8">          <div className="text-xs">            <a              href="https://zenn.dev/wheatandcat"              target="_blank"              rel="noopener noreferrer"            >              もっと読む            </a>          </div>        </div>      </div>    </div>  </div>);export default News;■ （After）src/components/organisms/Top/News.astro---import type { FeedItem } from '@/lib/feed'import dayjs from 'dayjs'interface Props {  feedItems: FeedItem[]}const { feedItems } = Astro.propsconst hatenaItems = feedItems.filter((v) => v.type === 'hatena').slice(0, 3)const zennItems = feedItems.filter((v) => v.type === 'zenn')---<div>  <h1 class="text-2xl mb-7">Tech blog</h1>  <div>    <div class="my-2">      <span class="bg-gray-300 py-1 px-2 text-xs font-bold">Hatena</span>    </div>    <div class="font-light">      {hatenaItems.map((v) => (        <div class="mb-5">          <div>{dayjs(v.createdAt).format('YYYY-MM-DD')}</div>          <a href={v.url} target="_blank" rel="noopener noreferrer">            {v.title}          </a>        </div>      ))}      <div class="pt-3 pb-8">        <div class="text-xs">          <a href="https://www.wheatandcat.me/" target="_blank" rel="noopener noreferrer">            もっと読む          </a>        </div>      </div>    </div>    <div class="my-2">      <span class="bg-gray-300 py-1 px-2 text-xs font-bold">Zenn</span>    </div>    <div class="font-light">      {zennItems.map((v) => (        <div class="mb-5">          <div>{dayjs(v.createdAt).format('YYYY-MM-DD')}</div>          <div>            <a href={v.url} target="_blank" rel="noopener noreferrer">              {v.title}            </a>          </div>        </div>      ))}      <div class="pt-3 pb-8">        <div class="text-xs">          <a href="https://zenn.dev/wheatandcat" target="_blank" rel="noopener noreferrer">            もっと読む          </a>        </div>      </div>    </div>  </div></div>React コンポーネントと比べると、Astro 側は Astro.props から受け取り、テンプレート構文もかなり素直。Vercel → Cloudflare Pagesへの移行Astro はビルドすると静的な HTML 一式になるため、Cloudflare Pages へのデプロイもかなり簡単。www.cloudflare.comCloudflare で API Token を作成し、以下の GitHub Actions を用意すれば、main ブランチへの push で自動デプロイできる。■ .github/workflows/deploy_website.ymlname: deploy websiteon:  workflow_dispatch:    inputs:      ref:        description: branch|tag|SHA to checkout        default: "main"        required: true  schedule:    - cron: "0 2 * * *"  push:    branches:      - mainjobs:  deploy:    runs-on: ubuntu-latest    permissions:      contents: read      deployments: write    steps:      - uses: actions/checkout@v4        with:          ref: ${{ github.event.inputs.ref || github.ref }}      - uses: actions/setup-node@v4        with:          node-version: 20          cache: "npm"      - run: npm ci      - run: npm run build      - uses: cloudflare/pages-action@v1        with:          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}          projectName: unicorn-website          directory: dist          gitHubToken: ${{ secrets.GITHUB_TOKEN }}          branch: mainあとは移行先のサイトに既存ドメインを紐づければ完了。www.unicornllc.devまとめ静的サイト用途なら、Astro × Cloudflare Pages はかなり扱いやすいNext.js × Vercel は便利だが、静的サイトまで全部そこに載せると無料枠の圧迫が起きやすいAstro は「静的であること」を前提にした設計が分かりやすく、初めて触ってもかなり面白かった今後も静的サイトはこの組み合わせを使っていこうと思った

静的サイトをNext.js × Vercel → Astro × Cloudflare Pagesに移行

概要現在開発中の Mac アプリで、定期実行と実行完了時のローカル Push 通知を実装したので、その内容をまとめる。今回作ったもの以下の UI で実行時間を設定する。Mac アプリ上でスケジューラに登録し、指定した時間に処理を実行。完了後はローカル Push 通知を表示するように実装した。今回はセキュリティの観点から、サーバー側で定期実行するのではなく、Mac アプリ自身が定期実行する 方式にしている。Swiftでスケジューラを登録するSwift では Timer.scheduledTimerを使うことでスケジュール実行できる。JavaScript の setTimeout や setInterval に近い感覚で使える。import Foundationvar timer: Timer?timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: false) { _ in    print("1秒後に実行")}実装スケジューラのクラスを作成■ AutoFetchScheduler.swiftimport Foundation/// 一定間隔で「データを更新」を呼ぶだけのシンプルなスケジューラfinal class AutoFetchScheduler {    static let shared = AutoFetchScheduler()    private var timer: Timer?    private var settings: AutoFetchSettings?    // スケジュールで実行したい処理を設定    var fetchHandler: (() -> Void)?    private func scheduleNext() {        // 次回の実行日時を取得してスケジューラに登録        let delay = max(nextFireDate().timeIntervalSinceNow, 1)        timer = Timer.scheduledTimer(withTimeInterval: delay, repeats: false) { [weak self] _ in            self?.fireAndReschedule()        }        RunLoop.main.add(timer!, forMode: .common)    }    private func fireAndReschedule() {        // 処理実行後に次のスケジューラを登録        defer { scheduleNext() }        // 処理実行        fetchHandler?()    }    （略）}スケジューラで実行したい内容を外部から設定する■ AppDelegate/// macOSアプリ起動時の処理を担当class AppDelegate: NSObject, NSApplicationDelegate, UNUserNotificationCenterDelegate {    func applicationDidFinishLaunching(_: Notification) {        AutoFetchScheduler.shared.fetchHandler = { [weak self] in            self?.runUpdateBinary() // ← ここにスケジューラで実行したい処理を設定        }    }}Macがスリープしていた時の挙動を実装するTimer.scheduledTimer は Mac がスリープ中だとタイマー自体が動作しない。スリープ解除時に本来の実行予定時刻を過ぎていたら、そのタイミングで実行する 仕様で実装した。■ AutoFetchScheduler.swiftfinal class AutoFetchScheduler {    （略）    /// スリープ解除時に呼ぶ。1スロット以上経過していれば即実行してタイマーを再設定する    func wakeFromSleep() {        guard let settings = settings else { return }        // タイマーをリセット（スリープ中に発火予定時刻が過ぎている可能性があるため）        stop()        if let last = lastExecutedAt {            let elapsed = Date().timeIntervalSince(last)            if elapsed >= settings.timeInterval,               ignoreTime() == false,               checkWeekday() == true            {                lastExecutedAt = Date()                fetchHandler?()            }        }        scheduleNext()    }    （略）}Swift でスリープ解除を検知するには NSWorkspace.shared.notificationCenter.addObserver を使う。■ AppDelegateclass AppDelegate: NSObject, NSApplicationDelegate, UNUserNotificationCenterDelegate {    func applicationDidFinishLaunching(_: Notification) {        // スリープ解除を検知        NSWorkspace.shared.notificationCenter.addObserver(            self,            selector: #selector(onWakeFromSleep),            name: NSWorkspace.didWakeNotification,            object: nil        )    }    @objc private func onWakeFromSleep() {        AutoFetchScheduler.shared.wakeFromSleep()    }}ここまででスケジューラの実装は完了。Push通知の権限をリクエストするUNUserNotificationCenter.current().requestAuthorization を使って Push 通知の許可をリクエストする。■ AppDelegateclass AppDelegate: NSObject, NSApplicationDelegate, UNUserNotificationCenterDelegate {    func applicationDidFinishLaunching(_: Notification) {        // Push通知の許可をリクエスト        UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound]) { granted, error in            NSLog("通知権限: granted=\(granted), error=\(String(describing: error))")        }    }}Push通知の権限がOFFの場合の表示Push 通知の権限が OFF の場合は以下のような表示を出す。UNUserNotificationCenter.current().getNotificationSettings で権限状態を取得できるため、OFF の場合に表示を追加する。private func checkNotificationPermission() {    UNUserNotificationCenter.current().getNotificationSettings { settings in        DispatchQueue.main.async {            notificationDenied = settings.authorizationStatus == .denied        }    }}ローカルPush通知を登録するUNUserNotificationCenter.current().add(request) でローカル Push 通知を登録できる。sendUpdateNotification を呼べば完了。■ AppDelegateclass AppDelegate: NSObject, NSApplicationDelegate, UNUserNotificationCenterDelegate {    private func sendUpdateNotification() {        let formatter = DateFormatter()        formatter.dateFormat = "yyyy/MM/dd HH:mm"        let dateStr = formatter.string(from: Date())        let content = UNMutableNotificationContent()        content.title = "自動更新完了"        content.body = "\(dateStr)で更新"        content.sound = .default        let request = UNNotificationRequest(            identifier: UUID().uuidString,            content: content,            trigger: nil        )        UNUserNotificationCenter.current().add(request, withCompletionHandler: nil)    }}これで以下のようにローカル Push 通知が表示される。まとめ常駐型の Mac アプリを作るうえで、スケジューラ + ローカル Push 通知はかなり使いどころの多い機能Timer.scheduledTimer をベースにしつつ、スリープ復帰時の補正を入れることで実用的に動かせた

Macアプリでスケジューラ + ローカルPush通知を実装

概要現在 Mac アプリを開発中。Polar を使うのが良さそうだったので紹介する。Polarとはpolar.sh開発者向けの課金・ライセンス管理をまとめて提供するプラットフォームAPI 周りがかなり充実しており、ライセンスキーや関連情報を自前で管理する必要がないサンドボックス環境が用意されている他サービスでは販売前に審査が必要なケースもあるが、Polar は売上が発生するまでは審査なしで進められるのでスムーズhttps://polar.sh/docs/merchant-of-record/account-reviews?utm_source=chatgpt.comやりたいことソフトウェア利用の年間ライセンスキーを販売販売する商品は「1年間有効なライセンスキー」ライセンスキーの認証ライセンスキーの期限や認証デバイス数の管理実際にどのくらい自前実装が必要なのかと思いつつ進めたが、必要だったのは Polar API をライセンス判定処理に組み込む部分だけ だった。実装Polarのサンドボックス環境に入るpolar.shサンドボックス環境を使うことで、実際の決済を発生させずに動作確認ができる。Polar のアカウントメニューを開き、Go to Sandbox をクリックするとサンドボックス環境に入れる。商品を作成New Product をクリックし、以下の設定で商品を作成する。Recurring subscription で Every 1 year料金は 1,000 JPYCreate Benefit をクリックして License Keys を選択し、以下を設定Expires 1 yearLimit Activations 3販売リンクを作成Create Checkout Link をクリックして販売リンクを作成する。Label: ライセンスキーProducts: 先ほど作成した商品を選択これで販売リンクが作成される。アクセスすると以下のような画面が表示される。検証用のライセンスキーを発行サンドボックス環境では商品を購入しても実際の決済は発生しない上記の販売リンクから適当に値を入力して購入する購入後、以下の画面にライセンスキーが表示されるライセンスキーとデバイスを紐づけて有効化Polar の customer-portal/license-keys/activate API を使って実装する。https://polar.sh/docs/api-reference/customer-portal/license-keys/activateMac アプリ起動時に以下の画面を表示し、ライセンスキーを入力させる。Swift のコードは以下の通り。class LicenseManager {   （略）    func saveLicenseKey(_ key: String) {        keychainSave(key: keychainLicenseKey, value: key)    }    func saveActivationID(_ id: String) {        keychainSave(key: keychainActivationIDKey, value: id)    }    /// ライセンスキーを認証してアクティベーションIDを保存する    func activate(licenseKey: String) async throws {        let url = URL(string: "\(baseURL)/license-keys/activate")!        var req = URLRequest(url: url)        req.httpMethod = "POST"        req.setValue("application/json", forHTTPHeaderField: "Content-Type")        let body = ActivateRequest(            key: licenseKey,            organizationID: organizationID,            label: deviceName(),            meta: ["device_id": deviceID()]        )        req.httpBody = try JSONEncoder().encode(body)        let (data, response) = try await URLSession.shared.data(for: req)        guard let http = response as? HTTPURLResponse else {            throw LicenseError.networkError        }        guard http.statusCode == 200 else {            let msg = (try? JSONDecoder().decode(PolarAPIError.self, from: data))?.message ?? "Unknown error"            throw LicenseError.serverError(msg)        }        let result = try JSONDecoder().decode(ActivateResponse.self, from: data)        saveLicenseKey(licenseKey)        saveActivationID(result.id)    }}ライセンスキーの認証Polar の customer-portal/license-keys/validate API を使って実装する。https://polar.sh/docs/api-reference/customer-portal/license-keys/validateSwift のコードは以下の通り。class LicenseManager {   （略）    func loadLicenseKey() -> String? {        keychainLoad(key: keychainLicenseKey)    }    func loadActivationID() -> String? {        keychainLoad(key: keychainActivationIDKey)    }    /// 起動時にライセンスキーとアクティベーションIDを検証する    func validate() async throws {        guard let licenseKey = loadLicenseKey() else {            throw LicenseError.serverError("ライセンスキーが見つかりません")        }        let url = URL(string: "\(baseURL)/license-keys/validate")!        var req = URLRequest(url: url)        req.httpMethod = "POST"        req.setValue("application/json", forHTTPHeaderField: "Content-Type")        let body = ValidateRequest(            key: licenseKey,            organizationID: organizationID,            activationID: loadActivationID()        )        req.httpBody = try JSONEncoder().encode(body)        let (data, response) = try await URLSession.shared.data(for: req)        guard let http = response as? HTTPURLResponse else {            throw LicenseError.networkError        }        guard http.statusCode == 200 else {            let msg = (try? JSONDecoder().decode(PolarAPIError.self, from: data))?.message ?? "ライセンスが無効です"            throw LicenseError.serverError(msg)        }        let result = try JSONDecoder().decode(ValidateResponse.self, from: data)        guard result.status == "granted" else {            throw LicenseError.serverError("ライセンスが無効または失効しています")        }    }}これでライセンスキー発行と認証の仕組みは一通り実装できた。まとめ初めてライセンスキー決済まわりを実装したが、Polar を使うと想像以上にシンプルに進められたPolar API にはクライアント向けの API も用意されているので、サーバーを自前実装しなくてもライセンス管理を組み込めるのはかなり便利だった

Polarでライセンスキー発行の仕組みを実装する

概要前回の記事に続き、今回も KAWKAW の話。www.wheatandcat.me今回は、レビュー保存に使っている Neon の課金まわりを改善したので、その内容をまとめる。PRgithub.comNeonとはneon.comNeon はサーバーレス前提で設計された PostgreSQL サービス。無料プランでは 1か月あたり 1 CPU・100 時間まで利用可能DB ブランチ機能もあり、開発環境と本番環境の切り分けにも使いやすい今回の KAWKAW では主に「使っていない時間に止まる」性質に期待して採用した発生していたコストの問題モニタリングを確認したところ、DB が 24時間ずっと起動した状態 になっており、継続的に課金が発生していた（5分間アクセスが無ければ、インスタンスが落ちて課金されない仕組みになっている）。KAWKAWの仕組みについてKAWKAW での DB 利用はかなりシンプルで、基本的には以下の 2 つだけ。対象商品にレビューを投稿する API対象商品のレビュー一覧を取得する APIつまり、新しいレビューが投稿されるまでレビュー一覧は変化しない。Next.jsのrevalidateTagを使ったキャッシュ機構nextjs.orgNext.js には Tag ベースのキャッシュ機構があり、以下のように fetch すると posts というタグ名でキャッシュされる。await fetch("https://api.example.com/posts", {  next: { tags: ["posts"] }})この状態では、2回目以降はキャッシュが返る。revalidateTag で該当タグを無効化する必要がある。import { revalidateTag } from "next/cache"revalidateTag("posts")実装今回は外部 API の fetch というより、DB アクセスそのものを減らしたい ため、メソッド単位でキャッシュできる unstable_cache を使った。レビュー一覧取得側商品 ID ごとにタグ付きキャッシュを作成する。■ apps/public/app/api/reviews/[productId]/route.tsimport { NextResponse } from "next/server";import { unstable_cache } from "next/cache";import { storage } from "@kawkaw/database";export async function GET(  _req: Request,  { params }: { params: Promise<{ productId: string }> }) {  const { productId } = await params;  const getCachedReviews = unstable_cache(    () => storage.getReviewsByProductId(productId),    [`reviews-${productId}`],    { tags: [`reviews-${productId}`] } // ← 商品IDごとにタグを作成  );  const reviews = await getCachedReviews();  return NextResponse.json(reviews);}レビュー投稿側レビュー投稿後に、対象商品のタグだけを無効化する。■ apps/public/app/api/reviews/route.tsimport { NextResponse } from "next/server";import { revalidateTag } from "next/cache";import { storage, insertReviewSchema } from "@kawkaw/database";export async function POST(req: Request) {  const body = await req.json();  const parsed = insertReviewSchema.safeParse(body);  if (!parsed.success) {    return NextResponse.json(      { message: parsed.error.issues.map((i) => i.message).join(", ") },      { status: 400 }    );  }  const review = await storage.createReview(parsed.data);  revalidateTag(`reviews-${parsed.data.productId}`); // ← 対象商品のキャッシュだけ無効化  return NextResponse.json(review, { status: 201 });}この構成にすると、新しいレビューが投稿されるまで DB へアクセスせずにキャッシュを返せる。改善後のモニタリング改善後は、アクセスがないタイミングでインスタンスがちゃんと停止するようになり、継続課金を抑えられるようになった。まとめレビュー一覧のような「更新頻度が低い読み取り系」はタグ付きキャッシュと相性が良いunstable_cache と revalidateTag を組み合わせることで、DB アクセス回数をかなり減らせるサーバーレスな DB は「止まること」に価値があるので、定期的にモニタリングして改善していきたい

Next.jsのrevalidateTagを使用してNeonの課金を改善した話

概要少し前に KAWKAW という架空ショッピングサービスを公開したところ、予想外にバズって想定を大きく超えるアクセスが発生した。kawkaw.app最初は Vercel 単体で運用していたが、アクセス数の増加により Edge Request だけで 1日あたり 10 ドル以上 かかる状態になった。趣味で続けるには厳しいコスト感だったため、Cloudflare を組み合わせて構成を見直したところ、最終的に 1日 1 ドル以下 まで抑えられた。その手法をまとめる。前提KAWKAW は基本的に静的コンテンツ中心のサービスで、唯一ユーザー投稿のレビューだけを DB で管理している。ただし、そのような「ほぼ静的なサイト」でも、Vercel 単体運用だと思った以上にコストがかかる落とし穴があった。初期の実装少人数利用を想定していたため、まずはデプロイしやすさを優先して以下の構成で作成した。デプロイ先: Vercelフロントエンド: Next.jsバックエンド: Next.js API RoutesDB: Neon実際に発生していたコストピーク時は Edge Request だけで 1日 16 ドル 発生していた。VercelのEdge Requestとは？Vercel の Edge Request は、ネットワークで処理されたリクエスト数に応じて課金される仕組み。月 1000 万リクエストまで無料 だが、それを超えると 100 万リクエストごとに 2〜3 ドル 発生する。実際の推移は以下の通りで、無料枠を使い切るとアクセスのたびにかなりの料金が積み上がる。Vercel 自体にもキャッシュ機能はあるが、キャッシュヒット時でも Edge Request としてカウントされる 点に注意が必要。つまり、Edge Request の課金を抑えるには キャッシュ時にそもそも Vercel へ到達させない 構成が必要になる。Cloudflareとはwww.cloudflare.comCloudflare は CDN などを提供するサービス。名前は以前から知っていたが、自分の開発してきたサービスでは使う機会がなく、今回が初導入だった。実際に使ってみるとかなり良く、今後利用機会が増えそうだと感じた。今回使ったのは以下の 2 つ。Cloudflare CDNCloudflare WorkersCloudflare CDNCloudflare CDN を使うと、指定したドメインへのアクセスを Cloudflare が中継し、キャッシュが存在する場合は Cloudflare 側からそのままレスポンスを返せる。しかも、複雑なルールを使わない範囲であれば 無料で利用可能。KAWKAW でも無料の範囲で運用できている。当初は「HTML を Cloudflare CDN でキャッシュすれば、Vercel の Edge Request 問題は解決する」と考えていた。30% 前後 までしか上がらず、想定よりかなり低かった。調べたところ、以下の記事を見つけた。zenn.devHTTP の標準には Vary というキャッシュ判断に関わるヘッダーがある。developer.mozilla.orgNext.js はキャッシュ制御に Vary を使っているが、Cloudflare は Vary をキャッシュキーの判断に使わない設計 になっている。developers.cloudflare.comこの設計差によって、Cloudflare CDN 単体ではうまくキャッシュが効かなかった。Cloudflare Workers を使った。Cloudflare WorkersCloudflare Workers は、Cloudflare CDN 内部で動作するサーバーレスな JavaScript / TypeScript ランタイム。Cloudflare CDN までのアクセス経路が以下だとすると、User → Cloudflare CDN → VercelWorkers を挟むことで、以下のような構成にできる。User → Cloudflare CDN → Cloudflare Workers → Vercelこの構成にすることで、Cloudflare Workers 内で問題になっていた Vary ヘッダーを加工 し、Cloudflare 側でキャッシュ可能なレスポンスに変換できるようになった。Cloudflare Workers の料金体系は 月 1000 万リクエストまで無料。それ以降は 100 万リクエストごとに 0.3 ドル。単純なリクエスト単価で見ても、Vercel と比べておおよそ 1/6 程度 まで下げられる計算になる。実装後のコスト変化以下の通り、16 ドル → 0.27 ドル と大幅なコスト削減に成功した。1日 1 ドル未満 に収まっている。まとめVercel 単体では、キャッシュが効いていても Edge Request 課金が積み上がる静的コンテンツ中心のサイトでは、Cloudflare を前段に置くことで大きくコストを下げられる特に Next.js と Cloudflare の間では Vary の扱いがネックになりやすく、Cloudflare Workers で吸収する構成が有効最近はコストカット系の開発をやる機会が少なかったので、今回の改善はかなり楽しかった

Vercelの運用コストをCloudflareで1/10まで下げた話

概要趣味で作成しているサービスでレビュー機能を実装する機会があった。Moderation APIを使ってみたが、思いのほか使い勝手が良いと感じたので紹介。Moderation APIとは？developers.openai.comOpenAI が提供する APIで、テキストまたは画像に対して危険・不適切な内容が含まれていないかを判定できる。判定したい情報を渡すと、以下のようなレスポンスが返ってくる。※以下の例では violence = trueとなっており、暴力的な内容が含まれているため NG 判定となる。{  "id": "modr-970d409ef3bef3b70c73d8232df86e7d",  "model": "omni-moderation-latest",  "results": [    {      "flagged": true,      "categories": {        "sexual": false,        "sexual/minors": false,        "harassment": false,        "harassment/threatening": false,        "hate": false,        "hate/threatening": false,        "illicit": false,        "illicit/violent": false,        "self-harm": false,        "self-harm/intent": false,        "self-harm/instructions": false,        "violence": true,        "violence/graphic": false      }    }  ]}モチベーション簡単なレビュー機能を実装したいそこまで厳密なフィルタリングは不要だが、ノーガードで公開するのは怖い運用コストは出来るだけ抑えたい上記の条件で調べたところ、Moderation API で omni-moderation-latestモデルを使用する場合、無料で利用できることが分かり採用した。公式ドキュメントにも以下のように記載がある。Our omni-moderation models are made available free of charge ✌️developers.openai.comただし、判定ロジックのカスタマイズは基本的に出来ないため、その点は注意が必要。実装OpenAI の API Key 作成Moderation API 自体は無料だが、クライアント初期化時に API Key が必要。platform.openai.comNode.jsでの実装まず openai パッケージをインストール。$ npm install openai環境変数に API Key を設定。■ .envOPENAI_API_KEY=sk-****************************コード側でクライアントを初期化し、Moderation API を呼び出す。import OpenAI from "openai";const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });export async function moderateText(text) {  try {    const response = await client.moderations.create({      model: "omni-moderation-latest",      input: text,    });    return { flagged: response.results[0].flagged };  } catch (error) {    // API障害時は安全側に倒す    return { flagged: true };  }}あとは moderateText に投稿内容を渡し、flagged === true の場合は「不適切な内容のため投稿できません」といったメッセージを表示すれば良い。まとめこれまで「ユーザーが自由にテキスト入力できて、かつパブリックに公開される機能」は、管理方法を慎重に考える必要があり、気軽には実装しづらかった。しかし Moderation API を使うことで、雑にガードを入れる人力運用をほぼゼロにするコストを抑えるといったことで実装のハードルが、かなり低くなった。レスポンスも非常に速いため、リアルタイム判定でもほぼ問題ないレベル。「厳密な審査までは不要だが、最低限の安全対策は入れたい」というケースには、かなりおすすめできるAPI だと感じた。

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

概要前回の記事では、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を導入

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

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

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

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

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

Flutter HooksとRiverpodの解説

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

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