ブログパーツの作り方(Flash/AS2)

※2008.09補足:ソースを含めた補足版のエントリ←こっちも合わせてどうぞ!!

<script type="text/javascript" src="http://cross.ryow.net/part-napo.js"></script>

これでどうでしょう。Flashが表示されます。中身には意味はありません。丸ボタンを押すと偉人の画像が拡大されるだけのものです。
JSを貼り付けると、JSがFlashを表示するので、結果的にJSを貼り付けた位置にFlashが出ます。

ブログパーツの作り方:ポイントは3つ。

  1. crossdomain.xml
  2. Flashの作り方
  3. javascriptの書き方

crossdomain.xmlはこんなxmlをドメインの最上階層に置いておけばOK。このためにcross.ryow.netというクロスドメイン用サブドメインを作りました(サブドメインは必須ではありませんが、ryow.net全体をクロスドメインにしたくなかったのでこうしてあります)。

呼び出すFlashはサブドメインも含めて一致しなければいけないというルールをここで解除してるわけですね。

一昔前(2007年くらい)は、iframeを使ってdocument.writeをダーティに書いてたパーツがたくさんありましたが、これはIEで見たときにアクティブコンテンツ規制にひっかかる場合が多く、せっかく貼ったけどあんまり面白くないな、かっこ悪いな、という印象がありました。

ブログパーツの中身自体はおいといて、今回のエントリでは僕が作ったやりかたをそのまんまアップします。

早速ですがソースはこちら(Flash8)。Flash自体はなんてことのない、普通の中身です。jsと通信するようにすると難しいので、ボタンをクリックしたときとかに「p_btn.onRelease=function(){getURL(“javascript:void(jsfunction())”)みたいに書いておいて、jsfunctionはブログパーツに貼ってもらうjsファイルに記述しておく、という方法を取ることが多いです。

そして気になるjsファイルはこちら(javascript)。

IEもFFもちゃんとFlashを表示させるにはobjectタグとembedタグが必要だ、なんてことを書いてるブログがありますが、時代遅れもいいところです。objectタグのdata属性でそこらへんは対応できるんです。SWFObjectもいらないから簡単簡単。

ブログパーツを本で学ぶ!

ブログパーツコレクションブログパーツコレクション
2008年9月の本ですが、新しくて面白いブログパーツが載っています。コレクションというくらいなので、アイデアを探すにはいい感じ。

ブログパーツを自作しよう Webサービス+JavaScript編ブログパーツを自作しよう
Javascriptでブログパーツを作るときのノウハウ本。Flashで面白いことをやりたくてアイデアを探すときは上記の本で、とりあえず基本を抑えたいときはこっち。

※2008.09補足:ソースを含めた補足版のエントリ←こっちも合わせてどうぞ!!

ブログパーツの作り方(Flash/AS2) への4件のフィードバック

  1. さいきゆみ より:

    こんにちは!ここを見て、まったくの初心者である私もみようみまねでフラッシュをブログに張り付けることができました~・感激です。
    ありがとうございました。

  2. ryow より:

    >さいきゆみさま
    お役に立てて何よりです!色々ためしてみてください!

  3. Wanta より:

    こんにちわ。
    初めて作ったブログパーツの表示ができず、解決法を探して何日も困り、今日こちらの記事に辿り着いて、記事の通りにやってみたところ、無事に表示ができました!
    諦めかけていたので感激しました。
    ありがとうございました。

  4. カブ より:

    色々試しましたが、こちらのコードでやっと貼り付けることができました。
    ありがとうございました!