テーブルヘッダの固定

これまで、tableタグ内で thead要素を固定してtbody要素をスクロール可能にするために、
table要素の外側の要素の高さを固定してposition:relative、overflow:autoと指定して、下記のような自作の簡易jQueryプラグインを使用していました。

実際のデモ

HTMLとCSS

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>カラム1</th>
        <th>カラム2</th>
        <th>カラム3</th>
        <th>カラム4</th>
        <th>カラム5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>カラムデータ1</td>
        <td>カラムデータ2</td>
        <td>カラムデータ3</td>
        <td>カラムデータ4</td>
        <td>カラムデータ5</td>
      </tr>
       ...
       ...
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./jquery.headerFixedTable.js"></script>
<script type="text/javascript"><!--
(function($) {
  $('.table-container').headFixed();
})(jQuery);
//--></script>

.table-container {
  position: relative;
  overflow: auto;
  height: 100px;
  width: 80%;
  border: 1px solid #ccc;
}
.table-container table {
  width: 100%;
  border-collapse: collapse;
}
.table-container table > thead {
  background-color: #eee;
}
.table-container table > thead th {
  border-bottom: 2px solid #ccc !important;
}
.table-container table > tbody {
  background-color: white;
}
.table-container table tr > * {
  text-align: left;
  border-bottom: 1px solid #ccc;
}
.table-container table > tbody > tr:last-child > * {
  border-bottom: none !important;
}

jQueryのプラグインは適当に作成。汎用性はなし。

/******************************************************************************
  thead固定テーブル
  require following... 
     <div class="table-wrap" style="position: relative;">
       <table>
         <thead>...</thead>
         <tbody>...</tbody>
       </table>
     </div>
     <script type="text/javascript">
        (function($) {
           $('.table-wrap').headFixed();
        })(jQuery);
     </script>

 要点としては、table要素を複製して、複製したテーブルはtheadだけを、元のテーブルはtbodyのみを表示するようにする。
 その際 displayプロパティにすると元table,複製tableの各々カラム幅が揃わなくなるので、
 display: none ではなく、visibility:hiddenを適用する。
******************************************************************************/
(function($) {
  $.fn.headFixed = function()
  {
    return this.each(function() {
      var $table = $(this).find('table:first');

      var $wrapElement = 
        $('<div>')
        .css({'position': 'absolute','top': 0,'left':0,'width': $table.outerWidth(),'overflow':'hidden'})
        .height($table.find('thead').outerHeight());

      var $wrap = 
        $table
          .clone()
          .insertAfter($table)
          .wrap($wrapElement)
          .css('width','100%')
          .find('tbody')
          .css({'visiblity': 'hidden'})
          .end()
          .parent();

      $table
        .find('thead')
        .css({'z-index':10,'visibility': 'hidden'});

      $(this).on('scroll',function() {
        $wrap.css({'top':$(this).scrollTop()});
      });

      // ウィンドウのリサイズに追随
      $(window).resize(function() {
        $wrap.width($table.outerWidth());
      });
    });
  };
})(jQuery);

で、最近 display: sticky というのがあって便利だよ、というのを今更ながら知りまして、chrome,firefox用の画面にはこれを使うようしました。
MDNサイトで見ると「粘着位置指定要素 (stickily positioned element)」と言うそうで、要はイケてるサイトでよく見る、
下方スクロールしたら勝手にメニューなんかがページ上部に張り付く(固定される)挙動を簡単に実現できる CSSプロパティみたいです。

stickily positioned elementとは、 position の計算値が sticky である要素です。これは包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱われます。

これ読んでも、正直よく分かりません💦 すみません。

で、これをテーブルヘッダに利用しよう、というわけです。
ググると結構記事になっていて、要するに thead要素内の th要素に displya:sticky を指定して固定するようです。

実際のデモ

theadをstickyにするのが真っ当な感じですが、現在のブラウザのバージョンでは thead を固定することはできないみたい(無視される)。
それと、th要素をstickyで固定しても、th要素に適用されている border は固定されないみたいな挙動になる感じです(若干ずれてしまう?)

/* 実際のCSS */
.table-container {
  position: relative;
  overflow: auto;
  height: 100px;
  width: 80%;
  border: 1px solid #ccc;
}
.table-container table {
  width: 100%;
  border-collapse: collapse;
}
.table-container table > thead {
  background-color: #eee;
}
.table-container table > thead th {
  border-bottom: 2px solid #ccc !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  z-index: 2 !important;
  top:0 !important;
}
.table-container table > tbody {
  background-color: white;
}
.table-container table tr > * {
  text-align: left;
  border-bottom: 1px solid #ccc;
}
.table-container table > tbody > tr:last-child > * {
  border-bottom: none !important;
}

HTMLはほとんど同じ 。最後のscript要素が要らないだけ。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>カラム1</th>
        <th>カラム2</th>
        <th>カラム3</th>
        <th>カラム4</th>
        <th>カラム5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>カラムデータ1</td>
        <td>カラムデータ2</td>
        <td>カラムデータ3</td>
        <td>カラムデータ4</td>
        <td>カラムデータ5</td>
      </tr>
       ...
       ...
    </tbody>
  </table>
</div>

ただし、Internet Explorerには全バージョンを通して非対応なので(display:stickyは単に無視される)、
かっこ悪いけどブラウザで判別し(navigator.userAgent)、IEの時のみjQueryプラグインを使用するように分岐するようにした。

たとえば、ウェブシステムで行をjavascriptで動的に増やしたり減らしたりするときは、行を追加したり削除したりする関数を一個作っておき、もしブラウザがIEなら 複製テーブル、複製元テーブル両方に行を追加したり、削除したり。なんにしてもメンドクサイが。
IEユーザーがいなくなれば、これも必要なくなるかなと。

前途多難な、ぼっちWEBシス担のグッチ―

他所の部署で、取引先のシステム制作会社と共同で開発されていた、とある(半分w)ウェブアプリのリプレースを突然?指名され担当になる。。。よその部署なのに・・・。

とはいえ、昔僕が健康面で悪い時に、見放さずお世話になった経緯もあって、むげに断るのもどうかとも思い、引き受けたはいいけど・・・取引先寄りの前担当者からは「こんなやつに!」と猛反対されつつも、昔お世話になったんだからと・・・手を差し伸べて助けよう、と首を突っ込んだけど、まさかの、その差し伸べた手を振り払われて当惑している、ぼっちウェブ担です。

共同で開発した、というと聞こえはいいが、そう安くは無い金額の開発資金をこちらの会社が出し、両者で勉強しながら(大笑)、開発してもらう、とかいう、滅茶苦茶ぶり。
OSがWindows10になり、当然ながら開発当初主流だったInternet Exporerは、マイクロソフト自身「もう使うな!」との詔(みことのり)を発せられたInternet Explorer以外のモダンブラウザに対応してくれ! と、そのシステム会社に依頼するも「できない、むずかしい」と言われ、会社の上層部からは「追加のお金は出せない」と宣告され、にっちもさっちもいかなくなって、おいらにお鉢が回ってきた。まぁ、要するに信用がないんだな(^^;;;

その共同開発wしたという、システムをみた感じ、「これでよく、ウェブシステム」と言ってたな!という有り様。なんと、フル機能を使うには、開発した専用ウェブブラウザが必要!、さらに、エクセルのインストールも必須! という、ありえないものだった。

ローカルディスクにアクセスしないといけない、プリント機能もなぜかエクセルが必要、Accessで組んだ業務アプリをウェブシステムに置き換えるとき、真っ先に切らないといけない仕様を、全部盛り込もうとするから、専用ウェブブラウザとかいう、謎のアプリの配布が必要になってくる。まだ中身を見てないから何ともいえないけど(出し渋ってるので)、おそらくIEのウェブブラウザコントロールを貼り付けて、必要な機能を付けたしたアプリケーションだと思うが・・・。

この際だから、好きなようにやらせてもらおうと、いろいろ実験(笑)をしながら組んでいこう。
考えている構成は・・・

Windows Server 2019 + SQLServer + Hyper-V ( CentOS7 / httpd)

ホントは全部 CentOS7 + MySQL という構成が僕も扱いやすいのですが・・・社内的に Windows しか認めてくれない雰囲気。
時間がもっとあれば、C# とかで組みたいけど、半年ぐらいしか時間がないので・・・手っ取り早く言語はPHP。

いや待てよ、PHPで組むんだったら、

Windows Server 2019 + SQLServer + WSL (UBUNTU / Apache2)

でもいいんじゃないか? HyperVと仮想マシンで組むより、オーバーヘッドが少ないかもしれない。WSLはまだ開発途上でこの先マイクロソフトがどのような展開をするのか不明な点もあるし。Windows10のようなクライアントOSだとWSLはウェブ開発ツールの一つと捉えることができるが、 Windows Serverでの WSLの立ち位置がイマイチどのように考えているのかわからない。

Windows向けの PHP と IIS いう構成も考えてみたけど、なんせ過去の経験から IIS + PHP はどうにもこうにも扱いづらい。特に IIS の なんちゃらプールIDとかなんちゃらプロセスとか・・・アクティブドメインがなんちゃらとか、Windows認証がなんちゃらとか、全く理解不能の用語連発で嫌になる。

それだったら、HyperVで仮想マシン作ってそこにシステムを作りこめば そのVHDをピーコするだけで、実稼働できる、という手軽さを選んだ。
すこし前から、HyperVで内部用の仮想スイッチでネットワーク組んでも、NAPTで仮想スイッチを組めば内部のネットワークにぶら下がっているゲストOSにポート変換で外側からアクセスできる。だから 外側のIPアドレスも消費しないし、完全に環境を封じ込める。

今の懸念材料としては、 この構成で実運用に耐えるのかな・・・と。。。Azure運用だと金さえ積めばいくらでも性能アップできるんだが・・・オンプレミスでやるのは経験がないので正直怖い面もある。

Inconsolata + BIZ UDゴシック

新しい iPad Pro 発表されましたな。
1TBのやつが欲しいけど、さすがに18万は高いなー、

閑話休題

Windows10 1809(October 2018 Update) から BIZ UDフォントが標準搭載されたので、gVimで試す。
ASCII文字(guifont)を Inconsolata、日本語(guifontwide)をBIZ UDゴシックに設定しましたが、なかなかイイ感じです。


(全景)

エディタによって BIZ UDフォントを指定すると、半角英数の文字幅が強制的に2倍になってしまって悲しい感じになるんですが・・・これどーすればいいの???(^^;;;

ごーごごー

Surface Go、社内販で買いました。Officeなし版を買うには会社で買うしかない、ということで仕事で使うという大義名分で(実際に仕事でも使うが)注文してもらいました(^^;

今はほとんど見向きもされないSurface3のリプレースです。
会社では 常時 OneNoteを立ち上げて、完全にメモ帳用途で使ってるので、Surface Goのサイズ感と絶妙のCPUチョイスがハマって、Surface3を捨て速攻で買い替えです(^▽^)/

最近知ったんですが、アメリカの Amazon でもカートに入れると日本円で表示される仕様になってるっぽい(設定する必要はあるが)。日本のAmazonアカウントのまま、アメリカのAmazonでカートに入れた商品の決済画面に進むと配送先(Delivered to)が自動的に日本のamazonアカウントで登録されている住所になり、「クレジットカード番号を入れろ!」 画面がフツーに出るやん・・・。
日本では英語配列のタイプカバーはブラックのみなので・・・アメリカのamazonで買おうかなー、と思ったけど・・・アメリカからの送料とか配送期間とか考えると高くなるのでやめた・・・・

ってなことはさておき・・・
かねてからメモってた Surface Go買ったらやることリストを遂行

  1. WSL有効に & Ubuntu インストール(サーバー関係、ツール/ビルド関係
  2. 仕事環境インストール(gVim/chrome/FireFox/Visual Studio/Adobe Illustrator/Photoshop/ネットワークツール)
  3. そのままだと英語配列のキーボードが日本語配列として認識されるので設定変更
  4. キーボードドライバを101ドライバからAXキーボードドライバに変更(IMEトグルを右ALTキーに)
  5. タイピング環境構築 xkeymacsインストール、CAPS⇔CTRL入替)
  6. タッチパッドの設定で「シングクリックするには1本の指でタップします」のチェックを外す
    タイピング時の親指での誤タップを抑止

んで、僕的にいいところ、気に入らないところを列挙。

Surface Go のいいところ。

(1) まず何より小さい!
久しく使ってなかったカメラバック、Retrospective5 に入れてみる・・・

入るやん!!! これから通勤用のバッグにしよ。。。

(2) Surface Pro 譲りのつくりがイイ!
Windows Hello 対応のフロントカメラと、無段階で角度を調整できるキックスタンド、Surface ProのPenが使える。
Surface Penの書き心地がかなり良くなってることに驚いた。もうちょっと引っかかり(抵抗)があっても良さそうだけど、ツルツルで滑って書きにくい・・・ということはない。イイ感じ。

(3) 充電ポートが二つ!
付属している充電コードとアダプタは一体化されていて Surface Connectポートにつないで充電する仕様。しかもこのアダプタが微妙にデカいので・・・こんなの持って歩けないよ・・・ってな人は USB Type-Cのコードさえあれば USBポートから充電できてしまう!(問題点あり後述)

(4) Atomプロセッサじゃない!(^^;
Core i3 には及ばないけど、まずまずの性能。ブラウザとかオフィスソフトはフツーに使えます。
というか、この機種で性能を求めるのはアホの所業ですが、正直 Atom プロセッサは遅すぎた。。。
普通に動画もサクサクみれますし・・・でもクリエイティブ系のソフトは動けばいいや、的な感じ。
Visual Studio 入れたいけど・・・普通に使えるのかな??? Autumn Updateと同時に今度入れてみよう。

(5) ストレージの性能が良すぎ?
8GB/128GB版のSurface Goのストレージは SSD。特にシーケンシャル・リードが1GB/s 越えてます・・・。ライトはフツーなんですが・・・リード性能が飛びぬけて良いみたい。

(4)と(5)からすると、CPU(Pentium Gold)がそこそこの性能でも、SSDとCPU内臓のGPUのパフォーマンスの高さでカバーしてるから、そこそこ使えている感じがする、というのが実情じゃないかと・・・

でもPhotoshopとかのAdobe ソフトも起動の速さはそこそこ普通。起動にもっと時間がかかると思ってたけどいい意味で裏切られた感じ ^^

で・・・今度は気に入らないところ

(6) タイプAの普通のUSBポートが欲しかったな・・・。
Appleとかだとレガシーになりそうなものはバッサバッサと切っちゃうんだけど、マイクロソフトはそういうのやめて欲しいな・・・というのが正直な感想。死守して欲しかった。。。
せめて、USB Type-AとType-Cの変換アダプタ一個ぐらい標準付属品にして欲しかったな。

(7)タイプカバーの英語配列を日本でもフツーに売れよ!
Surface Proでもそうなんですが、日本ではタイプカバーは基本的にJIS配列ものしか商流にのらないです。英語配列のものがありますが、カラーバリエーションがブラック一つのみ。日本で英語配列が売れないの分かりますが・・・せめてマクロソフトの直販サイトでは全てのカラーバリエーションで英語配列をラインナップにそろえて欲しい。

(8)シャットダウンするとUSB Type-C経由の充電はできない!
起動中もしくはスリープ状態でないとUSB充電はできないみたい。そもそもSurfaceはシャットダウンするな! ってことなんでしょうね・・・。

(9) タイプカバーのキーピッチがやっぱり狭い・・・
まぁ、これはサイズ的にはしょうがない。僕の癖なのか、キーピッチが狭いと T と Yの打ち間違えが頻発・・・なかなか指が補正できない・・・これは慣れていくしかないな・・・。

2~3日使ってみてこんな感じかな・・・。とりあえず、USBケーブルをほぼ全部買いなおし or 変換コネクタを買いにいく。Type-Cのハブを買った方が安くつく感じだな・・・。

ぜんぜん簡単じゃないスマホ

母親が去年から使いだしたスマホ。一番簡単なやつ!と言って機種変したけど、これがなかなか簡単じゃなかった。

電話とSMSが使えれば事足りる、と母親はなかなかスマホにせず、とうとうガラケーが壊れて仕方なくスマホにしたという。
で、わからないことがあると、僕に聞いてくるのだが、正直アンドロイドスマホの操作自体ほとんど分からんし、プレーンなアンドロイドではなく「ラクに」使えるようにいろいろカスタマイズが入っているので、設定自体がほとんど隠されていて全然思うように使えない!!!!

・たまに光るピカピカした点滅を消したい! (母親は点滅している間ずっと課金されていると思い込んでる!)
・メールを作成しようとするとデフォルトでキャリアメールで送ろうとするのを止めたい!

特にアドレス帳からメール作成しようとすると、キャリアメールの作成画面になる。SMSメールにするには一回一回「メニュー → SMSに変換」というクソみたいな手間がかかってしまう。メールとSMSの違いが理解できない母親にとっては ???? だろう。しかも、来月から、SMSを発展させた+メッセージサービスが始まるしね・・・・。

でも、そうじゃないんだ! 母親が望んでいるのは、SMS送信するためのメール作成画面をデフォルトにしたいんだ!!! だけど、デフォルトでSMS作成画面にする設定がない!!!しかも、メールアドレスを登録していない宛先に対してもキャリアメール作成画面がデフォルトで開いてくる!!!
こんなUIを作ったやつを1万時間問い詰めたい。たぶん安っすい開発費で作られてんだろうな、というのが容易に想像できる。

もう触ってて地面に叩きつけようかと思ってしまうほど、分からない。何が簡単なスマホじゃ!!!

と思ったが、要は「簡単なスマホ」っていうのは、「極力デフォルト設定でしか使えないスマホ」ということだという結論に至った。