fainaldt

[fainaldt]

angularのngRepeatでエラーでた

ngrepeatした要素でDrag&Dropしてたら↓のエラーが出た。

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater:

ここに書いてあった通りにやってみたら無事エラー解消。

ありがとうございます！

[fainaldt]

angularjsのカスタムディレクティブでコントローラーのscopeにバインドしたいと思った

laravelでangularを使いたいなーって思ったけど、angularを結構忘れちゃったのでnode+angularで遊んでたところ、ディレクティブ作りたくなった。

作ってみたら今度はコントローラーのscopeにバインドしたいと思ったのでやってみた。

今回作ったディレクティブはよくある★をクリックしてON/OFFで画像変えるようなやつ。

★をクリックしたら上のプログレスバーも変わってほしいよね。

ってわけでやってみたら以外とできた。

必要なのは、ディレクティブ自体のscopeを設定して、HTMLで使うときに属性として使用させること。

return { restrict: 'AE', scope: {bind:'='}, template: //HTML, transclude: true, link: function (scope, element, attrs) {//処理})

scopeに書いてあるbindってのを属性として扱うようにする利用する側はこのbindに値を設定することでディレクティブ側でbindを変更したときに同時に変更できる。

やり方があってるのか不明だけどできたのでひとまず終了。

ソースはこんな感じになった。

/** * レート表示ディレクティブ * デフォルトの画像を使用する場合、表示される画像をimages/icon/に配置する必要がある * * * [パラメータ] * execute : 押下時に実行するfunction * max : 最大数 * value : 初期値 * bind : 親スコープでバインドしたい値 * onimage : ON時の画像パス * offimage : OFF時の画像パス * [使用方法] * <rate-directive execute="function()" bind='コントローラーでバインドした値' max=10 value="rate"><rate-directive> * * @author gozaru */ var myApp = angular.module('myApp'); myApp.directive('rateDirective', function(){ return { restrict: 'AE', scope: {bind:'=', execute: '&'}, template: '<div style="display: inline-block"></div>', transclude: true, link: function (scope, element, attrs) { var on = 'images/icon/Star6.png'; var off = 'images/icon/Star7.png'; if (attrs.onimage !== void 0) { on = attrs.onimage; } if (attrs.offimage !== void 0) { off = attrs.offimage; } var max = getMax(); var value = getValue(); withStar(value, max); /** * 最大数と数からrateとなる星の要素を生成する * * @param {int} num ONにする数 * @param {int} max 最大数 */ function withStar(num, max) { element.children().empty(); for (var i = 1; i <= max; i++) { var star = (i <= num) ? on : off; var img = '<img class="rate" value="' + i + '" src="' + star + '">'; $(img).appendTo(element.children()); } var rateview = '<span class="label label-success">'+ getRate(num, max) +'%</span>'; $(rateview).appendTo(element.children()); } /** * 要素に指定されたmaxを取得する * * @return {int} maxが数値または数字ではなかった場合は5を返却する */ function getMax() { var max = attrs.max; if( typeof(max) != 'number' && typeof(max) != 'string' ) { //デフォルトのMAXは5 return 5; } else { if (max == parseFloat(max) && isFinite(max)) { return Math.ceil(max); } else { return 5; } } } /** * 要素に指定されたvalueを取得する * * @return {int} 指定なしまたは数値または数字ではない場合は0 */ function getValue() { var value = attrs.value; if( typeof(value) != 'number' && typeof(value) != 'string' ) { return 0; } else { return Math.ceil(value); } } /** * パラメータから%を算出し返却する * * @param {int} rank 選択値 * @param {int} max 最大値 * @return {int | flote} */ function getRate(rank, max) { if (rank == max) return 100; return (100 * (rank / max)).toFixed(1); } element.on('click', 'img', function(event) { var max = getMax(); var value = $(this).attr('value'); element.attr('value', value); withStar(value, max); scope.$apply(function() { scope.bind = getRate(value, max); }) if (scope.execute !== void 0) { scope.$apply(attrs.execute); } }); } }; });

使うときはこんな感じ。フィルターは別途作った。

<rate-directive execute="changeProgress($parent.$index,$index, '')" bind="item.progress" value={{item.progress|rateFilter:max}} ></rate-directive>

[fainaldt]

angular

angular.jsを久しぶりに触った。

結構日本の記事が増えてるね。

http://www.slideshare.net/frontainer/2angularjs

みておこーっと

[fainaldt]

Laravel4初期値設定クラス(Seeder)を作成

マイグレーションしたUsersテーブルへの初期データを���入してみる。

1.seedクラスを作成

DatabaseSeederを継承して作成する

class UserSeeder extends DatabaseSeeder { public function run() { $users = [ [ 'username' => 'xxxx', 'password' => Hash::make('xxxx'), 'email' => 'xxxxxx@gmail.com' ] ]; foreach($users as $user) { User::create($user); } } }

2.app/seeds/DatabaseSeeder.phpに実行するseedクラスを追記

class DatabaseSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { Eloquent::unguard(); //実行するseedクラスを指定する $this->call("UserSeeder"); } }

3.seedクラスを実行

php artisan db:seed

成功すれば以下のメッセージでる

Seeded: UserSeeder

これでＯＫ

これは結構便利だなー。

[fainaldt]

laravel4でテーブルのカラム追加

前回テーブルのマイグレーションをしたので次はマイグレーションしたテーブルのカラムを追加しようと思った。

とりあえずこんな感じでできた。

1.マイグレーションの生成

php artisan migrate:make create_users_table_2 --table=users

前は--createだったけど今回は--table

マイグレーション実行時にクラス名が被るとPHPエラーになちゃうからcreate_users_table_2にした。

2.生成されたソースの修正

追加するカラムをup()とdown()に記述する

<?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateUsersTable2 extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function(Blueprint $table) { $table->integer('created_by'); $table->integer('updated_by'); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function(Blueprint $table) { $table->dropColumn('created_by'); $table->dropColumn('updated_by'); }); } }

3.マイグレーション実行

php artisan migrate

[fainaldt]

laravel4でテーブルのマイグレーション

マイグレーションって他のフレームワークでもあったけど、実際まともに使ったことがなかった。

いい機会だからマイグレーションしてみる。

1.mysqlをスタート

mysql-ctl start

2.usersテーブルを作成する

プロジェクトのルートへ移動してマイグレーションのコマンドを実行する

php artisan migrate:make create_users_table --create=users

成功するとメッセージが出る

Created Migration: 2014_08_01_055659_create_users_table Generating optimized class loader

生成されると　app/database/migreationsに出力される

自動的にIDとtimestampのカラム設定用のメソッドがついているみたいだけど、カラムはそれだけじゃないから追加する

<?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function(Blueprint $table) { $table->increments('id'); $table->string('username', 36); $table->string('password', 64); $table->string('email', 254); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('users'); } }

3.テーブルを作成

このコマンドは未実行のマイグレーションを実行するコマンド

未実行かどうかは勝手に作成されるmigratesテーブルが実行したファイル名を持っているからそれで判断しているっぽい

php artisan migrate

実行が成功するとメッセージが出る

Migrated: 2014_08_01_072525_create_users_table

[fainaldt]

cloud9+phpでmysqlに接続させる

ちょっと詰まった。

外人はgetenv("REMOTE_ADDR");でIP取れるよーとか言ってる。

確かにIPは取れるけど、それじゃ接続できんかった。

ターミナルから

echo $IP

ってやったら0.0.0.0って出た

試しに指定してみたらつながった。

[fainaldt]

cloud9でmod_rewrite

Laravelで作成したアプリケーションのURLからindex.phpを除去したかったので.htaccessを書き得たりしてみたけどうまくいかなかった。

原因は単純で、mod_rewriteが有効になってなかっただけだった。

下のコマンドを打てばＯＫ

sudo a2enmod rewrite

[fainaldt]

cloud9のphp.ini変更

timezoneとか変えたくて、workspaceにあるphp.iniを変更しても適用されない。

phpinfo()で確認するとcloud9では「/etc/php5/apache2」にあるやつを見ていることがわかる。

なので、/etc/php5/apache2/php.iniを変更すればOK。

[fainaldt]

新しいcloud9にlaravel4入れる　その2

前回、cloud9でlaravel入れてみたけど、手順がよくわらかずにかなり時間がかかった。

忘れないように手順を書いておく。

1.composerをインストール

curl -sS https://getcomposer.org/installer | php

2.composerコマンドで実行できるようにする

sudo mv composer.phar /usr/local/bin/composer

3.mcryptの確認

有効モジュールの確認

php -m

ここでmcryptがでてこないはず

php --ri mcrypt

これで実行すると

Extension 'mcrypt' not present.

となるはず

mcrypt.iniがあることを確認する

ls /etc/php5/mods-available/mcrypt.ini

4.mcryptを有効にする

sudo php5enmod mcrypt

5.サーバー再起動

sudo service apache2 restart

6.有効になっていることを確認

php --ri mcrypt

今度はmcrypt support => enabledって出る

7.laravelをインストール

composer create-project laravel/laravel --prefer-dist

インストールが順調にすすめば

Application key [乱数] set successfully.

って出て終わり

[fainaldt]

新しいcloud9にlaravalインストール

前にも書いたんだけど、新しくなったcloud9だと、前とインストール方法がちょっと違ったから備忘録

まずはcomposer

curl -sS https://getcomposer.org/installer | php

次にコマンドで打てるようにする

sudo mv composer.phar /usr/local/bin/composer

念のためmcryptインストール

sudo apt-get install mcrypt php55-mcrypt

アパッチ再起動

sudo service apache2 restart

laravelをインストール

composer create-project laravel/laravel --prefer-dist

できた！と思ったらエラー。。。

Mcrypt PHP extension required. Script php artisan clear-compiled handling the post-install-cmd event returned with an error

同じことが起きてるっぽい外国の方のブログを参考に以下のコマンド打ってみた

cd /etc/php5/mods-available ln -sf ../conf.d/mcrypt.ini .

それでもできなか���た。

拡張モジュールをチェックしてみる

php -m

mcryptがねーし。

workspaceのphp.iniを変更しても反映もされない。。

phpinfo()でよくよく見てみると、php.iniの読み込み先が/etc/php5/apache2になっていることに気づいた。。。

ここに追加すればいけるはず！

sudo vi /etc/php5/apache2/php.ini

extension=mcrypt.soを追加で再起動&インストール

まただめ。。。

extension_dirも書いてみた

sudo find /usr -name mcrypt.so

/usr/lib/php5/20121212/mcrypt.so

まだだめ。

わけわからん

sudo php5enmod mcrypt

ってやったらできた。

手順を別の記事にかこーっと

[fainaldt]

プログレスバーっぽくするCSS

bootstrap3使えば簡単なんだけど、既存のに組み込むとレイアウトがぶっ壊れるので、別途作成した。

.progress { height: 20px; margin: 0; padding:0; width: 90%; } .progress-bar { float: left; height: 100%; font-size: 12px; line-height: 10px; color: #fff; text-align: center; background-color: #FF8000; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; margin-right: 7px; }

HTMLはこんな感じで%を変えてあげる

<div class="progress"> <div class="progress-bar" style="width: 0%;"></div> </div>

[fainaldt]

CSSで文字と画像をきれいに並べてみる

HTMLの要素でインライン要素の文字列と画像を1列できれいに並べるようとしたんだけど最初はうまくいかなかった。

右端にもaタグ+画像を設置しなきゃいけなくてこれのせいではまった。。。

イメージはこんな配置

大きい文字があって、縦を中央に揃える必要があった。

とりあえず、↓の定義でできた。

大本のDIVの定義でheightとline-heightをちゃんと指定してやる

.wrapper { height:40px; line-height:40px; }

文字用の定義

.wrapper span {vertical-align: middle;}

中の要素の画像の定義

.wrapper img { border: none; vertical-align: middle; margin-bottom: Xpx; ←微調整用にその時の画像サイズに合わせて指定 }

右端用の定義

.right { text-align: right; }

あとはHTML

<div class=\"wrapper\"> <span>小さい文字</span> <span class=\"大きい文字の定義\">大きい文字</span> <img src=\"./img/xxxx.gif\"> <a href=\"#\"><img class=\"right\" src=\"./img/xxxxx.gif\"></a> </div>

[fainaldt]

cloud9＋larabel4

composerをインストールする

curl -sS https://getcomposer.org/installer | php

mv composer.phar ../bin/composer

laravelをインストール

composer create-project laravel/laravel --prefer-dist

[fainaldt]

CodeIgniter2.1.4でtwig使う

本当はLaravelやりたかったんだけど、仕事でCodeIgniterを使ったアプリケーションを作ることになりそう。

だもんで、CodeIgniter＋twigでやろうかなーって思ったので入れてみた。

ずっとSmarty使ってたけどもう飽きた。

ここを参考にやってみる。

http://twig.sensiolabs.org/からダウンロード

/application/libraries/に1でダウンロードしたものを解凍し、lib下のTwigをぶっこむ

Twigディレクトリ内にTwig.phpを作成する

application/config にtwig.phpを作成する

applicatoin/config/autoload.phpにtwigを追加する

って感じでできました。

各ソースコードはここのやつをコピペでOK。

！追記！

serversmanにデプロイしたらtwigのエラーが出た。

ログを追ってみたら、ローダーで読み込みに失敗してるらしい。。。

パスが大文字と小文字とかで読み込めてないっぽかったら、coreのLoader.phpの944行目あたりに↓を追加した。

if ($subdir === 'twig/') { $subdir = 'Twig/'; }

[fainaldt]

serversmanにphpmyadmin入れる

ここを参考にさせてもらいました。

1.最新版を入れる

cd /usr/local/src/ wget http://jaist.dl.sourceforge.net/project/phpmyadmin/phpMyAdmin/4.1.9/phpMyAdmin-4.1.9-all-languages.tar.gz tar xvzf phpMyAdmin-4.1.9-all-languages.tar.gz mv phpMyAdmin-4.1.9-all-languages /var/www/phpMyAdmin chown -R root:apache /var/www/phpMyAdmin/ chown root:apache /var/lib/php/session/

2.設定ファイルの修正

cp /var/www/phpMyAdmin/config.sample.inc.php /var/www/phpMyAdmin/config.inc.php

$cfg['DefaultLang'] = 'de';の下に

$cfg['DefaultLang'] = 'ja-utf-8'; $cfg['Lang'] = 'ja-utf-8'; $cfg['DefaultCharset'] = 'utf-8';

を追記する

3.phpmyadmin.confの作成

vi /ect/httpd/conf.d/phpmyadmin.conf

↓の内容を記述

Alias /phpMyAdmin "/var/www/phpMyAdmin" <Directory "/var/www/phpMyAdmin"> Order allow,deny Allow from all </Directory>

rootユーザーにパスワードを設定する

sudo mysqladmin -u root password 'ぱすわーど'

でphpMyAdminにアクセスして↑で設定したrootユーザーでログインする

[fainaldt]

serversmanでhttpsアクセスできるようにする

やっぱりセキュア通信に対応しないとね。

まずは、mod_sslをインストールする

sudo yum install mod_ssl

鍵作って適用する

sudo make server.key sudo openssl rsa -in server.key -out server.key sudo openssl x509 -in server.csr -out server.pem -req -signkey server.key -days 3650 sudo chmod 400 server.key sudo chmod 400 server.csr sudo chmod 400 server.pem

ssl.confを書き換える

sudo vi /etc/httpd/conf.d/ssl.conf SSLCertificateFile /etc/pki/tls/certs/server.pem SSLCertificateKeyFile /etc/pki/tls/certs/server.key

後は再起動して終わり