2012年の振り返り・2013年の抱負

今年ほとんど書かなかったブログの書き納め。社会人1年目は特に具体的な目標もなくスタートして、目の前の仕事にただがむしゃらに取り組んでいた1年でした。来年はしっかり抱負を持って望みたい。


【2012年の振り返り】

入社する前から開発の経験を経ていたのでエンジニアとして即戦力になるつもりでスタートしたけれど、まだまだ力不足だった。どんどん新規事業を立ち上げる部署のエンジニアとしては経験が少なすぎてサービスのクオリティ・開発スピードにはあまり貢献できず、ただ作るだけだった。とりあえず、営業で実績を残してきた先輩のビジネス感覚と会話力に驚いた。先輩もサービスを作る経験はなかったから、開発会社とのコミュニケーションで多少力になれたと思う。最低限だけど何とかいくつかのサービスをリリースするところまで持っていけてよかった。この時期、他部署の先輩方にお世話になって大変感謝(/_;)

グループの体制が変わり先輩ディレクター、先輩エンジニアが入ってまた先輩の実力に驚いた。この時期から一つのプロジェクトに集中して取り組むことができた。Objective-CとRailsを勉強してサービスとして形にするまで一通り経験できた。

あと今のところ無遅刻。意外としっかりしてる！


「開発会社常駐」

前半はほとんど開発会社に常駐する形で業務をして、デスマーチ・オフショア・怪獣からの激詰めなど色々と経験できて精神的に強くなった気がする。


「PCメガネ」

アルバイト時代の社長にもらったPCメガネを導入したところ、目に優しいだけじゃなく会社のみんなにいじってもらえた。今だにファッションでオレンジのメガネをかけてると思ってる人もいる(ﾟдﾟ)


「シェアハウス」

同じ業界の営業・エンジニアたちとのシェアハウスに入居。自分より圧倒的に激務の人がいて和む。毎日3時ごろまで誰かは起きてるから、体力があるときは3時ごろまで作業しても寂しくなかった。彼女いなくてもイベントを乗りきれる。


「ゲーム」

社会人になってこんなにゲーム(特にCall of Duty)をすると思わなかった。日々の楽しみをクリエイティビティに変えていけるかな。


「日報」

自分は強制力が働かないと継続事があまり続かないので、日報という形で日々の学び・振り返り・意思表明を継続してできたのがモチベーションの持続やPDCAの実践にも繋がり良かったと思う。



【2013年の抱負】

「自分の作品を作る」

自分の作ったサービスだと自信を持って言えるものを作る。
自分が関わったことでどう変わったのかを意識する。


「時間と質」

働いた時間の量より、使った時間に対するアウトプットの質を意識する。
メリハリつけて、仕事と遊びと個人開発をバランスよくこなすのが一番生産性が高いはず。


「深掘りする」

サーバー環境構築・LLフレームワーク開発・ネイティブ開発一通り経験したけれど、覚えた言語もバラバラでどれも完璧に使いこなせていない状態だから、来年はObjective-CとRailsに的を絞って深掘りしていきたい。


「育てる」

今年は開発するばかりでサービスを成長させる段階まで行かなかったから、来年は改善しながらサービスを育てていく過程を経験できればと思う。


「外に出る」

社内だけではなく、社外の考え方・技術に触れる。
社内外でアウトプットする機会を作る。
日報→ブログにしようかな。


「運動する」

素振りと走り込みをして、草野球でも活躍する。
長く働く為にも体力は維持しなきゃ。


「数字目標」

・月5000 万円稼ぐものを作る。
・個人開発で10個リリースする。


これが全部できれば相当イケてる先輩になれるはず。
他にも色々とあるけど頼りになる先輩がいることもあって、来年は自分ができることに対してもっと我を出していけるように集中しよう。

TitaniumでViewをDragする

この記事を参考に、動くように改良。

	var counter = 1;
	var startX = null, startY = null;
	view.addEventListener('touchstart', function(e){
	startX = e.x, startY = e.y;
	});
	view.addEventListener('touchmove', function(e){
	if((counter % 5) == 0){
	var x = (e.x - startX) + view.animatedCenter.x;
	var y = (e.y - startY) + view.animatedCenter.y;
	view.animate({top:y-viewHeight/2, left:x-viewHeight/2, duration:1});
	counter = 0;
	}
	counter += 1;
	});
	view.addEventListener('touchend', function(e){
	startX = null, startY = null;
	});

view raw drag_view.js hosted with ❤ by GitHub

e.x, e.yで取れるのはviewからの相対的な位置のようなので、最初にtouchした時点の位置を覚えておき差分を動かすように修正。

Titaniumでスクロール目盛により参照を切り替えるUI

Titanium mobileでWeightbotのような横スクロール目盛を作ってみた。

主な機能

• スクロールラベルの区切りで参照するデータを切り替える
• 目盛の矢印がスクロールラベルの丁度真ん中に来るようにする

２番目の機能を実現するロジック

• 貫性でスクロール中に速度が落ちたらちょうど真ん中に自動スクロール
• 指を離して少し経っても動いていなかったらちょうど真ん中に自動スクロール

Titanium mobile SDK 1.8から"dragEnd"イベントが拾えるようになりやっと実現できました。

パラメータは感覚で適当に決めました。

ご意見、アドバイスいただけたら嬉しいです。

	var win = Ti.UI.currentWindow;
	// 仮データ
	var dataList = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
	// 参照データを表示するラベル
	var dataLabel = Titanium.UI.createLabel({
	backgroundColor: 'black',
	borderRadius: 30,
	color:'white',
	font:{
	fontFamily:'Helvetica Neue',
	fontSize:100
	},
	textAlign:'center',
	top:50, left:'auto', height: 150, width: 200,
	text: dataList[0]
	});
	win.add(dataLabel);
	// 目盛に合わせてスクロールさせることで参照データを切り替えるScrollView
	var scrollView = Titanium.UI.createScrollView({
	contentWidth:'auto',
	contentHeight:'auto',
	top:290,
	height:70,
	width:320,
	backgroundColor:'#gray',
	zIndex:1
	});
	var labelNum = dataList.length + 1; // 切り替えラベルの数
	var labelWidth = 50; // 切り替えラベルの横幅
	for(var i = 0; i < labelNum; i++){
	if(i < labelNum - 1){
	// スクロールメモリのラベル
	var scrollLabel = Ti.UI.createLabel({
	borderColor:'black',
	backgroundColor:'#A0522D',
	height:70, width:labelWidth,
	left: 135 + labelWidth * i,
	font:{
	fontFamily:'Helvetica Neue',
	fontSize:25
	},
	textAlign: 'center',
	text:i
	});
	scrollView.add(scrollLabel);
	} else {
	// 選択範囲外は無地グレー
	var scrollLabel = Ti.UI.createLabel({
	backgroundColor:'#gray',
	height:70, width:135,
	left: 135 + labelWidth * i
	});
	scrollView.add(scrollLabel);
	}
	}
	win.add(scrollView);
	// 目盛
	var allow = Titanium.UI.createLabel({
	text:"▼",
	font:{fontSize:20},
	color:'#gray',
	top:200,
	left:150,
	width:20,
	textAlign:'center',
	zIndex:3
	});
	win.add(allow);
	// ---------------------------ここからロジック部分---------------------------------
	// 変数初期化
	var pos_old = 0;
	var time_old = new Date();
	var catchDragEnd = false;
	var throwDistance = 0;
	// Titanium mobile SDK 1.8からdragEndイベントが拾えるようになった
	scrollView.addEventListener('dragEnd', function(){
	catchDragEnd = true;
	// 0.2秒後にあまり動いていなければ切りの良い位置へ自動スクロール
	setTimeout(function(){
	if(pos_old % labelWidth != 0 && throwDistance < labelWidth / 2){
	scrollView.scrollTo(Math.round(pos_old / labelWidth) * labelWidth, 0);
	throwDistance = 0;
	catchDragEnd = false;
	}
	}, 200);
	});
	scrollView.addEventListener('scroll', function(e){
	var pos_new = e.x;
	// 目盛の計算
	var index = Math.floor((pos_new + labelWidth / 2) / labelWidth);
	dataLabel.text = dataList[index];
	time_new = new Date();
	var time_diff = time_new.getTime() - time_old.getTime();
	// あまりにも細かく見すぎても意味が無いので0.1秒間隔でチェック
	if( 100 < time_diff ){
	var pos_diff = Math.abs(pos_new - pos_old);
	// dragEndイベントを拾ってからのスクロール距離の合計
	if(catchDragEnd) {
	throwDistance += pos_diff;
	}
	// スクロール速度の計算
	velocity = Math.round(pos_diff / time_diff * 1000);
	// 0.2秒以上経過していない場合
	// かつ、速度が遅くなった場合
	if(time_diff < 200 && velocity < 20){
	// 中途半端な位置の場合
	if(pos_new % labelWidth != 0){
	// 切りの良い位置へ自動スクロール
	scrollView.scrollTo(Math.round(pos_new / labelWidth) * labelWidth, 0);
	catchDragEnd = false;
	throwDistance = 0;
	}
	}
	time_old = time_new;
	pos_old = pos_new;
	}
	});

view raw scrollCursor.js hosted with ❤ by GitHub

負にならないようにノイズをかける

気づくと１ヶ月未更新。

マメに更新するのは難しいなぁ。

小さなことからコツコツと、今日は実際に使った乱数の作り方をメモ。

「ある値にノイズをかけたいがマイナス値にはしたくない」という場合。

(追記：2012/02/08)整数ノイズになります。正しくは「整数のノイズをかける」ですね。

var gap = 3; // ノイズの間隔は±3にする

// 元の値は1~10で実験
for(var n = 1; n < 10; n++) {
 
 // 各20回実行
 for(var i = 0; i < 20; i++) { 
  
  // これだとノイズは最小でも-nにしかならない
     var noise = Math.round(Math.random() * (gap + n) - n);
     
     var a = n + noise;
     
     console.log("n:" + n + " a:" + a);
    }

    console.log("*****************");
}

localでWeb開発するときに外部端末でテストする方法

MacならIPアドレスではなく"コンピューター名.local"でローカルサーバーにアクセスできる。

コンピューター名は[システム環境設定]>>[共有]の一番上のところで編集できる。

アクセスする端末は同一のネットワークに繋いでいないといけない。同じ無線LANにつなぐか、[システム環境設定]>>[共有]のインターネット共有でつなぐと良い。

あとはローカルサーバーを起動してブラウザから"http://コンピュータ名.local/パス"を開けば外部PCやスマートフォンでテストできる。

thisによりオブジェクト自身を参照するときの注意点

@dankogaiさんが書かれた怠翻 - JavaScriptでありがちな9つのシマッタ のthisのくだりが参考になったので忘れないようメモ。

オブジェクト自身に紐づいた子オブジェクトをthis.~~で定義し、それをさらに別の子オブジェクトの中で呼び出すとundefinedになってしまう。var selfにthisを代入することで、別の子オブジェクトの中でも呼び出すことが可能になるとな。

	<input type="button" value="A" id="buttonA" >
	<input type="button" value="B" id="buttonB" >
	<script>
	var objectA = new function () {
	this.alertMessage = "Hello world!";
	this.ClickHandler = function() {
	alert(this.alertMessage );
	}
	};
	document.getElementById("buttonA").onclick = objectA.ClickHandler //undefined
	var objectB = new function () {
	var self = this;
	this.alertMessage = "Hello world!";
	this.ClickHandler = function() {
	alert(self.alertMessage);
	}
	};
	document.getElementById("buttonB").onclick = objectB.ClickHandler //Hello world!
	</script>

view raw nestedThis.html hosted with ❤ by GitHub

JavaScriptの等価演算子(==)と厳密等価演算子(===)の違い

"=="は型を自動変換して比較してくれるので便利だが、型も含めて厳密に比較したい場合は"==="を使う。

	var num = 10;
	var str = "10";
	alert(num == str); //true
	alert(num === str); //false

view raw equality_operator.js hosted with ❤ by GitHub