[3dsmax][script]Python+MaxScriptのツール開発入門 その5

PySideでUIを作成する

QtDesignerを起動する

PySideのUIを作成するQtDesignerというツールが以下の場所にあります。

(pythonインストールフォルダ)\Lib\site-packages\PySide

このフォルダにあるdesigner.exeがQtDesignerの実行ファイルです。

これをショートカットとしてデスクトップに置くなり、タスクバーにピンニングしておくと便利です。

早速起動してみましょう。

テンプレートを使ってダイアログを作成する

今回はごくシンプルなツールなので、ダイアログをベースにすれば良いでしょう。デフォルトではボタン種別の違いで3種類のダイアログテンプレートが用意されています。今回はボタンのない「Dialog without Buttons」を使いましょう。

UI要素を配置する

ここに必要なUI要素を配置していきます。QtDesignerの左寄りにあるパレットからUI要素を選び、右のダイアログ上にドラッグ&ドロップして配置していきます。

まず必要な要素を確認しましょう。

仕様を確認すると、今回のグリッドコピーツールでは以下のような動作を想定していました。

  • X方向の個数
  • X方向の間隔
  • Y方向の個数
  • Y方向の間隔
  • Z方向の個数
  • Z方向の間隔

の6つの値を入力してもらい、元のオブジェクトを選択した状態で実行ボタンを押すと指定した値でグリッド状に複製を配置する。

そのため、まず最低でも6つの値を入力する欄と、実行ボタンが必要です。配置してみましょう。

数値の入力欄にはSpin Boxを、実行ボタンにはPushButtonを使用します。この段階では各要素の位置などは不揃いで構いません。

必要な入力欄を配置したらこれを眺め、これで十分かどうかを検討します。今回の場合、入力欄がただ並んでいるだけではどこに何を入力すれば良いかわかりませんので、それぞれの欄を説明する文字を表示したいところです。

文字はLabelを使用して表示させます。Widget BoxからLabelをドラッグ&ドロップし、配置したものをダブルクリックして文字を入力します。合わせて、先ほど配置したPushButtonの表示文字も変更しておきましょう。

配置や表示する内容はこの通りでなくても構いません。どんなふうになっていると使いやすいかを考えて表示、配置を考えましょう。また、ツール内の表示に日本語を使用するかどうか、という点も、このツールを配布する先によって検討する必要があるでしょう。今回はエントリ自体も日本語なので、日本語も使用して良いという想定で作っていきます。

UI要素に命名する

ここまでで必要な要素は揃ったので、ここのUI要素に名前を付けます。名前はデフォルトでは要素名そのままで、同じ要素が複数になると連番が付与されていきます。この状態でも問題はありませんが、あとでイベントハンドラなどを実装する際に混乱を招くので、識別しやすい名前を付けておいた方が良いです。

命名規則については開発チームや個々のプロダクションなどで策定することになると思われ、絶対的なルールはありません。

私の場合、UI要素の種別(Spin Boxならspn_、PushButtonならpb_など)をprefixとして付け、そのあとに項目の内容を書くようにしています。例えば今回の場合、X方向の個数を入力するSpin Boxはspn_x_countとしました。

UI要素の名前は、要素を選択した状態でobjectNameの項目で編集できます。

UI要素を整列する

オブジェクト名を修正したら要素を整列させましょう。PySideで要素の配列を行うには、レイアウトウイジェットを使用します。レイアウトウィジェットには4種類ありますが、よく使うのはForm Layout以外の3種類です。

今回は各要素を表のように配置するので、Grid Layoutを使用します。Grid Layoutウィジェットをダイアログ上に出し、そこに各要素を入れていきます。

実行ボタンはGrid Layoutには入れず、その下に右寄せで配置したいと思います。そのため、Horizontal Layoutを使用しますが、右寄りに配置するためにスペーサーも入れます。

最後に、このGrid LayoutとHorizontal LayoutをVertical Layoutに入れて配置します。

ただ、このVertical Layoutはダイアログ全体と一緒に拡大、縮小してほしいので、Vertical Layoutを配置してそこに他のレイアウトを入れるという操作ではなく、ダイアログ本体に対してVertical Layoutを採用する、というやり方をします。

合わせて、サイズ変更時に中の要素が離れていかないように、ここでもスペーサーを入れておきましょう。

これでいったんUIを完成とします。gridCopy_ui.uiという名前で保存しましょう。

※このチュートリアルでは全ての関係ファイルが同じディレクトリにあることを想定しています。そのため、gridCopy.msを保存したのと同じ場所にこのuiファイルも保存してください。

.uiを.pyに変換する

QtDesignerで作成した.uiファイルはXML形式でUI情報が書かれたファイルです。このままではPythonツールで使用できないため、これをPythonの.pyファイルに変換する必要があります。この変換に使用するツールもPySideと一緒にインストールされますが、3dsmaxに搭載されているPySideには含まれていません。

使用するツールはpyside-uic.exeという実行ファイルで、これはQtDesignerと同じ以下のディレクトリにあります。

(pythonインストールパス)\lib\sit-packages\PySide

コマンドラインから使用するのでPathを通しておきましょう。(環境変数のPathに追加することを「Pathを通す」と言います)

uiファイルを保存してあるディレクトリでコマンドプロンプトを開き、下記のコマンドを実行します。

pyside-uic.exe -o 生成するpythonファイル名 元になるuiファイル名

実行するとuiファイルを変換したpyファイルが生成されます。

※今回、このあとgridCopy.pyというPythonファイルを作る予定があるため、UI用のものはgridCopy_uiという名前にしています。

まとめ

  • PySideのUI開発にはQtDesignerを使うと便利
  • UI要素を配置して名前を付け、レイアウトを使用して整列させる
  • pyside-uicを使用して.uiファイルを.pyファイルに変換する

次:Python+MaxScriptのツール開発入門 その6

前:Python+MaxScriptのツール開発入門 その4

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です