ウィジット実装時にPythonのソースとHTMLを分離したい

ウィジット実装時に、ウィジット画面はHTMLで構築します。
処理はJavaScriptで記載します。
このとき、Shade3DのスクリプトとしてのアクセスをPythonの別ファイルに分離しておきたい場合は
「XMLHttpRequest」を使用する手段があります。
HTML部とPython部を分離することで可読性が増し、
より大きなウィジット実装を管理しやすくなります。

Shade3Dのウィジットウィンドウは、
Windowsの場合はInternet Explorerの埋め込み機能、
Macの場合はWebKitを使用しています。
内部的にWebブラウザが内包されている実装となっています。
そのため、HTML/JavaScriptを使用できます。

「XMLHttpRequest」により、ローカルファイルを読み込むことができます。
Webプログラムの場合、「XMLHttpRequest」を使用する場合は
サーバ上での同一ドメインの実行でないとセキュリティの制限がかかります。
Shade3Dではローカル実行になるのですが、
Internet ExplorerまたはWebKitでの実行となりセキュリティの制限がかからないため、この命令が使用できます。

以下に、ローカルファイルとしてPythonコードを記載し、HTMLからソースを読み込んで実行する例を記載します。

構成

以下のようなウィジット構成にしました。

ダウンロード : CreateSphere_widget

ファイル名 内容
widget.xml ウィジット情報を記載
readExternalFile.js ローカルファイル読み込み関数
index.html HTMLファイル
createSphere.py Pythonコード

widget.xml

ウィジットのタイトルやウィンドウサイズなど、初期情報を記載します。


<?xml version="1.0" encoding="utf-8"?>
<widget>
  <uuid>3fa1f274-5ae4-4750-9c34-bc1de41e6ef8</uuid>
  <name lang="ja">ウィジットのテスト</name>
  <name lang="en">Widget Test.</name>
  <url>index.html</url>
  <version>1.0</version>
  <description lang="ja">ウィジットのテスト</description>
  <description lang="en">Widget Test.</description>
  <window initial_size="350 290"
    position="0.42 0.63"
    resizeable="true">
  </window>
</widget>

readExternalFile.js

「readExternalFile.js」ファイルはJavaScriptのコードになり、
外部ファイルをテキストとして読み込む関数を記載します。
ここでXMLHttpRequestを使用しています。


// ブラウザがIEか判定.
function checkBrowserIE() {
  var userAgent  = window.navigator.userAgent.toLowerCase();

  if (userAgent.indexOf('msie') != -1) {
    return true;
  } else if (userAgent.indexOf('trident/7') != -1) {
    return true;
  }
  return false;
}

// 外部のテキストファイルを読み込み.
function readFileToString(fileName) {
  // XMLHttpRequestを取得.
  var xmlHttp = null;
  if (checkBrowserIE()) {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  } else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
  if (xmlHttp == null) return "";

  var str = "";
  try {
    // 第三引数をfalseにすると、同期読み込み。
    // 読み込みが完了するまで待つ（実際は非推奨）.
    xmlHttp.open("GET", fileName, false);
    xmlHttp.send(null);          // ここで読み込みが行われる.
    str = xmlHttp.responseText;  // 結果をテキストで取得.
  } catch(e) {
    window.alert(e);
  }
  return str;
}

「xmlHttp.open(“GET”, fileName, false);」と第三引数でfalseを指定しています。
これは同期読み込みになり、読み込みが完了するまで待つことになります。
Webプログラムではここをtrueにして、「非同期」で読み込むことを推奨しています。
Shade3Dのウィジット実行の場合は、ローカルの別ファイルに分離したPythonのソースを読むだけですので
ここではfalseとして利用するようにしました。

index.html

ウィジットのUIを構成するHTMLファイルです。
ここから開始して、Shade3Dの処理を呼び出すことになります。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="./readExternalFile.js"></script>

<script type="text/javascript">
  function initialize () {
  }

  function do_script () {
    // 関数に渡す引数（nValue）に値を入力.
    py_src = "nValue = " + document.getElementById('radius').value + "\n";

    // 外部ファイルのPythonコードを読み込みして連結.
    py_src += readFileToString('./createSphere.py');

    // スクリプトを実行.
    window.external.setScript(py_src);
  }
</script>
</head>

<body onload="initialize();">

<h3>球作成</h3>
半径：<input type="text" id="radius" size="6">mm<br />
<input type="button" value="OK" onclick="do_script();">

</body>
</html>

ここのJavaScriptの「do_script」関数で、
「readFileToString(‘./createSphere.py’);」として外部ファイル「createSphere.py」からソースを読み込んで、
そのままテキストとして連結しています。

createSphere.py

分離したPythonコードです。
nValueで指定した半径の球を原点中心に生成します。


scene=xshade.scene()
scene.begin_creating()
scene.create_sphere(None, (0.0, 0.0, 0.0), nValue)
scene.end_creating()
この記事のタイトルとURLをコピーする
Translate »