編集可能な簡易グリッドビュー画面をイチから作ってみる

直接関係はありませんが、これ の続きです。

ここにきて、カンタンなグリッドを表示する仕事があって、それならセルの内容を書き換えるだけの簡易的なセル編集機能もあればなぁ、と家に帰ってから唐突に思いつき、テレビを見ながら数時間ぐらいで突貫工事で作った。

仕様的には・・・
(1)Excelファイル(もしくはUTF-8なCSVファイル)をブラウザに読込み、
(2)簡単なグリッドビュー表示を行い、
(3)セルをクリックしたら編集し、
(4)リターンキー押下で編集確定、
(5)エスケープキーで編集取消
という感じ。

これならHTMLとCSS、JavaScriptで百数十行ぐらいでいけそうです。
実際業務で使うには、変更内容を追跡し、サーバーへ送信してデータベースに反映して・・・というような事が考えられますが・・・そこまでやっとれん!w

まずは、見てくれ、画面デザインですが、あくまでサンプル的なものなので、ほとんど素のHTMLです。
CSSのGridなんて初めて書いてみました。普段はBootstrapのレイアウトグリッドを利用して画面を作っているんですが・・・CSSのグリッドって、なんか難解ですね・・・ドキュメントを一回読んだだけではオッサンには理解できません(笑) エクセルの読込には、みんな大好き SheetJS ライブラリを利用しました。

ただ、セルを結合しまくったりしてるような複雑なエクセルファイルとか読み込むとたぶん滅茶苦茶になります。そういう複雑なエクセルファイルを持っていないので試していないんだけど・・・

デモ画面はこちら

CSS自体はそんなに凝ったことしてないので、読めば大体やろうとしていることが分かるでしょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      /* グリッドコンテナ */
      #excel-grid {
        height: 500px;
        overflow: auto;
        font-size: .8rem;
        position: relative;
      }

      /* グリッドの各行のスタイル */ 
      #excel-grid > .row {
        display: grid;
        column-gap: 0px;
        row-gap: 0px;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
      }

      /* グリッドヘッダの固定(position: sticky) */
      .row.head {
        font-weight: bold;
        border-bottom: 2px solid #ccc !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        z-index: 2 !important;
        top:0 !important;
        background-color: #544a65;
        color:white;
      }

      /* セルのスタイル */
      .row > .cell {
        height: 1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
        display: block;
        padding: 5px;
      }

      /* グリッドヘッダのセル部分 */
      .head > .cell {
        padding: 10px 5px !important;
      }

      /*セル編集時のフォーカス表示*/
      .row > .cell.editing {
        outline: 3px solid #bdceff;
        box-shadow: 0 0 10px 2px royalblue;
      }

    </style>
    <!-- jQuery,SheetJS ライブラリのロード -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>
  </head>

  <body>
    <h1 class="header">
      <span>超手抜きグリッドビュー</span>
      <input type="file" id="select-file">
    </h1>

    <!-- グリッドエリア -->
    <div id="excel-grid">
      <div class="row head"></div>
      <div class="row body"></div>
    </div>

    <!-- スクリプト本体は下記参照 -->
    <script type="text/javascript" src="./show-sheet.js"></script>
  </body>
</html>

続いて、肝心のJavaScript ですが、ほとんど各種イベントの処理ぐらいで、これといって特筆するべき事はありません。
ところどころ jQuery 使って見苦しいのですが・・・jQueryだと明らかにタイプ量が減るので僕は多用しています。世間の流れとしてはjQueryは排除されつつあるのですが・・・やっぱりjQueryに慣れきってしまうと document.querySelector なんてタイプするのがすんげぇ面倒。jQueryだと $ の一文字ですよ?イベント登録も on の二文字ですよ? addEventListener とかタイプするのがアホらしくなりますけどね、オッサンは。

/*******************************************************************************
 ミッション:
 ローカルのエクセルファイルを選択して疑似グリッドビュー編集を行う。
*******************************************************************************/
(function($,undefined) {

  // エクセルファイルロードのトリガー
  $('input#select-file[type=file]').on('change',on_input_type_file_change);
  
  // グリッドセルのイベントハンドラ登録
  $('.row.body')
    .on('click','.cell',on_cell_click)
    .on('blur','.cell',on_cell_blur)
    .on('keydown','.cell',on_cell_keydown);

  // ウィンドウサイズ変更のイベントハンドラ登録
  $(window).on('resize',on_window_resize).resize();


  /************************************************************************
   * 以下関数定義
  ************************************************************************/

  // グリッドの高さをウィンドウに合わせて調整
  function on_window_resize(e)
  {
    var h1 = $('.header').outerHeight(true);
    var h2 = $(window).height();
    var h3 = parseInt($(document.body).css('margin-top')) + parseInt($(document.body).css('margin-bottom')); 
    var h = h2 - h1 - h3;

    //画面下まで高さを伸ばす
    $('#excel-grid').height(h);
  }

  // エクセルファイルの読込完了ハンドラ
  function on_excel_file_load(e)
  {
    // お約束
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {type: 'array'});

    // 一番最初のシートの名前を得る
    var n = workbook.SheetNames[0];

    // シート名からワークシートオブジェクトをゲト
    var ws = workbook.Sheets[n];

    // シートの全範囲を取得
    // ワークシートオブジェクトの各セルは、エクセルでよく使うA1形式でアクセスできます(ws['A1'], ws['A2']みたいに)
    // そして !ref プロパティーには A1:Z10のような形式でセルが使用されている範囲が入っています。
    // プログラムで利用するにはメンドクサイのでこの形式を一旦 row/column形式にデコードする必要があります。
    // ワークシートオブジェクトについては https://github.com/sheetjs/sheetjs/#sheet-objects を参照。
    var range = XLSX.utils.decode_range(ws['!ref']);

    // 使用されている最大列数を取得
    // デコードされた範囲オブジェクトrange は 
    // { s: { r: 数字, c: 数字 }, e: { r: 数字, c: 数字 } }
    // というような構造になっているようです。
    // s は start , e は end , r は row , c は column の略だと思われます。 
    var rownum = range.e.c + 1;

    // グリッド内のセルを初期化
    $('.row.head,.row.body').empty();

    // 最大列数から CSS のgrid-template-columnsプロパティの値を決めてあげます。
    // grid-template-columns: repeat(x,1fr); ここで x は rownumにする
    $('.row.head,.row.body').css('grid-template-columns','repeat(' + rownum.toString() + ',1fr)');

    // ワークシートをJSONデータに変換
    // 第二引数のオブジェクトで headerプロパティを与えていますが、
    // これは 各行をオブジェクト(object)ではなく配列(array)に変換するオプションです。
    // このオプションの意味は https://github.com/sheetjs/sheetjs#user-content-json を参照。
    var json = XLSX.utils.sheet_to_json(ws,{header:1})

    // <table>要素を使えばもっと簡単になったけど、敢えてイバラの道を進みます。
    var $head = $('#excel-grid > .head');
    var $body = $('#excel-grid > .body');

    // JSONデータから グリッドのセルを埋めていきます。
    $.each(json,function(i,arr) {
      var to = i == 0 ? $head : $body;
      for(var j=0;j<rownum;j++)
      {
        var v = arr[j] ? arr[j].toString() : '';
        var celldata = {'r':i,'c':j,'v':v};
        var attrs = {
          'data-cell': JSON.stringify(celldata),
          'title': v
        };
        $('<span>')
          .addClass('cell')
          .attr(attrs)
          .text(v)
          .appendTo(to);
      }
    });
  };

  // input[type=file]の onchange ハンドラ
  function on_input_type_file_change(e)
  {
    var files = this.files;
    var f = files[0];
    var reader = new FileReader();

    reader.onload = on_excel_file_load;
    reader.readAsArrayBuffer(f);
  }

  // 各セルをクリックした時のイベントハンドラ
  function on_cell_click(e)
  {
    e.preventDefault();
    e.stopPropagation();
    // セルをクリックしたらセルのclassにeditingを追加
    $(this).addClass('editing');

    // セルの元の値を undoプロパティに保存
    this.undo = this.textContent;

    // セルのスタイルを変更
    this.setAttribute('style','text-overflow: clip;');

    // セルを編集可能にする
    this.setAttribute('contentEditable','true');

    // フォーカスをあてる
    this.focus();
  }

  // セル編集中にフォーカスが外れたら cell_value_update関数をコールして更新
  function on_cell_blur(e)
  {
    if('true' === this.getAttribute('contentEditable'))
      cell_value_update(this);
  }

  // セルのonkeydownイベントハンドラ
  function on_cell_keydown(e)
  {
    // セル編集中、リターン(エンター)キーとエスケープキーをトラップ
    if(e.keyCode == 13 || e.keyCode == 27)
    {
      e.preventDefault();

      // エスケープキーなら復帰
      if(e.keyCode == 27)
        this.textContent = this.undo;

      cell_value_update(this);
    }
  }

  // cell 更新処理
  function cell_value_update(cell)
  {
    // セルの値が保存されていた編集前の値と違っていたら更新
    if(cell.textContent !== cell.undo)
    {
      var o = JSON.parse($(cell).attr('data-cell'));
      o.v = $(cell).text();
      $(cell).attr('data-cell',JSON.stringify(o));
    }

    // バックアップを廃棄
    delete cell.undo;

    // 編集を終了
    $(cell)
      .removeAttr('contentEditable')
      .removeAttr('style')
      .removeClass('editing')
      .scrollLeft(0);
  }

})(jQuery);

いつも利用させてもらってる疑似テストデータを利用してエクセルデータを流し込んでやると、こんな感じです。「こんな感じです」って言われてもね。。。

いちおう、エクセルファイルから簡易グリッドビューにデータを流し込み最低限の編集はできるようになりました。
・・・が、グリッドのHTML的な構造は見直す必要がありますよねぇ。

<div class="row body">
  <span class="cell"></span> ....延々とセルが続く
</div>

一つの要素(div.row.body)にすべてのセル(span.cell)を全部詰め込んで無理くりCSSでグリッド表示させてるだけなんで、<table>要素みたいに、行で分かれていないので、任意の行を選択したいときは、いちいち計算しないといけません。

ま、ちょっとだけグリッド表示したい、って時に使う用、と割り切る。

どうしてもWindows10の起動サウンドを鳴らしたい

期限が迫っているのに、どーでもいいことが気になって時間食ってしまう💦
どーでもいいプログラムを書く時間です。

歴代のWindowsで一番気に入ってるスタートアップサウンドは、Windows2000とMe の時のピアノ音。あれが一番心地よい。まぁ人それぞれなんですが・・・

最近のWindowsって起動サウンドが鳴らないんですね・・・ググると Windows8ぐらいからデフォルトで無効にされているみたいですね。まぁ仕事場のパソコンは別にいいとして、家で使うPCぐらい鳴らしてもいいんじゃないすかねぇ。

で、そもそも コンパネのサウンドの設定で、起動時のサウンドを鳴らす設定が消されています。なんで?
これもググるとレジストリをいじることで有効になるみたいですが、結局はシステムにブロックされて起動サウンドは鳴らないみたいでつね。。。

しかたないので、タスクスケジューラに登録することにした。起動サウンドのWAVファイルは Windows2000のインストールCDから抜いた。ライセンス的に不味いかもしれん。が、別にばら撒くわけでもなし。

基本タスクを作成し、トリガーとして「ログイン時」を選択。次に登録するプログラムなんですが・・・Windows標準で、サウンドファイルを再生するコマンドはないみたいです・・・
これもググると Powershell のワンライナーがヒットします。。。というか、これしかヒットしません。
要点は・・・コマンドプロンプトで下記コマンドを打つだけ。

>> powershell -WindowStyle hidden -c (New-Object Media.SoundPlayer "wavファイルのパス").PlaySync();

このコマンドをそのままタスクスケジューラに登録してもいいんですが・・・コンソールウィンドウが立ち上がってしまいます。

なんか、すっげぇカッコ悪りぃ!

標準でできないならプログラムを組むしかない。 上記のコマンドラインは .NET Frameworkのクラスライブラリ System.Media.SoundPlayer のインスタンスを生成してサウンドファイルを渡すだけなので、C#でも数行で済みそうです。というわけで組んでみる・・・組むというレベルでもない。

/*******************************************
  * JUST ONLY PLAY SOUND FILE(WAV)

  File name : playsound.cs
  build: 
     >> csc -target:winexe  playsound.cs
  
  usage:
     >> playsound logon.wav

  namespaceは適当に変えてね。
*******************************************/
using System.IO;
using System.Media;

namespace jp.ptsv.windows
{
  class PlaySound
  {
    static void Main(string [] args)
    {
      if(args.Length > 0 && File.Exists(args[0]))
        (new SoundPlayer(args[0])).PlaySync();
    }
  }
}

主要部分は一行ですね(笑)
これを、-target:winexe 付きでビルドするとコンソールウィンドウなしのプログラムができるので、このプログラムを適当のフォルダに配置してサウンドファイルとともにタスクスケジューラに登録します。
c:\your\binary\path\playsound.exe logon.wav

やっとこさ、ログイン時に あの Windows2000 の心地よい起動サウンドが聞けるようになったとさ。おわり。

一応実行バイナリを置いておきますが、自己責任で。いかなる損害も補償は一切いたしません。あしからず。

HTMLフォームでエンターキー押して入力要素のフォーカスを移動させたい、いや、しろよ!

HTMLでフォームをチマチマ組んでテストしていると、テキストボックス(input[type=text]要素)とかでついついエンターキー(改行キー)を押して、ムカッ!!!!!!とかしません? するよね、絶対するよね? 僕は自己嫌悪に陥って仕事を中断して帰りたくなる衝動に駆られます!

そこでググってjQueryのプラグイン探すなり、テック系の記事をコピペしたりしますよね。でも僕は探すより、自分で書く方が早いんですよ、結果的に。適当なjQueryプラグインなりを探してもそれの使い方を調べてたり、要らない機能があったりして、結局ドキュメントをよく読まないとわからないことが多い。

要は FORM要素内のINPUT要素に onkeyup  onkeydownイベントハンドラを仕込んでエンターキーをトラップすれば済む話。
たかだか数十行のスクリプトです。え?自分で組むとバグが!!!って? バグが出たらその都度直せばいいんです。ラクしちゃいけません。ラクするのはチラシの印刷だけでよろしい。

僕は jQuery 好き好き人間なので、適当にプラグインを書きました。

/********************************************************************
  filename: jquery.enterNext.js
  usage: call bellow...

   $('form').enterNext();

********************************************************************/
(function($,undefined)
 {
   $.enterNext =
     {
       config:
         {
           selectors: [
             'input[type="text"]',
             'input[type="password"]',
             'input[type="email"]',
             'input[type="number"]',
             'select',
             'textarea'
           ]
         }
     };

   var enterNextInternal = function(setting)
   {
     var selectors = setting.selectors.join(',');
     var $controls = $(selectors,this);
     var lastIndex = $controls.length - 1;
     var onKey =  function(ev) 
     {
       if(this.tagName.match(/input/i) && ev.keyCode == 13)
       {
         var currentIndex = $controls.index(this);
         var nextIndex = currentIndex + 1;
         if(currentIndex == lastIndex)
           nextIndex = 0;

         var nextObject = $controls.get(nextIndex);
         nextObject.focus();
       }
     };
     $(this).on('keydown',selectors,onKey);
     // 修正: onkeydown へ変更。onkeyupだと validityチェックでフォーカスが移動しなくなった。。。なんで?よくわからん。
   };
   
   $.fn.enterNext = function(options)
   {
     return this.each( function() { enterNextInternal.call(this,$.extend(true,{},$.enterNext.config,options)); });
   };
   
 })(jQuery);

で、これを以下のようなフォームで使うと、このままでは失敗して、エンターキー押すとフォームが送信されてしまいます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css"><!--
      form input[type=text] {
        display: block;
        margin: 1em 0;
        padding: 5px;
      }
    --></style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.enternext.js"></script>
  </head>
  <body>
    <div id="main">

      <!--メインコンテンツ-->
      <div id="contents">
        <div class="inner">
          <form method="post">
            <input type="text" name="a" value="" required />
            <input type="text" name="b" value="" />
            <input type="text" name="c" value="" />
            <input type="text" name="d" value="" />
            <input type="text" name="e" value="" />
            <input type="submit" value="送信">
          </form>
        </div>
      </div>

    </div><!-- #main -->
    <script type="text/javascript"><!--
      (function($) {
        $('form').enterNext();
      })(jQuery);

    //--></script>
  </body>
</html>

失敗の原因は、FORM要素内に input[type=submit]要素が存在するのが原因。
chromiumしか確認していないけど、どうやら input[type=submit]要素が存在すると、エンターキー押下で問答無用でFORMのアクションが走るようです。このinput[type=submit]要素を消すと送信されない、という挙動になってます。違ったらごめん。

じゃぁ、FORM要素にinput[type=button]要素なりa要素なりを書いて、そのonclickイベントハンドラ内で FORM要素のsubmitメソッドをコールすればいいんじゃない?ということになるんですが、残念ながらそうは問屋は降ろさない。
input[type=submit]要素がないと、FORM要素のvalidityチェックが走らないんだな、これが。せっかくinput要素に requireだのpatternだのを書いても無視されてしまう。

解決方法は2つ。

(1)
input[type=button]要素のonclickハンドラ内で、FORM要素のsubmitメソッドをコールする前に、reportValidityというメソッドをコールしてその返り値を判断して submitメソッドをコールするかどうかを決定する。

    <script type="text/javascript"><!--
      (function($) {
        $('form').enterNext();
        $('form [type=button]').click(function(ev) {
          if(this.form.reportValidity())
            this.form.submit();
        });

      })(jQuery);

    //--></script>

(2)
input[type=submit]要素を隠すか非表示(display: none;とか)にしておき、input[type=button]要素のonclickハンドラとFORM要素のonsubmitイベントハンドラを仕込んでおいてエンターキー押下かではなくクリックされたかをチェックさせる。

    <form>
    ....
    <input type="submit" style="display:none;" />
    <input type="button" value="送信" />
    </form>
    <script type="text/javascript"><!--
      (function($) {
        $('form').enterNext();

        $('form').submit(function(ev) {
          if(!'isClick' in this || this.isClick !== true)
          {
            ev.preventDefault();
            return false;
          }
        });
        $('form [type=button]').click(function(ev) {
          $('form').prop('isClick',true).find('[type=submit]').click();
        });

      })(jQuery);

    //--></script>

最初(2)の方を使ってたんだけど、(1)の方がカンタンなので、そっちにした。単に reportValidityというメソッドを後から知ったんだけどね💦

ちなみに、FORMのvalidityチェックの際、エラーメッセージをカスタマイズするプラグインもついで書いた。プラグインにするほどのものでもないけど、一回一回書くのはめんどっちーのでプラグインにした方がラク、というだけの理由ですけどね。

/******************************************************************
  Filename: jquery.validity.js
  入力必須の際のエラーメッセージをカスタマイズします。

   usage:
   <input type="text" pattern="^[0-9]*$" name="hogehoge" />

   $('input[type=text]').validity('半角数字で入力してください');
*******************************************************************/
;
(function($,undefined)
 {
   //デフォルト値
   $.validityMessage = 'この項目は入力必須です。';

   var validity = function(message)
   {
     if(message.length == 0)
       message = $.validityMessage;

     $(this)
       .on('invalid',function(ev) {
         if(this.validity.valueMissing || this.validity.patternMismatch || this.validity.typeMismatch)
         {
           this.setCustomValidity(message);
         }
         else
         {
           this.setCustomValidity('');
           ev.preventDefault();
         }
       })
      .on('input',function(ev) {
        this.setCustomValidity('');
      });
   };
   
   //plugin body
   $.fn.validity = function(message)
     {
       return this.each(function()
                        {
                          validity.call(this,message);
                        });
     };
   
 })(jQuery);

Windows10でこれだけ知ってれば飯食える(大嘘)基本キーボード操作

Linuxでターミナル中心にCUIでゴニョゴニョやってると、脳内がGUIからCUIになりつつあります。そりゃそうだよね、マウスでごちゃごちゃやるより、コマンド一発叩けば処理完了すんだから。

で、脳内がCUIに侵されつつある今、Windows10でもそれをやろう、というわけです。原点回帰です。MS-DOSは良かったな!的な。
Windows10ではすでにWSLがあるので、テキスト処理はもう快適です。コマンドプロンプトでの type とか findstr とかいう、意味わかんねーコマンドを叩く必要はありません。WSLで cat, grep できます。WSLで標準出力をクリップボードにも転送できるし、もちろん Windowsのコンソールプログラムにパイプで接続できますし、正直、昔のマイクロソフトはなんだったんだ?ってな具合です。

閑話休題。

本題です。脳内がCUIに侵されつつあるので、できるだけ Windowsでもマウスを触りたくないのです。特にエディタ(gVimとか)でガシガシコーディングしてると、キーボードから手を放したくないのです。

よく忘れるので、備忘録として残してます。

キーボードショットカット編
※ WIN は ウィンドウズキーでキーボードのWindowsのロゴがプリントされているキー。

( 1)WIN + SHIFT + S: スクショ
( 2)WIN + PAUSE: コントロールパネル⇒システム
( 3)WIN + . (ピリオド) :絵文字入力パレットを出す
( 4)WIN + , (カンマ) :押している間だけ 全ウィンドウを非表示(デスクトップ上のアイコン確認用途?)
( 5)WIN + +(プラス): 拡大鏡(拡大)
( 6)WIN + – (ハイフン):拡大鏡(縮小)
( 7)WIN + E :エクスプローラのE (エクスプローラ起動)
( 8)WIN + R :実行(Run) の R (コマンドを指定して実行ダイアログ)
( 9)WIN + D :デスクトップのD (全ウィンドウ表示・非表示の切り替え)
(10)WIN + I :INSTITUTE?の I (Windowsの設定を開く)
(11)WIN + G :GAMEのG (ゲーム用の情報FPSとか?を出す)
(12)WIN + V : なんのVだ? クリップボードの履歴表示

POWERSHELL編
※ コマンドの後に パイプで ogv に渡すとグリッドビューウィンドウで表示してくれる
 ( ogvは Out-GridView のエイリアス)

(1)gip LANインターフェイスのIPアドレス他の情報表示( Get-NetIPConfigurationのエイリアス)
   ipconfigコマンドよりこっちのほうがプロっぽいでしょワラ
(2)gin コンピュータの情報一覧 msinfo32のコンソール版?(Get-ComputerInfoのエイリアス)
(3)Get-NetAdapter (認識されているLANアダプター一覧)
(4)Get-NetFirewallRule (Windowsファイヤーウォール規則の一覧表示)

Powershellは.NET Fremeworkのほぼ100%にアクセスでき、NET Frameworkのクラスライブラリのほぼすべてのインスタンスを生成して使用することができる最強のシェルです。またレジストリを普通のファイル・ディレクトリのように扱えたりできて、マイクロソフトが提供するコマンドレット・ライブラリによってWindowsの設定、各種機能のインストールなど、Windowsのすべてを制御できるWindows=PowerShellといっても過言ではないでしょう。 水を飲むように、呼吸するように、Powershellを使えなければWindowsで飯を食うのは難しいでしょう。(そんなこたぁーねぇよ)

コマンドプロンプト編(POWERSHELL上でも可能)WSLなしでもOK
(1)where : unix系コマンドでいうところの which コマンドです。
(2)clip : 標準出力をパイプでつないでクリップボードにコピー。ex) dir | clip
(3)nbtstat -a コンピュータ名 :LAN内のNETBIOSコンピュータ名から情報を取得
(4)curl:ファイル送受信コマンド(最新のWindows10では標準で使えるようになってます)
(5)scp :リモートファイルコピーコマンド (最新のWindows10で OpenSSHがサポートされてます)

要望としてはnetcatも標準でサポートして欲しい。。。powershellではスクリプト組めばなんとかできそうだけどね。netcat相当のコマンドレットも提供して欲しいよ、標準で。

随時追加中。。。

LAMP環境からSQLServerインスタンスの接続ポート番号を取得する

制作中の業務用ウェブシステムがSQLServer縛りなので、ここ2~3年急にSQLServerをいじることが多くなってきています💦 別の大半の仕事は MySQLかSQLiteなのですが、やはり WindowsのデファクトスタンダードのDBMSはSQLServer、ツール類は断トツに整備されていじりやすい!

そんなことはともかく。いつも前置きが長いです。すみません。

通常SQLServerインスタンスへコンピューター名(or IPアドレス)\インスタンス名 で接続するので特に接続ポート番号(動的ポート)を意識せずとも接続できると思われます。

ただ、僕はLAMP環境メインでやってきているので、ASP.NETとかいうのは肌に合いませんし💦 今更関わろうとも思いません。(C#でのデスクトップアプリやツール類の作成は趣味でやっているのですが・・・)
Linux側からWindows Server+SQLServerにする場合、大抵の場合SQLServerインスタンスのポートを固定して、ファイヤーウォールでそのポート番号を開けて・・・というやり方が一番ラクですし、今開発中のものもそういう環境でやると思います。

で、ふと思ったのですが、動的ポートって「動的」って言うんだから変わることを前提にしないといけないなぁ・・・と漠然と思いまして、カンタンなSQLServerインスタンスの情報を取得する方法がないかと思いまして・・・このエントリはその時に調べた内容です。

Windowsクライアントメイン(大概がAccessランタイムアプリ)の職場環境だと、大抵の場合「名前付きインスタンス」で動的ポートになっていると思います。職場環境によってはポート固定への変更を頑なに拒まれることもあろうかと思いますし、結局のところ一体何番で接続していいのか困ることがあります。

とりあえず、ググるが、SQLServer Browserサービスに直接問合せることで、SQLServerインスタンスの情報を得られますよ~、的な、事しかわかりません。

マイクロソフトのドキュメントによると、SQLServer Browserへの問合せはSSRP(SQL Server Resolution Protocol)というプロトコルでアクセスするみたいです。
[MC-SQLR]: SQL Server Resolution Protocol

これを読むと、UDP/1434ポート(SQLServer Browserサービス)へ、下図のように、インスタンス名の前に0x04をつけて問い合わせると、セミコロン区切りで情報を投げてくれるそうです。

(上記URLのドキュメントより抜粋)

なんだ!カンタンじゃん!(ほんとかよ。。。)

もちろんですが、SQLServerホストのファイヤーウォールでUDP/1434ポートを開けておく必要がありますが、普通は空いているでしょう、さもないと外部クライアントから一切接続できなくなるし。

とりあえず、ターミナルからローカルで動いているSQLServer(Deverlopper edition)ホストへ netcat で叩いてみる。
インスタンス名は既定のインスタンス(MSSQLSERVER)。

$ echo -ne "\04mssqlserver" | nc -u localhost 1434
Y ServerName;XXXXXX;InstanceName;MSSQLSERVER;IsClustered;No;Version;14.0.1000.169;tcp;1433;;

一応ローカルで動かしているSQLServerは固定ポートで動かしているので 1433になってまつね。。。
これだけだとプロトコル・ポート番号とインスタンスのSQLServerのバージョンなどが取れます。IsClusteredは・・・なんなんでしょうね?無知ですみません。

結果のフォーマットは、先頭(0バイト名)に1バイトの識別記号?の\x05、1バイト目にペイロード長(終端ヌルを除く)を示す16ビット整数、3バイト目からペイロード・・・という風な感じ。ペイロードはセミコロン区切りで、名前1;値1;名前2;値2;….;; という風なフォーマット。これなら簡単に連想配列かなんかにパースできます。

んで、インスタンスの簡易情報を取得するコードを書いてみる。

<?php
/*************************************************************************************
SQLServer名前付きインスタンスの情報を得る。
File: query_sqlbrowser.php
*************************************************************************************/
function queryNamedInstance($host,$instanceName,$queryPort = 1434)
{
  static $timeout = 5;
  $fp = fsockopen('udp://'.$host,$queryPort,$errno,$errstr,$timeout);
  if($fp === false)
    throw new RuntimeException($errstr);

  $str = sprintf('%s%s%s',hex2bin('04'),$instanceName,hex2bin('00'));

  if(false === fwrite($fp,$str,strlen($str)))
    throw new RuntimeException(_('failed to fwrite to resouce pointer'));

  $rv = fread($fp,1500);
  fclose($fp);

  $head = substr($rv,0,1);
  list(,$len) = unpack('v',substr($rv,1,2));
  $data = explode(';',substr($rv,3,$len));
  $rv = array();
  $i = 0;
  while(array_key_exists($i,$data) && array_key_exists($i+1,$data))
  {
    if(!empty($data[$i]))
      $rv[$data[$i]] = $data[$i+1];

    $i+=2;
  }

  return $rv;
}

この関数を実行してみると

<?php
require 'query_sqlbrowser.php';
print_r(queryNamedInstance('IPアドレス','インスタンス名'));

/***** 出力 *****
Array
(
  [ServerName] => コンピュータ名
  [InstanceName] => インスタンス名
  [IsClustered] => No
  [Version] => 10.50.4000.0
  [tcp] => 49179
)
****************/

とりあえす、これで得られたポート番号をキャッシュしておき、接続試行がタイムアウトしたら、キャッシュ更新・・・という感じで組み込もうかと思います。