Posts Tagged “ブログパーツ”

ブログパーツの作り方(2)~フローティングパーツ

こちらのソースをはりつけてもらえれば、このように偉人が出てくるだけのフローティングパーツが表示されます。

Flashとjsのソースをまとめたものがこちら(zip)。
作ってもローカルじゃ動かないので、確認するときはサーバに上げるかlocalhostを立ててみてください。

参考資料:teraさんのDelicious

全体の流れ

  • JSを読み込む
  • パーツのflashを描画
  • パーツflashをクリックされたらJSと連携
  • フローティングのflashを描画
  • フローティングのflashをクリックされたらJSと連携
  • フローティングを削除
  • パーツのflashに偉人が帰ってくる

解説

やってることは http://cross.ryow.net/blogparts02.js を読み込んでもらって、基本になるURLを設定します。そこで、document.writeでその他必要なjsを読み込んでからSWFObjectで描画(ブログパーツ)、フローティングを描画する用の関数も設定。という流れです。

普通にjsなので難しいことはないんですが、ポイントが一点。Flashとの連携をするためにExternalInterface(以下Ex)つまりEx.callとEx.addCallbackを使います。

Ex.callはそのまんまコールすればいいだけですが、Ex.addCallbackは注意が必要。前のエントリにも書いていますが、クロスドメイン問題がひとつと、JS側の用意ができてないのに呼ぼうとするとブラウザが落ちるというエラーがあります。この対策のため、callbackするJS関数はできるだけセットタイムアウトしてあげるのが確実です。その他、画面を激しく再描画するときもですね。
具体的には:

function overlayReturn(){
//オーバレイを画面から消す
window.setTimeout(function() {
$("#"+overlay.id).remove();
}, 1);
//パーツを消す
var player = document.all? window[parts.objID] : document[parts.objID];
player.FlashCallBack1();
}

via:ブログパーツの作り方
1年前のエントリなのでさすがにそろそろ補足したいと思ってました。

あわせて読みたい

自分で作る blog ツール
自分で作る blog ツール
ブログパーツを自作しよう Webサービス+JavaScript編
ブログパーツを自作しよう Webサービス+JavaScript編
ホームページやBlogが生まれ変わる お手軽Ajaxパーツ集
ホームページやBlogが生まれ変わる お手軽Ajaxパーツ集

ブログパーツで気をつけること:クロスドメイン問題

ブログパーツは、Flashパーツだけ作ればいいってもんじゃないようです。
表示するだけなら別にクロスドメイン問題は関係ないですが、ExternalInterfaceを使う場合は「Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error 」と表示されて意味不明なエラーが出ます。try-catchを使えとか、そういう意味じゃないです。
ここでは、Security.allowDomain(“*”) が必要ということですね。呼び出し元が決まってれば * じゃなくてドメインを入れます。
なので、ブログパーツから
・通信をする→swfObject書き出しのタグに「so.addParam(“allowScriptAccess”, “always”)」を記述
・XMLを読む→crossdomain.xmlをおく
・Ex.addCallbackを使う→呼び出すswfにSecurityを設置する
ということを心がけます。
追記:
ブログパーツで気をつけること(2) JSとのバッティング問題

daigo語に変換するブログパーツ

悪ノリした結果です。スペイシーボタンを押すとエントリがDAIGO語になります。動作サンプルはこちら

ブログパーツと言っても、Flash側では何もやってません。

import flash.external.ExternalInterface;
spacy_btn.addEventListener(MouseEvent.MOUSE_DOWN,onSpacyDown);
function onSpacyDown(e:MouseEvent):void {
ExternalInterface.call("daigoStart");
spacy_btn.visible =false;
}

たったこれだけ。ブログパーツはJSテクとASテクの両方が要求される技術なんですね。その割には消費が激しい(どんどん新しい技術が出てくるから)ので、すぐ廃れてしまいそうな感じです。

個人的には、これはブログパーツだけじゃなくて、もっと汎用的なライブラリとして充実していくのでは、と思っています。