GitHubでウェブサイト開発のコーディングワークフローを見直した話。

今回は、弊社デザイナーとお仕事をする中で、数年前から課題となっていたウェブサイト開発のワークフローを、GitHubを活用して業務改善してみました。

なかなか踏み切れなかった現状

ウェブサイトのデザイン業務は、大きく分けると

• デザイン作業
• HTMLコーディング作業

この２つになります。

ベクターデータや画像処理などを行うデザイン作業と、テキストベースのHTMLコーディングは、性質の違うファイルを管理するというのが、そもそも非常に難しいと思っています。
また、デザイナーにすると更新作業は一手間増えるし、直感的ではないので運用上でハードルが高かったりしました。

デザイン作業について

調べてみると、デザインファイルはPhotoshopやIllustrator、Adobe XDの主要なツールがGitへ未対応の状況でした。バージョン管理というのであれば、単なるバックアップではなく、デザインファイルのどこを修正したのかビジュアルで見比べたいのですが、なかなか良いツールがありません。バイナリのファイルをバージョン管理すると容量の問題もついてきそうです。

Sketchを利用するとGitでのバージョン管理が出来て幸せになれそうですが、主要ツールを変えてまで制作フローを刷新するほどのメリットが現状では期待できないので、ここは一旦クラウドドキュメントを利用してバージョン管理することにしました。（PhotoshopやIllustrator、XDは対応しています）
https://helpx.adobe.com/jp/creative-cloud/help/versioning-faq.html

HTMLコーディング作業について

現状弊社デザイン部門では、HTMLのコーディングの際には、社内のHyper-Vで起動したウェブサーバーのDocument Rootを共有フォルダーとしてPCにマウントし、ファイルを直接書き換えるワークフローとなっていました。

これは、各クライアントPCのローカル環境にウェブサービスを構築していくと、セッティング違いによる開発への影響など環境依存を防ぐことも出来ていたので、一定のメリットはありましたが、以下の様な課題点もありました。

• バージョン管理は、サーバーのデイリーで行われるファイルバックアップだったので、出来なくはないが簡単ではなかった。
• 公開サーバーへのリリース時に、FTPを必要と利用するケースがあり、更新ファイルの把握が大変だった。
• バリデーションチェックや、アクセシビリティチェックが、担当者任せになっていた。
• リモートワークが中心となり、VPN接続では同様の作業方法ではスピードが出なかった。

コーディングのワークフローだけを改善してみる

見直すときには、全部完璧に良くしたい欲に駆られますが、限られた時間で結果を出すには、まずは小さく出来るところから改善です。

今回の制作フローでは、Dreamweaverで行ったコーディング作業をDevelopブランチへPushすると、GitHub Actionsで、毎回自動的にHTML5 ValidatorとLighthouse CIがコーディングとアクセシビリティーなどのチェックをしてくれ、テストサーバー代わりのGitHub Pagesへファイルを更新し、Teamsへその結果を通知してくれます。
ややGitHub Pagesへのデプロイには時間がかかるので、実際のコーディング時はDreamweaverのプレビューで行い、主にクライアントへの確認に使用する予定です。

コーディングが完了したら、Pull RequestをMainに出すと、GitHub Actionsに設定したrsyncコマンドで公開サイトのレンタルサーバへSSHでセキュアにデプロイされます。

[最後に]まだまだ自動化を実現出来る！

ここまでだと普通に作業フローだけを見直した話ですが、普段から活用している、Microsoft365に付帯するPower Automateを利用することで、

• 公開サイトへデプロイしたらクライアントへメールでURLをお知らせする
• メンテナンスの作業記録をSharePointリストやエクセルに転記して作業明細にする

など、後工程の作業も楽にできそうです。

やりたいことは色々ありますが、前述の通り改善は小さくやるべきで、今回の設定や作業方法は、何度かに分けてブログにまとめていきます。

リポジトリはこちらです。
https://github.com/frogkoby/rsync-deploy-for-lolipop