JavaScript

Linux

Speed Index を Zabbix + Puppeteer で監視する

Speed Index は、WEBページの読み込みパフォーマンスの指標です。この値が小さいほど、ユーザーはWEBページが早く表示されると感じます。WEBページのパフォーマンス指標は、load(ページを構成するすべてのオブジェクトがダウンロードされるまでの時間)がよく使われていますが、「loadが早い = WEBページが早く表示される」ということではありません。そこで今回は、この Speed Ind...
プログラム

ヘッドレス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 などで行うサーバ側チェックの2つがあります。当然両方で入力チェックを行うことが望ましいのですが、同じようなコードを、クライアント側とサーバ側で書かなければなりません。そこで今回は、入力チェックコードを PHP と JavaScript ...
データ分析

dimple.js 積上げ棒グラフの作り方

dimple(ディンプル)は、さまざまなグラフを簡単に作成できる JavaScript ライブラリです。データ可視化ライブラリの定番 D3.js と合わせて使います。D3.js は柔軟性が高く、複雑なデータを可視化することが得意ですが、グラフの描画処理を自分で作成する必要があります。描画処理のコードを書くのは、なかなか大変ですが、この dimple ライブラリを使えば、複雑なグラフを、わずか数行の...