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)から