概要

今回はPWAの自動更新が「古い版のまま」止まってしまう原因と、_headersによるキャッシュ制御について紹介していきます。

vite-plugin-pwaでregisterType: "autoUpdate"を入れたから、デプロイすれば全員に最新版が届く——そう思っていたのに、なぜか一部の端末でいつまでも古い画面が表示され続ける。
そんな経験ないですか？（- -;

実はこれ、Service Workerの設定ミスではなく、CDNやブラウザのHTTPキャッシュが古いsw.jsやindex.htmlを掴み続けているのが犯人なことが多いんです。
この記事では、なぜそうなるのかを「キャッシュは2層ある」という視点で整理して、public/_headersを1枚置くだけで解決する方法を解説します。
ケースA（Vite + content hash）とケースB（素のHTML静的サイト）の両方を扱うので、自分の構成に合うほうを選んでください。

それではやっていきましょう（^^!

概要

今回は無料でお問い合わせフォームを作る方法を、外部サービスに頼らずGoogle Apps Script（GAS）とスプレッドシート・Gmailだけで実現する手順として紹介していきます。

以前、無料で静的サイトに問い合わせフォームを実装する方法という記事でFormsubmitを使ったやり方を書きました。
あれはメール転送だけで完結する手軽さが魅力なんですが、運用していると「送られてきた内容を一覧で見返したい」「第三者サービスを挟まずに済ませたい」と思うようになってきたんですよね（- -;

そこで今回は、Google Apps Script（GAS）＋スプレッドシート＋Gmail通知という構成に作り替えました。
送信内容はスプレッドシートにどんどん溜まっていき、同時にGmailにも通知が飛んでくるので、見逃しもありません。

しかも使うのはGAS・スプレッドシート・GmailというすべてGoogle公式の仕組みだけなので、Formspreeのような外部サービスへの業務委託も発生しません。
プライバシーポリシー上も「保管先はGoogleのみ」とシンプルに書けます。

当ブログのお問い合わせフォームも実際にこの構成で動いているので、その中身をベースに解説していきますね（^^
料金は完全に無料で、サーバーも不要です。
それではやっていきましょう！

概要

今回はWebサイト（Webアプリ）にCtrl+ZによるUndo（元に戻す）とRedo（やり直し）を実装する方法について紹介していきます。

お絵描きツールや画像編集系のUIを作っていると、「うっかり1個前の操作を消したい」場面って必ず出てきますよね。
そういうときにCtrl+Zが効くだけで、UXはかなり良くなる気がします（^^

実は先日作った画像マスクサイト「もざいくにゃん」に、この機能を後付けで入れたんですが、思っていたよりシンプルなコードで実現できました。
ポイントは「操作の履歴を2本のスタックで持つ」という考え方だけです。

本記事では、実際に動いているReact / JavaScriptのコードを抜粋しながら、履歴スタックの設計 → keydownの拾い方 → 巻き戻しの実装という順で解説していきます。
Mac/Windows両対応や入力欄でのショートカット無効化など、地味に忘れがちな実装上の注意もあわせてまとめました。
WebアプリにCtrl+Z（Undo / Redo）を入れたいけど「どこから手を付ければいいの？」と迷っている方は、是非見ていってください。

それではやっていきましょう（^^!

概要

今回はBAGEL & BAGEL（ベーグルアンドベーグル）でお得にベーグルを食べる方法について紹介していきます！

もっちりした食感とフレーバーの多さで人気のBAGEL & BAGELですが、ベーグルって1個あたり250〜350円くらいしますよね。
十分安いのですが、朝ご飯用に買ったりカフェ利用したりすると、結構いい値段になります（- -;

毎回そのまま定価で買うのはちょっともったいないので、調べてみたところLINEクーポンやまとめ買い割引、楽天ポイント還元を組み合わせれば、けっこうお得に買えることがわかりました！

この記事は実際にWebで確認できた情報だけをまとめていて、各項目には情報の取得元（出典URL）を必ず添えています。
自分でも一次情報を確認しながら読めるようにしています（^^

少しでもお得にベーグルを楽しみたい人は是非見ていってください。

それではやっていきましょう！

概要

今回はUMACAで馬券を発券するときのおすすめ端末について紹介していきます。

UMACAで馬券を買うと、普通の馬券は出てこず、機械から「控え」のような紙が印刷されます。
実はこの控え、使う端末によって形がぜんぜん違うんですよね。
何を買ったのか一目で分からない紙が出てくる端末もあれば、レシートのように買い目がしっかり印字される端末もあります。

結論から言うと、買い目を残したいならレシート型で発券できる端末がおすすめです。
折りたためば普通の馬券とほとんど同じサイズになるので、馬券を手に持って応援したい派の人にもぴったりですよ（^^

UMACAそのものの作り方や使い方は別記事にまとめているので、まだ作っていない方はそちらもどうぞ。

概要

今回はスタバをお得に利用する5つの方法について紹介していきます！

カフェ作業や友達との待ち合わせでスタバによる方は結構いるのではないかと思います。

ただスタバのコーヒーって1杯400〜700円くらいしますよね。
積み重なるとバカにならない（- -;

週2〜3回通うだけで月5,000円コースなので、何もせずに払うのはちょっと損な気がしてきます。

そこで調べてみたところ、ちょっと工夫するだけで最大で実質25%以上の還元まで持っていける方法がいくつかありました！
どれもアプリやカードを切り替えるだけで難しい設定は一切なしです。

（あくまで自分が試した上での最適解なので、もっとお得な組み合わせはあるかもしれません！）

少しでもお得にスタバを利用したい人は是非見ていってください（^^

それではやっていきましょう！

概要

今回はメルカリ・ラクマ・BASE・minneなど複数のフリマ／ECの在庫と粗利を、1画面でまとめて管理できる無料アプリ「ざいこにゃん」を作ったので紹介していきます。

このアプリの一番の特徴は登録不要・完全無料で、データは端末のブラウザの中だけに保存される（サーバーには一切送信しない）ことです。

メルカリ・ラクマで副業物販をしていたり、minneやCreemaでハンドメイド作品を売っていると、「販路が増えるほど在庫の管理がしんどくなってきた」と感じたことはないでしょうか。

自分のまわりでも、チャネルごとにスプレッドシートが分かれていって、結局どれが儲かっているのか分からない…という声をよく聞きます（- -;

そこで「複数の販路の在庫・売上・粗利を1画面で見られて、福袋やセット販売の原価まで自動で計算してくれるアプリ」を作ってしまうことにしました。

それが「ざいこにゃん🐾」です。

公開URLはこちら → site-de-zaiko.shinpinoshi.comhttps://site-de-zaiko.shinpinoshi.com

ブラウザで開けば、その瞬間から使えます（登録不要・無料）。

この記事では、どんなアプリなのか・どう使うのかを紹介していきます（^^!

それではやっていきましょう！

概要

今回はコメダ珈琲店をお得に楽しむ方法について紹介していきます。

コメダといえば、シロノワール・ジェリコ・ボリューム満点のサンドなど「大盛りでハズレなし！」のチェーン店ですよね（^^

ただ正直なところ、ドリンクが600円前後でフードも頼むと普通に1,500円くらいかかっちゃうので、何も考えずに通っていると意外と財布へのダメージが大きいんですよ…

ただコメダは大好きなので、やっぱり行きたいですよね（- -;

そこで色々と調べたり試した結果、色々とお得に利用できる方法が見つかったので、こちらで紹介していこうと思います。

KOMECA・コーヒーチケット・モーニング・株主優待など色とりどりです。
なんと同じ1杯が2〜3割安く飲めるレベルまで持っていけちゃいます！

節約効果はかなり大きくやりやすい方法もあるので、ヘビーユーザの方やあまり行かない人まで是非見ていってください！！

それではやっていきましょう！

概要

今回はQBハウスをさらにお得に使う3つの方法について紹介していきます。

1,400円という激安価格で散髪できるQBハウスですが、毎月通うと年間で1万6,000円超。
散髪代って固定費の中だと地味にバカにならないですよね（- -;

しかし店舗で配布される次回クーポン・交通系ICでの支払い・株主優待を組み合わせれば、1回1,400円のカット代をさらに安くできます！

方法によって難易度は変わるので、全部やる必要はなくて、コスパが良いと思うものから無理なやると年間で数百円〜数千円は節約できちゃいます！

それではやっていきましょう！

概要

今回はベローチェをお得に楽しむ方法について紹介していきます。

正直な話、これだけ抑えておけば大丈夫というレベルで最強なのが公式アプリのインストールです！
ただでさえ安いベローチェのコーヒーが、アプリを見せるだけでさらに安く飲めちゃいます（^^

加えて時間帯や支払い方法を少し工夫すれば、さらにお得になるので、合わせて紹介していきますね！

それではやっていきましょう！