HTML5 – Mach3.laBlog

HTML5のplaceholderのようにガイドテキストを表示するjQueryプラグイン

mach3 — Thu, 31 Mar 2011 01:00:20 +0000

HTML5でフォーム関連の要素は色々と刷新されて便利になりそうですが、
その新機能のひとつに、ガイドテキストをうっすら表示させるplaceholderなる物があります。
今日はそのplaceholderをjQueryで表示させてみるちいさな実験。

placeholderについて

何も入力されていないテキストインプットに、
例えば「名前を入力してください」的なガイドテキストを薄く表示させる為の属性。
IEをのぞく多くのモダンブラウザでは既に実装されています。

ちなみにこんなやつです。↓

何を入力したらいいのかがわかりやすい！

The Current State of HTML5 Forms · Wufoo

こちらのリンク先では、フォームエレメントにかかわる新機能の
各ブラウザの対応状況が紹介されていました。
IE9があまりにも残念で私は悲しい。

JavaScriptで実装してみる

どのブラウザでも使えるようにするために、JavaScriptで実装してみます。
仕組みはシンプルに。

placeholder属性のかわりにdata-placeholder属性でガイドテキストの値を設定する
blurの時にvalueが空っぽだったらdata-placeholderの内容に差し替える
focusの時にvalueがdata-placeholderの内容と同じ場合は空っぽにする
ガイドテキスト表示時のCSSクラスを用意する

作ってみたもの

ソース

mach3/js-jquery-placeholder – GitHub

デモ

jquery.placeholder.js – jsdo.it – Share JavaScript, HTML5 and CSS

使い方

HTML

"text" value="" data-placeholder="Input your name" class="mytext" />

data-placeholder属性に表示させたいガイドテキストを入力します。

CSS

.jquery-placeholder {
    color:#cccccc;
}

ガイドテキスト表示時のスタイルを設定。
初期設定では、jquery-placeholderクラスとなります。
JavaScriptのオプションで変更できます。

JavaScript

$("input.mytext").placeholder();

クラスの設定を変更したい場合は、文字列またはオブジェクトで引数を渡します。

$("input.mytext").placeholder({
    defaultClass : "myclass"
});
// または
$("input.mytext").placeholder( "myclass" );

注意事項

（2011/03/31 18:20　追記）

このスクリプトですが、いくつか問題があります。

アラートでblurイベントがスルーされる
送信時に値をクリアしないとplaceholderの値を送ってしまう

2番目の問題については、つい先ほどオプション「resetOnSubmit」を追加しました。
これをtrueにするとsubmit時にplaceholderの値から変わってない場合は値をクリアします。
なぜわざわざオプションにしたのかというと、
Ajaxとかでフォームを使いたい時にクリアしないほうが都合がいいケースもあるかな？と。

1番目はちょっと調査＋考え中…。

まとめ

IEが最新版の9でも対応してないというのは若干ショックではありますが、
見た目的にも使い勝手的にも取り入れたい表現ですね。

2011/3/31 18:20: オプションの追加、注意事項追記

head要素に読み込むべき唯一のスクリプト「headjs」

mach3 — Thu, 10 Mar 2011 01:10:46 +0000

「Modernizr」や「html5.js」等、モダンな環境の為の便利なスクリプトは多々ありますが、
「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。

使い方

Head JS :: The only script in your HEAD

謳い文句はhead要素に読み込む唯一のスクリプト
ダウンロードして読み込むだけ。おしまい。

<script type="text/javascript" src="head.js">script>

その多彩な機能

環境の判別

CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を
Modernizrと同じ手法でHTML要素のクラスに出力してくれます。
こんな感じに…

"ja" id="test-page" class=" webkit root-section js  gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions fontface domloaded w-1100 lt-1280 lt-1440 lt-1680 lt-1920">

また、JavaScriptでheadオブジェクトを辿っても判別結果が得られます。

console.log( head.csstransitions ); // Transition対応のブラウザならtrue
console.log( head.browser.webkit ); // Webkitならtrue
console.dir( head ); // とりあえず全部覗いてみたらいいと思う

IEのHTML5対応の補助

html5shiv同様、IEでのHTML5の新要素の使用をサポートしてくれます。
（IEさんはHTML5の要素を置いても、そのままではスタイルをあててくれないので…）

html5shiv – Project Hosting on Google Code

スクリプトローダー

動的にJavaScriptファイルをロードする機能を備えています。
読み込むスクリプトファイルは復数指定でき、ロード完了時のコールバックも登録可能です。

head.js(
    "hoge.js",
    "fuga.js",
    "foo.js",
    "bar.js",
    function(){
        console.log( "All Script Loaded." );
    }
);

パフォーマンスに疑問が残るので多用は禁物ですが、便利ですね。
競合としてはrequire.jsとかでしょうか。

RequireJS

まとめ

一本読み込むだけでこれだけのことが出来る。
まさにheadjsの名に恥じない素晴らしいスクリプトだと思います。

HTML5の新機能が使用可能かどうかを判別するJSコード一覧

mach3 — Thu, 20 May 2010 20:51:00 +0000

HTML5で色々と新機能が登場しましたが、ブラウザの対応状況は未だまちまちです。
こちらのサイトでは、ブラウザが対応しているかを判別する為のJSコードを一覧にしてくれています。

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything – Dive Into HTML5

軽く抜粋してみます。

audio

return !!document.createElement('audio').canPlayType;

video

return !!document.createElement('video').canPlayType;

canvas

return !!document.createElement('canvas').getContext;

SVG

return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);

contentEditable

return 'isContentEditable' in document.createElement('span');

Drag-anddrop

return 'draggable' in document.createElement('span');

localStorage

return ('localStorage' in window) && window['localStorage'] !== null;

Web SQL Database

return !!window.openDatabase;

こんな感じのシンプルな判別式が57個も掲載されています。
（数え間違えでなければ）
尚、それぞれの見出しは該当する要素のドキュメントに飛ばしてくれます。

ブラウザの対応が安定した物になるには、まだまだ時間が必要。
しばらく判別式にお世話になると思われますので、
こういったリストの存在は大変ありがたいですね。

HTML5によるHTML5のプレゼンテーションスライド

mach3 — Sun, 18 Apr 2010 10:59:00 +0000

Ajaxian » The Best HTML5 Slides Ever

HTML5について簡潔にまとめられたプレゼンテーションが紹介されています。
随所に実例を盛り込んだWebベースのスライドです。

HTML5 presentation

HTML5で得られる新要素が、
実際の例をスライド内に盛り込みつつ解説されています。
これは分かりやすい！

自分で学習する場合にも、
人に説明する場合にも良い資料ですね。

HTML5のLocalStorageでToDoリストを制作するチュートリアル

mach3 — Sun, 11 Apr 2010 19:40:00 +0000

HTML5のlocalStorageを利用したToDoリストの作り方が
Nettus+のビデオチュートリアルで公開されています。
今流行りのHTML5ですよ、奥さん。

Quick Tip: Learning About HTML5 Local Storage | Nettuts+

ちなみに先程の記事の「JS Bin」はこのビデオで知りました。
英語ですが、ソースコードを見ているだけでよく分かります。
localStrage、恐ろしく簡単に使えるのですね。
夢が広がります。

格納/取得はsetItem/getItemで簡単に。

localStorage.setItem(‘keyName’, ‘Value you want to store.’); //格納
var hoge = localStorage.getItem(‘keyName’); //取得

プロパティアクセスでもOKです。

localStorage.keyName = ‘Value you want to store.’; //格納
var hoge = localStorage.keyName; //取得
/* または… */
localStorage['keyname'] = ‘Value you want to store.’;
var hoge = localStorage['keyName'];

ウィンドウを閉じてもデータは保持される様で、
つまりはASのSharedObjectみたいな使い方が出来る…のかな？
値はStringじゃないといけないみたいですが。

当セッションだけデータを保持されるsessionStorageなるものもあるそうな。
より詳しくはこちらへ。
【特集】詳解! HTML 5と関連APIの最新動向 – Webアプリ開発編 (7) Web Workers | エンタープライズ | マイコミジャーナル

大変便利なlocalStorageですが、
ローカルのデータを弄るわけで、妙な穴にならなければよいですね。

2010/08/25 :: サンプルコードに加筆修正。