ほかのサービスとくっつけられるストレージサービスOpenBoxを自分でくっつける

ストレージサービスのBoxがOpenBoxというちょっとおもしろいことをしてるのをTumblrのポストJunk Innで知りました。OpenBoxは、Boxにアップロードしたファイルをウェブ上のほかのBoxとぜんぜん関係のないサービスでかんたんに使えるようにするためのしくみです。

OpenBoxをつかってみる

利用可能なサービス一覧から、使いたいサービスを選んで追加しておくと、自分のアップロードしたファイルを選んでメニューを開いたときにそのサービスが出てきます。

ちょうどWindowsでファイルを右クリックして、使いたいアプリケーションを選ぶと、選んだアプリケーションが起動してそのファイルを開いてくれるかんじで、えらんだウェブのサービスがそのファイルを開いてくれる、イメージで使えます。

ここまではまあなんかあったりもしそうですが、すごいのはBoxとぜんぜん関係ないサービスでそのファイルを編集したりしたあと、もう一度Boxに書き戻したりできるところです。

結果がみためでわかりやすいので、オンラインの画像編集ツールのPicnikを、編集したファイルを新しいファイルとして保存する設定(Save as new file)で開いてみます。モノクロにしてみました。編集を終わりたいときにはExportボタンを押すみたいです。

そうするとなんかよくわかんないけどPicnikでモノクロにしたバージョンが、お互いぜんぜん関係ないサービスなはずのBoxに保存されていてすげー！というわけです。

で、どうなってるのかとちょっと考えてみるわけですが、じつは仕組みは単純で、編集する画像ファイルのURLをパラメータでPicnikに渡して編集しているだけなのです。編集したやつをBoxに戻すのはどうやってるの？というのが最大の謎でしたが、それはPicnik APIにExportボタンを押したあとにリダイレクト先を指定するインターフェイスがあるのです。そのURLをBoxにしておくことで、ユーザが画像を編集してExportしたあとでBoxにリダイレクトしてもらうことで編集した画像のURLをPicnikに教えてもらってそれをBoxが保存しているみたいです。つまり、Box以外のサービスを起動してファイルになにか加工をしたあとそれをBoxに保存できるかどうかは起動するサービスの持っているインターフェイス次第で、Picnikはそういう仕組みがあるので編集後の画像をBoxに保存できる、というわけなのでした。

技術的にはわかってしまうと、なーんだ、というかんじですが、見せかたがちょっと違うだけでいままでとはぜんぜん違った繋がりかたをしている印象を与えるのでした。
Boxとぜんぜん関係のないPicnikで画像を編集したあとちゃんとBoxに書き戻せるところはPicnikのAPIがよく考えられているおかげで、それを使ってアプリケーションを起動して保存している感じにできるのに気がついたOpenBoxのひとのアイディア！でもってBoxの機能は実現されています。

自分でサービスを追加する

これだけだったらBoxの新機能おもしろいですね！でおしまいですが、OpenBoxはそれだけではありません。今日はOpenBoxでOpenBoxに自分で勝手にサービスを追加することができるのを知りました。openはそういう意味でついてるのです。たぶん。

で、これの作り方が理解しがたいのでid:asannouさんの指導のもとBoxにアップロードしたファイルをfavicon2dotsに送り込むOpenBoxのサービスを作ってみる手順を懇切丁寧にご紹介します。

ちなみに作ったサービスはほかのひとも自分のメニューに追加して使うことができます。よかったら追加してみてください。
OpenBox Service: favicon2dots

favicon2dots?

favicon2dotsは画像をdots風に変換してくれるものです。Digg - favicon2dotsで(なんかページが無くなっちゃったみたいです)Diggのフロントページを飾ったことがあったりもする栄えあるこのfavicon2dotsにBoxの画像を送り込むものを作ります。

Create new Service Step1

新しいサービスはOpenBoxサービス一覧のページの一番下のTip: Are you a service provider? Add your service to OpenBoxのページにあるCreate new Serviceというボタンから作ることができます。Agreementにagreeすると、今から作るサービスの概要について入力するための画面が出てきます。

この下にもいくつか項目がありますが、とりあえず上のキャプチャにある部分だけ埋めれば大丈夫。
Service nameのところは文字通りサービスの名前になります。ファイルを選んだときに出てくるメニューの名前や、サービスの紹介が表示されるpermalinkの一部に使われます。Service description, Support email, Website URLもてきとうに書いてあげてください。

ボタンを押すと今度はサービスの中身、利用しようとしているサービスにどういうデータを送るかを設定する画面が出てきます。

Create new Service Step2

Name, Descriptionはさっき書いたじゃーんと思いつつとりあえずコピーして貼っておきました。Supported Extensions, Category, FileType Categoryは、利用しようとしているサービスの種類に合わせて設定します。今回は画像の加工をするものなのでFileType CategoryはImagesでCategoryはConverting, Supported Extensionsはよくわからないので無難そうなpng,jpgにしてあります。

ここでサービスに渡す細かいパラメータの設定を行います。ここが重要！この部分がOpenBoxのすべてです。

上から順番にさらっと説明しますと、Prompt parametersはサービスを開こうとしたとき、もし必要ならユーザにパラメータを入力してもらうことができます。今回はユーザになにか入れてもらったりはしないので空白のままです。

Callback configurationでは、サービスの呼び出しかたを指定します。ここ、わかってないんですがUser experienceはpopupを選びます。server-sideは、たぶんブラウザ上では何かが開いたりすることなく、Boxのサーバと利用しようとしているサーバだけで処理が完結して、人間は何もしなくていいという場合に選ぶんだと思います(予測なので違ってたらごめんなさい)。

Methodは、利用しようとするサービスにパラメータを渡す方法です。今回はふつうにHTMLでフォームをsubmitするfavicon2dotsを利用しているのでRESTを選びます。

Initial Callback URLには、呼び出すサービスのURLを指定します。favicon2dotsのHTMLを覗くとhttp://favicon2dots.com/createにPOSTするようになっているのがわかるのでhttp://favicon2dots.com/createを指定します。

Client Callback URLはよくわかりません。URL to the popupと書かれていますがなんでしょうねー。とりあえずなくていけたので空白にしています。

最後にサービスに渡すパラメータを指定します。MethodはGet, Post, Fileのみっつの中から選べます。GetとPostはそのままですがFileは何かというと、利用しようとしているサービスに対して選んだファイルの中身自体をBoxにアップロードしてほしいときに使います。今回のfavicon2dotsは変換したい画像のURLを指定するのでPostにしていますが、ファイルをアップロードして変換してもらうようなサービスのときにはFileを選ぶわけです。

Parameter nameはinputタグのnameに入っているやつですね。favicon2dotsのHTMLを覗くとuriになっているのでuriを入力します。

Parameter valueのところはみためふつうのテキストボックスなのですが、クリックすると選択肢が出てくるようになっています。Box側で管理されている値、たとえば画像のURLだったり、ページのURLだったりをパラメータとして渡したいときにはここから選べばいいです。

で、ボタンを押したて保存したらOpenBoxのサービス完成です。

実行

自分が作ったサービスは自動的に自分のメニューに出てくるようになっているので、サービスに送り込みたいファイルを選んでメニューからさっきつくったfavicon2dotsを選択します。

こうしてできあがったのが下の画像。ちょっとこわいですね....

favicon2dotsにはできあがった画像のURLなどをパラメータとしてcallbackするような仕組みはないのでBoxに保存することはできませんが、callbackで生成された画像などのURLを渡すインターフェイスを用意しておけば、Boxに限らず他のサービスからも呼び出してその結果を元のサービスに戻す、という利用のしかたが可能になるので用意しておくといいかもしれません。

トラブルシューティング

以上、ざっと紹介した通り、設定ファイルのようなものを書いたりするのではなく、フォームをクリックしまくっていろいろ入力することでOpenBoxとサービスをつなげることができます。で、ここでちょっと大変なのがデバッグです。繋げようとしているサービスが自分が管理しているものならよいですが、今回のように自分が管理していないサービスと繋げようとすると、Boxからどんなリクエストが送られているかがわからないのでうまくいかないときは問題を特定するのが困難です。

そういうときはいったんInitial Callback URLを自分が管理しているサーバに変更して、どんなリクエストが送られてきているかを確認して、思い通りのパラメータが送られてくるように設定を変えてからほんものの利用したいサービスのURLに変更するといいでしょう。今回favicon2dotsをOpenBoxを繋げていて、なぜかBox上にあるJPEGの画像だとfavicon2dotsがBoxのfaviconをdotsに変換するという現象に悩まされたため、そうして送られているリクエストを調べました。

まとめ

これまでもBoxでやられていることの一部はブックマークレットなどで実現することができました。しかしそれがサービスにあらかじめ組み込まれていて、普段使っているOSに似た操作で"ウェブ上のサービスを起動する"感覚で利用できるようになっているのは、一般的なユーザにとって新鮮なのではないでしょうか。

起動するサービスが、そのサービス上で生成したURLをパラメータにして指定したURLにリダイレクトする機能を備えている場合、あたかもBoxにあるファイルをウェブ上のサービスで開いてBoxに保存しているかのような操作感が実現されています。サービス上で生成したURLをパラメータにして特定のURLにリダイレクトする機能は、渡されたあるURLを加工してべつのURLにして出す仕組みとしてみることもできます。

現在ほとんどのサービスは、受け取ったデータを加工した結果をブラウザ上で人間に対して視覚的に返していますが、加工したデータをURLというキカイに理解できるカタチで返すことで全く関係のないサービス同士をゆるくくっつけるためのインターフェイスになるというところはおもしろいです。