2019年09月21日

swf2jsを使ってFlashをブログで表示する方法(概要と準備編)

Flashはネット上で多くの人に利用されてきましたが、Adobe Flash Player の脆弱性の問題から、HTML5への移行が進められています。
Google Chrome の場合、Flash Player のサポートも2020年12月で終了しますし、現状でも Flash Player をブロックする設定にしておかないと、ちょっと面倒くさい状態になっています。
参考に ↓
 「Flash Player のサポートは2020年12月で終了します」が表示されないようにする

他のブラウザでも、そのままでは表示されない仕様になっている場合が多く、いずれはどのブラウザでも Flash Player が動作しなくなると思われます。

概要


フリーで公開されているFlashや自作のFlashを、ブログなどに設置している人は少なくないと思います。
それをすべてあきらめてしまうのは、あまりに惜しいので、HTML5で表示できる形式に変更する方法を考えないといけませんが、なかなか良さそうな方法が見つかりません。

そんな中で見つけたのが、JavaScript製FlashPlayer(swf2js)でFlashをそのままHTML5に変換するというものです。
簡単に言うと、ブログ側で swf2js を設置して、Flashを表示する部分のコードを変更すれば、そのままFlashが表示できるということです。
Adobe Flash Player を使わないので、ブラウザ側で Flash Player をブロックした状態でも、ブログに設置したFlashを見てもらうことができます。
おそらく現状で、最も手間をかけないで Flash を表示させられる方法だと思います。

以下、swf2js を使ってFlashをブログで表示するための準備を説明していきます。

エクスプローラーでファイルの拡張子を表示させる


Windowsの標準設定では、エクスプローラーでファイルの拡張子が表示されていないと思いますが、説明を分かりやすくするためと、Flashを設置ブログによっては拡張子を変更する必要があるため、拡張子を表示する設定にしておいてください。

エクスプローラーの[表示]タブを開いて、「ファイル名拡張子」のチェックを入れると、拡張子が表示されます。
ファイル名の後ろの「.zip」「.xlsx」などが拡張子で、たいてい3文字か4文字です。
SC190920150558.png

swf2jsをダウンロードする


ダウンロードの作業になれている人は特に読む必要はないですが、簡単に説明しておきます。

1)swf2jsの作者ienagaさんのQiitaのページを開きます。
ブラウザで下のリンクをクリックするとページが開きます。
 JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita

2)完成品のところにある「swf2js/swf2js」をクリックします。
SC190920143904.png

3)開いたページの[Clone or download]ボタンをクリックします。
SC190920144755.png

4)[Download ZIP]をクリックすると、ダウンロードが始まります。
SC190920145332.png

5)ダウンロードしたファイルは、「ダウンロード」フォルダに swf2js-master.zip というファイル名で入っています。
これは圧縮ファイルになっていますので、展開(解凍)しておきます。
Windows10での展開方法は、↓ こちらを参考にしてください。
 121ware.com > サービス&サポート > Q&A > Q&A番号 018844

6)swf2js-master.zip を展開すると、swf2js-master というフォルダができて、その中に swf2js.js というファイルがあります。
これがFlashを表示するためのプログラム(JavaScript)です。

以上で、準備完了です。

Qiitaの記事のコメント欄について


swf2jsを公開されているQiitaの記事 JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換 では、コメント欄で作者による丁寧な説明が書かれています。
とても参考になるので、コメント欄も読んでみることをおすすめします。

ただし、記事の最後にも書いてありますが、現在はその記事のコメント欄では返事を書かないで、株式会社SONICMOOV で製品として問い合わせを受け付けているそうです。

設置テストのためにお借りしたFlashのことなど


記事を書くにあたってテストで使ったFlashは、ブログ友達のさっちゃんさんにお借りしました。


下部の水色の花をクリックすると、障子が開き、景色が変わります。
左右2つの花で景色が違うので、試してみてください。

さっちゃんさんは、同じswf2jsを使ってFlashを表示する方法で、他にもいくつか自作のFlashを公開されていますので、参考にしてみてください。
右サイドバーのカテゴリ「フラッシュでお遊び♪」にあります。

実際にブログに設置する方法の詳細は、私が試せるFC2ブログ・ファンブログ・SeeSaaブログの場合について、別の記事で順に書いていきます。

FC2ブログに設置する方法の詳細

ファンブログに設置する方法の詳細

SeeSaaブログに設置する方法の詳細

swf2jsを使って表示したFlashがスマホ版で、はみ出さないようにする

にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
そうですね。
慎重に行わないと。
メールもそっくり同じもの(最後だけ違う)を使ったため
メモ帳にメモしたはずですが、
どこかが間違っていたようで、
最初のアカウントから一度、ログアウトしてしますと、新しいアカウントにログインしてしまい
次に昔のアカウントにログインするときに
大変な目にあいました。(-_-;)

頑張ります!!
Posted by さっちゃん at 2019年09月26日 18:30
知恵袋に同じような相談がありますね。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13171335558

Yahoo IDを持っている人がソフトバンクに乗り換えたら、ほとんど全員が同じように悩まされるはずです。
Yahoo IDを持っている人は少なくないですから、勝手に新しいIDを追加されたら混乱しますよね。
なんでそんなことをするのでしょうね?

さっちゃんさんの場合、残りは「勝手に作られたYahoo IDの削除」ですね。
簡単に考えると、以下の手順で出来そうです。
1)以前から使っているYahoo IDに登録している携帯番号をいったん解除。
2)勝手に作られたYahoo IDに携帯番号を登録。
3)勝手に作られたYahoo IDを削除。
4)以前から使っているYahoo IDに携帯番号を登録。

・・・が、スマートログインも絡んでくるのかも?
ややこしそうですね。
とりあえず、間違って以前から使っている方を削除しないように注意して、チャレンジしてみてください。
Posted by ぽん太親父 at 2019年09月25日 23:12
うふふ・・
ネットで調べてもわからないことって
素人だからこそ 沢山あるのよ・・w
ネタの提供はまだまだあるかも・・

その1。恥ずかしながら・・ソフトバンクに替えたら
ヤフーのアカウントが勝手にできるのね。
それを知らなくて、昔のアカウントに携帯電話を登録してください!ってメールが来たの。
昔のヤフーのアカウントと
区別がつかなくたって スマホでログインするのに
凄く手間取りました。(-_-;)

ソフトバンクの新しいアカウントを削除したいのだけれど
古いアカウントに携帯の番号が登録してあるから
脱会!?というか削除できなくて 今悩んでいます。

買ったソフトバンクの店のお兄ちゃん達は、不親切!!!!!〜www
Posted by さっちゃん at 2019年09月25日 18:50
さっちゃんさん、こんばんは(^^)
こちらとしては、すごくいい記事ネタをいただいたと思っていますよ。
Flash Playerが使えなくなるのは知っていましたが、今あるFlash の資産をどうするというところは、全然考えていませんでした。
さっちゃんさんがFlash の変換を考えているのを知らなかったら、今回の記事は書けなかったですから。
Posted by ぽん太親父 at 2019年09月25日 00:03
こんばんわ。ご紹介ありがとうございます。
私の記事にも書きましたが
このフラッシュの右ボタンから動作するフラッシュはチャッピーさんです。
最初スマホで見て、大きさも画面にはみ出していなくて、画質もとても綺麗でした。
今度再チャレンジしてみます。

それにしてもブログごとにやり方が違うんですね!
色々とご足労かけました。ありがとうございました。

Posted by さっちゃん at 2019年09月24日 21:51
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/9217921

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
ブログ内を検索
ファン
最新記事
カテゴリー
最新コメント
ツイッター
広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール