Just another WordPress site
android で google map 使うには meta-data が必要
codezin のソースでは
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
が載っていなくて
最近購入したポケットリファレンスでは、このコードが載っていたため
検索して調べてみたら
GooglePlay Services Rev12 から
manifest の application タグにこれを書く必要があるそうです
codezine のソースは
2013年の１０月
参考にさせていただいた
http://www.notice.co.jp/archives/2050
は
2013年の１１月
やはりAPI関連は twitter や facebook のように
仕様変更があるため
違いがでるようです
Webブラウザーのタッチイベントの種類
touchstart
スクリーンに指が触れたとき
touchend
スクリーンから指が離れたとき
touchmove
スクリーンに指が触れた状態で動かしたとき
touchcancel
スクリーンに触れた状態で、ロックボタンやメニューボタンを押したとき
jQueryMobileでタッチイベントを取得するには
$(document).on("touchmove","#drawable",function(e){
//ブラウザーのデフォルト動作無効化
e.preventDefault();
org = e.originalEvent;
//1本目の指の座標
x1 = org.touches[0].pageX;
y1 = org.touches[0].pageY;
//2本目の指の座標
x2 = org.touches[1].pageX;
y2 = org.touches[1].pageY;
})
タッチ座標の取得には
pageX
pageY
以外でもできるけど、OSごとの挙動がかわるため
pageX
pageY
が一番無難
気をつけるところは
タッチイベントで取得する座標は
スクリーンの物理座標じゃなくて
論理座標であること
jQueryValidationのカスタムルール作成
自分で追加した検証ルール、
カスタムルールを使うには
$.validate.addMethod()
を使う
この構文は
$.validate.addMethod(
ルール名,
検証ルール関数,
デフォルトのエラーメッセージ
);
となる
検証ルール関数は
function(value, e){
//検証内容
}
作成する検証ルール関数では
第一引数には、フィールドの入力値
第２引数には、検証を行ったフィールドの要素
が入る
実際に定義したルールを使うには
class=”ルール名”
として
input などに付ける
入力されたのが
本で使われるISBNコード
ISBN10形式なのか検証するなら
$.validate.addMethod("isbn10",function(value,e){
if(/^(¥d{9}) [¥d|X]$/.test(value)){
var check=0;
for(var n=0; n<value.length-1; n++){
check += parseInt(value.charAt(n), 10) * (10-n);
}
checkdigit = 11 - (check % 11);
checkdigit = (checkdigit == 10)? 'X': checkdigit;
return checkdigit == value.charAt(9);
}else{
return false;
}
},
'正しいISBNを入力してください');
ルールの適用のソースは
<input type="text" name="isbn" id="isbn" class="isbn10"/>
とすればok
jQueryValidationチェックルールその4
チェックボックスの入力チェックは
基本的にはラジオボタンと同じ
違いは、
minlength=””
を指定することで、最低チェック数の指定ができること
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>初回限定特典</legend> <input type="checkbox" name="prize[]" id="test1" required minlength="2"/> <label for="test1">サントラディスク</label> <input type="checkbox" name="prize[]" id="test2"/> </label for="test2">原画ディスク</label> <input type="checkbox" name="prize[]" id="test3"/> <label for="test3">短編ディスク</label> <input type="checkbox" name="prize[]" id="test4"/> <label for="test4">おまけディスク</label> <label for="prize[]" class="error" style="display:none;"> 2つ以上選択してください</label> </fieldset> </div>
というようになる
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の種類やバージョンでサポートが変わるため
