第6回　Yahoo! ウィジェットで分別ゴミ箱を作ってみよう！【特集サンデープログラミング】

myLab IDをお持ちでない方

>> デスクトップウィジェット

>> ウェブウィジェット

>> 携帯ウィジェット・その他

>> 機能分類

トップ>特集

第6回　Yahoo! ウィジェットで分別ゴミ箱を作ってみよう!

サンデープログラミング6回目はYahoo! ウィジェットに注目してみました。 Yahoo! ウィジェットはその名のとおりYahoo! JAPANが提供するウィジェット動作環境の１つです。今回はYahoo! ウィジェットエンジンで動作するデスクトップウィジェットを作ってみましょう。Yahoo! ウィジェットの概要については、
Yahoo! ウィジェットについて
を参照してください。

1. Yahoo! ウィジェットを作ってみよう。

1.1 環境整備

まずはYahoo! ウィジェットを動かせる環境を準備します。
Yahoo! ウィジェットのホームページからYahoo! ウィジェットエンジンをダウンロードしインストールしましょう。

Yahoo! ウィジェットエンジン

Yahoo! ウィジェットエンジンをインストールするといくつかのウィジェットが同梱されているので、同梱されているウィジェットの動かしてみてください。

次に開発環境を用意します。様々な環境があるのですが、テキストエディタがあれば開発を始めることが出来ます。また、Yahoo! ウィジェットの開発ツールのページに公式のリファレンスとウィジェットコンバータというウィジェットがあります。この2つは必要に応じてダウンロードしてください。

Yahoo！ウィジェットエンジン開発ツール

1.2　ウィジェットの開発方法

同梱ウィジェットのプログラム本体は「マイドキュメント」の「My Widgets」に格納されています。
「My Widgets」フォルダの中身を覗いてみると “*.widget”というファイルがあります。
これがウィジェットの本体です。
“*.widget”ファイルはウィジェットコンバータを使うことでフォルダに展開でき、
プログラムのソースや使用している画像など直接見ることが出来ます。

早速、 “*.widget”ファイルを展開してみましょう。

展開後のフォルダのなかに拡張子が“*.kon”というファイルが見つかります。このファイルにウィジェットのメインのコードが書かれています。
また、“*.kon”をダブルクリックするとウィジェットが起動します。このように“*.kon”からウィジェットを直接起動できるので、開発段階又は動作テスト等では“*.widget”ファイルを作る必要はありません。
つまり開発段階では“*.kon”にコードを書き、起動、修正の繰り返しでYahoo! ウィジェット作成していきます。

1.3　ウィジェットを作る

では実際にウィジェットを作ってみましょう。
作成するウィジェットは画面に文字を表示するシンプルなものです。

まず初めに“helloWorld.kon”というファイルを作成します。
“*.kon”ファイルはXML形式で記述していきます。
ここで注意ですがファイルを保存するときは、文字コードをUTF-8にする様にしてください。

「Hello World」ウィジェットを作るうえで必要な要素は3つです。

1　ウィジェット本体　　　　    <widget>
2　描画領域を設定　　        　<window>
3　文字を表示　　　　　    　　<text>

この3つで画面に文字を表示させることが出来ます。
各タグの詳細な説明はリファレンスを参考にしてください。

サンプル1ではデバッグモードでウィジェットを起動するための設定が入っています。
開発時にはデバッグモードを有効にすることでウィジェット自身以外にデバッグウィンドウを表示させることができます。デバッグウィンドウではログの出力、変数のダンプが利用できます。
デバッグモードを有効にするにはサンプル1の3～6行目のように
settingタグのname属性にdebug、value属性にonの値を与えてください。

###サンプル1（helloWorld）
<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.5">
//デバッグモードの設定
  <settings> 
    <setting name="debug" value="on"/>
  </settings>
//ウィンドウの生成
  <window title="mainWindow" name="mainWindow" height="100" width="100" >
//テキストの生成
    <text data="Hello World!" size="16" anchorStyle="topLeft"/>
  </window>
</widget>

それでは、“helloWorld.kon”をダブルクリックしてウィジェットを起動してみましょう。
画面に「Hello World!」の文字が現れたでしょうか。これがYahoo! ウィジェットの基本部分です。

■動作画面

1.4 “*.widget”ファイルの作成

最後に“helloWorld.widget”を作りましょう。
“*.widget”とは配布の際に利用されます。
今回はflat-file形式で作ります。
flat-file形式で“*.widget”を作成することで起動の高速化などメリットがあります。

“helloWorld.widget”を作成するには下図に示すように“helloWorld”フォルダを作り、
その中に“contents”フォルダを作ります。
“contents”フォルダに先ほど作成した“helloWorld.kon”ファイルを設置すれば準備が終了します。

ディレクトリ構造

ここからウィジェットコンバータの出番です。
ウィジェットコンバータに“helloWorld”フォルダをドラッグ＆ドロップし、flat-file形式を選択して変換ボタンを押してください。
ここまで問題なく作っていれば、“helloWorld.widget”が作成されたはずです。

以上がYahoo!ウィジェット開発の大まかな一連の流れとなります。
次項からさらに一歩進んで分別ゴミ箱ウィジェットを作っていきます。

2 分別ゴミ箱の開発

分別ゴミ箱を例に必要な機能を挙げて、ウィジェットの開発方法を説明していきます。
今回作成する分別ゴミ箱は
ドラッグ＆ドロップされたファイルを拡張子によって
それぞれの分別用フォルダへ振り分けて移動します。
分別用フォルダの中身が本当にいらなくなったとき、OS標準のゴミ箱に捨てる機能を持たせたウィジェットです。

■ウィジェット2つ
分別ゴミ箱ウィジェットの基本部分を開発することを通して

・起動時処理
・タイマー処理
・コンテキストメニューの利用
・ドラッグ＆ドロップ処理
・ファイルシステム（操作、情報取得）

の機能を学んでいきましょう。

2.1 ゴミ箱の表示、フォルダの作成

今回のゴミ箱は分別機能を持たせるため、一時保存用のフォルダを用意する必要があります。
初めに、複数のゴミ箱を表示することと分別用の一時保存用のフォルダをつくるところからスタートします。まずはゴミ箱を画面に表示させて見ましょう。

画像の表示には<Image>タグを用います。
サンプル2のようにいくつも<Image>タグでオブジェクトを配置する方法と
スクリプトを使ってサンプル3の"var itemImage = new Image();"のようにオブジェクトを作る方法があります。

###サンプル2　画像の表示　タグ形式
<image id="imgTrash1" name="trash1" src="Resources/ゴミ箱1.png" />
<image id="imgTrash2" name="trash2" src="Resources/ゴミ箱2.png" />

###サンプル3　画像の表示　スクリプト形式
trash1 = new Image(mainWindow);
trash1.hOffset=30;
trash1.vOffset=30;
trash1.src="Resources/ゴミ箱1.png";
trash2 = new Image(mainWindow);
trash2.hOffset=30;
trash2.vOffset=30;
trash2.src="Resources/ゴミ箱2.png";

次に分別用フォルダを用意する作業です。
フォルダの作成やコピーといった操作はfilesystemオブジェクトを用います。
フォルダの作成にはfilesystem.createDirectoryファンクションがあります。
ただ、自由にフォルダを作れるわけではなく制限があります。
詳しくはリファレンスのsystem.widgetDataFolder属性を参照してください。
フォルダ作成は何度も行うような処理ではないので、この処理は起動時にのみ行うことにします。
そこで、ウィジェットの起動時に呼び出されるonLoadに処理を記述します。

###サンプル4　フォルダの作成
<action trigger="onLoad">
  path = system.widgetDataFolder +　"作るフォルダ名";
  //フォルダがすでにある場合は作成しない。
  if(filesystem.itemExists(path) == false){filesystem.createDirectory(path);}
</action>

2.2 ドラッグ＆ドロップ処理

ファイルがドラッグ＆ドロップされたことをウィジェットが受け取る方法として
onDragdropイベントハンドラがあります。
onDragdropイベントをタグ内に記述すればウィジェット全体が対象となり、
タグ内に記述すれば画像が対象となります。
これも詳しい説明やプロパティはリファレンスのonDragdropを参照してください。

ドラッグ＆ドロップされたアイテムをウィジェットが受け取るためには、イベントの処理が必要です。
イベント自体の説明はsystem.event属性を参照してください。

今回の場合、ドラッグ＆ドロップされたアイテムへのパスはsystem.event.data属性に配列で渡されます。
またこのとき配列の先頭の値は“filenames”になっています。
最初は挙動を知るためにもデバッグウィンドウにドロップされたアイテム名を表示するように作成していくといいでしょう。
デバッグウィンドウに出力する関数としてlog、printなどがあります。
printは指定した文字列、logでは時間＋指定した文字列がデバッグウィンドウに表示されます。

###サンプル5　ドラッグ＆ドロップされたアイテムへのパスをデバッグウィンドウに表示。（log関数使用）
<onDragDrop>
<[CDATA{
  var myItems = system.event.data;
  if(myItems[0] == "filenames"){
    myItems.shift();
    log(myItems)
  }

ファイルへのパスがデバッグウィンドウに正確に出力されているでしょうか。

間違いがなければ、次は実際にファイルの移動を行います。
この処理もfilesystemオブジェクトを利用して行います。
ファイルの移動にはfilesystem.moveファンクションを使います。

filesystem.moveファンクションを用いて分別フォルダにファイルを分別して移動してください。
分別ルールはファイルサイズや拡張子を見る方法など自由に決めてください。
サンプル6では分別用の一時フォルダを「燃えるゴミフォルダ」、「燃えないゴミフォルダ」として拡張子“txt”を「燃えるゴミフォルダ」に移動させるようにしています。

###サンプル6　拡張子が“txt”なら燃えるゴミフォルダ、それ以外は燃えないゴミフォルダに移動させる場合
Item="ファイルのパス"
//拡張子の取り出し
re = new RegExp("\.([a-z0-9]+?)$");
Item.match(re);
ext= RegExp.$1;
//拡張子での分岐
if(ext=="txt"){
        myMoveToTrash(Item ,"燃えるゴミフォルダのパス");
    }else{
        myMoveToTrash(Item ,"燃えないゴミフォルダのパス");
}

2.3　ゴミ箱表示の変更

この項では準備で用意したゴミ箱フォルダと連動させて、
ウィジェット上にあるゴミ箱の表示を変更する処理について説明します。

変更ルールについてはゴミ箱の中身のサイズやファイル数を比較することで変更させることにしようと思います。

ファイル数やファイルサイズの取得はfilesystemオブジェクトで行います。
ファイル数の取得にはfilesystem.getDirectoryContentsファンクションを使い、
ファイルサイズの取得にはfilesystem.getFileInfoファンクションを利用します。

画像の変更は対象のImageオブジェクトのsrc属性を変更することで行います。

##サンプル7　ゴミ箱の中にファイルがあるかどうかで変更するサンプル
var dir = "燃えるゴミのフォルダ";
var info = filesystem.getDirectoryContents(tmp);
var length=info.length;
if(length >0){    
    trash1.src = "ゴミが入ってる画像";                    
}else{
    trash1.src = "ゴミが入っていない画像";                   
}

画像の変更の仕方は以上です。しかしどのタイミングで画像を
更新するかという問題が残ります。
そこで、タイマーによる更新を用います。
タイマーによる更新はonTimerを用いて実装します。
サンプルでは1秒ごとに画像の更新を行います。

###　サンプル　8　画像更新のサンプル
//myDoUpdate()を画像の更新する関数とする。
<action trigger="onTimer" interval="1">
  myDoUpdate();
</action>

2.4 分別ゴミ箱の中身をOS標準のゴミ箱へ捨てる

分別ゴミ箱ではファイルの分別機能を実現させるために
仮想のゴミ箱フォルダにファイルを移動させていました。
この状態では、ファイルは本当には削除されません。
そこでファイルを削除するためにOS標準のゴミ箱を移動させることにします。

OS標準のゴミ箱にファイルを移動させる処理も
filesystemオブジェクトを利用して行います。
ゴミ箱に移動させるためにはfilesystem.moveToTrashファンクションを使います。

###サンプル　9　燃えるゴミの中身を捨てる処理
filesystem.moveToTrash（”燃えるゴミフォルダの中身のパス”）

2.5 コンテキストメニューの利用

分別ゴミ箱を空にする処理については、右クリックで出るコンテキストメニューに各ゴミ箱を空にする項目を追加します。
ここで必要になるのはMenuItemオブジェクトとWindow.contextMenuItems属性です。
<action trigger="onLoad">に書くことで起動時にメニューを作成します。
また<onContextMenu>に書けば右クリックするたびにメニューを作成します。
右クリックのメニューが静的な場合<action trigger="onLoad">、
右クリックのメニューが動的な場合<onContextMenu>を利用するのがいいと思います。

今回はせっかくなのでメニューにゴミ箱のファイル数を表示させたいと思います。
そのため動的にメニューを作成してみましょう。

### サンプル　10　コンテキストメニューにメニューを追加する
<onContextMenu>

</onContextMenu>

ここまで順に作業をしてくださった方のデスクトップには分別ゴミ箱が見えるはずです。
これで基本的な機能を持った分別ゴミ箱が出来上がりました!

3 おわりに

分別ゴミ箱を通してウィジェットの作り方を機能別に紹介してきました。
widgetownやYahoo! ウィジェットギャラリーに登録した分別ゴミ箱では3種類のゴミ箱と、ゴミ箱の中身に応じて3種類の画像が用意されています。
分別ゴミ箱の作り方では触れていない部分もいくつかありますが
ウィジェットコンバータを使って実際にソースコードを覗いてみてください。
また、ほかのウィジェットもウィジェットコンバータを使えばソースコードを覗けるので、
コードを参考にして、
作成したウィジェットに機能追加したり、デザインを変更することで
オリジナルのウィジェットを作っていきましょう。
たとえば、ゴミ箱の量に応じて画像の大きさを変えることや、画像の位置やウィジェットの位置を自動で動かすなどいろいろ試してみましょう。

完成したYahoo! ウィジェットは、下記よりダウンロードいただけます。

太子堂工業　拡張子分別ゴミ箱
 ぶんべつ三兄弟
 widgetownに掲載の他の　Yahoo! ウィジェット