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サービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか? CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。 目次1 2024年4月から実質有料化?2 他にないのだろうか?3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化? しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

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

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

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

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