2

windowsでjavaFXのwebviewの中のjavascriptからjavaという経路で処理をする場合の効率のよいデバック方法を教えてください。

javascriptから実行されるjavaは以下の様になっています。

window = (JSObject) webArea.getEngine().executeScript("window");

// JavaScriptとJavaのI/F
window.setMember("app", this.app);

javascriptの部分のみクロームなどでデバックは可能ですが、そこからjavaを呼出せず困っています。(javascriptのデバックを中心にしたいので、webviewでのjavascriptのデバック方法があれば、その方法でもかまいません)

また、開発環境はインターネットには接続していません。
(インターネット接続マシンと開発環境は別の環境にあります)

=============================
2015/4/23 追記

回答のコメントを記入しようとしましたが、文字数オーバーのため
質問に追記します。

回答を元に以下のプログラムをインターネット環境でテスト的に作成しましたが、デバッカーの画面が開きません。
また、htmlがローカルなので、Firebug Liteのパスをローカルにしてもデバッカーの画面が開きません
なぜでしょうか?

public class Main extends Application {

    private String appName;
    protected Stage stage;
    private static Main instance;

    // 画面サイズの初期値
    public static final int DEFALUT_WIN_WIDTH = 1024;
    public static final int DEFALUT_WIN_HEIGHT = 500;
    // 画面サイズの最小値
    public static final int MINIMUM_WIN_WIDTH = 250;
    public static final int MINIMUM_WIN_HEIGHT = 75;

    /**
     * Mainクラスのインスタンスを返します。
     * 
     * @return
     */
    public static Main getInstance() {
        return instance;
    }

    /**
     * ステージを返します。
     * 
     * @return
     */
    public Stage getStage() {
        return this.stage;
    }

    @Override
    public void start(Stage primaryStage) {
        try {
            Main.instance = this;
            this.stage = primaryStage;

            showView();

        } catch (Exception e) {
            Platform.exit();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }

    void showStage() {
        String strTitle = getAppName();

        // タイトルの設定
        this.stage.setTitle(strTitle);
        // 画面最小サイズの設定
        this.stage.setMinWidth(MINIMUM_WIN_WIDTH);
        this.stage.setMinHeight(MINIMUM_WIN_HEIGHT);
        // 表示
        this.stage.show();
    }

    protected void showView() {
        Parent root;
        try {
            root = FXMLLoader.load(getClass().getClassLoader().getResource("test/view/Main.fxml"));
            Scene scene = new Scene(root, DEFALUT_WIN_WIDTH, DEFALUT_WIN_HEIGHT);
            this.stage.setScene(scene);
            showStage();
        } catch (IOException e) {
            // TODO 自動生成された catch ブロック
            e.printStackTrace();
        }
    }

    public String getAppName() {
        return this.appName;
    }
}


public class WebViewController implements Initializable {
    @FXML
    WebView webArea;

    WebEngine engine = null;
    JSObject window = null;

    String url = null;

    @Override
    public void initialize(URL arg0, ResourceBundle arg1) {

        engine = webArea.getEngine();

        String appPath;
        appPath = System.getProperty("user.dir");
        final String html = File.separator + "WebContent" + File.separator + "main-view.html";
        url = "file:///" + appPath + html;

        engine.setJavaScriptEnabled(true);

        // 初期表示
        engine.load(url);
    }

    // Firebugを起動するボタンを用意し、このメソッドを呼び出すと仮定します
    @FXML
    void handleFirebugButtonAction(ActionEvent event) {
        if (engine.getDocument() != null) {
            // ダウンロードしたFirebug Liteの展開物に含まれているfirebug-lite.jsのURLを指定する
            String firebugLiteUrl = "https://getfirebug.com/firebug-lite.js#startOpened";
            Document document = engine.getDocument();
            Element scriptElement = document.createElement("script");
            scriptElement.setAttribute("type", "text/javascript");
            scriptElement.setAttribute("src", firebugLiteUrl);
            NodeList bodyList = document.getElementsByTagName("body");
            if (bodyList != null && bodyList.getLength() > 0) {
                bodyList.item(0).appendChild(scriptElement);
            }
        }
    }
}

<AnchorPane styleClass="Animation_bg" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
  <children>
     <fx:include source="webArea.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/>
  </children>
</AnchorPane>

<AnchorPane style="-fx-background-color: #FFFFFF;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="test.view.WebViewController">
  <children>
       <WebView fx:id="webArea" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />

       <Button onAction="#handleFirebugButtonAction"
             text="Firebug"
             AnchorPane.topAnchor="0.0" 
             AnchorPane.leftAnchor="0.0" />

  </children>
</AnchorPane>
2
  • javascriptから実行されるjavaはjavaサーブレットではありません。 とのことですが、「じゃあ、なんなの?」を書いておいたほうが、回答は得られやすくなります。
    – KoRoN
    Commented 2015年4月9日 5:11
  • KoRoNさん コメントありがとうございます。 質問内容を編集しました。 Commented 2015年4月9日 6:22

1 件の回答 1

1

使われているのは JavaFX の WebView ということでよろしいですよね?

WebView 上のコンテンツの JavaScript をデバッグしたいのならば Firebug Lite を利用するのが良いかもしれません。
https://getfirebug.com/firebuglite

Firebug Lite のブックマークレットの URL を WebEngie#executeScript() で呼び出せば、WebView 上で Firebug Lite が起動するはずです。

(追記)
インターネットに接続不可能な環境であるとのことでしたので、その場合の対応方法を考えてみました。
Firebug Lite はここからダウンロードすることができます。これをローカルに配置して読み込ませるようにすればいいのですが、JavaFX の WebView は Web ページを表示している際に、同時のローカルのコンテンツを読み込むことができないような仕様になっています (ここの説明が参考になります) 。

そこで、イントラ環境に Web サーバを立てて、そこからダウンロードした Firebug Lite のコンテンツを参照できるようにし、JavaFX アプリから参照すれば良いでしょう。

// Firebugを起動するボタンを用意し、このメソッドを呼び出すと仮定します
@FXML
void handleFirebugButtonAction(ActionEvent event) {
    if (webEngine.getDocument() != null) {
        // ダウンロードしたFirebug Liteの展開物に含まれているfirebug-lite.jsのURLを指定する
        String firebugLiteUrl = "http://example/firebug-lite/build/firebug-lite.js#startOpened";
        Document document = webEngine.getDocument();
        Element scriptElement = document.createElement("script");
        scriptElement.setAttribute("type", "text/javascript");
        scriptElement.setAttribute("src", firebugLiteUrl);
        NodeList bodyList = document.getElementsByTagName("body");
        if (bodyList != null && bodyList.getLength() > 0) {
            bodyList.item(0).appendChild(scriptElement);
        }
    }
}

JavaFX は WebEngine#getDocument() メソッドで WebView に表示しているコンテンツの DOM にアクセスできます。それを利用し、Firebug Lite の JavaScript コードを読み込む <script> 要素を DOM に追加しています (URL の末尾に #startOpened を追記することで、いきなり起動するようになります) 。

別途 Web サーバを立てる必要がありますが、これならインターネットにつながらない環境でも Firebug Lite を起動することができます。

8
  • AOE Takashiさん 回答ありがとうございます。 JavaFX の WebViewです。 質問を編集しました。 >Firebug Lite のブックマークレットの URL を WebEngie#executeScript() >で呼び出せば、WebView 上で Firebug Lite が起動するはずです。 テスト的には上記可能と思いますが、質問にもあるように、 開発環境はインターネットと切り離されているため 実際は難しいと思いますが、今後の参考に上記の具体的な方法をご教授お願いします。 Commented 2015年4月13日 1:06
  • 外部のネットワークに接続できない環境なんですね。対応策を考えて追記しました。自分の環境ではこの方法で起動に成功しています。 Commented 2015年4月16日 9:52
  • 回答を元にサンプルプログラムを作成しましたが、うまくいきません。 サンプルプログラムはコメントに書けなかったので、もとの質問に追記しました。 間違っている点があればご教授お願いします。 Commented 2015年4月23日 5:42
  • 確認ですが、FXML側にボタンを用意し、 handleFirebugButtonAction() メソッドとの紐付けは行いましたか? FXML のソースも貼り付けてもらうとより状況は分かりやすくなります。 Commented 2015年4月23日 6:48
  • FXML のソースも質問に追記しました Commented 2015年4月23日 8:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。