Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What is going on with this article?
@RAWSEQ

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

More than 3 years have 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/
を参照。指定のリンクをブックマークに登録し、対象のページでブックマークを開くと右の操作画面がポップアップで開きます。詳細な説明は、リンク先参照。

24
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
RAWSEQ
NE(のびのびエンジニア)です。よろしくお願いいたします。 50サイト超のECサイトの受託構築に関わっていたら、技術研鑽が疎かになり、浦島太郎状態で焦っているところ。 フロントエンド・デザイナーに敬意と憧れを持つバックエンドWEBエンジニアで、 インフラ回り(今はAWS等のクラウド)からミドルウェア(LINUX系が主)、サービス側アプリ開発、ビヘイビア程度のフロントエンド実装が守備範囲です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
24
Help us understand the problem. What is going on with this article?