Google에서 가젯은 웹에 삽입할 수 있는 HTML 및 자바스크립트 애플리케이션입니다. 기타 앱(예: 사이트 도구)에 액세스할 수 있습니다. 이러한 가젯은 미니 애플리케이션 및 데이터베이스 기반 목록과 같은 사이트 내의 동적 콘텐츠 텍스트와 이미지로 통합하여 원활한 사용자 경험을 제공합니다
모든 사이트 페이지는 잠재적인 가젯 컨테이너입니다. 또한 사이트 도구는 함께 사용할 수 있는 Data API 유용한 애플리케이션을 만들 수 있습니다. 즉, 가젯 개발자는 기존 Sites API를 활용하여 다른 웹 개발자와 잠재고객을 위한 흥미로운 도구를 활용할 수 있습니다
사이트 도구용 가젯을 만들면 현재 수백만 명의 사용자가 누구인지 알아보세요. Google에 가젯을 제출하기만 하면 사용자가 쉽게 탐색, 설정 및 Sites.
이제 {sites_name_short}가 가젯을 위한 훌륭한 배포 플랫폼이라는 것을 알고 계실 것입니다. 기다렸나요? 지금 사이트 도구용 가젯을 만들어 보세요.
사이트 도구 가젯 개요
일반적으로 가젯은 외부 정보를 생성하거나 웹으로 가져오는 소형 유틸리티입니다. 있습니다. 가장 간단한 형태의 가젯은 한 번에 여러 웹페이지에서 사용할 수 있도록 만들 수 있습니다. 사이트 도구(가젯 결과 포함) 이 외부 정보를 전달하는 통로 역할을 하는 iframe에 있습니다. 일부 가젯은 더 이상 작동하지 않습니다. 다른 웹사이트의 정보를 통과하는 iframe입니다.
고급 가젯은 동적 콘텐츠를 수집하고 사이트 페이지 가젯 예를 참고하세요.
가젯은 다음 구성요소로 이루어져 있습니다.
- 가젯 사양 파일 - HTML 및 자바스크립트 함수를 래핑하는 .xml 파일입니다.
- 컨테이너 페이지 - 가젯이 삽입된 웹페이지(이 경우 Google 사이트)입니다.
- 외부 데이터 소스 - 선택사항이며 .xml 파일과 동일한 위치에 있을 수 있지만 보통 HTTP를 통해 가젯 사양에 의해 호출되어 결과를 제공합니다.
사이트의 모든 뷰어가 사이트를 사용할 수 있습니다. 일반적으로 상호작용하면서 동적 콘텐츠로 구성되고 콘텐츠의 내용을 보완하도록 사이트
캘린더 가젯이 이러한 구분의 좋은 예입니다. 맞춤형 캘린더 가젯 은 로그인한 사용자의 캘린더를 기본적으로 표시하는 반면 캘린더 가젯은 를 사용하면 공동작업자가 다양한 위치별 캘린더에서 선택할 수 있습니다.
사이트 도구 가젯을 사용하면 외부 소스 (예: 서로 관련이 있지만 연관성이 높은 실적 대시보드의 라이브 다이어그램)을 한 페이지에서 확인할 수 있습니다. 사이트 도구에 직접 게시된 설명 텍스트 이렇게 하면 정보를 수집할 때 시각적 공간을 절약할 수 있습니다. 동일한 주제의 이질적인 정보를 동일한 뷰에 표시할 수 있습니다. 또한 가젯을 사용하면 사이트 도구 보안 검사에 의해 차단될 수 있는 동적 콘텐츠가 포함됩니다.
경고: 기존
가젯 API는 사이트 도구에서 작동할 수 있지만 공식적으로는 지원되지 않습니다. 기본 제공 및 피드 기반 가젯
마찬가지로 지원되지 않습니다. 따라서 모든 사이트 도구 가젯을 작성하는 것이 좋습니다.
최신 가젯.* 또는 Compute Engine API를 통해
만들 수 있습니다 이 게시물에서 설명을 참고하세요.
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
예시 가젯
다음은 다른 웹 콘텐츠를 전달할 수 있는 iframe을 제공하는 것 이상의 기능을 제공하는 간단하지만 널리 사용되는 포함 가젯입니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
description="Include another web page in your Google Site"
thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
height="800" width="600" author="Google">
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref name="iframeURL" display_name="URL to content" required="true"/>
<UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
<EnumValue value="auto" display_value="Automatic"/>
<EnumValue value="no" display_value="No"/>
<EnumValue value="yes" display_value="Yes"/>
</UserPref>
<Content type="html" view="default,canvas">
<div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(doRender);
function doRender(){
// setup variables
var prefs = new gadgets.Prefs();
var iframeURL = prefs.getString('iframeURL');
var scroll = prefs.getString('scroll');
var height = 800;
var width = 600;
if (gadgets.window) {
var viewport = gadgets.window.getViewportDimensions();
if (viewport.width) {
var width = viewport.width;
}
if (viewport.height) {
var height = viewport.height;
}
}
var iframe = document.createElement('iframe');
iframe.setAttribute('width', width + 'px');
iframe.setAttribute('height', height + 'px');
iframe.setAttribute('frameborder','no');
if(scroll){
iframe.setAttribute('scrolling', scroll);
}
iframe.setAttribute('src', iframeURL);
// set the slideshow to the placeholder div
var dest = document.getElementById('dest');
dest.innerHTML = '';
dest.appendChild(iframe);
}
</script>
</Content>
</Module>
시작하기: 가제트*를 참조하세요. API를 참조하세요.
가젯 호스팅
가젯의 기능에 관계없이, 가젯의 파일은 월드 와이드 웹에 있어야 찾을 수 있고 있습니다. 인증 없이 HTTP를 통해 액세스할 수 있는 모든 온라인 위치는 있습니다. 공개 디렉토리에 게시해야 선택할 수 있으니 유의하시기 바랍니다. 그렇지 않으면 사용자가 URL을 직접 삽입하여 삽입해야 합니다.
가젯 호스팅 옵션은 다음과 같습니다.
- App Engine - 가젯에 필요한 모든 파일을 저장할 수 있습니다. 프로젝트 생성 및 후속 파일 업로드와 같은 몇 가지 설정이 필요합니다. 하지만 많은 수의 사용자에 맞게 쉽게 확장할 수 있습니다. 다음과 같은 app.yaml 파일을 비롯하여 모든 가젯을 저장하는 애플리케이션과 정적 파일을 제공하는 애플리케이션을 만들 수 있습니다.
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
모든 가젯 파일을 정적 디렉터리에 넣으면 변경할 때마다 로컬 디렉터리의 파일을 수정하고 App Engine에 배포할 수 있습니다. /static/gadget.xml 파일이 있는 경우 URL은 http://<your-app-name>.appspot.com/static/gadget.xml입니다.
- 원하는 모든 온라인 위치 - 사용자가 전적으로 제어할 수 있지만 전적인 책임을 집니다 서버 다운타임으로 인해 가젯 사용자가 중단될 수 있습니다.
가젯 작성
가젯은 HTML일 뿐이며, 선택적으로 XML로 래핑된 JavaScript, Flash 또는 Silverlight입니다. 가젯 개발자 가이드에는 나만의 가젯을 만드는 데 필요한 모든 세부정보가 나와 있습니다. 또한 OpenSocial 템플릿을 사용하여 가젯에서 소셜 애플리케이션을 빠르게 구축할 수 있습니다.
사이트 도구용 가젯을 만들기 위한 대략적인 단계는 다음과 같습니다.
- 가젯을 호스팅할 위치를 결정합니다. 옵션에 대한 설명은 가젯 호스팅 섹션을 참조하세요.
- 원하는 텍스트 편집기를 사용하여 사양으로 사용할 새 .xml 파일을 만듭니다.
- 콘텐츠 유형(HTML 또는 URL)을 결정한 후 다음과 같이 가젯 .xml 파일 내에 지정합니다.
<Content type="html">
대부분의 경우 HTML로, 모든 콘텐츠가 .xml 파일에서 직접 제공된다고 가정합니다. 하지만 콘텐츠를 별도의 파일로 제공하려면 URL 콘텐츠 유형을 사용하세요. 차이점에 대한 자세한 설명은 콘텐츠 유형 선택을 참조하세요. - 가젯 .xml 파일 또는 사양에 의해 호출되는 별도의 파일에 콘텐츠를 만듭니다. 기존 가젯을 검토하는 방법은 예제 가젯 보기 섹션을 참조하세요.
- 사용자가 변경할 수 있는 가젯에 대한 기본 환경설정을 정의합니다. 안내를 보려면 사용자 환경설정 정의를 참조하세요. 더 많은 고급 구성을 제공하려면 고급 사용자 구성 허용 섹션을 참고하세요.
- 가젯 작성자만 변경할 수 있는 모듈 환경설정을 정의합니다. 자세한 내용은 가젯 환경설정 정의를 참조하세요.
- 가젯을 테스트합니다. 안내를 보려면 가젯 테스트 섹션을 참조하세요.
가젯 삽입
가젯은 사이트 가젯 디렉토리 (iGoogle 가젯 디렉토리와 동기화됨)에서 선택하거나 URL을 직접 포함하여 사이트 페이지에 삽입할 수 있습니다.
사이트 도구에 가젯을 삽입하려면 다음 단계를 따르세요.
- 새 가젯이 포함될 사이트 페이지로 이동합니다.
- 수정할 페이지를 엽니다.
- 삽입을 선택합니다. 가젯 더보기
- 가젯을 검색하거나 왼쪽 카테고리에서 선택하거나 URL로 가젯 추가를 클릭한 다음 URL을 .xml 파일에 붙여넣습니다. 그런 다음 추가를 클릭합니다.
도움말: URL로 가젯 추가와 동일한 기능을 사용하여 iGoogle을 비롯한 온라인 어디에서든 가젯을 삽입할 수 있습니다. - 가젯의 크기를 지정하고 사용 가능한 설정에서 선택한 다음 확인을 클릭합니다. 가젯이 추가되었습니다. 추가할 수 있습니다.
- 페이지를 저장하여 사이트에서 가젯을 보고 테스트합니다.
가젯 테스트
가젯을 만든 후에는 철저히 테스트한 후에 사용해야 하며, 다른 사용자가 이를 사용하도록 허용해야 합니다. 같은 작업을 수행합니다. 하나 이상의 테스트 Google Sites를 만들고 삽입하여 수동으로 가젯 테스트 추가할 수 있습니다. 정확한 단계는 가젯 삽입 섹션을 참조하세요. 이 가젯의 기능과 모양은 있습니다. 따라서 가젯을 디버깅하는 가장 좋은 방법은 확인할 수 있습니다. 다양한 Sites 테마 간에 전환하여 각 테마에서 가젯이 제대로 표시되도록 하세요.
가젯을 테스트하다 보면 필연적으로 버그를 발견하고 바로잡아야 할 것입니다. 추가해야 합니다. 수정해 보겠습니다 그렇지 않으면 변경사항이 페이지에 표시되지 않습니다. 가젯 사양은 사이트 도구에 요청하지 않는 한 캐시됩니다. 개발 중에 캐시를 우회하려면 가젯 사양 .xml 파일의 URL이 아니라 가젯이 포함된 사이트 페이지 URL의 끝부분에 다음을 추가하세요.
?nocache=1
사이트 도구는 가젯을 추가하고 구성하기 위한 표준 UI를 제공합니다. 가젯을 추가하면 미리보기가 표시되고 구성 가능한 모든 UserPref 매개변수가 표시됩니다. 다양한 구성 값 업데이트 테스트
테스트 사이트에 가젯을 추가해 보세요. 에서 가젯이 예상대로 작동하는지 확인합니다.
있습니다. kubectl run을 사용하여
정의한 UserPref는 사이트 관리자가 올바르게 구성할 수 있습니다.
그런 다음 수행할 다른 테스트에 대해서는 가젯 게시의 게시 준비 섹션을 참조하세요.
고급 사용자 구성 허용
모든 가젯은 가젯 사양 파일의 UserPref 섹션을 통해 기본 사용자 환경설정을 설정하는 기능을 제공할 수 있습니다. 이는 일반적으로 다음 스크린샷에 표시된 대로 크기, 스크롤바, 테두리, 제목 및 가젯 관련 설정에 영향을 미칩니다.
하지만 표준 UserPref 구성요소가 제공하는 것보다 더 고급 환경설정이 가젯에 도움이 되는 경우도 많습니다. 환경설정에는 맞춤 비즈니스 로직, 유효성 검사 또는 선택 도구와 같은 기능이 포함되어야 하는 경우가 많습니다. 가젯 UserPref 섹션에서 생성된 인터페이스는 제한된 수의 데이터 유형 (문자열, enum 등)을 지원하므로 URL 또는 날짜와 같은 입력의 유효성 검사를 수행할 수 없습니다.
또한, 뷰어와 편집자가 동일한 iframe과 같은 컨테이너에서 가젯 작성자가 표준 보기의 일부로 구성을 확장할 수 있습니다. 사이트 도구에서 뷰어가 항상 편집자 역할을 하지는 않으므로, 가젯 작성자는 조회 중인 사용자에게 환경설정 업데이트에 대한 액세스 권한이 있다고 보장할 수 없습니다. 사이트 도구와 같은 소셜 컨테이너에서는 어떤 사용자도 환경설정을 수정할 수 없으며 작성자만 수정할 수 있습니다.
Sites에서는 UserPref에 의해 생성된 기본 가젯 환경설정 인터페이스를 구성 보기로 대체할 수 있습니다. 구성 보기에서는 아래 스크린샷과 같이 많은 환경설정과 데이터 유형이 제공될 수 있습니다.
구성 뷰는 삽입 시 또는 수정 시 UserPref 설정 대신 표시되며 맞춤 인터페이스로 사용자 환경설정을 지정할 수 있습니다. 또한 지도 좌표를 입력하는 대신 지도에서 위치를 선택하는 경우와 같이 맞춤 입력 요소를 사용할 수도 있습니다.
개발자는 표준 setprefs API를 사용하여 이 뷰에 환경설정을 저장할 수 있습니다. 자세한 내용은 가젯 XML 참조와 개발자 기초의 상태 저장 섹션을 참조하세요. 이러한 뷰를 사용하면 컨테이너 애플리케이션이 추가 구성 정보를 제공할 수 있으며, 다음과 같은 여는 태그가 있는 UserPref 섹션 다음에 가젯 .xml 사양 파일에서 설정됩니다.
<Content type="html" view="configuration" preferred_height="150">
예를 들어, 위의 구성 보기를 제공하는 news.xml 가젯에는 다음 섹션이 포함되어 있습니다.
<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
.config-options {
margin: 10px;
}
.label {
font-weight: bold;
width: 35%;
vertical-align: top;
}
.gray {
color:#666666;
}
html {
font-family:arial,sans-serif;
font-size:0.81em;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5;
}
a:link, a:visited, a:active { text-decoration: none }
</style>
<img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
<table class="config-options">
<tr>
<td align="left" class="label">Size:</td>
<td align="left">
<select id="size" onchange="Update()">
<option selected="selected" value="300x250">Medium rectangle (300x250)</option>
<option value="728x90">Leaderboard (728x90)</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="label">Select sections:</td>
<td align="left">
<table>
<tbody><tr>
<td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
<td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
<td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
<td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
<td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
<td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
<td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
</tr></tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="label">Or create one:</td>
<td align="left">
<input type="text" id="query" onchange="Update()"/>
<br/>
<span class="gray">Example: 2010 Olympics</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
<iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
style="border:0;margin:0;"
scrolling="no" allowtransparency="true"></iframe>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function getSelectedTopics() {
var selected = [];
var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
for (var i = 0; i < topics.length; i++) {
if (document.getElementById('sec_' + topics[i]).checked) {
selected.push(topics[i]);
}
}
return selected.join(',');
}
function setSelectedTopics(selected) {
if (selected && selected.length >= 0) {
var topics = selected.split(',');
for (var i = 0; i < topics.length; i++) {
document.getElementById('sec_' + topics[i]).checked = true;
}
}
}
function Update() {
var topic = getSelectedTopics();
var query = document.getElementById('query').value;
var size = document.getElementById('size').value;
var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
'format=SIZE&element=true';
var iframe = document.getElementById('preview_ifr');
url = url.replace(/SIZE/, size);
if (topic.length > 0) {
url += '&topic=' + topic;
}
if (query.length > 0) {
url += '&q=' + encodeURIComponent(query);
}
iframe.src = url;
if (size == '728x90') {
iframe.style.width = '728px';
iframe.style.height = '90px'
} else {
iframe.style.width = '300px';
iframe.style.height = '250px';
}
prefs.set('size', size);
prefs.set('topic', topic);
prefs.set('query', query);
gadgets.window.adjustHeight();
}
function Initialize() {
var size = '__UP_size__';
if (size.length > 0) {
document.getElementById('size').value = size;
}
var query = '__UP_query__';
if (query.length > 0) {
document.getElementById('query').value = query;
}
setSelectedTopics('__UP_topic__');
Update();
}
gadgets.util.registerOnLoadHandler(Initialize);
</script>
</Content>
다음 링크에서 이 예와 구성 보기가 포함된 기타 사이트 도구 전용 가젯을 확인할 수 있습니다.
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml
사이트 도구 가젯 권장사항 따르기
웹에서 멋진 사이트를 만들고자 하는 사이트. 이러한 권장사항을 따르면 가젯은 사이트 도구에서 사용되는 다양한 테마와 자연스럽게 어우러집니다. 자세한 내용은 가젯 만들기에 대한 자세한 내용은 가젯 개요를 참조하세요. 나머지 이 섹션에서는 사이트 도구 가젯에 대한 가이드라인을 제시합니다.
- 가젯은 누구나 볼 수 있으므로 가젯 사양이나 제목에 민감한 정보를 넣지 마세요. 예를 들어 내부 프로젝트 이름은 포함하지 마세요.
- 가젯이 눈에 잘 띄도록 하기 위해, 가젯을 iGoogle 가젯 디렉토리나 다른 공개 목록 서비스에 제출해서는 안 됩니다. 대신 모든 사용자가 URL로만 포함하도록 하세요. 또한 모든 콘텐츠를 포함하는 일반적인 HTML 유형이 아닌 해당 콘텐츠를 위해 다른 파일을 호출하는 URL 유형 가젯을 만들 수도 있습니다. 이 패스 스루 옵션을 사용하면 두 번째 파일의 URL만 노출됩니다. HTML과 URL 가젯의 차이는 개발자 기초의 콘텐츠 유형 선택 섹션을 참조하고, 가젯을 마스킹하는 다른 방법에 대해서는 가젯은 나만의 가젯 작성하기의 공개 섹션을 참조하세요.
- 가장 중요한 것은 여러 사이트에서 가젯을 테스트하는 것입니다. 가젯이 다양한 템플릿과 섞일 수 있도록 사이트의 배경색, 텍스트 색상 및 글꼴을 수정합니다.