SQLの窓

2015年04月24日


Small Basic。拡張ライブラリを追加して、非同期アニメーションで弾が当たったら爆発効果



TechNet Small Basic LitDev Extension Version 1.1.0.2 を追加インストール( 実際はファイルをコピーするだけ )と、色々びっくりするようなな機能が簡単に実行できるようになります。

Small Basic をめちゃくちゃ拡張するライブラリ

その中でも、とてもタイムリーだったのが、非同期アニメーションを分割画像を読み込むだけで簡単に実装できるところです。
GraphicsWindow.BackgroundColor = "DarkGray"
LDGraphicsWindow.PauseUpdates() ' 画像をロードしている間表示しない
LDShapes.AnimationInterval = 0 ' アニメーションしない
anim = LDShapes.AddAnimatedImage(Program.Directory+"\anim.png","True",4,4)
Shapes.Move(anim,100,100)	' 表示位置
LDShapes.AnimationInterval = 75 ' 75 ms インターバルでアニメーション
LDGraphicsWindow.ResumeUpdates() ' 画面表示
上のコードは、サンプルコードそのままです。このコードでは、AddAnimatedImage の第二引数が、"True" なので自動的に繰り返し表示を行います。しかし、目的はボール(弾) が当たった時に一回だけアニメーションするので以下のように実装する事になります。
' ウィンドウの背景色
GraphicsWindow.BackgroundColor = "White"
' ウインドウの位置
GraphicsWindow.Left = 100
GraphicsWindow.Top = 40
' リサイズできないようにする
GraphicsWindow.CanResize = 0

LDShapes.AnimationInterval = 25 ' 爆発アニメーション用
' アニメーション画像の読み込み( 第二引数で自動繰り返しをしない )
explosion = LDShapes.AddAnimatedImage(Program.Directory+"\anim.png","False",4,4)
LDShapes.ZIndex( explosion, 1000 )  ' 爆発なので手前に表示する
Shapes.Zoom(explosion,2,2)          ' 爆発の表示サイズを倍にする
' 爆発画像を非表示にする
Shapes.HideShape(explosion)

LoadImage_Url = "https://lh5.googleusercontent.com/-3IWAlBbUSYs/VLgFjekftnI/AAAAAAAAYKw/VM5FI7bYNzw/s800/142133580685821985693.jpeg"
'LoadImage_Url = ""
LoadImage_Opacity = 50
LoadImage()

' ******************************************
' 白いボール
' ******************************************
GraphicsWindow.BrushColor = "#ffffff"   ' ボールの塗りつぶし色
Ball_Speed = 1
Ball_Size = 30  ' ボールの直径
Ball_Name = Shapes.AddEllipse(Ball_Size, Ball_Size)
' 初期位置
Ball_x = LoadImage_width / 2 - Ball_Size / 2  ' ボールの中心を画面の中心に
Ball_y = Ball_Size * -1   ' ボールが隠れる位置( 直径ぶん、上辺の上 )
Shapes.Move( Ball_Name, Ball_x, Ball_y )
Sub Ball

  Ball_y = Ball_y - Ball_Speed
  If Ball_y > (Ball_Size * -2) Then
    Shapes.Move( Ball_Name, Ball_x, Ball_y )
    ' TextWindow.WriteLine(Ball_y) 
  Else
    Ball_y = Ball_Size * -1
  EndIf

EndSub

' ******************************************
' 四角形
' ******************************************
GraphicsWindow.BrushColor = "#00ff00"   ' 四角形の塗りつぶし色
Rect_Speed = 0.3
Rect_Size = 40  ' 高さ
Rect_Name = Shapes.AddRectangle(Rect_Size * 2, Rect_Size)   ' 幅は、高さの倍
' 初期位置
Rect_x = Rect_Size * -2   ' 箱が隠れる位置( 幅ぶん左 )  
Rect_y = Rect_Size * 1    ' 箱一個ぶん下
Shapes.Move( Rect_Name, Rect_x, Rect_y )
' 当たりアニメーション中フラグ
Rect_Hit_Flg = 0  '  0 は、通常時でアニメーション中では無い
Sub Rect
  If Rect_Hit_Flg = 0 then
    Rect_x = Rect_x + Rect_Speed
    If Rect_x < LoadImage_width Then
      Shapes.Move( Rect_Name, Rect_x, Rect_y )
      ' TextWindow.WriteLine(Rect_y) 
    Else
      Rect_x = Rect_Size * -2
    EndIf
    ' 当たり判定用の値を用意する
    Hit_x = Rect_x
    Hit_width = Rect_Size * 2
    Hit_y = Rect_y
    Hit_height = Rect_Size
    ' 当たり判定のチェック
    Hit()
    ' 当たり判定からの結果をこちらの条件にセットする
    Rect_Hit_Flg = Hit_Flg
    ' 当たっていたら、ボールは先に初期化しておく
    If Rect_Hit_Flg <> 0 Then
      ' ボールは消えるが、爆発アニメーションを実行
      Shapes.ShowShape(explosion)
      LDShapes.Centre(explosion,Ball_x,Ball_y)
      LDShapes.AnimationSet(explosion,1)
      
      Ball_y = Ball_Size * -1
    EndIf
  Else

    Shapes.Rotate(Rect_Name, 1000 - Rect_Hit_Flg)

    Rect_Hit_Flg = Rect_Hit_Flg - 1
    ' アニメーションが終了すると初期位置に移動
    If Rect_Hit_Flg = 0 Then
      Shapes.Rotate(Rect_Name, 0)
      Rect_x = Rect_Size * -2
    EndIf
  EndIf
  
EndSub

' ******************************************
' 当たり判定
' ******************************************
Sub Hit
  Hit_Flg = 0
  ' 当たり判定は、四角形の居る位置( 高さ ) に、ボールが到達した時で
  If Hit_y <= Ball_y And Ball_y <= Hit_y + Hit_height Then
    If Hit_x <= Ball_x + Ball_Size And Ball_x <= Hit_x + Hit_width Then
      ' アニメーション回数
      Hit_Flg = 1000
    EndIf
  EndIf
EndSub

' ******************************************
' キーイベント
' ******************************************
GraphicsWindow.KeyDown = OnKeyDown
Sub OnKeyDown

  If Ball_y <= (Ball_Size * -1) Then
    Ball_y = LoadImage_height
  EndIf
  
EndSub

' ******************************************
' アニメーションループ
' ******************************************
Loop:
  Program.Delay(1)
  Ball()
  Rect()
  
Goto Loop


' ******************************************
' グラフィックウインドウに画像を表示する
' LoadImage_Url : URL
' LoadImage_Opacity : 不透明度
' ******************************************
Sub LoadImage

  If LoadImage_Url <> "" then
    LoadImage_pic = ImageList.LoadImage(LoadImage_Url)
    LoadImage_img = Shapes.AddImage(LoadImage_pic)
    Shapes.SetOpacity(LoadImage_img, LoadImage_Opacity)
    LoadImage_width = ImageList.GetWidthOfImage(LoadImage_pic)
    LoadImage_height = ImageList.GetHeightOfImage(LoadImage_pic)
  Else
    LoadImage_width = Desktop.Width * 0.8
    LoadImage_height = Desktop.Height * 0.8
  EndIf
  GraphicsWindow.Width = LoadImage_width
  GraphicsWindow.Height = LoadImage_height
  GraphicsWindow.DrawResizedImage(LoadImage_img, 0, 0, LoadImage_width, LoadImage_height)

EndSub

LDShapes.AnimationSet(explosion,1) で、非同期でアニメーションが開始されます(1番の画像から最後の画像まで)。プログラムのループ処理は継続されるので、アニメーション中も弾を撃つ事が可能になっています。

爆発アニメーション用の背景透過 PNG



この画像はサンプルにあったものをそのまま使っています。ただ、一番右下の画像が元々の画像では小さい点が表示されていました。それでは、アニメーションの最後のフレームとして表示し続けてしまうので、何も無い透過した状態に変更しました。



posted by lightbox at 2015-04-24 15:31 | Small Basic | このブログの読者になる | 更新情報をチェックする

2015年04月23日


Small Basic。横に動く長方形をキーを押したらボールを発射して命中させて回転させるゲーム雛形



▼ 一つ前のコード
Small Basic。やはり基本はゲーム作って楽しむべきなので、キーを押したらボールを発射する雛形

Small Basic では、発行ボタンですぐ WEB上に公開して、SilverLight によって動作させる事ができます。ローカルでは画像が使えますが、WEB 上ではメモリだけで動作させるコードにする必要があります。

▼ SilverLight で実行
http://smallbasic.com/program/?BZN043

▼ 動画のソースコード
' ウィンドウの背景色
GraphicsWindow.BackgroundColor = "White"
' ウインドウの位置
GraphicsWindow.Left = 100
GraphicsWindow.Top = 40
' リサイズできないようにする
GraphicsWindow.CanResize = 0

LoadImage_Url = "https://lh5.googleusercontent.com/-3IWAlBbUSYs/VLgFjekftnI/AAAAAAAAYKw/VM5FI7bYNzw/s800/142133580685821985693.jpeg"
'LoadImage_Url = ""
LoadImage_Opacity = 50
LoadImage()

' ******************************************
' 白いボール
' ******************************************
GraphicsWindow.BrushColor = "#ffffff"   ' ボールの塗りつぶし色
Ball_Speed = 1
Ball_Size = 30  ' ボールの直径
Ball_Name = Shapes.AddEllipse(Ball_Size, Ball_Size)
' 初期位置
Ball_x = LoadImage_width / 2 - Ball_Size / 2  ' ボールの中心を画面の中心に
Ball_y = Ball_Size * -1   ' ボールが隠れる位置( 直径ぶん、上辺の上 )
Shapes.Move( Ball_Name, Ball_x, Ball_y )
Sub Ball

  Ball_y = Ball_y - Ball_Speed
  If Ball_y > (Ball_Size * -2) Then
    Shapes.Move( Ball_Name, Ball_x, Ball_y )
    ' TextWindow.WriteLine(Ball_y) 
  Else
    Ball_y = Ball_Size * -1
  EndIf

EndSub

' ******************************************
' 四角形
' ******************************************
GraphicsWindow.BrushColor = "#00ff00"   ' 四角形の塗りつぶし色
Rect_Speed = 0.5
Rect_Size = 40  ' 高さ
Rect_Name = Shapes.AddRectangle(Rect_Size * 2, Rect_Size)   ' 幅は、高さの倍
' 初期位置
Rect_x = Rect_Size * -2   ' 箱が隠れる位置( 幅ぶん左 )  
Rect_y = Rect_Size * 1    ' 箱一個ぶん下
Shapes.Move( Rect_Name, Rect_x, Rect_y )
' 当たりアニメーション中フラグ
Rect_Hit_Flg = 0  '  0 は、通常時でアニメーション中では無い
Sub Rect
  If Rect_Hit_Flg = 0 then
    Rect_x = Rect_x + Rect_Speed
    If Rect_x < LoadImage_width Then
      Shapes.Move( Rect_Name, Rect_x, Rect_y )
      ' TextWindow.WriteLine(Rect_y) 
    Else
      Rect_x = Rect_Size * -2
    EndIf
    ' 当たり判定用の値を用意する
    Hit_x = Rect_x
    Hit_width = Rect_Size * 2
    Hit_y = Rect_y
    Hit_height = Rect_Size
    ' 当たり判定のチェック
    Hit()
    ' 当たり判定からの結果をこちらの条件にセットする
    Rect_Hit_Flg = Hit_Flg
    ' 当たっていたら、ボールは先に初期化しておく
    If Rect_Hit_Flg <> 0 Then
      Ball_y = Ball_Size * -1
    EndIf
  Else

    Shapes.Rotate(Rect_Name, 1000 - Rect_Hit_Flg)

    Rect_Hit_Flg = Rect_Hit_Flg - 1
    ' アニメーションが終了すると初期位置に移動
    If Rect_Hit_Flg = 0 Then
      Shapes.Rotate(Rect_Name, 0)
      Rect_x = Rect_Size * -2
    EndIf
  EndIf
  
EndSub

' ******************************************
' 当たり判定
' ******************************************
Sub Hit
  Hit_Flg = 0
  ' 当たり判定は、四角形の居る位置( 高さ ) に、ボールが到達した時で
  If Hit_y <= Ball_y And Ball_y <= Hit_y + Hit_height Then
    If Hit_x <= Ball_x + Ball_Size And Ball_x <= Hit_x + Hit_width Then
      ' アニメーション回数
      Hit_Flg = 1000
    EndIf
  EndIf
EndSub

' ******************************************
' キーイベント
' ******************************************
GraphicsWindow.KeyDown = OnKeyDown
Sub OnKeyDown

  If Ball_y <= (Ball_Size * -1) Then
    Ball_y = LoadImage_height
  EndIf
  
EndSub

' ******************************************
' アニメーションループ
' ******************************************
Loop:
  Program.Delay(1)
  Ball()
  Rect()
  
Goto Loop


' ******************************************
' グラフィックウインドウに画像を表示する
' LoadImage_Url : URL
' LoadImage_Opacity : 不透明度
' ******************************************
Sub LoadImage

  If LoadImage_Url <> "" then
    LoadImage_pic = ImageList.LoadImage(LoadImage_Url)
    LoadImage_img = Shapes.AddImage(LoadImage_pic)
    Shapes.SetOpacity(LoadImage_img, LoadImage_Opacity)
    LoadImage_width = ImageList.GetWidthOfImage(LoadImage_pic)
    LoadImage_height = ImageList.GetHeightOfImage(LoadImage_pic)
  Else
    LoadImage_width = Desktop.Width * 0.8
    LoadImage_height = Desktop.Height * 0.8
  EndIf
  GraphicsWindow.Width = LoadImage_width
  GraphicsWindow.Height = LoadImage_height
  GraphicsWindow.DrawResizedImage(LoadImage_img, 0, 0, LoadImage_width, LoadImage_height)

EndSub


処理の要点

当然ですが、ボール(弾)を増やしたり長方形(敵)を増やしたりする事を想定してサブルーチンを作成しています。その為、Hit サブルーチンは共用する為に専用の判定用座標変数にセットされた値でチェックするようにしています。四角形のアニメーションは、四角形の描画処理と同時持ちして、ボールが当たればボールを自由にして回転アニメーションを開始します。当たった直後、ボールはすぐ使えるようになります。

現実問題として、ボールの処理は単純なので配列で行ったほうがいいでしょう。長方形の処理はいろいろな敵の動作が必要になって来るのでサブルーチン毎の処理が必要になると思います。



タグ:Small Basic
posted by lightbox at 2015-04-23 21:14 | Small Basic | このブログの読者になる | 更新情報をチェックする

2015年04月20日


Small Basic。やはり基本はゲーム作って楽しむべきなので、キーを押したらボールを発射する雛形



Microsoft Small Basic 1.1 の使い方

Microsoft からダウンロードしてインストールすると、誰でもすぐ使えるプログラミング環境です。上記リンク先内で基本部分のチュートリアルはまとめましたが、いざゲームを作るとなるといくつか注意事項があります。

画面の大きさ

これは、画像を使ってサイズ決定するようにしました。そして、画像に非透過度を設定して薄くしています。好みでいろいろな背景を設定すると同時に、サイズを指定する事になります。

ループ処理

結果的には、Goto 文で単純ループを作成しています。Program.Delay(1) は、ループ処理を安定させる為のおまじないだと思って下さい。永久ループではありますが、CPU 負荷は殆ど無く、イベント割り込みも何も問題なく動作しています。

最初、タイマーも試したのですが表示にちらつきが出た上にいろいろ弊害があるようでした。ゲーム作る場合に使う事を想定して実装されているタイマーでは無いようでした。

オブジェクト らしく

ボールを移動させるのに、サブルーチンが必要ですが、Small Basic ではそれしか無いので、サブルーチン定義の上部に初期処理を記述しています。その部分がコンストラクタみたいなものだと思って下さい。
'  ウィンドウの背景色
GraphicsWindow.BackgroundColor = "White"
'  ウインドウの位置
GraphicsWindow.Left = 100
GraphicsWindow.Top = 40
'  リサイズできないようにする
GraphicsWindow.CanResize = 0

LoadImage_Url = "https://lh5.googleusercontent.com/-3IWAlBbUSYs/VLgFjekftnI/AAAAAAAAYKw/VM5FI7bYNzw/s800/142133580685821985693.jpeg"
LoadImage_Opacity = 50
LoadImage()

' ******************************************
' 白いボール
' ******************************************
GraphicsWindow.BrushColor = "#123456"   ' ボールの塗りつぶし色
Ball_Speed = 1
Ball_Size = 30
Ball_Name = Shapes.AddEllipse(Ball_Size, Ball_Size)
Ball_x = LoadImage_width / 2
Ball_y = Ball_Size * -1
Shapes.Move( Ball_Name, Ball_x, Ball_y )
Sub Ball

  Ball_y = Ball_y - Ball_Speed
  If Ball_y > (Ball_Size * -2) Then
    Shapes.Move( Ball_Name, Ball_x, Ball_y )
    ' TextWindow.WriteLine(Ball_y)    
  Else
    Ball_y = Ball_Size * -1
  EndIf
  
EndSub

' ******************************************
' キーイベント
' ******************************************
GraphicsWindow.KeyDown = OnKeyDown
Sub OnKeyDown
  
  If Ball_y <= (Ball_Size * -1) Then
    Ball_y = LoadImage_height
  EndIf
  
EndSub

' ******************************************
' アニメーションループ
' ******************************************
Loop:  
  Program.Delay(1)
  Ball()
Goto Loop


' ******************************************
' グラフィックウインドウに画像を表示する
' LoadImage_Url : URL
' LoadImage_Opacity : 不透明度
' ******************************************
Sub LoadImage
 
  LoadImage_pic = ImageList.LoadImage(LoadImage_Url)
  LoadImage_img = Shapes.AddImage(LoadImage_pic)
  Shapes.SetOpacity(LoadImage_img, LoadImage_Opacity)
  LoadImage_width = ImageList.GetWidthOfImage(LoadImage_pic)
  LoadImage_height = ImageList.GetHeightOfImage(LoadImage_pic)
  GraphicsWindow.Width = LoadImage_width
  GraphicsWindow.Height = LoadImage_height
  GraphicsWindow.DrawResizedImage(LoadImage_img, 0, 0, LoadImage_width, LoadImage_height)

EndSub

移動処理の概要

初期処理で画面の外にボールを移動しています。その状態で何かキーを押した時のみボールを画面の一番下の中央に移動させます。後は、画面の外に出るまで移動させますが、画面の外に出た場合は変数としては初期値につねに設定されて事実上ボールには何も起こりません。

ボールの移動中は、キーが押されてもキーが押してボールを発射できるのは画面の外に出ている場合だけなので、画面内にボールが表示されている時にキーを押しても反応しません。

結果的に一つのボールに対して、Ball というサブルーチンが一つ対応しており、Ball_ と言う変数で全てまかなっているオブジェクトのようなものだと思って下さい。

この後、ボールを増やしたり他のオブジェクトを増やしていってレスポンスがどうなるかは解りませんが、簡単なゲームならすぐ作れると思います。



タグ:Small Basic
posted by lightbox at 2015-04-20 18:37 | Small Basic | このブログの読者になる | 更新情報をチェックする

2015年04月19日


Monaca と 本当の 『Onsen UI最小限のテンプレート』



エクスポートしただけなので、インポートして使えます。



手元に Monaca 公式ガイドブックがあるのですが、インターネット上のドキュメントだけは情報が整理されていない上に一番キモとなるものは、検証しないと解らない事が多かったです。

とりあえず、ons-gesture-detector 要素の使い方のサンプルとして見て下さい。ちなみに、イベント内の gesture 情報を見るには通常 jQuery が必要です。jQuery mobile では、使えません。また、イベントの書き方としても、$(document).on('イベント', 'セレクタ', function(e){} でないと動作しませんでした。他の書き方で書いても、Monaca デバッガで動いても apk にビルドしたものは動作しませんでした。目安としては、プレビューで動かないものは、apk でも動かない可能性があります。

※ jQuery mobile は、コンソールのクリアがうまくいかないような気もします

index.html
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script src="components/loader.js"></script>
	<link rel="stylesheet" href="components/loader.css">
	<link rel="stylesheet" href="css/style.css">
	<script>
		ons.bootstrap();
		ons.ready(function(){
			console.clear();
			console.log("開始");

			$(document).on('click', '#gestureBtn', function(e){
				console.log("ページ移動\n------------");
				myNavigator.pushPage('page2.html');
			});

			// *************************************
			// gestureBtn 用
			// *************************************
			// タップ
			$(document).on('tap', '.gestureTest', function(e){
				console.log("tap");
				console.log("------------");
				for( prop in e.originalEvent.gesture) {
					console.log(prop);
				}
				
			});
			$(document).on('doubletap', '.gestureTest', function(e){
				console.log("doubletap");
			});

			// ホールド
			$(document).on('hold', '.gestureTest', function(e){
				console.log("hold");
			});
			$(document).on('release', '.gestureTest', function(e){
				console.log("release");
			});
			
			// ドラッグ
			$(document).on('drag', '.gestureTest', function(e){
				console.log("drag");
			});

			// その他
			$(document).on('touch', '.gestureTest', function(e){
				console.log("touch");
			});
			

			// *************************************
			// 共通
			// *************************************
			$(document).on('touchstart', '.gestureTest', function(e){
				console.log("touchstart");
			});

			$(document).on('touchend', '.gestureTest', function(e){
				console.log("touchend");
			});

		});
	</script>
</head>
<body>
	<ons-navigator var="myNavigator" page="page1.html">
	</ons-navigator> 
</body>
</html>


初期画面( page1.html )

ons-gesture-detector 内でのみ、スマホで必要ないろいろなイベントに対処できるようになっています。これを使わない場合は、touchstart と touchend とあといくつかの基本処理になります。ons-gesture-detector 内では、ここには無いもっと複雑なジェスチャー(スワイプ、ピンチ他)も対応されています。( 実機が無いので検証できませんでしたが )
<ons-page>
	<ons-toolbar>
		<div class="center">Navigator</div>
	</ons-toolbar>

	<div style="text-align: center">
		<br>
		<ons-gesture-detector>
		<ons-button
			class="gestureTest"
			id="gestureBtn">
			次のページを表示
		</ons-button>
		<br>
		(ジェスチャー対応)
		</ons-gesture-detector>
		
		<br>
		<ons-button
			class="gestureTest"
			onclick="myNavigator.pushPage('page2.html')"
			id="normalBtn">
			次のページを表示
		</ons-button>
		<br>
		(普通のボタン)
		
	</div>

</ons-page>


page2.html



<ons-page>
	<ons-toolbar>
		<div class="left"><ons-back-button>Back</ons-back-button></div>
		<div class="center">画像表示</div>
	</ons-toolbar>

	<div style="text-align: center">

		<h1>ページ&#10103;</h1>
		<ons-button
			onclick="myNavigator.popPage()">
		  Pop Page
		</ons-button>
		<br>
		<br>
		<img src="image/page2.jpg">

	</div>
</ons-page>


▼ 下の赤い枠内が gesture 情報



タグ:android MONACA
posted by lightbox at 2015-04-19 20:57 | Android | このブログの読者になる | 更新情報をチェックする

Android Studio でボタンをクリックして トースト(Toast) を表示する / onClick プロパティと Button へのイベント登録( Listener )

Android でボタンに対する処理を作成したい場合、Hello World! 的には Toast を表示するのが最もてっとり早く動作の確認をする事ができます。

Android Studio で大きなボタンを一つ作成

ボタンに対するイベントの登録方法は、一般的には Button(TextView) のメソッドを使って Listener を作成しますが、クリックだけに関して言うと、onClick プロパティを使用できます。

Android Studio でボタンをクリックして トースト(Toast) を表示する



public void メソッド(View view)

このような形式のメソッド( 本来の setOnClickListener 用 )を事前に作成しておくと、プロパティの設定でそのメソッドが表示されるので、選択するたけでコード作成が完了します。

▼ CTRL + O で既存のコードを利用する

setContentView のブロックが作成されるので、clickButton に変更して中身を作成します。

以下は具体的なコードです
	public void clickButton(View view) {
		Toast toast;
		toast = Toast.makeText(
				MainActivity.this,
				"こんにちは",
				Toast.LENGTH_LONG
		);
		toast.show();
		Log.i("lightbox", "こんにちは");

	}

その他のイベントに対しては、以下のようにして Listener を作成します

setOnLongClickListener( 長押し )
		// ボタン
		Button button;
		// 作成したボタンより ID でインスタンスをセット
		button = (Button)MainActivity.this.findViewById(R.id.button);

		// 長押し用のイベントを作成
		button.setOnLongClickListener(new View.OnLongClickListener() {
			@Override
			public boolean onLongClick(View v) {
				Log.i("lightbox", "長押し");
				return false;
			}

		});


setOnTouchListener( タッチのダウンとアップ )

上のコードで定義した button に対して新たに setOnTouchListener を実行します
		// タッチ用のイベントを作成
		button.setOnTouchListener(new View.OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				int action = event.getAction();
				switch(action) {
					case MotionEvent.ACTION_DOWN:
						Log.i("lightbox", "ACTION_DOWN");
						break;
					case MotionEvent.ACTION_UP:
						Log.i("lightbox", "ACTION_UP");
						break;
				}

				return false;
			}

		});


logcat のフィルターを作成





▼ フィルタの名前を任意に変更


▼ タグでフィルタする






posted by lightbox at 2015-04-19 17:00 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする

2015年04月12日


Google スプレッドシートで、Android Studio の重要な操作のまとめ

HTML で表を作るより、Google スプレッドシートで作って埋め込んだほうが簡単で便利でメンテナンス性が高くて使いまわしができて印刷も PDF でできるという事に最近気が付きました。

印刷用の PDF を取得するには、こちらのリンクから開いて下さい



posted by lightbox at 2015-04-12 00:45 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする

2015年04月11日


Android Studio で com.example. lightbox. myapplication を jp.winofsql. lightbox. threeButton に変更

Android Studio でほぼ普通に作成した時の com.example..... というパッケージ名を全ての階層で変更可能な方法で変更します。ここでは、com.example.lightbox.myapplication を jp.winofsql.lightbox.threeButton に変更します

※ myapplication だけの変更ならば、Refactor の Rename のみで可能です

パッケージをツリービューで選択



Refactor の Rename を選択





一番下の名前を変更





自動的に変更されます。Android Studio が自動で作成した下の Test クラスは削除してもいいです

途中の階層をエクスプローラから変更







エラーを ALT + Enter で問題解決します



▼ このクラスは削除してもいいです



AndroidManifest.xml 内の記述変更





build.gradle( Module : app ) 内の記述変更





▼ Sync Now をクリック




posted by lightbox at 2015-04-11 21:38 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする

2015年04月04日


ショートカットキーを使って、Android Studio のコード記述を極限まで楽にする

簡単な Toast の処理をクラスで作成する作業でたくさん使ってみました。

ALT + Insert (ツリービュー上)



ALT + Insert は、場所によって表示されるウインドウが違いますが、この場合は プロジェクトのツリービュー内の Activity のソースの親ノードを選択しています。その後、Java Class を選択します。



すると、上のようなダイアログが表示されるので、クラス名を入力して OK ボタンをクリックします。
ALT + Insert (ソース上) クラスファイルが作成され、その中にクラスのブロックが記述されているので、その中にカーソルを置いて ALT + Insert を実行します。 すると、今度は『Generate』のウインドウが表示されるので、Constructor を選択します。 ▼ 生成されました CTRL + O (Override Methods) メソッドを追加する為に既存のメソッド記述を利用します。 この場合は、toString メソッドを @Override なしでコードを転送して、適宜変更します。 ▼ 変更後のコード CTRL + ALT + T (囲み処理/Surround) これは、行を選択してその上下になにかしらのコードを追加する処理です。ここでは、try 〜 catch を選択していますが、自動的に 対応する Resources.NotFoundException が記述されました。 CTRL + D (複製) 対象行を選択して、実行すると複製されます。これで文字列を引数とするメソッドを作成します CTRL + / (行コメント) ※ コメントに対して実行すると、コメント解除 範囲選択して、 実行します。 CTRL + SHIFT + / (範囲コメント) ※ コメントに対して実行すると、コメント解除
public class QlMessage {
	public QlMessage() {
	}

	public void show(Context context,int id) {
		try {
			Toast ts = Toast.makeText(context,id,Toast.LENGTH_LONG);
			ts.show();
		} catch (Resources.NotFoundException e) {
			e.printStackTrace();
		}
	}

	public void show(Context context,String message) {
		Toast ts = Toast.makeText(context,message,Toast.LENGTH_LONG);
		ts.show();
	}
}



posted by lightbox at 2015-04-04 21:29 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする

2015年04月03日


Android Studio の 『CTRL + SHIFT + I』(定義の参照) を中心に、少しでも時間短縮

対象にカーソルを置いて、『CTRL + SHIFT + I』で定義されているソースをウインドウで表示が可能です。例えば、以下の場合は画像の表示がされます。





これは、クラスのメソッドだとこうなります。



この時表示されるウインドウのツールバーの赤い枠で囲ったアイコンをクリックすると、タブでソースが開いて通常の編集が可能になります。



プロジェクトツリーと同期させる

これはとても便利ですが、しかしこのままではソースがツリーのどこにあるかが解りません。そこで、ツリービューの設定を行います。



ツリービューの上部分の空いているところを右クリックすると、オプションを設定できるので『Autoscroll』を両方ともチェックします。こうすると、ツリー側でクリックするとタブが開き、タブを開いたり選択したりするとツリーが開いてその場所が選択されます。

▼ 定義参照ウインドウより編集アイコンを選ぶと、自動的にツリーが開いて選択


CTRL キーを押しながらタブをクリックすると…



File Path という、エクスプローラで開く為の補助ウインドウが表示されます。ファイルを選択すると、そのフォルダ内に入ってそのファイルを選択し、フォルダを選択するとその親フォルダ内に入ってそのフォルダを選択します



ツリービューから開くには



右クリックで表示されるメニューから Show in Explorer を選択します

SHIFT キーを押しながらタブをクリックすると…

タブが即閉じられるので注意して下さい




posted by lightbox at 2015-04-03 22:13 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする

Android Strudio で行われている『スペルチェック』をオフにする( Typo: In word '.....' という表示 )



クラス名を適当に付けたら、妙な警告のような波線がクラス名の下に付いてしまいました。最初何の事が良く解らず、実行には支障無いので放置していましたが、『android studio typo in word』のキーワードで他にも検索している事が解り調べてみると、英語圏での情報で(日本語は無し)それをスペルチェックとして扱っており解除方法を見つける事ができました。

『File』=>『Settings』=>『Inspections』=>『Spelling』=>『Typo』

Typo のチェックを外すと、Spelling のチェックも外れて、全てのスベルチェックも外れるようです。右側のオプションで、個別に コード内 / 文字列内 / コメント内 と設定できるようですが、日本語では必要無いでしょう。





posted by lightbox at 2015-04-03 21:38 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり