WordPressサイト上から匿名で問い合わせ・メッセージを送信し、その後も管理者とスレッド形式でやり取りできるオリジナルプラグインを開発しました。

送信後に発行される受付番号・確認用パスワード、または専用アクセスURLを利用して、個人情報の入力を前提とせずに継続したやり取りができる構成です。

────────────────────
使用技術
────────────────────
WordPress / PHP / MySQL / HTML / CSS

────────────────────
活用例
────────────────────
*匿名での問い合わせ受付
*相談・意見・要望の受付
*個人情報を入力させない問い合わせ窓口
*利用者との継続的なメッセージ対応
*社内・団体向けの匿名相談窓口
*WordPressへの独自問い合わせ機能追加

WordPress上で短い投稿を手軽に掲載できる、軽量な「つぶやき」投稿プラグインを開発しました。

短文に加えて、任意で画像1枚・リンク1件を掲載でき、Like機能や複数の投稿グループ分けにも対応しています。ショートコードやテンプレートAPIから、任意の場所へ一覧表示できる構成です。

────────────────────
使用技術
────────────────────
WordPress / PHP / JavaScript / Ajax / localStorage

────────────────────
活用例
────────────────────
*サイト内の近況・ひとこと投稿
*制作メモ・開発メモの掲載
*簡易的なお知らせ・更新情報
*スタッフ・担当者ごとのミニ投稿
*カテゴリー別の短文コンテンツ表示
*通常の記事とは分けた軽量な情報発信

前回のGoogleスプレッドシートの読込・出力のアップグレード版として、Googleスプレッドシートの商品データを、Apps Script・PHP・MySQLと連携してWebサイトへ反映する仕組みを構築しました。

スプレッドシートで商品情報を管理しながら、Webサイト側ではDBから高速に表示できる構成にしています。

────────────────────
使用技術
────────────────────
Google Apps Script / PHP / MySQL / JSON

────────────────────
活用例
────────────────────
*商品一覧・製品カタログの更新
*店舗や施設などの情報管理
*料金表・プラン一覧の更新
*セミナー・イベント情報の管理
*スタッフ・メンバー情報の管理
*WordPressなどを使わずに行う簡易的なデータ更新　等

Google Apps ScriptとPHPを組み合わせ、Googleスプレッドシートで管理している商品情報をWebサイトへ読み込み・表示する仕組みを構築しました。

商品名や価格などの情報をスプレッドシート側で管理できるため、Webサイトのコードを直接編集せずに掲載内容を更新できます。

────────────────────
使用技術
────────────────────
Google Spreadsheet / Google Apps Script / PHP

────────────────────
活用例
────────────────────
*商品一覧・製品情報の更新
*店舗や施設などの情報管理
*料金表・プラン一覧の更新
*セミナー・イベント情報の掲載
*スタッフ・メンバー情報の管理
*Webサイトの簡易的なデータ更新

選択肢から回答を選びながら進める、シンプルな選択回答式フォームのサンプルを作成しました。

サンプルでは1問1画面形式を採用しており、質問に順番に回答していくことで、入力項目の多いフォームでも内容を確認しながら進められる構成にしています。

────────────────────
活用例
────────────────────
*アンケートフォーム
*診断フォーム
*顧客満足度調査
*ヒアリングフォーム
*商品・サービスの選択サポート
*問い合わせ前の条件確認

フォームの入力内容に応じて候補を表示する、サジェスト機能の実装に対応しています。

JavaScript・jQuery・TypeScriptなど、サイトや既存環境に合わせた形で実装でき、入力補助や検索補助として活用できます。

────────────────────
使用技術
────────────────────
JavaScript / jQuery / TypeScript

────────────────────
活用例
────────────────────
*住所・駅名などの入力候補表示
*商品名・サービス名の検索補助
*キーワード検索の入力補助
*フォームの入力ミス軽減
*表記ゆれの防止
*既存フォームのEFO改善

VWO・Optimizely・AB TastyなどのA/Bテストツールを使用した、Webサイトのテスト実装に対応しています。

既存ページのデザイン・文言・導線・UIなどを変更し、複数パターンを比較するためのフロントエンド実装を行えます。

────────────────────
対応ツール
────────────────────
VWO / Optimizely / AB Tasty / Google Optimize

────────────────────
活用例
────────────────────
*ボタン・CTAの変更テスト
*文言・見出しの比較
*レイアウト・UI変更
*フォーム・導線改善
*コンテンツ表示順の変更
*既存サイトの改善施策検証

前回作成したReact + TypeScriptのToDoリストを発展させ、PHP・MySQLと連携してタスクをデータベースへ保存できるDB連携版を作成しました。

ブラウザ内だけでデータを保持する構成から、サーバー側のDBへ保存する仕組みを追加し、複数デバイスから同じデータを利用できる構成にしています。

────────────────────
使用技術
────────────────────
React / TypeScript / PHP / MySQL / localStorage

────────────────────
活用例
────────────────────
*個人用ToDo・タスク管理
*PC・スマートフォン間でのタスク共有
*期限付きタスクの管理
*案件・業務ごとのタスク整理
*グループ別の作業管理
*WebアプリとPHP・MySQLを連携する構成のサンプル

前回作成したReact + TypeScriptのToDoリストを発展させ、グループ分け・期限設定・期限通知などの機能を追加した拡張版を作成しました。

タスクを用途ごとに整理し、期限が近いタスクや期限切れのタスクを確認できるなど、より実際のタスク管理を想定した構成にしています。

────────────────────
使用技術
────────────────────
React / TypeScript / localStorage

────────────────────
活用例
────────────────────
*個人用ToDo・タスク管理
*案件・業務ごとのタスク整理
*期限付き作業の管理
*グループ別のタスク管理
*完了履歴の確認
*React・TypeScriptを使用したWebアプリ制作

React + TypeScriptを使用して、カウントアップ・カウントダウンに対応したシンプルなタイマーアプリを作成しました。

時間の経過を進捗バーで確認でき、カウントダウン完了時にはデスクトップ通知で知らせる機能も実装しています。

────────────────────
使用技術
────────────────────
React / TypeScript / Web Notifications API

────────────────────
活用例
────────────────────
*作業時間の計測
*休憩時間の管理
*ポモドーロなどの時間管理
*勉強・トレーニング時間の計測
*制限時間のある作業管理
*React・TypeScriptを使用したWebアプリ制作

React + TypeScriptを使用して、タスクの追加・編集・削除や履歴表示に対応したシンプルなToDoリストアプリを作成しました。

タスクデータはlocalStorageへ保存し、ページを再読み込みしても内容を保持できる構成にしています。日付ごとの履歴表示や並び順変更など、基本的なタスク管理機能も実装しています。

────────────────────
使用技術
────────────────────
React / TypeScript / localStorage

────────────────────
活用例
────────────────────
*個人用ToDo・タスク管理
*日々の作業内容の整理
*完了したタスクの履歴確認
*日付ごとの作業管理
*簡易的な進捗管理
*React・TypeScriptを使用したWebアプリ制作

GitHubと自サイトを連携し、Gitによるソースコード管理から公開サーバーへの反映までを行える開発フローを構築しました。

SourceTreeを使用し、feature・develop・mainの3つのブランチを使い分けることで、グループでの開発も想定した運用構成にしています。

────────────────────
使用技術
────────────────────
Git / GitHub / SourceTree

────────────────────
活用例
────────────────────
*Webサイトのバージョン管理
*複数人でのWebサイト制作
*機能追加・修正ごとのブランチ管理
*公開前の変更内容確認
*GitHubを利用した公開フローの構築
*Webサイト更新作業の運用整理