0

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

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

2 件の回答 2

0

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

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

 function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate();
}

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

index.html

<!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>

stylesheet.html

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

javascript.html

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

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

キャプチャ

実行結果

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

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

7
  • すいません、記載されてましたね。再度回答します。 >jQRangeSliderのjQRangeSlider-min.js ←こちらのファイルの内容をjsファイルに書き込んでいる
    – ろくに
    Commented 2017年8月12日 10:12
  • そうですね。一応、CDNファイルで公開されているこちらのURLで試したのですが、それでもだめでしたね。cdnjs.com/libraries/jQRangeSlider
    – kmy
    Commented 2017年8月12日 10:46
  • すみません、コメントを見る前に回答してしまいました。公開されているURLで試すと動かなかったので、ソースコードを直に書く場合とで挙動が異なるようですね。
    – ろくに
    Commented 2017年8月12日 11:04
  • ありがとうございます。私の方でも試してみたのですが表示できませんでした。
    – kmy
    Commented 2017年8月12日 11:17
  • CSSが読み込めてない感じですね。スクリプトファイルの共有リンクを追加したので比較してみてください。あと、cssファイルは iThing-min.css でも動作しました。
    – ろくに
    Commented 2017年8月12日 11:29
0

私の方でも実際に試してみたのですが、下記の画像のように表示されていません。
この場合、CSSファイルを読み込めていないのでしょうか。

画像の説明をここに入力

できました。
styleをscriptと書き間違えていました。
ありがとうございます。

前日から色々調べていまして、悩んでいましたのですごく助かりました。
ありがとうございます。

画像の説明をここに入力

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。