スクリプトのインスタンスごとに動的データを使用して自分のサイトに追加できる動的なアプリケーションスクリプトコンポーネントを作成しようとしています。私はパラメータを実行しようとしましたが、これがこのアプローチに最も適しているかどうかはわかりません。たとえば、動的リンクで読み込まれ、Googleサイトに挿入されるイメージスクリプトを作成したいとします。私は、1つのイメージスクリプトが動的URLを持つページに複数回読み込まれることができます。私はこれをどのように扱うべきですか?これはできますか?ありがとう。GoogleサイトのGoogle Appスクリプトで動的コンポーネントを作成するにはどうすればよいですか?
1
A
答えて
2
このバージョンでは、スクロール画像表示またはスライドショーが作成されます。そして、空のdivに画像タグを作成します。スプレッドシートの列Aに多くの画像を追加することができ、スクリプトは残りの部分を処理します。
image.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="myimages"></div>
<div id="slideshow" style="display:none;">
<img id="slide" src="" width="450"/>
</div>
<input type="button" value="Start Slide Show" onClick="startShow();" />
<input type="button" value="Stop Show" onClick="stopShow();" />
<div id="resp" style="display:none;">
<h1>Response</h1>
<p>Your data has been received.</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var nextslide=0;
var myslides='';
var mytimer;
$(function() {
google.script.run
.withSuccessHandler(setURL)
.getURL();
});
function setURL(urlA)
{
for(var i=0;i<urlA.length;i++)
{
var s='img' + Number(i+1);
var s1= '#img' + Number(i+1);
$('#myimages').append('<img id="' + s + '" src="' + urlA[i] + '" />');
$(s1).attr('height','450');
}
myslides=urlA;
}
function startShow()
{
$('#myimages').css('display','none');
$('#slideshow').css('display','block');
showSlide();
}
function showSlide()
{
document.getElementById('slide').src=myslides[nextslide];
if(++nextslide > myslides.length-1)
{
nextslide=0;
}
mytimer=window.setTimeout(showSlide,5000);
}
function stopShow()
{
window.clearTimeout(mytimer);
$('#myimages').css('display','block');
$('#slideshow').css('display','none');
}
function loadTxt(from,to)
{
document.getElementById(to).value = document.getElementById(from).value;
}
console.log('My Code');
</script>
</body>
</html>
Code.gs
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('image');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(a)
{
var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss");
a.push(ts);
var ss=SpreadsheetApp.openById('SS_ID')
ss.getSheetByName('Form Data').appendRow(a);
return true;
}
function getURL()
{
var ss=SpreadsheetApp.openById('SS_ID');
var sht=ss.getSheetByName('imgURLs');
var rng=sht.getDataRange();
var rngA=rng.getValues();
var urlA=[];
for(var i=1;i<rngA.length;i++)
{
urlA.push(rngA[i][0]);
}
return urlA;
}
1
ここでは簡単な例です:
image.htmlファイル:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="data">
<br /><img id="img1" src="" alt="img1" width="300" />
<br /><img id="img2" src="" alt="img2" width="300" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
google.script.run
.withSuccessHandler(setURL)
.getURL();
});
function setURL(urlA)
{
for(var i=0;i<urlA.length;i++)
{
var s='img' + Number(i+1);
document.getElementById(s).src=urlA[i];
}
}
console.log('My Code');
</script>
</body>
</html>
Code.gsファイル:
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('image');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getURL()
{
var ss=SpreadsheetApp.openById('1CElNRoVTVa33RS3kJWmRoCXJDgWndEPiZrCxDC5j-WU');
var sht=ss.getSheetByName('imgURLs');
var rng=sht.getDataRange();
var rngA=rng.getValues();
var urlA=[];
for(var i=1;i<rngA.length;i++)
{
urlA.push(rngA[i][0]);
}
return urlA;
}
これは名前のシートから画像のURLを取得します 'imgURLs' で適切なスプレッドシートIDと私はちょうど今A2とA3を使用しているだけで、あなたは1つ以上の画像を使用することができますあなたはwebappとして保存することができますし、古典的なサイトに行くselect google appsとtyp eを公開メニューからWebアプリのURLに入れておけばそれだけです。
1
- [サイトの管理] - > [Apps Script]の順に選択すると、新しいスクリプトが古典的なサイトに埋め込まれます。
Webアプリケーションの設定として、スクリプトを公開
function doGet(e) { makePage(); }
)makePageを(呼び出しますdoGetメソッドを追加します。あなたは
function makePage() { var page = SitesApp.getCurrentPage(); //create your html page.setHtmlContent() }
を必要とするダイナミックHTMLを構築するために新しい関数を作成します。あなたとして実行するスクリプト。あなたのスクリプトにURLを取得します。
このコードをページから強制的に実行する方法はいくつかあります。 1つのメカニズムは、[サイト]ページのApp Scriptへの呼び出しを挿入することです。ガジェットウィザードでApp Script WebアプリケーションのURLを入力します。
関連する問題
- 1. Google Appスクリプト(Admin SDK)でGoogleグループのメンバーリストを取得するにはどうすればよいですか?
- 2. Google App Engineの静的HTMLからPHPリクエストを作成するにはどうすればよいですか?
- 3. サイトにカスタムGoogleマップを作成するにはどうすればよいですか?新会社のサイトの
- 4. Google App Engineでキューにタスクを動的に追加するにはどうすればよいですか?
- 5. パブリックリンクがないGoogleの動的ページのインデックスを作成するにはどうすればよいですか?
- 6. PythonでApp EngineからGoogle BigQueryでスキーマを作成するにはどうすればよいですか?
- 7. Google App Engineで新しい連絡先を作成するにはどうすればよいですか?
- 8. Google App EngineでPythonでSHA-3-256ハッシュを作成するにはどうすればよいですか?
- 9. Google App Engineでユーザー固有のサブドメインを作成するにはどうすればよいですか?
- 10. Googleスクリプトで作成したファイルのドキュメントIDを取得するにはどうすればよいですか?
- 11. Google App Engineプロジェクトのためのsphinx(readthedocs)ドキュメントを作成するにはどうすればよいですか?
- 12. Google App Engineに常駐インスタンスを作成するにはどうすればよいですか?
- 13. Drive through Googleスクリプトのフォルダ内にフォルダを作成するにはどうすればよいですか?
- 14. Google App Engineを使用してRESTアプリケーションを作成するにはどうすればよいですか?
- 15. Google Appsスクリプトを使用してピボットテーブルを作成するにはどうすればよいですか?
- 16. Google App Engineで安心してデータサービスを作成するにはどうすればいいですか?
- 17. Google App EngineからGoogle Drive APIを使用するにはどうすればよいですか?
- 18. 自動作成するスクリプトを作成するにはどうすればよいですか?
- 19. Googleマップを作成するにはどうすればいいですか?
- 20. Google Earth:カスタムバルーンを作成するにはどうすればいいですか?
- 21. Google App Engineで効率的なマップタイルエンジンを実装するにはどうすればよいですか?
- 22. ember 2.0コンポーネントで動的クラス名を作成するにはどうすればよいですか?
- 23. Google DFPタグを自動的に生成するにはどうすればよいですか?
- 24. Google App Engine:RequestHandlerから静的ファイルを提供するにはどうすればよいですか?
- 25. AWSサーバーレス構成でWeb AppがGoogleログイントークンを更新するにはどうすればよいですか?
- 26. 動的ルートを作成するにはどうすればよいですか?
- 27. 動的URLを作成するにはどうすればよいですか?
- 28. Google App Engine(GAE)上で動作するWeb2pyに新しいauth_userとauth_groupを作成するにはどうすればよいですか?
- 29. JUnitからGoogle App Engine Java開発サーバーを起動するにはどうすればよいですか?
- 30. 動的ナビゲーションで動的コンテンツを作成するにはどうすればよいですか?
新しいGoogleサイトやクラシックのサイトを使用していますか?このページの免責事項を参照してください:https://developers.google.com/apps-script/reference/sites/page – terrywb
私は古典的なサイトを使用しています。 – LadyT
[mcve]を作成し、質問にコードを追加してみてください。 –