2011-08-07

CSSで指定したRGBを取得

JavaScript

ボタンを押したときのフィードバックで一番よいものはなんなのか？というのを模索してます。
初期の頃、背景の色を取得し、RGBの値に一定の値を掛ければそれっぽくなるのかな？と思い試しにつくってみました。

var color = buttonElement[0].style.background;
var m= color.match(/^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)$/);
var ret={};
ret.r = parseInt(m[1],10);
ret.g = parseInt(m[2],10);
ret.b = parseInt(m[3],10);
alert(ret.r);
alert(ret.g);
alert(ret.b);

ただ、グラデーションしてると使えないことに気づいたので、

object.style.opacity = 0.5;

みたいな感じで、opacityをtouchstartのときだけ下げてあげるのが、今のところ一番簡単かつ、それっぽくみせられる形でした。

引き続きもうちょっと研究してみます。

2011-07-18

Javascriptでページ内のclassを取得する

JavaScript

スマートフォンっぽいUIを、JQueryを使わずに作ってみる3で、aタグでボタンを作ってみました。今回は、フィードバックとして、ボタンが押されたときに色が変わるように修正をかけたいと思います。

cssのhover、actionだとうまく動いてくれなかったため、Javascriptを用いて、touchstart、touchendのときにそれぞれ色を変えるやり方で実装してみました。

以下、ボタンの形にするクラスをJavascriptで取得して、そいつらにtouchstart、touchendのイベントを登録するスクリプトです。

var buttonElement;

window.onload = function(){
	
	//ボタンのクラスを配列で取得
	buttonElement = document.getElementsByClassName('buttonLink');

	for (i = 0; i < buttonElement.length; i++) {
		buttonElement[i].addEventListener ('touchstart',  (function(j) {
    		return function(e) {
      			changePressedButtonBackgroundColor(e, j);
    		}
  		})(i), false);
  		
  		buttonElement[i].addEventListener ('touchend',  (function(j) {
    		return function(e) {
      			undoButtonBackgroundColor(e, j);
    		}
  		})(i), false);
	}
}

var currentClassName;

function undoButtonBackgroundColor(event, str) {
	buttonElement[str].className = currentClassName;
}

function changePressedButtonBackgroundColor(event, str) {
	currentClassName = buttonElement[str].className;
	buttonElement[str].className = buttonElement[str].className.replace(/orange/g, 'pressButton');
}

ontouchstartで、オレンジの色を指定するcssが入っている場合は、pressButtonというcssに切り替わる

ontouchendでもとのcssの組み合わせに戻す

という処理に今のところなっています。

addEventListenerに独自の引数を追加するところに何気にはまりましたが、

addEventListener で登録する関数に引数を渡す

を参考にさせたいただきました。

正規表現はこれやこれを。

明日からもう少し調整をかけてみます。

2011-07-10

Androidの各端末への対応/Draw 9-patchを使おう！

Android

Androidは端末ごとに解像度が違うため、レイアウトを考えるときにいろいろと注意が必要です。

その中でも、imageを表示するときには一層の注意が必要！！

そんなときに力を発揮してくれるのが、「Draw 9-patch」です！

9-patchを使わずに表示すると・・・

端末の縦幅横幅いっぱいに画像を表示させようとすると、こんな感じでぼやけてしまうんですね。そんなときに役に立つのが、9-patch！！

9-patchの使い方

使い方については、以下のリンクがオススメです。

・Draw 9-patchを使ってAndroidアプリを解像度に応じたリキッドデザインする

・Androidで拡大縮小可能なGUI部品を作成するには

公式なドキュメントは、

・Draw 9-patch

・日本語版

ざっくりと手順を説明すると、

１、Android sdkの/tools/の中にある、「draw9patch」をダブルクリック
２、ターミナルが起動し、draw9patchが起動
３、Commond + o　で編集したいファイルを開く
４、縦に引き伸ばされるときに引き伸ばしたい部分、横に引き伸ばされるときに引き伸ばされる部分を、それぞれ指定
５、Commond + s　で保存。
6、ファイル名.9.拡張子　というファイルが作成される

サンプルコード

・main.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
	android:id="@+id/splash_image"
	android:src="@drawable/star"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:scaleType="fitXY" />

・Activity

import java.util.TimerTask;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class StartActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

・9-patchバージョン

ImageViewのscaleTypeの指定

9patchで引き伸ばし効果をうまく使うには、fitXYを使わねばうまく表示できませんでした。

scaleTypeについては以下をご参照ください。

・エリア内での表示方法

・UIコンポーネント/ImageView

2011-07-03

FrameAnimationがonCreateでスタートすると止まってしまう

Android

AndroidのFrameAnimationを使って、アニメーションGIFのようにコマ割りのアニメーションを表現できるのですが、onCreateでそのアニメーションをスタートさせると動かない端末があったので、その回避策をご紹介。

ちなみに、動かなかったのは、

SH003SH
Xperia（初期のもの）

Frameアニメーションについて

このページの下の方で紹介されているFrame アニメーションを御覧ください。

一番分かりやすくまとまっております。

回避法1 onWindowFocusChangedでstartさせる

・frame_animation.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/anim01" android:duration="200" />
    <item android:drawable="@drawable/anim01" android:duration="200" />
    <item android:drawable="@drawable/anim01" android:duration="200" />
</animation-list>

public class StartActivity extends Activity {
    
    Animation frameAnimation;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
	imageView = (ImageView) findViewById(R.id.splash_image);
        imageView.setBackgroundResource(R.anim.anim);
	frameAnimation = (AnimationDrawable) imageView.getBackground();

    }


    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
    	super.onWindowFocusChanged(hasFocus);
    	frameAnimation.start();//onWindowFocusChangedで呼ばないとアニメーションがスタートしない
    }
}

onCreateで使うときに限って、こうしないと止まってしまいます。

原因としては、

AnimationDrawable の start() メソッド呼び出しは、AnimationDrawable が完全にウィンドウにアタッチされていないことから、アクティビティの onCreate() メソッドの間では呼び出せないという点に十分注意してください。相互動作による要求なしで、アニメーションを即時に再生したい場合は、アクティビティのAndroid がウィンドウにフォーカスしたときに呼び出されるメソッドである onWindowFocusChanged() で呼び出すことにより望んでいた動作が実現できるかもしれません。

らしいです。

回避法2 Handlerを使用する

public class StartActivity extends Activity {

    Animation frameAnimation;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        ImageView imageView =(ImageView)findViewById(R.id.image);
        imageView.setBackgroundResource(R.frame_animation);
        frameAnimation = (AnimationDrawable)splashImageView.getBackground();
        //onCreate内でアニメーションをスタートさせる場合、handler postしないとアニメーションが動かない機種があ        るため
        imageView.post(new Runnable() {
	    @Override
	    public void run() {
		frameAnimation.start();
	    }
        });
    }
}

Handlerについては、

AndroidのHandlerとは何か？

がとても参考になりました。

2011-06-26

スマートフォンっぽいUIを、JQueryを使わずに作ってみる3

HTML5

前回、スマートフォンっぽいUIを、JQueryを使わずに作ってみる2で、

みたいなボタンを作成しました。

今回は、スマホのUI考〜ボタンについてで、

指の大きさの制約を受ける
・Webとスマホを比較した場合、最大の違い。
・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。
・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。
・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。

と紹介されており、スマフォ用のボタンをつくるときには最低限44pxが必要みたいなのですが、サイトデザインの都合上、どうしても44px以下のボタンを作らねばならぬのだ。。。。

ってときのために、

・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。

を、HTMLで書いてみました。

<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル3</title>
<meta name="viewport" content="width=320px">
<style type="text/css">
a.button_link_small {
	display:block;
	margin:10px auto;
	width:70%;
	text-align:center;	
	text-decoration:none;
}

a.button_link_small span {
	display:block;
}
span.button_wrapper {
	line-height:50px;
	height:10px;
}

span.button_name {
	line-height:30px;
	height:30px;
	color:gray;
	text-shadow: white 0px -1px 1px;
	font-weight:bold;
	font-size:15px;
	-webkit-border-radius:7px;
}

.yellow {
	background: -webkit-gradient(linear, left top, left bottom, from(#ffff99),  color-stop(0.50, #ffff99), color-stop(0.51, #ffd700), to(#ffd700));
	border: solid 3px #ffd700;
}

</style>
<body>

<a class="button_link_small" href="01.html">
	<span class="button_wrapper ">&#160;</span>
	<span class="button_name yellow">ボタン1</span>
	<span class="button_wrapper ">&#160;</span>
</a>

</body>
</html>

ヒットエリアの余白部分は、spanに空白行を入れることで誤魔化しています。

ボタン自体のサイズは30pxですが、余白が上下に10pxごとあるので、タッチエリアは実質50pxとなっています。

2011-06-19

例外

Java

以前勉強したときにあまり深く勉強しなかったということで、例外を復習してみました。本当は、Effective Java 第2版 (The Java Series)
の例外のところを読むはずだったんですが、難しいというか、日本語？が英語直訳な感じで難しかったので、改訂第2版 Java言語プログラミングレッスン (下)
でとりあえず復習しました。

例外の階層

Object
　→java.lang.Throwable
　　　→java.lang.Error
　　　→java.lang.Exception
　　　　　　→java.lang.RuntimeException
　　　　　　→それ以外のException

チェックされる例外、されない例外

非検査例外

コンパイラにチェックされない例外
Error
RunTimeException

検査例外

コンパイラにチェックされる例外
階層図の中のそれ以外のException

使用法

void someMethod() {
   ....
   ....
   try {
     ...
     hogeMethod();
   } catch (IOException e) {
     ....
   }
}
void hogeMethod() throws IOException {
   ...
   throw new IOException();
}