Color-Picker ガジェットの作成

概要

「Hello World!」を出力するガジェットが出来ましたので、今度は「Color-Picker」に挑戦！

とはいっても、jQueryプラグインで Color-Picker はたくさん出ていますので、一から作成せずにプラグインを読み込むだけの単純なものです^^;

手順

今回使用するのは『Farbtastic』というプラグイン。

jQuery 本体はgoogleの『Google AJAX Libraries API』で読み込みを行います。

1. まずは jQuery の読み込み

   <script src="http://www.google.com/jsapi"> </script>
   <script>
     // Load jQuery
     google.load("jquery", "1.3.1");
   </script>
   

2. 次に Farbtastic の読み込み

   <script type="text/javascript" src="http://ファイルのアップロード先/farbtastic.js"> </script>
   <link rel="stylesheet" href="http://ファイルのアップロード先/farbtastic.css" type="text/css" />
   <script type="text/javascript">
     $(document).ready(function() {
       $('#colorpicker').farbtastic('#color');
     });
   </script>
   

3. 最後に表示部分

   <form><input type="text" id="color" name="color" value="#123456" /></form>
   <div id="colorpicker"></div>
   

以上の内容をガジェットContentタグの中に記述するだけ。
今回は「colorpicker.xml」で保存して、サーバーにアップロードしてURLを『My Gadgets』に追加します。

<Module>
<ModulePrefs title="Color-Picker" height="250">
<Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html">

<script src="http://www.google.com/jsapi"> </script>
<script>
  // Load jQuery
  google.load("jquery", "1.3.1");
</script>
<script type="text/javascript" src="http://ファイルのアップロード先/colorpicker/farbtastic.js"> </script>
<link rel="stylesheet" href="http://ファイルのアップロード先/farbtastic.css" type="text/css" />
<script type="text/javascript">
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });
</script>

<form><input type="text" id="color" name="color" value="#123456" /></form>
<div id="colorpicker"></div>

</Content>
</Module>

今回作成したガジェットは共有できますが、情報の交信が出来ないので、OpenSocial の意味ないですね。。