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

メールアドレスなどの個人情報を入力しなくても利用でき、送信後に発行される受付番号・確認用パスワード、または専用アクセスURLを使って、利用者が後からメッセージを確認・追加できます。

一般的な問い合わせフォームの「送信して終了」ではなく、匿名性を維持しながら継続したコミュニケーションができる仕組みを目指して制作しています。

主な機能・特徴

• 匿名での問い合わせ・メッセージ送信
• 受付番号＋確認用パスワードによる認証
• 専用アクセスURLによる認証
• 利用者と管理者によるスレッド形式のやり取り
• 利用者からの追加メッセージ投稿
• 管理画面からの返信・管理
• 管理者用の内部メモ
• 問い合わせ状態の管理
• 禁止入力に対するエラー表示・入力チェック
• Security / Privacyを考慮した認証・データ管理

活用例

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

通常の問い合わせフォームではメールアドレスなどを使って返信するケースが多いですが、このプラグインではサイト内でやり取りを完結できるため、匿名性を維持したまま継続的な対応ができます。

実装の仕組み

利用者が問い合わせを送信すると、問い合わせごとにアクセスするための情報を発行します。

一度送信して終了するフォームではなく、1つの問い合わせをスレッドとして管理することで、利用者と管理者が継続してやり取りできる構成にしています。

Security・Privacyへの対応

• 受付番号と確認用パスワードによる認証
• 専用アクセスURLによる認証
• Session・Cookieを考慮した認証状態の管理
• URL・メールアドレス・スクリプトなど禁止入力への対応
• 認証失敗時に詳細な内部情報を表示しない構成
• 管理者操作に対する権限・不正リクエスト対策

匿名で利用できる仕組みだからこそ、表示上の使いやすさだけでなく、認証・入力チェック・Privacyを含めて設計しています。

工夫・改善した点

• 匿名性を維持しながら、送信後も継続してやり取りできる仕組みにしました。
• 受付番号によるログインと専用URLの2つのアクセス方法を用意しました。
• 利用者向け画面と管理者向け画面を分け、それぞれ必要な情報だけを表示する構成にしました。
• 禁止されている入力は共通のエラー表示としてまとめ、利用者に分かりやすくしました。
• 文言・入力欄の案内・ボタン色などを管理画面から調整できる構成にしています。
• 機能追加ごとにQA・回帰テストを行い、Authentication・Security・Privacyへの影響を確認しながら改善しました。

機能を追加するだけでなく、実装前の調査、仕様確定、実装、QA、Release Candidate、本番導入という工程を分け、既存機能を壊さないことを確認しながら段階的に開発しています。

使用技術

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

通常のブログ記事とは別に、近況や制作メモ、簡易的なお知らせなどを短文で掲載できる仕組みです。

短文に加えて、必要に応じて画像1枚・リンク1件を設定でき、Like機能や投稿グループ分けにも対応しています。

主な機能・特徴

• 専用のカスタム投稿タイプによるつぶやき管理
• 短文＋任意の画像1枚＋任意のリンク1件を掲載
• 投稿ごとのLike機能
• ストリーム機能による投稿グループ分け
• 1投稿につき0または1つのストリームを設定可能
• ショートコードによる一覧表示
• テーマ側から利用できるTemplate API
• 管理画面からストリームによる絞り込み
• 投稿数を指定した一覧表示
• プラグイン削除時のデータ削除設定に対応

活用例

• サイト内の近況・ひとこと投稿
• 制作メモ・開発メモの掲載
• 簡易的なお知らせ・更新情報
• スタッフや担当者ごとのミニ投稿
• テーマや話題ごとに分けた短文コンテンツ
• 通常の記事とは分けて更新したい軽量な情報発信

ブログ記事を作成するほどではない短い情報でも、WordPressの管理画面から簡単に追加・管理できる用途を想定しています。

実装の仕組み

WordPressのカスタム投稿タイプを利用してつぶやきを管理し、必要に応じてカスタムタクソノミーでストリームを設定する構成です。

公開側では、ショートコード

表示件数は指定可能で、ストリームを指定した一覧表示にも対応しています。

Like機能

各投稿にはLikeボタンを設置でき、Ajaxを利用して画面遷移なしでLike数を加算できます。

ブラウザ側ではlocalStorageを利用してLike済みの状態を保持し、同じブラウザから繰り返し押されないようにしています。

ストリーム機能

複数のつぶやきを用途ごとに分けて表示できるよう、カスタムタクソノミーによるストリーム機能を追加しました。

1つのカスタム投稿タイプを維持したまま投稿をグループ分けできるため、用途ごとに複数の投稿タイプを増やさず管理できる構成にしています。

工夫・改善した点

• 通常の記事投稿とは分離し、短文投稿専用の軽量な構成にしました。
• 画像やリンクは必須にせず、短文だけでも利用できるようにしました。
• 1つのカスタム投稿タイプを維持しながら、ストリームによる複数グループ表示へ対応しました。
• ショートコードとTemplate APIの両方を用意し、ページ内・テーマ内のどちらからでも利用できる構成にしました。
• Like処理はAjaxで行い、ページを再読み込みせずに反映できるようにしました。
• PC・スマートフォンの両方で、Like表示を含めたレイアウトを調整しました。

使用技術

前回のGoogleスプレッドシートの読込・出力のアップグレード版として、Googleスプレッドシートで管理している商品情報を、Webサイトへ反映できる仕組みを構築しました。

商品名や説明、画像などの情報をスプレッドシート側で管理できるため、Webサイトのコードやデータベースを直接編集せずに情報を更新できます。

主な機能・特徴

• Googleスプレッドシートで商品情報を管理
• Apps ScriptからJSON形式でデータを送信
• PHPでデータを受信してMySQLへ保存
• WebサイトではDBに保存したデータを表示
• 画像URLを登録して商品画像を表示可能
• スプレッドシートを非公開設定にした運用にも対応

活用例

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

Excelやスプレッドシートに慣れている担当者が、Webサイトの仕組みを意識せず更新できる用途を想定しています。

実装の仕組み

スプレッドシートへ直接アクセスして表示する方式ではなく、一度DBへ保存してからWebサイトに表示する構成にしています。

工夫・改善した点

以前作成したスプレッドシート連携版を発展させ、Webサイト表示時にスプレッドシートを読み込まない構成へ変更しました。

これにより、

• ページ表示時のデータ取得による待ち時間を削減
• Apps Scriptの不要な実行を抑制
• スプレッドシートを商品管理画面のように利用

できるようにしています。

使用技術

デモ

実際の動作を確認できるサンプルを公開しています。

サンプルサイト

［デモを見る］
ID: sample　PASS: sample

Googleスプレッドシート

［管理用スプレッドシートを見る］

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

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

サンプルでは、商品コード・商品名・容量・金額などの情報をスプレッドシート側で管理し、その内容をWebサイトの商品一覧へ反映しています。

Webサイトのコードを直接編集せずに情報を変更できるため、ExcelやGoogleスプレッドシートに慣れた担当者でも、Webの仕組みを意識せずに更新できる用途を想定しています。

主な機能・特徴

• Googleスプレッドシートで商品情報を管理
• Google Apps Scriptを利用してデータを取得
• PHP側でスプレッドシートの情報を読み込み・表示
• 商品コード・商品名・容量・金額などをWebサイトへ反映
• Webサイトのコードを直接変更せずに掲載データを更新
• 画像URLを利用した画像表示にも対応可能

活用例

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

専用の管理画面を用意するほどではないものの、「担当者側で掲載内容を変更できるようにしたい」といった用途にも活用できます。

実装の仕組み

Googleスプレッドシートをデータ管理用として利用し、Google Apps ScriptとPHPを組み合わせてWebサイトへ情報を表示しています。

商品情報をWebサイトのHTMLへ直接記述するのではなく、更新するデータと表示側のコードを分けて管理できる構成にしています。

工夫・改善した点

• 普段使い慣れているGoogleスプレッドシートを簡易的な管理画面として利用できるように
• 商品名や価格など、変更する可能性のある情報をWebサイトのコードから分離
• Web制作の知識がない担当者でも、スプレッドシートを編集する感覚で掲載情報を管理できる構成
• 画像URLを利用することで、商品画像などの表示にも拡張できるように

この仕組みをさらに発展させ、Googleスプレッドシートの商品データをPHP・MySQLと連携し、一度データベースへ保存してからWebサイトへ表示する「Spreadsheet Product Sync」も制作しています。

使用技術

デモ

実際の動作を確認できるサンプルを公開しています。

［デモを見る］
ID：sample
　PASS：sample

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

サンプルでは1問1画面形式を採用しており、質問を一度にすべて表示するのではなく、1つずつ回答しながら進める構成にしています。

アンケートや診断、問い合わせ前のヒアリングなど、利用目的に合わせて質問内容や表示方法を変更できるフォームを想定しています。

主な機能・特徴

• 選択肢から回答を選んで進めるフォーム
• 1問1画面形式で質問を順番に表示
• 回答内容に合わせたフォーム構成へ変更可能
• 用途に応じて1画面にすべての質問を表示する形式にも変更可能
• ページを分けて回答を進める形式にも対応可能
• 質問内容や選択肢を用途に合わせて変更可能

活用例

• アンケートフォーム
• 診断フォーム
• 顧客満足度調査
• 問い合わせ前のヒアリングフォーム
• 商品・サービス選びのサポート
• 条件や要望を確認する事前確認フォーム

質問を順番に表示することで、一度に多くの入力項目を見せず、利用者が回答に集中しやすいフォームとして活用できます。

実装の仕組み

質問と選択肢を順番に表示し、利用者の操作に合わせて次の質問へ進む構成です。

用途によって、1問ずつ表示する形式だけでなく、すべての質問を1画面へまとめて表示したり、複数ページに分けて回答させる構成へ変更することもできます。

工夫・改善した点

• 1画面に表示する情報を絞り、回答しやすい構成にしました。
• アンケートや診断など、さまざまな用途へ展開しやすいシンプルな構成にしています。
• 質問数や利用目的に合わせて、表示形式を変更できることを前提としています。
• 一般的な問い合わせフォームとは異なる、選択中心の入力フローとして利用できるようにしています。

デモ

実際の動作を確認できるサンプルを公開しています。

［デモを見る］
ID：sample　PASS：sample

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

JavaScript・jQuery・TypeScriptなど、既存サイトの構成や使用しているコードに合わせて実装できます。

入力候補を表示することで、利用者の入力負担を減らし、検索やフォーム入力を補助する用途に活用できます。

主な機能・特徴

• 入力した文字に応じて候補を表示
• 候補を選択してフォームへ入力
• 既存のフォームや検索欄への追加実装
• JavaScript・jQuery・TypeScriptなど環境に合わせた実装
• 既存コードに合わせた書き換え・調整
• 入力補助によるフォームの使いやすさ改善

活用例

• 住所・都道府県・駅名などの入力候補表示
• 商品名・サービス名の検索補助
• サイト内検索のキーワード候補表示
• お問い合わせフォームの入力補助
• 会員登録フォームなどの入力ミス軽減
• 既存フォームのEFO改善

入力候補から選択できるようにすることで、文字入力の手間を減らし、誤字や表記ゆれを抑える用途にも利用できます。

実装の仕組み

入力された文字を取得し、その内容に合う候補を絞り込んで表示します。

候補データの持ち方や取得方法は、サイトの仕様や利用目的に合わせて変更できます。

工夫・改善できる点

• 入力の手間を減らし、操作しやすいフォームにできます。
• 誤字や入力ミスを防ぎやすくできます。
• 候補から選択することで、ユーザーが入力内容を判断しやすくなります。
• 表記ゆれを抑え、登録されるデータを整理しやすくできます。
• 入力時の負担を軽減することで、フォーム改善・EFO施策として活用できます。

コードの変更・移植

既存サイトの環境に合わせ、同じ処理を別の書き方へ変更することにも対応しています。

既存サイトの改修やライブラリの見直しなど、現在の環境を維持しながらコードを調整する用途にも対応できます。

使用技術

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

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

既存サイトの構造を確認しながら、HTML・CSS・JavaScriptなどを利用してテスト用の変更を加えることができます。

主な対応内容

• 既存ページを利用したA/Bテストパターンの実装
• 文言・見出し・ボタンなどの変更
• レイアウト・デザイン・UIの変更
• 要素の追加・非表示・並び替え
• フォームやページ内導線の改善施策実装
• JavaScriptを使用した動的な表示・挙動の変更

活用例

• CTAボタンの文言・デザイン比較
• メインビジュアルや見出しの変更テスト
• コンテンツの配置・表示順の比較
• フォーム入力までの導線改善
• ナビゲーション・リンク配置の変更
• 既存ページを利用したUI・UX改善施策の検証

ページを新しく作り直すのではなく、既存サイト上で変更パターンを実装し、改善施策を検証したい場合にも対応できます。

実装の仕組み

A/Bテストツールを利用して対象ページへ変更処理を適用し、通常ページと変更パターンを出し分けます。

サイトのHTML構造や既存JavaScriptへの影響を確認しながら、現在のページをできるだけ維持した形で実装します。

工夫・対応している点

A/Bテストでは、通常のWebサイト制作とは異なり、既存ページへ後からコードを適用するケースが多いため、現在のページ構造や既存処理を把握したうえで実装することを重視しています。
また、テストツールの仕様やページ側の描画処理によってJavaScriptが再実行される場合があるため、「一度だけ実行されること」を前提にせず、複数回呼び出されても表示やイベントが重複しないように実装することを意識しています。

対応ツール

上記以外のA/Bテストツールについても、HTML・CSS・JavaScriptを使用して実装できる環境であれば、仕様を確認したうえで対応を検討できます。

使用技術

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

これまでブラウザ内で管理していたToDoデータに加え、PHPを通じてMySQLへ保存する仕組みを追加しています。

サーバー側へデータを保存することで、1台のブラウザ内だけで完結するのではなく、複数デバイスから同じToDoデータを利用できる構成にしました。

主な機能・特徴

• ToDoの追加・編集・削除
• localStorageによるデータ保持
• PHP・MySQLと連携したDB保存
• 複数デバイスから同じToDoデータを利用可能
• 日付ごとの完了履歴を表示
• 日付順の昇順・降順切り替え
• 日付ごとの折りたたみ表示
• グループの追加・分類
• 期限の設定
• 期限間近・期限切れの通知
• ページ表示時および1分ごとの期限チェック

期限通知は、現状ではページを開いている間のみ動作する仕様です。

活用例

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

フロントエンドだけで完結するアプリから、サーバー・データベースまで連携するWebアプリへ発展させたサンプルとして制作しています。

実装の仕組み

画面側はReact + TypeScriptで構築し、タスクデータをPHPへ送信してMySQLへ保存する構成です。

ブラウザ内だけにデータを保存する構成に加え、サーバー側のDBを利用することで、異なる端末からでも同じデータを扱えるようにしています。

工夫・改善した点

• 前回のReact + TypeScript版の機能を維持しながら、PHP・MySQL連携を追加しました。
• ブラウザ内だけで完結していたデータ保存を、サーバー側へ拡張しました。
• 複数デバイスから同じToDoデータを利用できる構成にしました。
• 期限・グループ・完了履歴など、実際のタスク管理を想定した機能を組み合わせています。
• フロントエンドとバックエンド、データベースを連携させる構成を実装しました。

ReactとTypeScriptの学習・実装を主目的としているため、画面の装飾は必要最低限とし、機能やデータ連携の実装を中心にしています。

今後の拡張

現在の期限通知は、ページを開いている間のみ動作します。

今後の拡張案として、PWA・Service Worker・Push APIなどを利用し、ページを閉じている状態でも通知を受け取れる構成を検討しています。

使用技術

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

ToDoの追加・編集・削除や完了履歴などの基本機能を維持しながら、タスクをグループごとに整理し、期限を設定して管理できる構成にしています。

React・TypeScriptの実装を中心に制作しているため、デザインは必要最低限とし、状態管理やタスク操作などの機能面を重視しています。

主な機能・特徴

• ToDoの追加・編集・削除
• localStorageによるデータ保持
• 日付ごとの完了履歴を表示
• 日付順の昇順・降順切り替え
• 日付ごとの折りたたみ表示
• グループの追加・分類
• タスクごとの期限設定
• 期限間近・期限切れの通知
• ページ表示時と1分ごとの期限チェック

期限通知は、現在の仕様ではページを開いている間のみ動作します。

活用例

• 個人用のToDo・タスク管理
• 案件・業務ごとのタスク整理
• 期限付き作業の管理
• 仕事・プライベートなどのグループ別管理
• 完了したタスクの履歴確認
• React・TypeScriptを利用したWebアプリの構築例

単純なToDo一覧だけでなく、タスクの分類や期限を組み合わせることで、日常的な作業管理を想定したアプリへ機能を拡張しています。

実装の仕組み

Reactで画面やタスクの状態を管理し、TypeScriptでデータ構造や処理を定義しています。

タスクデータはlocalStorageへ保存し、ブラウザを再読み込みした場合でも内容を保持できる構成です。

ページを開いた際と、その後1分ごとに期限を確認し、対象となるタスクがある場合に通知する仕組みを実装しています。

工夫・改善した点

• 基本的なToDo機能を維持しながら、グループ分けと期限管理を追加しました。
• タスクを用途ごとに分類できるようにし、一覧を整理しやすくしました。
• 期限を設定できるようにし、期限が近いタスクや期限切れを確認できるようにしました。
• ページ表示時だけでなく、表示中は1分ごとに期限を確認する構成にしました。
• localStorageを利用し、ページを再読み込みしてもタスクを保持できるようにしています。

前回の基本的なToDoリストから、より実際のタスク管理を想定した機能へ段階的に拡張しています。

今後の拡張

現在の期限通知は、ページを開いている間のみ動作します。

今後の拡張案として、PWA・Service Worker・Push APIなどを利用し、ページを閉じている状態でも通知を受け取れる構成を想定しています。

また、この拡張版をさらに発展させ、PHP・MySQLと連携してタスクをデータベースへ保存する「ToDoリスト DB連携版」も制作しています。

使用技術

デモ

GitHub Pagesで実際の動作を確認できるサンプルを公開しています。

［デモを見る］

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

時間を計測する基本的なタイマー機能に加え、経過状況を確認できる進捗バーと、カウントダウン完了時に知らせるデスクトップ通知を実装しています。

React・TypeScriptの実装を中心に制作しているため、デザインは必要最低限とし、タイマー処理や状態管理などの機能面を重視しています。

主な機能・特徴

• カウントアップタイマー
• カウントダウンタイマー
• 時間の進行状況を確認できる進捗バー
• カウントダウン完了時のデスクトップ通知
• Reactによる画面・タイマー状態の管理
• TypeScriptを利用した型を意識した実装

デスクトップ通知は、現在の仕様ではページを開いている間のみ動作します。

活用例

• 作業時間の計測
• 休憩時間の管理
• ポモドーロなどの時間管理
• 勉強やトレーニング時間の計測
• 制限時間を設けた作業の管理
• React・TypeScriptを利用したWebアプリの構築例

単純に時間を表示するだけでなく、進捗バーや通知を組み合わせることで、残り時間や終了タイミングを把握しやすい構成にしています。

実装の仕組み

Reactでタイマーの状態を管理し、時間の変化に合わせて画面表示と進捗バーを更新します。

カウントアップとカウントダウンを切り替えて利用できる構成とし、それぞれの時間変化に合わせて表示を更新しています。

工夫・改善した点

• カウントアップとカウントダウンを1つのアプリで利用できるようにしました。
• 数字だけでなく進捗バーを表示し、時間の経過を視覚的に確認できるようにしました。
• カウントダウン完了時にデスクトップ通知を表示できるようにしました。
• Reactの状態管理を利用し、時間の変化に合わせて画面を更新する構成にしています。
• TypeScriptを使用し、タイマー処理のデータや状態を扱う構成を実装しました。

ReactとTypeScriptの学習・実装を目的としているため、CSSでの装飾は必要最低限とし、タイマーの動作や状態管理を中心に制作しています。

使用技術

デモ

GitHub Pagesで実際の動作を確認できるサンプルを公開しています。

［デモを見る］

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

タスクデータはブラウザのlocalStorageへ保存し、ページを再読み込みした場合でも内容を保持できる構成にしています。

React・TypeScriptの実装を中心に制作しているため、デザインは必要最低限とし、タスク操作や状態管理などの基本的な機能を重視しています。

主な機能・特徴

• ToDoの追加
• 登録したToDoの編集
• ToDoの削除
• localStorageによるデータ保持
• 日付ごとの完了履歴を表示
• グループ単位での全削除
• 日付順の昇順・降順切り替え
• 日付ごとの折りたたみ表示

活用例

• 個人用のToDo・タスク管理
• その日の作業内容の整理
• 完了したタスクの履歴確認
• 日付ごとの作業管理
• 簡易的な進捗・作業記録
• React・TypeScriptを利用したWebアプリの構築例

基本的なToDo操作に加え、完了したタスクを日付ごとに確認できるため、現在のタスクだけでなく過去の作業内容を振り返る用途にも利用できます。

実装の仕組み

ReactでToDoの一覧や状態を管理し、TypeScriptでタスクデータの構造や処理を定義しています。

登録したデータはlocalStorageへ保存し、ブラウザを閉じたりページを再読み込みした場合でも保持できる構成です。

日付ごとにタスクを整理し、表示順の変更や折りたたみができるようにすることで、履歴が増えた場合でも確認しやすい構成にしています。

工夫・改善した点

• ToDoの追加・編集・削除という基本操作を一通り実装しました。
• localStorageを利用し、ページを再読み込みしてもデータを保持できるようにしました。
• 完了したタスクを日付ごとの履歴として確認できるようにしました。
• 日付順を昇順・降順で切り替えられるようにしました。
• 履歴を日付単位で折りたためるようにし、一覧が長くなった場合でも確認しやすくしました。
• グループ単位でまとめて削除できるようにしました。

この基本版をベースに、後にグループ分け・期限設定・期限通知などを追加した「ToDoリスト 拡張版」、さらにPHP・MySQLと連携した「ToDoリスト DB連携版」へ機能を発展させています。

使用技術

デモ

GitHub Pagesで実際の動作を確認できるサンプルを公開しています。

［デモを見る］

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

GitクライアントにはSourceTreeを使用し、作業内容に応じてブランチを分けながら開発できる構成にしています。

個人での制作だけでなく、複数人で同じWebサイトを管理する場合も想定し、作業・確認・公開の段階を分けた運用にしています。

主な機能・特徴

• GitHubを利用したWebサイトのソースコード管理
• SourceTreeを使用したGit操作
• feature・develop・mainによるブランチ管理
• 作業内容ごとにfeatureブランチを作成
• developブランチで公開前の内容をまとめて管理
• mainブランチへのPRマージ後に公開サーバーへ反映

活用例

• Webサイトのバージョン管理
• 複数人でのWebサイト制作
• 機能追加・修正ごとの作業管理
• 公開前の変更内容確認
• GitHubを利用した公開フローの構築
• 継続的なWebサイト更新・保守運用

変更内容をGit上で管理することで、直接公開サーバーのファイルを編集するのではなく、作業内容を確認しながら段階的に公開できる構成にしています。

実装の仕組み

作業・確認・公開の役割ごとにブランチを分け、それぞれの段階を経て公開サーバーへ反映する流れにしています。

ブランチは以下の役割で運用しています。

今回は公開サーバーとの連携を中心に構築しているため、独立したテスト環境の構築は省略しています。

工夫・改善した点

• 直接mainブランチで作業せず、作業用のfeatureブランチを分ける構成にしました。
• developブランチを設け、複数の変更をまとめて確認できるようにしました。
• mainブランチを公開用として分離し、作業中のコードがそのまま公開されない構成にしました。
• PRを利用して変更内容を確認してから公開できる流れにしています。
• SourceTreeを利用し、Gitの操作状況を画面上でも確認しやすい運用にしました。

GitHubを単なるソースコードの保存場所として利用するだけでなく、Webサイト制作・更新時の作業フローそのものを整理することを目的として構築しています。

使用技術