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

GitHubでwordpress管理

blogのデータをGitHubで管理できるように設定しました。
クライアント側の設定はいつも通りのGitHubとのremote設定。GitHub側のデプロイするリポジトリのSettingのWebhookの設定で外部サーバへデプロイする仕組みを用意します。

設定を埋めてゆきます。
受け取りのファイルを作ります。
https://git-scm.com/book/ja/v2/GitHub-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B-GitHub-%E3%81%AE%E6%93%8D%E4%BD%9C
https://developer.github.com/webhooks/

<?php
$SECRET_KEY = 'Secretに入れた文字列';
$LOG_FILE = dirname(__FILE__).'/hook.log'; #ログを取る場所

if (! isset($_SERVER['HTTP_X_HUB_SIGNATURE'])) die();
if (! $_SERVER['HTTP_X_HUB_SIGNATURE'] === sha1($SECRET_KEY)) die();
$json_string = file_get_contents('php://input');
$payload = json_decode($json_string, true);
if (! $payload['ref']) die();

if ($payload['repository']['full_name'] === 'アカウント名/リポジトリ名' && $payload['ref'] === 'refs/heads/更新該当のブランチ') {
  shell_exec("sh deploy.sh");
  file_put_contents($LOG_FILE, date("[Y-m-d H:i:s]")." ".$_SERVER['REMOTE_ADDR']." git pulled: ".$payload['head_commit']['message']."\n", FILE_APPEND|LOCK_EX);
}else{
	file_put_contents($LOG_FILE, date("[Y-m-d H:i:s]")." invalid access:認証通っていません ".$_SERVER['REMOTE_ADDR']."----\n", FILE_APPEND|LOCK_EX);
}
?>

上記スクリプトは、http://takemikami.com/2016/01/11/GitHubWebhookgit-pushdeploy.htmlを参考にさせていただいております。ありがとうございます。
受け取って、リクエストが指定したリポジトリからで、イベントとキーが一致したら、
gitコマンドをシェルスクリプトで実行します。

#!/bin/sh
cd /home/tomtomhouse/www/www.tomo.mobi/wordpress
git --git-dir=.git pull origin master

受け取りのプログラムファイルもgitコマンドを打つシェルスクリプトもファイルの権限は「実行」に設定します。
この時、SSH通信でRSA暗号のパスフレーズが必要のときは、ssh-keygenでキーを生成するときにパスフレーズの設定を無しで作ると良いです。

備考
.gitignoreはGitHubのものを使うのが良いと思います。
https://github.com/github/gitignore/blob/master/WordPress.gitignore

Published by tomoka , on 3月 12th, 2017 at 12:16 am. Filled under: githubNo 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
この記事を読む

wordpress Git 管理

wordpressのGit管理をようやく始めました。

サーバ側
gitのリポジトリを作る

  1. cd /home/アカウント名
  2. mkdir git(自分のhomeにgitフォルダを作って、そこで管理しようと思う)
  3. cd git
  4. mkdir tomo_mobi.git

管理するファイル名に.gitをつけるとわかりやすい。

ローカル側

  1. git init
  2. git remote remote add origin ssh://アカウント名@アカウント名.sakura.ne.jp/home/アカウント名/../../../git_test.git

※私はサクラレンタルを使っているので。

あとは、リモートのリポジトリにpushして、公開しているwpのフォルダをpullで変更を更新。
ローカルでの変更の確認はMAMPなどを使うから、プレビューもすぐできるし、スムーズに開発できます。

まだ、hookの設定やssh接続の時のパスワードの設定なども入れてません。
次回はここら辺の設定もやって、もっと効率化してゆきたいと思います。

Published by tomoka , on 2月 5th, 2017 at 3:30 pm. Filled under: git,wordpressNo 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
この記事を読む

HTML5 canvasで気がついた事メモ

随時更新するページ。
メモブログの神髄。

stage

できるだけthisとかthatは使わずstageを使う。
でないと、DisplayObject.parent、親要素のぶれが起こる。
深度などいろいろと扱いにくくなる。

リンクindex

http://definitelytyped.org/docs/easeljs–easeljs/classes/createjs.container.html

Published by tomoka , on 12月 26th, 2015 at 11:29 pm. Filled under: canvas,html5No 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
この記事を読む