制作ブログ | 太田商店 WEBデザイン／制作

今日は下流工程のコーダーとしての立場から。

コーディングができないデザイナーのつくるWEBデザインは、ひどい。

デザインする対象の構造、性質がわかってないのだから、見よう見まね、浅い知識の継ぎ接ぎでつくるしかない。
そんなんだから、ろくものが作れるわけがないのは当然なのだけど、そういうひとがWEBのデザインをしていることが多いのが現実。
デザイナーがダメでも企画・構成を作るディレクターがわかってればまだいい。
ディレクターも知識が無い場合は、企画・構成の段階からぐちゃぐちゃ。お手上げ。
企画・構成の段階でコンサルティングできたらいいのになぁ。

さらにデザイナに必要な知識にjavascriptが求められている。今後は確実に、できる人とできない人の線引きが強くなる。
インタラクティブなデザインをつくるのに、どう動くのか、どういう仕組みが作れるのかという知識が求められるのは当然で、
わかってるひとがつくったデザインは組みやすいし、わからないひとがつくったデザインは穴だらけ。

htmlを知らないデザイナー << htmlの組めるデザイナー <<<壁<<< 正確なhtml+cssが組めるデザイナー <<< jQueryのプラグインを使えるデザイナー <<<<高い壁<<<< jQuery使ってプログラミングできるデザイナー <<<<<越えられない壁<<<< システム組めるデザイナー

ぺらっとした会社概要とかの簡単なページなら、htmlを知らないデザイナーでも見よう見まねでなんとかなっちゃう。
なとかなっちゃうのがいけないんだろうな。

いままでの経験上、デザイナーの割合的には
50% htmlをかろうじて組めるデザイナー
30% html+cssをなんとか組めるデザイナー
10% 正確なhtml+cssが組めるデザイナー
07% jQueryのプラグインを使えるデザイナー
02% jQuery使ってプログラミングできるデザイナー
01% システム組めるデザイナー
ってかんじ。最後は1%もいなんだろうな。

これ、あくまでもWEB制作に関する技術・知識的にってことだけど、デザイン自体のセンス、技量も同じく比例する感じ。
技量があがるほど、人日単価もあがるだろうけども、プロジェクト全体の工数的には無駄が少なくなって下がるはず。

上流工程の中の人にお願い。
上流工程でWEBのことちゃんと分かってる人を1人入れてくれないと、下流は大荒れですよ。

ちょっと前回わかりにくすぎたので反省。端的に。

【はまり問題＆詳細】
■ 発生条件
ページ内にswfがある
ブラウザはie
アンカーをクリックor最近多い#でajax系

上記条件でブラウザタイトルバー（<title>）に#〜が追記される
swfをクリックすると
タイトルバーの内容は#〜に差しかわる

【原因】
IEのバグみたい

【回避方法】
回避方法はないので力業で対応するしかない

1. タイトルを書き換えるjavascript functionを用意
2. 1のfunctionをaクリック時と、swfのステージクリック時にswfから呼び出す
3. 別ページから#付きでリクエストされることがあれば、onload時に呼び出す

以上

【はまり問題】
jQuery、拾ってきた.text()が実際のテキストと異なる

【詳細】
<ul id="selectUl">
<li>テキストA</li>
<li>テキストB</li>
</ul>
<table id="selectTable">
<tr>
<td>hogehoge</td>
<td>テキストA</td>
<td>hogehage</td>
</tr>
<tr>
<td>hogehoge2</td>
<td>テキストA</td>
<td>hogehage2</td>
</tr>
<tr>
<td>hogehoge</td>
<td>テキストB</td>
<td>hogehage</td>
</tr>
<tr>
<td>hogehoge2</td>
<td>テキストA</td>
<td>hogehage2</td>
</tr>
...
</table>

というようなhtml。
目的は、liクリックでtableに同じワードがある行だけ表示。

var clickText = $(this).text();
とliのテキスト内容を入れて
tr.each()で1行ずつtdのテキストを
selectText= $(this).text();
に代入する。

if(clickText == selectText){
で表示。

ie6、7のみ動かず。
すべてfalseになる。

【原因】
text();
に余計な文字が入る。おそらく改行コード。
clickText.length() が6。
selectText.length() が5。
そりゃ一致しない。

【回避方法】
clickText = jQuery.trim($(this).text());

【はまり問題】
windows safari、バージョンによってswfオブジェクトがみあたらない

【詳細】
<object id="hoge01" 〜
<!--[if !IE]>-->
<object id="hoge02" 〜
<!--<![endif]-->

と通常にswfを読み込む
↓
javascriptでswfのasを呼び出す
↓
windows safariなら、#hoge02.asfunction()でアクセスできるはずがundefined

【原因】
win safariのバージョンによっては、最初の#hoge01に入っている模様
ver 5.1では起きず、5.0.5と5.0.1で発生。それ以外のバージョンでは未確認。

【回避方法】
どっちかにはswfオブジェクトが入ってるので、見つからなかったらもう片方を指定する。

以上