[ カテゴリー » 開発日誌 ]

window.onloadの代替スクリプトその2

category-icon

 以前に、window.onloadの代替スクリプトGの記事を書いていたんですが、今はちょっと違ったスクリプトになっているので、この辺で、まとめもかねてメモを。

 今ではどのJavaScrptライブラリーも、画像も含めたページ読み込み完了まで待って、つまりwindow.onloadのタイミングで初期化関数を走らせるなんてことはせずに、もっと早い段階、つまりブラウザがDOMの構造を把握してパースしたタイミングを見計らって、初期化関数を実行するようにしています。Firefox、Operaでは、ブラウザ側がDOMContentLoadedというイベントハンドラを用意してくれているので、これを使います。Safariがこれを採用するのも時間の問題だろな、と前々から思っていたんですが、昨日、Safari最新版(3.1.1)も対応しているっぽいことに気が付きました。こういうスクリプトLink を書いて、イベントの発火順序を調べていたんですが、何気にSafariで動いているんでちょっとビックリしました。

 イベントの発火順序を調べる→http://p2b.jp/demo/events-order.phpLink

 IEに関しては、DOMContentLoadedというイベントハンドラはないので、以前から色々なアプローチが取られてましたが、今ではbase2Link のDean Edwardsも、jqueryLink のJohn ResigもDiego Periniが見つけたdoScrollLink を採用しています。確かに、これでも良いのですが、自分は天の邪鬼なので、HTCファイルでondocumentreadyを監視するというアプローチにしています。上に挙げたイベントの発火順序を調べるページの結果を見ると、IEに関しては、次のようなイベント順位で実行されてます。

  1. oncontentready     /* この時点でDOMのパースが終了 */
  2. deferred script      /* defer指定された外部スクリプトが実行される */
  3. ondocumentready    /* 次にHTCでのこのイベント。oParts.jsではこの時点で初期化。*/
  4. doScroll         /* 次にdoScroll */
  5. window.onload     /* 最後にこれ */

 このサイトのように、ソースをハイライト表示するスクリプトなどを使ってる場合は、数ミリ秒でも早くハイライト関数を起動させたいので、ondocumentreadyのタイミングで実行させてます。doScrollのタイミングでも良いんですが、十数ミリ秒程度遅れるんですよねぇ。oncontentreadyが一番早いですが、極々まれにこれが評価されないことがあるので、確実なondocumentreadyにしてます。ondocumentreadyとかoncontentreadyってBehavior絡みでしか使えないのが玉に瑕です。普通のイベントハンドラとして使えるようにしてくれれば良いのに、マイクロソフトさん。

 というわけで、ppBlogで使っているJSライブラリ oParts.jsLink での初期化関数は以下のような感じになってます。

oParts.start = function(F){
  if(client.Gecko || client.Opera || client.Safari){
   document.addEventListener('DOMContentLoaded', F, false);
  } else if(client.MSIE){
   $IEHTC = document.documentElement.addBehavior('js/ie.htc');
  } else o(window).on('load', F);
};

 SafariでもDOMContentLoadedが使えるようになったので記述が少なくて良いですね。IE向けのie.htcファイルの中身は以下のような感じ。

<public:attach
  event="ondocumentready"
  onevent="oParts.callee[oParts.callee.length-1]();
           document.documentElement.removeBehavior($IEHTC);
           $IEHTC=null;" />

 ちなみにイベント発火順位を調べるスクリプトですが、以下のように指定すると、このサイト以外のページも読み込めます。Yahoo!の例を挙げておきます。

http://p2b.jp/demo/events-order.php?site=yahoo.co.jpLink

 余談ですが、jquery-1.2.3のテストをしていて、気になった点がありました。以下のようなスクリプトを書くと、$()関数がwindow.onloadの後にしか実行されません(IE7の場合)。jqueryに関しては素人なので使い方が間違っているのかもしれませんが、非常に簡単な例なので気になります。

<script type="text/javascript">
  window.onload = function(){
   document.getElementById("test").innerHTML = '<p>window onloaded!</p>';
  }
  $(function(){
   alert($("#test").html());
  });
</script>

 実際の実行サンプルLink 。FirefoxとIE7で挙動が違います。Firefoxでは意図したように、window.onloadよりも先に$()が評価され、<p>original</p>とアラート表示されますが、IE7ではなぜか、window.onloadに割り当てた関数が先に実行されて、<p>window onloaded!</p>って表示されるんですよねぇ。何でかなぁ。doScroll絡み?

 

— posted by martin at 05:08 pm   commentComment [0]  pingTrackBack [0]

アップロード出来る画像のサイズ

category-icon

 3MB超の画像をアップしてみます。()元の画像サイズが大きいので、回線が貧弱だと、クリックして元の画像を表示させるのに時間がかかります。
Tamuro1
福岡の前原駅の近くにある「たむろ」。出国する前に先生方と。美味しかったなぁ。

 アップロードするのに、こちらの回線では2分弱かかりました。

 昨年の9月末に、アップできる画像の上限を可変的に扱うスクリプトを書いてたはずでしたが、これがローカルのテスト環境でのutils_admin.phpや配布版にも反映されてませんで。ローカルの別のテスト環境のディレクトリにあるutils_admin.phpにその記述を見つけました。具体的には、サムネイル画像を生成するcreate_thumbnail()関数内にその記述がありますが、動的に、アップされた画像ファイル処理に必要なメモリを取得して、一時的にサーバーのメモリ容量を増やす方法です。PHP.NETのユーザーメモにあったものです。たった数行の記述を加えるだけですが、これでかなりのサイズの画像ファイルをアップロードすることが出来ます。デジカメが高解像度になって、写真1枚のファイルサイズが1MBを超えるものが当たり前になってるので、ブログの方もこれに合わせないとですね。


Tamuro2
同じくたむろにて。これはマグロの頭だったかな。とにかくでかかった。左は自分の手。大きい方なんだけど。更にでかい。

Tamuro3
個人的には、にぎりは「しゃり」が命。ねたがいくら優れていても土台が旨くないと台無しになってしまう。

 ちなみに加えたコードは以下のようなやつです。

 $fudgeFactor = 1.7;
 $memoryNeeded = round(($info[0] * $info[1] * $info['bits'] * $info['channels'] / 8 + Pow(2, 16)) * $fudgeFactor);
 $memoryLimit = 8 * 1048576;
 if(memory_get_usage() + $memoryNeeded > $memoryLimit){
  $newLimit = ceil((memory_get_usage() + $memoryNeeded) / 1048576);
  ini_set('memory_limit', $newLimit.'M'); /* 新しく取得したメモリ量を割り当てる */
 }

追 記

 いつからかそうだったのか知りませんが、Vista Sp1のIE7上で、いつの間にか写真をお洒落に見せるスクリプトのphotoeffect.jsが動いてないのを今日発見しました。VML関係のセキュリティーアップデートで動かなくなったのか理由は定かではありませんが、色々試した結果、

<v:image src="" /> で画像を呼び込むのはダメで、<v:rect><v:imagedata src="" /></v:rect> だと上手く行くようです。なので、久しぶりにphotoeffect.jsもアップデート。ついでに、この効果を施した画像には、photo-canvas というクラス名を付けるようにしました。これで、スタイルシートで、これに対する画像の説明(キャプション)にCSSを適用することが出来ます。

.photo-canvas div.photo-caption { margin: -20px 5px 30px 5px; }

みたいに。


— posted by martin at 03:41 am   commentComment [7]  pingTrackBack [0]

pettieSyntaxの微調整とか

category-icon

 こんばんは、martinです。JavaScript単体で稼働するソースハイライト表示用のスクリプトpettieSyntax.jsですが、スタイルシートのクラス指定に対応したバージョン(pettieSyntax-class.js)も作成してみました。と、同時に正規表現の微調整をしています。一応、CSSソースのハイライトにも対応していますが、CSS3のセレクタLink とかは何でもありの状態なので、まぁ抜けがあったりするかも知れませんが、そこまで完璧を求めていないので。ちなみに、CSS3のセレクタは、具体例で挙げると以下のような感じです。

a[rel="external"] { /* REL属性がexternalなら外部アイコンの背景を付ける */
  padding-right: 5px;
  background: url(Images/external-icon.png) no-repeat right center;
 }
p[class~="foo"] { /* クラス名にfooが含まれていれば */
  margin: 0;
  padding: 0;
}
a[href$=".pdf"] { /* リンク名が.pdfで終わっていれば */
  background: url(Images/pdf.png) no-repeat right center;
}
a[hreflang|="en"] { /* リンク要素のhreflang属性がenで始まっていれば(enとかen-USとか) */
  background: url(Images/english.png) no-repeat right top;
}
div p:nth-child(2n+1) { /* DIVの子孫P要素で奇数番目のもの */
  background: ivory;
}

 別件ですが、JavaScriptライブラリのoParts.jsは、このCSS3のセレクタにも対応していて、例えば、

o('div:nth-child(2n+1)')

とすれば、奇数番目にあるDIV要素を一気に取得することが出来ます。お遊びですが、

<button onclick="o('ul li:nth-child(2n+1)').css('background:red');">
CLICK ME!
</button>

というコードを記述してみます。期待するのは、「UL要素の子孫のLI要素で奇数番目のやつの背景を赤にする」という動作です。

 syntax.jsの最新版とクラス対応版、およびそのCSSファイルを添付しておきます。ハイライト用のCSSファイルは、テーマのCSSファイルに追加しても良いでしょうし、以下のようにCSSファイルの中で呼び出すことも出来ます。

@import 'syntax.css';

 メンテナンスしやすいのは、上記のように別ファイルで用意しておくインポート方式でしょうか。

添付ファイル: syntax.jsattachedIcon  syntax-class.jsattachedIcon  syntax.cssattachedIcon 

 

— posted by martin at 09:37 pm   commentComment [0]  pingTrackBack [0]

pettieSyntaxがCSSに対応

category-icon

 ソースをJavaScriptでハイライト表示するpettieSyntaxLink ですが、CSSの表記にも対応しました。このせいでファイルサイズが3キロ弱になりましたが、まぁこの辺で落ち着くでしょう。

 色の指定をソースの上の方で、指定できるようにしてます。ソースを見ると、CSSの表記に対応した色指定だけ3色ありますが、これは1.タグ、2.CSSプロパティー(fontなど)、3.その実際の指定値 に対応しています。

var cssprops = ['indigo', 'slategray', 'indianred', /((?:[-#a-z0-9.,_* +:¥r¥n[¥]=]{2,}|[abipq*]))¥s*¥{¥s*[^}=]+?¥}/ig];

 実際のデモとして、このサイトのベーシックテーマに適用しているPREタグのCSS指定をば。

pre {
  font: 500 1em/1.4 "Consolas","Bitstream Vera Sans Mono","Lucida Console","Courier New",Verdana,Meiryo,monospace;
  background: #f6f6f9;
  border: double 4px #808080;
  border-width: 0 0 0 4px;
  margin: 1em auto;
  padding: 20px;
  width: 89%;
  height: 3em;
  color: #333;
  clear: both;
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 0.1px;
}
body[id=weblog] pre { /* IE6以外のモダンなブラウザ用 */
  overflow: auto;
  height: auto;
}

 こんな感じです。仕様上、PHPやJavaScript用キーワードの中途半端な対応と違って、CSSのあらゆるプロパティーに対応してると思います。最新版を添付しておきます。

添付ファイル: syntax.jsattachedIcon 

 


— posted by martin at 05:34 pm   commentComment [6]  pingTrackBack [0]

ソースコード表示用の軽いスクリプト:pettieSyntax

category-icon

 こんにちは。たまにはアップデート以外の記事も書きたいので。

 前々から思っていたのですが、このブログではPHPとかJavaScriptのソースを提示することがままあります。現状、モノクロの味気ないソースコードだったので、PHPマニュアルのユーザーノートLink にあるようなカラフルな色付けにしたいなと思っていたわけです。この手のことを実現するには大きく2通りのアプローチがあって、サーバー側でハイライト表示の処理をして読み込ませる方法と、もうひとつはクライアント側のJavaScriptに解析させてその場でハイライト表示させる方法です。前者の例だと、PHPライブラリではGeSHi - Generic Syntax HighlighterLink などがあり、後者だとグーグルのgoogle-code-prettifyLink が有名でしょうか。

 でも、この手のやつって、これようのCSSファイルも用意しないといけないし、ファイルサイズはでかいし、設置が面倒そうだなと。なので書いてみました。基本的に、自分用なのでPHPとJavaScriptの一部の関数しかサポートしていませんが、まぁ、要は見栄えを良くすることが目的なので、すべてを網羅する必要はないと考えてます。PHPの組み込み関数なんて山ほどありますし。おかげで随分とサイズが小さいスクリプトになりましたが、それっぽく見えます。

 特徴としては、このスクリプト単体で動作可能ということです。他の見栄えのためのCSSファイルとかは必要ないです。記事の中のPREタグを見つけたら、その中身をハイライト表示します。初めは、PREタグに特定のクラス名を付けて、それを認識させようかと思っていましたが、そうすると過去の記事の書き換えをしないといけないし、どうせPREタグに書くのはソースコードぐらいだろうと割り切り、PREタグに絞りました。早速ですが、そのソースコードをこのスクリプトを使って表示してみます。

/*
 Lightweight syntax-analyzing script
 Copyright: modified BSD license 2008 martin
   version: 20080803.204553
*/

function pettieSyntax(){
 var cssprops = ['#c03', '#003366', '#636', /((?:[^{;_<]{2,}|[abipq*]))¥s*?¥{(¥s*[^}=_[¥]?<>]+?)¥}/ig];
 var etcetera = ['#c33', /( > | < )/g];
 var operants = ['green', /(¥/¥/¥-¥->|¥+¥+|¥-¥-|!?===?|<=|>=|=>|¥+=|¥-=|!=|&&|¥|¥|| = )/g];
 var variants = ['#669', /(¥$¥w+?¥b|var¥b¥w+¥b|@)/g];
 var htmltags = ['navy', /(<¥/¥w+?>|<¥w+|<¥?(?:xml|php)|(?:¥?|¥/)>|>)/g];
 var keywords = ['blue', /(¥b(?:alert|[Aa]rray|break|case|catch|class|charset|continue|Date|default|define|delete|do|else|false|FALSE|for|function|global|i[fn]|instanceof|new|null|Object|return|script|src|type|switch|this|throw|document¥S|TRUE|true|echo|try|typeof|var|void|while|window¥S|with|Location|version|encoding)¥b)/g];
 var decimals = ['#c69', /([¥s:¥/¥(,[+;."=>])(¥-?¥d+(?:¥.¥d+)?)(%|px|pt|em)?/g];
 var equipped = ['#036', /([¥.¥s(@>])([^'"¥(¥n=¥s<>¥/]+?)([¥( ])/g];
 var oneliner = ['#906', /('[^'¥r¥n]+?'|"[^"]*?"|<![^¥r¥n]+?¥-¥-.*?>)/g];
 var regulars = ['tomato', /([¥s(])(¥/[^¥r¥n]+?¥/)([igmy¥s¥);.])/g];
 var enoparts = ['indigo', /(¥b(?:o|oParts)¥b|¥.(?:away|moveTo|sizeTo|dimension|target)¥(¥)|¥.(?:loadScript|evt|metrics|start|css|view|each|sib))/g];
 var comments = ['#093', /([^:]|)((?:¥/¥/|#)¥s+[^'¥r¥n]+(?:¥r?¥n?|$)|¥/¥*[¥s¥S]+?¥*¥/)/g];
 var omitspan = function(m){ return m.replace(/<span[^>]*?>/ig, '').replace(/<¥/span>/ig, '');}
 var targets = document.getElementsByTagName('PRE');
 if(targets){
  for(var t, i = 0; t = targets[i++];){
   var c = t.innerHTML.replace(/<(?:span|code)[^>]*?>([^<]+?)<¥/(?:span|code)>/ig, '$1').replace(/¥t/g, '').replace(/'/g, ''').replace(/"/g, '"');
   if(/<(?:a |img )/i.test(c)) continue;
   c = c.replace(cssprops[3], function(A, B, C){ return /:/.test(C) ? '<span style=¥tcolor:'+cssprops[0]+'¥t>'+B+'</span>' + A.replace(B, '').replace(/([^:{]+?):([^;]+?);/g, '<span style=¥tcolor:'+cssprops[1]+'¥t>$1</span>:<span style=¥tcolor:'+cssprops[2]+'¥t>$2</span>;') : A;});
   c = c.replace(etcetera[1], '<span style=¥tcolor:'+etcetera[0]+'¥t>$1</span>');
   c = c.replace(operants[1], '<span style=¥tcolor:'+operants[0]+'¥t>$1</span>');
   c = c.replace(variants[1], '<span style=¥tcolor:'+variants[0]+'¥t>$1</span>');
   c = c.replace(htmltags[1], '<span style=¥tcolor:'+htmltags[0]+'¥t>$1</span>');
   c = c.replace(keywords[1], '<span style=¥tcolor:'+keywords[0]+';font-weight:bold¥t>$1</span>');
   c = c.replace(equipped[1], function (A, B, C, D){return B + '<span style=¥tcolor:'+equipped[0]+'¥t>' + C + '</span>' + D;});
   c = c.replace(enoparts[1], '<span style=¥tcolor:'+enoparts[0]+';font-weight:bold;¥t>$1</span>');
   c = c.replace(decimals[1], '$1<span style=¥tcolor:'+decimals[0]+'¥t>$2$3</span>');
   c = c.replace(regulars[1], function (A, B, C, D){return B + '<span style=¥tcolor:'+regulars[0]+'¥t>' + omitspan(C) + '</span>' + D;});
   c = c.replace(oneliner[1], function (A, B){return '<span style=¥tcolor:'+oneliner[0]+'¥t>' + omitspan(B) + '</span>';});
   c = c.replace(comments[1], function (A, B, C){return B + '<span style="color:'+comments[0]+'">' + omitspan(C) + '</span>';});
   c = c.replace(/¥t/g, '"');
   if(/*@cc_on!@*/false){
    t.outerHTML = '¥n<pre>' + c + '</pre>¥n'; /* IEの改行対策です */
   } else t.innerHTML = c;
  };
 }
};

 ファイルサイズは2キロ前後と小さいです。ppBlogで使うのであれば、とりあえずこのファイルをjsディレクトリにアップロードして、後は、lib.jsの最初の方で、このスクリプトを以下のように呼び出します。

oParts.loadScript('js/syntax.js');

次に同じlib.jsの下の方にある、oParts.start関数内で、このpettieSyntax()を呼び出せばOKです。

if(typeof pettieSyntax != UD) pettieSyntax();

 コードを見れば分かりますが、ハイライトの色はSPANタグ内でスタイルシート指定してますので、この部分を好きな色に変えれば良いです。あと、強調したいキーワードを追加したいときも、ソース内の該当箇所に追加していけばよいです。

 ppBlog使用前提なら、上のような設置になりますが、純粋に単体で動かしたい場合は、外部スクリプトとして、

<script type="text/javascript" src="path/to/syntax.js"></script>

みたく読み込ませて、ページ読み込み完了後にpettieSyntax()を呼べば良いです。

 まだろくに動作検証していないのですが、興味がある方はどうぞ。syntax.jsと、あと、ppBlogの設置例としてlib.jsを添付しておきます。

添付ファイル: syntax.jsattachedIcon  lib.jsattachedIcon 

 


— posted by martin at 01:12 pm   commentComment [1]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0076 sec.
prev
2021.4
next
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30