ページ

2011年3月4日金曜日

iGoogle Gadget -5

■ ユーザーがカスタマイズできるようにする - 1

■ ここから先はユーザー設定の方法を探っていきます。利用者のカスタマイズを可能にします。

■ サンプルです。



<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs  height="250" title="ユーザー設定-Step-1" scrolling="false" />
<UserPref name="username1" display_name="Name" default_value="Display-1" />
<UserPref name="username2" display_name="Name2" default_value="Display-2" />

<!--
UserPref セクションで入力フィールドの指定をしてユーザーによるカスタマイズを可能にします。
この設定は永続的に保持されます。
ユーザー設定を「required」(必須) に設定した場合はユーザーがこのフィールドに値を指定せずにガジェットを実行しようとすると、
値が指定されるまでユーザー設定編集ボックスが開いたままになります。


”display_name=”;ユーザー設定画面に表示されるタイトル名を指定します。
-->

  <Content type="html">
  <![CDATA[
<div style="text-align:left;font-size:13px;color:#4682b4;font-weight:600;">
【ユーザー設定-Step1】
 <p /> __UP_username1__  <p />

<!--
username1 に指定された値が、 __UP_myname__  に動的に代入されます。(初期値はDisplay-1)
HTM内に表示する場合はこの形式が”おまじない”になります。
-->

  <script type="text/javascript">
    var prefs = new gadgets.Prefs();
    var DisplayUserName2 = prefs.getString("username2");
    document.write(DisplayUserName2);
  </script>
</div>

<!--
JAvaScript内で利用する場合の例です。(username2の初期値はDisplay-2)
new gadgets.Prefs();で利用が可能になります。
-->


<div style="text-align:left;font-size:13px;">
<p />
ここがお約束の Hello, world!です。
<p />
このガジェットは【ガジェットの作り方】をまとめています。
ここにはHTMやJavaScriptの記述ができます。
<p />
もちろん下のように画像の表示もOKです。
<p align="right" />
<a href="http://www5d.biglobe.ne.jp/~pog/" alt="Googleを追いかけろ!"
     title="Googleを追いかけろ!" target="_blank">
            <img src="http://www5d.biglobe.ne.jp/~pog/img/gapps.png" border="0"></a>

</div>

  ]]>
  </Content>
</Module>

■ 編集用ページ