×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。



>> ユーザーガイド >> Uiの構築 >> Htmlサービス | Uiサービス | Guiビルダー |


GUIビルダー

このセクションでは、Google.Apps.ScriptでGUIビルダーを利用しながらユーザーインターフェイスを作成するための情報が含まれています。


WWW GoogleStyle


GUIビルダーの概要

GUIビルダーとは、ユーザーがコードを記述せずにユーザー・インターファイスを組み立てることができるスクリプト・エディタ内のツールのことです。 UIサービスを使用する代わりに利用できますが、UIサービスで利用可能なウィジェットのセットすべてが含まれているわけではありません。ウィジェットを選択し、UIのパレットからブロックを作ってキャンバスと呼ばれる中央パネルにドラッグして組み立てます。 修正は、プロパティパネル上の各ウィジェットのプロパティで行います。GUIビルダーは3つの部分から構成されています。

  1. 左側のサイドバーには、(下の図を参照)UIのパレットがあります。
  2. メインセクションは、UIウィジェットを組み立てる利用可能なキャンバスです。
  3. 右端のセクションがプロパティパネルです。

ウィジェットがキャンバスで選択されると、プロパティパネルにウィジェットに関連付けられているプロパティが表示されます。 各ウィジェットの設定にはプロパティパネルを使用します。

GUIビルダーを使用して作成したインターフェイスは、ユーザーインターフェイスが作成されたスクリプトでのみ使用することができます。しかし、ライブラリーに含まれているスクリプト内でインターフェイスがロードされている場合は、それが含むスクリプト内で表示されます。
詳細についてはライブラリーの管理を参照してください。



GUIビルダーを開く

GUIビルダーはスクリプトエディタからアクセスします。初めにプロジェクトを保存するまでは、GUIビルダーを開くことはできません。 GUIビルダーを起動するには、File > Build a user interfaceを選択します。GUIビルダーは別のブラウザタブで開きます。



GUIビルダーの利用

ユーザー・インターフェイスを組み立てるために、UIのパレットからキャンバスにウィジェットをドラッグします。UIのパレットには利用可能なUIウィジェットが表示されます。 ウィジェットを設定するには、キャンバス上でそれを選択し、[プロパティ]パネルを使用してプロパティを変更します。



ユーザーインターフェイスの保存

新しく作成されたユーザーインターフェースを保存するには、Saveをクリックし、ユーザーインターフェイスに名前を付けます。スクリプト内にユーザーインターフェイスが含まれている場合は、後でこの名前を使用します。



ユーザーインターフェイスをスクリプトに取り込む

スクリプトにユーザーインターフェイスを組み込むには、スクリプト内でloadComponent(GUI_NAME)メソッドを使用します。次の例では、ユーザーインターフェイスMyGuiは、スクリプト内に組み込まれています。 独立してユーザーインターフェイスを表示するには、return app;を使ってWebアプリとしてスクリプトを公開します。


function
doGet() {
var
app =
UiApp.
createApplication(); app.add(app.loadComponent(
"MyGui"
));
return
app; }

スプレッドシートからユーザーインターフェイスを表示するには、return app;の代わりにSpreadsheetApp.getActiveSpreadsheet()を使用します。


function
myFunction() {
var
app =
UiApp.
createApplication(); app.add(app.loadComponent(
"MyGui"
));
SpreadsheetApp.
getActiveSpreadsheet().show(app); }


ユーザーインターフェイスの拡張

GUIビルダーを使用して作成されたユーザーインターフェースの拡張や変更は簡単です。app.loadComponent(GUI_NAME)を使用してユーザーインターフェイスをロードした後に新しいウィジェットとスタイルを追加します。 次の例で新しいウィジェットを追加する方法を説明します。


function
doGet() {
var
app =
UiApp.
createApplication(); app.add(app.loadComponent(
"MyGui"
));
var
panel = app.getElementById(
"Panel1"
);
// use the widget's id from the builder with getElementById
panel.add(app.createButton(
"a new button!"
));
return
app; }

2つの高度なオプションの引数(prefixとz-index)を指定してapp.loadComponentを呼び出すことができます。 prefix引数はコンポーネント内の任意のウィジェットにidを追加するときの文字列値を設定することができます。これにより、同じユーザーインターフェイスの複数のコピーをロードすると、各コピーに独自のprefixを与える限り、各コンポーネントはグローバルなユニークIDを持つことが可能になります。 z-index引数の値は、コンポーネント内の任意のウィジェットのz-indexを追加する際のベースとなるz-indexを指定します。 ここで、"mygui123"のprefixの値と"100"のz-indexの値を設定を変更する例を見てみます。


function
doGet() {
var
app =
UiApp.
createApplication(); app.add(app.loadComponent(
"MyGui"
, {
"prefix"
:
"mygui123"
,
"z-index": "100"
}));
var
panel = app.getElementById(
"mygui123Panel1"
);
// use the widget's id from the builder with getElementById
panel.add(app.createButton(
"a new button!"
));
return
app; }



2012-10-27

pageTOP