Google Apps Script フォームでのJQuery使用について。


私は現在、こちらのサイトhttp://www.symmetric.co.jp/blog/archives/1087 を参考に  
Google Apps Scriptで独自のフォームを作成しています。  
フォームの中でこちらのJQRangeSlide<http://ghusse.github.io/jQRangeSlider/>を使用しようと思ったのですが、読み込めません。  
Bootstrapや、spread sheetにデータを書き込むなどのJavascriptは機能しているのですが、  
jQRangeSliderのjQRangeSlider-min.js
←こちらのファイルの内容をjsファイルに書き込んでいるのですが、スライダーを表示することはできません。

Google Apps Scriptでスライダーを表示することはできるでしょうか？  
以下のスライダーでも構いません。よろしくお願いします。  
<http://wood-roots.com/web/jquery-javascript/1409>




実現できたようなので回答します。

jQRangeSlider の Quick start - Basic slider を GoogleAppsScript で実装しました。  
<http://ghusse.github.io/jQRangeSlider/documentation.html#quickStart>

GoogleAppsScript はこちらのページを参考にしました。  
<https://developers.google.com/apps-script/guides/html/best-practices>

ソースコードは以下4ファイルになりました。

  1. コード.gs
  2. index.html
  3. stylesheet.html
  4. javascript.html

各々のソースコードです。

# コード.gs

[code]

     function doGet(request) {
      return HtmlService.createTemplateFromFile('index')
          .evaluate();
    }
    
    function include(filename) {
      return HtmlService.createHtmlOutputFromFile(filename)
          .getContent();
    }
    
[/code]

# index.html

[code]

    <!DOCTYPE>
        <html>
          <head>
            <meta charset="utf-8"/>
            <title>example</title>
            <?!= include('stylesheet'); ?>
          </head>
          <body>
            <h1>Hello world</h1>
            <div id="slider"></div>
    
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
            <?!= include('javascript'); ?>
            <script>
            //<!--
              $("#slider").rangeSlider();
            //-->
            </script>
          </body>
        </html>
    
[/code]

# stylesheet.html

[code]

    <style>
     [ダウンロードした jQRangeSlcss/iThing.css の中身]
    </style>
    
[/code]

# javascript.html

[code]

    <script>
     [ダウンロードした jQRangeSlider-min.js の中身]
    </script>
    
[/code]

良ければ試してみてください。

# キャプチャ

[![実行結果](https://i.stack.imgur.com/F4DzS.png)](https://i.stack.imgur.com/F4DzS.png)

# スクリプトファイルへのリンク

<https://script.google.com/d/1YEeHy1IHrjY5smExnWYLeTP7zJOp2Y7sHyzmePoWPgClgrqcMzLVhDhI/edit?usp=sharing>




実現できたようなので回答します。

jQRangeSlider の Quick start - Basic slider を GoogleAppsScript で実装しました。  
<http://ghusse.github.io/jQRangeSlider/documentation.html#quickStart>

GoogleAppsScript はこちらのページを参考にしました。  
<https://developers.google.com/apps-script/guides/html/best-practices>

ソースコードは以下4ファイルになりました。

  1. コード.gs
  2. index.html
  3. stylesheet.html
  4. javascript.html

各々のソースコードです。

# コード.gs

[code]

     function doGet(request) {
      return HtmlService.createTemplateFromFile('index')
          .evaluate();
    }
    
    function include(filename) {
      return HtmlService.createHtmlOutputFromFile(filename)
          .getContent();
    }
    
[/code]

# index.html

[code]

    <!DOCTYPE>
        <html>
          <head>
            <meta charset="utf-8"/>
            <title>example</title>
            <?!= include('stylesheet'); ?>
          </head>
          <body>
            <h1>Hello world</h1>
            <div id="slider"></div>
    
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
            <?!= include('javascript'); ?>
            <script>
            //<!--
              $("#slider").rangeSlider();
            //-->
            </script>
          </body>
        </html>
    
[/code]

# stylesheet.html

[code]

    <style>
     [ダウンロードした jQRangeSlcss/iThing.css の中身]
    </style>
    
[/code]

# javascript.html

[code]

    <script>
     [ダウンロードした jQRangeSlider-min.js の中身]
    </script>
    
[/code]

良ければ試してみてください。

# キャプチャ

[![実行結果](https://i.stack.imgur.com/F4DzS.png)](https://i.stack.imgur.com/F4DzS.png)

# スクリプトファイルへのリンク

<https://script.google.com/d/1YEeHy1IHrjY5smExnWYLeTP7zJOp2Y7sHyzmePoWPgClgrqcMzLVhDhI/edit?usp=sharing>

