Context Navigation

Version 6 (modified by kyo_ago, 4 years ago)
--

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

使い方

全画面ジャックブログパーツの使い方

クリック時に以下のコードを呼び出すswfを作成し、main.swfの名前で保存する。

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

クリック時に以下のコードを呼び出すswfを作成し、jack.swfの名前で保存する。

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

main.swf、jack.swf、suzunari.jsを同じディレクトリに保存し、以下の書き出しタグをブログに設置
```
<script type="text/javascript" src="http://example.com/path/suzunari.js"></script>
```
完成

貼り付けタグ

全体に影響する設定
- 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 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="swf_uri=http%3A%2F%2Fexample.com%2Fpath%2Fmain.swf&amp;loc=http%3A%2F%2Fwww.example.com%2Fblog%2F&amp;ref=&amp;window_width=300&amp;window_height=300"/>
</object>

本文解析

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

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

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

suzunari.jsをダウンロードする

「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/

Download in other formats:

Plain Text