自分用にFlash製CMSツール“SWF View for RSS”を作成
2回目のリニューアルの際に作ったものです。このツールは公開していないので、完全に自分用メモです(汗笑)。解決したい問題や、改善したい部分など。
“SWF View for RSS”とは?
2007年05月15日 00時00分
このサイトのコンテンツを表示している本体です。普通はサイトのコンテンツを更新すると、それに連動してRSSも更新されるという流れですが、RSS自体をコンテンツのフォーマットにすれば楽なんじゃないか、と思い作り始めました。最初は“マルナナニゴウシツ”のレポート用だったのですが、テンションが上がっていたためか、あれこれ考えているうちに機能が多くなり、コンテンツビューアみたいになってしまいました(^ω^;)
個人的にFlashは好きで、動画や静止画を統合的に扱えそうなのでいい感じなんですが、プログラミングは趣味レベル、設計などするわけも無く、行き当たりばったりの思いつき。なので効率悪いし、楽しいけどいつも“スパゲッティ・コード”です(^ω^)しかも、FlashはHTMLやCSSの扱いに制限があるようで、楽になっているかは微妙なところです。もう少し調べてからやればよかった(;ω;)
未解決の問題
2007年05月15日 00時00分
- △:サブドメインのSWFAddress.setValueでURLが変わらない
- SWFAddress.setTitleなどは問題ない
- FFで確認、IE系はOK
- ローカルサーバだとOKでリモートの親ドメインもOK、サブドメインに移行してからっぽい
- SWFAddress.setValueには来ている
- SWFAddressEventを使う記述にしてもダメだった
- SWFView4RSSが親ドメイン下にあり、サブドメインはそれを呼び出しているからかな?→やっぱりそうだった、サブドメインごとに同じファイルを置くのは避けたい→ためしにFlashへbaseパラメータを指定してもダメ
- System.security.allowDomain関数で大丈夫になった
- △:サムネイル・ローダー画像がグレースケールにならない
- ローカルのWebサーバーだと問題ない
- 動画はローカル、リモートどっちも問題ない
- コードは変更していない
- サブドメインに移行してからなので関係あるかも→やっぱり違うとなる
- IE7、FF3で確認
- _visibleとか他のプロパティも効いていない、てことは読み込んだMCが違うのかな?
- MovieClipLoaderのかわりにloadMovieでやってみるもだめ
- 子MCを作りそこにloadClipを、親MCにColorMatrixFilterをかければ大丈夫になったけど原因そのものは分からず
- ×:ごくまれにメニュー部分の文字がでないことがある
- 機能はする
- 埋め込みフォントを使用しているから?
- MenuBarコンポーネントにのみ発生?
- ×:Googleクローラのアクセスが404になるものがある
- apacheログを見ると本来の 961832.info/#hoge が 961832.info/hoge でアクセスされている(#が抜かれている)
- SWFAddess2.0で対応したURLの書き方(961832.info/#/hoge/)に変更してみた→だめっぽい
- ×:TextAreaコンポーネント中のアンカー(<a href="#HOGE">)を選択した時の挙動がブラウザによって違う
- FF2:そのアンカーのノートの部分のみ変わる。これがベスト。
- IE6:アンカーのノートを表示する際、ページが再読み込みされる。
Sleipnir2やGraniでも同じ。→Sleipnir2、Graniでは再読み込みされても、最初のノートが表示されてしまう(アドレスバーのURLは元ノートのまま)。
2回目からはクリックしても反応しなくなる。
- SWFAddress2.0にすると、FF2:無反応、IE6:再読み込み後トップノートへ(getValue関数に/が入るため)
- 現在ページの属するドメイン以外のURLや、現在ページが属するドメイン内でもtarget属性に_blankを入れれば正常な反応
- 相対URL(#/hoge/、index.html#/hoge/)や絶対URL(/piyo/#/hoge/、/piyo/index.html#/hoge/)でも変わらないようだ
- ひとまず全リンクのtarget属性に_blankを入れることにした
- ローカルリンクは同じページ内で再読み込みせずにノートを切り替えたい、asfunctionでやるしかないかな
- △:静止画ウインドウのサイズが取得できない場合がある
- IE系で確認
- Nextボタンやコンボボックスで変えた時に発生
- 小さいウインドウになってほとんど見えない
- ScrollPaneのcompleteイベント内でScrollPane.content._widthなどが0になっている場合がある
- ウインドウはScrollPane.contentのサイズを基準にsetSizeするので見えなくなっていた
- 応急処置としてScrollPane.content._width(_height)が0の時はScrollPane.width(height)を使用することにした
- ×:ローカルサーバ上で表示するとTextAreaのスクロールバーが合わない時がある
- △:グッズ検索のExternalInterfaceとSWFObjectでJavaScript側からSWF内の関数を呼び出せない
- ってかXML.loadに直接CGI渡せばいいということに気づいた…アホでした(笑)
- この問題自体は未解決
- ×:TextAreaでimg要素のsrc属性に埋め込み画像を指定するとスクロールバーが合わない
- 画像のサイズ分が足りなくなる
- 外部のときはheight属性で指定すればよかった
- 埋め込みはheight属性で指定してもだめだった
- △:ブラウザのサイズを変更するとTextAreaのスクロールバーつまみの大きさがおかしくなる
- TextAreaの下端までいっても、つまみは途中まで
- 高さだけ可変になるようにしたらこうなった
- なにか再計算が必要なのだろうか
- invalidate()、redraw(true)は効果ないっぽい
- onResize時にTextAreaのtextプロパティの中を退避させてから空にして、もう一度復帰させたらなおったけど、これはcoolじゃないな(^ω^;)
- 一度表示してまた更新すると症状がでるときがあることが判明
- IEだと変になるときがある?
- ×:Accordionコンポーネントに埋め込みフォントが適用されない
- MenuBarとかAlertのコンポーネントはOK
- 正確には、変化するけど埋め込みフォントのものではないようだ
- △:リンクテキストがずれる、折り返される
- リンクにマウスオーバーすると発症
- 一度なるとロールアウトしてもそのまま→戻る場合もある
- 文中にテキストリンクを入れたいときに困る
- 同じページ内に<a href=...><img ...></a>があるとなるようだ
- まるでそこに画像があるかのようにテキストが折り返される
- BR要素で回避できてるかも?→やはりリンクと画像の間にBR要素をいれると回避できるときがある→画像が重なっていると起こるようだ
- △:img要素が強制流し込みする
- img要素を連続で使いたい時に重なってしまうので困る
- P要素の中に入れてみたり、h(v)space属性をいじってみたり、透明な画像を目一杯引き伸ばして阻止できるかとか試したけどだめだった
- 流し込みの有無を選択できるような属性とかないかな?
- 今のところalign属性で左右にふって、最悪重ならないようにしているけど、面倒だし見にくくなる
- …どうやら解決策はないようだ、brでやるしかないのか。
- ×:コンポーネントで作った画像表示用ウインドウが別画像に切り替わるときに一瞬消える
- ComboBoxコンポーネントでの切り替え時は顕著、チカチカするので個人的に気になる
- フェード処理しよう
- △:アフィリエイトの画像が表示されないものがある
- GIFは表示されるのにJPEGはだめ
- 楽天APIしか試してないけど、同じURLをブラウザでアクセスすると全部表示される
- AmazonECSは大丈夫のようだ
-
どうやら楽天の画像URLに拡張子jpeg(jpgはOK)のがあって、それをFlashのIMG要素が読めないみたいだ
→とりあえず拡張子jpegのときは画像が無いものとして処理することにした
- いったんローカルに保存してからやるのはメンドい
- ×:コンポーネントで作ったウインドウが複数時に下のをクリックしてもフォーカスが移らない
- タイトルの部分を選択するとOKなのに、コンテキスト領域では反応しない
- 動画用と静止画用を一つにまとめるのもありか
- ×:リンクとかがコンポーネントで作ったウインドウの下に隠れていても、そっちのマウスイベントに反応する
- ダミーのMCで抑えるとか?もっとスマートな方法を探したいな
- 単に深度の問題なのかな?
- TextAreaコンポーネントやScrollPaneコンポーネントなどをのせると反応しなくなる
- △:FLVPlaybackコンポーネントのシークつまみが一度最後まで再生し終わらないとでてこない
- 総サイズや総タイムをこっちが与えてやらねばならないのか?
- プログレッシブダウンロードだからかな?
- 携帯動画変換君v0.34付属のffmpegで作った動画はでてこないが、変換君セット付属のmencorderで作ったものは1回目から出てくる(FLV4形式の動画で確認)
- ×:RSSファイル、content:encoded要素とdescription要素を使い分ける
- ×:TextAreaにXML形式のテキストを試す
- ×:アンカー文字(#以降の文字)とノートのファイル名との依存関係を解消させる
- ×:サムネイル・ローダー:リソースが見つからなかった時の対応
- ×:動画の最初と最後のフェード処理はFlash側でやる
- ×:URLの#以降が存在しない場合の対応
- ×:グッズ検索を複数ページにも対応させる
- ×:LowLevelEventsクラス
- ×:なにか双方向性のあるものをつけたいな
- ×:ローカルナビゲーション的なものを付けたいな
解決済みの問題
2007年05月15日 00時00分
- ○:動画再生時、動画ウインドウにサイズが反映されない
- playmovie.swfをMovieClipLoaderで呼び出したとき、onLoadInitイベント内でも_widthや_heightに動画のサイズが入らない
- LocalConnectionクラスで情報は受け取れるも、呼び出された関数内でsetSize関数を使っても反映されない
- 現在、応急処置としてplayMovie、playGroupMovie関数の引数にサイズを指定できるようにした
- MovieClipLoaderで呼び出すと、そこに呼び出し先のMCができてることに気づいたので、呼び出し先SWFから呼び出し元SWFの関数を呼んでサイズをセットすることにした。でもこういうのっていいのかな(笑)。
- ○:swfview4rssの動画プレーヤーの音が鳴らない
- MP4形式(H.264)の動画作成時に気づく
- MP4形式やFLV形式どちらも鳴らず
- スキンのボリューム部分などは正常に表示されている
- Googleビデオサイトマップを試した時に作ったプレーヤー、playmovie.swfでは鳴る
- playmovie.swfをMovieClipLoaderで呼び出してみると鳴らない
- サムネイルローダーがあるノートだと鳴らない?
- 判明。サムネイルローダー内で var sound=new Sound(); sound.setVolume(0); で無音にしていて、それが親であるswfview4rssにも影響がでていた…アホでした(汗笑)。
- ○:IMG要素の次にある要素にはスタイルシートのmarginLeftプロパティが効かない
- textformat要素のblockindent属性をmarginLeftのかわりに指定すると大丈夫になった
- ○:グッズ検索がうまくいかないときがある
- どうやらURLエンコードをしなくていい部分にかけていたようだ
- ○:ブラウザを更新したとき、ブラウザのタイトルが変わってしまう
- SWFAddress.setTitleを呼び出す場所が悪かったという、しょーもないミスでした
- ○:動画が一度停止して再度リンクがクリックされても再生されない
- 同じ動画のときのみ
- 今まで play(動画のパス); だったのを contentPath=動画のパス;play(); にしたら大丈夫だった
- ○:左側のメニューが隠れてしまう
- IEでキャッシュ済みの状態の時(つまり一回目の表示以外)にAccordionコンポーネントが隠れてしまい、TextAreaコンポーネントが覆い尽くす
- IE6・7で確認、FF2はOK、IE系のsleipnir1・2もOK
- コンポーネントの深度が狂ってしまうのだろうか?
- キャッシュの有無で変わるって事はもしかして読み込み時のなにかに関係するのかな?
- キャッシュをクリアすればまたでてくる
- 深度をTextAreaコンポーネントより高くすると数ピクセル分の幅だけ見える、てことは初期化されていない?
- キャッシュをクリアしなくても、IE再起動でなおる→F5キーや更新ボタンを押した時だけになるようだ
- どうやらstatic変数にStage.widthなどを入れていたのが悪かったようで、値を直接使ったらなおった(以前はそのstatic変数を元に左右のサイズを決めていた)…でもなぜIEだけなんだろう?
- ○:アフィリエイトのXMLデータがおかしい?
- AmazonECSのResponseGroupを変えると、ちゃんと読めなかったりする
- new XML(a_arg)でXMLを作ると、statusプロパティが-9(終了タグがない)になる
- 自分がなんかの文字をエスケープ処理し忘れているのか
- 、空白文字があるかチェックしてみよう→関係ないようだ
- &があるとなる?→どうやらテキストノード内に実体参照があって、それ以降の部分がなくなっていたようだ→全角の&に置き換えたらうまくいった
- ○:TextField.StyleSheetのonLoadで読み込み失敗する
- これは単にパス指定が違っているとか、しょーもないミスのような気がする
- やっぱりパスがおかしかったようだ(^ω^;)
- ○:左側のツリー部分を見直す
- Treeコンポーネント用のXMLをRSS作成時に生成しておく
- 他のデータ構造も大幅に変更
- ○:サムネイル・ローダー:枠に表示する文字を引数から取得できるようにする
- ○:画像用ウインドウをスクロール可能にする
- LoaderコンポーネントからScrollPaneコンポーネントへ
- ProgressBarコンポーネントのmodeプロパティをmanualにした
- ○:Feedリーダー用RSSファイルの作成時、content:encoded要素の文字数制限
- 完全に更新確認用途へ
- 文字数ではなくHTMLが4要素までにした
- ○:カテゴリウインドウ
- RSSのcategory要素を使おうか→RSS1.0なのでdc:subject要素
- ウインドウではなく左側のツリーに表示するかどうか→ツリーに表示することにした
- ○:高さだけLiquidにする
- ○:Feedリーダー用RSSファイルの作成時、ASFunctionのリンクを普通のリンクに置き換える
- 普通のリンクに置き換えるのではなく、削除することにした
- ○:SWFAddressを試す
- ○:ExternalInterfaceを試し、JavaScriptProxyと置き換える
- アフィリエイトの検索結果取得のため
- どちらも必要ないことが分かった
- ○:Feedリーダー用RSSファイルの作成時、align属性を削除
- ○:Feedリーダー用RSSファイルの作成時、余分な<br>を削除(連続しているところを1個にする)
- ○:ツリーを選択した時に右側にあるTextAreaのスクロールバーつまみを上へもどす
- ○:DepthManagerクラスを試し、コンポーネントの深度管理はこれに任せる
- ○:アイコンなどを変更
“SWF View for RSS”で使えるサムネイル・ローダーを作る
2007年08月26日 18時04分
以前にも書いていますが、私はとても“面倒くさがりや”です。毎回ノートを作るたびにIMG要素に使う画像を作るのは、もう嫌気がさしてきました。
そこで、動的にIMG要素の画像を変えられるようなものを作ることに。
普通のHTMLならCGIとかでやればいいのですが、FlashのHTMLは制限があってCGIは無理っぽいようです。
しらみつぶしにリファレンスを眺めているとFlashのIMG要素には何と、画像に加えてSWF形式のファイルが使えるようなんです。なんかもうメチャクチャな感じですが(笑)でもこれで、渡す引数によって読み込む画像を変えられそうです。
さっそく試してみました。
<img src="hoge.swf?a=1&b=2">
この場合、普通ならroot.aには1、root.bには2が入りそうなもんですが、結果はundefined。
それで今度はGoogle内を漂流し、MovieClip._urlというプロパティがあることを知りました。もしこれでURLを取得できれば、引数だけ取り出して使えると思ったのです。
さっそくroot._urlを見るも、親swfファイルのURLでした。もうこの辺で挫折しそうになったのですが、this._urlを見てみたところ、何とここにsrc属性の中身そのままのURLが入っていたのです。
ん?それならもしかしたらthis.aとthis.bに入ってるんじゃ?と思って見てみると、やっぱりundefinedでした(笑)。
あとあと思い返してみると、rootが親のMCってことは_lockrootプロパティがらみかな?IMG要素から呼び出したやつには、どうやって設定するんだろう。
そんなこんなで一応問題は解決しましたが、これはMTASCでコンパイルしているから“たまたま”できているだけかもしれません。かといって今更FlashIDEで確認する気力もないですが、普遍なものなのかが分からないので少し不安です。
それにたくさん表示させると読込速度の問題やCPU負荷がかかるでしょうから、負荷のかかるアルファブレンディングやサイズの大きくなるコンポーネントは使わないようにしました。
また、ColorMatrixFilterでサムネイルをグレースケール(HDTV)にしています。
本当は動画の場合、マウスオーバー時に再生するようにしたかったんですが、そうするとマウスイベントとA要素が衝突しているためなのか、クリック時の反応が悪くなるので、現在は動画をロード後に一時停止させています。
これで少し楽になれそうです。
サムネイル・ローダーの使用例
<img src="http://961832.info/flash/swfview4rss/thumbload.swf?name=sitelogo&title=%E4%BD%BF%E7%94%A8%E4%BE%8B-Example" hspace="4" vspace="0" width="182" height="148" align="right">
“SWF View for RSS”で使えるムービー・プレーヤーを作る
2008年03月26日 15時45分
Googleビデオサイトマップを試したときに必要に迫られてつくったものです。プログラム自体はSWFView4RSSに組み込んであって、それを切り出して少し変えただけなので楽でした。あと、必要かどうかわかりませんが一応、ウォーターマークも入れておきました。
MP4形式(H.264)の動画を試しているときに、SWFView4RSSの動画プレーヤーで音が鳴らなくなっていたバグを見つけ、原因をつきとめるためMovieClipLoaderでこの外部プレーヤーを読み込んで音が鳴るかなどやっていたのですが、せっかくなのでバグが治った後も動画プレーヤー部は外部呼び出しのままでいくことに。これでFLVPlaybackコンポーネントをSWFView4RSSからはずせるので、少しスリムになって思わぬ収穫でした。
そのうち、静止画ビューアも切り離してみようかな。
ムービー・プレーヤーの使用例
- オプション
-
- as=0:サイズ可変(アスペクト比は保つ)、as=1:サイズ固定(オリジナルで表示)。
- ap=0:読み込み後再生しない、ap=1:読み込み後再生する。
- w,h:SWFView4RSSタグモードの時に指定サイズで表示(アスペクト比は保つ)
- SWFView4RSSウインドウモード
-
SWFView4RSSの動画ウインドウの内部で使用しています。
<a href="asfunction:_level0.app_mc.play Movie,h264test_he_64,SWFView4RSSウインドウモード">ウインドウを表示</a>
ウインドウを表示
- ブラウザモード
-
WebブラウザにURLを入れて呼び出すモードです。認証ダイアログに対応しました。
http://961832.info/flash/swfview4rss/playmovie.swf?sd=tiptoe&id=h264test_he_64&as=0&ap=0
- SWFView4RSSタグモード
-
FlashのIMG要素はSWFファイルも対応しているので、直接指定して呼び出せるようにしました。
<img src="http://961832.info/flash/swfview4rss/playmovie.swf?sd=tiptoe&id=h264test_he_64&w=320&h=240&as=0&ap=0" hspace="77" vspace="0">
“SWF View for RSS”で使えるイメージ・ビューアを作る
2008年04月13日 23時19分
この前、必要に迫られムービー・プレーヤーを作り、ついでにSWFView4RSS本体から切り離したのですが、SWFView4RSSの画像表示もウインドウで表示するタイプなので、これも切り離し、さらに単体でも使えるようにしました。
これは単純に、ScrollPaneコンポーネントに渡すだけなのでムービー・プレーヤーよりも簡単です。これで、スパゲッティと化したSWFView4RSS本体がまた少しスッキリしました(笑)
イメージ・ビューアの使用例
- SWFView4RSSウインドウモード
-
SWFView4RSSの画像ウインドウの内部で使用しています。
<a href="asfunction:_level0.app_mc.showImage,sitelogo,SWFView4RSSウインドウモード">ウインドウを表示</a>
ウインドウを表示
- ブラウザモード
-
WebブラウザにURLを入れて呼び出すモードです。
http://961832.info/flash/swfview4rss/viewimage.swf?sd=tiptoe&id=sitelogo
- SWFView4RSSタグモード
-
FlashのIMG要素はSWFファイルも対応しているので、直接指定して呼び出せるようにしました。
可変サイズにしているためSWFのwidthとheightを100%にしてコンパイルしているんですが、IMG要素のwidthとheightを使用するとなぜか不正処理となってしまう。
<img src="http://961832.info/flash/swfview4rss/viewimage.swf?sd=tiptoe&id=sitelogo&w=240&h=156" hspace="117" vspace="0">