背景
初投稿です．
2013年頃，無限に猫動画を流し続けるWebサイトEvercatが話題になりました．
作業中に猫動画を垂れ流せる最高のサイトだったのですが，2017年5月31日現在アクセス出来ない状態です．
そこで，JavaFXを触ってみるついでにEvercatもどきを作ってみよう，という魂胆です．
(2017年6月5日追記)6月4日にEvercat様がスマホに対応してお帰りになりました．
同要件のEvercatビューワも作りましたので是非．↓
オーバレイ+フレームレスなEvercatビューワ
http://qiita.com/chatagiri/items/511f700d997e5a7f409b
目的
① 猫動画を垂れ流せる．
② フレームレスな感じにして作業スペースをより広く取れるようにする．
③ せっかくなのでオーバレイ表示にしてアクティブウィンドウを切り替える手間を無くす．
とりあえず以上の要件を満たす物を作ります．
流れ
(1) JavaFXでWebブラウズ
(2) フレームレス，オーバレイ表示化
(3) YouTubeの動画再生，プレイリスト再生，自動再生
(4) ブラウザの移動とリサイズ
動作イメージ
動作確認環境
・Windows8.1,Windows10
・JDK1.8.0_121
・JRE1.8.0_121
・(JavaFX8)
ソース
先に動作すると思われるソースを張っておきます．
import java.util.ArrayList;
import java.util.Collections;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.web.WebView;
import javafx.event.EventHandler;
import javafx.application.Application;
import javafx.scene.input.MouseEvent;
public class Nyansomware extends Application {
// 画面ドラッグ用クリック座標
private double xOffset = 0;
private double yOffset = 0;
private double xSize = 0;
private double ySize = 0;
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) throws Exception {
WebView webView = new WebView();
Scene scene = new Scene(webView,320,240);
//ウィンドウ内マウス降下時の処理
webView.setOnMousePressed(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
// マウス降下時のx,y座標を取得
xOffset = e.getSceneX();
yOffset = e.getSceneY();
// Sceneのx,y座標を取得する
xSize = webView.getWidth();
ySize = webView.getHeight();
}
});
//ウィンドウ内マウスドラッグ時の処理
webView.setOnMouseDragged(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
// マウス降下座標がウィンドウ右下ならリサイズ
if (xOffset > xSize * 0.9 && yOffset > ySize * 0.9) {
stage.setWidth(event.getX());
stage.setHeight(event.getY());
} else if (xOffset < xSize * 0.1 && yOffset < ySize * 0.1) {
// マウス降下座標が左上ならウィンドウを移動
stage.setX(event.getScreenX() - xOffset);
stage.setY(event.getScreenY() - yOffset);
}
}
});
// 初期ページのURLを指定
webView.getEngine().load(initUrl());
// 常に前面に表示と表示処理
stage.initStyle(StageStyle.UNDECORATED);
stage.setAlwaysOnTop(true);
stage.setScene(scene);
stage.show();
}
// 再生動画URL周りの設定
private String initUrl(){
ArrayList<String> urlList = new ArrayList<String>();
urlList.add("https://www.youtube.com/embed/-JR2lHJKRXA?&list=PL-eBqXlBVLey_9ZWEkIF78n_SsG_ukOoE&autoplay=1");
urlList.add("https://www.youtube.com/embed/QFcHl11dX0M?&list=PLaDbCF2N-oO-1c6G6alo0F6dQMfNyyWG3&autoplay=1");
Collections.shuffle(urlList);
String url = urlList.get(0);
return url;
}
}
(1) JavaFXでWebブラウズ
まずはJavaからブラウジングできるようにします．
JavaFX2.0以降のバージョンではWebViewクラスを使って簡単にブラウジングできるらしいので利用します．
WebViewのインスタンスをsceneへ，sceneを表示用のstageに渡します．
(2) フレームレス，オーバレイ表示化
stage.initStyle(StageStyle.UNDECORATED);
stage.setAlwaysOnTop(true);
Stage.initStyle(StageStyle.UNDECORATED)でフレームレス化，
Stage.setAlwaysOnTop(true)でステージが常に前面に来るようにしておきます．
(3) YouTubeの動画再生，プレイリスト再生，自動再生
// URL周りの設定
private String initUrl(){
ArrayList<String> urlList = new ArrayList<String>();
urlList.add("https://www.youtube.com/embed/-JR2lHJKRXA?&list=PL-eBqXlBVLey_9ZWEkIF78n_SsG_ukOoE&autoplay=1");
urlList.add("https://www.youtube.com/embed/QFcHl11dX0M?&list=PLaDbCF2N-oO-1c6G6alo0F6dQMfNyyWG3&autoplay=1");
Collections.shuffle(urlList);
String url = urlList.get(0);
return url;
}
ブラウズするURLは弄り易いようにメソッド分けました．
毎回同じプレイリストが再生されるのもアレかなと思ったのでArrayListにURLぶち込んでCollection.shuffle()でとりあえず2種類のプレイリストがランダムに再生されるようにしました．
再生したいプレイリストがあればadd増やすなり減らすなりして調整できますね．
YouTubeURLにある"embed"は埋め込み動画扱いにする為に付けています．
これを外すと全画面再生ではなくなるので注意が必要です．
参考にさせて頂いたサイトがあるのでそちらをご覧ください．
(4) ブラウザの移動とリサイズ
//ウィンドウ内マウス降下時の処理
webView.setOnMousePressed(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
// マウス降下時のx,y座標を取得
xOffset = e.getSceneX();
yOffset = e.getSceneY();
// Sceneのx,y座標を取得する
xSize = webView.getWidth();
ySize = webView.getHeight();
}
});
//ウィンドウ内マウスドラッグ時の処理
webView.setOnMouseDragged(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
// マウス降下座標がウィンドウ右下ならリサイズ
if (xOffset > xSize * 0.9 && yOffset > ySize * 0.9) {
stage.setWidth(event.getX());
stage.setHeight(event.getY());
} else if (xOffset < xSize * 0.1 && yOffset < ySize * 0.1) {
// マウス降下座標が左上ならウィンドウを移動
stage.setX(event.getScreenX() - xOffset);
stage.setY(event.getScreenY() - yOffset);
}
}
});
Stage上に配置されているWebView上でのマウスイベントを検知してブラウザの移動とリサイズを行います．
フレームレスの条件下ではこの方法しか考えつきませんでした．
マウス降下座標がブラウザ上で比較的左上にあればウィンドウの移動，比較的右下であればリサイズを行えるようになっています．
詳しくは上述の動作gifをご覧ください．
配布
私のGitHubに上げておきました．
cloneして書き換えるなりartifactsに入ってるNyansomware.jarをそのまま起動するなり自由に使っていただいて構いません．
まとめ
オーバレイ+フレームレスなWebブラウザを表示してYouTube猫動画のプレイリストを自動再生するものを作りました．
初心者ですので意見，修正案等是非頂きたいです．
参考文献
Evercat | 面白法人カヤックのつくってみたラボ 様
http://create.kayac.com/web/evercat/
YouTube動画をブログ埋め込み時に使える便利なカスタマイズ方法！パラメーター14選まとめ| movieTIMES 様
http://www.movie-times.tv/how-to/2697/