月別: 2014年3月

Google Maps Android API v2 のmeta-data でハマる

Google Maps Android API v2
で地図を表示しようとしたものの
地図がでずエラーがでるので調べた結果

        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="apiキー"
            />
        <meta-data 
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

を書く場所を間違えていたことが判明

本来、application タグの中に書くけど
間違えて
manifest タグの中に書いていたためエラーとなりました

eclipseのメモリ割り当て変更

eclipse で Android のアプリ開発で実行しようとすると
最近頻繁にエラーになるので

Eclipse.ini の設定を変更し、パフォーマンス改善しよう
を参考に
割り当てメモリを変更

cd eclipse
vim eclipse.ini
でファイルを開き

-Xms40m
-Xmx512m
となっている部分を変更します

-Xms40m
は起動時に確保するメモリ量

-Xmx512m
はeclipse が使用する最大のメモリ量

搭載しているメモリは8GB あるので
もっと領域を増やしてみました

-Xms2048m
-Xmx2048m

へ変更し保存

これでしばらくは問題なさそうです

debugキーで Google Maps Android API v2 キー取得

debugキーで Google Maps Android API v2 キー取得

まずはデバッグキーで証明書のフィンガプリントを取得
デバッグキーと自分のキーとの違いは
リリースできるかどうかなので
最初はデバッグキーで十分

最初から公開するためにデバッグでないほうをやろうとするとマップがでなくて挫折したりするので
最初はデバッグキーでやりましょう

keytool -list -v -keystore .android/debug.keystore -alias androiddebugkey -storepass android -keypass android

を実行すると証明書の フィンガープリントがでるので
SHA1 のほうをコピーしておく

Google API Console にアクセスして

すでに地図API key を取得したことがあるのなら
create new Android key …
をクリック

そして
SHAの値: パッケージ名
というように入力し
Create をクリック

サンプルとしては

45:B5:E4:6F:36:AD:0A:98:94:B4:02:66:2B:12:17:F2:56:26:A0:E0;com.example

みたいに入力する

v1 のときには API キーを使いまわしできたけど
v2 になってからはアプリごとに取得するので面倒

ちなみにすでに v1 のキー取得はできないので
v2 対応の情報でみることが必要になります

取得に参考にしたのは
Google Maps Android API v2キーの取得

と

を参考にしました

jqPlotをjQueryMobileで使うときのポイント

jqPlotをjQueryMobileで使うときのポイント

jqPlotをjQueryMobileで使うときには
グラフ作成のタイミングが重要になる

グラフを表示したいページに
pageshowイベントで
$.jqplotを呼び出すことでグラフを描画する
グラフが表示されないときには、呼び出すイベントに注目

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

#chartbasicは
data-role=”page” id=”chartbasic”
で、表示するページのid

次の注意点として、パソコンと違いスマートフォンでは、画面が横向になる
デフォルトだと
横向になるとグラフが画面からはみ出たり
横が余る
これを防止するには
端末の向きが横向になると発生するイベント
orientationchangeイベントを検出したら
グラフを再描画するようにする

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

また、端末の向きの変更でグラフの再描画をしたときに
ブラウザーのウインドウの幅と高さが
画面の幅と高さと
あっていないと
これも、グラフがはみ出たり、横が余る

この対処としては
viewportの設定をすることで解決する
ほとんどのスマートフォン向けWebアプリではこれを付けることも多い

<meta name="viewport"  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

あと、重要なのが
別のページに行ったときに、jQueryMobileは現在のページのDOM情報を保持したまま
別ページ遷移する

このため、もう一度同じページに戻ると
再びグラフ描画が実行され
2つのグラフが描画されてしまい
レイアウトが崩れる

この対策としては、
別のページに遷移した後にグラフを削除しておく

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

チャートライブラリー jqPlot

チャートライブラリー 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の使い方

より高度な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でジェスチャー

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

});