たのしいchumby

第3回 chumbyを軽くハックしてみよう

この記事を読むのに必要な時間:およそ 4.5 分

widgetを作らないでやるハック?

さて,ここからはAsamaが担当します。既に公開されているchumbyのwidgetを使った,お手軽なハック術をご紹介していきます。

オリジナルのフォトフレームで楽しむ

連載第2回で説明したようにFlickrやPicasaなどの写真共有サイトを使っている人ならば,それらに対応したwidgetを使うことで,簡単にchumbyをフォトフレームにできます。

「じゃあそうでない人は?」ということで,ここでは自分のWebサーバ(自宅サーバやレンタルサーバなど)上に置いた複数の写真をchumbyで見る方法を紹介します。

そのためのwidgetがPhotoFrameです。複数の写真をスライドショー表示してくれるフォトフレームです。まず,channelにPhotoFrame widgetを追加します。それからwidgetの作者による下記の記事に従って,XMLファイルを用意します。

PhotoFrame

PhotoFrame

かいつまんで説明していきます。前提として,フォトフレームで順次表示させたい写真ファイルは次のものと仮定します。

  • http://example.com/pf/images1.jpg
  • http://example.com/pf/images2.jpg
  • http://example.com/pf/images3.jpg

これらの写真の場所情報をまとめて記述しておくimages.xml(http://example.com/pf/images.xml)というファイルを作ります。imageタグのfilename属性で写真ファイルの相対パスを指定します。

images.xml

<images>
  <image filename="image1.jpg" />
  <image filename="image2.jpg" />
  <image filename="image3.jpg" />
</images>

次に,下記のcrossdomain.xmlファイルをWebサイトのルートの直下に置きます(この例では,http://example.com/csrossdomain.xmlの場所⁠⁠。これはPhotoFrame widgetを通じてchumbyが先ほどのimages.xmlファイルにアクセスできるようにするためのものです。

crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="*.chumby.com" />
</cross-domain-policy>

あとは,PhotoFrame widget configuration(chumbyのサイトからいじれる)でimages.xmlを置いたディレクトリを指すURLを指定します(末尾のスラッシュは不要⁠⁠。前述の例だと,http://example.com/pfを指定すればOKです。

以上で,自分のウェブサイト上の写真を簡単にスライドショーにできます。

応用

ちょっとだけ複雑な例で簡単な応用方法についても説明しておきます。

例えば,http://example.com/blog/でブログをやっていて,そこで使っている写真(*.jpg)がhttp://example.com/blog/img/以下に入っているとします。

この場合,images.xml(http://example.com/pf/images.xml)で指定するfilenameは"../blog/img/0001.jpg"などのパスになります。先ほどのwidgetの作者による記事に,このようなタスク用のシェルスクリプトの雛形が紹介されていますので参照してみてください。

なお,Webサーバ上の写真だけでなく,USBメモリに入れた写真に対してもこのPhotoFrame widgetは使えます。

著者プロフィール

Shibuya.chumbies

日本で最初のchumby大量輸入,および日本初のchumbyイベント「chumby night」を開催をした「chumby の普及を促進」する有志ユーザ団体。

URLhttp://chumby-night.net/

関連記事