Category Archives: Web Design

電話番号入力フォームのmaxlength

Posted on by

次のような電話番号入力フォームは正しくできていると言えるでしょうか？

<input type="text" size="20" maxlength="4" value="" name="tel1" id="tel1" /> -
<input type="text" size="20" maxlength="4" value="" name="tel2" id="tel2" /> -
<input type="text" size="20" maxlength="4" value="" name="tel3" id="tel3" />

答えはNo。その理由は maxlength="5" にすべきだから、と職場のTDさんが教えてくれました。5桁の市外局番が存在するなんて、知らなかったです・・・。

LightBox系スクリプト 16選

Posted on by

Lightbox系スクリプトの情報が一覧表になっているThe Lightbox Clones Matrixという素晴らしいサイトがあります。ここから一通り見て回って、自分なりに使えそうなものをピックアップしてみました。ほとんど勢いでまとめたものなので、情報としての正確性は低いかもしれませんが、ご容赦を。半分は自分用ってノリです。

自分はLightbox系のスクリプトを選ぶ時、そのサイトに予め組み込まれている（組み込む予定の）JSライブラリで使えるかどうかを基準に選ぶことが多いです。なので、必要とするJSライブラリ別にカテゴライズして並べています。

ライブラリ不要

Highslide JS

Highslide JS

必要ライブラリ：
–
対応形式：
画像、画像ギャラリー、インライン、インラインフレーム、Ajax、Flash
対象指定：
class属性＆onclick属性
ライセンス：
CCライセンス 表示-非営利 2.5 一般
非商用：無償、商用-1サイト：29ドル、商用-無制限：179ドル
備考：
表示コンテンツのドラッグ移動が可能。Inline／Ajax／Iframe表示時には右端ドラッグでサイズ変更が可能。

iBox

iBox

必要ライブラリ：
–
対応形式：
画像、Ajax、インライン、Youtube動画などのムービー
対象指定：
rel属性
ライセンス：
無償
備考：
アニメーションがなく軽量。使い勝手はThickboxみたいな感じ。

jQuery

FancyBox →オススメ

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 lightBox plugin

必要ライブラリ：
jQuery
対応形式：
画像、画像ギャラリー
対象指定：
jQueryセレクタ
ライセンス：
ライセンス 表示-継承 2.5 ブラジル
備考：
UIは本家Lightboxと全く同じ。裏の仕組みがjQueryで動くようにアレンジされたLightbox。jQueryセレクタの指定に複数要素が該当する場合、自動的に画像ギャラリーモードになる模様。本家Lightboxとは違って色々なパラメーターがあり、カスタマイズができる。

prettyPhoto

prettyPhoto a jQuery lightbox clone

必要ライブラリ：
jQuery
対応形式：
画像、画像ギャラリー、Flash、RealMedia、インラインフレーム
対象指定：
rel属性、href属性のパラメータ、jQueryセレクタ、オプションでtitle属性
ライセンス：
CCライセンス 2.5
備考：
対応形式のメディアそれぞれを混合したギャラリー表示が可能。デフォルトのスタイルは黒いUI。

ThickBox

Thickbox

必要ライブラリ：
jQuery
対応形式：
画像、画像ギャラリー、インライン、インラインフレーム、Ajax
対象指定：
class属性、title属性、href属性のパラメータ
ライセンス：
MITライセンス
備考：
jQueryを使うLighbox系スクリプトの代表的な存在。多様な形式に対応。アニメーションはしないが、その分軽快に動作する。

Prototype.js + script.aculo.us

FancyZoom

必要ライブラリ：
Prototype.js、script.aculo.us
対応形式：
インライン
対象指定：
href属性
ライセンス：
不明
備考：
対象のインラインコンテンツのIDをhref属性で指定できる・・・だけ？ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。

Lightbox2

Lightbox2

必要ライブラリ：
Prototype.js、script.aculo.us
対応形式：
画像、画像ギャラリー
対象指定：
rel属性、title属性
ライセンス：
CCライセンス 表示 2.5 一般
備考：
元祖Lightbox。オプション設定などはないが、使い方は単純明快。

Lightview

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

ModalBox

必要ライブラリ：
Prototype.js、script.aculo.us
対応形式：
プレーンHTML（文字列）、DOMノード
対象指定：
href属性、title属性、onclick属性
ライセンス：
不明
備考：
画面上部からニョロっとオーバーレイボックスが出現する。導入説明が親切。

MooTools

ImageZoom

ImageZoom

必要ライブラリ：
MooTools
対応形式：
画像、画像ギャラリー
対象指定：
rel属性、オプションでtitle属性
ライセンス：
CCライセンス 表示-継承 3.0 Unported
備考：
対応形式が画像のみと少ないが、ズームするアニメーションがお洒落。拡大状態を複数開けるのが個性的。

phatfusion →オススメ

phatfusion

必要ライブラリ：
MooTools v1.11
対応形式：
画像、Flash、QuickTime、WindowsMedia、RealMedia、MP3、Ajax、インラインフレーム、インラインHTML
対象指定：
スクリプト、rel属性、title属性
ライセンス：
MITライセンス
備考：
対応形式のメディアそれぞれを混合したギャラリー表示が可能。デフォルトのスタイルだとUIが黒い。この辺はスクリプト呼び出し時のオプションでカスタマイズ可能。多機能でクオリティ高し。

SexyLightBox

SexyLightbox

必要ライブラリ：
MooTools
対応形式：
画像、画像ギャラリー
対象指定：
スクリプト、class属性、rel属性、title属性
ライセンス：
MITライセンス
備考：
画面上部からビヨーンと登場するという、変わったアニメーションが特徴的。公式サイトの字が読めない。.meというドメインがモンテネグロのドメインなので、モンテネグロのサイト・・・？

Slimbox

Slimbox

必要ライブラリ：
MooTools 1.2
対応形式：
対象指定：
スクリプト、rel属性、title属性
ライセンス：
MITライセンス
備考：
UIはLightboxと全く同じ。Slimというだけあってライトウェイトであることがウリらしい。スクリプトの書き方次第でダイレクトにSlimboxを呼び出すことも可能。jQueryバージョンもあるとのこと（http://www.digitalia.be/software/slimbox2）。

Smoothbox, Thickbox for mootools

Smoothbox, Thickbox for MooTools

必要ライブラリ：
MooTools
対応形式：
画像、画像ギャラリー、インライン、インラインフレーム、Ajax
対象指定：
class属性、title属性、href属性のパラメータ
ライセンス：
MITライセンス
備考：
ThickboxのMooTool版。UIはThickBoxと同じ。IE8には非対応だった（オーバーレイ部分が真っ黒に）。

YUI

YUI Based Lightbox

YUI Lightbox

必要ライブラリ：
YUI
対応形式：
画像、画像ギャラリー
対象指定：
スクリプト、id属性（img要素）
ライセンス：
CCライセンス 表示-継承 3.0 Unported
備考：
コントロールパネルを表示されたり、画像のキャプションを入れるボックスを表示されたり。画像表示領域と、キャプションはドラッグで移動可能。

その他

Shadowbox.js

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
備考：
超高機能。アニメーションは控えめで上質感を感じさせる。スクリプト呼び出し時に引数として様々なオプションを指定可能。

Continue reading →

LineNumberWriterを0.4にバージョンアップ

Posted on by

1年以上放置していたので今更感がありますが、LineNumberWriterをバージョンアップしました。今回から、変換対象のコード内でタグが使えるようになります。例えば以下のように、strong要素やspan要素などを挿入することが可能です。（※）

<strong>で囲んでみました
<span style="color:#F33;">で囲んでみました

※もちろん(X)HTMLの文法的にcode要素に含められない内容（ブロック要素など）は含めちゃダメですよ。

今度Sugamo.cssという企画に参加することにしたので、何かプライベートワークをやっていかなきゃいけないような気になり、とりあえずコレのバージョンアップでも、と着手しました。
実は前からタグが使えるようにしたくてちょくちょくいじってはいたんですが、IEの独自仕様でまた色々とつまづいてしまい、挫折しちゃってたんです。でもまぁ最近、良いアイデアが浮かんだのでどうにか形になった、という。

ダウンロードしようなどという奇特な方はこちらからどうぞ。

[memo]MTEntriesタグのlastnモディファイア

Posted on by

lastn=”N”

出力するブログ記事の件数を制限します。lastn モディファイアは、つねに降順 (新しいものから古いものに並ぶ) で処理します。

<mt:Entries lastn="5" sort_by="title" sort_order="ascend">

サンプルのように、たとえ sort_by モディファイアでタイトル順、かつ、sort_order モディファイアで ascend (昇順) を指定しても、出力する結果は、最新 5 件のブログ記事です。

これは、recently_commented_on モディファイアを同時に設定しているときも同じです。これらは lastn モディファイアと同時に使用しても効果はありません。

MTEntries | テンプレートタグリファレンス

ということだそうで、sort_by・sort_order・recently_commented_onモディファイアはlastnモディファイアと同時に指定しても効果がないそうです。これらのモディファイアを使う場合はlastnモディファイアではなくlimitモディファイアと一緒に使いましょう。

テスト環境ではfavicon.icoを色違いにしておく

Posted on by

スクリーンショット：テスト環境ではfavicon.icoを色違いにしておく

案件固有のテスト環境（テストサーバー）がある場合、そちらで社内・クライアント双方のチェックを行ってから本番環境にアップをしますよね。このテスト環境、見た目は本番環境そっくりに作られていることがほとんどだと思いますので、タブブラウザでテスト・本番を両方開いているような状況だと、今どちらを見ているのか混乱してくることがあります。（URLを見ればもちろん分かるんですけど）

そこで、テスト環境のFaviconを本番環境と見分けがつくようにしておけば、タブに表示されたFaviconでどちらの環境を見ているのか瞬時に理解できます。こちらの方が、URLを見るよりよっぽど直感的です。
小さな工夫ではありますが、確実にオペレーションミスを減らすことができるのではないでしょうか。

ちなみに、Faviconを作る方法はいろいろありますが、私がFavicon作りに使わせていただいているのは@icon変換というWindows用ソフトウェアです。PhotoShopで作ったアイコン画像を、@icon変換に読み込ませてicoファイルに変換して作ります。