theater.js iGoogleガジェットの作り方

とりあえずブログに載せる方法

以下にアクセスしてください。

http://gmodules.com/ig/creator?synd=open&url=http://susie-t.main.jp/theater/gadgets/200709121532.xml

下のほうにある「コードを取得」ボタンを押します。下のテキストエリアにコードが表示されますので、それをコピーしてブログに貼り付けてください。

シナリオがつまらない

ごめんなさい。ご自分で作ったシナリオを使用することもできます。

現在のシナリオは以下です。

http://susie-t.main.jp/theater/gadgets/scenario.js

エディタで開くと以下のようなコードが表示されます。(文字コード UTF-8)

Element.update("msg", "Loading...");
(new Theater({
  imgs:{
    title: 'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/20070911171131.gif',
    mk01: 'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/20070911171402.gif'
  },
  scenario: [
    {img:"$I{title}", msg:"theater.js"},
    {img:"$I{mk01}", msg:"これはtheater.js iGoogleガジェットのデフォルトサンプルです。"},
    {img:"$I{title}", msg:"おわり。"}
  ],
  filter:106,
  outEffect:'Fade',
  inEffect:'Appear'
})).speak("Please click to start.");

これを書き換えて、任意のサーバにアップし、http://gmodules.com/ig/creator?synd=open&url=http://susie-t.main.jp/theater/gadgets/200709121532.xmlで「ガジェットの設定」＞「シナリオURL」の値をアップしたファイルのURLに変更、その後取得したコードをブログに貼り付ければOKです。

シナリオの書き方は？

とりあえず、以下の二つの部分に注目してください。

【画像指定】
  imgs:{
    title: 'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/20070911171131.gif',
    mk01: 'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/20070911171402.gif'
  },

【シナリオ】
  scenario: [
    {img:"$I{title}", msg:"theater.js"},
    {img:"$I{mk01}", msg:"これはtheater.js iGoogleガジェットのデフォルトサンプルです。"},
    {img:"$I{title}", msg:"おわり。"}
  ],

この部分を書き換えることでシナリオが変わります。

画像指定

【画像指定】
  imgs:{
    title: 'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/20070911171131.gif',
    mk01: 'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/20070911171402.gif'
  },

imgs:{･･･},の･･･の部分にシナリオで使用する画像を指定します。指定方法は

(画像の名前):'(画像のアドレス(フルパス))'

です。複数指定の場合は「,」で繋ぎます。ただし、末尾の「,」はつけないでください。画像アドレスは必ずフルパスで指定してください。

'http://f.hatena.ne.jp/images/fotolife/s/susie-t/20070911/' + '20070911171131.gif'

のようにしてもいけません。これは、相対参照の画像アドレス文字列が自動的(勝手)に変換されてしまうという、iGoogleガジェットの仕様(?)のためです。。。

ここで指定された画像はシナリオ開始前に先読みされ、シナリオ進行時の画像切替をスムーズにします。

シナリオ

【シナリオ】
  scenario: [
    {img:"$I{title}", msg:"theater.js"},
    {img:"$I{mk01}", msg:"これはtheater.js iGoogleガジェットのデフォルトサンプルです。"},
    {img:"$I{title}", msg:"おわり。"}
  ],

scenario:[･･･],の･･･の部分にシナリオを記述します。主な指定方法は

{img:"$I{(画像の名前)}", msg:"(表示する文章)"},

です。画像の名前は、前述の画像指定で記述したものです。複数指定の場合は「,」で繋ぎ、末尾はつけないでください。

でかい。見た目がしょぼい。

http://gmodules.com/ig/creator?synd=open&url=http://susie-t.main.jp/theater/gadgets/200709121532.xmlで表示設定の幅、高さを変更してからコードを取得すれば小さくなりますが、それだけだとはみ出ます。なので、スタイルシートを変更してください。

http://susie-t.main.jp/theater/gadgets/style.css

が現在のスタイルシートです。これを変更して任意のサーバにアップし、http://gmodules.com/ig/creator?synd=open&url=http://susie-t.main.jp/theater/gadgets/200709121532.xmlのガジェットの設定＞スタイルシートURL をアップしたファイルのURLに変更してからコードを取得してください。

幅、高さにかかわる設定は

#frame, .frame{
  display:block;
  width:400px;
  height:300px;
}

#msg, .msg{
  letter-spacing:1px;
  width:400px;
  height:100px;
  font-size:14px;
  line-height:1.5em;
}

のwidth、heightです。#frame, .frame{･･･}が画像表示部分、#msg, .msg{･･･}が文章表示部分です。

余談ですが、

#play{
  margin: 20px;
}

は全体の指定で、外枠との余白を指定しています。これは、IEで必ず外枠の右側に背景色と同じ要素が付く(?)ため、これを意識させないように苦肉の策で指定しました。別の方法をご存知の方がおられましたらコメントください・・・。

更に詳しく

http://susie-t.main.jp/で解説していますのでそちらをご覧ください。*1

*1:今回使用した{img:･･･,msg:･･･}という記法(省略記法)については、新機能のためまだ解説していません。