LinuxSpeed Index を Zabbix + Puppeteer で監視する
Speed Index は、WEBページの読み込みパフォーマンスの指標です。この値が小さいほど、ユーザーはWEBページが早く表示されると感じます。WEBページのパフォーマンス指標は、load（ページを構成するすべてのオブジェクトがダウンロードされるまでの時間）がよく使われていますが、「loadが早い = WEBページが早く表示される」ということではありません。そこで今回は、この Speed Ind...
JavaScript
Linux
プログラムヘッドレスChrome + Puppeteer のインストールと使い方メモ（CentOS）
ヘッドレスChrome（Headless Chrome）は、コマンドラインから Google Chrome を操作できる仕組みです。WEBアプリの自動テストや、WEBサイトのパフォーマンス監視などに活用することができそうですね。また、ヘッドレスChrome を操作するための Nodeライブラリ Puppeteer（パペティアー）の正式版が最近(2018年1月)リリースされました。そこで今回は、Ce...
プログラム小数計算の誤差 0.1 + 0.2 が 0.30000000000000004 になる理由
JavaScript で「0.1 + 0.2」のような小数の計算をすると、答えが「0.30000000000000004」になり誤差が発生することがあります。JavaScript でプログラムを組んだことがある方なら、一度は経験したことがあるのではないでしょうか？ そこで今回は、なぜ 0.1 + 0.2 が 0.30000000000000004 になるのか、この誤差の原因と回避する方法をまとめて...
プログラムHTMLテーブルのヘッダを「行列固定」する方法（FixedMidashi）
業務系のシステムでは、扱っているデータが多いため、一覧表が巨大になることがよくあります。WEBベースで開発している場合は、一覧表をHTMLテーブルで作ることが多いかと思いますが、表が巨大だと上下左右にぐりぐりスクロールして閲覧することになり、行や列のヘッダ(見出し)が見えなくなってしまいます。エクセルのウインドウ枠(行列)の固定のように出来ればいいのですが、HTMLではこれが簡単にはできません。そ...
プログラム入力チェックコードを PHP と JavaScript で共通化する方法
フォームに入力された値に行う、入力チェックは（バリデーションチェックとも言うらしいです）大きく分けて、JavaScript で行うクライアント側チェックと、PHP などで行うサーバ側チェックの２つがあります。当然両方で入力チェックを行うことが望ましいのですが、同じようなコードを、クライアント側とサーバ側で書かなければなりません。そこで今回は、入力チェックコードを PHP と JavaScript ...
データ分析dimple.js 積上げ棒グラフの作り方
dimple（ディンプル）は、さまざまなグラフを簡単に作成できる JavaScript ライブラリです。データ可視化ライブラリの定番 D3.js と合わせて使います。D3.js は柔軟性が高く、複雑なデータを可視化することが得意ですが、グラフの描画処理を自分で作成する必要があります。描画処理のコードを書くのは、なかなか大変ですが、この dimple ライブラリを使えば、複雑なグラフを、わずか数行の...