ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお（^ω^ = ^ω^）

CakePHP3をインストール

CakePHP CakePHP3.x PHP Mac OS X

（前もやった気がするけど。。。）

全然覚えていなかったのでメモ

環境

$ sw_vers 
ProductName:  Mac OS X
ProductVersion: 10.11.5
BuildVersion: 15F34

el capitanです。

php5.6をインストール

phpbrewやphpenvとかでインストールしようとしたらapxsでハマる(´；ω；｀)ﾌﾞﾜｯ

なので、プリインストールされているphpをバージョンアップしました。

$ brew update
$ brew upgrade
$ brew tap homebrew/php
$ brew tap homebrew/dupes
$ brew install php56 --with-apxs2=/usr/sbin/apxs 

==> Installing php56 from homebrew/php
Error: Cannot install homebrew/php/php56 because conflicting formulae are installed.

あらら

php55をunlinkして再度実行

$ brew unlink php55

$ brew install php56 --with-apxs2=/usr/sbin/apxs 
==> Summary
🍺  /usr/local/Cellar/php56/5.6.23: 331 files, 48.9M

おｋ

$ php -v
PHP 5.6.23 (cli) (built: Jun 24 2016 21:14:33) 
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies

インストールしたいphpを使いたいので、Apache側の設定も変更する

$ sudo vim /etc/apache/httpd.conf

####
#LoadModule php5_module libexec/apache2/libphp5.so
LoadModule php5_module /usr/local/Cellar/php56/5.6.23/libexec/apache2/libphp5.so
####

intlをインストール

これがよくわかりませんが、国際用のアプリケーションを作成するときに使うモジュールらしい。

composerとかでもエラーが発生するので、今のうちにインストールしておく

$ brew install php56-intl

インストールしたら、php.iniに設定する

extension=intl.so

composerを使ってCakePHP3をインストール

$ composer  create-project --prefer-dist cakephp/app ${APP_NAME}

これでインストールできるはず。

ちなみに、先ほどのintlが入っていないとこうなる。

  Problem 1
    - cakephp/cakephp 3.2.8 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.7 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.6 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.5 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.4 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.3 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.2 requires ext-intl * -> the requested PHP extension intl is missing from your system.
    - cakephp/cakephp 3.2.1 requires ext-intl * -> the requested PHP extension intl is missing from your system.

cakephpの設定ファイルを修正

${APP_NAME}/config/app.default.phpとなっているはずなので、app.phpにリネームする。

tmpのパーミッションを変更

$ chmod -R 777 ${APP_NAME}/tmp

これでおｋ

f:id:aipacommander:20160710141024p:plain

【読んでいる】プログラマ脳を鍛える数学パズル

その他

プログラマ脳を鍛える数学パズル シンプルで高速なコードが書けるようになる70問

プログラマ脳を鍛える数学パズル シンプルで高速なコードが書けるようになる70問

むずかしいれす（^q^

すごく楽しいけど、数学弱い私は何をいっているのかわからない問題が多々。。。

これを読み終えた時にはすべて理解できているであろうか。。。。

また、こんなに馬鹿だとは思っても見なかった。。。反省して毎日これを続けたいと思う。

とりあえず頭痛いからねるorz

【AngularJS1.4.x】 DirectiveからControllerのメソッドを呼ぶための設定

AngularJS AngularJS1.4.x JavaScript

すごくハマりました。

やりたいこととして、とあるdirectiveからとあるcontrollerのメソッドを実行したかった。

が、方法がわからずにすごく時間がかかりました。とりあえずできたのでメモ。

環境

  • chrome 51.0.2704.103 (64-bit)
  • angularjs 1.4.9

実装

app.controller('myController', function($scope) {
    $scope.controllerMethod = funciton() {
        // controllerの処理
    };
});

app.directive('myDirective', ['$timeout', '$interval', function($timeout, $interval) {

    var getContentUrl = function() {
        return './js/template/template.html';
    };

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            ngModel: '=',
            ngModelDisplay: '='
        },
        templateUrl: getContentUrl(),
        controller: 'myController', // ここ大事！
        link: function(scope, element, attrs, ngModel) {
          // 省略
          scope.$apply('controllerMethod()');
        }
    }
}]);

コードの通りの実装をすればいける（はず）

directiveからcontrollerのメソッドを使う場合は、linkの中でscope.$applyにメソッド名を渡せばよい。

次に大切なことは、directiveのreturnで返すパラメータの中のcontrollerの箇所。ここをdirectiveから使用したいcontrollerのメソッドが存在するcontroller名を指定しないと使えないことがわかった。今回はこれにすごくハマりました。。。orz

仕組みはいまいちまだよくわかっていないが、とりあえずこれでできるようになりましたとさ。。。続く。

IE系のブラウザでNumber.isFinite()が動作しないので、polyfillを使おう

JavaScript

とあるプロジェクトで、エラーがでたのでコンソールみたら、「isFinite()って関数はありません」ってエラー。

「まじか・・・」と思いつつ、調べたら「polyfill」使えばいけるって書いている記事を見つけたのでメモ。

qiita.com

isFiniteとは？

Javascriptに実装されている関数です。有限数かどうかを確認します。

有限数とは？

有限の大きさ：ある数Ｎに対してそれより大きな数Ｍが存在する。 ということ。

よくわからんけど。無限についてはなんとなく。無限という数値は（x+1）ということができないから。それ以外は有限数と。

ようはjsで計算ミスったときによくみるInfinityがそれにあたるのかなと思いました。

developer.mozilla.org

使ってみる

動いたよ！

だがしかし。。。

> isFinite(10)
true
> isFinite('10')
true

おうおうおう（^ω^;

数値と文字列の型チェックはしてくれないのね。ということで、ドキュメントにもありますが、堅牢性の高いチェックをするならNumber.isFinite('0')を使いなさい。とのこと。

developer.mozilla.org

> Number.isFinite(10)
true
> Number.isFinite('10')
false

うむ。

しかしIEには実装されていない(´；ω；｀)ﾌﾞﾜｯ

＿人人人人人人人人人人人人人人人人＿
＞ Internet Explorer 未サポート＜
￣ＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹＹ￣

泣いた

polyfillを使えばいける

polyfillとは？

hblog.glamenv-septzen.info

要するにHTML/JS/CSSの最新仕様や、まだドラフトとか提案段階の機能を、古いブラウザとかでも先取りして動かせるようにしてくれるライブラリをまとめて "Polyfill" というカテゴリで扱ってるらしい

ふーむ。

使ってみる

Qiitaの記事にはこう書いてある。

Number.isFinite = Number.isFinite || function(any) {
  return typeof any === 'number' && isFinite(any);
};

これでいけました！

（jsって動的にメソッドを追加できるんかいな・・・phpみたいやな）

まとめ

jsの型について知らないことが多くて困っています。。。

NaNとか一回一覧を用意して覚えたほうがいいなぁー。

【AngularJs1.4.x】input[type="range"]で、何故かレンジ入力の位置が変わらないバグ

AngularJS AngularJS1.4.x JavaScript

丸１日ハマりました。

何故か知らないけど、directiveで作成するhtmlの中のinput[type="range"]。それに初期値を入れようとすると何故か更新されないバグがあることがわかりました。

github.com

issueを見るとわかると思いますが、みんな回避作を色々用意しています。しかし、私の環境では動かない。

どうしたものか。。。

試行錯誤しながら色々試すと、$timeoutを使ったコードが一番しっくりきて、しかも修正できた。

github.com

  • app.js
app.directive('myDirective', ['$timeout', '$interval', function($timeout, $interval) {
    function setScopeValues(scope, attrs) {
        scope.min = attrs.min || 0;
        scope.max = attrs.max || 0;
        scope.value = attrs.value || 0;
    }

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            ngModel: '=',
            ngModelDisplay: '='
        },
        template:
        '<div class="col-sm-12">' +
        '   <input type="text" ng-model="ngModelDisplay">' +
        '</div>' +
        '<div class="col-sm-12">' +
        '       <input type="range" value="{{value}}" class="form-control" min="{{min}}" max="{{max}}" ng-model="ngModel">' +
        '</div>',
        transclude: true,
        link: function(scope, element, attrs, ngModel) {
            setScopeValues(scope, attrs);

            // 下記コードを追加したら修正できた
            $timeout(function() {
                if (scope.value === attrs.value) {
                    ngModel.$setViewValue(scope.value);
                }
            });
        }
    }
}]);

ちなみに、$timeoutが何を意味しているかはわからない（｀・ω・’）

www.buildinsider.net

なるほど。描画の後に動作しているっぽいということね。（本当かな。。。）