ExternalInterfaceで送れるデータの限界＆全ブラウザ対応のブラクラができた
最初はブラクラなんてつくる気無かったんですが。
今度ExternalInterfaceを使って最大kBオーダーのテキストをjavascript→Flashに渡すようなアプリをつくるかもしれなくて、
ExternalInterface.addCallbackの限界を試したかったんです。
その結果は、IE7、FF2ともに 33,554,432[Byte]まではokだった。
その２倍はNG。IE7,FF2ともにメモリが不足しています、っていってjsがエラーる。
へー。
そしたらExternalInterface.callでFlash→javascriptにどんだけ渡せるのか試したくなる。
16,777,216[Byte]まではok。その２倍はIE7,FF2ともにNG。Flash側でメモリが足りなくなるようで、
IE7,FF2ともに終了。
へーへー。
Opera9.*,Safari3(Windows)も死亡
macは試してない
しかし、意外とたくさん送れるもんだなぁ。
検証コードはこんな
actionscript3
PLAIN TEXT
Actionscript:
package {
import flash.display.Sprite;
import flash.system.Security;
import flash.external.ExternalInterface;
import flash.utils.setTimeout;
public class RPCClient extends Sprite{
private var debug :Boolean = true;
Security.allowDomain('*');
public function RPCClient(){
ExternalInterface.addCallback("xi_send", xi_send);
var message [...]
コンテキストマッチするamazonアフィリエイトを
1. Yahoo PipesのFetchPageでブログのhtmlまたはRSSをとってきてテキスト部分を正規表現で抽出して
（ブログに貼ってあるjavascript使ってとってきてもいいか）
2. Yahoo Pipes使ってYahoo Japanの日本語形態素解析Webサービスに突っ込んで
3. JSONPで結果を受け取って
4. Amazon Webサービスをxslt使ってJSONP
したら、サーバサイドを書かずに＆だれかに依存せずに（YahooやAmazonにはするけど、。）
コンテキストマッチするAmazonアフィリエイトをつくれるなぁ
IEでlocation.hashがついてるとFlashにフォーカスが移った時にdocument.titleがlocation.hashに
なっちゃう。
IE6,IE7で発生
FF2はok
ウィンドウのタイトルが変わってしまう[flash]
Flashにフォーカスが移った、ってのをFlash側のイベント使って検出してjs経由でdocument.title書き換える？
Opera9.23でwmode=transparentだとExternalInterface.callが動かない
wmode=transparent指定はずすとExternalInterface.call動く
ExternalInterface.availableはtrueを返してくる
Operaのバグ?
9.21でFlashPlayerの不具合？
Opera--
javascript開発者のためのproxomitronローカルプロキシのすすめ
設定の備忘録。
javascriptの開発で、Firebugの次に大事な開発ツール。
ローカルプロキシ。
最速の人は
萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ
WEBrick使うようですが、ruby（まだ）よくわからない私は、
proxomitron
さくっとローカルプロキシ環境を入れられます。
ダウンロードはこちら
使い方としては、
ローカルにapache立てておいて、リモートのjsファイルを全部ローカルのapacheに302リダイレクト。
それ以外は全部スルー。
完成度あがってきたらチェックイン。
設定はこんな感じ。
設定がちゃんとしてると、Firebugで見るとこんな感じ。
javascript開発者だけじゃなく、CSSやFlash開発者にもいいかもしれません。
Firefoxで、ツールバーから簡単にプロキシを変更できる拡張も必須
SwitchProxy 1.3
ここにproxomitron追加しておいて、開発時だけプロキシ変更する。
あとはエディタの保存と同時にFirefoxにリロード送れば完璧。
Javascript Linker - Janitorで未使用関数を除去する
batファイルでjavascriptコード圧縮 で
それより、ライブラリのうち未使用の関数を省くようなの、欲しいな。
と言いましたが、そう思ってる方は他にも多くいらっしゃるようです。
8/30 JS Linker in Dojo
The JS Linker was just committed to the Dojo repository.
Javascript Linkerとは、
The purpose of JavaScript Linker is to process HTML/JavaScript code base to prepare code for deployment by reducing file size, create source code documentation, obfuscate source code to protect intellectual property, and help gather source code metrics for source code [...]
batファイルでjavascriptコード圧縮
javascriptを書いてると、圧縮してあげたくなります。
Makeを利用したJavaScriptファイルの結合・圧縮
がとってもスマートなのだけれど、Windows環境だしMakefile手書きしたこと無いので、
bat（バッチ）ファイルで。
PLAIN TEXT
CODE:
set u=union.js
set c=comp.js
del %u%
del %c%
copy *.js %u% /B
java -jar custom_rhino.jar -c %u%> %c% 2>&1
1. これをjsファイルのあるフォルダに保存して compressjs.bat とかって名前付けて保存
2. custom_rhino.jarをダウンロードして同じフォルダに保存（JavaRuntimeは入れておく）
3. batファイルをダブルクリック
4. フォルダ内の.jsファイルを union.js にまとめた後、圧縮してできた comp.js が最終的なコード。
jsファイルのあるフォルダがちらばってる場合には、こんな感じ（'+'区切りでパスをつなぐ）。
PLAIN TEXT
CODE:
copy *.js %u% /B
↓
copy js1\\myjs.js+js2\\myjs2.js %u% /B
さらに、CSSファイルを保存すると同時にブラウザをリロード にならって秀丸の保存にフック(?)できると快適！
javascript圧縮エンジンは Dojo’s Compressor
日本語について。
Makeを利用したJavaScriptファイルの結合・圧縮 では
Dojo's Compressorでは日本語文字列はうまく扱えないようなので、日本語文字列は別ファイルに記述する必要がある。
って書いてあるけれど改善されたのか、問題無し（圧縮前はUTF-8で保存した状態で確認）。
ただし、「\u7e3a\uff7e\u7e3a\ufffd」になって日本語は逆に容量増えちゃいますが。
いまいちコード削減量が大した事無かったのと、
使わせてもらっているjavascriptライブラリの権利周りをそのままにしておきたいので、
とりあえず未採用...
それより、ライブラリのうち未使用の関数を省くようなの、欲しいな。
ブロック要素の中で滑らかスクロールする方法（javascript）2
昨日の ブロック要素の中で滑らかスクロールする方法（javascript） はつくってて楽しかった♪
Flashアプリとかつくる人にとっては当たり前な気がしますが。
usage：
http://slightlyblue.com/lab/t20060827/smoothscroll.js を読み込んで、
SmoothScroll.scrollTo( 'target id', 'parent id', options);
'parent id' はスクロールしようとしているブロック要素のid
'target id' は 'parent id'ブロック内にあるスクロール目標（=スクロール後にブロックの一番上に表示させたい行）のid
options は { time : 500, unit : 50 } 等と指定する
options.time は スクロール完了までの時間
options.unit は スクロール完了までに何ms単位で細かくスクロールするか
映画のフレームレート：24fps(40ms/frame)が映像を滑らかに見せるぎりぎりのラインだと思うので、それくらいを目安に。
point1：
滑らかなスクロールは、
$('parent id').scrollTop を options.unit 毎に更新することで実現します。
更新毎の移動量は、線形に漸減する方式になっています。
目標の距離に対して、options.time / options.unit 回に分けてスクロールするので、
目標の距離 / ( options.time / options.unit ) だけ一度に動かすと、速度変化は起きません。
線形に漸減させるためには、
一回の移動量 = 目標の距離 / ( options.time / options.unit ) * 2
x2すればいいのです。
この三角形を意識すれば簡単。
4分の1円形状に速度が落ちていったらかっこいいかな、なんて考えたりすると楽しい。。
point2：
もうひとつのポイントは、IE/Firefoxの違い
MSDN Home [...]
ブロック要素の中で滑らかスクロールする方法（javascript）
ブロック要素の中で滑らかスクロールする方法（javascript）
IE,Firefoxのみで動作確認（IE追加@2006/08/27）
気持ちいいインターフェース。
Scriptaculous.Effects.ScrollTo をHackする方法もあるけれど、重いので自前で。
明日解説するかも。
a
b
c
d
e
f
g
h
[i]
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
[z]
コード：
PLAIN TEXT
CODE:
javascript：
var SmoothScroll = {};
SmoothScroll = {
targetScrollTop : 0, // we're gonna make the $(parentid).scrollTop -> targetScrollTop
dist : 0,
timer : 0,
count : 0,
parentid : 0,
lastDist : 0,
//speedStore : [], // for debug
options : {},
defaultOptions : {
time : 1*1000, // [ms]
unit : 50 // [ms]
},
scrollTo : function( element, parent, options ){
this.options.time [...]
Flickr Color Selectr
Flickr Color Selectr
つくってみました。
Flickrから、CreativeCommonsのライセンスの付いた、色の似た画像をとってきます。
これは楽しいです。
既出なのは承知で。画像を使ったWEBアプリの練習台。
AJAX的な画面遷移、星を使ったレイティング辺り、今風の王道かしら。
YUIのスライダー＋LyaseView Javascriptテンプレート＋Prototypeフレームワーク＋FlickrAPI＋MySQL＋Perl＋Image::Magick＋私。
どうぞ。
AJAX的 旬レシピ検索
素材が料理の限界を規定する。
なので、その時最もおいしい素材を求めることは、おいしさの探求者として、一料理人として当然のこと。
というわけで、
旬レシピ http://slightlyblue.com/recipe/
公開です。
今日なにを作ろうか。
レシピを決めるまでには、2つのステップがあると思う。
1. なに食べようか。
2. どうやってつくろうか。
世の中には、両方詰め込んでごちゃごちゃしてるレシピサイトが山ほどあるように感じます。
旬レシピは、1.の方に重点を置いています。
シンプルな、直感的なインターフェースで、
食感をそそるレシピを見つけてください！
ゆっくりと調べてきたいくつかの技術を寄せ集めてつくっています。
・複数月選択インターフェース by Javascript,CSS
・javascriptテンプレートエンジンまとめ::lyase_view
・Prototype Window Class
・prototypeフレームワーク
複数月選択インターフェース by Javascript,CSS
今つくっているなにかのために、
月を選択するインターフェースが必要なので、作ってみました。
滑らかで自然かな、と。
・単月の選択も
・複数月の選択も
・年を越えた複数月の選択も
できる直感的なI/Fかな、と。
複数月選択インターフェースdemo
prototype.js と、以下の3ファイルを同フォルダに入れれば動作します。
index.html
selectmonth.js
selectmonth.css
lightbox v2.02を参考にして初Javascriptライブラリをつくってみました。
Lyase_Viewで405MethodNotAllowedと言われたら
javascriptテンプレートエンジンまとめのうち、Lyase_Viewを使って遊んでいます。
ちょっとはまった話。
PLAIN TEXT
CODE:
var rendered = Lyase.View.render({file:"./images.jhtml"}, yresult );
こんなふうにテンプレート使ってみてたら、
"405 Method Not Allowed"
というhttpエラーが。
そんなエラー見たこと無かったので調べてみると、
images.jhtml に対してPOSTメソッド使っちゃだめですよ、という感じらしい。
lolipopのapacheの設定でしょう、拡張子で制限かけてそうです。
回避はこんな。
88行目を
PLAIN TEXT
CODE:
before:
template = (new Ajax.Request(options.file,{asynchronous : false})).transport.responseText;
after:
template = (new Ajax.Request(options.file,{asynchronous : false, method:'get'})).transport.responseText;
prototype.js のAjax.RequestってデフォルトPOSTメソッド使うんですね。知りませんでした。
javascriptテンプレートエンジンまとめ
ちょっとjavascriptのテンプレートエンジンの調査・・・
ご紹介とテンプレートのコーディングスタイル：
ajax pages
PLAIN TEXT
CODE:
<% for ( i=0; i<5; i++ ) { %>
Hello World
<% } %>
TrimPath
[code]
<br /> Hello ${customer.first} ${customer.last}.<br /> Your shopping cart has ${products.length} item(s):</p> <table> <tr> <td>Name</td> <td>Description</td> <td>Price</td> <td>Quantity & Alert</td> </tr> <p> {for p in products}</p> <tr> <td>${p.name|capitalize}</td> <td>${p.desc}</td> [...]
Lightbox JS v2.02のコメント/タイトル欄
またまたLightboxJSv2.02ねた。
ギリシャ&ドイツ写真＠2003秋
で、初めてLightboxでオーバーラップ表示した画像の下にある
コメント（タイトル?）欄を使ってみました。
書式が小さなフォントのboldだったので、
見やすくなるようにいじってみました。
lightbox.css のline.68辺り
PLAIN TEXT
CODE:
pre:
#imageData #caption{ font-weight: bold; }
aft:
#imageData #caption{
font-size: x-small;
}
ちなみにMovable Typeのエントリー投稿画面での入力の仕方memo
ギリシャ&ドイツ写真＠2003秋
のエントリーは以下のように書いてます。
1/32
成田発アエロフロート便モスクワ経由アテネ着早朝
そのまま朝の便でミコノス島へ
フェリーを降りて拉致られるようにして着いた宿が
ここ
部屋の窓からの景色。
Oh, yeah!