suzunari

ブログパーツフレームワーク suzunari

Download

svn co http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/

License

Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

Concept

  • 簡単
    • 貼り付けタグから各種パラメータを指定可能
  • 高機能
    • 本文解析機能サポート
    • スムーズスクロールサポート
    • jQuery、swfobject内蔵
  • 安全
    • 使用する名前は一つだけ(jQueryも、swfobjectも名前空間内に内包)
    • swfと連携時に起こりうる問題を自動解決
    • 複数貼り付け時のパラメータを分離
    • 重いswfでもがたつきの少ないスクロールの採用
    • 連続で呼び出されても全画面ジャックを一度しか展開しない

Documentation

使い方

  • 全画面ジャックブログパーツの使い方
    1. クリック時に以下のコードを呼び出すswfを作成し、main.swfの名前で保存する。
      //全画面ジャック実行
      import flash.external.ExternalInterface;
      System.security.allowDomain('*')
      ExternalInterface.call(_root.name_space + '.jack_swf');
      
    2. クリック時に以下のコードを呼び出すswfを作成し、jack.swfの名前で保存する。
      //全画面ジャック終了
      import flash.external.ExternalInterface;
      System.security.allowDomain('*')
      ExternalInterface.call(_root.name_space + '.clear_swf');
      
    3. main.swf、jack.swf、suzunari.jsを同じディレクトリに保存し、以下の書き出しタグをブログに設置
      <script type="text/javascript" src="http://example.com/path/suzunari.js"></script>
      
    4. 完成

貼り付けタグ

<script src="http://example.com/path/suzunari.js#key1=value1&key2=value2" />形式で書き出しタグから設定を変更することができます

  • 全体に影響する設定
    • base_uri(初期値 suzunari.jsと同じディレクトリ。省略する場合、jsのファイル名はsuzunari.jsから変更できない)
      • swfの設置ディレクトリURLを指定(省略時)
        • サイドバーswf === base_uri + 'main.swf'
        • 全画面ジャックswf === base_uri + 'jack.swf'
  • サイドバーswfに適応される設定
    (全画面ジャックswfの値はflashvars以外指定不可)
    • swf_id(非推奨)
      • object tagのID。無指定の場合、URLから自動で設定される
    • swf_uri
      • swfのURL。無指定の場合、URLから自動で設定される
    • swf_width
      • object tagのwidth。初期値 160
    • swf_height
      • object tagのheight。初期値 340
    • swf_styleclass
      • object tagのclass name
    • swf_wmode
      • object tagのwmode。初期値 transparent
    • swf_allowScriptAccess(非推奨)
      • object tagのallowScriptAccess。初期値 always
    • swf_scale
      • object tagのscale。初期値 noScale
    • swf_flashvars(非推奨)
      • object tagのflashvars。hashを指定することができないので非推奨
  • 上記以外
    • サイドバーswf、全画面ジャックswfのflashvarsに設定
      (上記内容もswf_*の名前ままflashvarsに設定されます)
  • FlashVarsの内容
    • 自動的に以下の値が追加されます
      • loc
        • location.href
      • ref
        • document.referrer
      • window_width
        • swfが生成された時点のwindow width(全画面ジャック時のステージサイズに使用することを想定)
      • window_height
        • swfが生成された時点のwindow height(全画面ジャック時のステージサイズに使用することを想定)
      • script_src
        • swfの設置されているURLのディレクトリ部分

<script type="text/javascript" src="http://example.com/path/suzunari.js#swf_uri=http://www.example.com/path/main.swf&swf_width=180&swf_height=260&swf_styleclass=class_name&swf_wmode=wmode&swf_scale=scale&param1=value1&param2=value2"></script>
↓
<object width="180" height="260" type="application/x-shockwave-flash" id="http___example_com_path__external_main" data="http://www.example.com/path/main.swf" style="class_name">
	<param name="wmode" value="wmode"/>
	<param name="allowScriptAccess" value="always"/>
	<param name="scale" value="scale"/>
	<param name="flashvars" value="swf_uri=http%3A%2F%2Fwww.example.com%2Fpath%2Fmain.swf&amp;swf_width=180&amp;swf_height=260&amp;swf_styleclass=class_name&amp;swf_wmode=wmode&amp;swf_scale=scale&amp;param1=value1&amp;param2=value2&amp;loc=http%3A%2F%2Fwww.example.com%2Fblog%2F&amp;ref=&amp;window_width=300&amp;window_height=300"/>
</object>


<script type="text/javascript" src="http://example.com/path/suzunari.js"></script>
↓
<object width="160" height="340" type="application/x-shockwave-flash" id="http___example_com_path__external_main" data="http://example.com/path/main.swf" style="">
	<param name="wmode" value="transparent"/>
	<param name="allowScriptAccess" value="always"/>
	<param name="scale" value="noScale"/>
	<param name="flashvars" value="script_src=http%3A%2F%2Fexample.com%2Fpath%2F&amp;loc=http%3A%2F%2Fwww.example.com%2Fblog%2F&amp;ref=&amp;window_width=300&amp;window_height=300"/>
</object>

js内にswfの設定を埋め込む方法

上記貼り付けタグでもswfの設定を変更できますが、設定情報をjs内に埋め込むことも可能です。

suzunari.jsをダウンロードし、先頭部分の「suzunari(/* base URI string */).write();」を以下のように置き換えてください。

suzunari(/* base URI string */).swf({
	'uri' : 'http://example.com/path/main.swf',
	'width' : 160,
	'height' : 340,
	'style' : 'margin:0px',
	'style_obj' : {'margin' : '0px'},
	'styleclass' : 'class_name',
	'wmode' : 'window',
	'allowScriptAccess' : 'never',
	'flashvars' : { 'key1' : 'var1', 'key2' : 'var2' }
}).write();

上記設定は以下のように展開されます。

<object width="160" height="340" type="application/x-shockwave-flash" id="http___example_com_path__external_main" data="http://example.com/path/main.swf" class="class_name" style="margin:0px">
	<param name="wmode" value="window"/>
	<param name="allowScriptAccess" value="never"/>
	<param name="scale" value="noScale"/>
	<param name="flashvars" value="key1=var1&key2=var2&script_src=http%3A%2F%2Fexample.com%2Fpath%2F&amp;loc=http%3A%2F%2Fwww.example.com%2Fblog%2F&amp;ref=&amp;window_width=300&amp;window_height=300"/>
</object>

swfの引数に設定可能なobjectのkeyは以下の通りです。

  • id(非推奨)
    • object tagのID。無指定の場合、URLから自動で設定される
  • uri
    • swfのURL。無指定の場合、URLから自動で設定される
  • width
    • object tagのwidth。初期値 160
  • height
    • object tagのheight。初期値 340
  • style
    • object tagのstyle(String)
  • style_obj
    • object tagのstyle(Object。styleが設定されている場合、styleを優先)
  • styleclass
    • object tagのclass name
  • wmode
    • object tagのwmode。初期値 transparent
  • allowScriptAccess(非推奨)
    • object tagのallowScriptAccess。初期値 always
  • scale
    • object tagのscale。初期値 noScale
  • flashvars
    • object tagのflashvars。objectで指定。escape、serializeは自動で行われる

全画面ジャックswfの設定を変更したい場合は以下のように記述してください。

suzunari(/* base URI string */).select('jack').swf({
	'uri' : 'http://example.com/path/main.swf',
	'width' : 160,
	'height' : 340,
	'style' : 'margin:0px',
	'styleclass' : 'class_name',
	'wmode' : 'window',
	'allowScriptAccess' : 'never',
	'flashvars' : { 'key1' : 'var1', 'key2' : 'var2' }
}).write();

.select('jack')を呼び出すと以降の設定を全画面ジャックswfに対して適応します。 再度サイドバーswfの設定を行う場合、.select('jack')を呼び出します。

部分ジャック

ver 2.0.8から画面の部分jackに対応しました。
.jack_swf()が呼び出される前に以下のコードを実行してください。

suzunari(/* base URI string */).floating({
	'y' : 5,
	'x' : -10,
	'width' : 100,
	'height': 100
}).write();

y,xはmain.swfからの相対位置を指定します。
floatingが呼び出された場合、jack.swfは初期状態でmain.swfの左側に表示されます。
(position:absoluteでmain.swfのoffset().leftから$(jack.swf).width()分左に位置します)

本文解析

suzunari.jsには本文解析をサポートする機能が搭載されています。
この機能を使用することにより、以下のような利点が得られます。

  • コードの簡易化
    • 通常のString.replaceと同じような書式で置き換えが指定可能
  • 安全性
    • 複数回ジャックを実行しても置き換えが呼び出されるのは最初だけ
  • 高速化
    • setTimeout内で置き換えを行うことにより、ブラウザのロックを最小限に
    • window.readyではなく、全画面ジャック展開時に置き換えを実行
      (表示時の処理は最小限)
    • window.scrollと連動
      (replaceとscrollを同時にsetTimeout内で実行)

具体的な実装方法は以下のとおりです。

  1. suzunari.jsをダウンロードする
  2. 「suzunari(/* base URI string */).write();」を以下のように書き換える
    suzunari()
    	.ready(function () {
    		//置き換え用クラス名
    		//(「this.settings.name_space」でscript tag毎にユニークな名前が取得できる)
    		var cname = this.settings.name_space + '_word';
    		//本文置き換えはすべてsetTimeout(func, 0);内で実行
    		this.set_parse_all_text(
    			/置き換え対象文字の正規表現/, '<span class="'+cname+'">$1</span>'
    		).select_scroll_word(function () {
    			//置き換え結果の最初要素までスクロール
    			return $('.'+cname+':first');
    		}).set_scroll(3000, function (hit) {
    			//(hit === select_scroll_wordで設定した要素)
    			//文字幅、window内の位置をflashvarsに設定
    			this.flashvars(this.get_element_size(hit));
    		});
    	})
    	.write();
    

Sample

基本的なブログパーツの作り方

貼り付けタグ
<script type="text/javascript" src="http://example.com/path/suzunari.js#swf_height=(swfファイルの立て幅)"></script>

ファイル構成
http://example.com/path/suzunari.js
http://example.com/path/main.swf
http://example.com/path/jack.swf

AS main.swf
//全画面ジャック実行
import flash.external.ExternalInterface;
System.security.allowDomain('*')
ExternalInterface.call(_root.name_space + '.jack_swf');

AS jack.swf
//全画面ジャック終了
import flash.external.ExternalInterface;
System.security.allowDomain('*')
ExternalInterface.call(_root.name_space + '.clear_swf');

Test

http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/test/

Demo(old version)

http://ameblo.jp/nioibu/