ようへい

2013年1月30日水曜日

[SyntaxHighlighter] Windowsバッチファイル用Brush

Windowsバッチファイル用のSyntaxHighlighter用Brushを作ってみましたので、公開します。
Brushのエイリアスは、batcmdcomです。
このBrushを使うと、Windowsバッチファイルが以下のようにハイライトされます。
@echo off
setlocal enabledelayedexpansion
for /F "usebackq delims=" %%A in (`reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall"`) do (
  set PDN=
  call :findPDN %%A
  rem ParentDisplayNameが見つかった場合は、ParentDisplayNameへのパッチファイルとみなし、一覧出力しない
  if "!PDN!" EQU "" call :echoDN %%A
)
setlocal disabledelayedexpansion
pause
exit

:findPDN
rem find ParentDisplayName
for /F "tokens=2,*" %%B in ('reg query "%*" /f ParentDisplayName /c /e ^| findstr "ParentDisplayName"') do set PDN=%%C
exit /b

:echoDN
rem find DisplayName
for /F "tokens=2,*" %%B in ('reg query "%*" /f DisplayName /c /e ^| findstr "DisplayName"') do echo %%C
exit /b
以下で実際に確認することが可能です。
SyntaxHighlighter用タグ 変換/生成ツール - ログろいど

ダウンロード

非圧縮版(2.52KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushBat.js
圧縮版(1.98KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushBat.min.js
関連記事

2013年1月28日月曜日

Firefox で BFCache によるキャッシュを無効化する方法

発端

Firefox で開発をしていると、サーバのJavaScriptを変更してもFirefoxがキャッシュしているJavaScriptを使用してしまっていたりすることがある。
これがJavaScriptだけならまだCtrl+Shift+Rで強制読み込みさせて回避できるのだが、JSONの戻りまでキャッシュされてしまう事がある。
キャッシュされたリクエストをFirebugのネットタブで表示すると、以下のようになる。
※google.co.jpを表示した例
Firefox で BFCache によるキャッシュを無効化する方法
レスポンスヘッダを見ると、以下のメッセージが
キャッシュから直接リクエストが解決されたため、サーバからのレスポンスはありません。キャッシュされているレスポンスについては下を参照してください。
これは、Firefox 15から搭載されている、BFCache(Back-Forward Cache)という機能によるものだ。
Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache("Back-Forward Cache" のこと)と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。
Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。
  • ページが unload ハンドラを使用している
  • ページが "cache-control: no-store" をセットしている
  • ページが "cache-control: no-cache" をセットしていて、サイトが HTTPS である
  • ページが完全にはロードされないまま、ユーザがそのページから去るナビゲートをする
  • トップレベルのページにキャッシュ不可能なフレームがある
  • ページがフレーム内にあり、ユーザがそのフレーム内に新しいページをロードする(この場合、ユーザがそのページから去るナビゲートをするとそのフレームに最後にロードされたコンテンツがキャッシュされる)
この新しいキャッシュ機能により、ページロードの挙動が変わります。ウェブ作者は次のことをしたいと思うことがあるでしょう。
  • ナビゲートされたことがあるページであることを知ること(そのページがユーザのキャッシュからロードされるとき)
  • ユーザがそのページを去るときのページの挙動を定義すること(ページがキャッシュされるようになっている間)
ブラウザの 2 つの新しいイベントによってウェブ作者はそのどちらもできるようになります。
JSONのレスポンスが保存されるのは、以下の記載によるものであると思われる。
ウェブページの標準的な挙動は次のとおりです。
  1. ユーザがページにナビゲートする。
  2. ページロード時にインラインスクリプトが実行される。
  3. ページがロードされると onload ハンドラが実行される。
4 ステップ目があるページもあります。ページが unload ハンドラを使用していると、ユーザがそのページから去るナビゲートをするときにそれが実行されます。unload ハンドラが存在しているとそのページはキャッシュされません。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません(ステップ 2 および 3)。ほとんどの場合、これらのスクリプトの効果が保存されているためです。

BFCache を無効にしてみる

開発を行う上で、JavaScriptや、JavaScriptの結果、JSONがキャッシュされてしまうのはかなり迷惑。
という事でBFCacheを無効にしてみます。
※ブラウジングのパフォーマンスに影響する可能性があるため、開発用のプロファイル等を作成し、そのプロファイルでのみBFCacheを無効にする事をお勧めします。
  1. about:configにアクセスする
  2. network.http.use-cacheと入力する
  3. 値をfalseに設定する
  4. Firefoxを再起動する
Firefox で BFCache によるキャッシュを無効化する方法

確認

google.co.jpにアクセスしてみる。
Firefox で BFCache によるキャッシュを無効化する方法
何回もページをリクエストしてみたが、Firefoxでキャッシュが行われないようになった。
関連記事

2013年1月25日金曜日

[SyntaxHighlighter] JavaScript用Brush

SyntaxHighlighterにデフォルトで入っているBrushに、予約オブジェクトを追加したBrushを作りました。
document.title="hoge";
window.open("http://example.com");
console.info("info message");
location.href="http://example.com";
以下で実際に確認することが可能です。
SyntaxHighlighter用タグ 変換/生成ツール - ログろいど

ダウンロード

共に、3.0.83専用です。
他のバージョンでの動作は未確認です。
非圧縮版(1.80KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushJScript
圧縮版(1.32KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushJScript.min.js
関連記事

[SyntaxHighlighter] jQuery用Brush (jQuery 1.9対応版)

jQuery 1.9対応のSyntaxHighlighter用Brushを作ってみましたので、公開します。
Brushのエイリアスは、jqjqueryです。
このBrushを使うと、jQuery APIが以下のようにハイライトされます。
$(document).ready(function(){
  // #hogeに#fugaを追加
  $('#hoge').append($('<div>').prop('id','fuga').attr('key','bar').text('baz'));
  $('input[type="radio"]:checked').click(
    function(){
      alert($(this).val());
      $('#hogehoge').addBack('.hoge').text($(this).val());
    }
  );
});
jQuery 1.9時点でdeprecated/removedとなったメソッドは色を分けています。
1.9で削除された.live().die()メソッドの例
$('.live').live('click', liveFunction);
$('.live').die('click', liveFunction);
また、deprecated/removedとなっていても、同名のメソッドがdeprecated/removedではない場合は、通常のjQuery APIとしてハイライトされます。
.toggle()メソッドの例
$('.target').toggle();
$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});
以下で実際に確認することが可能です。
SyntaxHighlighter用タグ 変換/生成ツール - ログろいど

jQuery 1.9でのjQuery APIに対応しています。
1.9以下のバージョンでも正常にハイライトされると思います。
ただし、前述のとおり、jQuery 1.9時点でdeprecated/removedとなったメソッドは色分けされます。

ダウンロード

共に、3.0.83専用です。
他のバージョンでの動作は未確認です。
非圧縮版(4.45KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushJQuery.js
圧縮版(3.30KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushJQuery.min.js
関連記事

2013年1月24日木曜日

jQuery 1.9に移行してハマったこと

jQuery 1.9へのアップグレードガイドはこちら (英語)
jQuery Core 1.9 Upgrade Guide | jQuery
http://stage.jquery.com/upgrade-guide/1.9/ そのうち(機械翻訳を駆使して)翻訳するかもしれません。

TypeError: $(...).live is not a function

jQuery 1.9では.live()が削除されている。同じように、.die()も削除されている。
.live()を、jQuery 1.9で使用しようとすると、以下のようなエラーが出力される。
TypeError: $(...).live is not a function
.live().on()に、.die().off()にそれぞれ置き換えられている。
以下のように書き直すことで、1.9へ移行する事ができる。
$('.live').live('click', liveFunction);
$('.live').die('click', liveFunction);
$(document).on('click', '.live', liveFunction);
$(document).off('click', '.live', liveFunction);

Error: Syntax error, unrecognized expression

$()にHTML文字列を渡して解析していたのだが、jQuery 1.9ではエラーになった。
jQuery 1.9からは、$()に渡す文字列の最初が<以外の場合はセレクタとしてみなされるようになったためだ。
HTML文字列が<で始まっていない場合、以下のようなエラーが出力される。
Error: Syntax error, unrecognized expression:
この場合、$.parseHTML()を用いることで解析することが出来る。
以下のように書き直すことで、1.9へ移行する事ができる。
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($(html_string_1).get(0));
console.dirxml($(html_string_2).get(0));
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($($.parseHTML(html_string_1)).get(0));
console.dirxml($($.parseHTML(html_string_2)).get(0));
あれ、思ったような結果にならない・・・
という事でこんな感じにしました。
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($($.parseHTML(html_string_1)).get(0));
console.dirxml($($.parseHTML(html_string_2.trim())).get(0));
または
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($($.parseHTML(html_string_1)).get(0));
console.dirxml($($.parseHTML(html_string_2.replace(/^[^<]+/,''))).get(0));
もうちょっと調べる必要があるな・・・
関連記事