시작하기는 개발자 가이드를 종료하지 않고도 가젯을 수정하고 변경사항을 미리 볼 수 있는 스크래치 패드와 Google 가젯에 대한 소개입니다. 다음은 나만의 가젯을 만드는 방법에 대한 설명입니다.
가젯을 만들고 배포하려면 다음 단계를 따르세요.
개발자 가젯은 iGoogle의 모든 가젯에 대한 '명령 센터' 역할을 합니다. 실행 중인 모든 가젯의 목록 작성 뿐만 아니라 가젯을 추가, 확인 및 관리할 수 있습니다. 개발자 가젯은 가젯 개발 작업에 필요한 기능을 제공합니다. '고장난' 가젯을 추가하는 기능을 예로 들 수 있습니다. 해당 기능은 가젯을 대폭 변경할 때 유용합니다.
개발자 가젯을 추가하려면 다음 링크를 클릭하세요.
개발자 가젯에서 개별 가젯 링크를 클릭하면 가젯의 XML 사양을 볼 수 있습니다. 이는 다른 가젯의 구현 방식을 볼 수 있는 좋은 방법입니다.
현재로서는 고급 개발자 가젯 기능에 대해서는 신경쓸 필요가 없습니다. 고급 기능은 여기에서 자세히 다룹니다. 하지만 캐시됨 확인란의 경우 지금 바로 활용할 수 있습니다. 기본적으로 가젯 사양은 캐시되지만 가젯에 대한 작업을 수행하는 동안에는 가젯의 캐시됨 확인란의 선택을 취소해야 합니다. 그래야 캐시된 가젯 대신 수정한 내용을 볼 수 있습니다.
공용 웹서버에 액세스할 수 없는 경우 Google 페이지 작성기를 사용하여 가젯을 호스팅할 수 있습니다. 버전 관리 기능 등 보다 고급 기능의 호스팅 방법은 Google 코드 호스팅에서 자세히 설명합니다.
Google 페이지 작성기를 사용하여 가젯을 호스팅하려면 다음 단계를 따르세요.
Google 페이지 작성기를 처음 사용하는 경우: Google 페이지 작성기를 처음 사용하는 경우 이용약관에 동의해야 합니다. 약관에 동의하면 기본 Google 페이지 작성기 홈페이지가 표시되는 에디터 페이지로 연결됩니다. 해당 홈페이지는 iGoogle과는 무관합니다. 해당 페이지에서 페이지 관리자로 돌아가기를 클릭하면 페이지 관리자로 바로 이동할 수 있습니다.
Google 페이지 작성기 사용이 처음이 아닌 경우: Google 페이지 작성기에 로그인하면 제일 먼저 페이지 관리자 페이지가 표시됩니다.
예를 들어, 'myphonebook.xml'이라는 가젯을 Google 페이지 작성기에 업로드하는 경우 다음과 같은 URL을 사용하여 iGoogle 페이지에 가젯을 추가할 수 있습니다.
http://<Google-username>.googlepages.com/myphonebook.xml
개인용 가젯이라는 것은 없습니다. 가젯을 공용 웹사이트에 게시하면 사람들이 검색하고 볼 수 있습니다. 전화번호나 개인 이메일 주소 등의 개인정보를 포함시키지 마세요.
가젯을 공개하고 싶지 않으면 어떻게 해야 할까요? Google은 가젯 작성자에게 가젯 사양을 공유할 것을 권장합니다. 하지만 원하는 경우 가젯을 공개하기 전에 가젯의 공개 범위를 최소화할 수 있는 방법이 있습니다.
가젯 수정 및 게시 방법을 익힌 후에는 가젯 사양에 보다 고급 기능을 포함시킬 수 있습니다. XML 가젯 사양은 크게 세 부분으로 구성됩니다.
참고사항: 특정 문자의 경우 가젯 사양의 XML 속성에 맞게 '이스케이프' 또는 인코딩을 적절히 해야 올바르게 해석됩니다. 자세한 내용은 특수 문자 이스케이프를 참조하세요.
가젯을 만들 때는 <Content> 섹션부터 작성해야 합니다.
가젯을 만드는 가장 쉬운 방법은 HTML을 <Content> 섹션에 추가하는 것입니다. 옵션으로 JavaScript 또는 Flash를 추가할 수도 있습니다. 숙련된 웹 개발자의 경우 콘텐츠 유형 선택에서 액세스 제어, 원격 호스팅, 대체 스크립트 언어 사용 및 기타 항목 같은 다른 옵션을 확인할 수 있습니다. 다음은 간단한 가젯의 예입니다. 본 가젯은 사진 앨범을 새 HTML 페이지에서 여는 클릭 가능한 사진을 표시합니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
<Content type="html">
<![CDATA[
<div style="text-align:center"><a
id="Riggs" title="My Photo Album" target="_blank"
href="http://picasaweb.google.com/doc.examples/ShelfBoy">
<img border="0" alt="Photo" src="http://doc.examples.googlepages.com/Riggsie-OP.jpg"
title="Click Here."></a>
</div>
]]>
</Content>
</Module>
실행 중인 가젯은 다음과 같습니다.
일부 가젯은 사용자에게 사용자 고유 정보를 제공할 방법을 제시해야 합니다. 예를 들어 게임 가젯의 경우, 사용자는 자신이 원하는 난이도를 입력할 수 있어야 합니다. XML 파일의 사용자 환경설정 <UserPref> 섹션은 가젯이 실행될 때 사용자 인터페이스 컨트롤로 변하는 사용자 입력란에 대한 설명입니다. 사용자 기본설정은 지속적으로 저장됩니다.
예를 들어, 시간대에 따라 인사말을 표시하는 아래 가젯에서 사용자는 다음을 지정할 수 있습니다.
다음은 실행 중인 가젯의 예입니다.
다음은 사용자가 수정을 클릭하여 사용자 환경설정을 수정할 때 가젯의 모양입니다.
실행 중인 가젯에서 사용자 인터페이스 컨트롤로 바뀌는 사용자 환경설정은 XML 사양에 다음과 같이 정의됩니다.
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Preferences for __UP_myname__" height="250" />
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="myphoto" display_name="Photo" default_value="http://doc.examples.googlepages.com/Rowan-headshot.jpg"/>
<UserPref name="mychoice" display_name="Show Photo?" datatype="bool" default_value="true"/>
<UserPref name="mycolor" display_name="Color" default_value="Yellow" datatype="enum" > <EnumValue value="Red" /> <EnumValue value="Aqua" /> <EnumValue value="Lime" /> <EnumValue value="Yellow" /> <EnumValue value="Pink" /> <EnumValue value="Orange" /> <EnumValue value="White" /> </UserPref>
주의사항:
다음은 가젯의 인사말을 표시하는 JavaScript입니다.
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:12pt; padding:5px;">
<script type="text/javascript">
// Get userprefs
var prefs = new _IG_Prefs(__MODULE_ID__);
// Based on user input, display personal greeting
function displayGreeting (){
// Create Date object
var today = new Date();
// Get current time.
var time = today.getTime();
var salutation;
// Based on the time of day, display an appropriate greeting
var hour = today.getHours();
if (hour < 12)
salutation = "Morning";
else if (hour > 17)
salutation = "Evening";
else salutation = "Afternoon";
// Build HTML string to display message
var html = "";
var element = document.getElementById('content_div');
element.style.height=250;
// Set the background color according to the mycolor userpref
element.style.backgroundColor=prefs.getString("mycolor");
// Display a greeting based on the myname userpref
html += "<br><h2>Good " + salutation + ", " + prefs.getString("myname") + "!!!</h2><br>";
// If the "Show Photo?" checkbox is checked, display photo.
if (prefs.getBool("mychoice")==true)
{
html += '<img src="' + prefs.getString("myphoto") + '">';
}
_gel("content_div").innerHTML = html;
}
_IG_RegisterOnloadHandler(displayGreeting);
</script>
]]>
</Content>
모든
사용자 환경설정은 사용자 환경설정 JavaScript API를 사용하는 가젯을 통해 액세스할 수 있습니다. 다음은 해당 예입니다.
<script type="text/javascript">
// Must be constructed using the __MODULE_ID__ token. It gets replaced
// at runtime with the actual ID of your gadget.
var prefs = new _IG_Prefs(__MODULE_ID__);
var someStringPref = prefs.getString("StringPrefName");
var someIntPref = prefs.getInt("IntPrefName");
var someBoolPref = prefs.getBool("BoolPrefName");
</script>
모든 JavaScript 함수 목록은 참조에서 확인하세요.
<ModulePrefs> 또는 <UserPref> 섹션에서 __UP_userpref__ 형식의 대체 변수를 사용할 수 있습니다. 이때 userpref는 사용자 인터페이스의 name 속성과 일치합니다. 가젯이 실행될 때 해당 사용자 환경설정의 문자열 값은 이스케이프되지 않은 상태로 변수를 대체합니다. 예를 들어, 다음 예제에서는 런타임 시 사용자가 projects 사용자 환경설정에 제공하는 값이 title_url 문자열의 __UP_projects__를 대체합니다.
<Module>
<ModulePrefs title="Build Monitor"
title_url="http://www.example.com/build/status.php?__UP_projects__"/>
<UserPref name="projects" display_name="project(s)"/>
<Content ... />
</Module>
사용자 환경설정 샘플에서 다른 예를 참조하세요.
다음은 사용자 환경설정 대체 변수 사용에 대한 일반적인 도움말입니다.
XML 파일의 <ModulePrefs> 섹션에서는 제목, 작성자, 기본 크기 등의 가젯 특성을 지정합니다. 다음은 해당 예입니다.
<Module>
<ModulePrefs title="Today's Network Traffic" title_url="http://www/~rowan/gadgets/stats/"
height="200" author="Jane Smith" author_email="xxx@google.com"/>
<Content ...>
... content ...
</Content>
</Module>
가젯 사용자는 해당 속성을 변경할 수 없습니다.
모든 <ModulePrefs> 속성 목록은 참조에서 확인하세요.
보다 복잡한 가젯을 만들려면 개발자 기본사항으로 이동하거나 설명서 홈페이지로 돌아가서 각 섹션 및 주제에 대한 개요를 확인하세요.
업데이트 날짜:
