【調査】ChemDrawから化学構造をJSへコピペしたい

要旨

• ChemDrawから化学構造情報をコピペでJS側に渡すことができるかデモ版をインストールして調査した
• ChemDrawエディタからCtrl+Cでは確かに貼り付けられなさそうだったが、各種テキスト形式（e.g. SMILES, MOL, CDXML）でコピペできることを確認した

---

目的

• ChemDrawから化学構造情報をJSへコピペする方法について調査する

調査内容・結果

ChemDrawの14日間トライアルに登録、ダウンロードした
参考：https://www.hulinks.co.jp/software/chem/chembio/download

インストールして起動したところ、↓のサンプルが開いたのでありがたく使わせていただく

ひとまず、ChatGPT様にReactでクリップボードの中身と型を確認するコードを書いていただいた（※内容は本記事末尾参照）

ChemDraw描画欄から範囲選択してCtrl+Cして試したところ、↓のように確かに中身は見えなかった
（中身は詰まっているが、ブラウザornavigator.clipboardが解釈不能の模様）

しかし上のメニューEdit/Copy Asから各種テキスト形式でコピーできることを発見

この機能を試してみたところ、何のひねりもないtext/plain型で、あっさり中身が見えた

▼MOL形式

▼CDXML形式（※ChemDrawの独自形式）

結論

• 特に難しいことはなく、Copy Asで何らかのテキスト形式でコピーしてやるだけでよさそう
• どうしてもそのままCtrl+Cしたいんだ！と言われたら、おとなしくCtrl+D(CDXML)ないしAlt+Ctrl+O(MOL)ないしAlt+Ctrl+O(SMILES)でCopy Asしてください、と返せばよさそう

---

補遺

• ChemDrawはGoogle Scholarにも連携できたので試してみたところ、単にsmilesで検索をかけているだけだった
  • 他の連携先にはReaxys, SciFinder, SYNTHIA, PubChemがあった
    • Reaxys, PubChemはよく名前を聞くので、連携機能を使っているかどうかふんわり聞いてみてもよさそう

• クリップボードの中身と型を確認するコードサンプル

import React, { useState } from "react";

function ClipboardChecker() {
  const [clipboardTypes, setClipboardTypes] = useState<string[][]>([]);
  const [clipboardText, setClipboardText] = useState("");

  const checkClipboard = async () => {
    try {
      const clipboardItems = await navigator.clipboard.read();
      let typesList: string[][] = []; // 2次元配列として初期化

      console.log(clipboardItems);

      // すべてのクリップボードアイテムをチェック
      for (const item of clipboardItems) {
        // アイテム内のデータ形式を確認し、typesListに追加
        typesList.push([...item.types]); // 'readonly'の型を解除するためにスプレッド構文を使用
        console.log(item.types);
      }

      if (typesList.length > 0) {
        setClipboardTypes(typesList); // 正しい型のデータを状態にセット
      } else {
        setClipboardTypes([["No data found"]]);
      }
    } catch (err) {
      console.error("Failed to read clipboard: ", err);
      setClipboardTypes([["Failed to access clipboard"]]);
    }
    try {
      const clipboardItems = await navigator.clipboard.read();
      let textData = "";

      // すべてのクリップボードアイテムをチェック
      for (const item of clipboardItems) {
        // アイテム内のデータタイプを確認
        for (const type of item.types) {
          if (type === "text/plain") {
            // テキストデータの場合、その内容を取得
            const blob = await item.getType(type);
            const text = await blob.text();
            textData += text + "\n"; // 複数のテキストデータがある場合に改行で区切る
          }
        }
      }

      if (textData) {
        setClipboardText(textData);
      } else {
        setClipboardText("No text/plain data found");
      }
    } catch (err) {
      console.error("Failed to read clipboard: ", err);
      setClipboardText("Failed to access clipboard");
    }
    console.log(clipboardText);
  };

  return (
    <div
      style={{
        marginTop: 14,
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      }}
    >
      <button onClick={checkClipboard}>Check Clipboard Types</button>
      {clipboardTypes.length > 0 && (
        <ul>
          {clipboardTypes.map((types, index) => (
            <li key={index}>{types.join(", ")}</li>
          ))}
        </ul>
      )}
      {clipboardText && <p>Clipboard content: {clipboardText}</p>}
    </div>
  );
}

export default ClipboardChecker;

---

Writed by J.H(20代／入社3年目)