Windows10からラズパイで実行するjavaFXプログラムをリモートデバッグする方法～環境構築からデバッグ実行まで①～

長いので分けて書く

### Windows10でEclipseを使ったクロス開発環境を構築する###
1.
以下のサイトから好きなバージョンをダウンロードし適当なフォルダに展開しておく。あまり深いフォルダに入れるのと日本語が入っているフォルダ名は何かとはまるので避ける
https://mergedoc.osdn.jp/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/0f2efd4b-5b7b-dfb8-edf0-0f1c803e1918.png)
2.
ここではEclipse4.8Photonを使う。新しすぎるバージョンは古いプラグインとの相性が悪い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/3cb098dd-af34-7bc2-f2e6-dd434294cb28.png)
3.
Windows 64bit FullEdition javaを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/75ff723b-ee49-c3ef-2b26-981fa945faea.png)
4.
リンクをクリックしダウンロード
ダウンロード速度が呪い...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/8e434a32-ce61-e34f-ecf0-0d1c09cef163.png)
5.
適当なフォルダに展開し、起動
(展開したフォルダ)\pleiades-4.8\pleiades\eclipse\eclipse.exeで起動

6.起動時にプロジェクトの保存先を聞かれるので適当に決める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/1b14c864-4db4-758e-16a8-a625b5e9bbe3.png)

7.起動直後の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/88f0023d-c5c9-3073-a9ac-1ef1a65cd1ad.png)

8.「ファイル」-「新規」-「その他」-「JavaFXプロジェクト」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/9b73f880-9343-39a0-9a0a-92c542371c18.png)

9.プロジェクト名にHelloRemoteを入力し、次へをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/b9381858-cb07-5913-f536-62481e06f15b.png)
10.そのまま「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/327d3e38-68d7-868e-e56d-111c82e69948.png)
11.言語を「FXML」へ変更
ルートタイプはAnchorPaneを選んで置く
「完了」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/54eb1afb-e6e8-dc1e-c85e-4cc3bdb78acd.png)

###Scene BuilderをインストールしEclipseと連携させる###
1.ダウンロード
https://gluonhq.com/products/scene-builder/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/626edb42-9f59-b524-804d-f4536fcce9c3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/7b8d30e8-37b5-ea52-19a6-b86257bb3448.png)

プラットフォームはWindowsインストーラーを選択
ダウンロードボタンを押ししばらく待つとダウンロードできる。
SceneBuilder-11.0.0.msi
インストール....

2.EclipseとSceneBuilderを連携させる
「ウィンドウ」-「設定」-「javaFX」を開き
ScnenBuilder実行可能ファイルを選択し適用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/811f62a4-e387-52c8-ff65-2688343faafa.png)

3.EclipseのパッケージエクスプローラーからSample.fxmlを右クリックしSceneBuilderで開くを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/025a3b51-66dd-9320-f10e-6ed5f69287c5.png)

4.SceneBuilderが開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/f86de0b0-5ca0-625d-2da8-0947e3119139.png)

5.Document-Hierarchy-AnchorPaneを選択し、MinWidth、MinHeightを640、480に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/34d73668-5c08-cfdd-dee6-e69266058750.png)

6.ControlsパネルからButtonをドラッグ&ドロップで配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/87942aba-ed6c-625e-90d5-d355f47eb094.png)

7.Buttonオブジェクトを選択、Codeのfx:idをtestBT、onActionにonTestBTを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/7fee4f94-3bea-c56f-e9ce-d5777ac40304.png)

8.同様にしてLabelを配置
 fx:idはtestLBとしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/5edd2b62-4707-71c4-5230-dd08b7a8fb84.png)

9.取り敢えず保存しておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/b9c5e181-8bd9-5e41-ca83-f345ea6b00b9.png)

10.View - ViewSampleControlSkeltonを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/16c8c81a-fa48-a61d-1e76-a134cf19c469.png)

11.右下のFullにチェックを入れて、「コピー」
　クリップボードにコピーされる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/852f9d93-d92c-8d33-89ea-b27e5be79f31.png)

12.Eclipseに戻り、パッケージエクスプローラーのSampleController.javaをダブルクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/57237d45-a23a-8a04-4d23-227896588242.png)
13.全部消してから、クリップボードの内容を張り付け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/6b8bc2b8-b839-5857-f9dd-2686f757714e.png)

14.パッケージエクスプローラーのMain.javaを右クリックしJavaアプリケーションで実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/6d9178af-4b1b-44b4-d301-fb7b1f42bbaa.png)
15.優先ランチャーの選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/6cc6c454-42ae-73da-4c0c-b8f0cb109bd0.png)
16.保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/3155e841-671a-fe16-5e6f-4b666e7f1783.png)
17.実行されるが何も表示されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/ce747c85-de1b-6f3f-860f-e6762f54c900.png)
18.いったん、プログラムを閉じプロジェクトクリーンを実行
   これを実行しないとSceneBuilderで保存しただけでは、プロジェクト側に反映されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/66192edf-fd60-2825-c599-d59e07387ed1.png)
19.再び実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/1a08f131-27db-d3b8-7c3f-fa736a87d89e.png)

###プログラムの変更###
1.パッケージエクスプローラーのSampleController.javaを開き修正
    @FXML
    void onTestBT(ActionEvent event) {
    	Platform.runLater(() ->testLB.setText("HelloFX"));
    }
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/1637641f-abe0-1ad9-cba0-54c86162461c.png)

2.実行　　Buttonを押しラベルがHelloFXに変われば問題なし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672650/06c2e93f-f07a-c877-9302-3b894b0c09ef.png)

###次回###
このプログラムをラズパイに配置して実行する方法を説明する

2020.0726 kamoshika
当記事と全く関係ないが....主のチャンネルのリンクを貼っておく
https://www.youtube.com/channel/UCbtzwsQhTuUzW3ERoBSYZDw/