自分用のてがろぐにメモした内容をわかりやすくして修正したまとめ。
FLASHが好きで最低限HTMLの知識が必要になる記事になるので、初心者や入門者向けではないと念のため。
swf2jsとは
「swf2js」は、HTML5になった現在でもFlashを表示させてくれる神JavaScriptで、このJSを使えばFlashをHTML5にコンバートしなくても、swfを分解してCanvasに表示させることでWEB表示が可能になる。記事現在、AS1.0/ AS2.0がswf2js無償版、AS3.0がswf2js有償版として提供されている。
＜重要①＞↓この3つのファイルを、サブドメインまで合わせるようにUPしないと正常に表示出来ない
あまり知られていないかもしれないが、FC2ブログとイメージ鯖は分かれているのでブログのURLとファイルのURLは全くの別モノになる。基本的にFC2ブログのURLは、SSLに対応していないhttpから始まる「blog.fc2.com」とSSLに対応したhttpsで始まる「fc2.net」に対して、イメージ鯖は「blog-imgs-鯖番号.fc2.com」なので、ブログURLの直下にファイルが配置していないと判定されるため当然エラーとなる。ここがなかなかわからなかった。一見するとファイルを置いたイメージ鯖と非SSL「blog.fc2.com」はドメインが同じ「fc2.com」なので表示出来そうなものだけど、サブドイメンが違うだけで外部サイトと判定されて表示することは出来ない(ここも重要)
つまり、FC2ブログで「swf2js」を使ってFLASHを表示することは絶対的に不可能だ。
＜重要②＞ただし、サブドメインまで一致させて奥の手を使えば表示させることは可能
例え同じドメインで同じディレクトリにファイルがあったとしても、URLがサブドメインになると表示出来なくなるのはブラウザのセキュリティの問題だと思われ。
なんとかして、FC2ブログでFlashを表示する方法はないものか…?
諦めきれず、ブログのイメージ鯖に全てのファイルを置く方法はどうかと考えてみた。
FC2ブログのファイルアップロードは非常に優秀で、ファイル形式が多種多様にUP出来る業界屈指の多機能ブログサービスだ(褒めておきました)。FC2ブログではHTMLファイルがアップ出来るため、swf2js、swf、htmlを同時にUPして奥手を使ってテストしてみた結果、連携動作してFLASHを表示することが出来たのだ。
その方法は以下の通り。
FC2 BLOGのファイルアップに「swf」と「swf2js」をUPしたら、それぞれのフルパスをコピーして別途用意したhtmlファイルの各区間に記述する。事前にコードを記述しておいて、URLの部分だけ補完すればOK。⚠️間違ってもブログ記事に直接記述するためのものではないと念のため、ブログ記事やテンプレのHTMLに書いても表示出来ません
|
1 |
<script type="text/javascript" src="ここにswf2jsのURL"></script> |
|
1 2 3 |
<script type="text/javascript"> swf2js.load("ここにswfのURL",{tagId: "flash01",quality: "high"});</script> <div id="flash01" style="width: 600px; height: 600px;"></div> |
swfとswf2jsをUPしたらすぐにURLをコピーして自作したhtmlに記述して、鯖番号が分岐しないうちに作ったHTMLファイルをすぐにUPする(ここも重要)
背景色を変更する場合は、<body bgcolor=”#カラーナンバー” style=”margin:0px; padding:0px;”> 指定もhtml上でやっておくと良い。
|
1 |
<body bgcolor="#000" style="margin:0px; padding:0px;"> |
もしもこの時点でHTML上で表示出来ない場合はイメージ鯖が一致していないか、もしくは記述ミスのいずれか。イメージ鯖そのものがなんだかわからない場合は以下参照。
＜重要③＞FC2ブログのイメージ鯖は一定期間が経過すると鯖番号が変更されてURLも変わる
ここで絶対的な注意点。それは、FC2ブログのイメージ鯖は一定期間が経過するとランダムで鯖番号が変更されてしまうこと。
普通ならば1つあれば十分な「swf2js」だが、例えば新しく「swf」と「HTML」を作ってUPしても、一定期間経過して鯖番号違いのURLになってしまうと動作しない。なので、「swf2js」「swf」「HTML」←この3つのファイルをUPして鯖番号まで一致させないと、URLが分岐して正常に動作しない。例えば、しばらく経って新しいswfを作ってUPした時に鯖番号が別の番号に分岐した場合は、正常に動作しないということを、決して忘れてはいけない。
＜結論＞インラインフレームを使ってブログに表示させる
イメージ鯖まで一致させてFLASHを表示させることが出来れば、あとはインラインフレームを使ってFC2ブログの記事に表示させればOK。
swf2jsにおけるFLASHの表示はピクセル指定なのでパーセント表示ではなく固定表示になってしまうが、この方法ならば、共有プラグインや共有テンプレートでFLASHを配布することは可能だ。全てFC2 BLOG内だけで完結するので問題ないはず。
|
1 |
<iframe class="swf_html" src="ここにHTMLのURL" width="横サイズpx" height="縦サイズpx" scrolling="no"></iframe> |
https://blog-imgs-160.fc2.com/0/1/0/010101/digilog001.html
手順のまとめ
とにかく情報がなさすぎた。
自力で解決するまでに5年もかかったという。
ちなみに、swf2jsを搭載した状態で共有テンプレートを公開することは禁止されていなかったと思うので、個人利用で非営利という通常のボーダーラインであれば、swf2jsを搭載したテンプレートを公開しても直接ファイルを渡すわけではないので問題ないはず。心配な方は事前に問い合わせて確認すると良いでしょう。
また、FLASH AS2.0では問題がなかった外部リンクがブラウザによっては実行が禁止されていたり、マスクを使った複雑なモーションになるとswf2jsでは表現が難しくなるので、多少手直しして新しくパブリッシュする必要あり。ただし、Adobe Animate(旧Flash)ではAS2.0はパブリッシュが出来ないので、新しい環境で構築するとなるとAS3.0に焼き直してswf2js有償版を使うなど工夫が必要になるかもしれません。
まだまだ俺たちのFLASHは終わっちゃいねえ
