Autodesk Developer Blog : AutoCAD JavaScript API の使い方～その 3

少し時間が空いてしまいましたが、引き続き、AutoCAD 2014 で登場した JavaScript API をご紹介します。前回までは、JavaScript で書かれたソースファイル（*.js）を直接 AutoCAD に WEBLOAD コマンドを使ってロードしていました。今回は、HTML にソースコードを埋め込んで、その HTML をユーザインタフェースとして AutoCAD 上で利用する方法をご紹介しましょう。ちょうど、AutoLISP に例えるなら、HTML は DCL 的なユーザインタフェース定義に利用することになります。

まず、HTML ページをデザインしていきます。HTML をデザインするツールは、有償版/無償版も含めて特に限定しません。ただし、ここではユーザインタフェースとして HTML ページを使用することが目的なので、ダイアログボックスのように文字を入力するテキストボックスやボタンをグラフィカルに配置することができるツールをお勧めします。もし、有償版の Microsoft Visual Studio をお持ちであれば、もちろん、HTML のデザインをおこなうことが出来ます。無償版では、 Microsoft Visual Studio Express for Web などでも OK です。

初めて HTML とともに JavaScript API をご紹介しますので、今回は AutoCAD JavaScript API の使い方～その 2 でご紹介した円の作図のコードをそのまま流用することにします。また、最も分かり易いページとするため、次のような簡単な構成を想定することにします。

円の半径を HTML ページの入力ボックスから取得する。
ボタンをクリックすることで中心点を指定させて円を作図する。

この要求を満たす HTML は、下記のような感じになるかと思います。

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>円の作図</title>

</head>
<body>
<!- Create a tabular UI with headings and comboboxes ->
<h3 class="auto-style4">円の作図</h3>
  <table border=”0″ class="auto-style3">
    <tr>
      <th width="250" class="auto-style4">半径</th>
      <td>
        <input type="text"
                   id='radius'
                   size="10"
                   value="10.0"
                   class="auto-style2" />
        <span class="auto-style2"></span>
      </td>
    </tr>
    <tr>
      <th class="auto-style2" style="width: 63px">&nbsp;</th>
        <td style="width: 180">
          <input type='button'
                     style="width: 100px"
                     onclick='myCircle()'
                     value='作図'
                     class="auto-style2" />
         <span class=”auto-style2″></span>
        </td>
    </tr>
  </table>
</body>
</html>

この HTML には、まだ JavaScript のコードは埋め込んでいませんが、後で JavaScript コード上で使用することになる情報は埋め込んでいます。1つは、テキストボックスに入力された値を取得するために利用する、このテキストボックスのために付けた識別子です。太字で id=’radius’ となっているのは、このテキストボックスを radius という識別子で指定できるようにしています。また、ボタン定義の onclick=’myCircle()’ は、ボタンがクリックされた場合に、JavaScript て定義した myCircle() 関数を呼び出すように指定しています。この HTML ファイルは、文字化けを防ぐため、JavaScript ファイルと同様に UTF-8 形式で保存してください。

次に作成した HTML ファイルに JavaScript コードを埋め込みます。埋め込みには、AutoCAD JavaScript API の使い方～その 1 でご紹介した <script language=”JavaScript”> タグを使用します。円の作図コードを少し修正して先程の HTML 記述に埋め込むと、次のようになります。

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>円の作図</title>
<script
  type="text/javascript"
  src="http://www.autocadws.com/jsapi/v1/Autodesk.AutoCAD.js">
</script>
<script type="text/javascript">

  var m_rad = 0.0;
  var m_cpt = new Acad.Point3d(0.0, 0.0, 0.0);

  function pointToString(pt) {
    var ret =
    pt.x.toString() + “," +
    pt.y.toString() + “," +
    pt.z.toString();
    return ret;
  }

  function doubleToString(value) {
    return value.toString();
  }

  function myCircle() {
    try {
      var ppo = new Acad.PromptPointOptions();
      ppo.useBasePoint = false;
      ppo.allowNone = false;
      ppo.setMessageAndKeywords(“\n中心点を入力", “");
      Acad.Editor.getPoint(ppo).then(onCompleteCpt, onError);
    }
    catch(ex) {
      write(ex.message);
    }
  }

  function onCompleteCpt(jsonPromptResult) {
    try {
      var resultObj = JSON.parse(jsonPromptResult);
      if (resultObj && resultObj.status == 5100) {
        try {
          m_cpt = resultObj.value;

          if (document.getElementById(‘radius’).value)
            m_rad = document.getElementById(‘radius’).value;

          Acad.Editor.executeCommand(“CIRCLE",
            pointToString(m_cpt),
            doubleToString(m_rad));
        }
        catch(ex) {
          write(ex.message);
        }
      }
    }
    catch(ex) {
      write(ex.message);
    }
  }

  function onError(jsonPromptResult) {
    write(“\nProblem encountered");
  }

</script>

</head>
<body>
<!- Create a tabular UI with headings and comboboxes ->
<h3 class="auto-style4">円の作図</h3>
  <table border="0" class="auto-style3">
    <tr>
      <th width="250" class="auto-style4">半径</th>
      <td>
        <input type="text"
                  id=’radius’
                  size="10"
                  value="10.0"
                  class="auto-style2" />
        <span class="auto-style2"></span>
      </td>
    </tr>
    <tr>
      <th class="auto-style2" style="width: 63px">&nbsp;</th>
        <td style="width: 180">
          <input type=’button’
                    style="width: 100px"
                    onclick=’myCircle()’
                    value=’作図’
                    class="auto-style2" />
         <span class="auto-style2"></span>
        </td>
    </tr>
  </table>
</body>
</html>

この JavaScript コードでは、ボタンがクリックされた際に呼び出される myCircle() 関数を実装しています。myCircle() 関数内では、getPoint() 関数で円の中心点を指定させて、正常に点の指定が完了すると、onCompleteCpt() 関数を呼び出すよう Promise Pattern が指定されていることがわかります。

onCompleteCpt() 関数では、JSON で返された指定点とともに、HTML ページ上で radius の ID で識別されるテキストボックスから、半径の値をグローバル変数に代入してます。その後、executeCommand() 関数で CIRCLE コマンドを実行しています。つまり、HTML ページの [作図] ボタンをクリックすることで、円の中心点を指定して円を作図できます。

JavaScript コードを含む HTML ファイルをこのブログを記載している Web サイトにポストしていますので、クリックして表示してみてください。

CreateCircle Download

表示されたページの [作図] ボタンをクリックしても、当然、何も起こりません。実行には、AutoCAD 上で HTML ページを開く必要があります。さて、どのように HTML ページを表示すればいいのでしょう？

実は、AutoCAD JavaScript API 自身にも Acad.Application.activedocument.showModalDialog や Acad.Application.activedocument.addPalette といった関数で、ダイアログボックスやパレットに HTML ページを表示する機能が用意されています。ただし、それを実装するコマンドも JavaScript API で実装するとなると、そのコードを WEBLOAD コマンドで事前にロードする必要が出てきます。そうするとなると少し面倒なので、HTML ページをロードして AutoCAD 内に表示する処理は、従来の AutoCAD API で実装する方法も用意されています。

ここでは、AutoCAD .NET API を使って、HTML ページをパレットダイアログに表示することにします。少し実装内容が異なりますは、.NET API を利用してパレットを作成する手順は、Autodesk Knowledge Network に記載されています。

AutoCAD .NET API でパレットダイアログを作成する方法

HTML ページを表示する方法は、.NET API の他に、ObjectARX と AutoLISP にも用意されています。

次のコードでは、JsPallete コマンドを実装して、パレットダイアログ上に先にダウンロードできるようにした HTML ページ http://adndevblog.typepad.com/files/createcircle-2.html を表示するようにしています。

Public Class MyCommands

  ' パレットセット用変数の宣言
  Public Shared oPs As Autodesk.AutoCAD.Windows.PaletteSet = Nothing

  <CommandMethod("JsPalette”)> _
  Public Sub MyCommand()

    ' パレットセットの作成
    If oPs Is Nothing Then
      oPs = New Autodesk.AutoCAD.Windows.PaletteSet("JavaScript デモ”)
      oPs.Style = PaletteSetStyles.ShowPropertiesMenu Or _
                        PaletteSetStyles.ShowAutoHideButton Or _
                        PaletteSetStyles.ShowCloseButton Or _
                        PaletteSetStyles.Snappable
      oPs.Visible = True
    Else
      oPs.Visible = True
    End If

    ' パレットの作成
    If oPs.Count = 0 Then
      Dim oUri As Uri = New Uri("http://adndevblog.typepad.com/files/createcircle-2.html")
      oPs.Add("JavaScript デモ”, oUri)
      oPs.Dock = DockSides.None
    End If
  End Sub

End Class

JSPALETTE コマンドを実行して、半径を指定してから [作図] ボタンをクリック、作図画面上で中心点を指定することで、円を作図することが出来るはずです。

NETLOAD コマンドなどで .NET API アプリケーション（.dll ファイル）をロードする時と、パレットダイアログが表示されて HTML ページがロードされるタイミングで、セキュアロードの警告ダイアログが表示されます。

前者は、

セキュリティ警告ダイアログについて

でご案内した方法で、後者は、システム変数 TRUSTEDDMAINS にロード先のドメインを指定することで、警告ダイアログの表示を抑止することができます。

AutoCAD JavaScript API の利点は、HTML ページも含めてサーバー側でソースコードを管理できる点です。もし、修正が必要なコードがあったとしても、サーバー側で修正をポストしておけば、クライアントで再読み込みすれば、最新のコードを実行することができます。前回まは、.JavaScript のソースコードを新しく AutoCAD に認識させるために、AutoCAD を再起動して、毎回、WEBLOAD コマンドで js ファイルをロードする必要がありました。HTML ファイルに埋め込まれた JavaScript コードを AutoCAD に認識させるためには、HTML 側で工夫をすることで、AutoCAD の再起動は必要なくなります。次の HTML タグと JavaScript コードを使って、表示している HTML（と埋め込まれた JavaScript コード）を再ロードさせることもできます。ちょうど、Web ブラウザ上で [F5] キーを使ってページを再ロードするような感じです。

<input type='button'
           onclick='window.location.reload(true)'
           value='再ロード'
           style="display:inline"/>

また、C:\Users\<ユーザ名>\AppData\Local\Temp\cache フォルダのファイルを削除すると、クライアント上のキャッシュを削除して、最新の HTML ページを AutoCAD 上に作成したパレットなどに表示させることもできます。ただし、キャッシュ全体が消えてしまうので、ブラウザで閲覧した他の履歴も消えてしまいます。注意してください。

By Toshiaki Isezaki

AutoCAD JavaScript API の使い方 ～ その 3

Share this:

Like this:

Discover more from Autodesk Developer Blog

AutoCAD JavaScript API の使い方～その 3