Apps ScriptとPHPを組み合わせ、Googleスプレッドシートのデータを読込・出力するサンプルを作成しました。

────────────────────
・サンプル
────────────────────
https://yuta-shiina.com/sample/spreadsheet_v2.0/
ID: sample
PASS: sample

────────────────────
・Googleスプレッドシート
────────────────────
https://docs.google.com/spreadsheets/d/1bwbJWZQyywPlh5ecKXnED5p5MGWxPgL2tr8QuKYIQoE/edit?usp=sharing

こちらのスプシは、アクセス制限を「リンクを知っている全員」にしてありますが、「制限付き」でも表示可能です。
スプシに画像のURLを記載することで、画像表示させることも可能です。

────────────────────
・実装内容
────────────────────
前回の「Googleスプレッドシートの読込・出力」の発展型として、下記仕様にアップデート

＝＝＝＝
Googleスプレッドシート
　↓
Apps ScriptにてJSON出力＆送信
　↓
PHPでJSON受信＆DB書き込み
　↓
サイトに表示
＝＝＝＝

Googleスプレッドシートを読み込んで表示するための遅延が解消。
スプシ→JSONの出力を、ボタンでの手動実行にすることにより、App Scriptの実行回数を抑制

Apps ScriptとPHPを組み合わせ、Googleスプレッドシートのデータを読込・出力するサンプルを作成しました。

────────────────────
・サンプル
────────────────────
https://yuta-shiina.com/sample/spreadsheet/
ID: sample
PASS: sample

────────────────────
・Googleスプレッドシート
────────────────────
https://docs.google.com/spreadsheets/d/1zyGM08LwkJhQlU2NYf_pKwnhz2MbfndixJl6wIle2O4/edit?usp=sharing

こちらのスプシは、アクセス制限を「リンクを知っている全員」にしてありますが、「制限付き」でも表示可能です。
スプシに画像のURLを記載することで、画像表示させることも可能です。

シンプルな選択回答式フォームのサンプルを作成しました。
https://yuta-shiina.com/sample/enquete/
ID: sample
PASS: sample

────────────────────
・アンケートフォーム
・診断フォーム
・顧客満足度調査
────────────────────
などなど、いろいろ応用可能

サンプルは１問１画面式ですが
１画面に全質問表示させたり
ページ遷移での回答表示させるなど
用途によって仕様改修可能です。

各種コードにてサジェスト機能の実装が可能です。

また、
────────────────────────
jQuery ⇔ JavaScript
JavaScript ⇔ TypeScript
────────────────────────
のような、各種コードへの変換なども可能です。

────────────────────────
・入力の手間を減らせる
・誤字・入力ミスを防ぎやすい
・ユーザーが候補を選ぶだけなので操作がわかりやすい
・フォーム離脱を減らし、入力完了率の向上が期待できる
・表記ゆれを抑え、データを整理しやすい
────────────────────────
など、フォームの入力補助として、
EFOの効果も期待できます。

各種ABテストツールを使用しての
ABテスト実装経験が多数あります。

実装経験ツール
━━━━━━━━━━━━━━━━━━
・Googleオプティマイズ
・Optimizely
・ABTasty
・VWO
━━━━━━━━━━━━━━━━━━
他ツールもお気軽にご相談ください。

前回作成したToDoリストアプリのDB連携版を作成いたしました。
通知実装の前に、DBに保存での複数デバイスで共有を対応いたしました。

下記の仕様に加え
━━━━━━━━━━━━━━━━━━━━━━━
・ToDo追加・編集・削除機能
・localStorage保持
・日付ごとの完了履歴を表示
・日付順切替（昇順/降順）
・日付ごとの折りたたみ表示
・グループ追加、分別
・期限設定
・期限間近、切れでの通知
　※ページを開いている間のみ
・ページ表示時、1分後ごとの期限チェック
━━━━━━━━━━━━━━━━━━━━━━━

↓　追加

━━━━━━━━━━━━━━━━━━━━━━━
PHPとの連携でDB保存
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしてます。

別のポートフォリオにて
Tailwindなど導入したいと思っています。

次の拡張案としては
PWA化 + Service Worker + Push API
で、ページを閉じてもデスクトップ通知がくるようできると…と思っております。

先日作成したToDoリストアプリの拡張版を作成いたしました。

下記の仕様に加え
━━━━━━━━━━━━━━━━━━━━━━━
・ToDo追加・編集・削除機能
・localStorage保持
・日付ごとの完了履歴を表示
・日付順切替（昇順/降順）
・日付ごとの折りたたみ表示
━━━━━━━━━━━━━━━━━━━━━━━

↓　追加

━━━━━━━━━━━━━━━━━━━━━━━
・グループ追加、分別
・期限設定
・期限間近、切れでの通知
　※ページを開いている間のみ
・ページ表示時、1分後ごとの期限チェック
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしてます。

別のポートフォリオにて
Tailwindなど導入したいと思っています。

次の拡張案としては
PWA化 + Service Worker + Push API
で、ページを閉じてもデスクトップ通知がくるようにしたいと思っています。

GitHubにて
ソースコードとともに公開しております。
https://yutashiina.github.io/react-todo-app2/

REACT + TypeScriptにて
簡単なTIMERアプリを作成いたしました。

仕様はこのような感じです。
━━━━━━━━━━━━━━━━━━━━━━━
・カウントアップ
・カウントダウン
・進捗バー表示
・デスクトップ通知でアラート機能
　※ページを開いている間のみ
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしています。

別のポートフォリオにて
Tailwindなど導入したいと思っています。

GitHubにて
ソースコードとともに公開しております。
https://yutashiina.github.io/react-timer-app/

REACT + TypeScriptにて
簡単なToDoリストアプリを作成いたしました。

仕様はこのような感じです。
━━━━━━━━━━━━━━━━━━━━━━━
・ToDo追加・編集・削除機能
・localStorage保持
・日付ごとの履歴完了履歴を表示
・グループ単位で全削除
・日付順切替（昇順/降順）
・日付ごとの折りたたみ表示
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしてあり
別のポートフォリオにて
Tailwindなど導入したいと思っています。

GitHubにて
ソースコードとともに公開しております。
https://yutashiina.github.io/react-todo-app/

GitHubと自サイトを連携いたしました。
Gitクライアントは「SourceTree」を使用

グループワークを想定し
━━━━━━━━━━━━━━━━━━
■ブランチ
（作業）　feature
（テスト）develop
（公開）　main
━━━━━━━━━━━━━━━━━━
mainにPRマージされると公開サーバーが更新される仕様です。
※今回テスト環境の構築は省略しました

マークアップエンジニアでフリーランスになってかれこれ20年（2025年現在）、仕事用のサイトを作るのをずーっとサボってましたが、この度、やっとこ作りました。

仕事の幅を広げるため、
勉強も兼ねていろいろ学習・実践しているので、
メモ帳代わりにいろいろ投稿していきたいと思います。

現状、請負業務が多く、
一般公開できる実績が数少ないのですが、
実績もちょいちょいUpしていきたいと思います。