MolDrawエディターをサイトに埋め込む

対象となる人

読者に図を見せるだけでなく、説明の横で構造式を実際に試してもらいたいときに埋め込みを使いましょう。

• 化学ブロガー — 反応や構造式の記事の下に、実際に使えるキャンバスを。
• 教育者とLMSの作成者 — 授業、実験マニュアル、演習問題に描画ボックスを。
• ドキュメントの執筆者 — ファイル形式、SMILES、ワークフローの説明の横にエディターを。
• アプリ開発者 — 独自のインターフェースを持つページの中に、すぐ使えるエディターのフレームを。

エディターをホストする必要はありません。フレームはhttps://www.moldraw.com/embedから読み込まれます。あなたのページはあなたのものです。

コピーと貼り付け

「埋め込みコードをコピー」でこのスニペットがクリップボードにコピーされます。ページのHTML、LMSのHTMLブロック、アプリのマークアップに貼り付けてください。

<iframe src="https://www.moldraw.com/embed" title="MolDraw editor" width="100%" height="640" style="border:0;border-radius:12px" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>

フレームが空白の場合、サイトや授業ツールが埋め込みをブロックしている可能性があります。iframeを許可するHTMLブロックや埋め込みブロックを使ってください。それでもプラットフォームがフレームを削除する場合は、代わりにwww.moldraw.comへのリンクを貼りましょう。

プレビュー

これはスニペットが読み込むのと同じプレイヤーです。結合を描くか、テンプレートを選んでみてください。上部のバーも埋め込みの一部です。

フレームのサイズ

幅は100%なので、エディターは配置した列いっぱいに広がります。高さは640ピクセルで、ツールバーと小さな構造式が収まります。キャンバスを大きくしたいときはheightの数値を上げてください。短いページでは480程度に下げ、読者にもっと広いスペースが必要なときは800程度にします。

スマートフォンでは、フレームが高いほどスクロールが増えます。用途に合わせて高さを決めましょう：ちょっとしたスケッチなら低めで十分ですが、反応スキームにはもっと広いスペースが必要です。

MolDrawで開く

プレイヤー内のOpen in MolDrawを押すと、新しいタブでwww.moldraw.comのフル機能エディターが開きます。あなたのページは開いたままです。読者には「ここでスケッチし、全画面で使いたいときはOpen in MolDrawを使ってください」と一度伝えておきましょう。

FAQ

誰のための機能ですか？

自分の文章の横に分子エディターを置きたい化学ブロガー、教育者、LMSの作成者、ドキュメントの執筆者、アプリ開発者向けです。ロゴやスクリーンショットだけが必要な場合には向きません。その場合はMolDrawへのリンクか画像を使いましょう。

読者はアカウントが必要ですか？

いいえ。あなたのサイトで登録しなくても、フレーム内で描画できます。フル機能のエディターを使いたいときはOpen in MolDrawがあります。

貼り付けた後でサイズを変えられますか？

はい。スニペットのheightを編集します。レイアウト上で固定幅が必要でない限り、width="100%"はそのままにしてください。このページのプレビューは、広い画面では高さ640ピクセルで、スマートフォンではそれより低くなります。

フレームが空白です。どうすればいいですか？

フレームが空白になるのは、たいていホスト側がiframeをブロックしているためです。プラットフォームのHTMLブロックや埋め込みブロックに切り替えてください。それでもうまくいかない場合は、通常のリンクで読者をwww.moldraw.comに案内しましょう。