tomo.mobi

Representation design of material


D3 [Data-Driven Documents]

https://d3js.org/

ライブラリで操作するのがタグの中のアトリビュート値なのでsvgの記述方法を基礎知識として先に学んでおいたので、わかりやすかったです。とくにsvgアニメーションを少しやっておいたのが良かった。

なお、codepenのサンプルの線グラフのようなものは、polylineの記述の上にcircleの記述。

https://developer.mozilla.org/ja/docs/Web/SVG/Element

See the Pen D3 [Data-Driven Documents] by tomo (@tomoka) on CodePen.

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

wordpress Git 管理 hooks編

hook設定しました。
ローカルのリポジトリからリモートへpushすると自動的に更新されるようになります。
なお、hookはシェルスクリプトをリポジトリ内のhooksフォルダ内に配置すれば実行できます。

  1. cd git/リポジトリ名.git
  2. vi .git/hooks/post-receive(.gitフォルダではないときはgit内のhooksフォルダに作成)
  3. chmod +x .git/hooks/post-receive

権限は実行と読み取り可能、555であれば大丈夫 -r-xr-xr-x
post-receiveには、以下のようにシェルスクリプトを書きます。

#!/bin/sh

cd /home/tomtomhouse/../../.. (※pullするフォルダの指定)
git --git-dir=.git pull

これで、リモートへpushすれば、自動的に対象フォルダのデータがデプロイされます。

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

stageサイズのメモ書き

コードのメモです。

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.StageDisplayState; 
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	import flash.display.Shape;
	
	public class Sample extends Sprite
	{
		private var ball:Sprite = new Sprite();
		private var bg:Shape = new Shape();
		private var vectorX:Number = 10;
		private var vectorY:Number = 10;
		private var timer:Timer = new Timer(1000);
		private var width:Number = 0;//幅
		private var height:Number = 0;//高さ

		public function Sample()
		{
			super();
			
			// autoOrients をサポート
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
			
			//stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE
			//の記述の後でないと正確な値はとれない
			width = stage.stageWidth;// 幅
			height = stage.stageHeight;// 高さ

			bg.graphics.clear();
			bg.graphics.beginFill(0xffff00);
			bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			bg.graphics.endFill();
			
			addChild(bg);

			ball.graphics.beginFill(0xff0000);
			ball.graphics.drawCircle(0,0,50);
			ball.graphics.endFill();
			
			ball.x = 100;
			ball.y = 100;
			
			timer.addEventListener(TimerEvent.TIMER, loop);
			timer.start();
			
			function loop(e:TimerEvent):void {
				onSprite();
			}

			function onSprite():void {
				removeEventListener(Event.ENTER_FRAME, sprite_enterFrameHandler);
				addEventListener(Event.ENTER_FRAME, sprite_enterFrameHandler);
			}

		}
		protected function sprite_enterFrameHandler(event:Event):void
		{
			if(ball.x > width || ball.x < 0){
				vectorX = -vectorX;
			}
			if(ball.y > height || ball.y < 0){
				vectorY = -vectorY;
			}
			ball.x += vectorX;
			ball.y += vectorY;
			stage.addChild(ball);
			
		}

	}
}

http://help.adobe.com/ja_JP/air/html/dev/WS5b3ccc516d4fbf351e63e3d118666ade46-7e06.html

Published by tomoka , on 2月 16th, 2016 at 9:14 pm. Filled under: 未分類No Comments
この記事を読む

Electron

Electronはじめました

とりあえず何かつくろう。

まずは環境作り

いつもメモしないから都度調べているから、今回はメモしよう運動!

electron install

sudo npm -g install electron-prebuilt

node & npm install

https://nodejs.org/

環境の準備

npm init -y

Electron実行

electron .
(※開発ディレクトリ中での実行)

githubへ・・・

pushまでのhistory
cd /Users/***/Electron/electronTest/ (※開発環境へcd)
echo “# electronTest” >> README.md (※README作成)
git init
git status
git add -A
git commit -m “firstCommit”
git remote add origin git@github.com:***/electronTest.git
git remote set-url origin git@github.com:***/electronTest.git
git push -u origin master
git push (一度セットURLしたらこれでOK)

Published by tomoka , on 2月 7th, 2016 at 3:29 pm. Filled under: 未分類No Comments
この記事を読む

vi vim これだけは覚えよう・・・

勉強させて頂きました。
とても分かりやすく、ありがとうございます。
http://www.webhtm.net/vim/preserve.htm

vi・vimコマンドモード・ファイルの保存・終了

コマンドモードでは、exコマンドという様々なコマンドを実行する事ができます。
ノーマルモードから、コマンドモードに移るためには、「:」キーを押します。
コマンドモードに移ると、カーソルが一番下の段に移動します。
exコマンドで、編集したファイルの保存・終了する方法を紹介します。

キー 動作
:w
:w!
編集中のファイルを上書き保存します。!を付けると読み取り専用でも強制的に保存します。
:w name 編集中の内容をnameというファイル名で保存します。
:q
:q!
ファイルを保存済みの場合、vimを終了します。編集が途中の場合は、終了できません。!を付けると編集途中でも強制的に終了させることができます。
:wq
:wq!
ファイルを保存してから終了します。!を付けると読み取り専用でも強制的に保存して終了させることができます。
:x 
:x!
ファイルを保存してから終了します。!を付けると読み取り専用でも強制的に保存して終了させることができます。

exコマンドモードに移らずノーマルモードで保存・終了する方法もあります。

キー 動作
ZZ ファイルを保存してから終了します。:wqと同じ動作です。
ZQ ファイルを保存しないで終了します。:q!と同じ動作です。
Published by tomoka , on 12月 26th, 2015 at 8:43 pm. Filled under: 未分類No Comments
この記事を読む

setTransform()の設定方法

Flash CCの変形マトリックス

setTransform(x, y, x軸回転, 伸縮x, 伸縮y, 傾斜x, 傾斜y, 移動x*-1(+だとマイナス方向へ移動), 移動y*-1(+だとマイナス方向へ移動))

例)this.containerVisuble.setTransform(28,80,1,1,0,0,0,0,1);
 3*3行列    3*3行列
|a  b  c| |28 80 1|
|d  e  f|=|1  0  0|
|g -h -i| |0  0  1|

  • a:x座標
  • b:y座標
  • c:伸縮x(1=100%)
  • d:伸縮y(1=100%)
  • e:x軸回転
  • f:傾斜x
  • g:傾斜y
  • h:移動x座標 *-1(+だとマイナス方向へ移動)
  • i:移動y座標 *-1(+だとマイナス方向へ移動)

何が変形に影響するのか理解できればきっと大丈夫。

Published by tomoka , on 11月 23rd, 2015 at 10:22 pm. Filled under: 未分類No Comments
この記事を読む

トランプ素材等々・・・

High And Low 作成しました
ソースはコメントアウトだらけで汚い。
でも、勉強の為に作っているから残しておかないと悩んだ軌跡が後で分からなくなるよね。
と、いいわけをしてみる。

素材
トランプの素材は本来ならば自分で好みの物を作ろうとも思ったのですが、勉強する方が先なので、以下のサイトで調達しました。高品質な素材です。
http://www.xn--eckzb3bzhw32znfcp1zduw.com/data/trump.php

サンプル
http://tomoka.github.io/highAndLow/

Published by tomoka , on 11月 23rd, 2015 at 12:14 am. Filled under: 未分類No Comments
この記事を読む

html5 canvasサンプル作成ひと区切り

最適化とまでは言わないけれども、jsの圧縮やpngの圧縮をしました。
容量を減らす事が出来たのでContent Downloadの時間は圧縮されました。

また、データの圧縮の他に処理の見直しを行ないました。
ifをswitchに変えたりvalueの変更を一カ所で行なったり。
また、スコアのずれが分かりにくいようにスコア表示を何回勝ったかの表示に変えましたwww
リザルトへ遷移する為には10回以上勝たないと遷移できないようにしました。

いろいろ変えてみたけれども、今回作ったサンプルは特別重たいコンテンツではないからか変化は実感できないけど・・・。
http://www.tomo.mobi/test/canvas/jyankenSample.html

ここから、更に作り込みも出来るのですが今はまだ勉強中で作った物もサンプルなのでまた別途コンセプト等をキチンと考えたりして作ってみたいと思います。

Published by tomoka , on 11月 21st, 2015 at 11:18 pm. Filled under: 未分類No Comments
この記事を読む

フィードバックに関して思った事メモ

処理を順序よく進めたい為に、アニメーションの終わりを確認してからの次のアクションを進めると考えてボタンにflagを付けたりして、eventする時としない時を制御することを考えてみたけれども、実際組み込んでみると、「なんで押したのにFBが無いんだろう?」「event進んでいるのかな?」等々、???が増えました(個人的感想)。

押せないflagが立っている時は押してもイベントが進まない事が伝わる、比較的簡単な見せ方またはオーバーなリアクション等で変える事を考えたのですが、今一度、考え直し・・・。今までキューが溜まると進めていたアニメーションをstop();させて、次のアニメーションを動かすように書いていたので、同じように進めているアニメーションをカットしてしまえば??と・・・。

ただ、今回の該当する問題アニメーションはMCの中で終わらさせていたので、stop().MC_anime01.play();なんて書く訳にもいかないので、MCフレーム内のアニメーションが途中でも、後で動いたイベントの為に前に動いていたアニメーションのフレームをもどしてしまうのが良いとおもいました。(現在.animate()しているのを.stop()するのと同じような事 ※jQuery)

実際にやってみて、ボタンを押すと反応がすぐに返ってくるので、もやもやした気持ちも薄くなり、???が減りました。
見た目にも次のアニメーションを発火させた事を閲覧者は認識しているので、前のアニメーションが終わっていないとは思われにくからでは?と思いました。

アニメーション途中でもフィードバックのほうが大事。最上位。
違和感無く触らせる事がとても重要な事を再認識しました。

なお、現時点でPCでは点数加算の遅延はほぼ見られないけれども、スマホで見ると時々スコアの追加とアニメーション周りでずれが起こっているみたい。そもそも、処理を見直す必要があるのと、jsやpng等を圧縮して最適化してみるのとかとか。すぐではないけれども、もう少ししたらやってみる。

Published by tomoka , on 11月 18th, 2015 at 11:19 pm. Filled under: 未分類No Comments
この記事を読む

addEventListener()は必ずremoveしなくてはならない

addEventListener()ではまったのでメモ。

今作っている「じゃんけんゲーム」のボタンインスタンスに付与するイベントリスナー。
フレームを使い回して、シーンを回すことってあるとおもうのですが、フレームにボタンを配置して配置したボタンにイベントリスナーを付与すると通過するたびにイベントリスナーが増えてゆく・・・・。1回目通過は1つだけだけど、2回目通過は2つになって2回実行される・・・orz

これが原因でスコア表示がおかしくなっていました。
そこで、必ずイベントリスナーを削除する修正追加しました。
少しはまともに動くようになったかな。
画面の完成度はまだまだです。でも、一応動くようになりました。
なお、負け=-1点 勝ち=+2点 あいこ=+1点 でスコアが10点よりも多くなったらリザルトへ遷移する仕様です。よって、スコアが10点になっても、10点を超えないとリザルトへはとばないです。

手持ちのiPhone6で見てみたけど、スマホでも動く。うんうん。
でも・・・加点の点数表示アニメーションに遅延が発生している気配。

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