tomo.mobi

Representation design of material


iPhoneアプリの素材、pngやpdfの読み込みに関してやってみた!

Xcodeでベクター(PDF)を使った開発方法
http://www.bravesoft.co.jp/blog/archives/987

やってみました。思った以上にベクターデータが汚くて残念。
ちなみに、前知識としてXcodeでのレイアウトは320pxを基準にしています。
スクリーンショット 2015-05-07 0.06.10

上から順番に・・・

1)アートワーク50px*50pxのベクターデータ(pdf)
2)キャンバス50px*50px 72dpiのpng
3)アートワーク50px*50pxにキャンバス50px*50px300dpiのpngを貼付けたpdf

それぞれを180*180のImage Viewに貼り込んでみました。
ベクターデータが一番きれいかなと思ったのですが、違った・・・!

でも、このやり方で素材を渡せば、@3で作った素材のクォリティーそのままで想像以上に汚くならず、しかも、素材の配置に手計算とかしなくても良いし、余計な手間がかからなくてすむかも。
※ちなみに、50px*50pxサイズの解像度違い300dpiと72dpiの画像貼り分けはほぼ変わりませんでした。
(やった後、そりゃそうだと思ったw)

pdfよりも300dpi相当の解像度の画像をpdfで圧縮した方がキレイになる事が分かりました。
300dpiだから@4相当です。

ちなみに、@3相当で作成するとベクターと同じ見栄えになります。
キャプチャ→サンプル画像はこちら

これから@3以上の@4、@5が出てきた時のことを考えるとベクターで素材を作るのがbestかもしれません。


Published by tomoka , on 5月 7th, 2015 at 12:22 am. Filled under: app,smartphone,未分類,調べものNo Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみたい事

iPhoneアプリの開発の時にベクターデーターを読み込むとき横幅320pxデザイン幅でpdfにして素材を渡すのですが、ベクターデーターはもともとイラストレーターで作成するので600dpi以上はあるので拡大縮小に問題なくきれいにネイティブアプリでレンダリングしてくれますが、ベクターデーターで素材を渡す事のできない写真素材とかしずる感たっぷりのpng画像等に関しては320pxのデザイン幅で素材を渡すととっても残念な事になります。
なので、ちょっと考えてみたのですが、@3のサイズでデザインしたpng画像をイラストレーター上で320px幅のおおきさに縮小して320pxデザイン幅のpdf素材として、提供したらどうだろうと。
iPhone上で展開されれば、他のベクターデータと同じような解像度で表示できるのではないのだろうか。

また、png画像の解像度を300dpiぐらいに設定してレンダリングさせたら作成したサイズで表示されるのだろうか?
もし、72dpiで表示されたら4〜5倍の大きさで表示されてしまわないのだろうか。

私はデザイナーなのですぐに検証する事が出来ない。
端末によって液晶の解像度が違うのでdpiの違うpng画像をそのまま表示させたら、表示サイズが変わる可能性が高いと思った。だから、pdfにするのが良いのではとも思った。両方試してみたい。

気になったのでメモ。
検証できたら、このブログでお知らせします。

Published by tomoka , on 5月 2nd, 2015 at 9:41 am. Filled under: app,iPhone,smartphone,調べものNo Comments
この記事を読む

surfaceViewのcanvase run()終了時のnull問題

Surfaceviewを使ったとき、端末のバックキーを押すタイミングでアプリが強制終了するのはthreadの破棄の設定だけでなくcanvasのdrawcolorの時にonDestroy( )のタイミングでcanvasにがnullとして返って来てしまう事にやっと気が付いた。

実装した対策は、そもそもthreadがnullになっていないかどうかを分岐して、threadがnullの時はholder.lockCanvas();からholder.unlockCanvasAndPost(canvas);の中に書いた描画を実行しないようにしました。

surfaceCreated()でフラグを立てる /* boolean canvasFlag = true;
surfaceDestroyed()でフラグを折る /* boolean canvasFlag = false;

if(canvasFlag){
holder.lockCanvas();
/*画面の初期化。というか描画の準備のために白で塗りつぶす。
c.drawColor(Color.WHITE);



holder.unlockCanvasAndPost(canvas);
}

Published by tomoka , on 6月 11th, 2014 at 7:26 pm. Filled under: Android,app,java,smartphoneNo Comments
この記事を読む

Java Universal Tween Engineのalpha

最近はJava Universal Tween Engineを理解しようと必死なのですが、
そのなかで、メモにしておこうと思ったことが1点。

alphaはTween.set()が必要です。

Timeline.createSequence()
/*
* public static final int POSITION_X = 1;
* public static final int POSITION_Y = 2;
* public static final int POSITION_XY = 3;
* public static final int ROTATION = 4;
* public static final int SCALE = 5;
* public static final int ALPHA = 6;
*/
  //alpha値の設定
.push(Tween.set(cont, 6).target(0))
.push(Tween.to(cont, 6, 2.0f).target(1).ease(Back.OUT).delay(1.0f))

.push(Tween.to(cont, 4, 2.0f).target(360).ease(Bounce.OUT))
.push(Tween.to(cont, 1, 1.0f).target(3000).ease(Expo.OUT).delay(0.5f))
.push(Tween.call(callBack).delay(1.0f))
.start(tweenManager);

Published by tomoka , on 5月 19th, 2014 at 9:03 am. Filled under: Android,animation,app,java,smartphoneNo Comments
この記事を読む

java-universal-tween-engineのcallback

APIを見つけてからやっと、コールバックをとる事ができた。
長かった。。。。。

//インポートクラス
import aurelienribon.tweenengine.Timeline;
import aurelienribon.tweenengine.TweenCallback; ←受け取るクラス
import aurelienribon.tweenengine.TweenManager;

//コールバックイベントの登録
TweenCallback callBack = new TweenCallback(){
@Override
public void onEvent(int arg0, BaseTween arg1) {
// 処理
Log.v(“tag222”,String.valueOf(arg0));
TweenCallbackObj(); ←コールバック受け取り後に起動するメゾット。
}
};

//タイムラインの登録。
Timeline.createSequence()
.push(Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.push(Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.push(Tween.call(callBack).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.repeat(5, 500)
.start(tweenManager);

Published by tomoka , on 5月 18th, 2014 at 1:03 pm. Filled under: Android,app,smartphoneNo Comments
この記事を読む

navigator.userAgent.match()

“gi”は→大文字と小文字の違いを無視する (ignore case) フラグ
以下が使用例です。

navigator.userAgent.match()とあわせて使ってみた!

if (navigator.userAgent.match(/(ipad|iphone|android|mobile)/gi)) {
cssChange(‘css/style-mobile.css’);
} else {
cssChange(‘css/style-pc.css’);
};

これで、”android”も”Android”も”ANDROID”もOK!

Published by tomoka , on 11月 18th, 2013 at 2:21 am. Filled under: javascript,smartphoneNo Comments
この記事を読む

拡大伸縮 CSS Zoom

拡大縮小。
Math.max();
Math.min();
を使うと回転した時に大きくなったり小さくなったりしません。。。。

ブラウザ幅が変わると、縮尺も変わる。
横幅 685pxで決めうち設定しております。。。。。

$(window).on(“orientationchange resize”, function() {
if (Math.abs(window.orientation) === 90) {
var w = $(window).width();
var x = w – 20;
var zoom_num = x / 685;
$(‘body’).css({
zoom: ” + zoom_num + ”
});
}
else {
var w = $(window).width();
var x = w – 20;
var zoom_num = x / 685;
$(‘body’).css({
zoom: ” + zoom_num + ”
});
}
});

Published by tomoka , on 11月 18th, 2013 at 1:32 am. Filled under: CSS3,javascript,jQuery,smartphoneNo Comments
この記事を読む

拡大して広がる星の座標

class Star{
int x;
int y;
}

star[i].x = (int) ((starX) + (Math.cos(degree[i])*(radius+itemTouch.getWidth()*ScaleSize*2)));
star[i].y = (int) ((starY) + (Math.sin(degree[i])*(radius+itemTouch.getHeight()*ScaleSize*2)));

sin cos にかける半径に画像の拡大した数値の半分をたして、拡大後の座標の調節。

Published by tomoka , on 6月 9th, 2013 at 11:23 pm. Filled under: Android,app,smartphone,調べものNo Comments
この記事を読む

スムーズスクロールのメモ

android2.3.4ではスムーズにスクロールできない場合、$()を追加したらうまく動いた!

追記した場所

// リンク先の画面上の位置を取得して、そこまでスクロール
$(‘html, body’).animate({scrollTop: $(target).offset().top});

Published by tomoka , on 3月 30th, 2013 at 8:34 pm. Filled under: Android,javascript,jQuery,smartphoneNo Comments
この記事を読む

メニュー設定

アンドロイドアプリのホームボタン横のメニューボタンを押すとにょきっと、ボタンが現れますが、
このボタンは、以下の場所で設定をします。。。。

上のlayoutはアプリのレイアウトです。

下のmenuがメニューのレイアウトになります。

ちなみに、動作は別の所に書くのかと思いきや、srcのMainActivityにlayoutの動作と一緒に書き込みます。

アトリビュートが解りにくく、デフォルトで入っている以下のタグの”android:orderInCategory”は数値が大きいほど、メニューのならびが後ろになります。。。。。

<item android:id=”@+id/menu_settings”
android:title=”@string/menu_settings”
android:orderInCategory=”100″ />

もちろん、画像も貼れます

 

Published by tomoka , on 10月 14th, 2012 at 9:35 pm. Filled under: Android,smartphoneNo Comments
この記事を読む

ジャイロセンサー値取得

この記事も、勉強になります。恐縮ながら、リンクはらせて頂きました。

iPhone(iOS4.2)の加速度センサーとジャイロセンサーの値をJavascriptで取得する

センサー値の取得はJavascriptのイベントにて行います。
まずiPhoneの傾きが変化するとdevicemotionというイベントが発生するので
window.addEventListenerで感知し、
関数に渡されるイベントオブジェクトのプロパティよりそれぞれの値を取得します。
別でdeviceorientationというイベントがありますが、
こちらでも回転の加速度のみ取得が可能です。

・傾きの加速度は、accelerationオブジェクト。
(xが左~右、yが手前~奥、zが上~下)
・傾きの重力加速度は、accelerationIncludingGravityオブジェクト。
(角度ではなく、重力加速度(9.80665)を基準にした値)
・回転の加速度はrotationRateオブジェクト。
(alphaがz軸, betaがx軸, gammaプロパティがy軸)

※iPhone4は3軸加速度センサー+3軸ジャイロセンサーとの組み合わせで、
前後左右上下の6軸の加速度、角速度、回転速度などの動きを詳細に検出可能ですが
iPhone3GSは3軸重力加速度センサーのみとなりますので取得できるのは
accelerationIncludingGravity.x
accelerationIncludingGravity.y
accelerationIncludingGravity.z
のみとなります。

var x = $('#x');
var x = $('#x');
var y = $('#y');
var z = $('#z');
var xg = $('#xg');
var yg = $('#yg');
var zg = $('#zg');
var a = $('#a');
var b = $('#b');
var g = $('#g');
window.addEventListener('devicemotion', function(evt) {
// iPhone4はすべて取得できます。
// iPhone3GSの場合はacceleration、rotationRateはコメントアウトしてください。
var ac = evt.acceleration;
x.text(ac.x); //x方向の傾き加速度
y.text(ac.y); //y方向の傾き加速度
z.text(ac.z); //z方向の傾き加速度

var acg = evt.accelerationIncludingGravity;
xg.text(acg.x); //x方向の傾き重力加速度
yg.text(acg.y); //y方向の傾き重力加速度
zg.text(acg.z); //z方向の傾き重力加速度

var rr = evt.rotationRate;
a.text(rr.alpha); //z軸の回転加速度
b.text(rr.beta); //x軸の回転加速度
g.text(rr.gamma); //y軸の回転加速度
});

/*
window.addEventListener('deviceorientation', function(event) {
a.text(event.alpha); //z軸の回転加速度
b.text(event.beta); //x軸の回転加速度
g.text(event.gamma); //y軸の回転加速度
});
*/
Published by tomoka , on 6月 9th, 2012 at 10:12 pm. Filled under: smartphoneNo Comments
この記事を読む

view port おさらい

width(幅)
可視領域の幅。
(デフォルト値は980px。200px〜10000pxまでの範囲を指定できる。)
height(高さ)
高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
(233px〜10000pxまでの範囲を指定できる。)
initial-scale(ズームの詳細設定)
ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。
minimum-scale(最小縮小比率)
viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。
maximum-scale(最小拡大比率)
viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。
user-scalable(ズームの有無設定)
ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。
Published by tomoka , on 6月 7th, 2012 at 2:51 pm. Filled under: smartphoneNo Comments
この記事を読む