化学構造ビューア

全体の流れ

1. 入力文字列を正規表現で判定する（日本語 → ja、空白を含む → 名前、数字のみ → CID、数字-数字-数字 → CAS、記号 [ ] ( ) = # @ を含む → SMILES、元素記号と数字だけ → 分子式、それ以外 → 名前）。判定結果は入力欄の下に「自動判定: …」と出す。
2. 種別ごとに PubChem PUG REST で CID 候補（最大 8 件）を引く。名前・CAS は compound/name、SMILES は compound/smiles、分子式は compound/fastformula。日本語名は内蔵辞書 JA_NAMES（約 90 語、リグニン・糖の熱分解生成物と基本的な芳香族）→ Wikidata（P662 → P231 → P233 → 英語ラベル）→ MyMemory 機械翻訳の順に英語名や CID へ変換する。候補が 2 件以上ならボタン一覧を出し、先頭を自動で読み込む。
3. 選ばれた CID について、property（Title, IUPACName, SMILES, ConnectivitySMILES, MolecularFormula, MolecularWeight）→ synonyms → record/SDF?record_type=3d の順に直列で取得する。CAS は synonyms から正規表現で抽出、3D が無ければ 2D SDF で代替する。503 / 429 は 0.6 / 1.2 / 2.4 秒待って最大 3 回再試行し、各 fetch には 18 秒のタイムアウトを付ける。
4. 2D 構造式は RDKit.js で 3D と同じ SDF から描く（水素を除いて 2D 座標を生成し SVG 化）。RDKit が使えない・解釈できないときは PubChem の PNG（300×300）にフォールバックする。SDF から描いたときは重原子の 2D 座標を保持し、3D との向き合わせに使う。
5. 3Dmol.js で SDF を読み込んで表示形式・H 表示を適用し、Horn の四元数法で「3D の重原子座標を 2D 座標（z=0）に最も近づける回転」を求めて初期視点にする。この視点をリセット先として保存する。
6. マウス操作は 3Dmol の既定を使わず、viewer 枠の mousedown / wheel を capture で受けて自前で処理する（左 = 自由回転 0.5°/px、Ctrl = Y 軸、Shift = X 軸、Ctrl+Shift = Z 軸、右 = 移動、Ctrl+ホイール = 拡縮）。回転軸はすべて画面基準（vx / vy / vz）で、X/Y/Z ボタンと軸ガイド SVG も同じ軸を指す。
7. 視点が変わるたびに、重原子の画面投影と 2D 座標を 2 次元の最小二乗（複素相関）で重ね、2D 構造式を CSS rotate（裏面なら scaleX(-1) も）で追従させる。初期視点からの傾き角を四元数から計算し、60〜120° なら 2D を薄くして警告を出す。
8. 「共役系を表示」は orbital.js が 3Dmol のモデルから結合次数を読み、二重結合を持つ原子と隣接する孤立電子対の原子を π 系として選ぶ。選ばれた原子の結合を #e8489a で塗り、分子平面の法線方向（隣接原子との外積）に半透明の球を上下 1 対ずつ置く。
9. 比較タブでは左右に独立した 3Dmol ビューアを持ち、単体表示の化合物を左枠に引き継ぐ。タブ切替時に非表示中で寸法を失ったビューアを resize して描き直す。参考情報タブは利用サービスの一覧で、表示中の化合物の PubChem リンクを出す。

使った技術

HTML / CSS / JavaScript（静的 6 ファイル・ビルド不要）

index.html / style.css / search.js（入力判定と API 呼び出し）/ viewer3d.js（3D 描画・マウス操作・向き合わせ）/ orbital.js（共役 π 系判定と Hückel 計算）/ app.js（状態・DOM 配線・タブ）。ES module は使わず file:// 直開きでも動く。

PubChem PUG REST / Autocomplete

CID 解決（name / smiles / fastformula）、物性・synonyms・3D SDF の取得、2D PNG のフォールバック、英語名の入力補完（300 ms デバウンス、3 文字以上）。

Wikidata MediaWiki API

日本語名の項目検索（wbsearchentities）と、P662 / P231 / P233 / 英語ラベルの取得（wbgetentities）。

MyMemory 翻訳 API

辞書にも Wikidata にも無い日本語名を英語に機械翻訳する最後の手段（候補は最大 3 件）。

RDKit.js 2025.3.4（WebAssembly）

SDF / SMILES から 2D 構造式 SVG を生成し、2D 座標を取り出す。

3Dmol.js 2.5.5

3D 分子モデルの WebGL 描画、スタイル適用、画面軸まわりの回転、ローブ球の描画。

Cloudflare Workers（静的配信）

https://chem.daijirotaira.com で公開。noindex を付与し、docs / md / .env などの作業ファイルは配信対象から除外。

実装の工夫

• 入力種別の判定は上から順に最初に一致した規則で決める。空白を含む入力は常に名前扱いにしているのは、"(E)-ferulic acid" のような括弧付き名が SMILES と誤判定されたため。
• PubChem の 5 req/s を守るため、検索ボタンを取得中は無効化し、補完は 300 ms のデバウンスと直前リクエストの abort を行い、検索開始時には補完リクエストを中断する。検索と CID 読み込みには世代トークンを持たせ、古い応答が新しい表示を上書きしないようにしている。
• 2D 構造式を SMILES ではなく 3D と同じ SDF から描くことで、RDKit の 2D 座標と PubChem の 3D 座標の原子の並びが一致し、Horn の四元数法で初期視点を 2D に揃えられる（四元数の成分順は 3Dmol の view 配列 [.., x, y, z, w] に合わせて実測で確認）。
• 2D 追従の傾き警告は、重ね合わせの残差ではなく初期視点からの傾き角で判定する。残差だと面外にメチル基を持つ配座（guaiacol）が正面でも大きく、常時警告になったため。
• 3Dmol 2.5.5 の既定マウス（左 = 回転・Ctrl+左 = 移動・Shift+左 = 拡縮・右 = 拡縮）はこのツールの割り当てと衝突するので、frame 要素の capture リスナーで mousedown / wheel を先に受けて stopImmediatePropagation し、自前で rotate / setView / zoom を呼ぶ。中ドラッグとタッチは 3Dmol の既定のまま。
• 右ドラッグの移動は viewer.translate() ではなく screenOffsetToModel で画面オフセットをモデル座標に変換して view の位置に足す。translate() は getView() に含まれずリセットで戻らないため。
• 共役系の強調は setStyle で π 原子だけに色付きの stick スタイルを重ねる（結合は両端の原子の色で半分ずつ塗られる）。表示形式や H 表示を変えたあとも同じ関数で塗り直して色を保つ。ローブは addSphere の shape なので、モデルを clear したときは呼び出し側で再追加する。
• 軸ガイドは 3D シーン内のオブジェクトではなく、viewer 枠に重ねた画面固定の SVG。表示切替は SVG 要素に hidden の IDL プロパティが無いため toggleAttribute で行う。

用語

PubChem CID

米国 NIH / NLM が公開する化合物データベース PubChem の化合物 ID（整数）。このツールはどの入力もまず CID に解決し、その CID で物性・別名・3D 座標を取得する。URL に ?cid=1183 のように付けると起動時にその化合物を読み込む。

PUG REST

PubChem の REST API。無認証・CORS 可だが 1 秒あたり 5 リクエストまで。名前は compound/name、SMILES は compound/smiles、分子式は compound/fastformula で CID を引き、物性は property、CAS は synonyms、3D 座標は record/SDF?record_type=3d から取る。

SMILES

分子構造を 1 行の文字列で表す記法（例: バニリンは COC1=C(C=CC(=C1)C=O)O）。入力にも使え、取得した SMILES は情報カードに表示される。PubChem の property 名は SMILES（無ければ ConnectivitySMILES）。

CAS 登録番号

化合物ごとに付く「数字-数字-数字」形式の番号（例: バニリンは 121-33-5）。PubChem には専用エンドポイントが無いので、synonym として登録された番号を name 経由で解決し、表示用の CAS は synonyms から正規表現 ^\d{2,7}-\d{2}-\d$ で拾う。

SDF（3D 座標）

各原子の座標と結合（結合次数）を持つ構造ファイル形式。PubChem の record_type=3d は計算で作られた配座で、3Dmol.js の描画と共役系の判定はこれを入力にする。3D が無い化合物は record_type=2d で代替する。

共役 π 系

二重結合や芳香環の p 軌道が隣り合ってつながり、π 電子が非局在化している範囲。このツールでは結合次数から「二重結合を持つ C / N / O / S」を選び、それに単結合で隣接して孤立電子対を出せる O / N / S（OH・OMe・NH₂ など）を加える単純な規則で判定する。立体的なねじれによる共役の切れは考慮しない。

単純 Hückel 法

共役 π 系だけを対象に、隣接原子間の相互作用（β）と原子ごとの補正（Van-Catledge のヘテロ原子パラメータ）で π 分子軌道を求める近似法。orbital.js に Jacobi 法による固有値計算として実装されているが、画面に出しているのは π 原子の選定結果（原子数・π 電子数と結合の色分け）だけで、軌道のエネルギーや HOMO / LUMO は表示していない。

Horn の四元数法

2 つの点群を最もよく重ねる回転を、4×4 対称行列の最大固有ベクトル（四元数）として求める方法。このツールでは RDKit が作った 2D 座標と PubChem の 3D 座標（重原子のみ・同じ並び）を重ねる回転を求め、それを 3Dmol の初期視点にすることで、読み込み直後から 3D が 2D と同じ向きに見える。

Wikidata P662 / P231 / P233

Wikidata の項目が持つ外部 ID プロパティ。P662 = PubChem CID、P231 = CAS 登録番号、P233 = 正準 SMILES。日本語名を Wikidata の日本語ラベル検索（wbsearchentities）で項目にし、P662 → P231 → P233 → 英語ラベルの順に PubChem へ橋渡しする。

RDKit.js

化学情報処理ライブラリ RDKit の WebAssembly 版。ここでは SDF（または SMILES）から 2D 構造式の SVG を描き、その 2D 座標を 3D との向き合わせに使う。3D 座標の生成はできないので 3D は PubChem のものだけを使う。

3Dmol.js

WebGL で分子を描く JavaScript ライブラリ。SDF の読み込み、Ball & Stick などのスタイル、回転（画面軸 vx/vy/vz）、ローブ用の球（addSphere）に使う。既定のマウス操作は使わず、このツールが capture 段階でイベントを横取りして自前で処理している。