HTMLコーダーとエンジニアが効率良く仕事を進めるコツ

  • このエントリーをはてなブックマークに追加


ディレクターとエンジニアが仲良く仕事をするためのコツを以前かきましたが、今回はコーダー(マークアップエンジニア)とエンジニアの話しです。

コーディングしたものを最終的にはエンジニアに渡すので、コーダーはエンジニアとの最後の掛け橋といっても過言ではありません。

コーダーとエンジニアの意思疎通ができていればコーディングからプログラミング完了までの工程が非常に効率よいものになるかと思っています。
エンジニア(プログラマーも含む)の立場から、もしもらうならこんなHTMLが良い!というポイントをまとめてみました。

もちろん各社、各人思っている作業分担等もあると思いますので、あくまで参考までに!

1. name属性はDB仕様書とリンクしてあらかじめ入力しておいてね。

これは既存サービスのデザインリニューアルなんかの場合はすごく重要になってきますが、inputタグなどのname属性はDB仕様書と連携してあらかじめ設定しておいていただけると非常にありがたいです。
もちろんエンジニアはコーディングの前にどの項目が画面上に入力項目として、表示されるのかが明確に記載されたDB仕様書を作成する必要がありますが、これはコーディングの際にやっておいてもらえるとかなり開発に専念できます。

2. maxlengthは仕様書を参照のうえセットしておいてね。

1と同様なのですが、inputタグのmaxlength属性の設定、これも仕様書に基づいてあらかじめ設定しておいていただけるとありがたいです。
プログラム上はエラーではねていても、ユーザービリティー上入力できなくしたほうが、混乱や入力のし直しはなくなるので、これは忘れないようにセットしておいて欲しいです。

3. tableタグの特にtrの使い方には注意してね!

一覧表示などループ処理をする部分に関してtableを使う時は気をつけてほしいです。
基本的に一覧表示はプログラムのループ処理をしますので、複雑なテーブル構成や同じ表示要素なのにtrを跨ぐような構成で組まれると、実装はできますが、効率の悪いプログラムになりがちです。

(たとえば写真は一行目でその写真に対するテキストは二行目で、同じ表示要素なのにtrタグは別になっているような構成。)

あと、エンジニアにはHTMLを理解はしていても、CSSが絡んでいたり、複雑なtableだとプログラムのバグで閉じタグがなかったりして、表示をめちゃくちゃにしちゃったりして、よく分からなくなってしまったりする場合がよくあります。
(釣りでいうところのオマツリ(他人の糸と絡まってぐちゃぐちゃになっしゃうこと)と同じでグチャグチャになってしまうともう一度もとのHTMLにゆっくり頭を整理しながらプログラムを埋め込まないといけなくなっちゃいます。)

これを防ぐためにもなるべくシンプルなHTMLがエンジニアにはやさしいのです。

4. リンクはすべて.phpにしておいてね。

リンク設定については個人的にはコーディングの領域だと思っています。
多分システム会社に外注して作業をお願いする場合も、よほど親切なシステム会社でない限り、リンクもされていないHTMLの修正まではしてくれないと思います。

ツꀀフッターやヘッダー周りのリンク設定もコーディングの時点でやっておいてもらいたいポイントです。
ファイル名についてはあらかじめサイトマップで指定しておいてコーディングの際に一括してセットしておいてもらうと非常に効率が良いです。

ちょっとしたことですが、ここまでやってもらえるとすごい楽だし効率良いです。

※ここまで偉そうに書いていますが、速攻で開発完了しないといけない場合は取り決めを省いてリンクなどの最終調整もエンジニアがやっていたりします。

事前にきっちり打ち合わせや決めごとを決めて作業すべきですね。。。

これらを確実に実行するために事前に最低限必ず用意しておきたい資料2つ

1. 入力項目など画面上の情報と関連付いたDB仕様書
ただの内部的なテーブル構成やリレーションだけではなく、表示入力項目と紐付いたDB仕様書もしくは仕様書が必要です。コーダーの方とはここでname属性などの認識を合わせておきます。

最大入力文字数なんかもきちんと載せておく必要はあります。

2. サイトマップ
ファイル名も明確にしたサイトマップです。
PHPであれば拡張子も.phpに変更しておいた状態で記載したものが良いです。

————

その人によって作り方もあると思うので一概には言えませんが、既存のサービスのりニューアルをした際にHTMLだけ新規にコーディングしたらname属性が全く入っていなくて、発注していたエンジニア会社から愚痴られたことがあります。

HTMLコーダーはコーディング技術もそうですが、+αを業界的にも求められるようになってきています。Web上でプログラムが動作する以上エンジニア(プログラマー)との連携は必ず必要になってきますので、上記ポイントを意識しておくと大変効率良く、仲良く作業できるかと思います。

執筆者:高本

株式会社8bit 取締役の高本です。 社内のWebサービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。