나만의 가젯 작성

시작하기에서는 가젯에 대해 소개하며 다음 단계에서는 나만의 가젯을 만들어 봅니다. 이 페이지에서는 방법을 설명합니다.

목차

  1. 기본 단계
  2. 가젯 해부
    1. 콘텐츠 정의
    2. 사용자 환경설정 정의
    3. 가젯 환경설정 정의
  3. 주의사항: 가젯은 공개됨
  4. 다음 단계

기본 단계

가젯을 만들고 배포하는 기본 단계는 다음과 같습니다.

  1. 텍스트 편집기를 사용하여 가젯 명세를 작성하고 공개 웹 서버에서 호스팅합니다.
  2. iGoogle 또는 orkut과 같은 컨테이너에 가젯을 추가합니다. 컨테이너는 가젯을 실행할 수 있는 응용프로그램 또는 사이트입니다.

가젯 해부

가젯을 수정하고 게시하는 방법을 알면 가젯 명세에 더 많은 고급 기능을 포함할 수 있습니다. XML 가젯 명세는 다음 3가지 주요 부분으로 구성됩니다.

  • 콘텐츠 섹션. <Content> 섹션은 가젯의 실제 작업이 수행되는 곳입니다. 가젯 유형 및 프로그래밍 로직을 지정하는 곳이며 종종 가젯의 모양을 결정하는 HTML 요소를 지정하는 곳이기도 합니다.
  • 사용자 환경설정. <UserPrefs> 섹션에서는 사용자가 가젯 설정을 지정할 수 있도록 해주는 컨트롤을 정의합니다. 예를 들어 개인화된 인사말 가젯에서는 사용자의 이름을 지정하도록 입력란을 제공할 수 있습니다.
  • 가젯 환경설정. XML 파일의 <ModulePrefs> 섹션에서는 제목, 작성자, 원하는 크기 등과 같은 가젯 특성을 지정합니다.

참고: 특정 문자가 올바로 해석되도록 가젯 명세의 XML 속성 내에서 문자를 "이스케이프 처리해야"(즉 제대로 인코딩해야) 합니다. 자세한 내용은 특수 문자 이스케이프 처리를 참조하시기 바랍니다.

가젯을 작성할 때는 <Content> 섹션에서 시작해야 합니다.

콘텐츠 정의

<Content> 섹션은 가젯의 "두뇌"에 해당합니다. <Content> 섹션은 콘텐츠 유형을 정의하며, 콘텐츠 자체를 보관하거나 외부 콘텐츠로의 링크를 포함합니다. <Content> 섹션은 가젯 속성과 사용자 환경설정이 가젯을 실행하기 위한 프로그래밍 로직(자바스크립트) 및 형식 지정 정보(HTML, CSS)와 결합되는 곳입니다.

가젯을 만드는 가장 쉬운 방법은 HTML(또는 자바스크립트 또는 플래시)을 <Content> 섹션에 배치하는 것입니다. 숙련된 웹 개발자는 액세스 제어, 원격 호스팅, 대체 스크립팅 언어 사용 및 기타 주제와 관련된 다른 옵션에 대해 콘텐츠 유형 선택을 참조할 수 있습니다.다음은 간단한 예제 가젯입니다. 이 가젯은 사진을 클릭했을 때 새로운 페이지에서 사진 앨범을 보여줍니다.

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

유의할 사항:

  • 파일의 3번째 행에는 title="Preferences for __UP_myname__" 텍스트가 포함되어 있습니다. 가젯을 실행하면 사용자 환경설정 myname에 입력된 값이 __UP_myname__동적으로 대입됩니다.
  • myname 사용자 환경설정은 "필수"로 표시됩니다.사용자가 입력란에 값을 입력하지 않고 가젯을 실행시키면 값이 입력될 때까지 사용자 환경설정 수정 창이 열려있게 됩니다.
  • 사용자 환경설정 mychoice에는 bool 데이터 유형이 있으며 사용자 인터페이스에 확인란으로 표시됩니다.
  • 사용자 환경설정 mycolor에는 enum 데이터 유형이 있으며 EnumValues 목록은 사용자 환경설정 수정 창에서 드롭다운 메뉴에 표시되는 선택 항목을 지정합니다.

다음은 가젯의 인사말을 표시하는 자바스크립트를 비롯한 전체 가젯입니다.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Preferences for __UP_myname__" height="400"/> 
  <UserPref name="myname" display_name="Name" default_value="Rowan"/>
  <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>
   <Content type="html"><![CDATA[
   <div id="content_div"></div>
   <script type="text/javascript">
   // Get userprefs
   var prefs = new gadgets.Prefs();

   function displayGreeting () {
     // Get current time
     var today = new Date();
     var time = today.getTime();
     var html = "";
  
     // Based on the time of day, display an appropriate greeting
     var hour = today.getHours();
     var salutation = "Afternoon";
     if (hour < 12) {
       salutation = "Morning";
     } else if (hour > 17) {
       salutation = "Evening";
     }

     // Set the background color according to the mycolor userpref
     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><FONT SIZE=6>Good " + salutation + ", " +
           prefs.getString("myname") + "!!!<br><br></FONT>";

     // If the "Show Photo?" checkbox is checked, display photo.
     if (prefs.getBool("mychoice") == true) {
       html += '<img src="' + prefs.getString("myphoto") + '">';
     }
     element.innerHTML = html;
   }
   // Pass the userprefs for this module instance to the function
   // (allows users to include multiple module instances on their page)
   gadgets.util.registerOnLoadHandler(displayGreeting); 
  
   </script> 
   ]]>  
  </Content>
</Module>

모든 <UserPref> 속성 목록을 보려면 참조를 확인하시기 바랍니다.

사용자 환경설정은 사용자 환경설정 자바스크립트 API를 사용하여 가젯에서 액세스할 수 있습니다. 예를 들면 다음과 같습니다.

<script type="text/javascript">
  var prefs = new gadgets.Prefs();
  var someStringPref = prefs.getString("StringPrefName");
  var someIntPref = prefs.getInt("IntPrefName");
  var someBoolPref = prefs.getBool("BoolPrefName");
</script>

모든 자바스크립트 함수의 목록을 보려면 자바스크립트 참조를 확인하시기 바랍니다.

사용자 환경설정 대입 변수

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

사용자 환경설정 샘플에서 다른 예를 볼 수 있습니다.

다음은 사용자 환경설정 대입 변수를 사용하기 위한 일반 가이드라인입니다.

  • <ModulePrefs> title 속성에는 __UP_name__을 사용합니다. 이것은 HTML 이스케이프 처리됩니다.
  • <ModulePrefs> title_url 속성에는 __UP_name__을 사용합니다. 이것은 URL 이스케이프 처리됩니다.
  • <Content> 섹션의 HTML에서는 __UP_name__을 사용합니다. 이것은 HTML 이스케이프 처리됩니다.
  • <Content> 섹션의 자바스크립트 코드에서는 gadgets.Prefs() 함수를 사용합니다.

사용자 환경설정 공유

shareable-prefs 기능을 사용하여 여러 사용자가 가젯의 사용자 환경설정을 수정하도록 할 수 있습니다. 이렇게 해서 사용자는 가젯을 공유하고 다른 사용자의 수정사항을 볼 수 있습니다. 예를 들어 가족 구성원이 식료품 목록 가젯을 공유하고 각각 자신이 좋아하는 항목을 추가할 수 있습니다. 사용자 환경설정 데이터는 iGoogle이 호스팅하는 가젯 상태의 일부입니다. 사용자 환경설정에 대한 자세한 내용은 가젯 API 개발자 가이드를 참조하시기 바랍니다.

여러 사용자가 가젯의 사용자 환경설정을 공유하려면 가젯의 <ModulePrefs> 섹션에 <optional feature="shareable-prefs"/> 행이 포함되어야 합니다. 예를 들어 이 가젯에서는 list 데이터 유형 사용자 환경설정을 사용하여 식료품 목록을 입력할 수 있습니다.

이 가젯 공유

가젯의 코드는 다음과 같습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs 
    title="Our Grocery List" 
    scrolling="true"> 
    <optional feature="shareable-prefs"/> 
   </ModulePrefs>
  <UserPref name="mylist" 
    display_name="Add items" 
    datatype="list" />
  <Content type="html">
  <![CDATA[ 
    <div id="content_div" style='color: #CC0099; font-family: serif; font-size: 120%;'></div>

  <script type="text/javascript"> 
    // Get userprefs
    var prefs = new gadgets.Prefs();
    // Get the list
    var items = prefs.getArray("mylist");  
    var html = "";
    // If there are no items in the list yet, display message.
    if (items.length == 0)
    {
      html += "Edit the userprefs to add items to the list.";
    }
    else {
      for (var i = 0; i < items.length ; i++) {
        var term = (items[i]);
        html += term + "<br />";
      }
    }
    document.getElementById("content_div").innerHTML = html; 
  </script>
  ]]> 
  </Content>
</Module>

공유 가능한 환경설정을 지원하는 가젯을 iGoogle에 추가하면 다음 단계에 따라 공동 작업할 수 있습니다.

1단계: 공유할 가젯의 삼각형을 클릭하고 이 가젯 공유를 선택합니다.

이 가젯 공유

2단계: Gmail 사용자인 경우 공유할 친구를 선택하거나 친구의 이메일 주소를 입력합니다.

이 가젯 공유

3단계: 친구가 iGoogle 페이지에서 가젯 콘텐츠를 수정하도록 할 것인지 또는 보게만 할 것인지 결정합니다.

  • 내 콘텐츠 보기 및 수정을 선택하면 친구가 가젯의 사용자 환경설정을 수정할 수 있습니다. 변경사항은 사용 중인 가젯 버전과 기타 공유 버전에 모두 반영됩니다.
  • 내 콘텐츠 보기를 선택하면 친구가 가젯을 비롯한 로컬 복사본을 수정할 수 없습니다. 본인만 가젯을 수정할 수 있으며 변경사항은 가젯의 모든 공유 버전에 적용됩니다.

초대장 보내기를 클릭합니다. 친구의 iGoogle 페이지에 가젯을 추가하도록 초청하는 이메일이 친구에게 전송됩니다.

초대장 공유

그러면 가젯을 수정할 권한을 가진 친구가 가젯의 사용자 환경설정을 수정하고 변경사항을 가젯의 모든 공유 버전에 게시할 수 있습니다.

가젯 환경설정 정의

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> 속성의 전체 목록을 보려면 참조를 확인하시기 바랍니다.

주의사항: 가젯은 공개됨

비공개 가젯은 존재하지 않습니다. 공개 웹사이트에 가젯을 게시하면 다른 사람들이 볼 수 있습니다. 전화 번호나 개인 이메일 주소와 같은 개인 정보를 포함하지 않도록 하십시오.

가젯을 공개하고 싶지 않으십니까? Google은 가젯 작성자가 본인의 사양을 공유할 것을 권장합니다. 하지만 가젯을 게시하기 전에 가젯의 공개를 최소화하려는 경우 다음의 몇 가지 팁이 있습니다.

  • 가젯을 콘텐츠 디렉토리에 제출하거나 googlemodules.com 또는 hotmodules.com과 같은 디렉토리에 게시하지 않습니다.
  • URL을 알지 못하면 가젯을 찾을 수 없기 때문입니다. 검색 엔진이 검색하지 못하도록 하기 위한 몇 가지 방법이 있습니다.
    • 사용자의 웹 서버가 본인의 파일이 포함된 파일 목록을 제공하지 않도록 합니다. 이를 통해 스누핑도 방지할 수 있습니다.
    • 가젯에 연결된 웹 하이퍼링크가 있지 않은지 확인합니다.

다음 단계

더 복잡한 가젯을 작성할 준비가 되면 개발의 기초로 이동하거나 문서 홈 페이지로 돌아가서 섹션 및 주제 개요를 볼 수 있습니다.

맨위로