数値を均等に分割したいときはこうするよ

ある数値を決まった個数に均等に分割したい場合がたまにあると思います。
その場合、以下のようにすると、割り切れない数値を均等に分割してくれます。

例では、
100を3つに均等に分割する例です。

total..全体の数値
group..分割数
groubBox..分割した数値を入れる配列変数

var total = 100;
var group = 3;
var groupBox = [];
for(var i=0; i<group; i++) {
  var num = Math.floor((total + i) / group);
  groupBox.push(num);
}

console.log(groupBox);

[ 33, 33, 34 ]

どこかに証明されているのかわかりませんが…。

IE11はPromiseに対応していないだって？

JavaScriptで非同期処理の要のPromiseを使うアプリケーションをいろいろなブラウザに対応させるためちょっと調べました。
というか、Internet ExplorerやAndroidの標準ブラウザ(4.4以下？)は、Promiseに対応していないようです。

headタグ内に以下を記載しておくことで、Promiseに標準対応していないブラウザでも使うことができるようになります。

<script>window.Promise || document.write('<script src="//www.promisejs.org/polyfills/promise-7.0.4.min.js"><\/script>');</script>
<script>window.Promise || document.write('<script src="/js/promise-7.0.4.min.js"><\/script>');</script>
 

1行目は、CDNを使ってPromiseが使えるようにするスクリプトを読み込みます。
2行目は、CDNのサーバがダウンしている場合を考慮してPromiseが使えるようにするスクリプトを読み込みます。

どちらにも、「window.Promise ||」とありますが、グローバルオブジェクトにPromiseが定義されていない場合のみ、スクリプトを読み込むようにしています。
なので、Chromeなどモダンなブラウザの場合は、スクリプトを読み込むことなくNaitiveのPromiseを使用します。

よかった、よかった。これでどのブラウザでもPromiseが使用できます。

hostsの設定をミスる

　Webアプリケーションを作っているときに、IPアドレスでアクセスするのが嫌でhostsにドメイン名を定義して開発してます。

今回も設定してやってたんですが、Google Chrome57でアクセスするとなぜかレスポンスがとても悪くなってしまいました。
全然大きくもないアプリケーションなのに…。


デベロッパーツールのNetworkタブので見てみるとInitial Connectionが21.0sとかになっていました。
接続に時間がかかっていると…。

Apacheの何かの設定をミスったのでは無いかと、数時間調査したけど特段それらしいものも発見できず。

じゃ、Firefoxだったらどうか？
一瞬でレスポンスが返ってきました。

おかしい、ブラウザの問題か？
IE10でやってみてもそれほど遅くなくレスポンスが返ってくる。


もしかしてとpingを打ってみたら、思ったのと違うIPアドレスを返してきたのですよ。
「当然、要求がタイムアウトしました。」と宣ってます。

「がっくし…。」
はい、同じドメイン名に違うIPアドレスをふっていました。

アホな設定
192.168.33.13 app.example.com
192.168.33.12 app.example.com

でも、ブラウザによって使用する設定が違うってどういうことですかね？

ドメイン名の名前解決って通常DNSがやってくれるからブラウザ依存にはならないような気がするのですが…。

hostsファイルに書くときは、重複しないように書いてください。

こんなのに何時間も費やすのはアホ以外の何物でもありません。

（と自分に言い聞かせる）

tableタグのtrタグを指定したデータで追加するjQueryプラグイン作ってみた

業務アプリケーションを作っていると、テーブルに行を追加する処理が良く出てきます。
例えば、検索ウィンドウで条件を入力して検索するとその検索結果が行として表示され、選択するとメイン画面に反映するとか。

毎回同じコーディングをして面倒だったのでjQueryのプラグインにしてしまいました。
既にもっと高機能なものが提供されている可能性もありますが、自分がやりたいように改造もしたいので車輪の再発明をしました。


プラグインのダウンロードは、こちら(jQuery.tabler)から

$(function() {
  'use strinct';

      // ポイント : tablerの準備
      //
      $("#search_list").tabler({
        rowTemplate: '.row_template',
        rowDetail: '.row_detail',
        addPoint: 'tr:last'
      });

      $("#button").on({
        click: function() {

            var data = [
                {id: 100, text: '100のデータ'},
                {id: 101, text: '101のデータ'},
                {id: 102, text: '102のデータ'},
                {id: 103, text: '103のデータ'},
                {id: 104, text: '104のデータ'},
            ];

            // ポイント : テーブルに行を追加する
            $("#search_list").tabler.bindData(data, {
                clear: true,
                // 行編集
                editRow: function(index, item, newRow) {
                $(".no", newRow).text(item.id);
                $(".タイトル", newRow).text(item.text);

                return true;
                }
            });
        }
     });
});

プラグインのダウンロードは、こちら(jQuery.tabler)から

なに！？マスタメンテナンスが1日で5本できたって？

　マスタメンテナンスほど時間をかけて作ってはならないものはありません。
（ちなみに、Webシステム。）
1本目はちょっと時間かけてもよいけどそれを真似れば一瞬にして何本も完成するほどにマスタメンテナンス機能の標準化をすれば良いだけです。

　隣の人が1日で5本できたという報告をプロジェクトリーダに報告してリーダは「えぇー」とびっくりしていたけど、「そりゃ、俺が基準になるマスタメンテを作ったんだからそれくらいのスピードでやってもらわないと困るわ」と心の中でつぶやいておきました。

　その隣の人もびっくりしたんじゃないですかね？
どこを触れば良いかがわかったときは、スルスルできるので。
（いや5本ではなくもっと作れるはず。他にもあれば進捗が一気に上る。）


　マスタメンテナンスはそれで良いですが、他の機能はてんでバラバラで作っているのでまとまりがないんだろうと思っています。
　多分モジュール分割の概念がないのか、めんどくさいのかわかりませんがコントローラ内でSQL発行したり共通化できる部分を共通化して外出にしたりすらされていないのを見ると他人事ながら腹が立ってきます。

　でも自分がメンテナンスするわけではないのでほっといていますが。

WebシステムのHTMLはできるだけ簡単に

Webシステムは通常ブラウザ上で動作させるのでHTMLを書きます。
HTML、CSSの知識が乏しい為とんでもないマークアップを書いてしまう人がいます。

よくある項目のタイトルと入力エリアがあるパターンでdivタグを５重くらい重ねて表現する人がいます。

こんな感じの入力欄を作るだけで下の「深いタグ」のようなＨＴＭＬを書く人がいます。
詳しくは覚えていませんが、各タグは、枠線の為のタグ、幅を決めるタグなどそれぞれ役割があるようです。
しかし、CSSを適切に使うことで「浅いタグ」くらいで済みます。修正も見た目もよくよくなります。

名前:

深いタグ
<div>
  <div>
    <div>
      <div>
        <div>
          <span>名前:</span>

          <input>

        </div>

      </div>

    </div>

  </div>

</div>

浅いタグ

<div>
  <label>名前:</label>

  <input>

</div>

具体的な正解は書きませんが(笑)

AWSのロードバランサーOutServiceにどきどき

AWSのEC2を再起動したあとでロードバランサーでずっとOutServiceになってるとときは焦るわー。

大抵はEC2をドードバランサーに付け直すことでInServiceになるんだけどたまに一向に状態が変わらないときがあります。

こんなときは、EC2自体を再起動してやるとInServiceになります。
（でもEC2の再起動でもインスタンスステータスのチェックでエラーになったりするんですけどね。そしたらもう一度再起動。）