Browse: Home » 2014 » 11月 » 21

Archives by date

You are browsing the site archives by date.

【AngularJS】フォームを開いた際に自動でフォーカスさせるディレクティブ。

を見つけたのでメモ。

Javascript

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
angular.module('app').directive('ngFocus', function($timeout) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.ngFocus, function(val) {
                if (angular.isDefined(val) && val) {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            }, true);
 
            element.bind('blur', function() {
                if (angular.isDefined(attrs.ngFocusLost)) {
                    scope.$apply(attrs.ngFocusLost);
 
                }
            });
        }
    };
});

HTML

XHTML
1
<input type="text" ng-focus="expression" ng-focus-lost="expression">

うん。便利。

2014/11/21 _onichannn , ,

【Chrome】を再起動する方法。

アドレスバーに下記を入力してエンター。

Default
1
chrome://restart

ッッターーーーーーーーーーーン!!

てか、自分の場合再起動しなかったから自分で立ち上げた件。

2014/11/21 _onichannn , ,

【AngularJS】コントローラー間で値を共有する方法いろいろ。

qiitaにいいまとめがあったのでペタリ。

http://qiita.com/sunny4381/items/aeae1e154346b5cf6009

個人的には$broadcast()を用いたアプローチもなかなか好き。

シンプルさならShared Serviceがおすすめ。

2014/11/21 _onichannn , ,

【AngularJS】resourceとng-initの関係。

テンプレートの中でng-initを使用する際、非同期で準備される値（以下、非同期変数）を用いてると、その値がセットされる前にng-initが実行されてしまうため、中身を正しく参照できないという問題が発覚。
要は通信中にinitされてしまうため、undefinedが参照されているような感じ。

しかし、ng-repeatにセットされた非同期変数に関してはループ内でng-initすると問題なく動作するようなので、ng-initとresourceを掛けあわせたい場合はresourceの返り値を配列にラップしてでもng-repeatを用いたほうが幸せになれる。

2014/11/21 _onichannn , ,

【AngularJS】複数のコントローラー間で値を共有する。

入れ子による継承やui-routerなどで親子関係になっているコントローラーに関していえば、子から親の変数を参照することは簡単にできる。が、親から子のプロパティを参照するのに手こずった。

解決方法としては双方のコントローラーに共通のサービスを注入しそのサービスが返却するオブジェクトを経由して値の共有を行うのがベターとのこと。下記例。

Javascript

JavaScript
1
2
3
4
5
6
7
8
9
10
11
myApp.factory('Data', function () {
    return { FirstName: '' };
});
 
myApp.controller('FirstCtrl', function ($scope, Data) {
    $scope.Data = Data;
});
 
myApp.controller('SecondCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

HTML

XHTML
1
2
3
4
5
6
7
8
<div ng-controller="FirstCtrl">
  <input type="text" ng-model="Data.FirstName">
  <br>Input is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{Data.FirstName}}
</div>

これで片方のモデルを書き換えるともう片方のモデルにも変更が伝搬されるようになった。

2014/11/21 _onichannn , ,

【PHP】超巨大な数値の足し算引き算を行う方法。

PHPで巨大過ぎる数をintのまま扱おうとするとPHP_INT_MAXで定められた値に丸め込まれてしまい正しい計算が行えないため、どうしても演算を行いたい場合は文字列として操作する必要がある。

ちなみにPHPでの最大整数は32bit環境では-2^31から2^31-1。64bit環境では-2^63から2^63-1となる。

そんな大きい数字扱う機会ねーよ！

と思っていた時代が僕にもありました。

というのもTwitterに関連するサービスを作っていた際、APIから帰ってくるツイートIDが18桁とかなんですよ。ええ。
皆さんご存知の通りPHP32bitだと扱える整数は10桁、64bitならまぁ19桁まで扱えるんですけれど自分の環境だと入ってない。

ちなみに自分の環境がPHP32bitかPHP64bitかを確認するには、下記コマンドをCLIから実行してみればわかる。

Default
1
php -r 'echo PHP_INT_SIZE;'

4と表示されれば32bit
8と表示されれば64bit

である。

で、手っ取り早く文字列のまま足し算、引き算が出来ないものかと調べていたら、下記ブログを発見。

http://ambiesoft.fam.cx/blog/archives/1822

これはマジで便利。

PearのMath_BigIntegerを用いても可能とのこと。

http://pear.php.net/package/Math_BigInteger

試しに中身を見てみたら恐ろしくゴツイライブラリだった件。

2014/11/21 _onichannn , ,

【Twitter】timeline系apiのsince_idやらmax_idやらpageに関する解説。

Twitterクライアントを作成していてとても参考になったのでペタリ。

http://nonbiri-tereka.hatenablog.com/entry/2014/03/06/220015

pageのパラメーターはほぼいらないことに気づいた。

2014/11/21 _onichannn , ,

【AngularJS】複数本の非同期通信が完了した後に処理を実行する方法。

$q.all()を用いる

AngularJSの$qはJavascriptのPromiseインターフェースを提供してくれるサービス。

$qのdefer()メソッドを実行すると、Deferredオブジェクトを生成する事ができる。

このDefferedオブジェクトと$qサービス用いることで複数ある非同期通信の完了を検知することが出来るようになる。

例

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// HogeリソースとFugaリソースが準備されているものとする。
var async_1 = function() {
    var d = $q.defer();
    HogeResource.query(function(data) {
        d.resolve(data);
    });
    return d.promise;
}
 
var async_2 = function() {
    var d = $q.defer();
    FugaResource.query(function(data) {
        d.resolve(data);
    });
    return d.promise;
}
 
$q.all([
    async_1(),
    async_2()
]).then(function(data) {
    var hogeData = data[0];
    var fugaData = data[1];
 
    // do something
});

各非同期通信処理関数は返り値としてPromiseオブジェクトを返却するように設計し、それを$q.all()メソッドでラップしてやればOK。

$qサービスはマジ便利過ぎて神がかってる。

$qに関する解説として下記ページも非常に参考になった。

http://dev.classmethod.jp/client-side/javascript/angularjs-q-promise/

2014/11/21 _onichannn , ,