カテゴリー: 未分類

jQueryValidationのチェックルールその3

ラジオボタンのチェック

radioボタンが選択かれているかチェックする
これは、アンケートなどに使う

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>今回のゲームの評価</legend>

<input type="radio" name="review" id="good" value="1" required/>
<label for="good">良かった</label>

<input type="radio" name="review" id="normal" value="2" />
<label for="normal">普通</label>

<input type="radio" name="review" id="bad" value="3"/>
<label for="bad">いまいち</label>

<label for="review" class="error" style="display:none;"/>チェックしてください</label>

</fieldset>
</div>

ラジオボタンの name=””は同じにして
id=”” は識別できるようにバラバラにする

label の for=”” には、それぞれ対応するラジオボタンの id=”” の中身を指定

エラーメッセージの label だけは
ラジオボタンの for=”” の中身を指定

このように
ラジオボタンのどれか1つに
requiredをつければ必須チェックがかかる

また、デフォルトだとボタンの上にメッセージがでてしまうため
class=”error”
で、エラーメッセージの位置を変更している

jQueryValidationのチェックルールその2

文字列長のチェック

minlength=””
で最小文字列

maxlength=””
で最大文字数を指定することが可能

例えば、Twitterみたいに140文字までにするなら

<input type="text" minlength="1" maxlength="140"/>

入力値が一致しているかチェック

これは、ログインのパスワードとか
確認のため、もう一回入力という、あらかじめ値があるものときに使う

これには、
equalTo=””
を使う

パスワード: <input type="password" value="" id="password"/>

パスワード(確認): <input type="password" value="" id="confirmpasswd" equalTo="#password"/>

というように使う

#password
は、id=”password” なので、これと比較している

会員登録でよくある
メールアドレス
パスワード
など、間違えると後々すごく困るものに使う

エラーメッセージの内容と、表示場所の変更

エラーメッセージの変更関連は
label要素を使う

<input type="email" id="userid" name="userid" class="required"/>
<label for="userid" class="error" style="display:none;">
メールアドレスを入力してください
</label>

label要素の
for=”” には、検証したいフィールド
今回なら input要素
の
id=””
もしくは
name=””
の中身を指定する

そして、class=”error”を指定しておく

最初に画面を開いたときには
このエラーメッセージは出したくないので
style=”display:none;”
としておくことで非表示になる

あと、今回は
input の下へ label を書いたから下にエラーメッセージがでるけど
入力欄の上にエラーメッセージを出したいのなら

<label for="userid" class="error" style="display:none;">
メールアドレスを入力してください
</label>
<input type="email" id="userid" name="userid" class="required"/>

とすれば
上にエラーメッセージが表示される

jQueryValidationの入力チェックルール

まず、
input の中で type=”” で指定
このルールは、jQueryValidationを読み込んでおくことで反映される

type=””による入力チェックが使えるのは
type=”email”
メールアドレス

type=”url”
URL

type=”date”
日付

type=”number”
自然数

次に、クラス名でのエラーチェック
これは、カスタムクラスを使えばできる

もし、メールアドレスを必須チェックにしたいのなら

<input type="text" class="required email">

というように、class=””へ
チェック項目を入力する

チェックできる項目は
required
必須チェック

email
メールアドレス

url
URL

date
日付型

dateISO
ISO型

number
自然数

digit
数字

creditcard
クレジットカード番号

jQueryValidationの使い方

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
からdownloadをクリックして
zipファイルをダウンロード

解凍したら
日本語メッセージに使うファイルが必要なため
localizationフォルダーの中にある
messages_ja.js
と

jQueryValidation本体になる
jquery.validate.min.js
が
distフォルダーにあるので、これらを
Webアプリのjsフォルダーにいれておく

次に、jQueryValidationでエラー表示のためのスタイルを設定するので
cssフォルダーの中へ
errorstyle.cssを作成する

書いているのは色の指定

//エラーメッセージを赤
from label.error{
color:red;
width:100%;
display:inline-block;
}

//エラーフィールドの色の指定
input.error{
background-color:#FFA0A0;
}

#FFA0A0は色の指定で
http://www.color-sample.com/colors/ffa0a0/
に実際の色が載っている

css関連については
ドットインストールで動画で紹介されているので参考にするとわかりやすい

http://dotinstall.com/lessons/basic_css_v2
を参考に

次に、jQueryValidationのライブラリーと
日本語メッセージの読みとり

これほ、単純にheadの中で

<script src="js/jquery.validate.min.js"></script>
<script src="messages_ja.js"></script>

で読み込むだけ

後、jQueryValidationを実行するJavascriptを作り、それを読み込む

$(document).on("pageinit","#main",function(e){
$("#comment").validate({});
});

これを
validate.jsとして、jsフォルダーへ保存し

<script src="js/validate.js"></script>

で読み込めばok

#commentはフォームのid
#mainは data-role=”page”のid

pageinitイベントで行っているのは
画面初期化時に
フォームに対してvalidateを実行すると
入力チェックが有効になるから

あと、Javascriptのインポートと
スタイル定義は
バリデーションしたいページじゃなくて
Webブラウザーから最初にアクセスされるjQueryMobileサイトのトップページに記述する必要がある

これは、2ページ目以降のアクセスだと
デフォルトではheadの中のJavascriptは読み込まれないから

あと、入力チェックには
HTMLで

<input type="text" name="userid" required/>

というように
required
を付けることで
必須チェックができる

type=”email”
とすることで、メールアドレスであるか
チェックができる

出雲大社への旅行計画

新しい経験や朝鮮をすると発想が浮かんだり
いろいろと考えるきっかけにもなるので
出雲大社への旅行を計画

ネットで情報収集しながらガイドブックを買ってきて
計画を立てています

今回、参考にしたのは
松江 出雲 石見銀山 境港 (ココミル)

交通手段を考えたのですが
名古屋経由で考えたものの
乗り換え案内アプリで調べた結果
サンライズ出雲・瀬戸は名古屋に止まらないので
停車する駅から載ることにします

なお寝台特急に関しては乗ったことがないため
http://www.toretabi.jp/travel/shindai_vol01/01.html
を参考にさせていただきました

当初は乗り継ぎでいこうと考えたけど
さすがに島根まで乗り換えの連続はつかれるし
そもそも寝て起きたら到着は一番理想かと思いますし
どうやら個室もあるようです

とりあえず、行きは寝台特急
帰りは松江から
特急やくもで2時間半で岡山までいって
そこから新幹線で名古屋まで1時間４２分
ということなので
このプランでいこうと思います

即決断にしなかったのは
3月15日にダイヤ改正があり、どうなるかが不明のため

また、以前箱根にいったときにお得切符があったように
出雲や松江のエリアにもお得切符があります

http://tabi.iinaa.net/JapnPass/simane.html
にいろいろな切符がありますので
ここから使えそうなものをみてみます

お得切符は有効エリアがあり
ものによっては数日使えるため
今後の計画に合わせて購入するものを見当してみようと思います

今回の目的は神社めぐりと
宍道湖の夕日鑑賞です

今後、電車の時刻表
バスの時刻表
かかりそうな費用などを計算し、今後の旅行の参考に掲載していこうと思います

Webアプリの入力値チェック

HTML5とjQuery Validationを使い
入力値チェックをする

ちなみに、HTML5から
フォームバリデーションが使えるようになり
HTMLだけである程度の入力値チェックはできる

このため、電話番号や数字などは
特定のキーボードしか使えないようにして
入力制限することができる

もし、電話番号入力なら

<input type="tel" id="tel" name="tel"></input>

とすれば
type=”tel”
によって、電話番号入力専用キーボードになり、
電話番号しか入力できなくなる

似たようなもので
type=”number”なら、数字しか入力できなくなる

type=”date”なら、iOSの場合、日付入力ダイアログになる

type=””の指定の一部を書くと

type=”tel”
電話番号

type=”number”
数字のみ

type=”email”
メールアドレス入力

type=”url”
URL入力

type=”datetime”
日付+時間

となる

HTML5だけでもかなりできるけど
jQuery Validationを使うのは、
OSの種類やバージョンでサポートが変わるため

themerollerでデザイン作成

自分の欲しいデザインがjQueryMobileから提供されていていない場合、
自作する必要がある

そんなときには、jQueryが提供している
ThemeRollerというツールを使う

http://themeroller.jquerymobile.com
へアクセスし
テーマを作成していく

使い方が日本語で掲載されている
http://dev.screw-axis.com/doc/jquery_mobile/resources/themeroller/overview/
を参考にしながら使えば効率的

また、自分でデザインするのは面倒だったり
デザインまで考えるのはちょっと…という場合には

Androidみたいなデザインにするなら
https://github.com/jjoe64/jquery-mobile-android-theme

iPhoneみたいなデザインにするなら
https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme
で公開されている

Android theme for jQueryMobileの使い方は
githubからzipファイルをダウンロードし
解凍したら
WebアプリのCSSディレクトリ配下へ
.cssファイルをコピー

また、Javascriptファイルも
WebアプリのJSディレクトリ配下へ
コピーする

これであとは
headの中で
script要素の
src=””でファイルパスを指定する

これで使えるようになるけど
テーマフレームワークの代わりに使われるため
data-theme=””
での指定ができなくなる

jQueryMobileのデザイン変更

デフォルトでも使えるけど見た目を変えたいのならデザイン変更が必要

HTMLのサイトならCSSで変えるけど
jQueryMobileなら
テーマフレームワークを使えば簡単にデザイン変更できる

このテーマフレームワークは
a~zまであり
a~eがjQueryMobileから提供されていて
f~zはユーザーが独自定義できる

テーマを指定するには
data-theme=””
で a~z を指定する

例えば、ボタンにテーマaを適用するには

<a href="#" data-role="button" data-theme="a">テーマを変えたボタン</a>

となる

ノーマルのほうも一緒に出すとわかりやすいかも

<a href="#" data-role="button" data-theme="a">テーマを変えたボタン</a>
<a href="#" data-role="button">テーマなしのボタン</a>

テーマは、ボタン以外にも使える
テキストフィールド
チェックボックス
などにも使える

また、1つずつでは面倒くさいので
まとめて設定したいのなら
data-role=”header”
data-role=”content”
へ指定すれば一括変換も可能

ただし、面倒くさいからといって
data-role=”page”
へ設定しても
data-role=”content”
data-role=”navbar”には適用されるけど

data-role=”header”
data-role=”footer”
には適用されない

このため、全部同じテーマにするには
data-role=”page”
data-role=”header”
data-role=”footer”
へテーマを指定することになる

ソースにすると

<div data-role="page" id="top" data-theme="e">

<div data-role="header" data-theme="e">
<h1>テーマ</h1>
</div>

<div data-role="content">
<a href="#" data-role="button">ボタン</div>
</div>

<div data-role="footer" data-theme="e">
</div>


</div>

となる

カスタムデータ属性ではなく、Javascriptでもできる

同じテーマにするには
やり方は

$(document).on("mobileinit",function(e){

$.mobile.page.prototype.options.theme="e";
$.mobile.page.prototype.options.headerTheme="e";
$.mobile.page.prototype.options.footerTheme="e";
});

このJavascriptを共通ファイルへ書いておけば各HTMLファイルへ書く必要がないし
テーマを忘れることもなくなる

便利ツールを使うと開発効率アップするのでメモ

ログ出力でアプリ動作の確認

ログ出力するには

console.log("ログメッセージ");
console.info("情報メッセージ");
console.warn("警告メッセージ");
console.error("エラーメッセージ");

となる

iPod touchの実機でやるにはsafariが必要なのでパス
Androidはadbコマンドから行える

PCでの開発には
Eclipse + jQuery WTPプラグインの組み合わせが便利

このプラグインは
jQueryのコード補完と
PDTサポートもある

ただ、jarファイルか上書きされるため
不安なら
vmware や virtualbox で仮想マシンを作り開発環境をつくるといい

jQueryWTPでプロジェクト作成は
phpで作成する

これは、サーバー用のコード作成もするため

あとプロジェクト作成のときに
Javascriptサポート
にチェックいれないとJavascriptの補完機能が使えないので注意

画面遷移イベントその2

pageglobal

これほ、画面読み込みが完了したイベントとして呼び出される

使い方は

$(document).on("pageglobal","#main",function(e,data){
  //イベント処理
});

dataに入る値は、pagebeforeloadイベントとおなじで
遷移元画面のDOM
遷移先画面のDOM
絶対URL
ホスト内のURLなどになる

キャッシュされた画面を読み込むときには実行されないので注意

pagebeforechange

pagebeforechange
pagebeforehide
pagebeforeshow
は、画面遷移前に呼び出される

違いは、呼び出し場所が
グローバルイベントか
遷移前画面か
遷移後の画面かということ

使い方は

$(document).on("pagebeforechange","#main",function(e,data){
   //イベント処理
});

dataには
遷移先の画面のDOMになる
toPage
画面遷移のオプションになる
options
が設定される

optionsには
画面遷移が呼ばれたときのパラメーターが入ってくる

pagebeforehide

画面遷移により、遷移元の画面が非表示になる前に呼び出される
setInterval()によるタイマー処理の停止
画面の中で行われているアニメーション停止
位置情報やモーションセンサーの値の取得などの停止もここで行う

使い方は

$(document).on("pagebeforehide","#main",function(e,data){
   //イベント処理
});

data.nextPageに遷移先の画面のDOMが設定される

画面遷移元のイベントとして
pageremove
pagehide
があり、そこで画面遷移時のイベント処理もできるけど
これだとDOMがキャッシュされない場合、
pageremove
pagehide
の実行時にはDOMが削除されてしまい
遷移前の画面のDOMにアクセスできないので画面の終了処理はここで実行する

pagebeforeshow

遷移先画面が表示する前に呼ばれる

このイベントは、画面のDOMのキャッシュの有無に関わらず呼び出されるので
画面表示の際に毎回変わるような情報を表示するときに使う
用途としたて考えられるのはニュースとか

pagebeforeshowの使い方は

$(document).on("pagebeforeshow","#main",function(e,data){
  //イベント処理
});

data.prevPageに遷移元画面のDOMが設定される

pageremove

画面のDOMが削除されたときに呼ばれるイベント
画面がDOMにキャッシュされる場合
これは、トップページや明示的にキャッシュ設定されているときには呼び出されない
このイベントが呼ばれたときの状態では
遷移元画面のDOMにはアクセスできない

pageremoveの使い方は
$(document).on(“pageremove”,”#main”,function(e){
//イベント処理
});
[/javascript]

pagehide

画面遷移が完了し、遷移元画面スクリーンが消えると発生するイベント

これも画面がキャッシュされず
DOMが削除されているなら
前の画面のDOMにアクセスすることはできない

さすがにないものには戻れない

pagehideの使い方は

$(document).on("pagehide","#main",function(e,data){
   //イベント処理
});

data.nextPageに遷移元画面のDOMが設定される

pageshow

画面遷移が完了し、遷移先画面がスクリーンに表示された後に発生するイベント

setInterval()によるタイマー処理の開始
画面表示直後のアニメーション開始
位置情報、モーションセンサーなどの値の取得開始などをここで実行する

jqPlotでチャート表示するときには
チャート描写はここで行う
為替とか株のチャートを作るならここのイベントを使う事になりそう

photoSwipeの初期化もここで行うため
結構多用するイベントになる

pageshowの使い方は

$(document).on("pageshow","#main",function(e,data){
  //イベント処理
});

data.prevPageに、遷移前画面のDOMが設定される

pagechange

pagehide
pageshow
とほぼ同じだけど、グローバルイベントとして実行される

pagechangeの使い方は

$(document).on("pagechange","#main",function(e,data){
//イベント処理
});

data.optionsには、画面遷移が呼ばれたときのパラメーターが設定される

data.toPageには遷移元画面のDOMが設定される

pagechangefailed

pagechangefailedは、画面遷移が失敗したときに実行されるイベント

使い方は

$(document).on("pagechangefailed","#main",function(toPage, options){

});

となる

toPageでURLやDOMを取得する

optionsには、画面遷移が呼ばれたときのパラメーターが設定される