本日は、引き続き iGoogle ガジェットで使える機能別ライブラリの中から、 MiniMessages ライブラリをご紹介します。 Developer Module を使っている方なら見たことがあるかと思いますが、ガジェットの上部（配置は変更可能）にシンプルなメッセージを表示するライブラリです。それぞれのメッセージは HTML でマークアップできるほか、メッセージを削除するためのクローズボタンを表示することもできます。ガジェットのアップデートの告知などに便利ですね。記事の最後にサンプルガジェットを掲載しておきましたので、実際の表示はそちらを参照してください。

それでは、さっそく使い方を見ていきましょう。なお、機能別ライブラリの基本事項についてはこちらの記事でご紹介しています。機能別ライブラリにはじめて触れる方は、先にご参照いただくと良いかと思います。

他の機能別ライブラリと同様、 MiniMessages ライブラリは標準では読み込まれません。利用するには、以下のタグを ModulePrefs の子要素として記述する必要があります。

<Require feature="minimessage" />

MiniMessages ライブラリの利用に必要なのはこれだけです。他に読み込むべきファイルなどはありません。

MiniMessages ライブラリも他のライブラリと同様、インターフェースは _IG_MiniMessage クラスにまとめられています。コンストラクタのとる引数は以下のようになっています。

var msg = new _IG_MiniMessage(<モジュールID>[, コンテナ要素]);

モジュールIDは __MODULE_ID__ に固定です（URL ガジェットを除く）。コンテナ要素を指定すると、ミニメッセージはその要素の内部に表示されます。

以下、 _IG_MiniMessage クラスに実装されているメソッドです。

createDismissibleMessage(<メッセージ>[, コールバック関数])

クローズボタン付きのメッセージを表示します。メッセージはメッセージとして表示する文字列、もしくは DOM 要素です。文字列の場合は HTML によるマークアップが使えます。 DOM 要素の場合は、その要素自体がメッセージになります。コールバック関数はクローズボタンが押された際に呼ばれる関数です。返り値はメッセージの DOM 要素です。

createTimerMessage(<メッセージ>, <秒数>[, コールバック関数])

一定時間で自動消滅するメッセージを表示します。秒数はクローズするまでの秒数、その他の引数や返り値は createDismissibleMessage と同じです。

createStaticMessage(<メッセージ>)

静的なメッセージを表示します。メッセージや返り値は createDismissibleMessage と同じです。

dismissMessage(<メッセージ>)

指定したメッセージを削除します。

createDismissibleMessage や createTimerMessage メソッドに指定するコールバック関数は、クローズボタンが押された際、もしくはタイムアウトした際に呼ばれる引数なしの関数です。返り値は bool で、 false を返すとクローズがキャンセルされます。例えば、以下のような関数を指定すると、クローズ時にキャンセル可能な確認ダイアログが表示できます。

function onMsgClose()
{
  return confirm("閉じますか？");
}

その他、クローズボタンが押されたことをユーザー設定に記録して、次回表示時にはメッセージを表示しないようにする、などの用途が考えられますね。

create*Message のメソッドはメッセージを格納した DOM 要素を返すので、そのスタイルを明示的に設定することで表示スタイルを変更することができます。例えば、以下のコードはメッセージを追加して背景色を白に変更しています。

var e = msg.createDismissibleMessage("メッセージ");
e.style.backgroundColor = "white";

もしくは、以下の CSS クラスのスタイルを上書きすることで、すべてのメッセージのスタイルを一括して変更することができます。

例えば、以下のようにスタイルを定義すると、すべてのメッセージが黒地に白文字になります。

<style>
.mmlib_table__MODULE_ID__ {
  background-color: black;
  color: white;
}
</style>

通常はこちらを利用したほうが手軽かもしれませんね。

サンプルとして、さまざまな種類のミニメッセージを表示するガジェットを作ってみました。上から、 createDismissibleMessage メソッドによるクローズボタン付きのメッセージ、 createStaticMessage によるクローズボタンなしのメッセージ、 HTML マークアップを使用したメッセージ、既存の div 要素を使ってメッセージを表示する例（これにより任意の場所にメッセージが表示できます）、 createTimerMessage によるタイムアウト付きのメッセージです。さらにその下の「すべてのメッセージを消します。」のリンクをクリックすると、 dismissMessage メソッドにより上記の全メッセージが削除されます。 dismissMessage による削除ではコールバックが呼ばれないことも確認できますね。

ソースコードは以下のようになっています。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="ミニメッセージライブラリの例"
               title_url="http://webos-goodies.jp/archives/51034351.html"
               height="150">
    <Require feature="minimessage"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[

<style>body { font-size: 12px; }</style>

<div style="margin-top:1em;">任意の場所にメッセージを表示することも可能。</div>
<div id="msg_box">こんな感じで</div>

<div style="margin-top:1em;">
  <a href="javascript:closeAll();">すべてのメッセージを消します。</a>
</div>

<script type="text/javascript">
var msg = new _IG_MiniMessage(__MODULE_ID__);
var msgs = [
  msg.createDismissibleMessage("クローズボタン付きメッセージ", function(){return confirm("閉じますか？");}),
  msg.createStaticMessage("クローズボタンなしメッセージ"),
  msg.createStaticMessage('HTMLで<span style="color:red;">マークアップ</span>もできます'),
  msg.createStaticMessage(_gel("msg_box")),
  msg.createTimerMessage('5秒後に消えます', 5)];

function closeAll() {
  for(var i = 0 ; i < msgs.length ; ++i)
  {
    msg.dismissMessage(msgs[i]);
  }
}
</script>

    ]]>
  </Content>
</Module>

以上、本日はガジェットにシンプルなメッセージを表示する MiniMessages ライブラリをご紹介しました。これで現在公開されている機能別ライブラリはすべてですが、今後も機能別ライブラリの追加は継続されていくと思いますので、その際はまたフォローしていきたいと思います。簡単に高度な機能を実装できる機能別ライブラリ、活用すればかなり効果的なことは間違いありません。すでにオリジナルのガジェットを持っている方は、機能別ライブラリを取り入れてさらなるパワーアップを狙ってみてはいかがでしょうか。