HTMLコーダとプログラマの仕事の進め方

Question

プロジェクト進行(構成?)について皆様のご意見を聞かせていただきたいです。

私の会社ではデザイナ、HTMLコーダ、プログラマが完全に分業になっています。

それぞれの役割は
デザイナ
画面の設計、WFの作成

HTMLコーダ
デザイナが作成したWFをHTML&CSSへ落とす(JavaScriptはほぼ実装せず)
Ajaxにより更新が入るような画面は更新前と更新後で2つのHTMLファイルを作成
ただし、BootstrapやMaterializecssなどCSSフレームワークとJSがまとまっているものは一部使用

プログラマ
サーバサイドのアプリ作成。HTMLコーダが作成したHTMLをレンダリング
さらに、デザイナが考案した画面の動作をJavaScriptで実現(Ajaxの画面更新や、アニメーションなど

サーバサイドではSpringBootを使用しており、HTMLレンダリング時のテンプレートエンジンはThymeleafを使用(プロジェクトによってはVelocityだったりも)

問題

問題になっているのが、HTMLコーダが作成したHTMLをプログラマがそのまま使用できないということです。
デザイン変更でDOM構造が変わった場合など
HTMLコーダはダミーの値やリストの繰り返し要素などが入ったHTMLを成果物として持ってくるのですが

実際にプログラマが扱う場合、ダミー部分を削除したのちに、繰り返し部分はサーバサイドでテンプレート化し
Ajaxで更新する部分は外部ファイルに切り出したりしています。

デザインの更新部分の差分を目視で確認し、分割したテンプレートへ反映することとなり
下手するとHTMLコーダが作ったダミー要素が残っていたり、作成したものの反映漏れが発生したりもしています。
また、DOMの変更により実装済み部分のJavaScriptが動かなくなったりしたりもします。

皆さんのプロジェクトではHTMLコーダとプログラマとの分業の際はどのような手法を取っているのでしょうか。
このような状態はJavaだからというわけでくRubyやPHP、Nodeなどでも起こりうる問題だと思います。
「上記プロジェクト進行のこの部分がおかしい！」「◯◯に問題がある」など現状の問題点の指摘や
「こう手法を取ったらうまく行った」などの経験など皆様ご意見を聞かせいただきたいです。

どうかよろしくお願いします。

Answer 1

自分のプロジェクトでは、デザイナーとプログラマの２人でやっています。
デザイナーがHTMLコーダの役割もやっていますが、だいたい同じような問題がおきますね。

自分もうまくできているかわかりませんが、実践していることを書いてみます。（参考程度に）
以下、デザイナーをHTMLコーダに置き換えて読んでいただけると幸いです。

• 原則CSSはデザイナーのみが修正する

プログラマもCSSをいじり始めると、CSSのマージでミスすることが多くなるので、完全にデザイナーに任せます。プログラマは問題を見つけたら、デザイナーにフィードバックするだけで、修正はしません。最初はコニュニケーションロスもありますが、長く続けるとデザイナーにCSSのナレッジも貯まるので悪くはないかと

• デザイナーの作ったHTMLやCSSは、プログラマが定期的にコミットする（一日一回程度）

HTMLの変更箇所がわからなくならないように、コミットします。プログラマがやった方が確実なので自分でやります。

• デザイナーに事前にHTMLやCSSに文法違反がないか確認をお願いしています。

• 最後に実際に動くサイトをデザイナーに確認してもらう。

一通りプログラムに反映して、動くものができたら、意図したものになっているかは確認してもらっています。いい意味で、デザインの責任はデザイナーにあると思うので、最終確認もちゃんとやってもらう。

あとは、状況によりますが、プログラマが先にHTMLまでを作ってしまう場合もあります。
できたHTMLにデザイナーがCSSを作ってもらうようなやり方です。

Comments

[taqm]

質問に書いてはいませんでしたがHTMLコーダが作成したHTML,CSSは
プログラマが分解したテンプレートファイルなどと別々にソース管理されています。
そこも間違いなく問題なのですよね・・・

DOMの変更などはHTMLコーダが管理しているリポジトリへ反映され、
それを受けてアプリ側へと反映されている状態です。

それぞれ
HTMLコーダサイドのリポジトリでHTMLとCSS
プログラマサイドのリポジトリでテンプレートとCSSとJavaScript

ソースの管理方法も見直すべきなのでしょうか

[popobot]

HTMLは動的に作るので仕方ないですが、CSSは共用できないんですか？
コードの管理は別々でもいい気がしますが（手間でなければ）

[taqm]

言われてみればCSSは共有できないなんてことはありませんでした
CSSとJavaScriptを同じリポジトリでプロジェクトを進めて見ようと思います！

Answer 2

ダミーのもたせ方次第ではないでしょうか？
テンプレートで処理する限りHTMLはプログラム経由で処理されると考えてよいですね？
もしそうであれば、ダミーにはかならず一定の属性をつければ、プログラムを経由する限り
一括で消すことが可能です。
タグに属性をつけるか所定のタグから所定のタグの間がダミーだと定義する
もしくは、ダミー自体<!-- -->などで囲ってコメント扱いにしておけば
プログラムがコメント類を消してしまうだけで済むでしょう。

逆にダミーを残した状態で表示したいなら、デバッグ用のフラグをGETで渡すなり
セッションでデバッグモードの可否を設定する
またはデバッグユーザーはログインして処理するなどすれば、
プログラム経由のHTMLをダミー付きでデザイナがチェックすることも可能です。

Comments

[taqm]

自社サービスではなく受注がメインの開発なのでデバッグモードのようなものを
実装することは気が引けてしまうのですが一般的なことなのでしょうか？？

どちらかと言うとダミーコードはプロダクトコードとして使用したくないのです。
(ソース管理の時点で省きたい)