Home / Diary / タグ: javascript

123

目次

  1. mp3へのリンクにGoogleのmp3プレイヤーを埋め込むユーザースクリプト
  2. ExternalInterfaceに挑む
  3. Flashを利用したストレージが動かん
  4. JavaScriptでCSSを弄る際のメモをまとめた
  5. ニンテンドーDSブラウザでAjax
  6. PHP Markdown ExtraをJavaScriptに移植した

mp3へのリンクにGoogleのmp3プレイヤーを埋め込むユーザースクリプト

Inline Google Mp3 Player — Userscripts.org

その発想、YESだね!

んが、@include *で全てのページを開く度に全てのリンクを走査されてはたまらないので、スクリプトを/packer/で圧縮してOperaのブックマークレットとして登録。んむ、ディモールト・ベネ。

しかし、適当に巡回していると未だにmp3をlzhで圧縮してるとこが結構あったりするのであった。数年前の名残で拡張子がmp3のままアップロードできないとかいうレガシーなレンタルサーバーなのだろう。

で、それらを大量にダウンロードして解凍すると、裸で出てきたり、フォルダに入ってたり、マトリョーシカだったり、HTMLが落ちてきてたりしてブチギレ金剛ですよ。

いやまあ、mp3で抽出すりゃいいってのはわかるんだがね。

んで、それらをプレイヤーにぶち込むと、今度はID3タグが空っぽで、またブチg

Info

2007
0707

Tagsjavascriptuserjs

ExternalInterfaceに挑む

Flashのストレージが動かないと書いたが、状況を整理してみる。

まず、テストページは動作する。

ブラウザ save2local.js storage.js
IE
Firefox ×
Opera ×

これらをダウンロードして組み込み、ホスト上で動かすと動作しない。いや、正確には動作したりしなかったり、だ。何がトリガーとなって動作するかがわからない。

一応、最小構成で動作させると動いた。

そもそも、FlashとJavaScript間で直接通信するのはExternalInterfaceというらしく、これが働いていないおかげで、結果としてFlashのストレージが機能していないようだ。

というわけで幾つか策を練ってみた。検証には3ブラウザで動作したsave2localを使用する。Flashのバージョンは全て9.0.16.0だ。

DOMの汚染

真っ先に思いついたのがコレ。特殊なアプリに組み込んでいるから動作しないのではないか?

そこで、最小構成で動作するページを用意し、そのページをIFrameで呼び出し、

document.getElementById( id ).contentWindow.save2local.saveData( key, value );

こなかじに直接引っ張ってみる。

結果:失敗

まさかIFrame内まで汚染するというのか!? と思ったが、さすがにそれはないだろう。だとすると他の原因があるはずだ。しかも、動作したりしなかったりしていたということから見ても、ほんの少しの違いで動作するようなもののはずだ。

JQueryを外す

結果:失敗

とりあえずやってみた。期待はしていなかったが。

ぐぐる

同様にハマってそうな上記2エントリを発見。試しにexternalやらAllowScriptAccessを付けてみた。

結果:失敗

ウボァー

ムネンアトヲタノム

全っっっ然わからん。俺が扱うには経験値が足りなかったということか。つーわけで素直に諦め・・・ようとしたところで動いた。一箇所直しただけで。それを元に戻す。・・・動かなかった。まさか、これで確定?

テストページ

つまり、こういうことか。

Flashがdisplay:noneになっていると、ExternalInterfaceが動作しない・・・っ!

考察

なぜにdisplay:noneだと動作しないかというと、まずCSSが読み込まれて、Flashを入れるdivにdisplay:noneが設定される。

display:noneが設定されている場合、その中の要素がsrcで何がしかのソースを指していたとしても、どうせ見えないんだからとブラウザ側はダウンロードしようとしない。

つまり、ExternalInterfaceしたくてもFlashそのものが読み込まれていなかったんだよ!

動かなかった原因は明らかにこちら側のミスだったわけであり、そしてこの諦念・・・

・・・でも、それだったら、display:noneな中にFlashを指定して、FlashVarsで渡したものが動作する理由がわからん。

それに、後からdisplay:noneにした場合、既にFlashは読み込まれているから動作すると思ったんだが、動作しなかった。なぜに。

とりあえず分かったのは、noneにしなけりゃ動くっぽいことか。

先生、事件です

IEで動いたり動かなかったりしてる。

新しいタブで開く。⇒動く

F5で更新。⇒動かない。

・・・なぜに初回のみ動くのだ。ってInternetExplorerなら問題無かった。Sleipnir 2.5だと初回のみだった。

あと、IEはdisplay:noneとか関係無しに動いた。さらにわけが分からなくなる。

補足

AllowScriptAccessを設定すると、値によって動作する環境が変化する。

always: ActionScript による JavaScript の呼び出しを常に許可します。
sameDomain: SWF と HTML ページのドメインが一致する場合にのみ、ActionScript による JavaScript の呼び出しを許可します。
never: ActionScript による JavaScript の呼び出しを常に許可しません。

Adobe - デベロッパーセンター : Flash Player 8 のセキュリティ機能の変更点

デフォルトはhttp://上でないと動かないので、恐らくsameDomainだと思われる。

save2local.swf.addParam("AllowScriptAccess", "always");

このようにalwaysを設定してやると、IE以外はfile://な環境でも動作した。

と思ったら

同じテストファイルをPC変えて動作させたら全ブラウザがローカルで起動しなくなった。Flashのバージョンは同じなんだが・・・

疑問

上記の方法ならばstorage.jsのほうも同じ方法で動くはずだと思ったが、動作せず。

storage.jsはテストページの時点でIEしか動作しなかったので、IE専用かと思ったが、IEもだめだった。当然display:noneは設定していない。なぜ・・・

戦い終わって ~神々の黄昏~

レイアウトが崩れるのを避けるためにdisplay:noneにしていたのが、そもそもの間違いだった。というわけで、width:0、height:0で適当な場所に転がす。んむ、動作した。

ExternalInterfaceの動作条件にはまだ分からない部分があるが、とりあえず使えるようになっただけでも大きな一歩か。だがあまりにも不安定すぎる。なんなんだこれは。

Info

2007
0308

Tagsflashjavascript

Flashを利用したストレージが動かん

Cookieによるデータの保存は容量が少ないのが欠点で、それを解消する為にFlashを利用してローカルとデータをやりとりするものなんだが、最小構成にしようが何しようが全く動かん。

if( navigator.appName.indexOf( "Microsoft" ) != -1 ) {
    return window[name];
} else {
    return document[name];
}

両スクリプトともこの部分で引っかかってるようなのだが原因がさっぱりわからん。唯一save2local.jsのテストページだけは動作したが、Firebugでゴリゴリ掘っていっても原因が掴めず。つーか、テストページ丸ごと保存してローカルで動かすとやっぱり反応しないし。ちゃんと設定パネルでセキュリティは大丈夫なようにしてるんだがなぁ・・・

で、ぐぐってみても動かないという話が見当たらない。・・・一体どこが悪いんだ。

Info

2007
0223

Tagsflashjavascript

JavaScriptでCSSを弄る際のメモをまとめた

JavaScriptによるCSSの操作

まとめた理由
書いた俺自身が、あれどーやんだっけな~、と自分の書いた文書をあちこち探してたことがあったから。

というわけで、サクっとまとめつつ、Opera9の仕様とかにも合わせたり、関数を微妙に改良したりとかいろいろ変更を加えた。

今後CSS関係で何か分かったらこっちに追加するつもり。

Info

2006
0824

Tagscssjavascript

ニンテンドーDSブラウザでAjax

っぽいことをする。

XMLHttpRequestがダメなだけで、iframeを使ってテキスト取得とかは可能。俗に言うIFRAMEHTTPRequest。もしくはHTTP.Push?

var iframe = document.createElement( "iframe" );
iframe.src = <ローカルファイル>;
iframe.onload = function( ) {
//読み込み完了時の動作
}
document.body.appendChild( iframe );

最小構成だとこなかじ。当然のことながら呼び出すコンテンツは同じドメインのものでないと、内部にアクセスした途端にエラーが返ってくる。

んで、XMLHttpRequestではないので色々と制限を受ける。

HTMLを読み込んだ時は、画像やらスクリプトやら諸々全てが完全に読み込まれてから初めてonloadが発生したり、POSTで取得できなかったり。(がんばればできるという話を聞いたが)

textやscriptを読むときは注意が必要。内部でpre要素に入れられつつ、[<>"&]が文字参照に変換されてしまっているので元に戻す必要がある。

var doc = <iframeオブジェクト>.contentWindow.document;
if( doc.doctype == null ) { //nullだとhtmlではない・・・らしい
    alert( doc.body.innerHTML
    .replace( /^<pre>|<\/pre>$/i, "" )
    .replace( /&quot;/g, "\"" )
    .replace( /&lt;/g, "<" )
    .replace( /&gt;/g, ">" )
    .replace( /&amp;/g, "&" )
    );
}
else {
    alert( doc.body.innerHTML );
}

外部のコンテンツはとりあえず取得できる。が、したらしたで今度は貧弱なDSの側で色々しなきゃいかん場合もあるので、ある程度はサーバーサイドと相談するのがいいかもしれん。

補足。試しにGoogleのHTMLソースを取得してalertさせたら、画面暗転してから(この時点で既に読み込みは完了してる)ソース表示まで10秒近くかかった。・・・そこまで負荷がかかるのか。(というか描画全般に弱いのかな?)

Info

2006
0801

Tagsgamejavascriptopera

PHP Markdown ExtraをJavaScriptに移植した

劣化してるけど。

js-markdown-extra

js-markdownというものは以前から存在していたけど、やっぱり定義リストやテーブルも使えるといいよねー。

そこで、正規表現の勉強も兼ねてPHP Markdown Extraを移植してみようじゃあないか、と思って作ってみたのがこれ。PerlとJavaScriptの正規表現は全然違うので移植に苦労したが、ある程度までなら再現してくれるだろう。たぶん

使い道だが・・・ブログやwiki投稿前のリアルタイムプレビューに使ったりとかかな? 俺は愛用しているテキストエディタの「Alpha」に組み込んで、ショートカットキー一発でHTMLに変換するようにしてる。ちょっとしたHTMLを書きたいときとか超便利。

JavaScriptの正規表現の限界+勉強不足のせいで不具合がそこそこあり、複雑な構文を変換しようとすると固まる可能性があるので、利用の際は注意して欲しい。ローカルでの利用を激しく推奨。

Info

2006
0708

Tagsjavascript

暴満館

最新のエントリ
注目のエントリ(はてな)
ゲーム攻略

暴満館 ~The House of Full Violence~
Powered by WordPress.
About | Contact | 新着のエントリ情報 RSS

ページ内の見出し一覧
mp3へのリンクにGoogleのmp3プレイヤーを埋め込むユーザースクリプト
ExternalInterfaceに挑む
Flashを利用したストレージが動かん
JavaScriptでCSSを弄る際のメモをまとめた
ニンテンドーDSブラウザでAjax
PHP Markdown ExtraをJavaScriptに移植した