format メソッドと書式指示子

Android位置情報プログラミングで

format メソッドと書式指示子についてかかれていたので
そのときに気がついたことなどのメモ

書式指示子は
%s

これと format() を合わせることで
Web API のリクエストURLを作成できる

format() の書式は
String format(String format, Object args)

パラメータの解説もメモ
string format 書式指示子％sのある文字列（大抵はリクエストURLを代入した定数）

Object args 書式指示子に代入する文字列

今回、参考にした書式では
String.format(
WORDPRESS_URL,
Double.toString(location.getLatitude()), //緯度
Double.toString(location.getLongitude()), //経度
Integer.toString(100000), //範囲
Integer.toString(20) //取得件数
);

となっていたので、おそらくこの代入するものをリクエストパラメータに変更すれば
web api のアプリが作成できると思う

ちなみに 定数の WORDPRESS_URLは
リクエストURL

リクエストURLは、API関連を使うときには必要になるもので
基本的には
URLのあとに？をつけて、あとはパラメータを＆でくっつけて記述していく

受け取る方法がXMLにするか、JSONにするかで変わる

ワーカーから他のスクリプト読み込み

ワーカーから他のスクリプトの読み込み

従来のJavascriptでは、
ほかのJavascriptファイルの読み込みができなかったけど
Web Workersを使えば
importScripts()へファイルパスを指定して読み込むことができる

読み込むファイルは、複数指定することも可能で
　,て区切って記述する　

例えば
importScripts("game.js","login.js");

読み込みの順番は左から、つまり今回なら
game.jsから
となる

HttpClient と HttpURLConnectiion

Android 2.2 以前の場合、HttpClient のほうがバグがすくないので
これを使うのが最適だった

しかし、2.3 以降ではHttpURLConnection のほうが推奨になっている

HttpURLConnection のほうがシンプルでサイズが小さい
そして内部でネットワークの利用を減らし
バッテリー消耗、速度も改善させているため

基本的にこれからのアプリは４以上なのだから
HttpURLConnection を使うとかんがえたほうが正解だと思う

eclipseプロジェクトのコピー

Eclipse プロジェクトのコピーをするというものが
Androidアプリ位置情報プログラミング
であったので、これについて検索してみました

参考にさせていただいたのは
Eclipseでアンドロイドプロジェクトをコピーする

やりかたは、コピーしたいプロジェクトを右クリックして
copy

そして paste を選んで貼り付けます

すると、

というように

Copy of プロジェクト名
というようになりますので、そのままOKを押します

あとは、このプロジェクト名を
右クリック > Refactor > Rename
で名前を変更します

Android プロジェクトの場合、アプリの名前を変更するため
/res/value/strings.xml
の中にある
app_name の部分も変えます

現在地取得は実機でしかできない

Androidアプリ位置情報プログラミング

を参考に、位置情報プログラミングを勉強しています

今回、現在地を取得するというところでエラーがおきたので、
原因を考えてみたら、Android エミュレータでは現在地の取得ができないのが
原因でした

ちなみに、座標を指定することはDDMSでもできるのですが
現在地の取得というようなものに関しては
実機検証が必要となります

実機検証として、一番おすすめなのは
Nexus 7 Wi-Fi Tablet 16GB (Android 4.1 Jelly Bean)-国内正規品




実機検証でないとできないものは
現在地の取得、
NFC
音声入力などがあります

Nexus7 をすすめる理由としては、スマートフォンではないので
なにか不具合がでたとしても
通信手段がなくなってしまうことがないので安心という点
スマートフォンを購入するよりは安い
比較的新しいOSなので、過去の白ロムを購入するよりは
検証する機能が豊富

ということが理由です

Android SDK Manager のバグ

Eclipse で Android プロジェクトを作成する時に
Android Support Library がない
というエラーがでてくるため、
インストールを選ぶものの、何度もでてくるため
一度、パッケージをアンインストールし
再度インストールすることで、このエラーが消えました

最初は、Eclipse のバージョンが対応しなくなったと思ったのですが
原因はAndroid SDK のほうでした

WebWorkersか使えるか確認

Web Worksが使えるか確認

WebWorkersが使えるかは
windowオブジェクトに
Workerオブジェクトがあるか調べる

var ele=document.getElementById("result");
//WebWorkersが使えるか確認
if(!window.Worker){
ele.innerHTML="WebWorkersが使えません";
return;
}

次に、ワーカー作成

今回は、句読点変換ボタンがクリックされたときの処理

document.getElementById("convert1").addEventListener("click",fuction(){
var text=document.getElementById("sourcetext").value;
var myworker=new Worker("js/convert1.js");
myworker.onmessage=fuction(evt){
ele.innerHTML=evt.data;
}
myworker.postMessage(text);
},true);

では、解説
イベントハンドラでは、
テキストエリアに入力された文字列を読み出す

ソースは
var text=document.getElementById("sourcetext").value;

次に、new Worker()で
Workerオブジェクトを作成して
引数へ、Javascriptのパス
もしくは、URLを指定する

ソースは

var myworker=new Worker("js/convert1.js");

ここで指定するJavascriptは、
Worker専用にすること
理由は、DOM操作のコードがあると
エラーが発生するため

注意すべきは、Workerオブジェクトを作成した時点で
すぐに、ファイルが読みこまれ、実行までされること

ライブラリ指定のように、読み込みだけではないところに注意

読み込んだ時点で実行されるため
Workerオブジェクトへデータを渡すこともできないし
呼び出し元にデータや結果を、渡すこともできない
そのため、読み込みに指定するファイルは
イベントハンドラだけ定義して
何も処理しないようにしている

ちなみに、worker内で定義した関数や変数は
呼び出し元とは違う扱いになるため
名前が同じでも違うものとして認識されるらしい

関数のスコープの区切りの感覚にちかいかもしれない
　　　　　　

Web Worksの機能制限

Web WorksのJavascriptの機能制限

バックグラウンドで動かすため、いくつか機能制限がついてしまう

特に大きいのがHTMLページ内の
要素へアクセスできないということ
つまり、DOM制御ができない

ちなみに、DOMは
Document
Object
Model
の略

DOMでは、要素で囲まれた範囲を
ひとつのオブジェクトとして
扱う

オブジェクトなので
メソッド、プロパティがあり、
これらを使い、要素の操作ができる

Web Worksでは、このDOMが使えない

Web Worksで使えるオブジェクトは
ECMAScript-262で定義されてるオブジェクト
Array
Boolean
Data
Error
Fuction
Math
Number
Object
RegExp
String

navigatorオブジェクト

locationオブジェクト

というように
Web Worksでは、純粋なロジック部分のみ
処理する

DOM操作ができないため
並列実行される複数の処理が原因
で
ページを書き換えることがない


DOM処理は、Web Worksの呼び出しもとで行う

また、Web WorksからJavascriptファイルを
読み込んで実行できるので
ライブラリみたいな感覚で
Javascriptが使えるようになる

Web Worksとは

Web Worksとは

Web Worksは、Javascriptをバックグラウンドで複数同時に実行する機能

かつて、Javascriptは、簡単名処理が多く
瞬時に終わるものだったけど

HTML5あたりから
アプリが作れるぐらい要求されたりする

実際、ハイブリッドアプリ
phone gap
titanium studio
などで作成されるものは

HTML5
Javascript
CSS3
で作成されるものもある

こうなると、問題はJavascriptの処理速度

画像ファイル
ファイル解析
これらは、非常に時間がかかる
このため、ブラウザーが止まったり
反応しない時間が長いと、
ブラウザーでscriptを中止しますか？
とダイアログがでたりする

こんなときに、使えるのが
バックグラウンドで並列処理する
Web Works

これならブラウザーが、停止しないし
処理に時間がかかっても
停止するダイアログが表示かれない

これは、Web Worksが処理がおわったら
呼び出し音もとに伝達する仕組みのため

デスクトップからドラッグ&ドロップ

//画像ファイルの場合のみ処理
if(window.FileReader && (fileList[i].type.indexOf("image/")==0)){

これの解説
まず、files配列を使いやすくするため
変数fileListへ格納

あとは、forでドロップされたファイル数だけ処理

ドロップされたファイル数は
fileList.lengthで求めれる
これは、fileListは配列変数だから
lengthプロパティで求めれるから

画像ファイルの場合、ファイルオブジェクトのtypeプロパティが
image/
の文字表列で始まる

なので、typeプロパティの文字列を
indexOf()
で調べて
image/
が先頭にあるなら処理
とすればいい

ソースにすると
if(window.FileReader && (fileList[i].type.indexOf("image/")==0)){

世界測地系と、日本測地系

世界測地系と日本測地系

日本周辺の位置情報に特化した独自の位置情報の計算が
日本測地系といわれる

GoogleMapで使われているのは
世界共通の位置情報の計算方法で
世界測地系といわれる

現在、ほとんどのアプリは、世界測地系

なぜなら
日本測地系と、世界測地系では
位置情報に400mの誤差があるから

世界測地系と、日本測地系の変換は　
国土地理院
海上保安庁情報部
のWebサイトでできるが
現在地情報を取得するほとんどのAPIは
日本測地系と世界測地系の両方に対応している

http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=EclipseHTMLEditor

HTML5 のwebアプリを作成するときに
テキストエディタより
IDEを使った方が効率がよいし
なにより、タグうちを簡単にできるのがいい

ということで
Eclipse HTML Editor Plugin をいれました

やりかたは簡単で
http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=EclipseHTMLEditor
からダウンロードします

こちら
とかかれたリンクをクリックすると
ダウンロードページになり
ダウンロードできます

tk.eclipse.plugin.htmleditor_2.2.0.jar
がダウンロードできているので、
これをEclipse プラグインへ追加します

プラグインの追加といっても
eclipse のプラグインディレクトリにファイルをコピーするだけです

cp ダウンロード/tk.eclipse.plugin.htmleditor_2.2.0.jar ~/bin/eclipse/plugins/

私の場合、ホームディレクトリに
bin ディレクトリを作成し
そこのなかへ Eclipse を展開しました

これで、eclipse を起動すると
htmlファイルを編集する時に候補がでてくるようになります

また、これと同様にPHPの記述を楽にできる
PDTプラグインというものもあります

これらをインストールすることで
Webアプリの開発も効率的に行うことができます

ドロップ領域のイベント処理

ドロップ領域のイベント処理


ドラッグ項目がドロップ領域に入ると
dragenterイベントが発生

このイベントが発生したら、ドロップ領域の背景を変更

drop.addEventListener("dragenter",fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=""#ecc;
},true);

drop.addEventListener("dragleave",fuction(evt){
evt.preventDefault();
drop.style.backgroundColor="#eee";
},true);

drop.addEventListener("dragover",fuction(evt){
evt.preventDefault();
},true);

dragenterイベントでも
preventDefault()
でブラウザーのデフォルト動作を無効化しておく

ドラッグ項目がドロップ領域からでたら
dragleaveイベントが発生する
このイベントが発生したら
ドロップ領域の背景色を元に戻す

そして、一番重要なのが
dragoverイベント
これがないと
ドラッグ&ドロップできない
中身は
ブラウザーのデフォルト動作を無効化する
preventDefault();
だけでok

処理をまとめてみると
ドラッグ&ドロップは

drop.addEventListener("dragenter",fuction(evt){
evt.preventDefault();
//ドロップ領域に入ったときの処理
},true);

drop.addEventListener("dragleave",fuction(evt){
evt.preventDefault();
//ドロップ領域からでたときの処理
},true);

//ドラッグ&ドロップの必須
drop.addEventListener("dragover",fuction(evt){
evt.preventDefault();
},true);

ドラッグ処理のメモ

まず
document.querySelectorAll()
で、ドラッグするdiv要素をピックアップする

ちなみに、#dragitems divは
id="dragitems" の中のdiv要素という意味

これを変数 itemListへいれれば
ドラッグ対象となるdiv要素が配列要素として入る

ソースにすると
var itemList = document.querySelectorAll("#dragitems div");

次にドラッグ対象のdiv要素の
draggableプロパティへtrueを設定
これで、ドラッグ可能になる

ソースにすると
itemList[i].draggable=true;

単純にドラッグするだけならこれだけで
いいけど
普通はどこかにドロップする

このとき、必要なのがドロップ先で
なにがドロップされたか、
わかるようにすること

今回はドラッグ対象のdiv要素へIDをつけている

ドラッグが開始されると
div要素では
dragstartイベント
が発生する

このdragstartイベントを捕捉し、
ドロップ先に渡すデータを設定

ソースにすると
itemList[i].addEventListener("dragstart",fuction(evt){

ドロップ先にdivのIDを渡すには
Eventオブジェクトを介して
データのやりとりをする

Eventオブジェクトには
データのやりとりをするための
dataTransferオブジェクトがあるので
これを使う

dataTransferオブジェクトの
setData()
で、データをドロップ先へ渡せる

setData()は
最初のパラメータに
データの種類を示す文字を指定する

指定する文字は、すでに決まっていて
自分で任意のものを選ぶことは残念ながらできない

文字なら text
URLなら url
となる
ただし、ブラウザーによっては
text
しか使えないから
無難にいくならtextを指定するほうがよい

div要素のIDとかならtextになる

そして、ドロップ先に渡すデータは
setData()の
2番目のパラメータに指定する

dragstartイベントが発生したとき
ドラッグ開始された要素の情報が
Eventオブジェクトの
currentTargetオブジェクトに入る

この
currentTargetオブジェクトの
idプロパティへ
div要素のIDが入っているので
これをsetData()の
2番目のパラメータとして指定すれば
要素のIDを渡せる

ソースにすると
evt.dataTransfer.setData("text",evt.currentTarget.id);

draggable=trueは
ドラッグ可能にするだけで
ドロップするときの処理などは
Javascriptで書く必要があるので注意

HTML5のドラッグ&ドロップ

HTML5のドロップ&ドラッグは
デスクトップからのファイルもドロップできる

また、File APIと組み合わせて
デスクトップからドロップしたファイルの内容を読み込んで処理できる

たとえば
デスクトップの画像を
Canvasへ
ドラッグ&ドロップし
Canvasへ画像を描画するなと

Canvasまとめ

Canvas関連まとめ

Canvasは2Dも3Dも描画できる

ただし、2D描画は2Dコンテキストを取得しないとダメ

塗り関連はfillStyle
線関連はstrokeStyleで
設定する

座標点の移動は
moveTo()
でする

直線を描くには
lineTo()

四角形を描画するには
fillRect()
rect()
clearRect()
strokeRect()
を使う

曲線を描くときには
二次ペジェ曲線ならquadraticCurveTo()

三次ペジェ曲線なら
bezierCurveTo()
を使う

複雑な図形、多角形などを描くには
複数のパスを組み合わせる

パスは
beginPath()で新規にパスを作成できる

パスを閉じるには
closePath()を使う

クリッピングするには、パスを作成したあとclip()を使う

画像と映像の描画は
drawImage()を使う

影は
shadowColor
shadowBlur
shadowOffsetX
shadowOffsetY
で設定する

文字の描画は
fillText()
strokeText()
を使う

文字サイズや書体は、fontに設定

文字の行揃えは textAlignで設定

不透明度は
globalAlphaで設定

線幅は lineWidth
線端の形状は lineCapで設定

ピクセルデータを読み出すには
getImageData()

ピクセルデータを描画するには
putImageData()

変数へのピクセルデータ保存

変数へピクセルデータ保存

Canvasのピクセルデータを読み出すには
getImageData()
を使う

getImageData()は、読み出したいピクセルの範囲をパラメータで指定する

getImageData()の書式は

getImageData(X座標, Y座標, 横幅, 縦幅)

もし、Canvas内のすべてのデータを読み出すなら
getImageData(0,0,canvasObj.width,canvasObj.height)

getImageData()は
ピクセルデータを含むオブジェクトを返す
ピクセルデータを利用したいときには
返されたオブジェクトの
data配列へアクセスする

お絵かきアプリとかで
取り消し処理したいときには
このピクセルデータをCanvasへコピーしている

ローカルストレージと取り消し機能

ローカルストレージと取り消し機能

取り消し機能には
過去に遡り取り消しできるタイプ
一度だけの取り消し機能タイプがある

ブラウザーで
何回も取り消し可能にすると
その分メモリを消費する

このため、多くのアプリでは
取り消し可能に制限かついている

ちなみに、今回はお絵かきアプリのように
一回だけ取り消しするのが
前提にしてみた

取り消し機能を実際するには
Canvasの内容をどこかに保存しないとダメ

まず、Canvasの内容を保存するには
Canvas内にあるすべてのピクセルデータを
変数へ保存する方法があり
これは、何度も取り消しができるようにするときに使う

もう一つの方法としては
取り消し用に見えないCanvasを用意して
そこにピクセルデータをコピーする方法
CanvasのdrawImage()は
最初のパラメータに
Canvasオブジェクトを指定すると
Canvasの内容をコピーして描画できる
これは、取り消し回数が1回の時のみ使える方法

ローカルストレージへピクセルデータを保存することもできるけど
ローカルストレージには要領制限があるし
ほかのデータが入っているときに
要領制限の問題で
確実に保存できるか、わからないため
この方法は微妙

SVGについて

SVG

SVGは
scalable
vector
graphics
の略

SVGはHTML5の関連技術なので
HTML5の仕様には含まれない

canvasでもSVGでも
イラストや図形が描ける

canvasとSVGの違いを紹介

まず、canvas
こちらはピクセルの集まりで
グラフィックを表現

次にSVG
こちらは座標点の集まりで
グラフィックを表現
このため、毎回描画するときに計算するので
canvasより遅い


あと
canvasは
ピクセルごとにエフェクト処理できるけと
SVGでは
ピクセル単位のエフェクト処理はできない

まるでメリットなしみたいだけど
SVGにもメリットがあり
少ないデータでどのようなサイズでも
グラフィック描画ができるという利点がある

これは、canvasだと
画像を縮小したら画像が潰れたり
拡大したら、ピクセルが大きくなり
輪郭がブロックみたいなかんじになる
よくあるパソコンとかで、
ドット絵を拡大したような状態になるものを
描画したいときに

SVGなら
毎回サイズにあわせて計算するから
ベストな状態になるというのが
利点

あと、Canvasは描画するときに
Javascriptの制御が必要だけど

SVGは
XMLベースなので
HTML内に
svg要素を書いて図形を描画できる

canvasへの文字の描画

文字の描画

文字の描画はマウスボタンがクリックされたときの
イベントを捕捉してから行う

あと、文字を描画するときには
一旦canvas全体を黒く塗りつぶしてから
行う
これは
すでにある文字の上に重なって表示されると
わかりにくいから

この処理のソースは
context.fillStyle="black";
context.fillRect(canvasObj.width,canvasObj.height);
となる

表示する文字は
テキストフィールドへ入力した文字なので
読み出して変数へ格納

ソースにすると
var text = document.getElementById("char").value;

あとは、fillText()で読み出した文字を描く
fillText()のパラメータは
書きたい文字
横幅
縦幅

これが
textに格納している文字
canvasObj.width /2
320

となる

canvasObj.width/2は
画面の大きさの半分

lineCapプロパティ

lineCapプロパティのパラメータ

butt
線の端まで描画

round
角を丸くして描画

square
角を四角くして描画

マウスでCanvas描画

マウスでCanvas描画

まず、マウスポインタがCanvasにあるか判別
これには
mousemoveイベントを使う
Canvasにないなら、そこで終了

canvasObj.addEventListener("mousemove",fuction(evt){

さらに、判定
今度はマウスボタンを押しているか
判定
もし、判定して押してないなら
その後の処理は不要だから終了

if(!canvasObj.drawFlag){
return;
}

ここまで、判定を通ってきたら
マウスの座標を調べる

var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;

そして、座標を線で結んでいく
結ぶには
前回の座標と、今の座標を直線で描画すればok

strokeStyleで色を設定
lineWidthで線の幅
lineCapで roundを指定すると線の端が丸くなるのでこれを指定

beginPathでパスを生成し
moveTo()とlineTo()で座標を指定

ちなみにパラメータは
moveTo(前のX座標, 前のＹ座標)

lineTo(今のX座標, 今のY座標)
となる

そして、後は
stroke()で実際線を描く
strokeを書かないと、場所を指定しただけなので注意

マウスボタンのアップダウン処理

描画のときの処理

実際に、canvasに描画するには

canvasObj.addEventListener("mousemove",fuction(evt){
if(!canvasObj.drawFlag){
return;
}

var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;

context.strokeStyle="rgba(255,255,255,1)";
context.lineWidth=10;
context.lineCap="round";
context.beginPath();
context.moveTo(canvasObj.oldX,canvasObj.oldY);
context.lineTo(x,y);
context.stroke;
context.closePath();
canvasObj.oldX=x;
canvasObj.oldY=y;
},false);

では、恒例の解説へ

まず、マウスポインタがcanvasにあるかを判定する
これは、mousemoveイベントを使う

canvasObj.addEventListener("mousemove",fuction(evt){

マウスボタンが押されたら
押されたら場所のx,y座標を求め
Canvasオブジェクトの
oldXoldY
へ代入

このときに、格納する
oldX
oldY
は自作の変数

あと、マウスの座標はEventオブジェクトに入っているので
offsetX
offsetY
を読み出せば、x,y座標を取得できる

ただし、firefoxの場合は別で
layerX
layerY
に格納されている　

このため
||を使って、どちらでも対処可能にする
||は論理演算子のOR

ここをソースにすると
canvasObj.oldX=evt.offsetX||evt.layerX;
canvasObj.oldY=evt.offsetY||evt.layerY;

続いて、マウスのボタンを押している状態か、それとも押していない状態か判別するため
フラグを作る
押した、押さないだけなら
clickイベントでいいけと
押したままというイベントはないので
これはフラグで対応する

ということで、
mousedownイベントなら
マウスを押した状態なので
このときに
drawFlag=true
にする

逆に、マウスを離したときには
mouseupイベントのときに
drawFlag=false;
とすれば
判別することができる

とりあえず、ここまでが
描画するときに必要なマウスの部分の処理

動作確認データ組み込み

で該当するところからになる

位置情報アプリの勉強するときには
ほんとはまずは地図を表示するところから
始めて
現在地取得したり地図に
マーカー表示するところからやったほうがわかりやすい

現在、GMOクラウドで wordpress を構築を考えているので
このブログと、自宅サーバーの中の記事をまとめて
書くようにしたほうが今後見直すときにわかりやすいかもしれない

Android 2.3.3 google mapアプリのメモ

まずAndroidManifest.xml 編集

<uses-library
android:name="com.google.android.maps"
android:required="true"/>
を追記

場所は
</application>
の上

android:name
は追加するライブラリ

android:required="true"
端末にライブラリがあるかチェックする

uses-libraryタグ
は
アプリをダウンロードする端末が提供可能ライブラリを宣言
端末にライブラリがないと正しく動作しない

続いてパーミッション設定

必要なのは
android.permission.ACCESS_MOCK_LOCATION
擬似位置情報の使用

android.permission.ACCESS_FINE_LOCATION
位置情報を使用

android.permission.INTERNET
インターネット接続

次にUI作成

これはres/layout/の中で行う

まず、最初に
仕様

必要なのは
現在地の遷移
周辺ランドマーク表示
地図の衛生写真表示切り替え機能

これらはボタンにする

地図が表示され、その上にボタンが並んでいる
というもの

親になるView には
RelativeLayout
をつかう

RelativeLayout
の子ビューは親ビューや子ビューの位置から
設定できる

このときに、位置を具体的に設定しないと
ボタンが３つ重なってしまう

今回はMap に重ねて表示したいから
MapVIew にボタンを重ねる

あと、MapView はjava で制御するから
id をふっておく

これは、html5 と java script のときと同じ

ボタンの文字は
string.xml で設定

あと、見栄えを
よくしたいから
ボタンを揃えた
これは
ボタンの親View にLinearLayout を設定するとできる

仕組みとしては
最初に
RelativeLayout
次に
LinearLayout
その上にボタン

LinearLayout の子View には
android:layout_weight
の設定ができる

これは親レイアウトの余白を自動で埋める設定
配分は
子Viewで余白を設定した比率になる

この仕組みを使うと
ボタンの文字の長さを均一にできる

これには
layout_width を 0 にしておくこと
通常は
文字の大きさ似合わせたり
幅を指定するから意外だけど
今回のやりかたなら
layout_width=0
なら
自動的にサイズ補正してくれるというもの

あと、Android でボタンの設定には
android:onClick
を使う

このパラメータに文字列を指定することで
ボタンがタップされたとき
そのActivity の同じ名前のメソッドが呼び出される

ボタンにはわかりやすい名前をつけておくと
あとあと楽

ボタンに名前をつけるのは
web 関連をやったことがあるなら
button id="名前"
と同じかんかく

google map API の API key の確認

Androidアプリ位置情報プログラミング
を参考に、位置情報アプリを作っていこうと思います

以前 API key は取得しているので
今回は確認してみました

書籍ではURLが掲載されていますが
そのURLを打ち込むと

https://developers.google.com/maps/documentation/android/
へアクセスします

ここで
Getting Started
をおすと
Obtaining an API Key
というところがあります
意味は
APIキーの取得

ここに API key が書かれていました

Androidアプリのアイコン設定の項目

Androidアプリのアイコン設定の項目

アイコン設定が英語なので
解説

Foreground
作成する画像のタイプを選択

Trim Surrounding Blank Space
チェックを入れるとスペースのトリミングをする

Additional Padding
画像の余白設定

Foreground Scaling
Foregroundの画像のクロップ設定

Shape
アイコンの形

Background Color
背景色

Foreground Color
Foregroundの画像の色


Foregroundの設定項目は
Image
パソコンの中から画像を選択

Clipart
用意されている画像から選ぶ
chooseを押すと候補がでてくる

Text
文字を書く
よう書籍アプリとかであるタイプ
Arial Boldで、さらに細かい設定ができる



続いて、Foreground Scalingの項目

Crop
はみ出た部分のクロップを行う

Center
アイコンの中心に表示


Shapeでの設定
None
背景画像を指定しない

Square
正方形の背景にする

Circle
円形のアイコンにする

マウスで描画する仕組み

マウスで描画する仕組み

マウスで描画する仕組みのメモ

Canvasでクリックされたら
マウスの座標を
oldX
oldY
へ保存

マウスボタンの押した、押さないの識別のため、
フラグをつくり
このフラグはdrawFlagへ保存

で
drawFlag=trueなら、Canvasへ描画
drawFlag=falseなら、描画しない

これが、最初の処理

次は、描くときの処理
drawFlagがtrueなら
oldX
oldY
から、現在のマウスの座標まで
直線を描画

あとは、マウスを離したときの処理
マウスを離すと
drawFlag=false;
になるので、描画をやめる

マウスで描くための準備

マウスで描くための準備

マウスの動きはmousemoveイベントで補足

次に
マウスボタンの押されている状態は
mousemoveイベント内で調べるか
マウスボタンを押したときに発生するmousedownイベントを利用して調べる

mousedownイベントの場合は
イベントハンドラ内でマウスイベントの状態を変数なとに記憶しておいて
mousemoveイベントから呼び出される
イベントハンドラ内で参照する

マウスボタンの状態以外で
保存しておくのがあり、それが
線を引き始めたときのマウスの座標

マウスで文字を書くなら
座標を点にして、これらを線で結ぶようになる

このため、始点になる古い座標、つたり前の座標も必要

これらの情報は
Canvasオブジェクトにプロパティを追加し
そこに保存する
プロパティにすれば、識別できるから
あとは、これでコントロールできる

Canvasの塗りつぶしかた

Canvasの塗りつぶしかた

Canvas全体を塗り潰すには
fillRect()を使う

パラメータは、左から
始まりのx座標,
始まりのy座標,
横幅,
縦幅

ソースにすると
context.fillStyle="black";
context.fillRect(0,0,canvasObj.width,canvasObj.height);

fillStyleは塗り潰す色の指定