sIFR

1.概要

　sIFRはJavascriptを使用してHTML内のテキストをFlashムービーで置き換える技術である。対象のHTMLファイルを読み込むとjavascriptが動作して、あらかじめテキストを置き換えるように作成者が指定した場所の上にFlashムービーを重ねて表示する。javascriptを動作させないように設定するとそれ以後の動作も実行されないため、通常のテキストが表示される。
　製作者はテキストを置き換えるように指定する定義を自由に設定できる。たとえば特定のタグ全てに適応させることもできるし、またIDやname,classを指定して個別に設定することも可能である。
　sIFRはFlashムービーでテキストを代替するためFlashで任意のフォントを指定することが可能である。４章で書くようにフォントにはUnicodeで規定されているものであれば全てが利用可能である。

2.実験内容

3.使用ファイル、プログラム、環境

Macromedia Flash Professional 8
http://www.adobe.com/jp/products/flash/flashpro/

Macromedia Dreamweaver 8
http://www.adobe.com/jp/products/dreamweaver/

MyaZedi Myanmar Unicode
http://www.myazedi.com/

Mike Davidson -- sIFR 2.0: Rich Accessible Typography for the Masses
http://www.mikeindustries.com/sifr/

WindowsXP HomeEdition
http://www.microsoft.com/japan/windowsxp/default.mspx
InternetExplore 6.00
http://www.microsoft.com/japan/windows/ie/default.mspx
Mozilla FireFox 2.0.0.1
http://www.mozilla-japan.org/
Opera 9.1.0
http://jp.opera.com/

FlashPlayer9
http://www.adobe.com/shockwave/download/?P1_Prod_Version=ShockwaveFlash&Lang=Japanese

4.方法

イ：sIFRキットダウンロードして解凍する。
ロ：Googleで適当なビルマ文字を検索して、検索結果をダウンロードする。今回はတ（တとしてもいい）を検索した結果をダウンロードした。(2007/02/21　15:19:10)
ハ：MyaZediフォントをOSにインストールする。
ニ：４.FlashへのFont埋め込みを参照してFlashの設定ファイル（UnicodeTable.xml）にビルマ文字の範囲を追加する。
ホ：Flash8を起動する。
ヘ：ロでダウンロードしたsIFRキットの中にあるsifr.flaを開き、ムービーをダブルクリックする。再度クリックしてプロパティでフォントにMyaZediを選び、埋め込みボタンを押してニで設定したビルマ文字と始めからある大文字、小文字、数字、句読点記号の範囲を埋め込む。最後にパブリッシュする。
ト：ロでダウンロードしたGoogleの検索結果をDreamweaverで開きheadタグ内に以下のコードを追加する。

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>
<script type="text/javascript">
sIFR.setup();
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"sifr.swf", sColor:"#000", sBgColor:"#FFF"}));
sIFR.replaceElement(named({sSelector:"TD.j", sFlashSrc:"sifr.swf", sColor:"#000", sBgColor:"#FFF"}));
</script>
<style type="text/css">
<!--
.sIFR-flash { visibility: visible !important; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate
{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
letter-spacing: 0;
}
.sIFR-hasFlash h2{ visibility: hidden; }
.sIFR-hasFlash TD.j{ visibility: hidden; }

-->
</style>

5.結果

ページ全体のレイアウトは保たれてはいるが文字の大きさに統一性がない。これはIEに顕著に見られOperaやMoazillaにはさほど見られていない。最初にjavascriptを使っていることからブラウザによる違いが出たものと思われる。
作成したsIFRを適応させたHTMLファイル：sample/googlesifr.html

6．考察

sIFRを使うと今回のように閲覧者の環境に依存することなくテキストを表示することが可能となる。しかしながら一部にjavascriptを使っているためブラウザごとに文字の大きさやレイアウトに違いが見られる。またFlashにフォントを埋め込んだものを表示しているためダウンロード、表示に時間がかかり日本語や中国語のような文字数が多いものには対応しきれていない。
　今回のGoogleの検索結果のsIFR化は一度ダウンロードしたファイルを加工している。これを自動的に行うには閲覧者とGoogleのサーバーの間に１つ中継地点を置いてそこで今回のような処理を行うことが必要となる。またFlashムービーに埋め込む文字数を最小にするために動的にFlashムービーを作成するようなことも必要になると思われる。

7.参考

１．sIFRの設置方法 | lush life*
http://lush-life.org/entries/eid12.html

２．我的春秋: sIFR でアンチエイリアス フォントの埋め込み
http://my-chunqiu.cocolog-nifty.com/blog/2006/12/sifr__177b.html

３．Mike Davidson -- sIFR 2.0: Rich Accessible Typography for the Masses
http://www.mikeindustries.com/sifr/

４．fladdict.net blog: エントリーのタイトルをトゥルータイプに！　sIFRで日本語は使えるか？
http://www.fladdict.net/blog-jp/archives/2005/04/sifr_1.php