본 설명서에서는 가젯 개발 과정에 필수적인 개념 및 작업에 대해 찾아볼 수 있습니다. Google 가젯 API 사용에 대한 소개는 시작하기를 참조하세요.
콘텐츠 유형은 가젯을 개발할 때 가장 먼저 결정해야 할 사항 중 하나입니다. 다음은 해당 예입니다.
<Content type="html">
콘텐츠 유형에 따라 다음 사항이 결정됩니다.
다음 표는 사용 가능한 콘텐츠 유형 및 유형별 용도를 정리한 것입니다.
| 콘텐츠 유형 | 설명 | 용도 |
|---|---|---|
| html | html 콘텐츠 유형을 사용하는 경우 일반적으로 모든 콘텐츠가 가젯 사양에 포함되어 있습니다. type="html" 가젯에는 HTML이 포함되고 해당 HTML에는 JavaScript, Flash, ActiveX 또는 기타 브라우저 개체도 함께 포함될 수 있습니다. 해당 모델이 기본 유형입니다. |
가장 유연성이 뛰어난 다용도 콘텐츠 유형은 html입니다. 아직 가젯 만들기에 익숙치 않으면 html 콘텐츠 유형을 선택하세요. |
| html-inline | html-inline 콘텐츠 유형을 사용하면 가젯 HTML은 iframe이 아닌 상위 페이지의 일부로 렌더링됩니다. 따라서 가젯에 폰트 색상 변경 등 상위 페이지를 수정할 수 있는 권한이 부여됩니다. |
가젯에서 상위 페이지를 수정해야 할 경우 html-inline 형식을 사용하는 것이 좋습니다. 그렇지 않으면 제약이 많습니다. 해당 콘텐츠 유형은 다른 Google 사이트에는 사용할 수 없으며 html-inline 가젯은 콘텐츠 디렉토리에 포함되지 않습니다. |
| url | url 콘텐츠 형식을 사용하면 가젯 콘텐츠는 가젯 사양의 URL에서 참조하는 원격 웹페이지에 포함합니다. 원격 웹페이지는 모든 HTML 마크업 및 JavaScript가 포함된 곳입니다. 따라서 HTML 마크업 또는 JavaScript 코드를 가젯 사양 안에 포함시킬 필요가 없습니다. |
type="url" 가젯에서 Google 가젯 JavaScript 라이브러리를 사용하는 데에는 약간의 제약이 따릅니다. 또 다른 제약사항은 type="url" 가젯에 _IG_Fetch... 함수를 사용할 수 없다는 것입니다. url 콘텐츠 유형은 기존 응용 프로그램 또는 웹페이지를 가젯으로 변경하는 경우에 가장 이상적입니다. 또한 로그인이 필요한 가젯의 경우에 있어서도 최적의 방법이 됩니다. url 형식은 JavaScript보다 스크립트 언어를 선호하는 전문가에게 안성맞춤입니다. |
html 콘텐츠 유형의 경우, 일반적으로 가젯 XML 및 임의의 HTML 마크업과 JavaScript 등 모든 코드가 가젯 사양에 포함됩니다. 본 개발자 가이드의 거의 모든 예는 html 콘텐츠 유형을 사용합니다. 해당 콘텐츠 유형은 가장 유연성이 뛰어난 다용도 유형으로, 특별한 요구사항이 있는 가젯을 만드는 경우만 제외하면 대부분의 경우에 사용할 수 있습니다.
다음 예는 ROT13의 가젯을 구현한 것입니다. ROT13은 각 문자를 알파벳 순서에서 오른쪽으로 13번째 위치에 있는 문자를 대체하는 방식으로 텍스트를 암호화합니다. 그 다음 ROT13을 다시 적용하면 각 문자를 다시 회전시켜 원본 텍스트를 복원합니다.
다음은 실행 중인 가젯입니다. 한번 사용해 보세요. 메시지를 인코딩한 후 텍스트 상자에 붙여넣고 "Transform"을 다시 클릭하세요. 원본 메시지가 복원됩니다.
가젯 사양은 다음과 같습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Magic Decoder"/>
<Content type="html">
<![CDATA[
<script type="text/javascript">
// The gadget version of ROT13.
// Encodes/decodes text strings by replacing each letter with the letter
// 13 positions to the right in the alphabet.
function decodeMessage (form) {
var alpha = "abcdefghijklmnopqrstuvwxyz";
var input = form.inputbox.value;
var aChar;
var message = "";
for (var i = 0; i <input.length; i++)
{
aChar = input.charAt(i);
var index = alpha.indexOf(aChar.toLowerCase());
// if a non-alphabetic character, just append to string
if (index==-1)
{
message += aChar;
}
// if you have to wrap around the end of the alphabet
else if(index > 12) { // compensate for 0-based index
index = 25 - index; // last item in array is at [25]
index = 12 - index; // because array starts with 0
aChar = alpha.charAt(index);
message += aChar;
}
// if you don't have to wrap
else {
aChar = alpha.charAt(index+13);
message += aChar;
}
}
_gel('content_div').innerHTML = "<b>Your message: </b>" + message;
}
</script>
<FORM NAME="myform" ACTION="" METHOD="GET">Message: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Transform" onClick="decodeMessage(this.form)">
</FORM>
<div id="content_div"></div>
]]>
</Content>
</Module>
type="html" 가젯의 규칙은 다음과 같습니다.
<Content type="html">
<![CDATA[ HTML here... ]]>
CDATA 섹션은 마크업으로 간주될 문자가 포함된 텍스트 블록을 이스케이프 처리하는 데 사용됩니다. CDATA 섹션에서 인식할 수 있는 유일한 구분 기호는 CDATA 섹션을 종료하는 "]]>" 문자열입니다.
또한 html 콘텐츠 유형의 가젯은 외부 JavaScript 파일을 참조합니다.
<Module>
<ModulePrefs ... />
<Content type="html"><![CDATA[
<script src="http://www.example.com/gadgets/clock/clock.js" type="text/javascript"></script>
]]></Content>
</Module>
html-inline 콘텐츠 유형을 사용하면 상위 페이지를 수정하는 가젯을 만들 수 있습니다. 해당 가젯을 '인라인된 가젯'이라고 합니다.
예를 들어, 다음과 같은 간단한 html-inline 가젯은 iGoogle 페이지의 배경 색상을 분홍색으로 바꿉니다.
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Inline Test"/>
<Content type="html-inline">
<![CDATA[
<h4>Everything looks better in pink.</h4>
<script type="text/javascript">
_IG_RegisterOnloadHandler(function () {
// Turn the personalized homepage background pink.
document.body.style.backgroundColor="Pink";
});
</script>
]]>
</Content>
</Module>
기본적으로 가젯 콘텐츠는 iframe으로 묶여 있습니다. iframe은 사실상 상위 페이지 내에서 실행되는 페이지로, 상위 페이지를 인식하지 못하고 상위 페이지와 상호작용할 수 없습니다. 이는 쿠키를 훔치거나 수정하려는 악성 가젯으로부터 사용자를 보호하는 데 도움이 됩니다. 하지만 iframe에는 가젯 간 또는 가젯과 페이지의 다른 구성 요소와의 상호작용을 허용하지 않는다는 제약이 있습니다.
이런 제약을 극복하기 위해 인라이닝을 사용할 수 있는데, 이때 가젯은 iGoogle 페이지 HTML의 일부가 됩니다. 실제 작동 상태를 확인하려면 인라이닝된 가젯(예: 개발자 가젯)을 iGoogle에 추가하고 HTML 소스를 확인하세요. 전체 가젯 사양을 HTML로 볼 수 있습니다. 이를 가젯 사양 URL을 통해 HTML 소스에서 단순히 참조되기만 하는 동일한 페이지의 iframe 가젯과 비교해 보세요.
인라이닝의 장점은 iGoogle DOM을 수정할 수 있다는 점입니다. 예를 들어, googlelogo.xml을 확인해 보세요. 하지만 인라이닝에는 다음과 같은 단점이 있습니다.
가젯을 인라이닝하려면 다음 단계를 따르세요.
키워드 __MODULE_ID__는 고유한 가젯 ID의 자리 표시자입니다. 런타임 시 가젯 콘텐츠의 모든 __MODULE_ID__ 문자열이 해당 가젯의 고유한 ID로 대체됩니다. 한 페이지의 모든 가젯은 서로 다른 ID를 가집니다. 따라서 한 페이지에서 인라이닝된 가젯을 여러 개 실행할 수 있습니다.
먼저 가젯을 백업하거나 복사하는 것이 좋습니다.
페이지가 로드될 때까지는 인라이닝된 가젯의 렌더링이 보류되어야 합니다. 그렇지 않으면 인라이닝된 가젯이 오작동할 수 있기 때문에 해당 단계가 중요합니다. iframe 가젯의 경우, JavaScript 코드가 자동으로 실행되기 때문에 처리기를 온로드(onload)할 필요가 없습니다.
다른 가젯을 사용하거나 인라이닝된 가젯의 두 번째 인스턴스를 페이지에 추가하는 방식으로 가젯을 테스트하세요.
가젯에 type="url" 콘텐츠 유형이 있으면 href= 속성에서 URL을 제공하고 가젯 사양에 있는 다른 콘텐츠는 무시됩니다. url 콘텐츠 유형에서는 가젯의 사용자 인터페이스 및 프로그래밍 로직에 관한 모든 정보가 URL이 참조하는 파일에 있다고 가정합니다. 따라서 HTML 마크업 또는 JavaScript 코드를 가젯 안에 포함시킬 수 없습니다. 다음은 해당 예입니다.
<Module> <ModulePrefs ... /> <Content type="url" href="http://www/cgi-bin/example/gadgets/mystats.cgi" /> </Module>
type="url" 가젯에서 Google 가젯 JavaScript 라이브러리를 사용하기 위한 단계에 대한 설명은 type="url" 가젯에서 JavaScript 라이브러리 사용을 참조하세요.
특수 문자 이스케이프에서 설명한 대로, type="url" 가젯의 URL에서 특수 문자의 이스케이프를 정확하게 처리해야 합니다.
type="url" 가젯에 _IG_Fetch... 함수를 사용할 수 없습니다.
기본적으로 가젯은 iframe으로 표시됩니다. 코드를 삽입하여 별도로 지정하지 않는 경우 Iframe에는 투명한 여백이 포함됩니다. 콘텐츠 유형이 html인 가젯은 여백을 제거하기 위한 코드와 함께 자동으로 생성됩니다. 하지만 콘텐츠 유형이 type="url"인 경우, 가젯 표시 방법을 직접 관리해야 합니다. 여백을 제거하려면 가젯이 참조하는 HTML 파일에 다음 텍스트를 추가하세요.
<style type="text/css"> body {margin: 0px;} </style>
다음 예에서는 type="url" 가젯의 URL에서 전달되는 매개변수 키-값 쌍을 추출하여 타겟 스크립트나 페이지에 사용하는 방법을 볼 수 있습니다.
iGoogle 페이지에서 가젯 URL을 요청하면 매개변수가 해당 요청에 추가되는데 이는 GET 방식입니다. 해당 방식은 콘텐츠 유형이 url로 설정되어 있는 경우에만 적용됩니다. 해당 매개변수는 JavaScript를 사용하는 가젯 또는 서버측 웹 응용 프로그램에서 읽을 수 있습니다.
전달되는 매개변수 목록은 참조에서 확인할 수 있습니다.
해당 예의 가젯에는 타겟 PHP 스크립트 params.php에 대한 참조가 포함되어 있습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Preferences for __UP_myname__" height="250" /> <UserPref name="mychoice" display_name="List Params?" datatype="bool"/> <UserPref name="myname" display_name="Name" required="true"/> <UserPref name="mycolor" display_name="Color" default_value="Blue" datatype="enum"> <EnumValue value="Red"/> <EnumValue value="Blue"/> <EnumValue value="Green"/> <EnumValue value="Yellow"/> <EnumValue value="Pink"/> <EnumValue value="Orange"/> <EnumValue value="White"/> </UserPref> <Content type="url" href="http://www.example.com/params.php"/> </Module>
타겟 페이지는 JavaScript를 사용하여 가젯이 URL로 전달하는 매개변수를 처리합니다.
다음은 사용자 환경설정 수정 상자를 열어놓은 상태에서 가젯을 실행하는 예입니다. 사용자에게는 타겟 HTML 페이지로 전달되는 매개변수 목록을 작성할 수 있는 옵션이 주어집니다. "List Params" 확인란을 선택하지 않으면 목록 대신 인사말이 표시됩니다.
가젯은 GET 요청에서 매개변수를 키-값의 쌍으로 전달합니다. 사용자 환경설정은 &up_userpref=value 형식의 매개변수로 전달됩니다. 예를 들어, 해당 샘플 가젯에는 mycolor라는 사용자 환경설정이 있습니다. 설정이 'Pink'인 경우, URL에서 &up_mycolor=Pink로 전달됩니다. 해당 가젯에 대해 전달되는 URL은 다음과 같습니다.
http://www.example.com/~rowan/gadgets/index.html?up_mychoice=1&up_myname=Foster&up_mycolor=Pink&.lang=en&.country=us
다음은 가젯 사양에서 참조하는 params.php 파일입니다. type="url" 가젯에서 JavaScript 라이브러리 사용에 설명된 대로 PHP 코드는 가젯에 전달된 URL에서 라이브러리를 분리하여 가젯에 추가합니다. JavaScript 코드는 _args() 함수를 사용하여 URL 매개변수를 조합 배열로 가져옵니다.
타겟 HTML 페이지의 JavaScript는 매개변수를 배열에 저장하고 사용자가 지정한 환경설정에 따라 가젯 설정을 수정합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css"> </style>
<TITLE> Userprefs Params Example </TITLE>
</HEAD>
<BODY>
<div id="content_div" style="font-size:12pt; padding:5px;"></div>
<?php
// Parse gadget URL and emit <script src=...</script> statements into the HTML output.
// The <script src=...</script> statements will load the libraries passed in via the URL.
$libraries = split(",", $_GET["libs"]);
foreach ($libraries as $script) {
if (preg_match('@^[a-z0-9/._-]+$@i', $script)
&& !preg_match('@([.][.])|([.]/)|(//)@', $script)) {
print "<script src='http://www.google.com/ig/f/$script'></script>";
}
}
?>
<script type="text/javascript">
// Set background color according to user choice.
var element = document.getElementById('content_div');
element.style.backgroundColor = _args()["up_mycolor"];
// Build HTML string used to display content
var html = "";
// If checkbox ("List KVPs") is not checked, display personal welcome message. // Use _args() function to access the parameter name-value pairs. if (_args()["up_mychoice"]==0) { element.style.height=200; html += "<br><br><br><br><FONT SIZE=6>Welcome, " + _args()["up_myname"] + "!!!<br> </FONT>"; } // Otherwise, if box is checked, list KVPs. else { html += "<br><B>Params Passed in URL: </B><br><br>"; // Iterate through the _args() associative array to print out all of the parameter key-value // pairs passed in the URL. for(var param in _args()) { var value = _args()[param]; html +=param +"="+ value + "<br>"; } } _gel("content_div").innerHTML = html; </script> </BODY> </HTML>
Google 가젯 API에는 두 종류의 JavaScript 라이브러리가 있습니다. 하나는 코어 라이브러리이고 다른 하나는 탭, 동적 높이 및 환경설정 등의 기능을 위한 기능 라이브러리입니다. 코어 라이브러리는 일반적인 기능을 제공하고 기능 라이브러리는 특정 기능을 위한 함수를 제공합니다.
다음 표에는 각 가젯 유형에서 Google 가젯 JavaScript 라이브러리를 사용하기 위해 수행해야 하는 작업이 요약되어 있습니다.
| 콘텐츠 유형 | JavaScript 라이브러리 사용과 관련된 제한사항 | JavaScript 코어 라이브러리를 사용하기 위한 단계 | JavaScript 기능 라이브러리를 사용하기 위한 단계 |
|---|---|---|---|
| html | 없음. | 특별한 작업 없이도 코어 라이브러리 함수를 사용할 수 있습니다. | 가젯 사양에 해당 라이브러리를 포함시키려면 <Require feature="[feature]"/> 문구를 삽입해야 합니다. |
| html-inline | 없음. | 특별한 작업 없이 코어 라이브러리 함수를 사용할 수 있습니다. | 가젯 사양에 해당 라이브러리를 포함시키려면 <Require feature="[feature]"/> 문구를 삽입해야 합니다. |
| url | href 가젯에서는 PHP, Python, Java 또는 CGI 스크립트 같은 서버측 스크립트를 참조해야 합니다. href는 일반 HTML/JavaScript 파일을 가리킬 수 없습니다. |
type="url" 가젯의 경우 코어 라이브러리는 항상 URL로 전달됩니다. 가젯은 URL을 구문분석하여 라이브러리를 추출하고 전송된 HTML에 포함되도록 <script src=...</script> 문구를 만들어야 합니다. 해당 명령문은 가젯에 라이브러리를 로드하도록 지시합니다. |
가젯 사양에는 해당 라이브러리를 포함하도록 <Require feature="[feature]"/> 문구가 포함되어야 합니다. 가젯이 전송된 HTML에 포함되려면 URL을 구문분석하여 라이브러리를 추출하고 <script src=...</script> 문구를 생성해야 합니다. 해당 명령문은 가젯에 라이브러리를 로드하도록 지시합니다. |
type="url" 가젯에서 Google 가젯 JavaScript API를 사용하려면 다음 도움말을 따라야 합니다.
http://...&libs=2dhyBXfcpQ8/lib/libcore.js...
위 URL 매개변수는 URL에서 추출되어 전송된 HTML에 추가되는 다음 명령문을 만드는 데 사용되고 해당 명령문은 'Google 가젯 코어 JavaScript 라이브러리를 로드'하도록 지시합니다.
<script src='http://www.google.com/ig/f/2dhyBXfcpQ8/lib/libcore.js'></script>
해당 명령문을 만드는 데 사용된 PHP 코드는 아래 setprefs.php 예제를 참조하세요. '2dhyBXfcpQ8'이라는 문자열은 브라우저가 정확한 버전의 파일을 사용하도록 하는 .js 파일의 콘텐츠에서 만들어진 지문입니다.
다음은 HTML 형식 setprefs 샘플 가젯이 type="url" 가젯으로 변환된 예입니다. 가젯 사양은 다음과 같습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="PHP Userprefs" height="50" >
<Require feature="setprefs" />
</ModulePrefs>
<UserPref
name="counter"
default_value="0"
datatype="hidden"/>
<Content type="url" href="http://www.example.com/mygadgets/setprefs.php"/>
</Module>
다음은 가젯 사양에서 참조하는 setprefs.php 파일입니다.
<html> <head> <?php // Parse gadget URL and emit <script src=...</script> statements into the HTML output. // The <script src=...</script> statements will load the libraries passed in via the URL. $libraries = split(",", $_GET["libs"]);
foreach ($libraries as $script) {
if (preg_match('@^[a-z0-9/._-]+$@i', $script)
&& !preg_match('@([.][.])|([.]/)|(//)@', $script)) {
print "<script src='http://www.google.com/ig/f/$script'></script>";
}
} ?> <script type="text/javascript"> // Get user preferences var prefs = new _IG_Prefs(); // Increment value of "counter" user preference function incrementCounter() { var count = prefs.getInt("counter"); alert("The count is " + count + "."); // Increment "counter" userpref prefs.set("counter", count + 1); } // Reset value of "counter" userpref to 0 function resetCounter(){ prefs.set("counter", 0); alert("Count reset to " + prefs.getInt("counter") + "."); } </script> </head> <body> <input type=button value="Count" name="count" onClick="incrementCounter()"> <input type=button value="Reset" name="reset" onClick="resetCounter()"> </body> </html>
다음 도움말을 따라 기존 웹페이지 또는 응용 프로그램을 가젯으로 변환하세요.
가젯 사양의 모든 사용자 환경설정에는 데이터 유형이 있습니다. datatype은 속성의 데이터 유형을 기정하는 옵션 문자열입니다. datatype의 값은 string, bool, enum, hidden(사용자가 수정할 수 없는 비공개 문자열), list 및 location(Google 지도 기반 가젯)입니다. 기본 데이터 유형은 string입니다.
사용자 환경설정 데이터 유형 및 함수에 대한 자세한 내용은 참조에서 확인하시기 바랍니다.
본 섹션에서는 list 및 location라는 보다 전문적인 두 가지 데이터 형식에 대해 설명합니다. enum, hidden 및 bool같은 나머지 데이터 유형의 사용법과 관련한 예는 설명서에 나와 있습니다.
list 데이터 유형의 사용자 환경설정은 사용자가 런타임에 동적으로 제공하는 값의 배열입니다. 사용자가 사용자 환경설정 수정 상자에 값을 입력하면 해당 값이 목록에 추가됩니다. 가젯에서는 다른 사용자 환경설정과 마찬가지로 런타임에서 프로그래밍 방식으로 목록에 액세스할 수 있습니다. 사용자가 동적으로 임의의 값 목록을 입력하도록 하고 싶으면 언제든지 list 데이터 유형을 사용할 수 있습니다. 예를 들어, 날씨 가젯은 사용자가 우편번호를 입력하도록 합니다.
다음과 같은 샘플 가젯을 예로 들어 보겠습니다. 해당 가젯은 Google 뉴스 정보과학 피드의 링크를 표시합니다. 사용자 환경설정 수정 상자에서 사용자는 Add Search Terms 텍스트 입력란을 통해 목록에 단어를 추가할 수 있습니다. 해당 가젯은 피드 항목의 제목에서 검색어의 인스턴스를 검색합니다. 검색어와 일치하는 내용을 찾으면 항목 링크의 색상을 빨간색으로 변경합니다. 아래 예에는 "abc", "Google" 및 "MACWORLD"라는 세 단어가 목록에 포함되어 있습니다. 해당 단어들이 포함된 링크는 빨간색으로 표시됩니다. 사용자가 관련 항목의 X를 클릭하면 항목을 목록에서 삭제할 수 있습니다.
datatype="list"를 사용하여 사용자 환경설정에 list 데이터 유형이 포함되도록 선언할 수 있습니다. 다음은 해당 예입니다.
<UserPref name="mylist" display_name="Add Search Terms" datatype="list" required="true"/>
가젯은 _IG_Prefs 함수인 getArray()를 사용하여 목록의 값에 액세스합니다.
var search_terms = prefs.getArray("mylist");
배열에서 항목은 파이프로 분리된 목록으로 저장됩니다. _IG_Prefs 함수 getString()을 사용하면 값을 파이프(|) 문자 등으로 구분하는 단일 문자열로 목록을 반환할 수 있습니다.
// For the sample gadget shown above, returns the string "abc|Google|MACWORLD"
prefs.getString("mylist");
또한 파이프로 구분된 문자열을 사용하여 list 형식의 기본값을 설정할 수 있습니다.
<UserPref name="mylist" display_name="Add Search Terms" datatype="list" default_value="zdnet|pc|Apple Insider"/>
_IG_Prefs 함수인 setArray(name, val)를 사용하면 프로그래밍 방식으로 목록에 값을 추가할 수 있습니다. 해당 함수를 사용하려면 가젯의 <ModulePrefs> 아래에 <Require feature="setprefs"/>를 포함시켜야 합니다. 예를 들어, 다음 예제에서는 "Nokia" 및 "CNET" 값을 목록에 추가합니다.
... <ModulePrefs title="Feed Searcher" scrolling="true"> <Require feature="setprefs" />
</ModulePrefs> ... prefs.setArray("mylist", ["Nokia","CNET"]);
다음은 샘플 가젯의 코드입니다. 피드를 표시하는 가젯 만들기에 대한 자세한 내용은 피드 사용을 참조하세요.
<?xml version="1.0" encoding="UTF-8" ?>
<Module> <ModulePrefs title="Feed Searcher" scrolling="true"/> <UserPref name="mylist"
display_name="Add Search Terms"
datatype="list"
required="true"/> <Content type="html"> <![CDATA[ <style type="text/css"> .special-link { color:red; background-color:#BFE4FF; } </style> <style> #content_div { font-size: 80%; margin: 5px; background-color: #80C9FF;} </style> <div id=content_div></div> <script type="text/javascript"> // Get userprefs var prefs = new _IG_Prefs(__MODULE_ID__); // Get the array of search terms entered by the user var search_terms = prefs.getArray("mylist"); // Use the _IG_FetchFeedAsJSON() function to retrieve core feed data from // the specified URL. Then combine the data with HTML markup for display in // the gadget. _IG_FetchFeedAsJSON( "http://news.google.com/?ned=us&topic=t&output=rss", function(feed) { if (feed == null){ alert("There is no data."); return; } // Start building HTML string that will be displayed in gadget. var html = ""; // Display the feed title html += "<div><b>" + feed.Title + "</b></div>"; // Access the data for a given entry if (feed.Entry) { for (var i = 0; i < feed.Entry.length; i++) { // flag used to indicate whether an entry title matches a search term var flag = 0; // Iterate through array of search terms to see if any of them matches // entry title for (var j = 0; j < search_terms.length ; j++) { // Do case-insensitive comparison var titletxt = (feed.Entry[i].Title).toLowerCase(); var term = (search_terms[j]).toLowerCase(); html += "<div>"; // Set flag to 1 if entry title matches one of search terms if ((titletxt.indexOf(term)) != -1){ flag = 1; } } // If the entry title matches one of the search terms, display the entry // link in red text. if (flag!=0){ html += "<a class='special-link' target='_blank' href='" + _hesc(feed.Entry[i].Link) + "'>"; } else { html += "<a target='_blank' href='" + _hesc(feed.Entry[i].Link) + "'>"; } html += _hesc(feed.Entry[i].Title) + "</a> "
+ "</div>"; } } _gel("content_div").innerHTML = html; }, 9); </script> ]]> </Content>
</Module>
Google 지도 기반 가젯은 location 데이터 유형을 사용할 수 있습니다. 다음 샘플 가젯은 location 데이터 유형의 사용법을 보여 줍니다. 가젯의 location 데이터 유형에 제공되는 값은 미국, 캐나다, 영국의 대도시 또는 우편번호여야 합니다. 우편번호를 사용하는 경우 더 정확한 결과를 얻을 수 있습니다.
location 데이터 유형을 사용할 때 getString()을 사용하여 사용자 지정 위치의 위도와 경도를 가져올 수 있습니다.
<Module>
<ModulePrefs title="Map of __UP_loc__" height="300" author="Jane Smith" author_email="xxx@google.com" />
<UserPref name="loc" display_name="Location" datatype="location" required="true" />
<Content type="html">
<![CDATA[
<script src="http://maps.google.com/maps?file=js" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(prefs.getString("loc.long"), prefs.getString("loc.lat")), 6);
</script> ]]>
</Content> </Module>
location 환경설정 x를 읽을 때:
이전 버전의 Google 가젯 API에서는 위치 형식으로 default_value을 지정할 수 없었지만 이제는 지정할 수 있습니다.
사용자가 수정 상자를 사용하여 사용자 환경설정을 명시적으로 설정하도록 허용하는 것이 일반적입니다. 하지만 사용자의 직접적인 개입 없이 사용자 환경설정 값을 프로그래밍 방식으로 설정하는 것이 유용할 때가 있습니다. 예를 들어, 게임 가젯의 경우 사용자의 최고 점수를 지속적으로 저장해야 합니다. 'high_score' 사용자 환경설정 값을 프로그래밍 방식으로 설정하면 해당 작업을 수행할 수 있습니다.
setprefs 기능을 사용하려면 가젯에 다음 항목이 포함되어야 합니다.
hidden 데이터 유형이 지정됨)현재 환경설정 크기는 URL 크기 제한(2K)에 따라 한도가 있습니다.
다음 샘플 가젯은 두 가지 버튼으로 구성되어 있습니다. 하나는 카운터 값을 증가시키고 다른 하나는 카운터 값을 0으로 다시 설정합니다. 해당 예에서는 "counter"가 사용자 환경설정입니다. 해당 예에는 hidden 데이터 유형이 포함되어 있기 때문에 사용자가 직접 값을 수정할 수 없습니다.
가젯 사양은 다음과 같습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Set Userprefs Demo">
<Require feature="setprefs" />
</ModulePrefs>
<UserPref
name="counter"
default_value="0"
datatype="hidden"/>
<Content type="html">
<![CDATA[
<script type="text/javascript">
// Get user preferences var prefs = new _IG_Prefs(__MODULE_ID__);
// Increment value of "counter" user preference function incrementCounter() {
var count = prefs.getInt("counter");
alert("The count is " + count + ".");
prefs.set("counter", count + 1);
}
// Reset value of "counter" userpref to 0 function resetCounter(){ prefs.set("counter", 0); alert("Count reset to " + prefs.getInt("counter") + "."); } </script>
<input type=button value="Count" name="count" onClick="incrementCounter()"> <input type=button value="Reset" name="reset" onClick="resetCounter()"> ]]> </Content> </Module>
참고: 여러 값을 저장해야 할 경우, JSON 문자열에 값을 저장하는 것이 좋습니다. 이와 관련한 예제는 todo.xml 페이지를 참조하세요. 또한 http://www.json.org/json.js에는 오픈 소스 JSON 스크립트가 포함되어 있으며 JavaScript 개체를 JSON 문자열로 또는 그 반대로 쉽게 변환하는 방식이 포함되어 있습니다.
가젯 사양의 XML 속성에서 특수 문자를 이스케이프해야 합니다. 가젯 사양에는 ASCII 엔터티만 사용할 수 있습니다. 예를 들어, ISO 8859-1 기호 엔터티는 사용할 수 없습니다. 다음은 지원되는 특수 문자 목록입니다.
| 문자 | 이스케이프 코드 |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ' | ' |
예:
위와 같은 이스케이프를 CDATA 블록에서는 사용할 필요가 없지만 가능한 한 습관적으로 사용하는 것이 바람직합니다.
JavaScript 코드 내에서 _hesc(str) 함수를 사용하여 <>&'" 같은 문자를 이스케이프한 상태로 HTML 문자열 str을 반환할 수 있습니다.
MS 인터넷 익스플로러 및 애플 사파리의 기본 개인정보 보호정책에 따르면, 제3자 사이트에서 쿠키를 설정하는 것은 허용되지 않습니다.. 따라서 일부 가젯이 올바로 동작하지 않을 수 있습니다. 특히 로그인에 쿠키를 사용하는 사이트는 iGoogle의 iframe 내에서 올바르게 동작하지 않을 수 있습니다. 이를 해결하기 위해 다음 해결책을 시도해 보시기 바랍니다.
<?php header("P3P: CP=\"CAO PSA OUR\""); ?>위 코드 스니펫은 페이지에 결과물이 표시되기 전에 호출되어야 합니다.
개인정보 보호정책을 신중하게 검토하여 사이트에 어떤 헤더를 사용할 수 있는지 확인해야 합니다. 해당 문제에 대해 변호사와 상의하는 것이 좋습니다.
귀하의 브라우저는 본 사이트의 구성과 호환되지 않습니다. MS 인터넷 익스플로러를 사용하는 경우, 도구 > 인터넷 옵션을 선택하여 보안 설정을 변경할 수 있습니다. 개인 정보 탭을 열고 고급을 클릭한 다음 자동 쿠키 처리 덮어쓰기를 선택하세요. 제 3 사 쿠키에서 적용을 클릭하세요. 또는 파이어폭스 같은 다른 웹 브라우저를 사용하세요.
업데이트 날짜:
