unoh.github.com by unoh

yamaokaです。

Opera Uniteが話題になっていますね。 Operaを使うことが多いので、こうして話題になると少しだけうれしいです。 Operaは単なるwebブラウザーではありません。 Opera Uniteはともかく、メーラーにも、IRCのクライアントにも、 BitTorrentのクライアントにもなることができます。そして、ウィジェットが動くプラットフォームでもあるのです。

Operaのウィジェットにはいろいろな種類があって、例えばTwitterクライアントのTwipperaなど便利なものから、ちょっとしたツールやゲームまで揃っています。ウィジェットの開発はHTMLとJavaScript、CSSを使って行います。普通のwebサイト制作と同じですね。開発者向けのドキュメントはまだ整備段階の感じもしますが、一通りの情報は揃っています。

というわけで（？）、試しにフォト蔵の写真をスライドショー表示するウィジェットを作ってみました。ウィジェットは次のファイルで構成されている必要があります。

config.xml
index.html

もちろん、画像やJavaScriptをディレクトリに分けておくことも可能です。それら全てを、1つのディレクトリに保存します。

まず「config.xml」を用意します。

<?xml version="1.0" encoding="UTF-8" ?>
<widget>
  <widgetname>フォト蔵スライドショー</widgetname>
  <description>フォト蔵で人気の写真を表示します</description>
  <id>
    <host>photozou.jp</host>
    <name>photozou-slideshow</name>
    <revised>2009-06-17</revised>
  </id>
  <width>150</width>
  <height>150</height>
  <author>
    <name>YAMAOKA Hiroyuki</name>
    <organization>Unoh Inc.</organization>
  </author>
</widget>

そして、「index.html」を用意します。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery", "1.3");</script>
  <style type="text/css">
    ul#photos {
      position:relative;
      width:120px;
      height:120px;
      margin:0;
      padding:0;
      list-style:none;
    }
    ul#photos li {
      position:absolute;
      top:0;
      left:0;
      z-index:8;
    }
    ul#photos li.active {
      z-index:10;
    }
    ul#photos li.last-active {
      z-index:9;
    }
  </style>
</head>
<body>
<ul id="photos"></ul>
<script type="text/javascript">
$(function(){
  $.ajax({
    type: "GET",
    url: "http://api.photozou.jp/rest/photo_list_public",
    data: { type: "popular", limit: "30" },
    dataType: "xml",
    success: function(data, dataType) {
      if (data !== undefined) {
        var photosFirstChild = $("#photos li:first-child");
        var photos = $(data).find("photo").each(function() {
          var thumbnailURL = $(this).find("thumbnail_image_url").text();
          var url = $(this).find("url").text();
          var content = "<a href=\""+ url +"\"><img src=\"" + thumbnailURL + "\"></a>";
          if (photosFirstChild.length == 0) {
            $("#photos").append($("<li>").html(content));
          } else {
            photosFirstChild.before($("<li>").html(content));
          }
        });
      }
    },
    error: function() { opera.postError("Photozou API error"); },
    complete: function(xmlHttpRequest, textStatus) {
      if (textStatus != "success") {
        return;
      }
      setInterval(function() {
        var activePhoto = $("#photos li.active");
        if (activePhoto.length == 0) {
          activePhoto = $("#photos li:last");
        }
        var nextPhoto = activePhoto.next().length ?
          activePhoto.next() : $("#photos li:first");
        activePhoto.addClass("last-active");
        nextPhoto.css({ opacity: 0.0 })
          .addClass("active")
          .animate({ opacity: 1.0 }, 1000, function() {
             activePhoto.removeClass("active last-active");
           });
      }, 5000);
    }
  });
});
</script>
</body>
</html>

JavaScriptを使うにあたって、jQueryをライブラリとして利用しています。今回はGoogleのAJAX Libraries APIを利用しましたが、ウィジェットとして配布するのであればパッケージに同梱することになるでしょう。スライドショーとして写真を順々に表示する部分は、 A Simple jQuery Slideshowを参考にしました。

Operaのウィジェットでは、通信はXMLHttpRequestを使って行います。通常Ajaxなどで使う場合は同一のドメイン内にしかリクエストを発行できませんが、ウィジェットの中で使う場合は何の制限もなく使うことができます。今回はフォト蔵のAPIにリクエストを投げています。

この2つのファイルを同じディレクトリに保存して、「config.xml」をOperaのウィンドウにドラッグ＆ドロップすると、ウィジェットが起動します。簡単ですね。まだ閉じるボタンも設定画面もありませんが、ウィジェットが1つできました。実際にウィジェットとして配布する場合は、 zipでディレクトリをアーカイブして拡張子をwgtに変更すればいいようです。

非常に簡単に作れるので、個人的なツールをささっと作るといった用途にも使えそうです。また、HTMLとJavaScriptで作成するので、JavaScriptの豊富なライブラリを利用できるのも大きなポイントです。ちょっといろいろ作ってみるのもいいかもしれませんね。