Hatena::ブログ(Diary)

BASHI_BASHI このページをアンテナに追加 RSSフィード Twitter

2011-08-07

[]CSSで指定したRGBを取得

ボタンを押したときのフィードバックで一番よいものはなんなのか?というのを模索してます。
初期の頃、背景の色を取得し、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を取得する


スマートフォンっぽい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は端末ごとに解像度が違うため、レイアウトを考えるときにいろいろと注意が必要です。

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

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

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


f:id:yitabashi0913:20110709235940p:image

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

9-patchの使い方


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

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

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


公式なドキュメントは、

Draw 9-patch

日本語版


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

1、Android sdkの/tools/の中にある、「draw9patch」をダブルクリック

2、ターミナルが起動し、draw9patchが起動

3、Commond + o で編集したいファイルを開く

4、縦に引き伸ばされるときに引き伸ばしたい部分、横に引き伸ばされるときに引き伸ばされる部分を、それぞれ指定

5、Commond + s で保存。

6、ファイル名.9.拡張子 というファイルが作成される


f:id:yitabashi0913:20110710173454p:image

f:id:yitabashi0913:20110710173456p:image

サンプルコード


・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バージョン
f:id:yitabashi0913:20110709235941p:image

ImageViewのscaleTypeの指定


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

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

エリア内での表示方法

UIコンポーネント/ImageView

2011-07-03

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

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


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

f:id:yitabashi0913:20110529220443p:image

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

今回は、スマホの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となっています。

f:id:yitabashi0913:20110626194129p:image