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

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

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

仕様的には・・・
(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>要素みたいに、行で分かれていないので、任意の行を選択したいときは、いちいち計算しないといけません。

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

ウェブブラウザ上のJavaScriptでExcelファイルをゴニョゴニョしたい

特に需要はないと思いますが、極たま~~~にウェブでエクセルファイルを扱うことがあります。
なんつっても、世の中の文書フォーマットは、マイクロソフトのエクセル(Excel)がデファクトスタンダードです💦
これはもうどうにもなりません。CSVで、つっても、エクセルファイルをよこしやがります。

まぁ、やっぱり業務システムにはエクセルは欠かせません、というか、これなしには、日本は動きません。日本の企業とか国、地方公共団体は、エクセルで動いているんです。これはもう動かしようのない事実であり当分の間は変わりませんし、変化の兆しも見えません。

しょうがない。

と、開発者の方が思ったかどうかわかりませんが、ブラウザのJavaScriptでエクセルファイルをパースして編集して、出力してくれる ライブラリがあるんですね。サーバーサイドのNode.jsでも使えます、というかそっちがメインのライブラリなのかも。

一般的にMS-Officeをインストールしたパソコンにはおまけ?として、EXCELのオートメーションが使えるようになってます。あくまでOfficeを買えば!の話ですが。
Windows Scripting HostなどからVBScriptやJScriptを使ってカンタンにエクセルファイルをアーダコーダできます。

・・・が、今回はこういう噺ではありません。
一般的なブラウザ上で、エクセルファイルをアーダコーダできるライブラリがあったんです。需要がなかったので今まで知らなかった!

SheetJS Spreadsheets simplified

で、ググったりしていろいろ調べると、意外にカンタンに使えちゃいますね。ただし、javascriptの blobとかFileReaderとかArrayBufferとかUint8Arrayとか・・・そういうちょっとややこしめの知識が必要です。

昔と違ってブラウザでローカルファイルとか普通に扱えます。ですが、その時は必ず、上記のFile/Blob/FileReader/ArrayBuffer/TypedArrayとかが絡んできます。
FileとBlobの関係、ArrayBufferとTypedArray(Uint8Arrayとか)の関係、さらにはFileReaderとFile/Blobの関係。このあたりは鬼門です。なんでこんなめんどくさいんだよ!っていつも思います。

MDNとかのリファレンスを読むのが手っ取り早いのですが・・・とりあえず、MDNのサイトでは、こういう場合は、こうする、という「お約束」の手順が書かれているので、まずそれを丸覚えするのがいいと思います。公文式です(笑) 理屈は後から学べばいいんです。ただ、ググってブログ記事を参考にするのは結局は理解するのが遅くなってしまうので、リファレンスとサンプルを読んで、書いて、試してみたほうがいいと思ってます。

※ たぶんIEでは動かないと思う。試してないけど。IEは既にMSも認めたオワコンなんで、どーでもいい。

下のデモ(テストコード)

さて、HTMLファイルをサクッと書きます。(Ryzenの価格表コピペしました。)

<!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">
      table,th,td {
        border-collapse: collapse;
        border: 1px solid #aaa;
      }
      th,td {
        padding: 5px;
        text-align: center;
        font-size: 85%;
      }
      th { 
        background-color: #f6f6f6;
      }
    </style>

  <body>
    <h2>sheet-js サンプル</h2>
    <table id="table-0">
      <tr>
        <th>モデルナンバー</th>
        <th>プロセスルール</th>
        <th>コア/スレッド数</th>
        <th>TDP</th>
        <th>周波数(ブースト時/ベース)</th>
        <th>合計キャッシュサイズ(MB)</th>
        <th>GPU</th>
        <th>PCIe 4.0 レーン(X570利用時)</th>
        <th>店頭予想価格(税別)</th>
        <th>提供開始時期</th>
      </tr>
      <tr>
        <td>Ryzen 9 3950X</td>
        <td>7nm</td>
        <td>16/32</td>
        <td>105W</td>
        <td>4.7/3.5GHz</td>
        <td>72MB</td>
        <td>-</td>
        <td>40</td>
        <td>不明</td>
        <td>9月</td>
      </tr>
      <tr>
        <td>Ryzen 9 3900X</td>
        <td>7nm</td>
        <td>12/24</td>
        <td>105W</td>
        <td>4.6/3.8GHz</td>
        <td>70MB</td>
        <td>-</td>
        <td>40</td>
        <td>59,800円</td>
        <td>7月7日</td>
      </tr>
      <tr>
        <td>Ryzen 7 3800X</td>
        <td>7nm</td>
        <td>8/16</td>
        <td>105W</td>
        <td>4.5/3.9GHz</td>
        <td>36MB</td>
        <td>-</td>
        <td>40</td>
        <td>46,980円</td>
        <td>7月7日</td>
      </tr>
      <tr class="y5 odd">
        <td>Ryzen 7 3700X</td>
        <td>7nm</td>
        <td>8/16</td>
        <td>65W</td>
        <td>4.4/3.6GHz</td>
        <td>36MB</td>
        <td>-</td>
        <td>40</td>
        <td>39,800円</td>
        <td>7月7日</td>
      </tr>
      <tr>
        <td>Ryzen 5 3600X</td>
        <td>7nm</td>
        <td>6/12</td>
        <td>95W</td>
        <td>4.4/3.8GHz</td>
        <td>35MB</td>
        <td>-</td>
        <td>40</td>
        <td>29,800円</td>
        <td>7月7日</td>
      </tr>
      <tr>
        <td>Ryzen 5 3600</td>
        <td>7nm</td>
        <td>6/12</td>
        <td>65W</td>
        <td>4.2/3.6GHz</td>
        <td>35MB</td>
        <td>-</td>
        <td>40</td>
        <td>23,980円</td>
        <td>7月7日</td>
      </tr>
      <tr>
        <td>Ryzen 5 3400G</td>
        <td>12nm</td>
        <td>4/8</td>
        <td>65W</td>
        <td>4.2/3.7GHz</td>
        <td>6MB</td>
        <td>Radeon RX Vega 11</td>
        <td>-</td>
        <td>18,800円</td>
        <td>7月7日</td>
      </tr>
      <tr>
        <td>Ryzen 3 3200G</td>
        <td>12nm</td>
        <td>4/4</td>
        <td>65W</td>
        <td>4/3.6GHz</td>
        <td>6MB</td>
        <td>Radeon RX Vega 8</td>
        <td>-</td>
        <td>11,800円</td>
        <td>7月7日</td>
      </tr>
    </table>
        
    <p>
      <label for="select-file">テーブルをエクセルファイルに追加します。</label>
      <input type="file" id="select-file">
    </p>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
    <script type="text/javascript" src="./index.js"></script><!-- 下記 javascriptコード -->
  </body>
</html>

JSライブラリは適当にCDNから引っ張ってきましょう。僕は jQuery好き好き人間なので、jQueryを使用します。すみません。
INPUT[type=file]タグでローカルファイルの口としましょう。ドラッグ&ドロップを仕込んでもいいのですが、コードをカンタンにするため、普通のファイル選択にしました。ここでローカルファイルを選んでjavascriptコードに放り込みます。

で、次に実際の処理を書いていきます。まず、基本。INPUT[type=file]のonchangeイベントハンドラを起点にしています。(13行目付近)
ローカルファイルを読み込んでゴニョゴニョするときは、必ずFileReaderのインスタンスを作って、onloadイベントで処理を行います。(18行目付近)
下記例では、FileReader.readAsArrayBuffer() していますが、単純に Data URIが必要であれば FileReader.readAsDataUrl() を使用します。
ローカルの画像ファイルを読み込んで表示するときは、readAsDataUrlメソッドを使いますよねぇ。

ちなみにreadAsArrayBufferメソッドを使うと、onloadイベントハンドラ内で ev.target.result によってArrayBufferオブジェクトを得ることができますが、直接このArrayBufferオブジェクトにアクセスすることができません。必ず、TypedArray・・・たとえば、Uint8Arrayなどのオブジェクトのインスタンスからアクセスします。めんどくさいですねぇ。

/*******************************************************************************
  filename:  index.js
 
  description: 
   ローカルのエクセルファイルを選択すると(<input type="file" id="select-file">、
   選択したエクセルファイルへシートを追加し、テーブル要素(<table id="table-0">)を書込み、
   そのエクセルシートをダウンロードするためのリンクをdocument.body に追加します。

   ※このままのコードだと、セルの書式属性は全部消えます。
*******************************************************************************/
(function($) {

  $('input#select-file[type=file]').on('change',function(ev) {
    var files = this.files;
    var f = files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
     
      // 読み込んだエクセルファイル(ArrayBuffer)をUint8Array配列にし、XLSX.readに渡します。
      var data = new Uint8Array(e.target.result);
      var workbook = XLSX.read(data, {type: 'array'});

      // 上記 HTMLのテーブルを table_to_sheetメソッドに渡しエクセルシート(ブック?)を作って、
      var new_workbook = XLSX.utils.table_to_sheet( $('#table-0').get(0) );
      
      //読み込んだエクセルに上記テーブルを変換したシート(ブック?)を新しいシートとして追加します。
      XLSX.utils.book_append_sheet(workbook, new_workbook, 'Ryzen price');

      // 新しく作成するエクセルファイルの作成オプションを設定します。
      var options = {
          bookType: 'xlsx',
          bookSST: false,
          type: 'array',
          compression: true
        };
      
      // 上記オプションを使って Blobオブジェクトに出力します。
      var blob = new Blob(
        [XLSX.write(workbook, options)],
        {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}
      );

      // Blobオブジェクトをダウンロードさせるための仮想的な?URLを作って A要素をdocument.bodyに追加します。
      // クリックすると、読み込んだエクセルファイルに表をシートに追加し、新しく作ったエクセルファイルをダウンロードできます。
      $('<a>')
        .attr({'href':window.URL.createObjectURL(blob),'download': 'シートを追加したエクセルファイル.xlsx'})
        .appendTo(document.body)
        .text('シートを追加したエクセルファイル.xls');
    };
    reader.readAsArrayBuffer(f);
  });

})(jQuery);

FileReader.onload内で、ev.target.result を そのまま Uint8Arrayコンストラクタに渡して、ArrayBufferへアクセスするための Uint8Arrayオブジェクトを作り(21行目付近)、それを XLSX.readメソッドに渡します。ただそれだけで、エクセルファイルをパースしてくれます。あとは、XLSX.utils オブジェクトのメソッドをコールしていけば、だいたいのことはできると思います。
CSVデータが欲しければ、XLSX.utils.sheet_to_csv, JSONデータが欲しければ XLSX.utils.sheet_to_json、シートを増やしたければ、XLSX.utils.append_sheet、他にも javascript配列をシートに、DOM TABLE要素をシートに・・・とか対応するメソッドがあるようです。この辺のドキュメントはgithubをたよりに試行錯誤するしかないのかな。。。

エクセルファイルにシートを追加して、そのエクセルファイルをダウンロードする、これだけのことをクライアント内(ブラウザ内)で完結することができてしまいます。
ローカル内でサーバーを立てる必要もありません。上記二つのHTMLとJSを任意のフォルダに適当な名前で保存して、file://スキームで試すことも可能です。

(1) HTMLファイル ローカルで開いたところ。

(2) エクセルを選択すると、ダウンロードリンクが追加されます。

(3) 元のエクセルはいつもダミーで使わせてもらってる疑似会社情報のエクセルファイル
( http://hogehoge.tk/personal/ )

(4) HTMLのテーブルデータをエクセルシートにぶっこんでくれます。
ただしセル書式は全部吹っ飛びます。

今回は、エクセルシートを追加してみましたけど、セルの属性とかは全部ぶっとんでしまいました💦
が、単にJSONやCSVが取れればいい、というのが大半の需要かと思いますので問題はないでしょう。

僕は エクセルファイルをサーバー側で変換するのではなく、クライアントで一旦CSVに変換してから、サーバーにアップロードして、処理を行う用途に使用しました。サーバーでエクセルファイルを処理すると重くなるんで・・・。
エクセルを読むだけなら、カンタンにできるので、本当にありがたいライブラリです。

ただ一点、ちゃんとしたリファレンスドキュメントがありません。。。これはPro版を買えってことなのかなぁ。。。Community版はApache License 2.0なんで、「おまえら、ソース読んで、自分でなんとかしろよ」ってことなんでしょうね。

MySQL for Excel

知らない間に、MySQL for Excel という素敵なツールがあるのに気づき(遅すぎ)、会社のPCにダウンロードしてインストールして、テストサーバー(CentOS6 / MySQL 5.1)に接続してみました。。。

家のパソコンにはエクセルなんて無用の長物なのでインストールしていないし、持ってもいない。

結果、撃沈。

Authentication with old password no longer suppored. Use 4.1+ style….

とかいう、エラーダイアログが出て止まる。んー、ユーザーの設定は全部phpMyAdmin経由で使用しているから、古いパスワードが埋め込まれてんのかな?と思い、sshで接続してmysqlコマンドで、下記確認。

select user,host,password from mysql.user;

新しいパスワードは、アスタリスク(*)から始まるけど、全部16文字の古い形式やった。。。どおりで通らんはず。

全部パスワードを設定しなおしたった。

mysql

これで、MySQL for Excel で無事に接続でけた。

テーブルのインポートから・・・mysqlexcelでもデータのインポートだけなら、Connector/ODBCをインストールしてODBC 経由で普通にできるやん!という無粋なことは言っちゃいけない。

でもって、テーブルのレコード追加・編集まで・・・使い慣れた表計算グリッドでデータをぶち込めたり、上書きできたり、という。素敵!

mysqlexcel2

しかし・・・結局のところ、エクセル使いの方は、アクセスを使うと思うし・・・Windowsで飯を食ってる人はそもそもSQLServer使うし・・・、MySQL for Excelは誰が何のために使うのだろうか・・・? そもそもMySQLを日常的に使用する開発者がわざわざExcelなんて使うだろうか? ふつうはOpen Officeでそ?僕なんて、いまだにIBMのLotus Symphony 3だし。

ってわけで、HDDの肥やしになる。