[suzunari.js]簡単に全画面Flashブログパーツを作れるsuzunari.jpを使ってみる
2010 年 3 月 21 日 by 正宗今回はKAYACさんが公開されているブログパーツ配布JS「suzunari.js」を紹介したいと思います。
これは何？
これは何をするものか、ひとことで言い表すと、「Flashのブログパーツを貼るためのJavaScript」ということになります。
こういった「たったそれだけのこと」を自前だけできちんとやろうと思うと、「凄いこと」と比べてもどれだけ膨大な労力を必要とするするかは、このブログを読まれている主な読者であろう制作系業者の方々は十分すぎるほど伝わると思いますが、いちおう補足しておきますとブログパーツなどのようにどこに貼られるかわからないJSを書く場合、グローバル変数をなるべく汚さないなどいろいろと気をつけないといけないことがあるんですが、このsuzunari.jsはそこらへんの「気をつけなくてはいけないこと」をクリアして簡単にFlashブログパーツを貼り付けることが出来るたいへんありがたいJavaScriptです。
さっそく使ってみる
使い方はとても簡単で、_level0.KAYACでも紹介されているので
簡単ブログパーツ配布JS suzunariを使ってみよう
こちらのページを参考にすればSCRIPTタグを書くだけで誰でも簡単にFlashブログパーツを貼ることが出来ると思います。
普通ならjavascriptを書き直す必要すらありませんね。
全画面ジャック！
JavaScriptに詳しい方なら「グローバル変数を汚したくないなら、わざわざsuzunari.jsを使わなくてもSWFObjectをクロージャーに閉じ込めてしまえばいいじゃないか」などなどいろいろと解決策を思いつくはずです。
suzunari.jsが便利なのは、ただFlashブログパーツを貼り付けるだけじゃなくて、全画面ジャックも簡単に出来るというところもあるからです。
基本的に全画面ジャックもJavaScriptは一切触らなくても、ASから特定のjs関数を呼び出すだけで簡単に全画面がジャックできるブログパーツが作れます。
変わったことしてみた
指定した要素にSWFを差し込む
suzunari.jsはブログパーツを貼ることを目的に作られたJavaScriptですから、普通につかうと
<script src="/js/suzunari.js" type="text/javascript"></script>
こうやって書かれたところがまるまるSWFに差し変わるイメージの動作をしますが、たまにはSWFObjectみたいに指定した要素の中にSWFを差し込みたい夜もある。
そんなときはsuzunari.jsを開いてみましょう。
suzunari(/* base URI string */).write();
どうもこのwrite()がSWFObjectの書き出しを実行しているみたいです。
いきなりwrite()しようとしてるみたいなので、とりあえずこのへんを消しておいて
suzunari().ready( function(){ var target = jQuery('#flashcontents'); target.html(''); this.write(target); });
こうやって書き直してみました。
readyのタイミングでいいのかどうかはちょっとわからないけど、とりあえずいきなりwriteしはじめることを防ぎたかったのでこのタイミングで実行することにしました。
writeには引数としてID名かエレメントそのものを渡してやればその中にSWFを表示するようになります。
つまりsuzunariのwrite関数への引数は
suzunari().write("flashcontents")
でも
suzunari().write(jQuery('#flashcontents'))
でもどちらでもいいです。
もう一個注意する点は、suzunari().write()は渡されたエレメントの中身を書き換えるわけではなくappendChildされるので、渡すべきエレメントの中身を一旦消しとくといいということです。
ちょっと何言ってるかわからなくなってきましたが、
<div id="flashcontents">ここにFlashブログパーツが表示されるよ</div>
こんな感じで書かれてあったとして、そのまま
suzunari().write("flashcontents")
してしまうと
<div id="flashcontents">ここにFlashブログパーツが表示されるよ[SWF]</div>
こんな感じでもとあった文章とかに付け足される形で表示してしまうので、いったん
<div id="flashcontents"></div>
こうして空にしておいて
<div id="flashcontents">[SWF]</div>
こうSWFに差し変わるように書くといいですよ、って事ですね。
なので先ほどのコードで言うと
//readyのタイミングまで待つ suzunari().ready( function(){ //jQueryでエレメントを取得しておく var target = jQuery('#flashcontents'); //一旦中身を消す target.html(''); //そのあとwriteする this.write(target); });
っちゅう順番でものごとを処理しとるゆうことになります。
jack_swfが呼び出されるタイミングを取得したい
全画面ジャックを開始する関数が「jack_swf」でして、この関数の中ではさらに
function jack_swf() { //前処理 before_jack(); //全画面ジャック開始 select('jack').write(document.body); //後処理 after_jack(); }
（本当はもうちょっと複雑な書き方してますが）簡単に言うとこんな感じの処理になってますので、じゃあbefore_jackをオーバーライドか何かする形で全画面ジャック前のタイミングにいろいろできないかな？？と思ったのですがこれに関しては僕のスキルでは理解できず、たんにこんな方法で代替しました。
suzunari().ready( function(){ //新しくstart_jack_swfって関数を作って、Flashからもそっちを呼び出して貰う事にする。 this.start_jack_swf = function(){ //全画面ジャックが始まる前は必ずページの一番上までスクロールする jQuery('html,body').animate({ scrollTop: 0 }, 'fast'); this.jack_swf(); } //clear_swfも同じ this.start_clear_swf = function(){ this.clear_swf(); } //こっから先はさっき説明したwriteんところ var target = jQuery('#swfVisual'); target.html(''); this.write(target); });
今のところこれでも何の問題もないんですが、もし何かもっとスマートな方法あるよ！って方いましたらぜひぜひコメントいただけたらと思います。
suzunari.jsはほかにも本分解析機能などもあるみたいなんですがこちらはまだ僕は使ったことありませんが、ただ単純にブログパーツを貼るだけでも非常に使い勝手が良い上に全画面ジャックも、他のSWFは一時的に非表示にするなどいろいろと細かいところで自前で作った全画面Flashよりも行き届いていて大変便利なJavaScriptだと思います。
難解なのは僕の説明だけで、ほんとうに説明不要の簡単さでFlashブログパーツの配布が出来てしまいます。
こういった良くできたツールを気前よく公開して下さるのも本当に有り難いですね。
タグ: Flash, javascript, swfobject, ブログパーツ