簡単ブログパーツ配布JS suzunariを使ってみよう

最近受け持っている案件で使用しているsuzunari.jsというフレームワークをご紹介します。これはFlashで作られたブログパーツを配布するための最も簡単で、かつ高機能なJSフレームワークです。

最小限の手順

まずは本体であるsuzunari.jsをダウンロードしましょう。こちらからダウンロードできます。

次にブログパーツとして表示するswfファイルを作成しましょう。作成したファイルはmain.swfというファイル名を付けてください。

そしたら、以上の2ファイルを配布用のサーバへアップロードしてください。suzunari.jsとmain.swfは同じディレクトリへ置いてください。

これだけです！簡単！貼付けタグは以下のようになります。

<script type="text/javascript" src="http://[ファイルをアップロードした場所]/suzunari.js"></script>

全画面ジャックを試してみる

suzunariを使えばこんな感じの全画面ジャックも簡単に実装することもできます！

全画面ジャック時に表示するswfをjack.swfというファイル名で、先程のsuzunari.jsと同じディレクトリへ置きます。

次に、全画面ジャックを実行するために以下のコードをmain.swf内のボタンクリック等のタイミングで追加します。

var vars:Object = loaderInfo.parameters;
var name_space:String = vars["name_space"];
ExternalInterface.call(name_space + '.jack_swf');

ここで、"name_space"変数がありますが、これはFlashVarsの"name_space"変数から取得したストリングになります。このFlashVarsはsuzunari.jsより渡されています。

次に、全画面ジャックを出しっぱなしにするとブログ記事が読めなくなってしまうので、jack.swf側には閉じるボタン等を置き、以下の処理を記述します。こちらのname_space変数も、同様にsuzunari.jsからFlashVarsとして渡さる文字列です。

var vars:Object = loaderInfo.parameters;
var name_space:String = vars["name_space"];
ExternalInterface.call(name_space + '.clear_swf');

これで、全画面ジャックの実装は完了です！あとはjack.swf内でゴージャスなアニメーションを展開しましょう！

その他の高機能なTips

suzunariはCodeReposにて公開されています。より高度なテクはこちらからどうぞ！suzunariを使用したブログパーツを大量に公開しているBlogDecoもぜひご覧になってみてください！