カテゴリー: 未分類

チャートライブラリー jqPlot

jqPlotは無料のチャートライブラリーで
株価チャートなども扱える

ライセンスはGPL ver2になり
商用プロダクトやオープンソースで使える

http://www.jqplot.com
からダウンロードできる

ダウンロードしたら解凍し
この中で使うのは
jquery.jqplot.min.js
jquery.jqplot.min.css
pluginフォルダー

まずは簡単なグラフから
jqPlotは、プラグインを組み合わせて
グラフの描画をする

プラグインは
レンダラと呼ばれるグラフや
線を描画するプラグインと

その他のプラグインがある
チャート用のレンダラには
棒グラフ、円グラフを担当

軸ラベル用のレンダラは、x,y軸を担当

メモり用のレンダラは、日付、対数、斜め描画を担当

その他のプラグインでは、
ズーム、値の表示、トレンド線などを担当する

jqPlotでは、これらのプラグインを組み合わせて、いろいろなグラフを描画する

簡単な線を書くには
まず、HTMLファイルで

<link rel="stylesheet" href="js/jqplot/jquery.jqplot.min.css">
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasTextReaderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasAxisLabelReaderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.curssor.min.js"></script>
<script src="js/jqplot/plugins/jqplot.mobile.min.js"></script>
<script src="js/jqplot/plugins/custom-basicchart.js"></script>

で必要なライブラリーを読み込む

表示領域については

<div data-role="page" id="chartbasic">
<div data-role="header">
<h1>jqPlotの基本</h1>
</div>
<div data-role="content">
<div id="chart"></div>
</div>
</div>

となる

Javascript部分は
custom-basicchart.jsで書く
var data = [
[[1,1],[2,2],[3,5],[4,2],[5,4]], //データ1
[[1,6],[2,4],[3,3],[4,4],[5,5]] //データ2
];

//プラグインの有効化
$.jqplot.configenablePlugins = true;

var opts={
title:’グラフタイトル’,

series:[
{label:’データ1′,
showMarker:false},
{label:’データ2′,
showMarker:false},
],

legend:{
show:true;
location:’ne’,
},

xaxis:{
label:’x軸ラベル’,
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
tickOptions:{angle- 30}
},

yaxis:{
label:’y軸ラベル’,
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
}
},
cursor:{zoom:true}
};

$(document).on(“pageshow”,”#chartbasic”,function(e){
plot = $.jqplot(“chart”,data,opts);
});

$(window).on(“orientationchange”,function(e){
plot.replot();
});

$(document).on(“pagehide”,”#chartbasic”,function(e){
plot.destroy();
});

なんとなく書き方はGoogle chart に似ている

では、解説
まず、スタイルの
jquery.jqplot.min.css

jqPlot本体になる
jquery.jqplot.min.js

そして、プラグインの
jqplot.xxx
で始まるプラグインを読み込む

ここで軸とか目盛りのカスタマイズに必要なプラグインを読み込んでいる

スマートフォンで利用するときに便利なプラグインとして
jqplot.cursor
jqplot.mobile
を入れておく

これは、スマートフォンだと
グラフの描画領域が狭くなるけど
この2つのプラグインを入れることで
グラフをタッチしてなぞると指定領域の拡大表示が可能になる

次に、jqplotでのグラフ作成

処理のJavascriptは

$.jqplot.config.enablePlugins = true;

plot = $.jqplot("chart",data,opts);

描画領域は

<div id="chart"></div>

となる

$.jqplot.config.enablePlugins
は、プラグインの利用設定
これは、ほとんどの場合プラグインは使うから true

plot = $.jqplot(“chart”,data,opts);
の
一番目の引数の
“chart”は、グラフを描画する要素のid
つまり、今回なら

<div id="chart"></div>

で id=”chart”になっているから

2番目の引数はデータ
3番目の引数はオプションになる

カメラで撮った写真のアップロード

Androidでは、Webブラウザーで
input要素へ type=”file” を指定することで
ファイルアップロードが可能

これを使うことで、写真を撮って、アップロードすることができる

また、accept=””の設定で
アップロードするファイルも指定することができる

アップロードには、HTMLでファイルをアップロードするマルチパートを使う

注意点としては、formの中で
data-ajax=”false”
にすること

理由は、jQueryMobileがAjax通信しているため
enctype=”multipart/form-data”
を指定したマルチパート形式でファイルのアップロードができないから

ソースにすると

<form action="upload.php" method="post" enctype="multipart/form-data" data-ajax="false" data-role="fieldcontain">
<label for="photo">写真</label>
<input type="file" name="photo" id="photo"></input>
<input type="submit" value="upload">
</form>

これでもアップロードはできるけど、
ファイルの種類制限がないので、実は写真意外のアップロードも可能

セキュリティーも考えれば、不必要なファイルは良くないので
accept=”” でファイルの種類制限をかける

accept=”image/*”にすることで
画像ファイルのみ選択可能になり
カメラで撮影した写真も対象になる

ということで、ソースの修正

<form action="upload.php" method="post" enctype="multipart/form-data" data-ajax="false" data-role="fieldcontain">
<label for="photo">写真</label>
<input type="file" accept="image/*" name="photo" id="photo"></input>
<input type="submit" value="upload">
</form>

ちなみに、accept=””で指定できるのは

image/*
画像ファイル、もしくはカメラから撮影

audio/*
音声ファイル、もしくはマイクから録音

video/*
動画ファイル、もしくはカメラから撮影

より高度なPhotoSwipeの使い方

デフォルトでは、1画面に3つまでサムネイル画像を並べて表示になる

でも、画像一覧には全然足りない

そんなときには
PhotoSwipeの
jquery-mobile.css
を編集する

デフォルトでは、

$.gallery li{float:left; width:33.33333%;}
$.gallery.li a{display:block; margin:5px; border:1px solid #3c3c3c}

これを

$.gallery li{float:left; width:20%;}
$.gallery li a{display:block; margin:2px; border:1px solid #3c3c3c;}

にする

これで、5列表示できる
marginの設定はなくても5列になるけど
この値を変更することで
サムネイル画像の間隔を変更できる

スライドショーの画像の間隔も変更可能

デフォルトの間隔は20px
間隔を0にすると、本みたいになる

var opts = {margin:0};

photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(opts,currentPage.attr('id'));

次に、自動スライドショーにする方法
デフォルトでは、画面をスワイプしないと次の画像はでない
自動スライドショーにしたいのなら
autoStartSlideshowオプションをつける
これにより、ギャラリー一覧が作れる

var opts = {autoStartSlideshow:true};

写真のサイトなので、画像のズームを無効化したいのなら
allowUserZoomをfalseにすれば設定できる

var opts ={allowUserZoom: false};

ズーム禁止じゃなくて、ズームレベルの制限をすることも可能
デフォルトだと
0.5~5倍のズームになっている
最小値は minUserZoom
最大値は maxUserZoom
で指定する

もし、等倍から倍までの制限をかけるなら

var opts = {minUserZoom:1,maxUserZoom:2};

となる

そして、あとはループの制御
デフォルトでは、最後までいったら最初にループして戻る
ギャラリーとかサンプル画面表示とかなら問題ないけど、マンガアプリとか
なんらかのコンテンツの場合なら
最後までいったらループはしない

ループさせたくないのなら
loop を falseへ設定する

var opts = {loop: false};

タッチイベントアプリの作成

touchイベントを使って
スクリーンにタッチして絵を描くペイントソフトをつくる

touchイベントがマルチタッチを捕らえることに注目し
タッチした指で色が変わるようにする

とりあえず、headでは、必要なライブラリーの読み込み

bodyでは画面の作成

<div data-role="page" id="touchpaint">

<div data-role="header">
<h1>タッチイベント</h1>
</div>

<div data-role="content">
<div id="canvas"></div>
</div>

処理はJavascript

//指が増えるごとに色を変化
color = [
'rgb(255,0,0)',
'rgb(0,255,0)',
'rgb(0,0,255)',
'rgb(255,255,0)',
'rgb(255,0,255)'
];

$(document).on("pageshow","#touchpaint",function(){

//html()で動的に追加
$("#canvas").html('<canvas id="drawable" width="'+window.innerWidth+'"height="'+window.innerHeight+'" />');
canvas = $("#drawable")[0];
ctx = canvas.getContext('2d');

//追加領域での操作
$(this).on("touchmove","#drawable",function(e){

ratioX = canvas.height / canvas.clientHeight;
ratioY = canvasWidth / canvas.clientWidth;

//ブラウザーの基本動作無効化
e.preventDefault();

$.each(e.originalEvent.touches, function(idx){
//座標取得
x =(this.pageX - canvas.offsetLeft) * ratioX;
y = (this.pageY - canvas.offsetTop) * ratioY;

//描画
ctx.beginPath();
ctx.fillStyle= color[idx];
ctx.arc(x,y,10, 0* Math.PI / 180,  360 * Math.PI / 180, true);
ctx.fill();

});
});
});

$.each()については
http://qiita.com/YusukeHirao/items/8d1089c2bf86e7dc05ef
の解説がわかりやすいとおもいます

この$.each()は配列を扱う関数
引数には、
配列
コールバック関数
となっている

arc()については
http://www.html5.jp/canvas/ref/method/arc.html
を参考に

構文は
arc(
中心のx座標,
中心のy座標,
半径,
開始地点,
終了地点,
回る向きでtrueなら時計回り
)

となる

つまり
ctx.arc(x,y,10, 0* Math.PI / 180, 360 * Math.PI / 180, true);
なら

ctx.arc(

//x座標
x,

//y座標
y,1

//半径
0,

//開始地点
0* Math.PI / 180,

//終了地点
360 * Math.PI / 180,

//回る向き
true);
となる

Androidでジェスチャー

http://okamototk.github.io/jquery-touch-plugin/
にデモがあったので体験

これはjQuery touchプラグインを使うことにより
Androidでも擬似的にジェスチャーが使えるようになるプラグイン

ジェスチャーの使い方は

$(document).on("touchmove","#drawable",function(e){
org = e.originalEvent;
scale = org.scale;
rotation = org.rotation;
});

scaleは、ズーム率
2つの指でスクリーンにタッチして指を動かして間隔が変化した時に
最初の状態と、動かした状態の状態でどれくらい変化したか
という倍率を取得する

倍率なので、変わらないなら1
半分なら0.5
倍なら2.0

rotationは、2本の指で画面にタッチして
指を回転したときの回転角度を
時計回りを正として取得する

例えば、右に指が90度回転すれば
値は90
左周りだとマイナスの値になる

相対座標の取得

タッチイベントの座標として
要素からの相対座標にしたいとき

たとえは、お絵かきアプリとか手書きアプリとかで
枠の中をタッチしたときに
画面の左上ではなく
枠の左上の座標を
0,0 にしたいときなどに
この相対座標の指定を行う

これも、どのスマートフォンでも使える
pageX
pageY
を使う

$(document).on("touchmove","#canvas",function(e){
canvas = $("#canvas");
org =  e.originalEvent;
x = e.originalEvent.touches[0].pageX - canvas.offset

});

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>

というようになる