본 문서는 가젯을 작성하는 데 사용할 수 있는 도구에 대한 설명입니다.
개발자 가젯은 사용자 고유의 가젯을 만들기 위한 기초로 사용할 수 있는 특수 가젯입니다. 개발자 가젯은 iGoogle 페이지에 모든 가젯을 표시하는 대시보드로, 여기에서 가젯 캐시를 관리할 수 있습니다. 기본적으로 가젯 정의는 캐시됩니다. 캐시됨 확인란의 선택을 취소하여 해당 동작을 재정의할 수 있습니다. 이는 가젯을 사용하고 캐시된 가젯 대신 수정 결과를 보려는 경우 유용합니다.
개발자 가젯 그 자체로도 샘플 가젯이라 할 수 있습니다.
개발자 가젯을 추가하려면 'iGoogle 콘텐츠 검색' 버튼 옆에 있는 콘텐츠 추가 > URL로 추가를 클릭하고 텍스트 입력란에 'developer.xml'을 입력하세요.
개발자 가젯(화면캡처)에는 iGoogle에서 현재 실행되고 있는 모든 가젯의 링크가 표시됩니다. 가젯 추가 텍스트 상자를 사용하여 가젯 사양에 대해 URL을 제공하는 방식으로 새 가젯을 추가할 수 있습니다.
항상 모든 사항이 예상한 대로 발생하는 것은 아니라는 점을 가젯 개발 과정의 일부로 이해해야 합니다. 본 섹션에서는 문제를 방지하고 만일 문제가 발생하는 경우 이를 해결하기 위한 일부 기본적인 방법을 설명합니다.
프로그래밍은 작은 규모로 시작하는 것이 원칙입니다. 기본사항을 익히고 기본적인 가젯을 작성한 다음 점차적으로 확장하세요. 단계를 진행할 때마다 가젯을 테스트해야 합니다. 이런 접근 방법을 사용하면 가젯을 변경하여 문제가 발생한 경우 쉽게 알 수 있습니다.
가젯 개발자가 사용할 수 있는 가장 효율적인 리소스 중 하나는 기존 가젯입니다. 콘텐츠 디렉토리로 이동하여 구현하려는 가젯과 가장 닮은 가젯의 소스 코드를 살펴보세요.
파이어폭스 웹브라우저를 사용하여 개발 중인 가젯을 iGoogle 페이지에서 테스트할 수 있습니다. 가젯이 올바르게 작동하지 않으면 자바스크립트 콘솔(도구 > 자바스크립트 콘솔)을 열고 에러를 선택한 다음 아래로 스크롤하여 가젯에 자바스크립트 구문 오류가 있는지 확인하세요. 테스트를 하기 전에 콘솔을 지워 이전 오류 메시지를 삭제하세요.
다른 브라우저 유형을 사용하는 경우 브라우저에서 지원하는 디버거 또는 자바스크립트 콘솔을 확인하세요.
개발 과정에서 자신이 가정한 내용을 확인하면 많은 시간과 수고를 줄일 수 있습니다. 변수 값이 예상한 값과 일치하는지, 배열에 요소가 포함되어 있는지, '부적절하게 작동하는 것으로 보이는' 함수가 전혀 호출되지 않는지 등의 가정사항을 확인해 볼 수 있습니다. 프로그램의 여러 지점에서 상태 메시지를 인쇄하여 가정을 테스트할 수 있습니다. 예를 들어, debug 플래그가 0이 아닌 값을 갖는 경우 다음 가젯은 디버깅 메시지를 debug_div에 기록하는 print() 함수를 포함합니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Debug Example" height="200"/>
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
<EnumValue value="Blue" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Gray" />
</UserPref>
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new _IG_Prefs(__MODULE_ID__); // debug flag. When its value is non-zero, debugging messages are displayed
var debug = 1; // The string containing debugging messages
var debug_html = ""; // Display date
function displayDate (){
// DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
var content_html = "";
var element = document.getElementById('content_div');
element.style.backgroundColor=prefs.getString("mycolor");
element.style.height=100;
// DEBUG: print out prefs values
print("The background color is " + prefs.getString("mycolor") + "<br>");
print("The name is " + prefs.getString("myname") + "<br>");
content_html += today.toDateString();
// Write content HTML to div
_gel("content_div").innerHTML = content_html;
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
_gel("debug_div").innerHTML = debug_html;
}
}
_IG_RegisterOnloadHandler(displayDate);
</script>
]]>
</Content>
</Module>
참고: 가젯에 표시되는 메시지의 동작과 모양을 수정하는 데 사용하는 MiniMessage API에 대한 설명을 보려면 MiniMessages를 참조하시기 바랍니다.
다음 파이어폭스 추가 기능을 사용하면 개발 중인 가젯을 좀 더 자세히 확인할 수 있습니다.
Google Analytics를 사용하여 가젯에 대한 통계를 수집할 수 있습니다. 일반적으로 Google Analytics를 사용하여 페이지뷰(예: 가젯이 렌더링될 때마다) 또는 이벤트(예: 사용자가 가젯의 버튼을 클릭할 때마다)를 추적합니다.
Google Analytics를 사용하려면 다음 단계를 따르세요.
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript"> _uacct = "UA-xxxxxxx-x"; urchinTracker(); </script>
위의 스니펫은 다음을 수행합니다.
일반적으로 해당 코드 스니펫을 추적하려는 각 웹페이지에 복사하면 Google Analytics가 작동합니다. 하지만 가젯은 특수한 경우입니다. 아래의 도움말에 따라 가젯에 맞게 Google Analytics가 작동하도록 만들어야 합니다.
위에서 설명한 대로 Google Analytics 계정을 만들었으면 고유한 Google Analytics ID를 받게 됩니다. 해당 ID를 사용하여 Google Analytics를 가젯에 통합할 수 있습니다.
가젯에 Analytics를 통합하려면 다음 단계를 따르세요.
<Require feature="analytics"/>
<script>
_IG_Analytics("UA-000000-0", "/mygadget");
</script>
이로써 urchinTracker()가 호출되고 데이터가 Google Analytics로 다시 전송됩니다.
다음은 analytics가 포함된 가젯의 예입니다. 해당 가젯은 가젯 페이지뷰 및 버튼 클릭을 추적합니다. 가젯을 렌더링할 때마다 페이지뷰는 /test_analyticslib로 기록됩니다. 사용자가 버튼을 클릭할 때마다 페이지뷰는 /test_analyticslib/click으로 기록됩니다. 위 예에서 UA-xxxxxx-x: 대신 실제 Google Analytics ID를 사용해야 합니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Test Analytics Iframe"> <Require feature="analytics" /> </ModulePrefs> <Content type="html"> <![CDATA[ <script> // Track this gadget using Google Analytics. _IG_Analytics("UA-xxxxxx-x", "/test_analyticslib"); </script> <!-- You can also track JavaScript events. When users click this button, a pageview is sent back to Analytics servers. --> <input onclick="_IG_Analytics('UA-xxxxxx-x', '/test_analyticslib/click')" type=button value="Click Me"/> ]]> </Content>
</Module>
주의:
다른 모든 <Require...> 기능과 마찬가지로 Google Analytics도 type="url" 가젯에서 작동합니다. 자세한 내용은 type="url" 가젯에 JavaScript 라이브러리 사용을 참조하시기 바랍니다.
가젯과 연관된 리포트를 보려면 Google Analytics에 로그인하여 리포트 보기 > 콘텐츠 요약으로 이동하세요.
Google Analytics로 할 수 있는 작업에 대한 자세한 내용을 보려면 Google Analytics 도움말을 참조하시기 바랍니다.
공용 서버에 액세스할 수 없는 개발자의 경우 다음 Google 코드를 사용하여 가젯을 호스팅하는 것이 좋습니다. http://code.google.com/hosting 이를 통해 가젯 개발자는 많은 이점을 누릴 수 있으며 비용도 완전 무료입니다. 가장 큰 이점 중 하나는 Subversion을 통한 버전 제어가 가능하다는 점입니다. Subversion은 오픈 소스 버전 제어 시스템입니다. Subversion을 사용하면 손쉽게 변경사항을 추적하고 서로 다른 가젯 버전을 유지관리할 수 있습니다. 또한 전체 개정기록을 확인할 수도 있습니다. 이를 통해 버전 간 차이를 없애거나 분석할 수 있습니다. Subversion에 대한 자세한 내용을 보려면 Subversion book을 참조하시기 바랍니다.
처음 수행해야 할 작업은 파일을 로드하여 code.google.com에 저장할 수 있는 데스크톱 프로그램('Subversion 클라이언트')을 설치하는 것입니다. 대부분의 Subversion 클라이언트에는 명령줄 인터페이스보다 쉽게 Subversion와 상호작용할 수 있게 해주는 그래픽 사용자 인터페이스가 장착되어 있습니다. 실행하는 운영체제에 따라 선택할 수 있는 클라이언트는 여러 개가 있습니다. 시스템과 호환되는 클라이언트를 설치하세요. 다음은 몇 가지 권장 클라이언트입니다.
다음은 클라이언트 및 플러그인의 전체 목록입니다.
컴퓨터에 Subversion을 설치한 경우 아래의 단계에 따라 Google 코드를 사용하여 프로젝트를 호스팅하세요.
새 프로젝트를 만들려면 다음 단계를 따르세요.
이제 code.google.com에 프로젝트가 표시됩니다. 프로젝트 이름을 사용하여 Subversion 저장소가 생성되었습니다. 소스 탭을 클릭한 다음 Subversion 저장소 링크를 클릭하세요.
URL은 다음과 같이 표시됩니다. http://<project-name>.googlecode.com/svn/ 3개의 디렉토리 링크 즉, branches, tags 및 trunk가 표시됩니다. 파일을 프로젝트에 업로드하면 /trunk 폴더에 위치하게 됩니다. 나중에 참고할 수 있도록 URL http://<project-name>.googlecode.com/svn/trunk/을 즐겨찾기에 추가할 수 있습니다.
파일을 업로드하기 전에 먼저 프로젝트의 Subversion 저장소에서 코드를 체크아웃해야 합니다. 체크아웃을 수행하려면 다음 3가지 정보 즉, 저장소 URL, 사용자 이름 및 비밀번호가 있어야 합니다. 해당 정보를 찾으려면 프로젝트의 소스 탭(http://code.google.com/p/<project-name>/source)으로 이동하세요. 다음과 같이 나타납니다.
svn checkout https://<project-name>.googlecode.com/svn/trunk/ gadgets-test --username <username>
메시지가 나타나면 생성한 SVN 비밀번호를 입력하세요.
필요하면 적절한 정보를 검색할 수 있도록 작업을 계속할 때 브라우저에서 해당 페이지를 열어 두세요.
실제 체크아웃에 대한 자세한 내용은 사용하는 Subversion 클라이언트에 따라 다를 수 있지만 전반적인 과정은 동일합니다. 본 섹션의 도움말에서는 TortoiseSVN을 사용하는 것으로 간주합니다.
프로젝트르를 체크아웃하려면 다음 단계를 따르세요.
이 시점에서 클라이언트가 연결되고 전체 저장소가 체크아웃됩니다. 작업이 모두 끝났습니다.
체크아웃이 성공적으로 완료되면 숨겨진 새 폴더인 /.svn을 확인할 수 있습니다. 해당 폴더를 수정하거나 삭제하지 마세요.
프로젝트를 체크아웃했으면 Subversion 명령을 사용하여 새 폴더 및 파일을 디렉토리에 추가할 수 있습니다. 본 섹션의 도움말에서는 TortoiseSVN을 사용하는 것으로 간주합니다.
파일을 업로드하려면 다음 단계를 따르세요.
메시지가 표시되면 메시지 로그에 옵션 메모를 기록하고 확인을 클릭하세요. 파일이 서버로 전송되기 시작합니다.
파일이 서버로 완전히 전송되면 http://<project-name>.googlecode.com/svn/trunk/new-gadget.xml에서 파일을 온라인으로 즉시 사용할 수 있습니다.
저장소 내에 URL에 반영될 디렉토리 구조를 만드세요. 예를 들어, /a/b/c/new-gadget.xml 아래에 새 파일을 추가하고 업로드하는 경우 파일은 http://<project-name>.googlecode.com/svn/trunk/a/b/c/new-gadget.xml에서 호스팅됩니다.
Google 코드에서 프로젝트를 호스팅하는 데 대한 자세한 내용을 보려면 FAQ를 참조하시기 바랍니다.
업데이트 날짜:
