HTML
JavaScript
jQuery
Web
jqueryconsole

HTMLデザイン検収に、WEBページを直接WYSIWYGできる「jQuery Console」を利用する

More than 1 year has passed since last update.

「jQuery Console」 を機能別に小出しでご紹介しております。


ケース:HTMLデザイン検収に

本題は次項です。こちらはあくまで「使用例」としてご覧ください。

WEBサイト制作において、HTMLのコーディングまではデザイン会社。システムへの組み込みはシステム会社の分担で作業を行う際、

デザイン会社より納品いただいたHTMLデザインをシステム会社でチェックする時のお話。(WEB担当者・デザイナーの方にも寧ろおすすめです)

納入していただいたHTMLコードデザインをチェックする時、致命的になりがちなのが、「幅考慮の不足」の見逃しだったりします。


「幅考慮の不足」:HTMLデザインはきれいな表示なのに、いざ、システムに組み込むと、「動的に変化する要素(金額・名称・説明文等)」の幅によってデザインが崩れてしまう事


要件定義で決められていても、検収期間を過ぎてしまい、修正が依頼できない自体になる事も・・

「説明文」であれば一定文字数で切り捨てる等の対応できますが、「コード・番号」、「金額」等はそうもいかず、やむなくHTMLをいじってしまう事態に陥ります。

そうならない為にも、おすすめなのが以下。


既存WEBページだってWYSIWYG(直接編集)できる「jQuery Console」

ひとまず手軽にチェックできるのが「jQuery Console」「直接編集」機能。

jqc001n.gif

上記の様に簡単なテキスト修正であれば可能です。(SSL環境下でも、ローカルのhtmlファイルにも対応しています)

F12開発者ツールでHTMLを探る手間もなく、その場で的確かつ直感的にレビュイーに指摘することができるでしょう。


使い方

http://ltside.com/jqc/

を参照。指定のリンクをブックマークに登録し、対象のページでブックマークを開くと右の操作画面がポップアップで開きます。詳細な説明は、リンク先参照。