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

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

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