tomo.mobi

Representation design of material


SVGのViewBox

なんか一番大切な部分を忘れている。
SVGの描画領域のこと。

<svg width="400" height="400" viewBox="0 0 400 400" style="border:solid 1px #000"  onClick="creatObj();" />

大きさ以外に”viewBox”なる指定があります。
これは文字通り表示領域の指定です。

viewBox(min-x,min-y,width,height)

Published by tomoka , on 10月 17th, 2015 at 3:43 am. Filled under: 未分類No Comments
この記事を読む

SVGのDOM追加について

SVGはHTMLではなくXMLなので、DOMの追加には一癖あります。
setAttributeNSでxlinkを追加してあげる必要があります。
createElementNSで新規のDOMの追加をします。

var xlinkns = "http://www.w3.org/1999/xlink";
var svgns = "http://www.w3.org/2000/svg";
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
・
・
・
細かいパラメータの追加
・
・
・
circle.setAttributeNS(xlinkns, "href", "#circle");
・
・
・

上記のような感じです。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/types.html#InterfaceSVGURIReference
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/svgdom.html#RelationshipWithDOM2Events
とりあえず、次のSVGの記事ではもう少しまともな何かを作ってみます。

Published by tomoka , on 10月 15th, 2015 at 9:37 pm. Filled under: 未分類1 Comment
この記事を読む

SVGアニメーション

SVGの機能を使ってアニメーションさせる
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/animate.html

しかしながら、SMILは廃止の方向のうごきもあるらしい・・・・(?
http://postd.cc/the-state-of-svg-animation/

なので、参考記事に記載されているjavascriptで実装できるプラグインを試してみようと思いました。
GreenSock
http://greensock.com/

sample
http://tomo.mobi/test/greensock/sample1.html

設定や記述に関してはとりわけ特殊な事は無いです。
htmlのDOMと同じようにつかえるみたい。
※ただし、DOMを生成する時はhtmlとは違うので、生成する記述が少し違う。次回の更新時に記述方法を追記します。(書いたよ→http://www.tomo.mobi/?p=594)

htmlのぶぶんにid設定
jsでDOMを指定するため。

 <path id="android" d="
M49,89c0,2.2,1.8,4,4,4h4v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h8v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h4c2.2,0,4-1.8,4-4v-40H49V89z 

M39,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C45,51.5,42.4,48.9,39,48.9z 

M107.1,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C113.1,51.5,110.5,48.9,107.1,48.9z 

M87.3,25.5l5.2-5.2c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-6,6c-3.2-1.6-6.8-2.6-10.6-2.6c-3.8,0-7.4,1-10.6,2.6l-6-6c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l5.2,5.2c-6,4.4-9.8,11.49.8,19.4h48C97.1,36.9,93.3,29.9,87.3,25.5z 

M65,36.9h-4v-4h4V36.9z 

M85.1,36.9h-4v-4h4V36.9z
" fill="blue"/>

jsぶぶん。DOMでCSS操作。 TweenMax等はGreensockのAPI。

(function() {
var container = document.getElementById('container');
var android = document.getElementById('android');


TweenMax.set(['svg'], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set([container], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set(android, {
	transformOrigin: '50% 50%'
})

var tl = new TimelineMax({
	repeat: -1,
	paused: false,
	repeatDelay: 0,
	immediateRender: false
});

tl.timeScale(3);

tl.to(android, 10, {
	x: 150,
	y: 150,
	scale: 3,
	alpha: 0,
	ease: Power1.easeInOut
},'+=1')
})()

しかしながら、自由度はSMILの方がやはり高い。
SVGパスのアニメーション化はやはり諦めるしか無いのか・・・・(涙
CSS+javascriptでのアニメーションだけでは、今までと進歩が感じられ無いと思ってしまうのは私だけかな。
Flashのパスアニメーションをおもわず思い出してしまう。

でもでも、モバイル端末(※スマートフォン)でのコンテンツ作りにかかせないと思うのでもう少し勉強続けたいと思います。

Published by tomoka , on 10月 12th, 2015 at 10:01 am. Filled under: 未分類No Comments
この記事を読む

SVGについて

SVGのアニメーションをやってみようと試みる。
まずは、svgについて知らなくてはなのです。

以下のサイトで勉強させて頂きました。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm←pdf版もある!

avgの描画部分。
自由なパスが引ける為にはのd属性に指示子でコマンドを知る必要があるとおもう。
丸や四角等のパスに関してはに比べればそれほど難しい記述ではないです。

指示子の大文字と小文字には意味があります。
例:A(絶対), a(相対)※d属性”楕円弧曲線命令”の場合。
大文字が絶対値で小文字は相対値です。

また、描画させる値の設定にはいくつか決まりがあります。
それは、画像の形により違うのですが、同じパス内で始点と終点は同じ座標は指定できないようです。同じ座標を指定しても描画できませんでした。閉じるコマンドがあるので、閉じる時は”z”を指定です。

特に慣れていない自分用に、見ただけではよく意味が分からなかったコマンドに関してのみメモとして細かい設定内容を記述します。もう少し勉強が進んだら増やすかも?
名称未設定-1
** 円を角場合の指定について
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)の内容をd属性に設定

** x-axis-rotationについて
名称未設定-2
どのぐらいx軸回転されるかを設定。

** large-arc-flag sweep-flagについて
以下の図がとても分かりやすい。始点と終点が決まっている重なり合った円の場合4とおりの接続方法がある。どの方法でつながるかを指定できる。
参考文献:http://www.hcn.zaq.ne.jp/___/SVG11-2nd/images/paths/arcs02.svg
スクリーンショット 2015-10-14 9.20.01

Published by tomoka , on 10月 10th, 2015 at 8:48 am. Filled under: 未分類No Comments
この記事を読む

ほしのしまのにゃんこ✧

読み直して、書き直した・・・・(汗)

ほしの島のにゃんこあそんでます ニャ-(●ↀωↀ●)✧
にゃんこの仕草が可愛くて可愛くて・・・にゃんこが働いている・・・にゃんこが遊んでいる・・・とても癒されています。

ふと気がつき、アプリ内の文章にひらがなが多く漢字には送り仮名が振られている事に気がつきました。
明らかに子供用に作られているなぁと言う感覚。
子供用のアプリで流行ったのと言うと、「どうぶつ将棋」ぐらいしか思いつかない自分。
気になってアプリについて誰かが話しているページをさがしてみました。

ほしのしまのにゃんこを知らない人も居ると思うのでざっくりと紹介。
きっと、ティザーサイトを観た方が早いと思う。
こちら→http://colopl.co.jp/hoshinyan/

そして見つけたインタビュー記事→http://gamebiz.jp/?p=126928
ターゲットユーザーに子どもが入っていた!
「子どもは成長して、大人は童心に戻れるアプリ」
家でお母さんと子どもがタブレットで遊んでいる姿が目に浮かびます・・・・。

子ども向けに、
・演出を派手に
・子どもの親しみやすい食べ物を取り入れる
・モチーフキャラクターを親しみやすく呼びやすい「にゃんこ」にした
 ・たくさんいてもくどくないように無表情
などなど。

あとは、記事の中のあまり子どもよりにしすぎると、子どもも飽きてしまう。と言う部分に納得。大人も子どももゲームをやっていて新しい発見が無いとつまらなくなるんだろうなと言う事か・・・と思った。

また、ターゲットユーザー層を集めて、ゲームを遊んでもらいリリース前にヒヤリングはやるべきなのかも。年齢別や性別、環境で感じる事、考える事は違うのでリアルなターゲット層を10~20人集めてテストする事は今まで見えなかったゲームへの要望も出てくるだろうし、良いと思っていた画面遷移に問題が出来るかもしれないので、必要だと思いました。

とくに開発中、新機能のテストフェーズのような期間を定期的に入れて軌道修正しながら開発をすると効率よくターゲット層にマッチしたコンテンツが作れそうですよね・・・。

Published by tomoka , on 7月 12th, 2015 at 6:00 am. Filled under: 未分類No Comments
この記事を読む

iOSの画面デザインを作る時にやっている事

iphoneはストーリーボードでレイアウトを作成するとき、比率かえずにレイアウト配置してしまうと
解像度が変わった時に意図したレイアウトにならなくなりますよね。
なので、レイアウトをする時はどの解像度でみてもあまり変わらないように割合でレイアウトを考えていると思います。

なので、私はカンプを作成する時に、320px基準に考え8ptのグリッド線をひいて作成しています。
iphoneの画面をデザインするとき、横(短い方)を1として、デザインする横幅の基準を決めれば、
横幅基準で割合にてレイアウトすると解像度が変わっても縦の見える範囲が変わるのみでレイアウトが崩れる事はありません。

@3で作成するのだったら、画面に24*24のグリッドをひいてレイアウトしています。

なぜ、1マス24pxかというと、Xcodeでレイアウトする時に@1にした時に1マス8ptとして考えられ、
320pxを基準で考えている場合、8/320=0.25と、割り易い数字なので割合で比率を計算し易くなります。

しかし、8はあくまでも基準です。
細かいレイアウトは8の倍数と言うわけにはいかないからです。
グリッドを意識してレイアウトするとストーリーボードに落とし込む時に落とし込み易いと言う程度です。

ちなみに、設定の中にある、photoshopの良くご存知のこの機能です・・・
グリッド線

最初はみづらいなーと思う。(私も思った)
グリッド線の色で画面が染まる・・・・。
スクリーンショット 2015-07-05 6.11.46

グリッド線は[command]+[@]でon/off出来るので、[command]+[h]とあわせて、
ショートカットを覚えておくと良いです。

Published by tomoka , on 7月 5th, 2015 at 6:15 am. Filled under: 未分類No Comments
この記事を読む

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
この記事を読む

座標移動のリセットのコツ

画面よりも外に出たら、最小の幅や高さよりも大きい座標へ移動

if (wide_x > newWidth ) {
defaultSpeedY = 1;
defaultSpeedX = 1;
wide_x = -10;
}
if (height_y > newHeight ) {
defaultSpeedY = 0;
defaultSpeedX = 0;
height_y = -10;
}
if (wide_x < -11 ) { defaultSpeedY = 0; defaultSpeedX = 0; wide_x = newWidth; } if (height_y < -11 ) { defaultSpeedY = 1; defaultSpeedX = 1; height_y = newHeight; }

Published by tomoka , on 7月 5th, 2013 at 8:56 pm. Filled under: 未分類No Comments
この記事を読む

テキストエディタ

開発環境がwindowsなので、今までmacで使っていたテキストエディタが無くなってしまい、いろいろな方に相談した所、最終的にvimとsublime text2 に着地しました。。。。

テキストエディタは作業内容によって使い分けれるように、1種類ではなく2種類以上は使いたいので、今まで使っていたmi(windows版)とvim か sublime text2にたどり着きました。

で、sublime text2パッケージコントロールツールのインストール方法。。。。。

【sublime text2】

ctrl+` または メニューバー View → Show Console でコンソールを表示して下のコードをペーストします。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

補完機能もばっちり。起動も速く申し分無いです!

Published by tomoka , on 10月 26th, 2012 at 10:34 am. Filled under: 未分類,調べものNo Comments
この記事を読む

Google Analytics

モバイル Google Analytics を入れたい
PHP 用の解析コードを Google の説明通りに入れてもうまく動作しません。2箇所問題があるためです。まず、携帯用 header.php はグローバルスコープではないため、$GA_ACCOUNT, $GA_PIXEL 変数に global 宣言が必要なこと。次に footer.php に入れるコードが PHP ショートタグ形式なこと ( になっている) です。
Ktai Style 2 以降のテーマでは、functions.php または独立したプラグインファイルに以下のようなコードを書いて ks_wp_footer() にフックすることがおすすめです。もちろん、$GA_ACCOUNT は自身のアカウント番号を入れてください。また、googleAnalyticsGetImageUrl 関数は Google から最新のものを入手するのが確実です。
Google Analytics for Mobile
Version: 1.0.0
*/
// Copyright 2009 Google Inc. All Rights Reserved.
global $GA_ACCOUNT, $GA_PIXEL; // Change by IKEDA Yuriko
$GA_ACCOUNT = "MO-XXXXXXXX-X";
$GA_PIXEL = "/ga.php";

function googleAnalyticsGetImageUrl() {
global $GA_ACCOUNT, $GA_PIXEL;
$url = "";
$url .= $GA_PIXEL . "?";
$url .= "utmac=" . $GA_ACCOUNT;
$url .= "&utmn=" . rand(0, 0x7fffffff);
$referer = $_SERVER["HTTP_REFERER"];
$query = $_SERVER["QUERY_STRING"];
$path = $_SERVER["REQUEST_URI"];
if (empty($referer)) {
$referer = "-";
}
$url .= "&utmr=" . urlencode($referer);
if (!empty($path)) {
$url .= "&utmp=" . urlencode($path);
}
$url .= "&guid=ON";
return str_replace("&", "&", $url);
}

function show_googleAnalyticsGetImageUrl() {
$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
echo '<img src="' . $googleAnalyticsImageUrl . '" />'; // Change by IKEDA Yuriko
}
// Added by IKEDA Yuriko
add_action('ktai_wp_footer', 'show_googleAnalyticsGetImageUrl');
?>
Published by tomoka , on 4月 14th, 2011 at 12:40 pm. Filled under: 未分類No Comments
この記事を読む

Google Analytics

モバイル Google Analytics を入れたい
PHP 用の解析コードを Google の説明通りに入れてもうまく動作しません。2箇所問題があるためです。まず、携帯用 header.php はグローバルスコープではないため、$GA_ACCOUNT, $GA_PIXEL 変数に global 宣言が必要なこと。次に footer.php に入れるコードが PHP ショートタグ形式なこと ( になっている) です。
Ktai Style 2 以降のテーマでは、functions.php または独立したプラグインファイルに以下のようなコードを書いて ks_wp_footer() にフックすることがおすすめです。もちろん、$GA_ACCOUNT は自身のアカウント番号を入れてください。また、googleAnalyticsGetImageUrl 関数は Google から最新のものを入手するのが確実です。

'; // Change by IKEDA Yuriko
}
// Added by IKEDA Yuriko
add_action('ktai_wp_footer', 'show_googleAnalyticsGetImageUrl');
?>

Published by tomoka , on 4月 14th, 2011 at 12:40 pm. Filled under: 未分類No Comments
この記事を読む

phpエラー表示

php.iniセットする。。。。

//エラーを表示しない
ini_set ( “display_errors”, “0” );

//エラーを表示する
ini_set ( “display_errors”, “1” );

サンプルソース貼付け。
//全てのエラー表示
ini_set ( “display_errors”, “1” );
error_reporting(E_ALL);←全てのエラー表示
?>

————————

error_reporting
(PHP 4, PHP 5)
error_reporting — 出力する PHP エラーの種類を設定する

説明
重大な実行時エラー。
スクリプトの実行は中断されます。

2
実行時の警告(致命的エラーではない)

4
コンパイル時のパースエラー

8
実行時の警告
※デフォルト設定では出力されない。

16
PHPの開始時点での致命的エラー。
PHPのコアから発行される点がE_ERRORと異なる。
 
PHPの開始時点での警告。(致命的エラーではない)
PHPのコアから発行される点がE_WARNINGと異なる。

64
コンパイル時の致命的エラー。
Zendスクリプティングエンジンに発行される点がE_ERRORと異なる

128
コンパイル時の警告(致命的エラーではない)
Zendスクリプティングエンジンに発行される点がE_ERRORと異なる。

256
ユーザーが発行するエラー
PHPコード上でtrigger_error()を使用した場合に発行される点がE_ERRORと異なる。

512
ユーザーが発行する警告
PHPコード上でtrigger_error()を使用した場合に発行される点がE_WARNINGと異なる。

1024
ユーザーが発行する注意
PHPコード上でtrigger_error()を使用した場合に発行される点がE_NOTICEと異なる。
2047E_STRICT以外の全てのエラーメッセージ

2048
実行時の注意(非推奨関数を使用した場合に発行される)
※デフォルト設定では出力されない。

 

定数
E_ERROR 1 E_WARNING E_PARSE E_NOTICE E_CORE_ERROR E_CORE_WARNING 32 E_COMPILE_ERROR E_COMPILE_WARNING E_USER_ERROR E_USER_WARNING E_USER_WARNING E_ALL E_STRICT

例1) 全てのエラー情報を出力する

 

error_reportting( E_ALL | E_STRICT )

 

例2) E_NOTICE 以外の全てのエラーを表示する。これは php.ini で設定されているデフォルト値

 

error_reporting( E_ALL ^ E_NOTICE );

 

Published by tomoka , on 4月 13th, 2011 at 11:29 am. Filled under: 未分類No Comments
この記事を読む