私は自分の会社の Google サイトを作成しており、Google Apps スクリプトを利用してサイトで少し余分な作業を行っています。作成したドロップダウン メニューにスクリプトをリンクしたいと思っています。ただし、スクリプトをリンクする方法がわかりません。スクリプトを Google ガジェットとして、またスタンドアロン リンクとしてリンクする方法は知っていますが、ドロップダウン メニューの項目をクリックするとスクリプトが実行されるようにしたいと考えています。
2 に答える
セキュリティ上の理由から、Google では JavaScript を Google サイトに配置することを許可していません。代わりに Apps Script を提供していますが、孤立した世界 (ブラウザーではなくサーバー上) で動作するため、非常に扱いにくく、独自の方法があります。
標準のページの JavaScript とは大きく異なるため、Apps Scripts で何ができるかという点で目標を再考する必要があります。
Google Apps Scripts を使用すると、ページ全体でスタンドアロン スクリプトとして視覚化したり、サイトの iframe に挿入したりできるユーザー インターフェースを (まだ実験的な UI API を使用して) 構築できます。これは、ドロップダウン メニューがサイトに重なって表示されないことを意味します。スクリプトの UI を視覚化するには、静的なスペースが必要です。
スクリプト コマンドをサイトに「埋め込む」別の原始的な方法があります。それは、リンクを使用することです。独自のパラメーターを使用してスクリプトを起動し、de コマンドを実行するためだけに UI を使用しないリンク。オプションでメニューを作成でき、それぞれがスクリプトを起動します。しかし、私はドロップダウンメニューについて話しているのではありません。
Google Apps スクリプトのユーザー インターフェースについて
「スクリプトをリンクする」の意味がわかりません。別の場所にコードがありますか? 「リンク」とは、イベントハンドラーを使用してコードを「呼び出す」ことを意味しているように聞こえます。GUI の ListBox Change イベントまたは Button Click イベントによってトリガーされる ServerHandler を使用して関数を呼び出す方法を紹介します。
Google Apps Scrips (GAS) では、GUI を実行する方法が 3 つあります。
- HTML サービス- プレーンな HTML と同じように、HTML フォームと入力タグを挿入できます。
- UI サービス- (レイアウト マネージャーに関する限り) Java によく似ています。以下を参照してください。
- GUI ビルダー- レイアウトをよりよく理解するために、最初に手動で行うことをお勧めします。
Google サイトでは、ほとんどの HTML をスクリプトなしで直接追加できます。UI サービスと GUI ビルダーは HTML フォーム タグを生成します。何らかのコードを実行していない限り、GUI 要素を挿入する理由はほとんどないため、おそらくこれらを使用して開始する必要があります。
以下は、複数の UI 要素 (ウィジェットと呼ばれることもあります) からハンドラー関数を呼び出す方法と、パラメーターの使用方法を示すためにいくつかの変更を加えたドロップダウン リストの例です。
function doGet(e) { // use doGet() & UiApp to make a canvas.
var app = UiApp.createApplication();
var doEvent = app.createServerHandler('doEvent').setId('doEvent');
var myList = app.createListBox().setId('myList').setName('myList');
myList.addItem('one'); // add items, I use single quote strings.
myList.addItem('two').addItem('three') // I know it looks weird.
// Scripts let you do this, by returning self for your convenience.
.addChangeHandler(
app.createServerHandler('doEvent')
);
app.add(myList); // Add element to GUI.
doEvent.addCallbackElement(myList); // Add to Event Handler.
app.add(app.createButton('Click Me').setId('myButton')
.addClickHandler(doEvent));
return app;
} // Simple DropDown by Jason K.
function doEvent(e) { // use split() if isMultipleSelect is true
var app = UiApp.getActiveApplication();
app.add(app.createLabel(
'List Value is ' + e.parameter.myList
+ ' from ' + e.parameter.source));
return app;
}
トラブルシューティングに関しては、app.add() を使用して各要素を追加し、app; を返すことを忘れないでください。doGet および各ハンドラー関数の最後に。
ハンドラーは、JavaScript の onClick() や onChange() 関数などの関数を実行します。ほとんどの UI は、ハンドラーなしでは役に立ちません。ClientHandler はより効率的ですが、ServerHandler はより多くのことを行います。ServerHandlers から始めて、単純な関数を ClientHandlers に変換してパフォーマンスを向上させることができます。ハンドラーの間隔を空けるか、すべてを 1 行のコードに詰め込むかを選択できます。実際には個人的な好みの問題ですが、複数の GUI オブジェクトに使用する予定がある場合は、変数に割り当ててください。さまざまなレイアウト マネージャーを調べて、より派手な外観のアプリケーションを作成したり、GUI ビルダーを使用したりすることができます。また、 app.createServerClickHandler() のような他の作成関数がありましたが、それらは役に立たず、現在は廃止されていることを理解しているので、そのような他の参照を無視してください。
setName() はばかげているようです。パラメーター名を設定するだけでよいので (変更してほしいと思います)、今のところ、要素 ID と同じに設定することをお勧めします。また、ハンドラーの変数名 = その ID = イベント関数名を作成して、それらがすべてどのように関連しているかを説明しました。