Daijiro Taira

質量分析 (GC-MS)ブラウザで動く

GCMS QGDビューア

.qgd ファイルをブラウザにドロップするだけで、島津 GC-MS の生データ（TIC クロマトグラムと各スキャンのマススペクトル）を表示・分析できるツールです。クロマトグラム上でドラッグするとピーク面積を台形則で積分し、重なるピークは垂線分割で分けられます。

ツールを開く
GCMS QGDビューア の操作の様子
.qgd を投入 → TIC クロマトグラム表示 → クリックでマススペクトル → ピーク積分 → ベースライン差し引き → クロマト・スペクトルとも拡大表示まで、一連の操作を自動録画した実画面です。

スペクトルはクリックひとつで選択でき、別スキャンをベースラインとして差し引くことができます。クロマトグラムもマススペクトルも、それぞれホイールでズーム・ドラッグでパンでき、詳細を拡大表示できます。データはすべてブラウザ内で処理され、外部送信はゼロです。

使い方

  1. ファイルを投入してクロマトを確認

    ファイルを投入してクロマトを確認

    .qgd ファイルをドロップ（またはファイル選択）すると TIC クロマトグラムが青線で表示されます。ステータスバーにスキャン数・保持時間範囲・TIC 最大値が出ます。塗りつぶしは積分時のみ表示されます。

  2. クロマトをクリック → マススペクトル表示

    クロマトをクリック → マススペクトル表示

    クロマト上の任意の点をクリックすると、その保持時間のスキャンをデコードしてマススペクトルを表示します。m/z 軸は 0〜500 で表示されます。スキャン番号・保持時間・ベース m/z が情報バーに出ます。

  3. ピーク積分モードでドラッグ

    ピーク積分モードでドラッグ

    「ピーク積分（ドラッグ）」ボタンに切り替えてピーク上をドラッグすると、TIC の台形則積分（Δt は秒）で面積を計算して桁区切り整数のラベルを付けます。Ctrl+Z でアンドゥできます。積分した全ピークの面積テーブルも下部に表示されます。

  4. ベースライン差し引き

    ベースライン差し引き

    「ベースラインを差し引く（クリック）」モードでクロマト上の安定した区間（溶媒ブランク等）をクリックすると、その1スキャンをベースラインとして現在選択中のスペクトルから m/z ごとに差し引き、負値は 0 にクリップします。差し引き済みスペクトルは紫で表示されます。

  5. クロマトグラムをズームして RT 範囲を拡大

    クロマトグラムをズームして RT 範囲を拡大

    「表示/ホバー」モードでクロマトキャンバス上にホイールを回すと保持時間軸をズームできます。ドラッグで左右にパンして任意の RT 範囲を表示でき、「ズームリセット」ボタンで全体（5〜42 min）に戻せます。小ピークの時間分離や重なりを詳しく確認できます。

  6. マススペクトルをズームして m/z 細部を確認

    マススペクトルをズームして m/z 細部を確認

    マススペクトルキャンバス上でホイールを回すと m/z 軸をズームできます。ドラッグでパン、ダブルクリックまたは「ズームリセット」ボタンで全体表示（m/z 0〜500）に戻せます。複数のピークが密集する低 m/z 域を拡大して詳細を確認できます。

  7. CSV エクスポートと積分テーブル

    CSV エクスポートと積分テーブル

    「クロマト CSV」では保持時間（Ret.Time）・絶対強度（Absolute Intensity = TIC）・相対強度（Relative Intensity）の 3 列（[MS Chromatogram] 互換形式）を書き出せます。「スペクトル CSV」では現在のスキャンの m/z・強度を、「積分ピーク CSV」では積分した全ピークの時間・面積を書き出せます。積分テーブルには自前計算の面積のみが表示されます。

設定項目

.qgd ファイル（必須）
島津 GCMSsolution が生成する生データファイル（OLE2 複合ファイル形式）。保持時間・TIC・スペクトルデータが収録されています。他社の .qgd とは非互換です。
m/z 表示モード
「公称質量（整数）」は記録値 ÷ 20 を四捨五入した整数です。ユニット分解能 GC-MS では通常こちらで問題ありません。「生 m/z」は記録値 ÷ 20 の 0.05 刻みで、質量較正オフセットが含まれます。スペクトル下部のセレクトボックスで切り替えられます。
ベースライン（差し引く1スキャン）
「ベースラインを差し引く」モードでクリックした保持時間の1スキャンを背景として使います。溶媒ブランクや安定したノイズ区間を選ぶと、目的化合物のスペクトルをより明確に見られます。「差し引きを解除」ボタンで元に戻せます。
クロマト・スペクトルのズーム
クロマトグラムは「表示/ホバー」モードでキャンバス上のホイールで RT 軸をズーム・ドラッグでパン・「ズームリセット」ボタンで全体（5〜42 min）に戻せます。マススペクトルはキャンバス上のホイールで m/z 軸をズーム・ドラッグでパン・ダブルクリックまたは「ズームリセット」ボタンで全体（m/z 0〜500）に戻せます。
仕組みと使った技術

全体の流れ

  1. .qgd ファイルを File API で読み込み、cfb（SheetJS の OLE2 パーサ）で複合ファイルを解析して「GCMS Raw Data」以下のエントリを検索する。
  2. 「Retention Time」ストリームから u32（ミリ秒）を読んで保持時間配列を、「TIC Data」ストリームから u64 を読んで TIC 配列を構築する。「Spectrum Index」ストリームで各スキャンのスペクトルデータオフセットを把握する。
  3. 「MS Raw Data」ストリームを DataView で読み込み、mode1/2/3 のレコード形式に従い m/z（記録値 ÷ 20）と強度のペアをデコードして各スキャンのスペクトルとして保持する。
  4. Canvas 2D API でクロマトグラム（青線）とマススペクトルをそれぞれ描画する。クロマトはマウスホバーで保持時間と TIC を、クリックで対象スキャンのスペクトルをリアルタイム描画する。
  5. クロマトグラムはホイールイベントで vXMin/vXMax（0〜1 の正規化座標）を更新して RT 軸をズーム・ドラッグでパン・#btn-zoom-reset ボタンで全体表示に戻す。マススペクトルはホイールイベントで m/z 範囲を更新してズーム・ドラッグでパン・#btn-ms-zoom-reset ボタンで m/z 0〜500 全体表示に戻す。
  6. 積分（台形則）・垂線分割・ベースライン差し引き・m/z 表示切替・Ctrl+Z アンドゥはすべてブラウザ内で完結し、外部へのデータ送信はゼロ。面積は常に桁区切り整数で表示する。各種 CSV はブラウザの Blob URL でダウンロードする。

使った技術

HTML / CSS / JavaScript（単一ファイル・ビルド不要）
UI 全体と状態管理。フレームワーク・バンドラー不使用。ビルド工程なしの単一 index.html として公開。
DataView（Web 標準 API）
.qgd バイナリの u32/u64/u16 読み出しに使用。エンディアン指定で OLE2 内のレコードを順次デコードする。
cfb（SheetJS OLE2 パーサ）
OLE2 複合ファイルの構造解析。ストリーム名からエントリを検索する。ライブラリコードを index.html にインライン埋め込みして外部通信をゼロにする。
Canvas 2D API（Web 標準 API）
TIC クロマトグラムとマススペクトルの描画。マウスイベントと組み合わせてインタラクティブな選択・積分・クロマト/スペクトルのズームとパンを実現する。

実装の工夫

  • .qgd の OLE2 構造を cfb でパースしたのち、「GCMS Raw Data / MS Raw Data」ストリームを DataView で読む。保持時間は u32（ms）、TIC は u64、スペクトルは mode ごとに可変長レコード（m/z 記録値は整数で、÷20 して実際の m/z に換算）。
  • スペクトルのデコードは遅延評価（クリック時に初めてそのスキャンだけをデコード）することで初期描画を高速化している。スキャン数 7,400 でも読み込みは数秒以内。
  • ピーク積分は台形則（各スキャン間隔 Δt 秒での総和）。垂線分割はクリック位置の保持時間を分割点としてセグメントを2分割し、両セグメントを個別に再積分する。Ctrl+Z アンドゥは積分状態スタックで管理。面積値は常に桁区切り整数（toLocaleString）で表示する。
  • ベースライン差し引きは選択スキャンと背景スキャンの m/z 配列を照合し（公称質量または生 m/z どちらのモードでも対応）、強度を減算して負値を 0 にクリップ。差し引き済みスペクトルを紫で描画する。
  • クロマトグラムのズームは vXMin/vXMax（0〜1）で RT 軸の表示範囲を管理し、ホイールイベントのカーソル位置を中心に拡縮する。マススペクトルのズームも同様に m/z 軸の表示範囲を管理し、それぞれ独立したリセットボタンで全体表示に戻す。

用語

OLE2（Compound Document / CFB）
Microsoft が仕様化した複合ファイル形式（Compound File Binary）。ひとつのファイルの中にディレクトリとストリーム（データ）を階層的に格納します。.qgd はこの形式を使っており、cfb（SheetJS の OLE2 パーサ）でブラウザ内からデコードします。
TIC（Total Ion Chromatogram）
総イオンクロマトグラム。各スキャンで検出されたすべての m/z の強度を合計した値を保持時間に沿ってプロットしたものです。GC-MS で最初に確認する基本クロマトグラムです。
m/z（質量電荷比）
イオンの質量をその電荷数で割った値。質量分析の横軸です。このツールでは .qgd に記録された整数値を 20 で割った値（0.05 刻み）が生値で、四捨五入した整数が公称質量です。
公称質量
m/z を四捨五入した整数値。ユニット分解能 GC-MS の識別に十分な精度です。このツールの既定表示です。
台形則積分
隣接する 2 スキャン間を台形として面積を近似する数値積分法。このツールは積分区間内の全スキャンの TIC を台形則で積分します。Δt（秒）の単位で面積が得られます。
垂線分割（Perpendicular Drop）
重なる 2 つのピークを分割する手法。ピークの谷の位置に垂線を下ろし、その点で積分区間を左右に分けます。このツールでは「垂線分割（クリック）」モードで既存の積分区間内をクリックして追加します。
ベースライン差し引き
選択した1スキャンを背景（ベースライン）として、現在選択中のスペクトルから m/z ごとに強度を差し引く処理です。負になった値は 0 にクリップします。溶媒ブランクや背景ノイズを除いた成分スペクトルを見るのに使います。
cfb / SheetJS
JavaScript の OLE2 パーサライブラリ（cfb は SheetJS が公開）。このツールではライブラリのコードを index.html にインライン埋め込みして外部 CDN への通信を排除しています。