スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > HTML LocalStorageを使って、フォームに入力した値を保存しておくjQueryプラグイン

HTML LocalStorageを使って、フォームに入力した値を保存しておくjQueryプラグイン

投稿日:2015年2月20日

このチュートリアルではフォームに入力した値を保存しておくjQueryプラグインを紹介します。


Step1:はじめに

この問題はWEB上にフォームが現れてからずっと存在し続けています。
入力フォームが長ければ長いほど、大きな問題となる可能性があります。
その問題というのは、あなたがコンピュータを使い始めて以来、何度となく直面してきた問題です。
入力項目の多いフォームを入力し終えた時や、奥さんに今日注文すると約束したものを急いで注文するためにフォームを送信したい時に限ってその問題は起こります。
ほら、まただ。送信失敗。
どういう訳かF5キーを押してしまったり、何か誤った操作をしてブラウザのタブが突然閉じてしまいます。
その結果、フォームは空になり、また一からやり直しです。
今日ご紹介するjQueryのプラグインは二度とこんな状況に陥らないことを約束してくれるものです。

フォームに入力した値を保存しておくjQuery






Step2:Garlic.jsとSisyphus.js:フォームの入力内容をLocalStorageに保存する

もしeコマースサイトを運営しているのであれば、この問題にお気づきでしょう。
潜在顧客は何度もフォームを入力し直さないといけなくなると買う意欲を失ってしまいます。
言い換えれば、顧客が買い物途中でショッピングカートを置き去りにして、出口に向かうようなものです。

これはもちろん買い物客だけに言えることではありません。
膨大なフォームを入力し直さないといけないということは全てのネット市民に起きるでしょう。
私自身も何度も経験しましたが、キー操作の失敗がいつも問題という訳ではありません。
ウェブデザイナーにも責任があります。

Garlic.jsとSisyphus.jsというjQueryの二つの比較的新しいプラグインがその問題の解決を約束してくれます。
Sisyphus.jsの方が古く、完成度の高いプロジェクトですが、真新しく、提案に意欲的に答える開発者が手がけるGarlic.jsに最近では注目が集まっています。

これら二つのプラグインの動作原理は全く同じです。
HTML5のLocalStorage APIを使用してローカルのハードディスク上にウェブコンテンツを保存するため、どちらもクライアント側にモダンブラウザが必要です。
フォールバックや古いブラウザのポートは実装されていません。
ご自身でコードを記述する必要があります。
この記事の関連リンクにIE6/7への対応に役立つ情報があります。

基本的な使用方法はどちらのプラグインも簡単です。
スクリプトをHTMLのヘッダーに埋め込み、次のように実行させます。
(jQuery自体の埋め込みも忘れないでください)

Garlic.js

<form data-persist="garlic" method="POST"></form>

Garlicによって値を保存したいフォームそれぞれにデータ属性を設定する必要があります。
ひとつのページに2つ以上のフォームがある場合にはそれぞれ個々に属性を設定する必要があります。

Sisyphus.js

データ属性ではなく、関数呼び出しによって動作します。

$('#form1, #form2').sisyphus();

お気づきのように、Sisyphusはひとつの関数呼び出しで複数のフォームを指定することができます。
ページ上の全てのフォームを指定したい時には呼び出しはもっと簡単です。

$('form').sisyphus();

SisyphusにはGarlicよりも多くのカスタマイズオプションがあります。
Sisyphusでは、フォームフィールドの状態に基づいて関数を呼び出すことさえできます。
Sisyphusの方がはるかに多機能です。

しかし、だからと言ってすぐにGarlicを却下してSisyphusを選んではいけません。
Garlicの開発者であるGuillaume Potier氏は早期に機能を拡充することを約束しています。
データ属性を使ってプラグインをコントロールするというやり方に魅力を感じる人もいることでしょう。
少なくとも私は魅力的だと思います。

フォームの送信後、あるいは意図的にリセットした後、不要になった全ての値はlocalStorageから削除されます。
私がテストした限りでは、タブキーを使ってフィールドを移動した場合のみ値は保存され、マウスを使ってクリックにより移動した場合には何も保存されませんでした。
最適化の余地は常にあった方が良いので、これは意図的にこうなっているのだと思います。
最初から完璧を求める人なんていませんよね?



引用:Web Design Library  著者:smashingmagazine.com  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング