椎名友太 | Webクリエイター・エンジニア

Googleスプレッドシートの読込・出力

[Skils]Googleスプレッドシートの読込・出力

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を記載することで、画像表示させることも可能です。

2026.07.16

選択回答式フォーム

[Skils]選択回答式フォーム

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

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

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

2026.07.12

サジェスト機能の実装

[Skills]サジェスト機能の実装

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

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

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

2026.07.08

[Skills] ABテスト実装

[Skills] ABテスト実装

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

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

2026.07.08

[Portfolio] ToDoリスト DB連携版(REACT + TypeScript + PHP + MySQL)

[Portfolio] ToDoリスト DB連携版 (REACT + TypeScript + PHP + MySQL)

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

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

↓ 追加

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

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

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

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

2025.10.12

[Portfolio] ToDoリスト 拡張版(REACT + TypeScript)

[Portfolio] ToDoリスト 拡張版(REACT + TypeScript)

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

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

↓ 追加

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

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

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

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

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

2025.09.06

[Portfolio] TIMER(REACT + TypeScript)

[Portfolio] TIMER(REACT + TypeScript)

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

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

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

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

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

2025.09.06

[Portfolio] ToDoリスト(REACT + TypeScript)

[Portfolio] ToDoリスト(REACT + TypeScript)

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

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

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

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

2025.09.05

[Portfolio] GitHubと自サイトの連携

[Portfolio] GitHubと自サイトの連携

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

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

2025.09.05

ご挨拶

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

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

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

2025.08.26

Skills

言語 HTML5、CSS3、SCSS、Javascript、PHP
習得中:TypeScript
フレームワーク
ライブラリ
jQuery
※習得中:React、Next.js
ツール
サービス

画像・デザイン:
XD、figma、Photoshop、Illustrator、Lightroom、fireworks

映像系:
Premiere Pro、After Effects、Animate、Clipchamp、Edits、PowerDirector

CMS:
Wordpress、Movable Type …etc

EC系:
Shopify、makeshop、e-shopsカート2、BASE、楽天GOLD …etc

ABテスト:
Optimizely、ABTasty、VWO …etc

連絡系:
Chatwork、Slack、Backlog、Google Chat、Google Meet、Zoom …etc

その他:
Google Analytics、GitHub、SourceTree、ChatGPT …etc

※現在、Adobe Fireflyを勉強中です
※他ソフトやツールも、ご希望あれば習得・対応いたします

※2026年7月現在

Profile

椎名 友太(シイナ ユウタ)
1979年12月生まれ(満46歳)

2026年現在で、フリーランスの経歴は21年ほど。

下請けや孫請けながら、
大手企業のサイトの制作や運営補助、編集などにも携わっており、
投稿や更新型のサイト(wordpressなど)が多く、
ECサイトの構築なども手がけております。

SEOを意識しての制作や改善、
ABテストなどを行いながらのサイト運営も行っており、
形を作るだけの制作ではなく、
見やすさや使いやすさを重視し、
活きるサイトの制作を心がけております。

SNS用のリールやショート動画や、
YOUTUBEなどの動画編集なども対応可能です。

最近では、AIを活用しての、
プログラミングやデザインの効率化やプランニング、
スキルや知識のブラッシュアップも図っております。