Flickr のような画像編集機能を実現する「Picnik API」

たぶん去年（2007 年）末あたりからだと思うのですが、 Flickr に画像編集機能が追加されました。アップロードした画像に対して、トリミングやリサイズ、各種フィルター等の加工をブラウザ上で行えるものです。さすがにデスクトップのペイントツールほどではありませんが、日常的な画像の加工にはじゅうぶんな機能があります。こんな機能を自分のサイトでも実現できたら素晴らしいはと思いませんか？本日はそんな希望を叶てくれる素晴らしい Web API 、「Picnik API」をご紹介します！

Picnik とは

まず最初に API を提供している Picnik というサイトについてご紹介しましょう。 Picnik では前述のような画像編集機能を提供する Flash ベースの Web アプリケーションを公開しています。基本機能を利用するだけならユーザー登録の必要もなく、誰でも自由に使えます。画像編集 Web アプリとしては最も成功しているサイトで、実は Flickr の画像編集機能も Picnik が提供しているのです。

人気の秘密はわかりやすくシンプルな UI と各種画像共有サイトとの連携機能、そして Web ページのスクリーンショットを直接 Picnik に転送できる Firefox 拡張機能など。私も常用していて、最近の記事中のスクリーンショットはほとんど Picnik で済ませています。

こんな便利な Picnik を自分のサイトから呼び出すための API が、今回ご紹介する Picnik API です。人気 Web アプリケーションの機能をまるまる取り込めるのですから、これほどお得な API はありません。ぜひ使い方を覚えて、友達や同僚に自慢しましょう！（笑）

使ってみる

それでは、さっそく Picnik API を使ってみましょう。細かい指定まで含めるとかなりバリエーションがあるので、ここでは基本的なものに絞ってご紹介しようと思います。その代わりに実際に試せるリンクやフォームをできるだけ設置しましたので、ぜひお試しください。

まずは API キーを取得

Picnik API を利用するためには、 API キーを取得しなければなりません。そのためにはまず Picnik へのユーザー登録が必要なので、アカウントのない方はこちらのページから登録してください。ユーザーアカウントは無料で、すぐに有効になるはずです。

ユーザーアカウントを登録したら、次はこちらのページで API キーを取得します。まだログインしていない場合は右上にログインフォームがあるので、そこにユーザー名とパスワードを入力してログインしてください。その後、表示されるフォームに必要な情報を記入して送信すれば OK です。ほどなく記入したメールアドレスに API キーを記載したメールが届くはずです。

API キーを取得したら、 "http://www.picnik.com/service/?_apikey=" の後に取得した API キーを付加した URL にアクセスしてみてください。以下は私の API キーを使った例です。

http://www.picnik.com/service/?_apikey=1ff03cbc94b076508713d742132c34bc

API キーが正しければ、 Picnik が起動するはずです。このように、 Picnik API のほとんどの機能は、適切なパラメータを付加して "http://www.picnik.com/service/" にアクセスするだけで利用できます。とても簡単ですね。

画像を Picnik に読み込ませる

起動時に読み込む画像を指定するには、 _import パラメータを使います。一番簡単な方法は、以下のように画像の URL を直接指定することです。例えば、以下の URL はこちらの画像を読み込んで Picnik を起動します。画像 URL には URL エンコードが必要です。

http://www.picnik.com/service/?_apikey=1ff03cbc94b076508713d742132c34bc&_import=http%3A%2F%2Fcache.webos-goodies.jp%2Fcache%2Ffarm4.static.flickr.com%2F3034%2F2402726221_925db63194.jpg

呼び出しには POST メソッドも使えます。以下のようにフォームを使えば URL エンコードも不要になります。

<form action="http://www.picnik.com/service/" method="POST" target="_blank">
  <input type="hidden" name="_apikey" value="1ff03cbc94b076508713d742132c34bc" />
  <input type="text" name="_import" size="30" value="http://cache.webos-goodies.jp/cache/farm4.static.flickr.com/3034/2402726221_925db63194.jpg" />
  <input type="submit" value="送信" />
</form>

さらに、マルチパートフォームを使ってのファイルアップロードも可能です。この場合、 _import には画像データ（ファイルアップロードフォーム）のパラメータ名を指定します。

<form action="http://www.picnik.com/service/" method="POST" target="_blank" enctype="multipart/form-data">
  <input type="hidden" name="_apikey" value="1ff03cbc94b076508713d742132c34bc" />
  <input type="hidden" name="_import" value="imagedata" />
  <input type="file" name="imagedata" />
  <input type="submit" value="送信" />
</form>

もちろん、サーバー側でマルチパートのリクエストを送って画像をアップロードすることも可能です。その場合、こちらのページの最後に書かれている方法で編集画面の URL が取得できますので、ブラウザをそこにリダイレクトさせれば編集画面が表示されます。

編集結果を受け取る

画像を Picnik で編集できても、その編集結果を取得できないのでは意味がありませんよね。もちろんその方法も用意されています。ただ、さすがにインポートよりも少しばかり複雑です。基本的に、以下の 2 通りの方法があります。

編集結果を格納した HTTP リクエストを呼び出し元のサーバーに送信する。
編集結果にアクセスするためのテンポラリ URL とともに、ユーザーの Web ブラウザをリダイレクトさせる。

(1) はサーバーサイドの CGI が必要なので割愛します。詳細はこちらのページをご覧ください。ここでは (2) の方法で編集結果の画像を表示させてみましょう。

編集結果を取得するにはリダイレクト先の URL を _export パラメータで指定し、さらに (2) の方法であることを明示するために _export_agent に "browser" を指定します。フォームにすると以下のような感じです。

<form action="http://www.picnik.com/service/" method="POST" target="_blank">
  <input type="hidden" name="_apikey" value="1ff03cbc94b076508713d742132c34bc" />
  <input type="text" name="_import" size="30" value="http://cache.webos-goodies.jp/cache/farm4.static.flickr.com/3034/2402726221_925db63194.jpg" />
  <input type="hidden" name="_export" value="http://webos-goodies.googlecode.com/svn/trunk/blog/articles/51319268/picnik.html" />
  <input type="hidden" name="_export_agent" value="browser" />
  <input type="submit" value="送信" />
</form>

こうすると Picnik の編集画面右上に「Export」ボタンが表示されます。それをクリックすると指定したページにリダイレクトされるのですが、その際に URL の file パラメータとして編集結果の URL が渡されます。後はリダイレクト先でその URL にアクセスして編集結果を取得すれば OK です。上記の例では、以下のような HTML (JavaScript) を使って編集結果の画像を表示させています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Picnik の編集結果</title>
<script type="text/javascript">
function display_image() {
  if(/(?:\?|&)file=([^&]+)/.exec(location.search)) {
    var img = document.createElement('IMG');
    img.src = unescape(RegExp.$1);
    document.body.appendChild(img);
  }
}
</script>
</head>

<body onload="display_image();">
<h1>Picnik の編集結果</h1>
</body>

</html>

説明するまでもないかと思いますが、 URL の file パラメータをデコードして編集結果画像の URL を取得し、それを IMG タグの src 属性に設定しています。 CGI が使えれば、その URL にアクセスして編集結果を保存することも可能です。

以上で Picnik の呼び出しから編集結果の取得までの流れがお分かりいただけたかと思います。このほかにも、パラメータ次第で UI をカスタマイズしたり上書き確認を表示したりと、いろいろなことが可能です。詳細は公式チュートリアルで解説されていますので、そちらをご参照ください。

IFRAME でページ内にポップアップ表示

ここまでは Picnik のサイトに移動して編集画面を表示してきましたが、 Flickr ではページ遷移なしで編集画面が表示されています。やっぱり自分のサイトでもそうしたいですよね。まったく同じというわけにはいきませんが、ページ内にポップアップで編集画面を開くためのサンプルスクリプトが用意されていますので、それを使ってみましょう。

まずは以下の 3 つのファイルをダウンロードして、自分のサイトの適切な場所にアップロードします（ここでは "/picnik" 以下にアップロードしたと仮定します）。とくに close.html は呼び出し元のページと同じドメインでないと正しく動作しないので注意してください。

そして、編集画面を表示したいページの HEAD 要素内で以下のようにしてスクリプトとスタイルシートを読み込みます。

<link rel="stylesheet" href="/picnik/picnikbox.css" media="screen" type="text/css" />
<script type="text/javascript" src="/picnik/picnikbox.js"></script>

あとは、 API を呼び出すリンクを配置するだけです。

<a class="pbox" href="http://www.picnik.com/service/?_close_target=http%3A%2F%2Fyour.domain.com%2Fpicnik%2Fclose.html&_apikey=1ff03cbc94b076508713d742132c34bc&_import=http%3A%2F%2Fcache.webos-goodies.jp%2Fcache%2Ffarm4.static.flickr.com%2F3034%2F2402726221_925db63194.jpg">Picnik で編集</a>

これまでの呼び出しとの相違点は 2 つ。ひとつは、 "pbox" という class が指定されている点です。これは picnikbox.js が上記のリンクに適切なイベントハンドラを設定するためのマーカーです。もうひとつは、先ほどアップロードした "close.html" の URL を "_close_target" パラメータで指定していることです。こうすることで、クローズボタンが押された際に IFRAME がこのページにリダイレクトされ、ポップアップのクローズなどの後処理を行います。

以下のリンクが実際に動作しますので、お試しください。

Picnik で編集

ちょっと味気ないフレームですが、ページ遷移なしで編集画面が表示できましたね。これらのファイルは単なるサンプルなので、これをもとにして自由にカスタマイズできます。その気になれば Flickr とほぼ同等の表示も実現できるとはずですので、ニーズに合わせて工夫してみてください。

リファレンス

最後に、今回ご紹介できなかったものも含めて、 Picnik API で指定できるパラメータのリファレンスを掲載しておきます。 Picnik API でプログラミングする際のお供に、ぜひご活用ください。

全般

_apikey: API キーを指定します。 API キーはこちらで取得できます。

画像の読み込み

_import: Picnik 起動時に画像を読み込む方法を指定します。画像の URL を直接指定するか、もしくは URL やアップロードファイルを格納するフォームパラメータ名を指定します。
_returntype: デスクトップアプリケーションから Picnik API を利用する場合には "text" を指定します。詳細はリンク先を参照してください。
_title: 画像のタイトルを指定します。「Save & Share」タブで画像を保存する際にファイル名として使われます。

編集結果の取得

_export: 「Export」ボタンをクリックした際のデータ送信先 URL を指定します。
_export_agent: 編集結果を送信する際の呼び出し元サーバーの指定。省略すると "picnik.com" になる。 "browser" を指定すると、ユーザーのブラウザをリダイレクトする。
_export_field: 編集結果を格納するパラメータ名を指定。デフォルトは _import に指定した名前。 _import に URL を直接指定した場合は "file" 。
_export_method: 編集結果を送信するための HTTP メソッドを "GET" か "POST" で指定。ただし "GET" は "_export_agent=browser" のときしか指定できない。
_export_title: 「Export」ボタンに表示する文字列を指定する。
_imageid: 画像を一意に識別する ID を指定する。 _replace 参照。
_original_thumb: _replace のダイアログに表示される元画像サムネイルの URL を指定する。サムネイルは 240x240 以内にすること。
_redirect: 「Export」ボタンをクリックした後、ユーザーがリダイレクトされる URL を指定する。ただし "_export_agent=browser" のときは無視される。
_replace: 画像を上書きするかどうかを尋ねるダイアログの挙動を指定します。指定できる値は "ask" （上書きか新規作成かを尋ねる）、 "confirm" （上書きか編集画面に戻るかを尋ねる）、 "yes" （ダイアログを表示せず、常に上書き）、 "no" （常に新規作成）のいずれかです。上書きかどうかは、結果送信時のパラメータに _imageid が含まれるかどうかで判断します（上書きならば編集開始時に指定したのと同じ _imageid が返る）。

見た目のカスタマイズ

_exclude: 編集画面の各タブを表示するかどうかを、 "in" （Photos タブを表示しない）、 "edit" （Edit タブを表示しない）、 "create" （Create タブを表示しない）、 "out" （Save & Sahre タブを表示しない）で指定します。複数指定する場合はコンマ区切りにしてください。なお、 Home タブは省略できません。
_host_name: Export ダイアログに表示されるホスト名を指定します。

Picnik In A Box

_close_target: クローズボタンが押されたときにリダイレクトする URL を指定します。
_expand_button: "true" を指定すると「expand」ボタンを表示します。

以上、本日は自分のサイトに画像編集機能を組み込める Picnik API をご紹介しました。 Web アプリケーションを再利用可能なコンポーネントとして公開し、他のサイトと連携してユーザーの利便性を向上する。いよいよ WebOS の実現が間近に迫ってきたという感じがしますね。あと数年もすれば、どの Web サイトでもこういった編集機能が当たり前のように提供されているかもしれません。そんな素晴らしい未来を先取りできる Picnik API 、皆さんもぜひご活用ください！

2008年04月15日 08:48 | Comments() | TrackBack() |

この記事にコメントする

Recommendations

Books

「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ！

WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。