Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。
sIFR（Scalable Inman Flash Replacement）は、HTML上の任意のテキストをJavascriptでFlashムービーに置き換え、アンチエイリアスが掛かった選択可能なテキストとして表示する手法。Shaun Inman氏が世に広めた技術で、海外では割と普通に使われています。
見た目はCSSによる画像置換と同じだけど、通常のテキストと同じように選択やコピペも可能。Javascriptを切った環境では通常のテキストが表示され、HTML上のテキストを修正するだけで変更が反映されます。
ただし日本語では使えない。正確には、使えるけど重すぎて実用に耐えない。これは、Flashにフォントファイルをまるごと埋め込んで利用する仕様のため。せいぜい百数十文字しかない欧文フォントに対し、約二万種類もの文字が存在する日本語フォントは重すぎるということですね。
Update: sifr.jsを2.0.2 → 2.0.7にアップデートしました。現行のFirefox/Opera等ではプレーンテキストのままだったためです。(2009.02.27)
Update: Wikipedia（英語版）には概要および参照リンクが集まっているので、公式サイトが重いという方はこちらからどうぞ。(2009.02.27)
必要なもの
本体であるsifr.js、実装するフォントファイル、テキスト置換と置換後の見映えを表現するCSSファイル。この3つがあれば動きます。必要なファイルやデモ、ドキュメント等は以下で入手できます。
» Mike Davidson, sIFR 2.0: Rich Accessible Typography for the Masses
フォントを登録する
次のいずれかの方法でフォントを登録する。
- sifr.flaに好きなフォントを登録
- 各所で配布されているsIFR用フォント（.swf）を入手する
- 所有するフォント（.ttf）からsIFR用のファイル（.swf）を生成する
sIFR用フォントの入手先としては、FONTSMACKなどが有名。また、Convert TrueType Font to Sifr Flash FileではsIFR用のswfファイルを入手できる。
Javascriptの設定
「sIFR.setup(); 」宣言（sifr.js）以後に、置換する要素の設定を追加する。
if(typeof sIFR == "function"){sIFR.replaceElement("h1", named({sFlashSrc: "./vandenkeere.swf", sColor: "#000", sCase: "upper"}));};
| 引数 | 説明 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| sSelector | 置換したい要素をCSSセレクタ（h1、#logo、p.sifrなど）で指定する。カンマ区切りで複数指定も可能。サポートしているセレクタは「#」「.」「>」。 | ||||||||
| sFlashSrc | swfファイルの位置(HTMLファイルからの相対指定、または絶対指定） | ||||||||
| sColor | 文字色（ex. #000000） | ||||||||
| sLinkColor | リンク色 | ||||||||
| sHoverColor | リンクhover時の色 | ||||||||
| sBgColor | 背景色 | ||||||||
| nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft | 置換したい要素のpadding値。指定はpx単位。数値のみで記述する。 | ||||||||
| sFlashVars |
Flashを通して特別な値を指定する。指定できる値は4種類。
|
||||||||
| sCase | テキストを大文字または小文字に変化させる。“upper”で大文字。“lower”で小文字。 | ||||||||
| sWmode | 背景を透明にしたい場合、“transparent”を指定する。ただし、この指定は非推奨。 Flash movieの透明処理はOpera7、Safari1.2以下、Flash6、Linux、そしてバージョン1.0より前のMozillaではサポートされてない。 |
参照: sIFR Documentation & FAQ, How to use
CSSの設定
CSSにsIFR用として、以下の内容を追加する。
.sIFR-flash {visibility: visible !important;margin: 0;}.sIFR-replaced {visibility: visible !important;}span.sIFR-alternate {position: absolute;left: 0;top: 0;width: 0;height: 0;display: block;overflow: hidden;}
さらに置換したい要素への指定を追加する。
.sIFR-hasFlash h1 { visibility: hidden; }
上記は最小限のもので、必要に応じて「font-size」とかも追加できる。
おまけ （置換後のHTMLソース）
<h1 id="test"><a href="http://www.mikeindustries.com" target="">The Gothic Times</a></h1>
...が、
<html class="sIFR-hasFlash">...<h1 id="test" class="sIFR-replaced"><embed class="sIFR-flash" width="700" height="65" src="vandenkeere.swf" quality="best" flashvars="text=<a href=%22asfunction:_root. launchURL, 0%22>The Gothic Times</a>&textcolor=#000&w=966&h=33&sifr_url_0=http://www.mikeindustries.com" wmode="" bgcolor="#fff" sifr="true" type="application/x-shockwave-flash" style="width: 966px height:33px;" /><span class="sIFR-alternate"><a target="" href="http://www.mikeindustries.com">The Gothic Times</a></span></h1>...</html>
...になる。
Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。