西海岸より

つらつらざつざつと

JavaFXでSeam Carving

もともと一度は実装してみたいと思っていたSeam CarvingをJavaFXで実装。(アルゴリズムJava)
JavaFXアプレットみたく簡単にWebに貼付けられるので、早速GoogleGadget経由で日記に貼付けてみた。
実行にはJava6のupdate10以上を推奨。動作確認は、MacではFirefoxSafariWindowsではIEのみ。(なぜかwinのfirefoxではアプレットが真っ黒に。)

ガジェット上でのAppletの動作が不安定なため、別ページに移動しました。ガジェットの作成方法は参考に残しておきます。

使い方

  • Seam Width」というボタンをクリックすると、横サイズを変更するのに必要な計算を実行します。
  • 終了すると写真右側中央に小さい□が表示されますので、それをドラッグするとサイズを変更できます。
  • Seam Height」のボタンは縦バージョン。
  • 「Reset」はもとの写真にリセットします。

以下が実行例。


はてなダイアリーJavaFXアプリを貼付けるまで

  • JavaFXアプリをローカルで開発
  • デプロイ用モジュールをwebからアクセス可能なPCにアップロード
    • モジュールはUsers/[ユーザ名]/NetBeansProjects/[Project名]/dist 以下のjar、jnlp、htmlファイル。実行時に自動で生成してくれている。
      • SeamCarving.jar
      • SeamCarving.jnlp
      • SeamCarving.html
      • SeamCarving_browser.jnlp
  • アップロードしたhtmlファイルを編集し、以下のようにarchiveの箇所のみhttpからのフルパスに書きかえる。
<script src="http://dl.javafx.com/dtfx.js"></script>
<script>
    javafx(
        {
              archive: "http://servername/... /SeamCarving.jar",
              draggable: true,
              width: 600,
              height: 400,
              code: "seamcarving.Main",
              name: "SeamCarving"
        }
    );
</script>
  • アップロードした**.jnlpファイルについても編集し、codebaseとhrefを**.jnlpファイルを配置した親ディレクトリまでのurlへと書き換える。
  • ブラウザからWeb経由で先ほど編集したファイルへアクセス
    • http://servername/... /SeamCarving.html"
    • ここで自分で作成したアプリがうまく動くようだったらOK
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="SeamCarving-mini" />
<Content type="html">
<![CDATA[
<script src="http://dl.javafx.com/dtfx.js"></script>
<script>
    javafx(
        {
              archive: "http://servername/... /SeamCarving.jar",
              draggable: true,
              width: 300,
              height: 250,
              code: "seamcarving.Main",
              name: "SeamCarving"
        }
    );
</script>
]]>
</Content>
</Module>
    • archiveのところに最初にアップしたjarファイルへのURLを入れること
    • 作成したガジェット(seamcarving.xml)をWeb上からアクセス可能なサーバへアップ
      • 今回はjarファイルなどをアップしたサーバにアップ。
<div class="seamcarving-widget">
<script src="http://gmodules.com/ig/ifr?url=http://folgore.jp/~mmiyazak/app/picedit/seamcarving.xml&synd=open&w=310&h=200&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>
</div>
    • url=には作成したxmlガジェットのURL
    • wはガジェットの横幅
    • hはガジェットの縦幅

追記 09/08/02

  • ガジェットでのAppletは動作が不安定なため、appletは別ページに移動しました。