hirax.net::inside out::2008年08月02日

最新記事(inside out)へ  |   年と月を指定して記事を読む(クリック!)

2008年7月 を読む << 2008年8月 を読む >> 2008年9月 を読む

2008-08-02[n年前へ]

画像処理WEBアプリを簡単作成用「ビジュアル言語」を作る 

 「ビジュアル言語」風の画像処理WEBアプリの叩き台を作ってみました。 いえ、正確に言えば、そんな「ビジュアル言語」環境を作ってみました。つまり、画像処理WEBアプリを簡単に作れる!?「ビジュアル言語」を作ってみた、ということになります。

 ここで言う「ビジュアル言語」という言葉には、3つの意味合い・特徴があります。

  1. 処理構造をグラフィカルな部品・ワイヤーで表現・作成すること
  2. 各場所で処理されている「データが見える」こと
  3. 部品・ワイヤーを並べ終わった画面そのものが「アプリケーション」のGUI画面となっていること
 1,2番目の項目だけでなく、この3番目の点を意識しながら作ってみました。といっても、「叩き台」なので、デザインはいかにも開発時用(デバッグ用のデータ構造が見えたりする)など、イマイチな部分はありますが、イメージを掴むことはできるだろう、と思います。

 ブラウザ上の操作感は(UI周りはWireItライブラリを使っていて)YahooPipesを模範にしています。また、処理データ構造は(YahooPipesを意識した)ImagePipesに準拠するようになっていて(つまりある程度緩い規約にもとづいたJSONになっていて)、 「オブジェクト」に対してユーザが何かしたり、あるいは、入力部に他の部品からメッセージを受けた時に、Javascriptでクライアント内部で処理をしたり、あるいは、サーバに対して同期リクエストを送ることで、出力結果を生成し、そして出力ポートの先にある他部品に結果メッセージを送信する、という作りになっています。

 下の動画がその「叩き台」アプリケーションの動作動画です(高解像度画像もここに置いておきます)。この動画が「何をしているか」を箇条書きすると、

  1. 「画像をアップロードするフォームパーツ」を作り(出力はアップロードされた画像情報を示すJSON)
  2. 入力を2出力に分岐する(JavaScriptで書いた)部品を配置し
  3. 入力された(JSONで表現されている)画像を表示する部品を置いて
  4. 部品間をワイヤーをつなぐ
これで、「画像アップロード+いくつかの処理+画像表示」WEBアプリケーションのコード実装や画面設計が終了した……ということになります。というわけで、画像処理WEBアプリを簡単に作れる!?「ビジュアル言語」を作ってみたのです。「画像処理ジェネレータを作るジェネレータ」みたいなものの高機能版を、「ビジュアル言語」で作ってみたわけです。

 WireItがYahooUIライブラリに実装された折にでも、適当にサービスを立ち上げてみたいな、と思っています。

サンプル画面