Style Design Engineerへの道

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

プログレッシブエンハンスメントが叫ばれる今日この頃ですが、
可能ならIE6-8にもCSS3を使いたい、ということでJSで何とかできないか探してみると、
なんだかよさげなものが見つかります。

■IE6でもCSS3のセレクタを使えるようにするもの

（１）IE9.js（http://code.google.com/p/ie7-js/）
IEの挙動を標準準拠させるjsライブラリ。一部のセレクタサポートの他、以下の項目をサポート。


いろいろ対応してくれてとても便利なIE9.jsですが、これを導入することで出来なくなることもあるようです。
［参考］ie9.jsを使うと出来ること、出来なくなること。

（２）selectivizr.js（http://selectivizr.com/）
jquery.jsやprototype.js等のライブラリと併用することで、IE6-8でもCSS3の擬似クラス・擬似要素を使えるようにしてくれるもの。使うライブラリによって対応する擬似クラス・擬似要素に違いが出るので事前に確認が必要。

↑これらを使うと、属性セレクタや、:before/:after、:first-child/:last-child等がIE6-8でも使えるようになるので、HTMLのソースコードがとてもシンプルに出来ますね♪


■IE6でもCSS3のプロパティを使えるようにするもの

（１）PIE.htc（http://css3pie.com/）
たった位置行追加するだけで角丸、ドロップシャドウ、グラデーション、マルチプル背景等がIEでも使えるようにしてくれるbehavior。

（２）ie-css3.htc（http://fetchak.com/ie-css3/）
角丸、テキストシャドウ、ボックスシャドウに対応。

.htcは大変便利なのですが、
・サーバによっては.htcを許可していないことがある
・相対パスで呼び出す場合、HTMLからのパスにしないと動かない
・要素にposition:relative;を指定しないと背景やボーダーが消える
などいくつか注意点がありますので気をつけてください。


で、こんな風にJSやhtcでセレクタやプロパティを使うことが出来るなら、
両方使ってやればIE6-8でもモダンブラウザライクにCSS3使えるんじゃね？
と思って意気揚々と設置・・・・・



・・・・・してみたのですが、ダメでしたorz



どうやら、セレクタ系のJSを読ませると、.htc系の指定が全部無効になってしまうみたいです。（つかえねーーー！！）
セレクタ系を取るか、プロパティ系を取るか、結局二者択一が精一杯みたいです。。。(´・ω・｀)
残念。

Web制作の現場というのはとにかく実力主義であって、
資格なんかはっきり言って何の役にも立たないのは重々承知なのですが、
ちょっと思うところあってAdobe公認エキスパート（ACE）の試験を受けてきました。
科目はDreamweaver。

この認定資格、とにかく情報がないのが特徴。
難易度も合格率も過去問も非公開。受験する時に「試験内容を口外しない」と制約させられるので
ここでも内容については言及できません。
Webスクールでも他の資格みたいにACEの資格取得コースみたいなのはほとんどやっておらず、
唯一の情報はAdobe公式の試験情報のみという状態。

というわけで、受験しようと思ったときにまず困るのは、
「何をどこまで勉強したらいいのか分からない」
ということです。私もかなりそこで困ったわけですが、結局「Adobeのオンラインヘルプを全部読んで触ってみる」という方法を取りました（苦笑）

まがりなりにもWeb制作にかかわって10年以上、Dreamweaverも6〜7年は使ってます。
日々の業務をこなすには何の支障もない状態。今更スクールとか通うのもあり得ないし、模擬問題見る限り内容自体は「広く浅く」という感じなので、独学でなんとかなるかなと思ったのがその理由です。

で、３日くらいかけてザザッと試験範囲の機能をおさらいし、サクッと受験してきました。



結果は・・・・あと１問足りず惜敗！！！（＞＜）

Dreamweaver使っているとはいえ、

・基本的に手打ちコーディングなのでデザインビューはほとんど使わない
・一人で作業することがほとんどなので共同作業を前提とした機能は必要ない
・新規スポット案件が多く、作って納品して終わりなのでテンプレートやアセット管理もあまり使わない

とまぁ、「Dreamweaver使ってる意味あんの？」的な使い方しかしてなかったのがそのまま点数に反映されておりました(；´Д｀) ああ、、、もう少し時間かけてちゃんと復習してから受験しておけば・・・・・orz
ま、後悔しても仕方がないので、もう一度弱かったところをちゃんと復習して、今月中にリベンジしてきます。

これからもし受験してみようかなと思っている方にアドバイスできることがあるとしたら、

・全ての機能を隅から隅まで網羅して暗記している必要はない。
・さほど深い内容は聞かれない。
・しかし、ある程度ちゃんと日々の制作で使い込んでいないと分からない問題が多い。

ということでしょうかね。
単純にリファレンス本の機能を暗記するだけではなく、「その機能が何に役立つのか？」「制作上の様々なシーン・状況で、DWがどのような挙動をするか？」といった点に注意してよく観察する必要があるな、と感じました。そういうことはリファレンス本とかには基本的に載ってないので、やはり「とにかく使い倒す」<のが先決かと思います。実技試験を伴わない選択式の試験にしては、その人の製品に対する理解をよく判定できるようになってるな、と感じました。

しかし、、、あと１問。悔しい〜〜〜！

以前仕事で作った、「外部リンクアイコン自動挿入Script」を公開します。
target="_blank"を使えないXHTML 1.0 Strictの文書型で外部リンクを別ウィンドウで開きたいと思っていろいろ検索したのですが、探し方が悪かったのかhttps://〜で始まる自社サーバを除外してくれるものが無かったので自作したのがきっかけです。
ついでに外部リンクアイコンをテキストの後ろにCSSで背景画像指定したら、IE6・7でリンクテキストが複数行に渡った場合にとんでもない場所に表示されてしまう問題も一緒に解決しようとか、その他細々欲しい機能を盛りこんで全部入り（？）っぽく仕上げてみました。
似たような要望あるんじゃないかなぁ？と思うのでよかったら使ってください。

★主な仕様★
---------------------------------------------------
・外部サイトは自動的に別ウィンドウで開く（target="_blank"不要）
・「外部サイト」の判定は、「http://〜」または「https://〜」で始まるリンクのうち、
　自分自身のドメイン以外のもの
・外部リンクにはリンクテキストの末尾に自動的にアイコンを挿入（class不要）
・IE6/7で複数行インライン要素における背景画像の表示バグ回避のため、IE6・7のみはIMG要素を自動で挿入
・内部リンクでも意図的に別ウィンドウで開きたい場合はａ要素にclass="blank"で対応。
・外部リンクにアイコンを付けたくない場合（画像からのリンク等）はａ要素にclass="noicon"で対応。
---------------------------------------------------

プラグイン化はしてませんが、必要なパラメータはjs内の初期設定で変数指定できるようにしてあるので、必要に応じて変更してください。
ちなみにJavaScriptあんまり詳しくないのでかなりベタな方法で書いてます。もっとスマートなコードに書き換えられる方は是非教えてください！（切実）あと機能追加とかプラグイン化とか！そして私にください（笑）
特にこんな機能が追加されると素敵だと思います。

・アイコンを追加する場所を前か後か選択できる
・内部リンクとして認識するフルパスを複数指定できる
・画像にリンクが貼ってある時には自動的にアイコンを付けない設定にする

どなたかお願いしますm(_ _)m

★サンプル付きデータはこちら↓↓
ダウンロード

jquery.flatheights.jsを使ってボックスの高さを揃える際、高さ指定の無い画像が含まれているとwebkitでボックスがつぶれてしまうということについて前回記事を書きましたが、その後@mattari_pandaさんの協力でとりあえず解決に至りました。

var _UA = navigator.userAgent.toLowerCase();
 
if(parseInt(_UA.indexOf('applewebkit')) > -1){
	$(window).load(function(){
		$('.box1').flatHeights();
	});
}else{
	$(function(){
 		$('.box1').flatHeights();
	});
}

こんな感じでwebkitの場合は実行タイミングを「load」にしてやることで画像の高さを取得してくれるようになります。UAで分岐しないで全て「load」にしてもできるのですが、そうすると問題の無いブラウザでの表示パフォーマンスを無駄に落とすことになりますのでUA分岐しています。

ボックスを格子状に並べて一覧表示する際、どうしても高さを揃えたいというのは当たり前の要求だと思います。
ところがCSSレイアウトの場合、隣り合うボックスの高さを揃えるということが案外大変です。
中身が画像などで高さが確実に固定できる場合はheightを指定すればいいだけなので問題ありませんが、
中身が可変コンテンツだった場合、ボックスから中身がはみ出してしまったりする危険があるため単純にheightを指定するわけには行きません。
しかもECサイトなどで商品一覧が動的に書き出されてくるような場合、何がどのような順番でいくつ書き出されるのか全く特定できないため、手動で高さを揃えてやることも不可能です。

そういう場合に威力を発揮するのがボックスの高さを揃えるためのJavaScriptです。
有名なものは

・heightLine.js
・jquery.flatheights.js

の２つだと思います。
これらは非常に便利で、私もよく利用させていただいています。
特に最近は２つ目のjquery.flatheighs.jsがお気に入りです。


が、このJS、思わぬ落とし穴がありました！それは、
子要素にheightが指定されていない画像が含まれているとボックスがつぶれて表示されてしまう（webkitのみ）
ということです。

普通はhtmlの属性かcssで画像のwidth・heightを指定するはずなので問題ないのですが、
サイズがバラバラの画像をプログラムで書き出すようなサイトの場合、個別の画像のwidth・heightを指定することが困難になるので敢えて指定しない、という判断を下すこともあると思います。
そういう所にこのjquery.flatheights.jsを使っていると、ブラウザが画像のサイズを取得して表示する前に高さを揃えようとしてしまうため、画像の高さが無い状態でボックスの高さを揃えてしまいます。

滅多にある状況ではないと思いますが、そういう状況も考えられなくもないので、このJSの利用を考えている方は一応注意した方がよいと思います。

ちなみにheightLine.jsの方だとどうなるか、というのは検証していないのでわかりません（汗）