2017-08-11 4 views
4

Google Appではクリップボードを操作できないので、Clipboard.jsライブラリを使用して回避策を探したいと思います。Clipboard.jsライブラリをGoogle App Scriptにインポートするにはどうすればよいですか?

私の質問は以下のとおりです。

1.私ははGoogle AppスクリプトにClipboard.jsライブラリをインポートする必要がありますどのように? 。?

2.そして、どのようにindex.htmlの中BMI.gsから)(関数calculateWeightを呼び出そうと例えば(他のページで関数を呼び出す

私が試した何:

私はClipboard.js.htmlというファイルにClipboard.jsのソースコードを貼り付け、タグの中にすべてを入れてみました

私が達成したいもの:。

「コピー」ボタンをクリックしてテキスト文字列をコピーします。

>>what I want to achieve

私は解決策を探して、数時間を費やしてきたが、まだ、関連情報を見つけることができません。どんな助けでも大歓迎です。ありがとうございました!

答えて

3

スクリプトには複数のhtmlファイルを含めることができ、HTML Services: Best PracticesにはHTML、CSS、(クライアント側)のJavaScriptを別々のファイルに保存する必要があります。あなたの場合、index.htmlファイルはすべてHTMLコードになり、いくつかの行が追加されます。

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script> 
    <?!= include('myCSS'); ?> 
    <title>Give it a Title</title> 
    </head> 
    <body> 
     ... 
     All the Body stuff 
     ... 
    </body> 
    <?!= include('myScript'); ?> 
</html> 

先頭には、ホストされた場所からクリップボードJSを挿入する行があります。私は、clipboard.jsのウェブ検索でそれを見つけました。これは私がclipboard.jsライブラリへのアクセスを取得する場所の行は右この下にあります:サーバー側のファイル(.GSファイル)で

<?!= include('myCSS'); ?> 

私は、次のしている私から他のHTMLファイルを含めることができるように私は私のdoGet()関数で読み込む1:

function include(filename) { 
    return HtmlService.createTemplateFromFile(filename).evaluate() 
     .getContent(); 
} 

私が鋳型とHTML使用するには、このコードを使用して、私のdoGetメソッドでHTMLをロードしています:あなたが作成するファイルのプルダウンの下

function doGet(passed) { 

    if(passed.parameter.festival && passed.parameter.year){ 
    passedParameter = passed.parameter.festival + ' ' + passed.parameter.year; 
    } 

    var result=HtmlService.createTemplateFromFile('index').evaluate() 
     .setTitle('My Title') 
     .setWidth(1285) 
     .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 

    return result; 
} 

を新しいHTMLファイルがmyCSSと呼ばれ、そこにあなたのCSSを追加します。

<style> 
    h1 { 
    color: #0F6B5E; 
    font-size: 300%; 
    text-align:center; 
    vertical-align: middle; 
    font-family: 'Raleway', sans-serif; 
    font-weight:bold; 
    padding-top: 0.5em; 
    padding-bottom: 0.5em; 
    } 
</style> 

はあなたがここにあなたのHTMLページで使用したいscreiptとのMyScriptという名前の新しいHTMLファイルを作成し、追加します。これはSErver Sideスクリプトとは対照的にClient Sideスクリプトです。これはすべてScriptファイル内にあります。 (HTMLファイルはファイルのリストに.html拡張子を表示し、サーバー側のスクリプトファイルは.gsを持ちます)calculateWeight()関数を使用してHTMLページのアイテムを計算して表示する場合は、次のファイルに配置します。

google.script.runで始まる行は、サーバー側機能を実行し、必要に応じて関数に変数を渡します。成功した場合は、withSuccessHandler(successFunction)に定義されているクライアント側の関数が使用され、返されるデータはすべて渡されます。だから私の例ではshowMenuYear(menuItems)関数はクライアント側で実行され、menuItemsはサーバー側関数getDropDownContent()から返された値に設定されています。サーバー側がエラーを返すと、loadFailed(error)関数が実行されます。これはすべて次の行から来ています。

google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent(); 
+1

あなたは素晴らしい教師と問題解決者です!私はあなたの詳細で明確な解決策を持っていることに感謝しています! Thxxxxx! :D –

+0

その答えがどれほど価値があるのか​​を表現することはできません。ありがとうございました! – deshu

関連する問題