Home > Archives > 2010-05

2010-05

iepngfix_tilebg.js

これまでiepngfix.jsというIE6で透過PNGを使えるようにするJavascriptがありましたが、
CSSで背景で使用すると間延びしてしまったりと色々問題が発生しました。
その問題のせいで、使いどころには制約がありましたがiepngfix_tilebg.jsならそれを解消してくれます。
設置もそんなに難しくありませんでした。

http://www.twinhelix.com/test/

上記サイトよりIEPNGFix v2.0 Alpha(ZIP形式)をダウンロード&解凍して、
iepngfix.htcとblank.gifとiepngfix_tilebg.jsを取り出し、各サイトに放り込みます。
初期状態だと、この3つのファイルは同じ階層の場合で設定されているので、
blank.gifやinpngfix.htcの階層を移動させた場合はそれぞれパスを変更しなければいけません

【 フォルダ構成 】
html
┣index.html
┣iepngfix.htc
┣img/blank.gif
┗js/iepngfix_tilebg.js

【 html側に記述する内容 】

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

imgタグでhtml内にpngを挿入する場合に必要。htmlと同階層にある場合で記述しています。

<script type="text/javascript" src="js/iepngfix_tilebg.js" charset="utf-8"></script>

bakground等でpngを挿入する場合に必要。jsフォルダに格納した場合で記述しています。

【 iepngfix.htc内の記述を変更 】
16行目のblank.gifのファイルパスを格納した場所に変更。

IEPNGFix.blankImg = 'img/blank.gif';

※blank.gifをimgフォルダに格納した場合で記述しています。

iepngfix.htcからblank.gifを、htmlファイルからiepngfix_tilebg.jsを、
このそれぞれを呼び出すパスを制作しているファイル構成に合わせて書き換えるだけで
htmlファイル内の全てのpngファイルがIE6でも透過されます。

【重要な問題】

  • 問題1:ページを開くのが重くなった。
  • 問題2:IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。
  • 問題3:ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。

問題1「ページを開くのが重くなった。」の解決方法

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

を、透過PNGを使用している場所のみに書き換える

例)
<style type="text/css">
div#mainImg img,
div#contentsBg{behavior: url(iepngfix.htc);}
</style>

問題2「IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法

【 html側に記述する内容 】

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

を、以下のように書き換える。

<!--[if lte IE 6]>
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
<![endif]-->

意味としては、IE独自の条件分岐コメントでIE6以下のバージョンの時のみ適用するというもの。

問題3:「ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法

print.cssを用意してhtmlファイルにリンク、そのCSSの中に以下を記述。

script {display:none;}

以上で、印刷時にも表示されます。

Zen Coding

Zen Codingという素晴らしい拡張機能(エクステンション)を偶然発見。
何で今まで知らなかったんだろうって思ってしまうくらいコーディングにおいてとても便利。
もっと情報のアンテナを広く保っとかないとなぁ~ということを痛感しました。
色々なエディターに対応してるのも凄い。

使い方は以下の通り

自分はDreamweaverCS3を使っているので、
http://code.google.com/p/zen-coding/downloads/list
でCS4対応版の拡張機能(エクステンション)のファイルをダウンロードし、解凍します。
Dreamweaverを起動して[コマンド]→[拡張機能の管理]を開きます。
そして[ファイル]→[拡張機能をインストール]を開き、解凍したファイルの中にある.mxpファイルを選択します。
これでZenCodingはインストール完了です。

CS3を使用している方はその後、
http://code.google.com/p/zen-coding/issues/detail?id=121
から、CS3対応用修正版js(zen_editor.js)をダウンロードして、

ローカルの

該当ドライブ:\Documents and Settings\該当ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding

を開いて、その中にあるjsをさっき落とした「zen_editor.js」で上書きしてあげるだけで使えるようになります。
一連のインストール作業が終わったらDreamweaverを再起動することをお忘れ無く。

そしてHTMLファイルを開いて、

div#wrap>div#contents>ul#gNav>li*3

と記述した後、Windowsの場合は[ Ctrl ]+[ , ]を押すことで以下のHTMLソースに!

<div id="wrap">
  <div id="contents">
    <ul id="gNav">
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>
</div>

ちなみに*で個数、+で前のタグの下に要素の追加ができます。

div.box>p.img+p.txt
<div class="box">
  <p class="img"></p>
  <p class="txt"></p>
</div>

という感じでCSSのように書くことでザクザクとコーディングできちゃいます。

4.5インチベーツライト

昨日Yahoo!オークションで250TR用に4.5インチベーツライトを購入しました。

通常5,250円のものが、なんと!今ならキャンペーン中らしく2.980円で!(TVショッピング?笑
送料500円+代引き手数料315円を加えても3,795円とお買い得。
これプラス、ヘッドライトステーで2,000円弱くらいだから6,000円もいかないくらい。
この価格でマルチリフレクターなのもポイント高いです。

4.5インチベーツライト

4.5インチベーツライト

銅っぽい色でナカナカ個性的なのが気に入ってます。
購入を考える方はYahoo!オークションへどうぞ。
早く届かないかなぁ~。

swfobject

swfonjectは現在(2010年5月27日)バージョン2.2が安定しているという話を聞きます。
自分も今のところ一番問題の少ないバージョンであると認識していますが、
何か問題が起こったとしても責任は持てませんのであしからず。

設置方法

▼HTMLの<head>内に記述

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {menu:'false',wmode:'transparent'};
var attributes = {};
swfobject.embedSWF("img_top/movie.swf", "swfContents", "1000", "349", "8.0.0","img_top/expressInstall.swf",flashvars,params,attributes);
</script>

▼解説

  • swfobject.embedSWF(“swfのパス”, “swfの挿入場所のdivのid名”, “swfの幅”, “swfの高さ”, “想定バージョン”,
    “expressInstall.swfのパス”,flashvars,params,attributes);
    という順番に記述します。
  • パラメータを持たせるにはvar params = {};の中に書く。
    menuはメニューの表示。 (falseが非表示、trueが表示。)
    wmodeはswfの背景を透過させるかどうか。 (transparent:背景透過させる、opaque:背景透過させない)
    wmode:transparentを使いつつ、透過pngや透過gifとtransparentを使用するとデザインの幅が広がり、見た目は良くなりますが、
    確実にデータ量は重くなるのを理解のうえ使用してください。

▼HTML本文内に記述

<div id="swfContents">
<p><img src="代替イメージ" /></p>
<!--/swfContents--></div>

▼解説

  • 代替イメージを用意している場合、挿入する場所を表す<id=”swfContents”>内に記述。
  • 代替イメージには、swf内で伝えたい内容を全て含んだ画像にするか、FlashPlayerのインストールを促す画像にするのが一般的。

以上で完了ですが、このswfobjectを設置されたページを表示するエンドユーザーは以下のケースに振り分けられます。

【ケース1】想定バージョンより新しいFlashPlayerが入っている場合
通常どおりswfを再生。
【ケース2】想定バージョンで記述したバージョンより古いバージョンのFlashPlayerがインストールされている場合
Flash領域内で新しいバージョンのFlashPlayerのインストールを促すexpressInstall.swfが作動。
【ケース3】FlashPlayerがインストールされていないPCの場合
代替イメージを表示。

動作確認

Windows IE6-8
Windows Firefox3.5-3.6
Windows GoogleChrome 4.1.2
Macintosh Safari3-4

山鹿灯籠まつり(熊本県山鹿市山鹿)

山鹿灯篭まつり
山鹿灯篭まつり
山鹿灯篭まつり

山鹿灯籠まつり(熊本県山鹿市山鹿)
割と小さいお祭ですが、人が結構多かったです。
http://www.city.yamaga.kumamoto.jp/kankoh/08-tourou/index.html

Home > Archives > 2010-05

Search
Feeds
Meta

Return to page top