Posted on

イベントシステムについて今更勉強した件

CakePHP4の使い方をあれこれ探っているときに、上司から「論理削除したとき、deletedカラムにもタイムスタンプが立つようにして」と言われたのが事の発端でした。
CakePHPには前からsoftDeleteなるプラグインが存在していて、それがタイムスタンプを立てることは知ってたんです。そんでも、プラグインをやたら増やしたくないという方針もあったため、何とか今あるものだけでdeletedカラムにタイムスタンプを立てようとしておりました。そうなると、TimeStampBehaviorの出番だろうと思い至ったわけです。今まで既存のコールバック(beforeSave)に対してタイムスタンプを置いていたわけだから、どうやって他のタイムスタンプを立てるタイミングを決めるのやら結構勉強が必要でした。

逆に言うと、勉強の時間が大半で、数行いじったらすぐできてしまったことにびっくりしているんです。
イベントをTimeStampビヘイビアに発行するナニカが必要なだけだったというオチで、最初にイベントリスナから組む長い長い道のりを覚悟していて肩透かし。

イベント発行って、こんだけでいいんですね

$event = new Event('Model.beforeDelFlag',$this,['entity' => $entity]);
$this->getEventManager()->dispatch($event);

TimeStampは内部的にイベントを全部観測していて、イベント名が設定のキーと同じ名前のものが発行されたとき、その下に設定されたタイムスタンプに適切に現在時刻を立てる…こういうことだったんだなと。

イベント名の命名規則は、層.(クラス.)イベント という具合だとか、リスナの書き方とか、まだイベントシステムを完全に理解したわけではないけれど、これを論理削除メソッドに埋め込んだらタイムスタンプ押してくれるようになった、という具合。これを他でどう使うかはまだイベントリスナ含め思いついていないですけれども、もしかしたらこれがまた仕事場の常識を塗り替えるような改善を生み出す可能性は無きにしも非ず…。

とりあえず今のところは、イベントの発行方法だけでも分かったことでよし、と思ってます。

ディスパッチという言い方がわかりにくいのねん…「発行」とか「発令」と訳語を当ててくれたらええのに…。

Posted on

Hashはいいぞ Hash::map編

気が付いたら前の記事から1年半以上空いてしまいました。それだけみんな忙しかったといえばそうなのですが、ようやっと時間ができたので、何を書こうかなと思ったとき、そういえば近くの人にHash::map教えてないなって思い出したんです。

これ、最初のうちはかなり読みにくい印象あると思うんです。ラムダ関数慣れが要るという感じで…

ここまでくるとforeachと大差ないっちゃ大差ないところもあります。
Hash::reduceともなるとさらに差がなくて、正直どっちで書けばいいか自分でも迷います。

それでも、配列を「ループで一つ一つ確認する」というforeachの見え方と、
配列を「各要素にまとめて適用する」というmapの見え方ってやっぱり違うと思うんです。

// Model->find('all') したときありがちな配列
$data = [
    o => [
        'Color' => [
            'id'=>'1',
            'name'=>ゴールド',
            'red'=>'255',
            'green'=>'215',
            'blue'=>'0',
        ]
    ],
    1 => [
        'Color'=>[
            'id'=>'2',
            'name'=>'シルバー',
            'red'=>'192',
            'green'=>'192',
            'blue'=>'192',
        ]
    ],
    2 => [
        'Color'=>[
            'id'=>'3',
            'name'=>'ブロンズ',
            'red'=>'154',
            'green'=>'98',
            'blue'=>'41',
        ]
    ]
];

//色名と16進コードの配列を作る
$result = Hash::map($data,'{n}.Color',function($item){
    return [ 
        'name' => $item['name'],
        'hex_code' => sprintf("#%02x%02x%02x",$item['red'],$item['green'],$item['blue'])
    ];
});

/**

$result = [
    0 => [
        'name' => 'ゴールド',
        'hex_code' => '#ffd700',
    ],
    1 => [
       'name' => 'シルバー',
       'hex_code' => '#c0c0c0',
    ],
    2 => [
       'name' => 'ブロンズ',
       'hex_code' => '#9a6229',
    ],
];

*/

//やってることは以下のforeachとあんまり差はない
$result_foreach = [];
foreach($data as $color){
    $result_foreach[] = [
        'name' => $color['Color']['name'],
        'hex_code' =>  sprintf("#%02x%02x%02x",$item['Color']['red'],$item['Color']['green'],$item['Color']['blue'])
    ];
}

foreachとあんまり変わらないなら、なぜこういう書き方をするかと考察したとき、いくつか強みっぽいところはあります

深い階層からもパスで引っ張ってきてくれる
深い深い配列の奥にあっても、Hashのパス記法を使えば、何重foreachを使わずとも。
引っ張ってくる個数と結果の配列は要素個数が同じで、キーは0始まり連番
foreachだとソースを読まないとそういう結果の予想は付かない
ラムダ関数の中は独自スコープ
外側と変数名がかぶることを気にしなくていい。外側の変数を使いたいときはfunction($item)use($outside_var)みたいな感じで

なんだかんだ、使ってると手になじんでくるものです。

Posted on

Hashはいいぞ Hash::combine編

去年からだいぶHash::なんとかを使い続けて、だいぶ手に馴染んできました。foreachのほうが分かりやすい場合は、素直にforeachを回したらいいんですが、select用のリストをfind結果の複数のカラムから作る、みたいなことにHash::combineを使えると非常に見通しが良いです。なんてったって「配列のこれをキーとして、これを値とする配列を作る」ですもの。

// Model->find('all') したときありがちな配列
$data = [
    o => [
        'Color'=>[
            'id'=>'960018',
            'name'=>'カーマイン',
            'red'=>'150',
            'green'=>'2',
            'blue'=>'24',
        ]
    ],
    1 => [
        'Color'=>[
            'id'=>'00896B',
            'name'=>'ビリジアン',
            'red'=>'0',
            'green'=>'136',
            'blue'=>'53',
        ]
    ],
    2 => [
        'Color'=>[
            'id'=>'434DA2',
            'name'=>'ウルトラマリン',
            'red'=>'67',
            'green'=>'77',
            'blue'=>'162',
        ]
    ]
];

// [id => 色名]
$result_1 = Hash::combine($data,'{n}.Color.id','{n}.Color.name');
/**
$result_1 = [
    '960018'=>'カーマイン',
    '00896B'=>'ビリジアン',
    '434DA2'=>'ウルトラマリン',
];
*/

// [id => 'Rスペース詰め3桁,Gスペース詰め3桁,Bスペース詰め3桁']
$result_2 = Hash::combine($data,'{n}.Color.id',['%3d,%3d,%3d','{n}.Color.red','{n}.Color.green','{n}.Color.blue']);
/**
$result_2 = [
    '960018'=>'150,  2, 24',
    '00896B'=>'  0,136, 53',
    '434DA2'=>' 67, 77,162',
];
※ 配列のキー側引数も配列でsprintf記法指定できる
*/

どっちも、フォームの選択肢を作るとき凄い役に立ちます。
パス記法に慣れると、いくつも組み合わせてprintfの指定をすれば配列のキーも値も自在に組めます。
もうforeachでぐるぐる検索結果を回しては文字列をこねくり回して…みたいなことはしなくていい!

単純に「これとこれとこれを取り出して配列を作りたい!」とき、使ってください。

Posted on

jQuery UI Datepickerにクリアボタンを追加してスマホでも使いやすくする

jQueryUIのDatepickerを使っているのですが、スマホなどで使用する場合は入力させる時にスマホのIMEがせり出てきてスマホの表示領域を圧迫して入力しづらい場面がやや出てきます。

そのinput要素をスマホの場合はreadonlyにする事で、IMEが出てくる事を回避する事はできるのですが、今度は入力した値を消したい場合はどうすればいいかという問題が出てきました。

Datepickerにクリアボタンを追加したらいいんじゃないかと思いその対応について記述したいと思います。


HTMLではdatepickerにする要素にreadonly属性を付与します。

   var setCalsClearButton = function(year,month,elem){

        var afterShow = function(){
            var d = new $.Deferred();
            var cnt = 0;
            setTimeout(function(){
                if(elem.dpDiv[0].style.display === "block"){
                    d.resolve();
                }
                if(cnt >= 500){
                    d.reject("datepicker show timeout");
                }
                cnt++;
            },10);
            return d.promise();
        }();

        afterShow.done(function(){

            // datepickerのz-indexを指定
            $('.ui-datepicker').css('z-index', 2000);

            var buttonPane = $( elem ).datepicker( "widget" ).find( ".ui-datepicker-buttonpane" );

            var btn = $('');
            btn.off("click").on("click", function () {
                    $.datepicker._clearDate( elem.input[0] );
                });
            btn.appendTo( buttonPane );
        });
   }

datepickerには開いた後のイベントがないため、開く前のイベントにウインドウとなる要素がdisplay:block;になったかどうかをpromiseで判定します。

要素が作られるまで待つのですが、inputを選択して5秒待ってまだ開かなかったらpromiseを辞めるというコードも書いています。その場合はおそらく内部エラーくらいだと思いますが、待ち続けているのも良くないので終了させるよう書いています。

要素が作られたら、ボタンを追加するコードを入れています。


  $(".datepicker").datepicker({
      showButtonPanel: true,
      changeMonth:true,
      changeYear:true,
      beforeShow : function(inst,elem){
              setCalsClearButton(null,null,elem);
      },
      onChangeMonthYear:setCalsClearButton
  })

datepickerを呼び出す所optionに、beforeshowに上記関数を指定します。

onChangeMonthYearにもオブジェクト関数を指定しています。これは月を変更した場合、再描画が走ってクリアボタンも消えてしまうので、月の変更時にイベントにボタンを追加するコードを走らせて都度生成するようにしています。

これで、入力しやすくなりましたね。

Posted on

Hashはいいぞ

誰もが言っていました。配列をいじるならHashを使えと。

Hash::get()だけは結構使っていました。配列に存在しない引数を引いてもnotice出さずにnullを返してくれる。
それでも、勉強するのは面倒で、ついついforeachをぶん回していろいろやっていました。

この冬、ふとHash::insertを使おうと思い立ったんです。
「たったこれだけのためにforeach書くのめんどい」という状況が増えていたのです。

誰もが言っていた通り、Hashは良いものでした。

親子関係のあるテーブルを想像してください。
parentsテーブルがあって、childrenテーブルにparent_idを持っている、よくある parents has many childrenという関係です。
都合によりモデルにリレーションを固定していないので、毎回保存のたびに親子関係idをくっつけておく必要がある、という前提で…

//トランザクション中
if(!$this->Parent->save($parent_data)){
    $this->Parent->rollback();
    return false;
}
$parent_id=$this->Parent->getID();

//childrenにとにかくparent_idだけ付けなおす
foreach($children as $key=>$child){
    $children[$key]['parent_id']=$parent_id;
}
//(後略)

この、ID付与の為だけのforeachを見飽きたんです。
Hashを使えるとここが…

    //整数キー直下の配列全部に”parent_id”を追加する
    Hash::insert($children,'{n}.parent_id',$parent_id);

一行。何よりもやってることがすっきり見える。任意の整数とマッチする{n}という書き方が強い。
foreachが出ると読み手はループを身構えるから、「任意の~全部に操作」という話が見えにくい。

やっていることは同じなのに、配列的バッチ操作として書けるのは本当に助かる。
他にもHashには非常に強力な機能はあるけれど、勉強が追い付いていない…。
また今度、追加します。

Posted on

「Effective JavaScript」かいつまみ -基礎編-

翔泳社の「Effective JavaScript」(David Herman著 / 吉川邦夫訳)の一章から、
重要そうな部分をピックアップして箇条書きで要約しました。
太字の部分は要約者の勝手な感想(?)です。
普段開発で使用しているPHPに関して主に追記しています。

第一章 JavaScriptに慣れ親しむ

項目2 JavaScriptの浮動小数点数を理解しよう

・JavaScriptでは、すべての数が倍精度浮動小数点数(いわゆるdouble)である。
・-9,007,199,254,740,992~9,007,199,254,740,992までの整数は全てdoubleで表現する事が可能。
・当然のように、浮動小数点数演算特有の問題が存在。

console.log(0.1 + 0.2); //0.30000000000000004

・少数を扱う際は一度整数にしてから演算して、結果を調整するほうがよさそう。

console.log((0.1 * 10 + 0.2 * 10)/10); //0.3

項目3 暗黙の型変換に注意しよう

・JavaScriptはほとんどの型エラーをスルーして実行してしまう。
・数値演算地の-、*、/、%は、計算を行う前に引数を数値に変換しようとする。
・ただ+だけは例外的な動きをする。
・以下例

console.log(3 + true); //4
console.log("2" + 3); //"23"

・真偽値の型強制。
・ifや||や&&のような演算子は、受け取った値を真偽値に型変換して解釈する。
・JavaScriptでは偽となる値は、false 0 -0 “” NaN null undefined の7つだけ。
・PHPの場合は、”0″ や [] もfalseになるので要注意。

項目5 型が異なるときに==を使わない

・==で値を比較する場合、項目3で既出の暗黙の強制によって両者が数値に変換されて比較される。
・===は型を考慮して比較。
・==のほうが便利な場合もあるのでついつい使ってしまう事もありますが、基本的には===で統一したほうがよさそう。
特にPHPの場合 var_dump(“hoge” == 0)  //結果:true などと直感に反するケースがある(最初が数字でない文字列は0に変換されるため)ので要注意。

項目7 文字列は16ビットの符号単位を並べたシーケンスとして考えよう

・Unicodeが16ビット内でおさまると考えられていた時代にJavaScriptは生まれたため、JavaScriptの文字列の要素は16ビットの符号単位である。(UTF-16形式)
・実際にはUnicodeには16ビットを超える文字も存在し(例えば辰吉じょう一郎のじょう・丈の右上に点)、それらは16ビットの要素2つで表現される。
・そのためUnicodeで16ビットを超える文字の場合は、length や charAt などで文字数と結果が一致しないことになる。

Posted on

jQueryプラグインSweetAlert2を使っていいカンジのconfirmをサクッと呼べるラッパー作りました

案件でよくユーザーに処理の実行を問いかけたい時にJavaScriptの標準機能のconfirmを使ったり、情報を表示する際にAlertを使いますが、どこか味気ないし、ブラウザによっても表示がまちまちなので、もうちょっとイイ感じにしたい…そんな時はSweetAlert2を使ってみましょう。

こんなconfirmがサクッと作れます!

SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes

CSSとJSの読み込みです。sweetalert2はES6のPromiseを使って書かれているようなので、IE11以下や古いAndroidに対応するためにpolyfillを先に読んでおきましょう。

今回はCDNを使用しました。







SweetAlert2は便利なのですが、呼び出す構文にオブジェクトを作ったりする必要がありますが、標準のconfirmのように引数で呼び出せたらラクなんだけどなぁと思ったので、ラッパーを作ってみました。

See the Pen
SweetAlert2 wrapper
by koka (@kokaben)
on CodePen.

ボタン色はBootstrap4のクラスを指定しています。

以下コードをコピーしてページに貼るか、alertmessage.js等のファイルで保存してscriptタグで呼び出してください。

(function (ns) {

// Sweet Alert 2が読み込まれてなければ抜ける
if (typeof Swal === "undefined") {
console.error("プラグイン「SweetAlert2」が読み込まれていません。先にscriptタグで読み込んでください");
return false;
}

var AlertMessage = function () {

// インスタンスがあるかどうかチェック
if (typeof AlertMessage.instance === "object") {
return AlertMessage.instance;
}

// 無ければキャッシュする
AlertMessage.instance = this;
return this;
};

/**
* confirmラッパー
* @param _text String 表示したい内容テキスト
* @param _title String 表示したいタイトルテキスト
* @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク )
* @param _callback function アラートの結果を受けて関数を呼び出す。引数に成否を渡す
* @param _array [] コールバックに渡したいもの配列
* @constructor
*/
AlertMessage.prototype.confirm = function (_text, _title, _mode, _callback,_array) {

var dispTitle = _title;
if (typeof dispTitle === "undefined") {
dispTitle = "確認";
}

var o = {
allowOutSideClick: false,
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: "キャンセル",
customClass: {
cancelButton: 'btn btn-gray', //bootstrap4のクラス
},
title: dispTitle,
html: _text
};

if (_mode === "success" ||
_mode === "error" ||
_mode === "warning" ||
_mode === "info" ||
_mode === "question") {
o["type"] = _mode;
};

Swal.fire(o).then(function (result) {
var retBool = false;
if (typeof result.value !== "undefined" && result.value === true) {
retBool = true;
}
if(typeof _callback === "function"){
_callback.call(this, retBool,_array);
}
});

};

/**
* Alertラッパー
* @param _text String 表示したい内容テキスト
* @param _title String 表示したいタイトルテキスト
* @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク )
* @constructor
*/
AlertMessage.prototype.alert = function (_text, _title, _mode) {

var o = {
allowOutSideClick: false,
type: _mode,
title: _title,
html: _text
}
Swal.fire(o);
};

ns.AlertMessage = new AlertMessage();

})(window);

使い方

htmlでボタンを作成します。

削除ボタン 

基本の呼び出し方は以下となります。文言が長いので引数1つずつに改行を入れていますが、横に並べて書いても大丈夫です。

// ボタン押下のイベント
$(document).on("click", "#deleteUserButton", function (e) {
      e.preventDefault(); // 本来のボタン押下の処理のキャンセル
      
      AlertMessage.confirm(
          "ユーザーのデータを削除します。よろしいですか?", // confirm本文
          "ユーザーの削除の確認", // confirmタイトル
          "info", // アラートの種類
          function (_enter) { // コールバック
            if (_enter) {
              // OKが押された時の処理
            }
          });
    });

ボタンを押下するとこんな感じで表示されます。

SweetAlert2のconfirmをいつでもどこでもAlertMessage.confirm()引数で呼べるようになりました。

アラートの種類というのは、表示するアイコンの種類になります。
bootstrapの”success”, “error”, “warning”, “info”で指定できるので慣れている人は直感的に書けます。それに加えて”question”も指定できるのでユーザーに問いかけたい時は非常に便利です。

さらにconfirmのコールバックにさらに配列を渡せるようにしました。使いたい値がある場合は、便利かもしれません。

 var infoArray = ["タンタン", "パンダ", "神戸"];
    
      AlertMessage.confirm(
          "情報を追加してもよろしいですか?", // confirm本文
          "確認", // confirmタイトル
          "question", // アラートの種類
          function (_enter, _array) { // コールバック
            if (_enter) {
              // OKが押された時の処理
              var _text = "";
              $(_array).each(function(i){
                _text += this;
                if(i < _array.length -1){
                _text += ",";
                }
              });
              $("#output").html(_text); //タンタン,パンダ,神戸
            }
          },
          infoArray // コールバックに渡したい配列
          );
    });

ついでにAlertMessage.alert()も作りました。シンプルにアラートが出せます。

AlertMessage.alert(
          "処理を中断します。", // alert本文
          "エラー!", // alertタイトル
          "warning", // アラートの種類
         );

jQueryのプラグインはとても便利ですので、そのプラグインをもっと簡潔に使えるような工夫をすればもっともっと手っ取り早くコーディングができるようになりますよ。

Posted on

EAVをなんとかし隊

これは平成最後の月。
CakePHP2.x系。入力チェックが通らないたび、フォームの内容が編集前に戻ってしまう不具合を直したときの話。

単純にまず、DBがイケてなかったんです。


INT id
INT type
VARCHAR(255) value

どこからどう見てもEAV。Entity Attribute Value。
何故よくないかのDB設計理論的な難しい説明は置いとく。
DB構造はその時動かす権限がなかった。(もし権限があったらその根本原因から直してしまいたかった)

で、その不具合が発生している画面を見て。

・DBから持ってきたデータ構造
・フォームへ渡すときのデータ構造
・フォームの初期値を表示するとき

これらが全部バラバラで往生した…。

DBからとってきたときの配列:

[
    0=> ['Model'=> [id => 1, type => 1, value => 5]],
    1=> ['Model'=> [id => 2, type => 2, value => "someaddress@example.com"]],
    2=> ['Model'=> [id => 3, type => 2, value => "anotheraddress@example.com"]]
]

これを加工して,typeをキーにしてビューに渡すけれど:

[
    1=> [
        0=> ['id'=>1, 'value'=>5]
    ],
    2=> [
        0=> ['id'=>2, 'value"=>"someaddress@example.com"],
        1=> ['id'=>3, 'value'=>"anotheraddress@example.com"]
    ]
]

ビューでさらに取り出す:
(Formヘルパに’value’で渡している)

$this->Form->input('Model.type_1.value',['type'=>'text', 'value'=> $this->request->data[1][0]['value']);
$this->Form->input('Model.type_2.0.value,['type'=>'text', 'value'=>$this->request->data[2][0]['value']]);
$this->Form->input('Model.type_2.1.value,['type'=>'text', 'value'=>$this->request->data[2][1]['value']]);

(あと、idをそれぞれhiddenフォームで送っていたりする)

フォームを送信すると、入ってくるのは…

[
    'Model'=> [
        'type_1'=> ['id'=> 1, 'value'=>5],
        'type_2'=> [
            0=> ['id'=> 2, 'value'=> 'someaddress@example.com],
            1=> ['id'=> 3, 'value'=> 'anotheraddress@example.com]]
	]
    ]
]

当然、DBからデータを取ってきたときとも最初フォームに渡したときとも違う構造。
このままではフォームの次の値が取れないから、前のコードではリクエスト関係なくDBからその都度データ読み込んで来ていた。
エラー値ならエラー値のままフォームに残しておく仕様なのに…。

とりあえず、その時はビューに渡すときの構造と受け取る時のデータ構造をそろえた。
(そうでないと変換が双方向に必要になるんで)
そろえれば使えなくはない。
Formヘルパに渡すvalue要素も要らなくなるし、入力チェックが通らないときフォームの初期値を作るためだけにDBを読みに行かなくていい。

でも、それでもやっぱりEAVはイケてない…。

この構造の時、まず絶対に1つしかないパラメータをこう…ひとつテーブルにして

INT model_id
INT type1_val

で、複数登録する必要がありそうな情報だけテーブルを分けてこう…。

INT model_mail_id
VARCHAR type2_mail

そしたら、DBからとってきた構造をパースしてフォームに渡す必要って本来それほどないはずなんです…。

僕がDB設計するときには、後輩に同じような愚痴を語らせないためにも、
あと、DB設計理論以上にそもそもコーディングがめちゃくちゃ往生するので、できることならEAVは避けていきたいという話でした。

Posted on

Imagickを利用するにあたって

PDFファイルの1ページ目をイメージファイルjpgに変換するサンプルです。
imagickのサーバーへのインストールは、このブログからは除きます。
当初

$im = new Imagick();
//画像を生成したいPDFを読み込む
$im->readImage('hoge.pdf');
//特定のPDFのページ 0が表紙
$im->setImageIndex(0);
//サムネイルサイズ 640pxに収める
$im->thumbnailImage(640, 640, true);
//シャープ
$im->sharpenImage(0, 1);
//生成
$im->writeImage('out.jpg');

$im->destroy();

を元に関数を作成したのですが、
この記述では、階層が深いPDFを指定した場合は、エラーになるという致命的な問題が
潜んでいます。
そこで、ソースを

$im = new Imagick();
//画像を生成したいPDFを読み込む
$image = file_get_contents('/var/www/xxxx/xxxx/hoge.pdf');
$im->readImageBlob($image);
//特定のPDFのページ 0が表紙
$im->setImageIndex(0);
//サムネイルサイズ 640pxに収める
$im->thumbnailImage(640, 640, true);
//シャープ
$im->sharpenImage(0, 1);
//生成
$im->writeImage('/var/www/xxxx/xxxx/out.jpg');

$im->destroy();

で動くようになりました。
しかし、透明の箇所が真っ黒になるという不具合がありなおかつ
複数ページあるPDFと1ページのみのPDFでは動きが違うという問題にも直面
この難題を解決するのに、3時間程度要しました。
解決済みのサンプルがこちらです。

        $im = new Imagick();
        //画像を生成したいPDFを読み込む
        $image = file_get_contents('/var/www/xxxx/xxxx/hoge.pdf');
        $im->readImageBlob($image);
        $totalPage = $im->getImageScene();

        //サムネイルサイズ 640pxに収める
        $im->thumbnailImage(640, 640, true);
        //シャープ
        $im->sharpenImage(0, 1);
        // バックグラウンドを白にする。
        $im->setImageBackgroundColor('white');
        //特定のPDFのページ 0が表紙
        if ($totalPage != 0) {  // 複数ページの場合
            $im->flattenImages()->setImageIndex(0);
        } else {    // 単一ページの場合
            $im = $im->flattenImages();
        }
        //生成
        $im->writeImage('/var/www/xxxx/xxxx/out.jpg');
        $im->destroy();

以上です。

Posted on

JavaScriptトラップ集

業務上JavaScriptを使用していて、ハマったorハマりかけたポイントをまとめてみました。

1、indexOf(危険度:★★★☆☆)

文字列内に特定の文字列が存在するかを判定したい時に、
indexOf()を使用すると便利ですが、

 
 let tmpArr = '小谷翔平';
 let searchArr = '谷';
 console.log(tmpArr.indexOf(searchArr)); //結果:1 ⇒ 文字列の2文字目に存在

気をつけなければならないのは、
特定の文字列が存在しない時に返って来るのが、falseでは無く-1だという事です。

 
 let tmpArr = '小谷翔平';
 let searchArr = '鈴';
 console.log(tmpArr.indexOf(searchArr)); //結果:-1

PHPの同じような関数のstrposではfalseで返ってくるので、
業務で両方使っていると紛らわしいですね。

また、indexOfで特定の文字列が一番最初に存在する場合は、
0が返ってくるので、以下のような使い方はバグのもとになります。

 
 let tmpArr = '小谷翔平';
 let searchArr = '小';
 if(!tmpArr.indexOf(searchArr)) { //0だと通ってしまう
	//文字列が含まれない場合はなんらかの処理
 }

2、parseIntとNumberの違い(危険度:★★☆☆☆)

JavaScriptで文字列を数字に変換したい場合、
主にparseInt()、Number()の2種類の方法があります。

 
 let tmpArr = '1234';
 console.log(Number(tmpArr)); //結果:1234
 console.log(parseInt(tmpArr)); //結果:1234

両者の違いですが、parseIntの場合は数値以外の文字列が含まれる場合でも、
数字を抽出して返却してくれるケースがある事です。

 
 let tmpArr = '1234abc';
 console.log(Number(tmpArr)); //結果:NaN
 console.log(parseInt(tmpArr)); //結果:1234

詳しい事はこちらで。
このあたりはトラップが多いので、replace()等であらかじめ数字を抽出したうえでNumber()をかけるのが良さそうです。

 
 let tmpArr = 'abc1234';
 console.log(Number(tmpArr.replace('abc', '')); //結果:1234

3、JavaScriptとphpでの空配列の扱い(危険度:★★★☆☆)

JavaScriptとphpでは条件式での真偽値がちょくちょく違うので要注意。

//JavaScriptの場合
 console.log(Boolean([])); //結果:true
//PHPの場合
 var_dump((Boolean)[]); //結果:false

空の配列では真偽値が逆になります。
ここら辺も闇が深そうなので業務で両方使う場合は注意が必要そうですね。

4、JavaScriptのDate関連(危険度:★★★★☆)

JavaScriptではDateオブジェクトで日時を扱いますが、
こちらのページに詳しいように、
いろいろとトラップが多いので注意が必要です。

特に個人的にハマったのが、getMonth()の挙動です。

 
 let date = new Date('2019-02-04T03:24:00');
 console.log(date.getMonth()); //結果は2では無く、1

他にも、日付を得るのはgetDay()ではなくgetDate()とかいろいろと紛らわしいです。