2007-11-06

iGoogleガジェットでprototype.jsを使用するには

prototype.js

iGoogleガジェットでprototype.jsをそのまま使用することはできません。障害となるのはdocument.getElementByIdがiGoogleガジェットでは使用できず、代わりにiGoogleガジェットが用意する_gel関数を使用しなければならないこと。逆に言えばこれさえクリアできればprototype.jsをiGoogleガジェットでも使用できます。

theater.jsでは、prototype.jsを読み込んだ後、以下のスクリプトを実行しています。

if(typeof _IG_Prefs != "undefined"){
  window.$ = function(element) {
    if (arguments.length > 1) {
      for (var i = 0, elements = [], length = arguments.length; i < length; i++)
        elements.push($(arguments[i]));
      return elements;
    }
    if (typeof element == 'string')
      try{element = _gel(element);}catch(e){}
    return Element.extend(element);
  };
}

_IG_Prefsの有無でiGoogleガジェットかどうかを判定しています。iGoogleガジェットの場合、$関数を_gel関数使用のものに置き換えます。これでiGoogleガジェットであってもなくてもprototype.jsが動作します。script.aculo.usも同様です。

2007-09-28

idea:16978が検討中になりました。

はてな

って、1000株に達すると検討対象になるんですね・・・。
http://hatena.g.hatena.ne.jp/hatenaidea/20070927
知らなかった。
さっさと買い増せばよかったです。。。。
(発案者なのに10株しか持ってない＾＾；)

2007-09-21

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

theater.js

デフォルトサンプル - theater-jsの日記の解説です。

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

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

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:･･･}という記法(省略記法)については、新機能のためまだ解説していません。

2007-09-07

スーパーpre記法（シンタックス・ハイライト）が変

はてな

昨日↑を知って、過去の日記のいくつかに適用したのですが、htmlにするとソース内のコメントアウト()が消えるときがあります・・・。JavaScriptソースまるまる消えて、意味のないコードになったりorz 出たり出なかったりで、その条件もよく分からないのですよね・・・。

スクリプトタグ内で()は使わないことで対応しますが。うーむ。

→とりあえず、はじめて要望市場に出してみました。→idea:16978

→ここから辿っていったら、関連アイディアがありました。→idea:15408
既出か調べてるときに「スーパーpre記法」で検索してたから気が付かなかった・・・。
いちおうXML・HTMLの違いがあるから残しておきます・・・。

ソースコードを色付けして記述する（シンタックス・ハイライト） - はてなダイアリーのヘルプ

2007-09-06

スーパーpre記法（シンタックス・ハイライト）

はてな

ってできていたんですね、知らなかった・・・。過去の日記見直しがてら適用していこうかな。

ソースコードを色付けして記述する（シンタックス・ハイライト） - はてなダイアリーのヘルプ

2007-09-06

v2.0.3公開

theater.js

theater.jsのページでtheater.js v2.0.3を公開しました。

不具合修正がいくつかあります。

また、theater.js本体等の文字コードをutf-8に変更しました。グローバル対応ということで。(本音は、iGoogleガジェットに利用するのに都合がいいので＾＾；)

追加機能の解説は今後行っていく予定です。

追加機能の目玉はシナリオ省略記法です。例えば、シナリオ関数で

var img = [
  "img/sample1.gif",
  "img/sample2.gif"
];
var scenario = [
  function(){
    this.act({
      img: "img/sample1.gif",
      msg: "テスト"
    });
  },
  function(){
    this.act({
      img: "img/sample2.gif",
      msg: "ようこそ"
    });
  }
];
new Theater({
  img: img,
  scenario: scenario
});

としていたのが、以下のようになります。

var img = {
  s1: "img/sample1.gif",
  s2: "img/sample2.gif"
};
var scenario = [
  {img: "$I{s1}", msg: "テスト"},
  {img: "$I{s2}", msg: "ようこそ"}
];
new Theater({
  img: img,
  scenario: scenario
});

単にシナリオを書くだけなのに、functionって何回も書かなければならないのが面倒だったので。

他にもいろいろ追加機能があります。作るのは簡単なんですけど、説明するのって大変なんですよね＞＜；

Backstage of theater.js

最近知ったこと

IE7のXMLHttpRequestでローカルファイルが参照できない。

コンストラクタ関数にオブジェクトの返却値があると、newの結果がそれになる。