無料でお問い合わせフォームを作る方法|GAS+スプレッドシート+Gmail通知(外部サービス不要)

概要

今回は外部サービスに頼らず、Googleの仕組みだけで無料のお問い合わせフォームを作る方法について紹介していきます。

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

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

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

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

WebサイトにCtrl+Z(Undo / Redo)を実装する方法(Reactのkeydown + 履歴スタック)

概要

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

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

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

本記事では、実際に動いているReactのコードを抜粋しながら、履歴スタックの設計 → keydownの拾い方 → 巻き戻しの実装という順で解説していきます。
キーボードショートカットの実装で「どこから手を付ければいいの?」と迷っている方は、是非見ていってください。

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

BAGEL & BAGEL(ベーグルアンドベーグル)でお得にベーグルを食べる方法|LINEクーポン/まとめ買い/楽天ポイント(2026年最新)

概要

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

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

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

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

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

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

UMACAの馬券はどの発券機が正解?買い目が分かるレシート型がおすすめ

概要

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

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

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

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

スタバでお得に飲む5つの方法|LINEギフト/オリーブ/Rewards/おかわり/タンブラー

概要

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

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

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

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

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

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

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

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

複数フリマの在庫・粗利を1画面で管理できる無料アプリ「ざいこにゃん」|メルカリ・ラクマ・minne対応・登録不要

概要

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

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

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

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

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

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

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

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

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

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

コメダ珈琲店をお得に楽しむ方法|KOMECA・モーニング・株主優待まで完全網羅

概要

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

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

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

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

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

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

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

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

QBハウスを安く使う3つの方法|100円クーポン・交通系IC・株主優待で1,400円をさらに割引

概要

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

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

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

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

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

ベローチェの公式アプリで最大7.6%還元|楽天ペイ併用で10%超を狙う方法

概要

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

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

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

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

GA4「タグが検出されません」をReact+Viteで直した話|生HTMLにgtagを静的埋め込み

概要

今回はGoogle Analytics 4(GA4)の管理画面で「ウェブサイトでGoogleタグが検出されませんでした」と言われたトラブルを直した話を紹介していきます。

原因はReactのuseEffectでgtag.jsを動的注入していたため、生のHTMLに計測タグが出てこなかったことでした。
Viteプラグインでindex.htmlに静的に焼き込んで解決します。

同じエラー画面で固まっている方向けに、原因の切り分け方から修正手順まで一通りまとめておきます。
それではやっていきましょう!