日記
sugamo.css
sugamo.css に参加してきました。sugamo.css はフロントエンドの実装技術の話題を中心とした集まりで、今回が 2 回目なのです。今回は、kotarok さん、Sig さん、Takazdo さん、カヤックの 4 名(上村さん、軍司さん、hoka さん、山田さん)、そして自分が参加です。
仕事に関する話題や、興味にある技術、持ち込んだネタを見てもらったりととても興味のある内容でした。
今回は高田の馬場でカフェの 1 室を借りて行ったのですが、場所が地下だったのでイーモバイル組みは全滅…。livedoor の公衆無線 LAN サービスを使っている 3 人のみが online という悲しい状況でした。次回はぜひ地上で…。
- エディターの話題。Sig さん、hoka さんは VIM を使用。Takazudo さんは秀丸を使用。kotarok さんは Komodo Edit を使用。自分は Dreamweaver (重いけど)
- Takazudo さんが作っている CMS を少し見せてもらった。データは XML で管理。その XML を XSLT で変換していろいろ活用。すごかったです !!
- Sig さんの JS ネタはフィボナッチ数列を利用してみようという感じ。フィボナッチ数列はイージングっぽいからいろいろ便利
- 自分は Firefox の中身を少し見てみたというネタを。kotarok さんの前ではすこし恥ずかしかったけどいい感じにまとまりました。(次の Blog 記事として書きます !!)
- Firefox は
XUL と CSS でできている - Komodo Edit も XUL でできている
XUL を採用すればクロスプラットフォーム。MS はXAML の道を行く- Dreamweaver も XML と JS でできている。Contribute も似た感じ。お客さんが使うための Contribute の画面をカスタマイズするという方法もある
- CS 4 の UI には Flash も使われているみたい
- JS をできるだけ軽く書くポイント
- ばけらさんはすごい人というお話
- Takazudo さん流 MT のテンプレートの書き方。setVarTemplate とそこへの引数を活用する
- ブラウザーネイティブの XSLT のパーシングの違い。少し違いはあるけどかなり似ている
お店を出た正面にある別のお店では…WiFi が使えるようでした。残念。そして「Yes! i-touch」
長時間お疲れ様でしたー !!
せっかく考えたのにネタがわかってもらえない !! というかた、披露の場として参加されてみてはいかがでしょうか
IE 7 以下で data スキーム URI を利用する方法と、data スキーム URI について
IE 7 以下で data スキーム URI を使うための仕組みを Development Reference の中の人と一緒に考えてみました。使用方法などは IE 7 以下で data スキーム URI を利用するにまとめました。(IE 8 では data スキーム URI をある程度サポートしています)
data スキーム URI とは
deta スキーム URI とは IETF により RFC2397 (RFC2397 日本語訳) で定義されている仕様で、画像などのデータを data:image/gif;base64,R0lGO...(略)...KAAA7 のように URI で表すことができる仕組みです。URI は data:[<mediatype>][;base64],<data> の形式です。
例えば、GIF ファイルを次のように URI で表すことができます。
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7data スキーム URI に対応している UA ならこの URI で画像を表示できます。この例ではメディアタイプが image/gif で、base64 にエンコードを採用、データは R0lGODdhMA...(略)...4dbgYKAAA7 です。
実際に Web ページで使用する場合には
- img 要素で埋め込む画像 :
<img src="data:image/png;base64,iVBORw0...(略)" alt="" /> - CSS で背景にする画像 :
background : url(data:image/png;base64,iVBORw0...(略));
などのように書きます。script 要素で読み込む js ファイルや link 要素で読み込む CSS ファイルなどにも使えます。
data スキーム URI を使うメリットは
- ファイルの実態がないのでゴミファイルが出ない
- HTTP リクエストの回数を減らすことができる。
data スキーム URI を使うデメリットは
- HTML のソースコードが長くなってしまう (HTML ファイルが大きくなる)
- 画像の差し替えをする時大変
あたりでしょうか。
Firefox や Safari, Opera ではサポートしています。また、IE 7 以下ではサポートしていませんが IE 8 RC ではサポートしています。ただし、IE 7 以下でも似たような仕組みはありました。
IE の mht 形式
IE では mht 形式で Web ページを保存することができます。mht 形式は画像など含めて 1 つのファイルにすることができる形式で、mht ファイルのソースコードを覗いてみると画像ファイルは base64 に変換されたデータで格納されています。
e.g.
mht ファイル内の画像保存箇所抜粋
------=_NextPart_000_0000_01C98DDA.C7D3E730
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-Location: http://yomotsu.net/common/img/tmp_id.png
iVBORw0KGgoAAAANSUhEUgAAALQAAAA3CAMAAACSN5B2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
(略)
+efx70D/h/4fXf8QYACYjeHFEmbCpQAAAABJRU5ErkJggg==IE 5 以降で既に data スキーム URI に似ている仕組みはありそうな感じです。
ただ、いろいろ試してみたのですが、mht ファイルでの base64 にエンコードされた画像参照の仕組みを HTML ファイルでつかうことはできませんでした。こんな理由もあり、別の方法で実現することにしました。IE 7 以下で data スキーム URI を利用するで公開しています。
会社で、後ろの席 (システムチーム) の人が便利そうなものを作ってました
フォームの要素としてよく出てくる select ですが、IE では CSS で width を指定してしまうと内容が切れて見えなくなってしまいます。その解消をするための JS です。便利便利。
Development Reference｜JS IEでセレクトボックスに幅指定をして文字列が切れるのに対応する に使い方などがまとめられています。
ちなみに HTML 内に iframe 要素を動的に追加して
とあるのですが、これは IE の不具合というか実装の都合で select の重なり順は常に最前面に表示されてしまう問題を解決するための手段です。
IE には通常の要素とは異なる Windowed Elements なるものがあります。 Windowed Elements は z-index の重なり順のフローを無視します。そして、select は Windowed Elements なので z-index を無視します。参考 : INFO: How the Z-index Attribute Works for HTML Elements
この重なり順の問題を解決する方法は IE6でselectタグ(プルダウン)がz-indexを無視する対策 ［CSS, HTML, Tips］ – Programming Magic が参考になります。
object に埋め込んだ swf の重なり順が (opaque か transparent を指定しないと) 制御できないのも Windowed Elements の関係なのかな…。