pfcc-extras に実装されている view_ngl の 3D描画を HTML ファイルに出力する方法を紹介します。オフラインで操作可能な 3D 表示が可能で、アドインを利用すれば、PowerPoint などの埋め込みオブジェクトにも利用できます。

pfcc_extras の view_ngl を利用します。事前にインストールをお願いします。
PowerPoint の html ファイル埋め込みアドインに関しては弊社ではサポートしません。

Trouble shooting

Click to show javascript error.

手順：

view_ngl で ASE atoms オブジェクトを表示します。

例：

from ase.build import molecule
atoms = molecule('H2O')

from pfcc_extras import view_ngl 
view_ngl(atoms, representations=["ball+stick"], w=400,h=300)

filename の拡張子を html に変更します。
「Save Image」でファイルを保存します。
File Browser でNotebookと同じ場所に出力された html ファイルをダウンロードします。

※ 注意
Matlantis 上では HTML ファイルをダブルクリックしても開けません。
ご自身のローカルデバイスで HTML ファイルをブラウザなどで開いてご確認ください。
描画エリアの右下にある▲マークをマウスで引っ張ると画面サイズを変更できます。（ブラウザの画面サイズや拡大率などの設定で▲マークが見つけづらい場合があります。描画エリアの枠はわかりやすさのために画像を編集しています。）

画面サイズを変更した場合：

サンプル

Trouble shooting :

Click to show javascript error.

環境によって、作成したHTMLファイルをブラウザで開くと、以下のように「Click to javascript error.」とエラーがでて表示できない場合があります。~~現在根本的な原因は調査中です。~~

この問題が起きた場合はこちらをお試しください（2025/11/11 更新）

暫定的な対処：

HTML ファイルをテキストエディターで開いて以下のように、"nglview-js-widgets" の "model_module_version" を "3.0.8" へ変更します。対象の部分がファイル内に複数存在するため、文字検索機能などを使って全ての箇所を変更できるようにしてください。

例：変更前

     "model_module": "nglview-js-widgets",
     "model_module_version": "3.1.0",

変更後

     "model_module": "nglview-js-widgets",
     "model_module_version": "3.0.8",

一括変換するスクリプト：

import re
import os

# --- 設定 ---
input_filename = "test5" 
output_filename = input_filename + "_fixed"
target_version = "3.0.8" 
# ---

# 1. HTMLファイルを読み込む
with open(input_filename+".html", "r", encoding="utf-8") as f:
    html_content = f.read()

# 2. バージョン情報を 3.0.8 に強制的に置換するロジック

pattern_model_version = r'("model_module_version":\s*)"[\d\.]+"'
replacement_model_version = r'\1"' + target_version + '"'

# 修正実行
corrected_html = re.sub(pattern_model_version, replacement_model_version, html_content)

# 3. 修正後の HTML をファイルとして保存
with open(output_filename+".html", "w", encoding="utf-8") as f:
    f.write(corrected_html)

Trouble shooting :

Click to show javascript error.

関連記事