質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,397

taqm

score 65

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

私の会社ではデザイナ、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などでも起こりうる問題だと思います。
「上記プロジェクト進行のこの部分がおかしい!」「◯◯に問題がある」など現状の問題点の指摘や
「こう手法を取ったらうまく行った」などの経験など皆様ご意見を聞かせいただきたいです。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

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

  • デザイナーの作ったHTMLやCSSは、プログラマが定期的にコミットする(一日一回程度)
    HTMLの変更箇所がわからなくならないように、コミットします。プログラマがやった方が確実なので自分でやります。

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/23 15:38

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

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

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

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

    キャンセル

  • 2016/09/23 15:45 編集

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

    キャンセル

  • 2016/09/30 20:40

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/23 15:29

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる