play-Google: iGoogle Gadget -7

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

■ ガジェットにユーザーの所有する画像を表示（アップ）させます。

■　サンプルです。　

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="ユーザー設定-Step-3" title_url="http://www5d.biglobe.ne.jp/~pog/" height="400" scrolling="true"/>
  <UserPref name="userphoto" display_name="Photo" default_value="http://www5d.biglobe.ne.jp/~pog/api/gadget/poh.png"/>
   // イメージ写真（初期値）を指定します。

<UserPref name="userchoice" display_name="Show Photo?" datatype="bool" default_value="true"/>
  // ここのデータ型は bool です。ユーザーインターフェースにはチェックボックスとして表示されます

  <Content type="html">
  <![CDATA[
<div style="text-align:left;font-size:13px;padding:10;" id="content_div">
【ステップ-6】
<p />
【ガジェットの作り方 : ユーザー設定-3】

<p />
  <script type="text/javascript">
   var prefs = new gadgets.Prefs(); //ここをお忘れなく

   if (prefs.getBool("userchoice") == true) { // チェックボックスの判定
   document.write('<img src="' + prefs.getString("userphoto") + '">');
   }

</script>

<p />
ユーザーに自分用の画像を自由に表示させます。
<p />
このガジェットはiGoogle用ガジェットの作成方法をまとめています。
<p />
step1～step6までは下記のリンクで。
<p />
<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>

■ 編集用リンク

play-Google

ページ

2011年3月6日日曜日

iGoogle Gadget -7