お客様
一般社団法人 中国電気管理技術者協会会員 大向電気管理事務所 様
業務内容
「一般社団法人 中国電気管理技術者協会会員 大向電気管理事務所」様のWebサイトのリニューアルを致しました。
広島で活動する電気主任技術者の「大向(おおむかい)」様から依頼を受けてとなります。
以前はレスポンシブに対応しておらず、古いデザインとなっておりましたので最新のLPサイトに合わせたようにしております。
各項目の文書は変更せず、訪れた人の目を引くために、アニメーションで表示するようにしました。
また既存のお問い合わせフォームから、Googleフォームに送信するようにカスタマイズして、メールと同時に、Googleスプレッドシートにお問い合わせ内容を保存するようにしております。
開発要件
■Webサーバー
- Apache
■開発言語
- HTML
- JavaScript(Node.js)
- CSS(SCSS)
※フレームワークは特に使用しておりません。
■主な使用ライブラリ
- jquery(JavaScript): 各要素の取得
- GSAP(JavaScript): 各要素のアニメーション
- ScrollMagic(JavaScript): 各要素の位置にスクロールした時のイベントを取得
- laravel-mix(Node.js): 開発したJavaScriptとSCSSを1つのファイルにまとめる
- bootstrap5(CSS): ページデザインはこのライブラリを元に改修していく
JavaScriptとSCSSは「laravel-mix」でコンパイルすることで、それぞれを1つのファイルにします。
これにより軽量化と難読化を行う事ができます。
■外部サービス
- GoogleAnalytics: アクセス解析サービス
- Google Form: お問い合わせの送信先
要件定義
まずはお客様とサイト改修に関する要件を決めて、ドキュメントにまとめました。
要件定義を元に以前のWebサイトのソースから、現在の主流となるデザインに合わせるようにしました。
設計
プロジェクトによっては「Adobe XD」でデザインをする事がありますが、今回のプロジェクトでは以前のサイトがあったので使用しておりません。
プロジェクト管理ツール(Redmine)に項目をまとめて設計しました。
開発
最初に「laravel-mix」で、JavaScriptとcssが作成出来るように環境を構築します。
開発ツールは「PhpStorm」を使用して実装しました。
開発したソースコードは、友住システムのサーバーに構築した「GitBucket」で管理しております。
完成したソースコード一式を、先方に提出してアップロードして頂きました。
プロジェクト管理
友住システムのサーバーに「Redmine」を構築してプロジェクト管理をしました。
実装すべきタスクを洗い出し「Redmine」に登録します。
実装が完了するとタスクのステータスを終了するようにします。
これによりお客様も進捗を確認することができます。
保守について
お客様から依頼があった場合に、都度対応しております。
開発からデプロイまでの手順方法などを、ドキュメントにまとめており、すぐに対応出来るようになっております。