JSONがinvalidでもjQuery.getJSON()はエラーを吐かない
記事のタイトルで言いたいことは言い切っちゃているんですけれども。
jQuery 1.4.2 の $.getJSON() 、もしくは $.ajax() でリクエストしたJSONファイルがinvalidだった場合、エラーは吐きませんがコールバック関数が実行されません。
[jQuery] getJSON callback not firing? - jQuery Forum
なんでinvalidなのかと調べたところ・・・、JSONでは文字列は必ずダブルクォートで囲まないといけないことが判りました。シングルクォートではダメです。それからオブジェクトリテラルの左のオペランドにも、ダブルクォート省略不可！あー、なんか初歩的なところでつまづいています。
A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes.
何しろエラーが出ないので、何が悪いのかわかりにくいです＞＜ これで2時間はハマってしまった・・・。。
iPhoneのiPodアプリ風見出しインターフェースをJSで作ってみた
昨日のSugamo.cssで発表したコネタをポストします。
デモ：iPhoneのiPodアプリ風のインターフェースを再現するJS
JSファイル：iPhoneのiPodアプリ風のインターフェースを再現するJS
これはiPhoneにプリインストールしてあるiPodアプリのインターフェースを再現するJavaScriptです。要jQuery。
iPodアプリで曲目リストやアーティストのリストを閲覧する際、「あ行」「か行」「さ行」みたいに並んでいるリストをスクロールしていくと、「あ行」のリストを見ているときは「あ」という見出しが画面上部に固定され、現在見ているリストがどの見出しに属するものなのかが見て分かるようになっています。つまり見出しがスクロールアウトされず、スクロールに着いてくる形になっているわけです。おそらく、一つのリストがとても長い場合は特に効果を発揮するかと思います。地味ですが確実にユーザビリティは向上するだろうという、粋な効果です。さすがApple。
何を言っているかよく分からない、という人はとりあえずデモを見てください・・・。
LightBox系スクリプト 16選
Lightbox系スクリプトの情報が一覧表になっているThe Lightbox Clones Matrixという素晴らしいサイトがあります。ここから一通り見て回って、自分なりに使えそうなものをピックアップしてみました。ほとんど勢いでまとめたものなので、情報としての正確性は低いかもしれませんが、ご容赦を。半分は自分用ってノリです。
自分はLightbox系のスクリプトを選ぶ時、そのサイトに予め組み込まれている（組み込む予定の）JSライブラリで使えるかどうかを基準に選ぶことが多いです。なので、必要とするJSライブラリ別にカテゴライズして並べています。
ライブラリ不要
Highslide JS
- 必要ライブラリ：
- -
- 対応形式：
- 画像、画像ギャラリー、インライン、インラインフレーム、Ajax、Flash
- 対象指定：
- class属性＆onclick属性
- ライセンス：
- CCライセンス 表示-非営利 2.5 一般
非商用：無償、商用-1サイト：29ドル、商用-無制限：179ドル - 備考：
- 表示コンテンツのドラッグ移動が可能。Inline／Ajax／Iframe表示時には右端ドラッグでサイズ変更が可能。
jQuery
FancyBox →オススメ
- 必要ライブラリ：
- jQuery、jQuery Easing（オプション）
- 対応形式：
- 画像、画像ギャラリー、インライン（Flashなど含む）、Ajax、Iframe
- 対象指定：
- jQueryセレクタ、rel属性（画像ギャラリー指定時）、class属性（インラインフレーム指定時）
- ライセンス：
- MITライセンス
- 備考：
- jQuery Easingプラグインなしだと、ズームアニメーション時のイージング効果がなしになる。
FancyZoom(jQuery)
- 必要ライブラリ：
- jQuery
- 対応形式：
- 画像、インライン（Flashなど含む）
- 対象指定：
- jQueryセレクタ
- ライセンス：
- 不明
- 備考：
- ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。
jQuery lightBox plugin →オススメ
- 必要ライブラリ：
- jQuery
- 対応形式：
- 画像、画像ギャラリー
- 対象指定：
- jQueryセレクタ
- ライセンス：
- ライセンス 表示-継承 2.5 ブラジル
- 備考：
- UIは本家Lightboxと全く同じ。裏の仕組みがjQueryで動くようにアレンジされたLightbox。jQueryセレクタの指定に複数要素が該当する場合、自動的に画像ギャラリーモードになる模様。本家Lightboxとは違って色々なパラメーターがあり、カスタマイズができる。
prettyPhoto
- 必要ライブラリ：
- jQuery
- 対応形式：
- 画像、画像ギャラリー、Flash、RealMedia、インラインフレーム
- 対象指定：
- rel属性、href属性のパラメータ、jQueryセレクタ、オプションでtitle属性
- ライセンス：
- CCライセンス 2.5
- 備考：
- 対応形式のメディアそれぞれを混合したギャラリー表示が可能。デフォルトのスタイルは黒いUI。
Prototype.js + script.aculo.us
FancyZoom
- 必要ライブラリ：
- Prototype.js、script.aculo.us
- 対応形式：
- インライン
- 対象指定：
- href属性
- ライセンス：
- 不明
- 備考：
- 対象のインラインコンテンツのIDをhref属性で指定できる・・・だけ？ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。
Lightbox2
- 必要ライブラリ：
- Prototype.js、script.aculo.us
- 対応形式：
- 画像、画像ギャラリー
- 対象指定：
- rel属性、title属性
- ライセンス：
- CCライセンス 表示 2.5 一般
- 備考：
- 元祖Lightbox。オプション設定などはないが、使い方は単純明快。
Lightview
- 必要ライブラリ：
- Prototype.js、script.aculo.us
- 対応形式：
- 画像、画像ギャラリー、Flash、QuickTime、Ajax、インラインフレーム、インライン
- 対象指定：
- class属性、title属性、rel属性
- ライセンス：
- 非商用の場合、CCライセンス:表示-非営利-改変禁止 3.0 Unported
商用の場合、CCライセンス:表示-改変禁止 3.0
有償。非商用（1ドメイン）：3$、非商用（制限なし）：$15、商用（1ドメイン）：49$、商用（制限なし）：$295 - 備考：
- 多機能Lightbox。有償だけあってクオリティは高いが、たくさんのオプションがあるので使いこなすのは骨が折れるかも。
ModalBox
- 必要ライブラリ：
- Prototype.js、script.aculo.us
- 対応形式：
- プレーンHTML（文字列）、DOMノード
- 対象指定：
- href属性、title属性、onclick属性
- ライセンス：
- 不明
- 備考：
- 画面上部からニョロっとオーバーレイボックスが出現する。導入説明が親切。
MooTools
ImageZoom
- 必要ライブラリ：
- MooTools
- 対応形式：
- 画像、画像ギャラリー
- 対象指定：
- rel属性、オプションでtitle属性
- ライセンス：
- CCライセンス 表示-継承 3.0 Unported
- 備考：
- 対応形式が画像のみと少ないが、ズームするアニメーションがお洒落。拡大状態を複数開けるのが個性的。
phatfusion →オススメ
- 必要ライブラリ：
- MooTools v1.11
- 対応形式：
- 画像、Flash、QuickTime、WindowsMedia、RealMedia、MP3、Ajax、インラインフレーム、インラインHTML
- 対象指定：
- スクリプト、rel属性、title属性
- ライセンス：
- MITライセンス
- 備考：
- 対応形式のメディアそれぞれを混合したギャラリー表示が可能。デフォルトのスタイルだとUIが黒い。この辺はスクリプト呼び出し時のオプションでカスタマイズ可能。多機能でクオリティ高し。
SexyLightBox
- 必要ライブラリ：
- MooTools
- 対応形式：
- 画像、画像ギャラリー
- 対象指定：
- スクリプト、class属性、rel属性、title属性
- ライセンス：
- MITライセンス
- 備考：
- 画面上部からビヨーンと登場するという、変わったアニメーションが特徴的。公式サイトの字が読めない。.meというドメインがモンテネグロのドメインなので、モンテネグロのサイト・・・？
Slimbox
- 必要ライブラリ：
- MooTools 1.2
- 対応形式：
- 対象指定：
- スクリプト、rel属性、title属性
- ライセンス：
- MITライセンス
- 備考：
- UIはLightboxと全く同じ。Slimというだけあってライトウェイトであることがウリらしい。スクリプトの書き方次第でダイレクトにSlimboxを呼び出すことも可能。jQueryバージョンもあるとのこと（http://www.digitalia.be/software/slimbox2）。
Smoothbox, Thickbox for mootools
- 必要ライブラリ：
- MooTools
- 対応形式：
- 画像、画像ギャラリー、インライン、インラインフレーム、Ajax
- 対象指定：
- class属性、title属性、href属性のパラメータ
- ライセンス：
- MITライセンス
- 備考：
- ThickboxのMooTool版。UIはThickBoxと同じ。IE8には非対応だった（オーバーレイ部分が真っ黒に）。
YUI
YUI Based Lightbox
- 必要ライブラリ：
- YUI
- 対応形式：
- 画像、画像ギャラリー
- 対象指定：
- スクリプト、id属性（img要素）
- ライセンス：
- CCライセンス 表示-継承 3.0 Unported
- 備考：
- コントロールパネルを表示されたり、画像のキャプションを入れるボックスを表示されたり。画像表示領域と、キャプションはドラッグで移動可能。
その他
Shadowbox.js
- 必要ライブラリ：
- 基本的には不要（※）
※JSライブラリ（Adapter）を先に読み込ませると自動的に感知して、それと一緒に動作するようになる（らしい）。Adapterとして使えるのは Prototype、jQuery、MooTools (requires 1.2 Core)、Dojo Toolkit、Yahoo! User Interface Library (requires yahoo-dom-event.js)、Ext (requires ext-core.js)。 - 対応形式：
- 画像、画像ギャラリー、イメージマップ、Flash、各種ムービー、インラインフレーム、インライン、フォーム等
- 対象指定：
- スクリプト、rel属性、title属性
- ライセンス：
- Shadowbox.js License
→有償。Single Developer: $20.00、Multiple Developer: $50.00 - 備考：
- 超高機能。アニメーションは控えめで上質感を感じさせる。スクリプト呼び出し時に引数として様々なオプションを指定可能。
LineNumberWriterを0.4にバージョンアップ
1年以上放置していたので今更感がありますが、LineNumberWriterをバージョンアップしました。今回から、変換対象のコード内でタグが使えるようになります。例えば以下のように、strong要素やspan要素などを挿入することが可能です。（※）
<strong>で囲んでみました
<span style="color:#F33;">で囲んでみました※もちろん(X)HTMLの文法的にcode要素に含められない内容（ブロック要素など）は含めちゃダメですよ。
今度Sugamo.cssという企画に参加することにしたので、何かプライベートワークをやっていかなきゃいけないような気になり、とりあえずコレのバージョンアップでも、と着手しました。
実は前からタグが使えるようにしたくてちょくちょくいじってはいたんですが、IEの独自仕様でまた色々とつまづいてしまい、挫折しちゃってたんです。でもまぁ最近、良いアイデアが浮かんだのでどうにか形になった、という。
[Memo]:visitedクラスを利用した行動ターゲティング広告
![はてなブックマーク - [Memo]:visitedクラスを利用した行動ターゲティング広告](http://b.hatena.ne.jp/entry/image/http://likealunatic.jp/2008/11/12_visitedlink.php "はてなブックマーク - [Memo]:visitedクラスを利用した行動ターゲティング広告")
とても興味深い内容だったのでメモ。
id:Hamachiya2さんのデモのソースを見るとCSSの:visited擬似クラスと、JavaScriptを併用した形で、動的にコンテンツを入れ替える方法が分かります。
まずCSSで:visited擬似クラスに別のスタイルを書いておいて
a {
display: block;
height: 22px;
overflow: hidden;
}
a:visited {
height: 16px;
}JavaScriptの以下のようなコードで、訪問の有無を調べています。
var defHeight = 22;
var visHeight = 16;
...中略...
// 引数にはa要素ノードを入れる
// その高さがデフォルトでない（既訪問リンク）ならtrueを返す
// その高さがデフォルト（未訪問リンク）ならfalse返す
function checkVisited(elm) {
return (elm.offsetHeight != defHeight);
}実行はwindow.onloadのイベントで。なるほど。
自らの意図しない情報が、このように簡単に取得されてしまうのかと思うと、気持ちが悪いな・・・と思うと同時に、簡単であるが故に防ぎようがないと思いました。