草体にぼ日記

だらだらと

javaからブラウザを開く。そんなノリ

javaを使って自分の持っているHTMLファイルをブラウザで開きます。

3分Qiitaクッキング

Qiitaで記事書きました。向こうは要点だけまとめたって感じなので(多分)、こっちには全部書きます。

こういうことが出来るようになるはずです。 別にこれ、javaFXを使わなくたって良くて、関数作っちゃえば、例えば1を押したらツイッターを起動する。みたいな使い方もできると思います(捗りそう) だからタイトルは「javaからブラウザを作る」です。その場合第6章だけ見ればいいです。

f:id:niboshi_bisyoujo:20200118060509p:plain

f:id:niboshi_bisyoujo:20200118060532p:plain

作業に入る前に

Ubuntuを使ってるよ javaはバージョン8じゃなきゃ動かないよ。 javaFXを入れないと動かないよ

まずは、記事を書くに当たって必要なファイルを列挙しました。

f:id:niboshi_bisyoujo:20200118060335p:plain - javaファイル - メインクラスのあるもの - FXMLを動かすもの(FXMLコントローラーって言われがち(らしい?))

  • FXMLファイル FXMLは言語の一つ(かな?)で、画面上に押すことのできるボタンや、メニューバーを作成することができます。

基本的には、FXML形式で書いたボタンやメニューボタンを押したときの挙動はjavaで書いたコントローラーによって定めます。 FXMLではここにボタンを置く。みたいなのを決めるだけです。(多分) - htmlファイルの作成 今回のQiitaの記事でやる目的は FXMLで作ったボタンをクリックしたら、その作品の紹介ページを開くことであり、その紹介ページはhtml形式で作ります。 つまり、画面のボタンを押して、このhtmlファイルがブラウザ上で開けたら完成です。

以上が必要なもの。(多分)

 言わせて

HTMLファイルって、作ったら自分でファイル作ってダブルクリックしたら、クロームなりfirefoxなりで開いて見れるじゃん。でもそうじゃないんだよ。 ゲーム作って、「じゃあ、作品の紹介ページは同じディレクトリのReadme.htmlにあるから読んでね」ってことじゃなくて、ゲームの中にその作品紹介も含めちゃいたかったわけ(それがいいのかは知らないけど今回はそうしたいってことで)。

今回、学校の課題で僕が分からねえ!クソ!!ってなったからこの記事書くんだけど、 学校の課題用に僕(や、グループの人たち)で作った物をそのまま使うのはさすがにまじいだろ。ってことで 「スタート画面を描く(手書き)」「スタート画面にボタンを置く(FXML)」「javaファイル2つ作る」「架空のゲーム紹介ページ(HTML)」を作った。(ってか記事書きながらやってるから、正確に言うと作る。だけどね)

第一章ゲームのスタート画面作成

スタート画面を手書きで書きました。 こんな感じ f:id:niboshi_bisyoujo:20200118060633p:plain 可愛い!!WWW

第二章ゲームのスタート画面にボタンを置く

SceneBuilderという、FXML作成に非常に役に立つツールを使います。 (このツールの使い方知りたい人がいたら、外国人のかっこいいおっちゃんが紹介動画上げてるからテキトウに調べてみて)

SceneBuilderの画面です。 f:id:niboshi_bisyoujo:20200118060659p:plain

なんか大雑把にどんなことしてるかって言うと、 枠組みを用意して、そこに画像をペッっておきました(多分何も伝わらないと思う。もうこれは諦めよう) で、次に「作品の紹介ページに飛ぶためのボタン」を置きます。

そうはいっても、まだこの段階では「なんの機能もないただのボタンです」 言うなれば「なんの機能もないただのボタンです」

うん…。。。 はい、置きました。f:id:niboshi_bisyoujo:20200118060807p:plain

いや、本当は犬が「このゲームの紹介リンクはこれだよ〜!!」みたいな感じで吹き出しを用意してそこに収めようと思ったんだけど、サイズ感狂ってたわwww

てかこれ犬じゃなくて猫だわ。

で、次に、とりあえず,「ボタンを押したときに関数を呼び出す」ようにしておきます。 関数の定義自体はまだしないけど、とりあえず名前だけ決めておきます。 f:id:niboshi_bisyoujo:20200118060726p:plain このボタンを押したら紹介ページを開くようにしたいので「openIntroduction」とかでいいんですかね??? (僕はプログラミング歴が浅いのでその辺のことは知りません)

はい。おけです。 この、 onactionってところになんか書くと、そのボタンを押したときにその関数を使えるようになります。

よし!!FXMLとコントローラーができた!!!!

は????????????って思いましたか?? いやいや、できたんですよwww え??? あ〜ごめん。馬鹿には見えないFXML書いてたわ。 とりあえず名前をつけて保存「StartScene.fxml」で保存するよ。

んだら、(そしたら、) メニューバーからView,そして一番したのShowSampleなんちゃら〜ってやつ押しましょう。 開いたやつに対して右下のチェックボックス2つ押すと こんな感じなやつが出てきます。 f:id:niboshi_bisyoujo:20200118060919p:plain これは食べ物ですか?

-いいえ、食べ物ではありません。

これはなんですか?

-いいえ、ナンではありません。

これはBrain F*ckですか?

-いいえ、これはBrain Fu*kではありません。これは、コントローラーです。(.java)

やったね、FXML作ったら勝手にControllerも作ってもらえたよ。ありがたい あ、注意、これコントローラー作ってもらえたって言ったけど、ソースコードのサンプルがあるだけで、ファイルは自分で作らないといけないよ。(そこにっペって表示されてるやつ貼ればいいだけ!)(大体はね)

保存を押すと、ですくとっぷに StartScene.fxmlがあります。(そりゃそういう名前で保存したんだから当然。) f:id:niboshi_bisyoujo:20200118060955p:plain

(ちなみに僕は今ですくとっぷを作業ディレクトリにしています) なかみはこんな感じです。 f:id:niboshi_bisyoujo:20200118061018p:plain こういう文字ばっかでわけわからない座標指定をSceneBuilderはやってくれます。

以上でFXMLの作成は終わりです。 今後.fxmlは触りません(多分)(別に触ったら悪影響出るとかじゃないよ) コントローラーは後でやります。 (4章かな?)

第三章 そろそろメイン関数定義しないとな…

さっき作ったスタート画面を表示させる。というかゲームを開始させるための物を書きましょう。 (ちなみに、授業では迷路を作ったけど、今回貼るゲームがないのでスタート画面を表示させるだけです)

javaなんもわからんので、授業で僕とか他の人が作った物をほぼ写経してはい完成 写真どうぞ。 f:id:niboshi_bisyoujo:20200118061029p:plain

で、これでとりあえずは 起動したらスタート画面が表示されるようになったはずなので見てみましょうか

ほらね、スタート画面で…は?出ないんだけど f:id:niboshi_bisyoujo:20200118061046p:plain
何。 (あ、そういえばfxmlの中身で8.0.171ってなってるやつだけなんか知らんけど8.0.161-eaにしなきゃいけないから気をつけてね) もしかしてコントローラーないと変になるのかな? じゃあコントローラー作るね。

第四章 コントローラー作るかあ(ちょっとだけ)

第二章で言ってたあれあるじゃん。貼って。

ん〜〜WWWWW画像やっぱり表示されねええええ!!!!WWW で、結果的にこれみて。 f:id:niboshi_bisyoujo:20200118061118p:plain fx:controller="StartSceneController"っていうのを追加したら画像出るようになったよ。 ってことでつまり、コントローラーがないと画像でないってことだね。 f:id:niboshi_bisyoujo:20200118061203p:plain いえーい

ヨシ、後はボタン押してhtmlが開ければ終わりだ!!!

ん?HTML作ってねえじゃん

 第5章 HTMLを作ろう

さあ、ゲームは作っていないのに何を紹介するんだ。って感じですよね。 架空のゲームを想像しながら。 著作権とか僕何も知らないんで、 仮にこのゲームをスタートすると、第三次世界大戦が始まるとしましょう。(雲行きが…)

となると,AboutThisGameを押したときには、戦争のルールが表示されるべきですよね。 ってことでちょっくらHTML作ってきます(2020 01/18 05:35)

できた(2020 01/18 05:43)

こんな感じです。f:id:niboshi_bisyoujo:20200118061219p:plain

戦争のルール書いてないね。まあいいや AboutThisGameを押したときにこれが開かれればクリアです。

最終章 お腹すいた~コントローラーを仕上げる~

ハラ減ったね。

第4章で作ったコントローラーには、まだボタンを押したときの挙動(第5章で作ったHTMLを開く)がなかったのでそれを足します。

やることは、ブラウザを立ち上げ、起動時に引数としてHTMLのパスを渡すって感じです。 とりあえず、うー…

結果から言うと,ワークディレクトリにgoogleをおいておいた上でこうです。

try {

    //ブラウザを起動し、必要な URL を渡す

    String browserName = "google-chrome";

    String url = "Introduction.html";

    Runtime.getRuntime().exec(new String[ ] {browserName, url});
} catch (IOException ex) {

    ex.printStackTrace();

}

これを、openRuleの中身にします。 f:id:niboshi_bisyoujo:20200118061431p:plain こうなります。

で、そもそもグーグルどこにあんだよWWWWWWWWWWWWWWWWwってなるんだけど、大丈夫。(僕は大丈夫じゃなかったけどね)

なんか、このサイト見たら書いてあって https://kledgeb.blogspot.com/2013/04/ubuntu-11.html

とりあえず4候補のどっかにあるやろって思って探しました。 /usr/binの中にありました!!やった!!! f:id:niboshi_bisyoujo:20200118061623p:plain (アプリケーションを表示する、からgoogleを右クリックして詳細って言ってもパスの場所見れなかったから直接探した) これをコピーしてですくとっぷにポイ。 いまですくとっぷこうなってる f:id:niboshi_bisyoujo:20200118061639p:plain

で、どうやって動いてるかはコード見ると分かるんだけど(いや、分からないんだけど。) グーグルと、開くHTMLを引数にするだけでいいらしい!! Runtime.getRuntime().exec(引数2つ) ちなみに、これ、google-chromeとIntroduction.htmlは相対パスですよ。 名前入れりゃいいってわけじゃない。 (この辺は一般的な情報学部生である僕は分かります。)

これで完成だよ〜〜〜 あああああ できたアアアアアアアアアア♡♡♡♡

これ作者のツイッターだよ。