nvm


LinuxでNode.JSをいれるときnvmから入れると簡単に導入できて複数のバージョンも管理できて便利です。

nvmをgithubからダウンロードしシェルスクリプトを実行し、インストールします。
(現在のユーザの.nvm以下にインストールされます)

wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

インストールされたファイルのnvm.shを実行すればnvmが使えるようになります。

. ~/.nvm/nvm.sh

後はバージョン指定してNode.JSを使える状態にします。

nvm install 0.10
nvm use 0.10

Angular-UI-Bootstrap TAB


Angular UI Bootstrapタブを使ってみました。

ngRouteやui-routerを使いだすとbootstrapタブがリンクで切り替えてるため使えなくなってしまいます。

AngularUIにはAngularJSのためのbootstrapコンポーネントが用意されています。

いつも通りbowerでインストールします。

bower install angular-bootstrap --save

スクリプトを読み込みます。

<script src="/vendors/angular-bootstrap/ui-bootstrap-tpls.min.js></script>

tplsテンプレートが含まれているものです。こちらを使う方が無難でしょう。

angularモジュール追加します

var app = angular.module('app', ['ui.bootstrap']);

で使い方はとっても簡単

<tabset>
	<tab heading="ヘッダー1">内容1</tab>
	<tab heading="ヘッダー2">内容2</tab>
	<tab heading="ヘッダー3">内容3</tab>
</tabset>

オプションとかはマニュアル読んでください←

angular-ui bootstrap
http://angular-ui.github.io/bootstrap/

Angular UI Router


前回ngRoute使いましたが、よくよく調べるとangular-ui-routerの方が多機能なようです。

こちらを使ってみましょう!

bower install angular-ui-router --save

インストール完了!

<script src="/vendors/angular-ui-router/release/angular-ui-router.min.js></script>

インクルード!あとはマニュアル通りに使いますー。

var app = angular.module('<app名>', ['ui.router']);

app.config(function($urlRouterProvider, $stateProvider) {
	$urlRouterProvider.otherwise('/index');

	$stateProvider
		.state('index', {
			url: '/',
			templateUrl: '/templates/dashboard.html'
		})
		.state('test', {
			url: '/test',
			templateUrl: '/templates/test.html'
		});
		.state('test.item', {
			url: '/:id',
			templateUrl: '/templates/test.item.html',
			controller: 'TestItemController'
		});
});

テンプレートが入る場所はng-viewではなく、ui-viewになりますー。

<div ui-view></div>

コントローラはこんな感じ

app.controller('TestItemController', function($scope, $stateParams) {
	// URL引数の取得: $stateParams.id
}

リンクするときはui-sref=”状態名”でも可能です。
もちろん今まで通りhrefでも大丈夫です!
引数の指定も簡単☆

<a ui-sref="test"></a>
<a ui-sref="test.get({id:0})"></a>

angular-ui-routerの何が便利かというと、状態に階層を設け、ページの一部分を書き換えることができます。
上記、例の場合。test→itemといった構造になっています。そのため、test.htmlのui-viewがtest.item.htmlに更新されます。

時間が無くなったので今回はこの辺で!

AngularJS angular-route angular-ui-router


AngularJS使っていてngRouteがなぜか動かないなーって思ってたらangular-ui-router使ってました。。。

angular-routeとは全くの別物なんですね。。

bower install angular-route --save

でインストール完了!

<script src="/vendors/angular-route/angular-route.js></script>

インクルード!して、あとはマニュアル通りに普通に使えますー。

angular.module('<app名>', ['ngRoute']).config(['$routeProvider',
	function($routeProvider) {
		$routeProvider
		.when('/index', {
			templateUrl: '/templates/index.html'
		})
		.when('/test', {
			templateUrl: '/templates/test.html'
		})
		.otherwise({
			redirectTo: '/index'
		});
	}
]);

あ、テンプレートで指定した部分はng-viewのところに入ります。

<div ng-view></div>

 

[追記] angular-ui-routerのほうが便利そうだったのでそちらも使ってみました!
http://nekok.com/2014/02/angular-ui-router/

Install OpenCV in CentOS6.5


CentOSOpenCV入れましたー。メモ。

[ビルドに必要なファイルのインストール]
rpm -Uvh http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm
yum install cmake28

CentOS(6.5)の場合、標準のリポジトリではいるcmakeのバージョンが古いためビルド時にエラーがでます。。
(CMake Error at /(略)/opencv-2.4.8/cmake/cl2cpp.cmake:50 (string): string does not recognize sub-command MD5)
そのためepelリポジトリのcmake28をインストールします。

[OpenCVのソース取得(2.4.8)]
wget http://sourceforge.net/projects/opencvlibrary/files/opencv-unix/2.4.8/opencv-2.4.8.zip/download
unzip opencv-2.4.8.zip
cd opencv-2.4.8

[ビルドしてインストール]
cmake28 .
make
make install

足りないファイルがあったらyum installでインストールしてください。

[ライブラリを利用する]
gcc a.cpp -lopencv_core -lopencv_highgui -lopencv_imgproc

[実行する]
libが/usr/local/libにあるためエラー出る。
error while loading shared libraries: libopencv_core.so.2.4: cannot open shared object file: No such file or directory

*一時的にライブラリを有効化
export LD_LIBRARY_PATH= $LD_LIBRARY_PATH: /usr/local/lib

*継続して利用したい場合
vi /etc/ld.so.conf.d/usr_local_lib.conf
/usr/local/lib
ldconfig

実行時にlibraryが見つからないエラーが出る場合は、
ldd <実行ファイル> でnot foundとなっているライブラリを
find / -name <ライブラリ名> で探してやればいい。
ない場合は、yumダウンロードの必要がある。

Visual Studio Online ”Monaco”


VisualStudioOnlineMonaco試してみました!

https://manage.windowsazure.com/

WindowsAzureで新しくWEBサイトを作成します。

今回はNodeJSを使うので、コンピューティング→WEBサイト→ギャラリーからでNodeJS Empty SiteでWEBアプリケーションを追加しました。

Monacoを使うために、構成Visual Studio Online での編集をオンにします。

デプロイ資格情報がないとオンにできないのでここで資格情報の登録もしましょう。

設定が完了すると、ダッシュボード概要Visual Studio Onlineでの編集がでてきます。クリックするとVisual Studio Online ”Monaco”が起動します。

エディタは補完機能もあり便利です。コンソールもなかなか見やすいです。

ソース管理はGITのみとなってます。

以上すてねこでした!

3189e0e7b4247cebac23f8c5d930214a

VisualStudio2013 Update1


VisualStudio2013 Update1でましたね\(>ヮ<)/
ダウンロードはこちらから↓
http://www.microsoft.com/ja-jp/download/details.aspx?id=41650

さっそく入れてみました!TFSが”ワークスペースバージョンテーブルに、不明なスキーマバージョンが含まれています”みたいなエラー出て何もできなくなった。(´・ω・`)

どうしてもなおらなかったので、仕方なくワークスペース削除してTFSへの接続しなおして、最新版を取り直せばなおった!

INPUT TAG IN NG-REPEAT 2


昨日動かないといっていた問題解決しました。

ネットをさまよっていると、、

http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs/14379763#14379763

参考になりそうな質問を発見!

公式ではできないってことになってるけど、解決策としてng-repeatの中でng-formも生成すればvalidation効くようになるよ☆

なるほど。ng-formも一緒生成すればそこのcallbackにちゃんと設定されるってことですね。

やってみた・・・。動かない・・・。なーぜー?

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="form[field.name].$dirty && form[field.name].$invalid">
			<span ng-show="form[field.name].$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

と思ってよく見比べてみたら、validationをform[…]がinnerFormになっていることに気付くΣ

外のほうのformの中のフィールドに中からはアクセスできないのね。

昨日試した感じ外からはこの方法でアクセスできた気がするんだけど。
いろいろ綺麗に書き直して、、、

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }} {{ (field.required) ? '*' : '' }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="innerForm.$dirty && innerForm.$invalid">
			<span ng-show="innerForm.$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

以上!すっきり。

input tag in ng-repeat


AngularJS使ってるんだけど。

ng-repeatの中でinputつくったら入力してもvalidationとか効かにゃい。

なんてこった。Σ(๑ l 口 l ๑ )

ng-repeatの外で同じ名前でinputつくると外のほうのinputは反応する。外のほうで入力すると中のほうも効くようになる・・・。

ぐぬぬ。解決策探し中。

→ 解決編

Yuttari Node.js


今日は、のんびーり昨日作った画像から文字を認識するアプリWebからアクセスできるようにしました!

Node.jsでURL叩いたら画像を解析して文字を返してくれるだけの簡単なAPI。完成しましたー。

Node.jsVisualStudio2013Node.js Tools for Visual Studioいれて開発してます。まだまだバグだらけでよく落ちますが意外と便利です!

こちらからダウンロードできます↓
https://nodejstools.codeplex.com/