【OpenCV】3つの擬似濃淡変換（ディザリング）の解説【Python】

擬似濃淡変換（ディザリング）とは 様々な画像処理の中に、擬似濃淡変換（以下ディザリング）というものがあります。 このディザリングは2値を扱うという特徴があり、「0」と「255」の2つの値しか扱いません。こういった画像は、2値画像といいます。 基本的な2値画像は例えばこういったものです。 こうすることによって、データ量を少なくすることができますが、やはり「0」と「255」しかないということで、画像のなめらかさは失われています。 そこで、ディザリングを使って、基本的な2値画像では再現できない画像のなめらかさを、少し複雑なアルゴリズム（仕組み）によって再現してあげます。 今回は普通の2値画像の紹介も含めて、3つの有名なディザリングを紹介していきたいと思います。 そして今回しようする画像はオープンソースの画像で、先ほど2値化された状態で紹介しましたが、こちらになります。 ファイル名は「lena.jpg」にしました。 もはやお馴染みですね。 普通の2値画像 まずは2値化する際に、ソース画像をグレースケール化してカラーチャンネルを1つにします。 次に、閾値（しきいち）を定める必要がありますが、一般的には閾値を「128」にするので、「128」に設定します。これは、「0」と「255」の中間の値です。 そして、画素値がこの閾値未満なら「0」に、以上なら「255」に変換してあげます。 [crayon-5c3864e72db46233914038/] 結果 先ほども言いましたが、やはりなめらかさが欠けていますね。 ここからは、ディザリングを行なっていき、なめらかさを再現していきます。 ランダムディザリング ランダムディザリングでは、閾値（しきいち）を乱数で生成します。その他は同じ方法です。 [crayon-5c3864e72db52636115205/] 結果 先ほどの2値画像よりかなり見栄えが良くなりました。 ノイズの向こうに綺麗な画像がありそうな感じを受けます。 誤差拡散ディザリング 誤差拡散ディザリングでは、2値化した際に生じる誤差を次の画素値に反映させます。 [crayon-5c3864e72db57478724706/] 結果 ランダムディザリングよりさらになめらかになり、より画像の詳細な情報を知ることができるようになりました。 組織的ディザリング

【保守性とは】Javaで「private」を使うメリット

保守性のあるプログラム [crayon-5c35c1e8e1a3b834980109/] 結果 [crayon-5c35c1e8e1a43124350462/] このプログラムでは、「Test」クラスの変数「_x、_y」（初期値0）に値を設定することで、割り算結果を得ることができます。 「Main」クラスでは、その「Test」クラスをインスタンス化した後、「_x、_y」の値を設定し、割り算結果を得ています。 保守性のないプログラム 次は、保守性ないプログラムを記述していきます。 つまり、先ほどの「_x、_y」を「public」にして、「set」関数も無くします。 [crayon-5c35c1e8e1a46940526850/] 一見先ほどのプログラムより行数も減って、よくなったと思うかもしれませんが、これが落とし穴になります。 その2つの例を順に見ていきましょう。 変数名を変更した時の落とし穴 ではここで、「Test」クラスの「x、y」変数の名前を変えてみます。 「x、y」ではなく、「div1、div2」にしてみたいと思います。 [crayon-5c35c1e8e1a49281905410/] この状態でコンパイルすると、以下のようなエラーが発生しました。 [crayon-5c35c1e8e1a4b010006859/] 内容を確認すると、「Main」クラス内で存在しない変数を扱っていると言います。 具体的には、「x、y」の名前のまま使ってしまっているということです。 なので「Main」クラス内のプログラムも変更する必要があります。 [crayon-5c35c1e8e1a4e098556084/] これでエラーはなくなりましたが、余計な作業を生み出してしまいました。 これがもし保守性のあるプログラムで書かれていたら、「Main」クラス内で変数名を修正することはありませんでした。 今回の例では修正する箇所が少なくて済みましたが、もし大きい規模のプログラムで同じことをやってしまったらどうなるでしょうか。 これが1つ目の落とし穴です。 割り算での落とし穴 次に、割り算をする際に「0」で割ってみたいと思います。 具体的には、「div2」の値を「0」にします。 [crayon

【OpenCV】ヒストグラムを作って画像の特徴を知る方法【Python】

ヒストグラムとは ヒストグラムは、画像内の画素値の度数分布を表したもので、画像の大まかな特徴や偏りを調べるためのものです。 例えばこの画像 出典： このように雲や空などが大部分を占める明るい画像だと、ヒストグラムはこのようになります。 左から右に、0〜255となっていくのですが、このヒストグラムを見ると255に近い画素値がかなり多いことがわかります。 逆に暗い画像だと、左（0に近い方向）に山が集中します。 こういった風に画像の特徴を知ることができる、それがヒストグラムです。 OpenCVでヒストグラムを作る プログラム（Python） 使用する画像 [crayon-5c34705d1843b455634456/] 結果 解説 ヒストグラムを作成する際は、画像として作成するので、まず最初に画像配列を作成します。 画像配列は「numpy.ndarray」型となるので、「numpy」の「zeros」関数で、初期値「0」の画像配列を作成します。 次に、「calcHist」関数を使って度数分布を求めていきます。 第1引数： ソース画像配列。「[]」で括ることによって、画像配列データとして認識させる。 具体的には、「numpy.ndarray」型から「list」型へ変換する。 第2引数： チャンネルの種類。[0]なら青、[1]なら緑、[2]なら赤を調べる。 ソース画像がグレースケールなら[0]を指定する。 第3引数： マスク画像。マスク画像を指定しない場合は、「None」を指定する。 第4引数： ビン（階級）の数。今回は全画素値を調べるので、[256]を指定。 第5引数： 計測する画素値の範囲。今回は全画素値を調べるので、[0, 256]を指定。 「calcHist」関数で返ってくる値は「numpy.ndarray」型で、256個の配列の中に各画素値の度数が代入されています。 ヒストグラムが取得できたら、描画に移ります。 今回は「line」関数で縦線を256本描画して、棒グラフを作成していきます。 「line」関数の引数には、描画対象となる画像と、始点・終点、そして線の色が入ります。 青・緑・赤チャンネルのヒストグラムを作成

Javaのクラスとインスタンスが絶対にわかる3つのポイント

クラスとは Javaで作られるアプリケーションは、クラスという部品が集まってできています。 例えば、「Button」クラスや「Label」クラスなどがわかりやすいと思います。 ボタンに関する処理は「Button」クラスで、ラベルに関する処理は「Label」クラスで行う、といった風に、それぞれに役割がある場合にクラス単位で処理を分けます。 クラスのインスタンス クラスを定義した段階では、クラスを実体化していません。 このように、クラスを宣言した段階では「あるだけ」の状態です。 ここから「車」を作るためには「実体化」する必要があります。 その「実体化」がインスタンス化ということです。 メモリには当然限りがあります。 なので、メモリ領域を使う情報の中で、無駄なものがあると困ります。 そこで、必要なものだけを実体化します。 そうすることによってメモリの節約ができるのです。 また、この考え方はプログラミングにおいてとても重要なので、なるべくメモリの無駄遣いをしないようなプログラミングを心がけるのが良いです。 スタティックなもの スタティックな変数や関数は、「汎用的なもの」に対して宣言されることが多いです。 例えば「KeyEvent」というクラス。 このクラスには様々なスタティック変数が定義されています。 「VK_RIGHT」や「VK_LEFT」、「VK_UP」に「VK_DOWN」などなど。 これらはキーコードの値を示しています。 こういった汎用的なものは、わざわざインスタンス化する必要がないため、スタティックとして定義されています。 まとめ ・インスタンス化は、「汎用的」な意味をもつ「車」や「人」などを実体化させる行為。 ・インスタンス変数・関数には、「車の名称」や「人の名前」などの、具体的な情報が割り当てられる。また、こういった変数・関数は、動的なものと呼ばれる。

【入門シリーズ】JavaゲームプログラミングPart17

前回 http://itech-program.com/?p=896   今回からいよいよゲーム制作に入っていきます。 ゲームはシューティングゲームを作っていきます。...

【OpenCV】ルックアップテーブルを用いた階調変換【Python】

[mathjax] ルックアップテーブルとは 例えば、ネガポジ転換と呼ばれる手法では、 \(f(x) = 255 - x\) この式をルックアップテーブルにセットし、ソース画像のすべて...

【入門シリーズ】JavaゲームプログラミングPart16

前回 http://itech-program.com/?p=874   CSSで装飾 JavaFXでは、コントロールをCSSで装飾することが可能です。 今回は、プログ...

【入門シリーズ】JavaゲームプログラミングPart15

前回 http://itech-program.com/?p=678 前回までで、図形や画像を描画してきましたが、今回はJavaFXの「コントロール」という機能を使って、「ボタン」や「ラベ...

【Java】コマンドプロンプト・ターミナルがフィールドの、STGを作ろうPart1

作るものの紹介   作る前に、まずどんなものを作っていくのかを把握しておく必要があるので、以下の動画をご覧ください。   [video width='1920'...

JavaFXかんたん風船アクションを作ろうPart5【最終回】

〜ゲームの仕上げ〜

JavaFXでかんたん風船アクションを作ろうPart4

〜画面遷移〜

JavaFXでかんたん風船アクションを作ろうPart3

〜障害物に関する処理〜

JavFXでかんたん風船アクションを作ろうPart2

〜プレイヤー（風船）の操作〜

JavaFXでかんたん風船アクションを作ろうPart1

〜プログラムの骨格〜

【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart3【最終回】

前回Part タイトル画面の作成 前回までで、ゲームの基本が完成しました。 ここからはゲームの仕上げに入っていきます。 そこでまず必要なのが「タイトル画面」です。 プログラムを実行した時に、まず初めにタイトル画面が出てきて、そこで「はじめる」を選択するとゲームが開始する。 ゲームオーバーしたらスコアの結果が表示されて、何かキーを押すとタイトル画面に戻る。 今回はタイトル画面はもちろん、こういった画面遷移処理のやり方も一緒に紹介していきます。 まずはタイトル画面のイメージ（構想）です。 もちろんまだ足りない部分はありますが、おおまかにはこれを目指していきます。 タイトル画面を表示する [crayon-5c2891956d967220303511/] まず、「enum」というキーワードが新たに出てきました。 この「enum」というのは、列挙型を定義する際にしようします。 今回のように「Title」「Game」「Result」と、3つの画面の種類を「列挙」しています。 絶対に「enum」を使わないといけない理由はないのですが、「enum」にした方が見やすいというのは言えると思います。 それから文章の記述量も少ないので楽です。 [crayon-5c2891956d975503371822/] 確かに個人差はあると思いますが、私は「enum」の方が見やすいです。 それから「初心者」の方はこれを機に「enum」を学べると思いますので、「enum」の使用をおすすめします。 では、「enum」の使い方ですが、「enum」で列挙型を定義したら「列挙型の変数」を作成します。 [crayon-5c2891956d978693837293/] 列挙「型」ですので、列挙型の変数が作れます。 そしてこの変数の使い方ですが、若干間違えやすいポイントがありますので、しっかり確認していきます。 [crayon-5c2891956d97a317773734/] switch文の中のcase文で「Screen.」と書いてしまいがちですが、case文では「Screen.」は必要ないので注意しましょう。 「enum」の解説はこれで以上です。 その上でプログラムを見てみましょう。

【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart2

前回のPart 障害物の処理 前回まででプレイヤーの基本操作が完了しました。 今回は障害物の処理を書いていきます。 Obstacleクラスを作る 「Obstacle.java」というファイルを作り、そこに「Obstacle」クラスを定義していきます。 ちなみに「Obstacle」は「障害物」の意味で、今回作る障害物は矩形です。 では「Obstacle」の持つ基本情報をまとめてみます。 では、実際に実装をしていきます。 [crayon-5c289199391b2578437184/] Obstacleクラスの関数を定義する 次は、障害物を生成し、描画するところまで実装していきます。 障害物の生成に関しては、今回は簡略化し、まず先に「Obstacle」クラスが機能するかを確かめていきます。 [crayon-5c289199391bc495347550/] [crayon-5c289199391bf516775319/] 結果： 赤い矩形が描画されていたら成功です。 障害物にランダムな値を設定する これで「Obstacle」関数が機能したわけなので、障害物にランダムな値を設定していきます。 さらに、障害物の生成にも工夫を加えていきたいと思います。 まずランダムな値ですが、障害物がどこから出てくるのか（Y座標）、障害物の形はどうなのか（幅・高さ）、障害物の色は何色か、障害物の速度（X方向の速度）はいくらか。 これらに関してはランダムな値を設定することにします。 ゲーム性が増しますからね！ [crayon-5c289199391c4926673412/] Y座標や幅・高さなどの式が少し複雑に見えるかもしれませんが、以下の画像を参考に好みで調整してみてください。 色を決定するには、「赤・緑・青」の成分の値をそれぞれ設定する必要があります。 ちなみに、色の合成は光の3原色ですのでご注意を。 そして「move」関数内での更新処理ですが、「x -= vx」となっています。

【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart1

今回は、シリーズ「JavaFXでかんたん風船アクションゲームを作る」の第1回目です。 このシリーズでどういったゲームを目指しているかは、こちらの動画を是非ご覧になってください！！ 1000点は意外と厳しい感じです。 私が下手なだけかもしれませんが・・・。 プログラムの骨格を作る ウィンドウを表示する [crayon-5c2891998d8f2877026148/] 結果： ダーク・タコイズ色のウィンドウが出てきました。 ダーク・タコイズにした理由は、空の色に似ているからというだけなので、色はご自身の好みでどうぞ。 さてウィンドウの作成ですが、「JavaFX」では「Stage」クラスというのを用います。 この「Stage」がウィンドウのことで、その上に「Scene」を乗せます。 「Scene」にはボタンやラベル、その他様々なノードを乗せることができ、 以下で説明する「Canvas」ももちろん乗せることができます。 「Stage」にその「Scene」を乗せるには「setScene」関数を用います。 この関数の引数は「Scene」型なので、作成した「Scene」を代入しましょう。 最後にウィンドウの表示ですが、これは「show」関数を呼び出すだけです。 行数があまりかからないのでいいですね。 Canvasをセットする 次は「Canvas」をセットします。 この「Canvas」に風船（プレイヤー）や障害物などを描画していきます。 [crayon-5c2891998d8fd057585594/] 結果に変化はありませんが、これで「Canvas」をセットできました。 「Canvas」をインスタンス化するところですが、引数は「Canvas」の幅・高さです。 今回はウィンドウ目一杯を「Canvas」にしたいのでウィンドウサイズと同じにします。 そして「GraphicsContext」を取得するところですが、この「GraphicsContext」というのは「Canvas」に様々なものを描画する際に役立ちます。というより、これを使わなければ描画はできません。 そしたら最後に、その「GraphicsContext」を使ってなにかを描画してみましょう。 円と矩形を描画する

【シリーズ】JavaFXで電卓を作ろう！！Part2【最終回】

前のPart 数字を電卓に表示させる 全てのボタンをリンクさせる 前回ボタンをリンクさせる方法を紹介しました。 なので今回、全てのボタンをリンクさせていきます。 [crayon-5c289199e78a7580038441/] このように全ての変数を宣言しました。 あとは「main.fxml」に、変数と「onClick」関数をリンクをさせていきます。 ここからはなかなかしんどい作業ですが、時間がない人はこちらをどうぞ。 （リンク作業が完了しているファイル） ボタンによる操作を記述する ここからは「onClick」関数を編集し、ボタンを押した時に数字が表示されるようにしていきます。 「1」ボタンが押されたら「1」を表示する。 そのあとに「3」ボタンが押されたら、「13」と表示する。 こういったプログラムを組んでいきます。 そのためには、何のボタンが押されたのかを知る必要があります。 そこで「onClick」関数の引数に注目です。 「onClick」関数の引数は「ActionEvent」型です。 そう、つまりこの「ActionEvent」クラスの関数を使えばどのボタンが押されたのかを知ることができるんです。 [crayon-5c289199e78b1736698587/] 「getSource」関数です。この関数を使えばどのボタンが押されたのかを知ることができます。 「getSource」関数でボタンの情報を取得し、「equals」関数で判別を行います。 このプログラムを実行したときに、 [crayon-5c289199e78b3373338232/] このように表示されれば成功です。 これを利用して数字を「TextField」に表示するプログラムを書いていきます。 [crayon-5c289199e78b4219896819/] 「TextField」に表示する文字列を保存するための変数「str」の語尾に数字を入れていきます。 こうすることでボタンによる数字の入力を実現することができます。 あとはこれを「0〜9」まで書いていきましょう。 [crayon-5c289199e78b6004089304/] 電卓で計算をする

【シリーズ】JavaFXで電卓を作ろう！！Part1

今回からシリーズ「JavaFXで電卓を作ろう！！」をやっていきます。 JavaFXによる電卓の作り方を知れば、JavaFX自体もよく知ることができます。 JavaFX Scene Builder 2.0を導入しよう！ JavaFXでレイアウトを作る上において、JavaFX Scene Builder 2.0は絶対に必要です。 以下のURLからダウンロードしてください。 バージョンは2.0なので、間違えないようにしてください！ 上の画像をよくみて、間違えないようにしてください。 ダウンロードできたら、インストールしてください。 インストールが完了したらJavaFX Scene Builder 2.0を開きましょう！ レイアウトの作成 これが完成図です。 これを目指して作っていきます。 AnchorPaneを用意する まず「AnchorPane」を用意します。 これは、電卓のボタンやテキストフィールド（答えを表示する場所）を貼り付けるための土台です。 このように、「AnchorPane」をドラッグして貼り付けてください。 土台ができたらボタンの貼り付けに移ります。 ボタンを貼り付ける ボタンは「Controls」にあります。 このボタンも、先ほどと同様にドラッグして貼り付けます。 そしたら、「Button」という文字が表示されている状態なので、「1」や「2」などの数字に変えていきましょう。 それから、ボタンのサイズも変更していきましょう。 ボタンの文字を変更するには、ボタンをダブルクリックして、直に書き込むやりかたと、「Properties」の「Text」欄を変更するやりかたの二つがあります。 まずはダブルクリックのやり方です。 ダブルクリックすると、文字が編集可能になります。 次に、「Properties」からの変更です。 矢印で指した場所から変更が可能です。 ちなみに、「Properties」からフォントや文字の大きさも変えられるので覚えておきましょう。 ボタンのサイズを変更する ボタンのサイズ変更は直感的に出来ます。

JavaFXでWebブラウザを作る！！【解説】

JavaFXで「Webブラウザ」を作っていきます！ 「Webブラウザ」でも、JavaFXなら特別な知識はいらず、簡単に作れてしまいます。 まずは完成品を紹介します。 「戻る」「進む」ボタンに、「URL指定欄」、「リロード」ボタン、そしてページを表示する領域があります。 これから、この完成品を目指してプログラムを書いていきます。 WebViewを表示する JavaFXでは、「WebView」というクラスが用意されているので、まずは「Stage」にこれを貼り付けていきます。 [crayon-5c289197a669c754814945/] これで「WebView」を貼り付けることができましたが、実行してみると真っ白な画面が出てくるだけです。 これは、どのページを表示するかが指定されていないのが原因なので、ページのURLを指定してあげる必要があります。 そういった処理をするには、「WebEngine」というクラスを用います。 WebEngineでページを指定する [crayon-5c289197a66a5775467888/] 「WebEngine」のインスタンスを取得するには、先ほど作成した「WebView」のインスタンスから、「getEngine」という関数を使って取得し、ページの読み込みは「WebEngine」クラスの「load」関数を使い、引数にURLを指定します。 さぁそして、実行した結果はどうでしょうか。Googleの検索ページが表示されて、既にらしくなってきましたよね。 URLをブラウザから指定する 「WebEngine」クラスの「load」関数にURLを指定するだけでWebページが表示されました。 ということは、テキスト領域を用意して、入力された値を「load」関数の引数にすれば、ブラウザからURLを指定することが可能になりそうです。 というわけで、「TextField」クラスを使って実現してみます。 [crayon-5c289197a66a8844931298/] まずは上のバーを設置し、テキスト領域を貼り付けます。 そして「WebView」の位置も少し下げました。 これでテキスト領域を設置は完了しました。

【JavaFX】画像処理で覚えておきたいこと2選

1.普通の画像表示 画像を表示するには、「Image」クラスで画像を読み込み、「ImageView」クラスで表示をします。 今回使用する画像はこちらです。 フリー画像出典ですので、ご自由にお使いください！ [crayon-5c2891967f031703941818/] 実行結果： しっかり画像が表示されていたら成功です。 2.切り取った画像を表示 画像を表示する際は「Image」クラスを使って表示しなくてはいけません。 しかし、「Image」クラスでは画像の切り取り作業はできないので、今回は「BufferedImage」クラスの機能を使って、画像を切り取っていきます。 そして出来上がった「BufferedImage」は、「SwingFXUtils」クラスの「toFXImage」関数を使って「Image」クラスに変換します。 [crayon-5c2891967f03c033571480/] 結果： 切り取られた画像が表示されていれば成功です。

【入門シリーズ】JavaゲームプログラミングPart16〜イベントの追加〜

前回 前回「コントロール」というものを追加し、「ボタン」や「ラベル」、「テキスト領域」を表示させました。 しかしこれらにはまだ「機能」が備わっていません。 前回作った「ボタン」を押した時に、なにか起こりましたか？ 起こりませんでしたよね。 なので今回は、「コントロール」をいじったら何か起こるように「イベント」というものを追加していきたいと思います。 ボタンにイベントを追加する では、「ボタン」を押したらコンソールに「押されました！」と表示させてみます。 [crayon-5c29e33e631d8481129391/] イベントを追加するには、「setOnMouseClicked」関数を用います。 もちろん「マウスイベント」に限らず、「キーイベント」や「マウスドラッグイベント」などもあり、それぞれ「setOnKeyPressed」関数や、「setOnMouseDragged」関数などがあります。 そして引数になにやら見慣れない記述がありますね。 これは「ラムダ式」というものなのですが、今はこれを知る必要はありません。 ラベルにイベントを追加する 対象が「ラベル」になってもやることは変わりませんが、今度は押されたら「ラベル」の文字列を変更してみたいと思います。 [crayon-5c29e33e631e5416846885/] 押すと「Hello！！」が「Clicked！！」に変わりました。 こういった使い方もできるので、イベントの追加だけでかなり幅が広がったはずです。 次に「テキスト領域」と「ボタン」を使った、イベントの応用を紹介します。 応用 イベントを追加する対象はボタンです。 [crayon-5c29e33e631eb276015474/] 結果： ボタンを押すと、テキスト領域に書かれた文字をすべて「大文字」に変換してくれます。 他にも色々なことができるので、イベント処理を自分なりにカスタマイズしてみると面白いと思います！ 次回→12月30日

【入門シリーズ】JavaゲームプログラミングPart15〜コントロールの追加〜

前回 前回までで、図形や画像を描画してきましたが、今回はJavaFXの「コントロール」という機能を使って、「ボタン」や「ラベル」を追加していきます。 ボタンの追加 まずはボタンを追加してみたいと思います。 [crayon-5c273ffc8323a932162293/] 「ボタン」は「Button」クラスというその名の通りのクラスがあるので、これを使います。 そして、X・Y座様は「setLayoutX・Y」関数を使って設定することができます。 ラベル（文字列）の追加 JavaFXでは「ラベル」を用いて文字列を表示することが出来ます。 X・Y座標の設定は「ボタン」と同様で、「setLayout」関数を使います。 [crayon-5c273ffc83247557191804/] 実行すると、小さく「Hello！！」と表示されます。 これだとかなり見辛いので、フォント・フォントサイズ・色を指定します。 フォントの設定等は「Font」クラスを使って行います。 [crayon-5c273ffc8324b231739345/] 「Font」クラスのコンストラクタには「フォント名」と「フォントサイズ」が入ります。 ちなみに「フォントサイズ」は「double」型という型なので、小数を入れることもできます。 そして色は「Label」クラスの「setTextFill」関数で設定することができます。 今回は「Arial Black」というフォントを使用しましたが、お好きなフォントがあればそれを使っても構いません。 フォントの種類がよくわからない方は、以下の表をみて、どんなフォントがあるのか確認してみてください。 もちろんこれだけではないのですが、書ききれないので5つだけ紹介しました。 テキスト領域 今度は「TextArea」というクラスを使って、「テキスト領域」を作っていきます。 プログラムの流れは今までと同じです。 [crayon-5c273ffc8324f681303013/]

【入門シリーズ】JavaゲームプログラミングPart14〜画像を描画〜

前回 前回図形を描画しましたが、今回は「画像」を描画していきます。 そしてそのために使う画像は「lena.jpg」です。 画像を描画する 画像を読み込むには、「Image」クラスをインスタンス化します。 「Image」クラスのコンストラクタの引数には、「ファイル名（正確にはファイルの相対パス）」が入ります。 そして描画は、図形描画でも使った「GraphicsContext」クラスの、「drawImage」関数を使います。 引数には「Image」型のオブジェクトと、X・Y座標です。 ちなみにX・Y座標は画像の左上座標です。 [crayon-5c249cdf5e461933840505/] 結果： たったこれだけなので、非常に簡単です。 切り取り画像の表示 次は、画像の1部分だけを描画してみたいと思います。 画像を切り取るには、「BufferedImage」クラスの「getSubimage」関数を使います。 少しややこしいプログラムになるので、まずはプログラムからさっと紹介します。 [crayon-5c249cdf5e469017194250/] まず、BufferedImageに読み込んだ画像の情報が入ります。 入れ方は、「ImageIO」クラスの「read」関数を使い、引数に「File」型を入れます。 今回は「File」クラスのコンストラクタの引数に「lena.jpg」と書きました。 次に、「BufferedImage」クラスの「getSubimage」関数で切り取り画像を生成し、「buffer」に代入します。 「getSubimage」の引数には「X・Y座標」と「幅・高さ」が入ります。 次に、「BufferedImage」を「Image」型に変換します。 ちなみになぜか変換が必要かというと、「drawImage」関数の1つめの引数が「Image」型だからです。 もし「BufferedImage」型の「buffer」を入れてしまうと、「型違い」が起きてエラーになってしまい、描画ができません。

【入門シリーズ】JavaゲームプログラミングPart13〜図形の描画〜

前回 JavaFXには様々な機能があります。 その中でも今回は、図形の描画を行なっていきたいと思います。 準備（Canvasの追加） まずは「Canvas」というものを「Scene」に追加します。 図形の描画は「Scene」にするのではなく、この「Canvas」で行います。 [crayon-5c249cdee0d16865360734/] これで「Canvas」を追加することができました。 これに、「GraphicsContext」を使って色々な図形を描画していきます。 色々な図形を描画 矩形 矩形は、四角形のことです。 矩形を描画するには、「GraphicsContext」クラスの「fillRect」という関数を使います。 [crayon-5c249cdee0d20621344505/] 結果： 三角形 三角形を描画する関数はないので、「fillPolygon」という多角形を描画する関数を使います。 「fillPolygon」関数の1個目の引数は「X座標の配列」、2個目は「Y座標の配列」、3個目に「頂点の数」を入れます。 [crayon-5c249cdee0d23947493046/] 結果： 正三角形 あまり重要ではないのですが、一応「正三角形」を作るための座標設定を紹介します。 [crayon-5c249cdee0d26499295493/] 結果： 円 円を描画するには、「fillArc」関数を用います。 「fillArc」関数の引数は、「X・Y座標」と「幅・高さ」と「開始角度・終止角度」と「円の種類」が入ります。 [crayon-5c249cdee0d2e828565164/] 結果： 開始角度は「0」で、終止角度は「360」にしました。 普通に円が描きたい場合は これでOKです。 では、試しに開始角度を「0」、終止角度を「270」にしてみます。 結果： このように、「1/4」が欠けました。 このことから、開始角度と終止角度の関係はこうなっていると言えます。 円（簡単なやり方）

【入門シリーズ】JavaゲームプログラミングPart12〜JavaFXを始める〜

前回 Part12から「JavaFX」というものを使っていきます。 今まではコマンド上で操作ができる「CUI（Character User Interface）」を使っていきましたが、「JavaFX」では「GUI（Graphic User Interface）」を使うことができます。 つまり、自分でウィンドウを作ったり、画像を表示したりできるということです。 そうすればゲームの幅は一気に広がります！ というわけで、実際に「JavaFX」のプログラムを書いていきます。 ちなみに、Java11より前バージョンの方は、新しくダウンロードするものは一切ありません。 ただ、Java11をお使いの方は「JFX」が必要になるのでダウンロードする必要があります。 詳しくはこちらの記事をご覧ください。 ウィンドウを表示するプログラム（基本プログラム） まずは意味などを考えず、ウィンドウを表示するプログラムを書いて「GUI」を実感してみましょう。 [crayon-5c234b48f0f75960856193/] 少し長いですが、1字1句間違えないように入力てください。 そしたらコンパイルして実行します。 Java11より前のバージョンの方は以前と同じやり方ですが、 Java11をお使いの方は「オプション」を指定しないといけないので、詳しいことは先ほどの記事をご覧ください。 そうするとこのように白いウィンドウが現れます。 ウィンドウの位置・大きさ・色を変える 位置を設定 まずはウィンドウの位置を変えてみます。 [crayon-5c234b48f0f7e364726850/] 位置は「setX」関数と「setY」 関数で、それぞれX座標・Y座標を設定することができます。 大きさを設定 大きさは、「Scene」というものの大きさを設定して、それを「Stage」に反映させるやり方をとります。 [crayon-5c234b48f0f81286964144/] 少しプログラムが煩雑になってきました。 これを実行すると「幅：640、高さ：480」のウィンドウが表示されます。 色を設定

【シリーズ】JavaFXでかんたん「Webブラウザを作る」【全回リンク集】

全部で3回 「第1回目」 「第2回目」 「第3回目」

JavaFXでかんたん「Webブラウザ」を作るPart3

前回 CSSで装飾する JavaFXはCSSで装飾をすることが出来ます。 まずはCSSファイルを作ってしまいます。 今回は「form.css」としました。 [crayon-5c21f9c20f6f2570208365/] このように記述しました。 本来のCSSと少し記述内容が異なるのが特徴です。 JavaFXで用いるCSSでは、属性に「-fx」 を記述します。 それではこの「button」を、実際の「Button」に反映させていきます。 [crayon-5c21f9c20f6fa776290476/] 詳細はこの記事をご覧ください。 ではこの調子で装飾を増やしていきます。 [crayon-5c21f9c20f6fe012939135/] あらたに「pane」を作成しました。 上のバーが真っ白ではなんとなくダサいですからね。 もちろん私の勝手ですけど。。 で、「pane」を作ったので、プログラムの「AnchorPane」にもしっかりCSSの内容を反映させましょう。 [crayon-5c21f9c20f701576809761/] 次に、リロードボタンの「再」の字をなんとかしましょう。 「再 」ではどうしても見栄えが良くないので、画像に置き換えます。 今回使う画像は「icon.png」です。 [crayon-5c21f9c20f703789605358/] 新たに「buttonReload」を 作成しました。 「-fx-background-image」の後に、「url」関数を呼び出して、「icon.png」を読み込みます。 この時、「icon.png」はCSSファイルが置いてあるフォルダからの相対パスであることに注意してください。 そしたら、プログラムも変えていきます。 [crayon-5c21f9c20f705335064664/] これで画像に置き換えることができました。

【入門シリーズ】JavaゲームプログラミングPart11〜配列〜

前回 前回までのプログラムは、みやすくすると言いながらも、結果的に文章量が多くなってしまい、逆に見づらくなりました。 原因は2つあります。 1つはコンストラクタの使い方。 そして2つ目は、配列を使っていないことです。 まずは1つ目の方から解決していきます。 コンストラクタで初期化をする 前回まではこのように書いていました。 [crayon-5c21f9c503168418069886/] インスタンスの代入は仕方ないにしても、変数に値を入れる作業は全部で6行と、かなり無駄な気がします。 かといって変数に値を入れないのは解決策にはなりません。 そこで、コンストラクタの使い方に注目です。 前回はコンストラクタを宣言しませんでしたが、今回は宣言します。 そしてある文章を書き加えます。 [crayon-5c21f9c503172384947441/] 新たに書き足された「Goods()」は、コンストラクタです。 今まで関数を宣言する際は「型名」を記述しました。 「void」がそれに当たります。 しかしコンストラクタは「void」を記述していません。 これがコンストラクタの宣言の仕方なので覚えときましょう。 そしてコンストラクタに引数が2つあります。 「name」と「price」です。 この名前は任意なのですが、変数はわかりやすい名前が良いので「name」と「price」にしました。 さてコンストラクタの中身を見てください。 「this」というキーワードが登場しました。 この「this」は文字通り自分を指します。 この場合の自分とは、「Goods」クラスのことで、「this」は「Goods」クラスのインスタンスなんです。 そしてこの場合の使用用途は、引数の「name」「price」と、Goodsクラス内で宣言された「name」「price」の区別です。 これがなかったらどっちがどっちかわかりませんよね。 その上でもう一度コンストラクタの中身を見てみます。

JavaFXでかんたん「Webブラウザ」を作るPart2

前回 前回の問題点 前回戻るボタンを作成し、動きまで付け加えましたが問題点が見つかりました。 その問題点は、「正しく戻れていない」ということです。 では仮に、以下のようにサイトを巡ったとします。 google.com → oracle.com → youtube.com ・・・1 そして戻るボタンを押すとどうなるかといいますと、 google.com → oracle.com → youtube.com → oracle.com ・・・2 こうなります。 実はこのならび、「getEntries」関数で得られるリストの中身なんです。 今まではこれを利用して「最後から2番目」のページに戻るようにしてましたが、「2」になった後に戻るボタンを押して「最後から2番目」のページに戻るとどうなるでしょうか。 実はまた「youtube.com」に戻ってしまいます。 これではいつまでたっても「google.com」に戻れません。 では何が原因でしょうか。 それは、戻るボタンを押した時に「oracle.com」がリストにまた追加されていることです。 ですので、戻るボタンを押した時はリストに追加されないようにする必要があります。 しかし、「getEntries」関数でアクセスできる「ObservableList」型のリストを操作するのは少し面倒になります。 そこで、「ArrayList」を用いてURLのリストを作成し、その上で、戻るボタンを押した時だけリストに追加されないようにします。 ArrayListでURLを管理する [crayon-5c21f9c547994653736660/] 「WebEngine」の読み込みの進捗を知るには、「getLoadWorker」関数で「Worker」型のオブジェクトを取得し、「stateProperty」関数で現在の状態を表す「ReadOnlyObjectProperty」を取得し、イベントリスナーを追加します。 重要なのが、このイベントリスナーを追加できるということで、これはJavaFXの特徴なので知っておくと便利です。 &nbsp

【入門シリーズ】JavaゲームプログラミングPart10〜クラス〜

前回 前回、道具の値段と名前の変数を作り、switch文を用いたわかりやすいプログラムを書きました。 今回は「クラス」というものを使って、よりわかりやすいプログラムを作っていきます。 道具クラスを作る まず、買う道具には「名前」と「値段」の情報がありました。 これらを1つのクラスとしてまとめます。 クラスの意味はひとまず置いておき、プログラムを示します。 [crayon-5c20a829bb332074004778/] このようなプログラムをファイルの先頭に記述しました。 まず、クラスを作る際は「class」キーワードを使用します。 そして、「class」の後にクラスの名前を記述します。 今回は道具のクラスを作るので、「Goods」という名前にしました。 そしてクラスの中身に道具の「名前」と「値段」の情報を入れるための「変数」を宣言しました。 それでは実際にこの「Goods」クラスを使ってみましょう。 クラスのインスタンス化する まずは「Goods」型の変数を宣言します。 この意味は後で説明します。 [crayon-5c20a829bb33f855598035/] 変数名がかぶるので、3つの変数をコメントアウトしました。 コメントアウトすることで、コメントとして認識されるので、プログラムに影響を及ぼさなくなります。 さて、今まで変数宣言をする際は、「int」と「String」しか使ってきませんでした。 しかし見てください。「Goods」がそのまま使用されています。 実は変数を宣言する際は、「変数の型」というものを明記します。 なので「int」で宣言された変数は「int型」、「String」で宣言された変数は「String型」と言います。 なので、この場合も同様に「Goods型」と言います。 ある変数の型で宣言された変数には、特定の値を代入することしかできません。 例えば「int型」なら「0」や「100」、「-2000」といった整数。 「String型」なら「"Hello"」や「"こんにちは"」といった文字列。

JavaFXでかんたん「Webブラウザ」を作るPart1

今回から、JavaFXで「Webブラウザ」を作っていきます！ 「Webブラウザ」でも、JavaFXなら特別な知識はいらず、簡単に作れてしまいます。 まずは完成品を紹介します。 「戻る」「進む」ボタンに、「URL指定欄」、「リロード」ボタン、そしてページを表示する領域があります。 これから、この完成品を目指してプログラムを書いていきます。 WebViewを表示する JavaFXでは、「WebView」というクラスが用意されているので、まずは「Stage」にこれを貼り付けていきます。 [crayon-5c20a82a1f40f313084954/] これで「WebView」を貼り付けることができましたが、実行してみると真っ白な画面が出てくるだけです。 これは、どのページを表示するかが指定されていないのが原因なので、ページのURLを指定してあげる必要があります。 そういった処理をするには、「WebEngine」というクラスを用います。 WebEngineでページを指定する [crayon-5c20a82a1f41d501754987/] 「WebEngine」のインスタンスを取得するには、先ほど作成した「WebView」のインスタンスから、「getEngine」という関数を使って取得し、ページの読み込みは「WebEngine」クラスの「load」関数を使い、引数にURLを指定します。 さぁそして、実行した結果はどうでしょうか。Googleの検索ページが表示されて、既にらしくなってきましたよね。 URLをブラウザから指定する 「WebEngine」クラスの「load」関数にURLを指定するだけでWebページが表示されました。 ということは、テキスト領域を用意して、入力された値を「load」関数の引数にすれば、ブラウザからURLを指定することが可能になりそうです。 というわけで、「TextField」クラスを使って実現してみます。 [crayon-5c20a82a1f423703465757/] まずは上のバーを設置し、テキスト領域を貼り付けます。 そして「WebView」の位置も少し下げました。

【入門シリーズ】JavaゲームプログラミングPart9〜switch文〜

前回 前置き 前回までのプログラムで得られる結果をまず示します。 [crayon-5c1f56a1cb4e9279061095/] 「20000円」の防弾チョッキを2回買おうとしています。 1回目はちゃんと買うことができましたが、2回目は所持金が足りず買えませんでした。 ただ、買えなかった時になにもメッセージがないのは不親切ですよね。 なので「所持金が足りない！！」とメッセージを表示するようにします。 [crayon-5c1f56a1cb4f3185625826/] これだけでもかなり煩雑になりました。 このままだと可読性（読みやすさ）に欠けてしまうので、直す必要があります。 今回は煩雑なプログラムを直すために、「switch」文を使ってみたいと思います。 switch文で見やすくする [crayon-5c1f56a1cb4f9305208037/] これが 「switch」文です。 「switch」文の「（）」の中身に、比較したい変数を入れます。 今回は「key」変数の値ごとに処理内容を分けたいので、「key」変数を入れます。 そして「case」の後に、「もしkey変数が〜だったら」の「〜」を入れて、「case」文の最後に「break;」と記述します。 「switch」文はとても使いやすく、見やすいので便利です。 とは言っても、実際まだ見やすいとは言えませんよね。 確かに長ったらしい条件文（if文）を書かずに済みましたが、まだ見づらいです。 なにが見づらくしているかというと、同じ処理の繰り返しをしているところです。 「case」文の中身で、「所持金が足りない！！」という言葉を何度も使っていますよね。 これは無駄なので、できれば書くのは1回だけにしたいです。 それから、「money」変数と道具の値段を比較して、買ったあとに「money」変数から道具の値段を引くという処理を3回も書いています。 「〜（道具の名前）を買った！」と表示する処理も3回書いてますよね。 なのでこれらを1回だけ書くように工夫してみます。

【入門シリーズ】JavaゲームプログラミングPart8〜while文〜

前回 前回の続きになります。 お金を減らす 前回キー入力処理を使って選択肢から買いたいものを選びました。 しかし、まだお金の処理が実装されていないので、実装します。 [crayon-5c1cb38e0c3f5876499777/] 盾と薬草と防弾チョッキの値段を変数にしました。 そして、「buyHerb」関数は使わないので、これは消しました。 結果 [crayon-5c1cb38e0c401937709396/] しかし、結果をみても実際にお金が減っているかどうかがわかりません。 なので、買い物をしたらもう1回ステータス表示を行う必要があります。 そして、ゲームなのに1回の買い物で終了しているのもおかしいです。 なので、ステータス表示と同時に、選択肢ももう1回表示してあげます。 while文 そこで「while」文というのを使います。 [crayon-5c1cb38e0c405500930364/] while文の中身には、ループしたい処理を記述します。そして本来は、while文の「（）」の中身に条件式を書くのですが、今回は無限にループをさせたいので、単純に「true」とだけ書きました。 このやり方は無限ループを作る際に用いられるやり方なので、知っておくと便利です。 ＊注意 無限ループを終了するには「Ctrl＋C」を押してください。「＋」は同時押しの意味です。 もしくは、「コマンドプロンプト」または「ターミナル」を強制終了してください。 結果 [crayon-5c1cb38e0c409213293710/] 問題点 気づいた方もいるかもしれませんが、選択肢を選んでエンターを押した時に、何故か2回もステータス表示と選択肢表示が行われます。 原因はエンターキーです。 実はキー入力の際に、「2」と「エンター」の2つのキーを押しているんです。 なので、その分のループも回されて、2回も表示が行われたということです。 ということで、「エンター」を押した時はステータス表示をしないように、「if」文を書きます。 [crayon-5c1cb38e0c413478321781/]

【入門シリーズ】JavaゲームプログラミングPart7〜キー入力〜

前回 おさらいとしてまずは、前回までのプログラムで得られる結果を表示したいと思います。 [crayon-5c1b6209bdb41074156087/] リンのステータス表示と、リンの買い物（5回）を表示するようになっています。 ただ、これだとリンが買い物するものを選べません。 こちらは盾を買いたいのに、勝手に5個も薬草を買われたら、ゲームとしておかしいですよね。 ということで、こちらが買いたいものを選択できる仕組みを作っていきます。 選択肢の表示 では選択肢を表示してみます。 [crayon-5c1b6209bdb4b650918393/] 今から買いたいものを選択する仕組みを作るので、薬草を5個買うプログラムはコメントアウトしました。 今不要なプログラムを実行させない時に、このようなコメント化することをコメントアウトと言います。 結果 [crayon-5c1b6209bdb4e557673306/] これでキー入力をして、買うものを選択できるようにすればいい感じですね。 キー入力 キー入力をするには、「System.in.read」を記述します。 まずはプログラムを見てみましょう。 [crayon-5c1b6209bdb50511322496/] このように使用します。 そして下の「if」文ですが、これは「もしkey変数の値が 1 という文字だったら」という意味です。 文字列を表す際に、「"(ダブルクウォーテーション）」を使ったと思いますが、このように文字を表す場合は「'（シングルクウォーテーション）」を用います。 さて、この状態でコンパイルするとこうなります。 [crayon-5c1b6209bdb56857679358/] 「IOException」というエラーが出ます。 これを解決するには、「throws」キーワードを用います。 [crayon-5c1b6209bdb5a385148173/] このように記述することで、エラーは無くなります。 では実行してみます。 結果 [crayon-5c1b6209bdb5c519035074/] 盾を変えたら成功です。

【入門シリーズ】JavaゲームプログラミングPart6〜コメント〜

前回 前回関数の使い方を紹介しました。 なので、関数を使ってプログラムを少し見やすくしていきましょう。 プログラムを見やすくする [crayon-5c18bead970f5835267706/] これが前回のプログラムですが、マーカーが示すように、2つの処理に分けられるかと思います。 なので、「main」関数に書かずに別の関数に記述して、その関数を「main」で呼ぶようにします。 [crayon-5c18bead970fd802610433/] 今回は「showStatus」関数と「buyHerb」 関数に分けました。 これなら「main」関数で何をやっているのかが、検討つきやすくなりましたよね。 ただ、このままコンパイルしてもエラーになってしまいます。 それは何故かというと、「money」変数や「herb」変数は「main」関数で宣言されているので、「main」関数の中でしか使うことができないんです。 その解決法として、これらの変数をグローバル化するという方法があります。 グローバル変数 ではグローバル化してみます。 [crayon-5c18bead97100296582137/] これがグローバル化です。 つまり、「main」関数も「showStatus」関数も「buyHerb」関数も、すべての関数が変数を共有できる状態にするのがグローバル化です。 こういった変数はグローバル変数と言います。 その逆がローカル変数です。 コメントをつける 最後に、コメントをつけてみましょう。 今、複数の変数や関数を宣言・定義していますが、それらが何を示すのかがわかる必要があります。 特に、プログラムの規模が大きくなるにつれてその必要性は増します。 その時のために、コメントというのをつける必要があります。 [crayon-5c18bead97103215135530/] これがコメントです。 コメントは、「//」 の後に記述します。 「//」の後に書かれた処理は、プログラムだと認識されません。 自分の好きなコメントが書けます。

JavaFXでCSSを用いる時の「書き方」と「サンプル」を紹介

JavaFXでは、「CSS」ファイルを用いた装飾が可能です。 画像で例を示したいと思います。 Buttonの例 Labelの例 デフォルトの状態より、かなり印象が違うと思います。 今回は画像例の「Button」と「Label」を作りながら「CSS」の使い方を紹介します。 ソースコード まずはデフォルトの状態で、「Button」と「Label」を表示させます。 [crayon-5c176d1c18085332046949/] 結果 これがデフォルトの状態です。 では、「CSS」ファイルを作成していきます。 今回は「test.css」というファイル名にしました。 CSSを編集 [crayon-5c176d1c1808e556545398/] このような中身にしました。 中身の意味は以下の表を参考にしてください。 次に、このCSSファイルを読み込みます。 CSSを読み込む [crayon-5c176d1c18090418403262/] 「getShtylesheets」関数は「ObservableList」型を返します。 そして、先ほど作成した「CSS」ファイルを、リストに追加します。 各コンポーネント（ButtonやLabelなど）では、「getStyleClass」関数を呼び出して、自身を装飾するクラス（HTMLでいうclass属性の意味）を追加します。 これで読み込みが完了します。 では結果を表示してみましょう。 しっかり装飾されていれば成功です。

【入門シリーズ】JavaゲームプログラミングPart5〜関数〜

前回 前置き まず、前回のプログラム（ソースとも言います）を見てみましょう。 [crayon-5c161b72e71f0932818183/] このソースを見ると、やっていることは単純なのですが若干見辛い気がします。 では何が見づらくしているのでしょうか。 やはり「System.out.println」がどうしても長いですし、見辛い原因になりますよね。 どうにか別の単語で置き換えたいものです。 例えば「println」だけとか、「out」（出力という意味）とか、「put」（置くという意味）など。 でも実は置き換えることができるんです。 それを実現してくれるのが、今回のメインテーマである「関数」なんです。 関数を使って書き換える では、書き換える前に、関数を作ってみたいと思います。 [crayon-5c161b72e71f8556498904/] これが関数の書き方です。 まず、「static」と「void」というキーワードですが、この意味についてはひとまず置いておきましょう。 気にしたら負け的なあれです。 そして「void」と書いたあとに、任意の関数名を記述します。 今回は「out」にしました。 そして「（）」カッコを二つ書いて、その中に「引数」というものを入れます。 今回「引数」として入れたのは「String」です。 つまり文字列ですね。 最後に、関数の中に処理内容を書きます。 そこで見て欲しいのが、「引数」の「str」が処理内容で使われていますよね。 「これがなんなのか」というのを頭に置きながら次に進んでください。 関数で書き換える では書き換えていきます。 ただ、書き換える箇所が多いので、まずは1個だけ。 書き換えるとこうなります。 [crayon-5c161b72e71fe226192494/] どうでしょうか。 かなり文字数が省けましたよね。 「System.out.println」から「out」です。 さて、なぜこれで上手くいくのでしょう。 それはさっき頭に置いておいたことがヒントになります。

【入門シリーズ】JavaゲームプログラミングPart4〜繰り返し〜

前回 前回までで、防弾チョッキの買い物処理を「条件分岐」を使って書き換えました。 これによって所持金の計算をプログラムが自動でやってくれるようになりました。 今回は防弾チョッキではなく、「薬草」を買ってみたいと思います。 薬草を3個買う 薬草を買うといっても、1個だけでは物足りません。常に複数個は持っておきたいアイテムですからね。 ということで、前回書いた処理を、とりあえず3回書いて実行しましょう。 [crayon-5c14c9b4d8552011331298/] 一気にプログラムが見づらくなってしまいましたが、実行結果はこうなります。 [crayon-5c14c9b4d855a371163773/] 「4000円」の薬草を3個買って、所持金「25000円」から「13000円」に減っています。 なので実行結果としては成功です。 ただ、今薬草を3個書いましたが、これを10個20個買うとなった時にまた10個も20個もプログラムを書くのでしょうか。 恐ろしく見辛いプログラムになってしまうのは目に見えています。 ではどうすればいいでしょうか。 そこで登場するのが「繰り返し処理」です。 繰り返し処理 繰り返し処理を行うには、「for」文というのを用います。 [crayon-5c14c9b4d855d612880570/] 少し言葉が難しいのでわかりづらいと思いますが、実際のプログラムを見てみましょう。 [crayon-5c14c9b4d855f641435748/] まず、「初期化式」のところに、「int i = 0」と記述します。 これはつまり、変数を定義しているということです。 そして、この変数「i」は、「for」文の中で宣言と定義がされているので、「for」文内でしか使われません。 そして条件式に、「if」文でも使うような条件文が出てきました。 これは「もし変数 i が3未満なら」という条件です。 そして更新式に、「i++」と書きましたが、これは「変数 i に 1 を足す」という意味です。 つまり、「for」文の中身が実行される度に変数「i」は加算されていき、

【入門シリーズ】JavaゲームプログラミングPart3〜条件分岐〜

前回 さて、前回「変数」の使い方を学びました。 これにより「リン」の所持金の処理が楽になりましたよね。 ただ、「リン」の所持金はたったの「5000円」。高い武具だと買えない可能性があります。 今回はそういった処理を行ってみたいと思います。 リンが高い買い物をしようとした時 例えば「リン」がアメリカ製の高い防弾チョッキを買おうとした時、所持金「5000円」では絶対に買えないですよね。 ですから防弾チョッキを買う時のプログラムはこうするべきです。 [crayon-5c13782a1e864809383251/] 所持金が減らない代わりに、「19800円」の防弾チョッキは買えませんでした。 ところが、これを見かねた「リン」の母が 「20000円」をくれました。 となると、「リン」の所持金は「25000円」になりますよね。 なので「money」変数の値を買えてみましょう。 [crayon-5c13782a1e86c454402558/] ところがどうでしょう。このプログラムを実行すると以下のようになります。 結果 [crayon-5c13782a1e871866307196/] 「リン」は「25000円」も持っているのに、「19800円」の防弾チョッキが買えないことになっています。 これはおかしいですよね。 そこで今回のメインテーマ、「条件分岐」です。 条件分岐を使う 「条件分岐」を使うには、「if」というキーワードを使います。 [crayon-5c13782a1e873624458809/] では、これを使ってプログラムを書き換えて見ます。 [crayon-5c13782a1e875982051304/] 「もし所持金が防弾チョッキの値段より低かったら」という条件式です。 この条件式に登場する「不等号記号」は、数学の「不等号記号」と全く同じ意味を持ちます。 この条件分岐のおかげで、おかしな文は表示されなくなりましたが、「リン」が防弾チョッキを買うという文はありません。 なので「もし所持金が防弾チョッキの値段以上だったら」という条件式を書いて、防弾チョッキを買う処理も追加してみましょう。 [crayon

JavaSwingとJavaFXの違いをまとめてみた

ウィンドウ作成 Swingの場合 [crayon-5c13782a59259895469511/] FXの場合 [crayon-5c13782a59261658890724/] FXの「Stage」が、Swingでいうところの「JFrame」になっています。 背景色変更 Swingの場合 [crayon-5c13782a59263823020639/] FXの場合 [crayon-5c13782a59268989993309/] JavaFXでは、色を設定する時に「Fill」という単語をよく使うので、Swingになれていると突っかかりやすい部分です。 また、Swingの「Color」クラスとFXの「Color」クラスは異なるので、インポートするパッケージには注意しましょう。 キー操作 Swingの場合 [crayon-5c13782a5926a565698729/] FXの場合 [crayon-5c13782a5926b331924937/] Swingの「KeyEvent」クラスとFXの「KeyEvent」クラスは異なるのでインポートするパッケージには注意です。 また、Swingの「KeyEvent」クラスは「getKeyCode()」ですが、FXの場合は「getCode()」で、戻ってくる型も違います。 「getKeyCode()」は「int」ですが、「getCode()」は「KeyCode」です。ちなみに「KeyCode」は「enum」です。 マウス処理 Swingの場合 [crayon-5c13782a5926e456854404/] FXの場合 [crayon-5c13782a5926f722575355/] Swingの場合は、マウスの座標が「int」で返ってきますが、FXは「double」で返ってきます。 また、Swingの「MouseEvent」とFXの「MouseEvent」は異なるので、インポートするパッケージには注意です。

【入門シリーズ】JavaゲームプログラミングPart2〜変数〜

前回 さて、前回「はろー！ワールド！」と表示させるプログラムを作りましたが、「はろー！ワールド！」と表示するだけではゲームプログラミングのかけらもありません。 なのでせめて別の文字列を表示してみましょう。 ゲームらしくする [crayon-5c10d4d2df58f707069316/] プレイヤー「リン」の所持金とプレイ時間を表示するプログラムです。 これで少しゲームらしくなった気がします。 実際に実行するとこうなります。 [crayon-5c10d4d2df59a128204421/] では、このプレイヤー「リン」に買い物をさせてみましょう。 [crayon-5c10d4d2df59d454909263/] 結果 [crayon-5c10d4d2df5a0394191280/] リンは金属バット（100円）を購入し、所持金が「500円」から「400円」に減りました。 しかしよく考えてみると、リンの所持金「500円」というのは安すぎる気がします。小学生のお小遣いで冒険させるのは少し酷です。 なので所持金を増やしてあげましょう。 [crayon-5c10d4d2df5a3483238022/] 結果 [crayon-5c10d4d2df5a5710325924/] 「5000 円」ならなんとかいけそうですね！（それでも少ない気がしますが） ただ、ここで少し不可解な点が出てきました。 所持金「5000円」のはずが、「100円」の金属バットを買っただけで残額「400円」になっています。 ということは、該当の文も修正してあげる必要があります。 [crayon-5c10d4d2df5a9110857454/] 結果 [crayon-5c10d4d2df5ab084875249/] これで正しい所持金表示になりました。 ただ面倒くさいですよね。 これから「リン」は冒険をするにあたって、たくさんの買い物をするわけですが、その際に一々文章をあれこれ訂正していてはまともにプログラムが組めません。 そこで今回のメインテーマである「変数」を使います。

【入門シリーズ】JavaゲームプログラミングPart1〜ハローワールド〜

JavaFXをOpenJDK 11で動かしたい！！そのやり方とは・・

Java 11から有償化されるということで、OracleJDK 11ではなく、OpenJDK 11を使うという方は非常に多いかと思われます。 そして今までJavaFXを使われてきた方は、Java 11からJavaFXがなくなると聞いて「えっ！？」と思われたかもしれません。 そうなんです。実はJava 11の中にJavaFXという機能は無くて、代わりにJFXというのが用意されています。 もっと具体的に言えば、今までのJavaFXの機能をJFXに移したということですね。 なので、Java 11で書いたプログラムでJavaFXを使うには、JFXの中にある「モジュール」というのを指定して、コンパイルと実行を行わなければいけません。なので今回は、その「モジュール」の指定のやり方について説明したいと思います。 javafx-sdk-11.0.1をディレクトリ内に置く まずは「javafx-sdk-11.0.1」フォルダを、自身が作成したJavaファイルがあるフォルダ内に置きます。 ちなみに、「javafx-sdk-11.0.1」は、JFXのバージョンによって異なる可能性があるので、フォルダ名が必ず一致することはありませんのでご注意ください。 そして今回使用するテストプログラムはこちらです。 [crayon-5c0e316a55097420887168/] ウィンドウを表示するプログラムです。もちろん、ご自身であらかじめ作ってある場合は、そちらを使っても構いません。 コンパイルと実行をする ではコンパイルをしていきます。 まず、いつもの通りにコンパイルをしてみます。 [crayon-5c0e316a550a2539603079/] なにやらたくさんのエラーが出てきました。 これらのエラーの中で、もっとも注目してほしいのが、 「Main.java:1: エラー: パッケージjavafx.applicationは存在しません」というエラーです。 つまり冒頭で述べた通り、JavaFXのプログラムはJFXの移されたので、そのままのやり方だと「javafx.application」というパッケージは見つからないのです。 なので、「モジュール」というのを指定しなければありません。ちなみにモジュールというのは、Java 9から導入された機能です。

【Java】CSVを読み込む方法

JavaでCSVを読み込むためのソースコードを作りましたので、コピペして確認してみてください。 今回使用する「CSV」データは、「test.csv」です。 [crayon-5c0b8e5774716879712389/] ソースコードの流れ InputStreamReaderのオブジェクトを作る 「FileInputStream」クラスでも読み込みは可能なのですが、今回はエンコーディングも指定できたら便利なので「InputStreamReader」を使うことにしました。 変数宣言 今回は「ArrayList」を使って、読み込んだ値を保存していきます。 ただ「InputStreamReader」の「read」関数は、「int」型返すことに加えて一文字ずつの読み込みとなるので、一時保存用の変数を作っ てあとでそれを「String」型に変換するというやり方にします。 最後に、ファイルの終わりに達したら「eof」変数を「TRUE」にして、読み込みを終了します。 読み込みループ 一時変数用の変数「put」と「putc」に、一文字ずつ保存していきます。 「CSV」はデータがカンマと改行で区切られているため、もし「,」と「改行」が代入されたら「for」ループを抜け、代入された「,」と「改行」は「null(空）」にします。 そしたら読み込んだデータを「String」に変換するので「String」クラスの「valueOf」関数を使って「char配列」から「String」に変換 します。 ちなみに「int配列」から「String」への変換はできません。 最後に、もしファイルの終わりに達したら「eof」を「TRUE」にし、読み込みを終了するのですが、ファイルの終わり達する前に一時保存されているデータがあるかもしれないのですぐに抜けることはせず、「eof」を「TRUE」にする処理だけ行います。 そして、実際に「list」にデータを保存してから「eof」が「TRUE」であるかどうかの判定を行った上で読み込みを終了させます。

【Mac】OpenJDK 11 をダウンロードして、バージョンを変更するまでの流れ

【Java】コンソールに入力された「値」や「文字列」を読み込む方法【4パターン】

コマンドプロンプト、もしくはターミナル上で入力された値や文字列を読み込む方法を「4パターン」紹介します。 通常の読み込み（キー配列番号の読み込み） [crayon-5c07995179835232814382/] 結果： [crayon-5c0799517983c692547291/] あくまでも、押されたキーの情報が読み込まれるので、「0」キーは「48」となります。 こういった数字は「ASCIIコード」と言います。 数字の読み込み（1桁） [crayon-5c0799517983e078885056/] 結果： [crayon-5c07995179840085634655/] 一度受け取った「ASCIIコード」を、「String」型に変換することで「0」キーが「0」になります。 文字列の読み込み [crayon-5c07995179842821566651/] 結果： [crayon-5c07995179844433877681/] 文字列を読み込む場合は、改行までの全ての文字を読み込む必要があるので、「for」ループで読み込みます。 今回は64文字までに設定していますが、本来はよくないやり方ですので注意を。 「ArrayList」を使ってメモリを喰わない方法をとるのがベストですが、今回はわかりやすい方が良いと思ったので。 ただ、このプログラムでは日本語が読み取れません。「こんにちは」と入力しても文字化けしてしまいます。 それは「エンコーディング」の設定がなされていないからです。 なので日本語も読み取れるやり方も紹介します。 文字列の読み込み（日本語も読み込む） [crayon-5c07995179846296000916/] 結果： [crayon-5c07995179848770881180/] 「InputStream」クラスでは、「エンコーディング」を設定できないので、「InputStreamReader」クラスを使用します。 もちろん「read」関数も、「InputStreamReader」クラスの「read」関数を使用します。

【Java】Listを使った時の「UnsupportedOperationException」の原因と解決法

Listを使った時の「UnsupportedOperationException」の原因と解決法を紹介します。 まずは「UnsupportedOperationException」が出るプログラムの例を示します。 [crayon-5c079951acd34797360213/] このプログラムを実行すると、 [crayon-5c079951acd3e109977603/] このように出力されます。 原因 原因は、「インターフェース」の関数を呼び出したことです。 実は「List」クラスは「インターフェース」として定義されていて、「List」クラス内の関数は宣言だけで、定義はされていません。 なので「インターフェース」の関数は呼び出すことはできません。 これは「インターフェース」の仕様なので、覚えておきましょう。 解決 原因は「インターフェース」の関数を呼び出したことにありました。 なので、「インターフェース」ではない所から呼び出します。 [crayon-5c079951acd43880184121/] 「list」変数に、「ArrayList」クラスのオブジェクトを代入します。 そうすることで「list」変数が「実体化」 するので、「ArrayList」クラスで定義された「add」関数が呼び出せるようになります。 逆に、もし「実体化」されていないと、「add」関数が定義されているという保証がないことになります。 インターフェース型の変数を使用する場合は、「実体化」されているかどうかに注意を払って使うと、エラーが防げると思います。

Javaで作ったターミナルSTGを紹介！！【コマンドプロンプトでも動きます】

今回、ターミナル上（コマンドプロンプト上でも）でプレイできるSTGを作りましたので、紹介していきたいと思います！ 少しカクカクしてしまうのはご愛嬌。 ルール ・プレイヤーの移動は「↑」「→」「↓」「←」キーで行います。 ・弾丸の発射は「Z」キーで行います。 ・プレイヤーが敵に当たるか、HPが0を下回ったらゲームオーバーです。 ・HPの増減は、プレイヤーが敵を倒したら「＋10」で、敵が倒されずに下まで降りてきたら「ー8」になります。 ・スコアは時間経過とともに増えていきます。 ・プレイヤーはなるべく長く生き残って、スコアを増やしていきます。 プレイされたい方は是非こちらのファイルをダウンロードしてください！ [crayon-5c0799539c45f009303909/] このコマンドを実行するとプレイができます。 何点取れたかを是非コメントで知らせてください！

【JavaFX】ウィンドウの背景色をボタンで切り替える方法

今回は上の画像のようなウィンドウを作成していきます。 基本的なやり方としては、ウィンドウの背景色を「Scene」に決定してもらい、ボタンを押した時に「Scene」の持つ背景色の情報を変更するようにします。 [crayon-5c07994eafc40669149894/] 「Button」クラスの「setOnAction」関数で、ボタンをおした時にこの関数の中身が実行されるようになります。 記述方式はラムダ式というものなのですが、これは「Java8」以降のバージョンでないと使えません。 なので、もし「Java8」ではなかったら、「Java8」にバージョンアップすることをオススメします。 そして色の変更ですが、色の変更は「Scene」クラスの「setFIll」関数を使います。 「setFill」関数の引数は「Paint」型なのですが、通常は「Color」クラスのフィールド（REDやBLACKなど）や、関数（「rgb」関数や「color」関数など）を使います。 あとは、「color」という名前のフラグ変数を用意して、「赤を表示しているなら黒」「黒を表示しているなら赤」、といったように場合分けをして完成です。

JavaでC言語の「system(“cls”)」をする方法

Javaでsystem("cls")をする方法は、Windows（コマンドプロンプト）とMac（ターミナル）とで方法が異なるので、両方を紹介します。 Windows（コマンドプロンプト） [crayon-5c07994d7220f601467153/] 「ProcessBuilder」のコンストラクタの引数に、コマンドプロンプトで使うようなコマンドを入力します。 Mac（ターミナル） [crayon-5c07994d7221a663241468/] 「\033[H\033[2J」という、見慣れない文字列が出てきました。これはエスケープシーケンス（ESC・制御文字とも言います）といって、特別な文字を表します。 こちらの記事にエスケープシーケンスの表がありますので、詳しく知りたい方は是非お読みください。 こちらで簡単に紹介しますと 他にも色んなコードが使えますので、色々カスタマイズして遊ぶと面白いです。

【JavaFX】MediaクラスのgetWidthやgetHeightが反映されない

「Media」クラスの「getWidth」関数と「getHeight」関数は、それぞれ動画の幅・高さを取得するための関数ですが、取得したはずの数字がおかしいといった不具合が生じる可能性があります。 具体的に言うと、動画が幅・高さ（500×600）のはずなのに、取得できた数字は「0」だった場合です。 この不具合の原因は、動画が完全に読み込み終えていない状態で「getWidth」関数や「getHeight」関数を呼び出すことによって、正確な値が取得できないことにあります。 なので、動画完全に読み込み終えた後に使わなければ、この2つの関数は機能しません。もちろん、他の「Media」クラスの関数群も同じです。 では、どうやったら読み込み終えたか判断できるのかと言いますと、それは、「MediaPlayer」クラスの「setOnReady」関数を使うことで可能になります。 [crayon-5c07994dae21b794813786/] 合わせて読みたい

【JavaFX】MediaPlayerを使って動画を再生する

JavaFXで動画を再生する方法を紹介しています。

【Java】ライブラリ（.jar）の「作り方」と「使い方」

Javaでは、汎用的なプログラムを「JAR」ファイルにまとめて、ライブラリとして流用します。 今回はその「JAR」ファイルの作成方法と、「JAR」ファイルの使い方を紹介していきます。 プログラムの例 例として、2つの直角三角形かどうかを判断するプログラムを作成してみます。 [crayon-5c07994de85be627754381/] 今回は2つだけなので全体の記述量はそこまでないのですが、もし直角三角形を100個くらい判別しないといけなくなった時に、同じやり方だとどうなるでしょうか。 非常に煩雑で読み辛いプログラムになってしまいます。 特にチームワークでは、こういったスパゲティプログラムは嫌われてしまうので避けましょう。 まずは関数化をしてみる 同じ処理は関数化してしまいましょう。 [crayon-5c07994de85c9725743510/] 関数化することによって、100個でもマシなプログラムになりそうですね。 ライブラリ化する 直角三角形かどうかを判別するプログラムは、他のプログラムでも使えそうなものですよね。 ですから、さっき作った関数を別のクラスに移し替えて、ライブラリ化してみましょう。 [crayon-5c07994de85ce615909595/] 「Triangle」クラスに関数を移し替えたので、「Main」の方の記述も変更していきます。 [crayon-5c07994de85d1523283572/] 関数まるごと移し替えたので、「Main」全体の記述量が少なくなりました。これだけでもかなり違うと思いませんか？ さて、「Triangle」クラスが出来上がったので、これを「JAR」ファイルにしてライブラリ化していきます。 「JAR」ファイルは基本的にコマンドプロンプトもしくはターミナル上で「jar」コマンドを使って作成します。 [crayon-5c07994de85d4071944631/] コマンドが少し長いので解説すると、 -c アーカイブを新規作成する -v 標準出力に詳細な出力を生成する -f アーカイブ・ファイル名を指定する -M エントリのマニフェスト・ファイルを作成しない ちなみに、アーカイブというのは「JAR」ファイルのことです。

【Java】プロキシを使うことのメリットと動的プロキシの作り方

【Java】例外「InvocationTargetException」の原因を調べる方法

「InvocationTargetException」という例外は、公式ドキュメントにはこう書かれています。 InvocationTargetExceptionは、呼び出されるメソッドまたはコンストラクタがスローする例外をラップする、チェック例外です。 出典: つまり、「InvocationTargetException」自体に意味があるわけではありません。その「InvocationTargetException」が何故出たのか、奥の原因を探る必要があります。 その最も簡単なやり方を紹介します。 [crayon-5c07994e740b8140130636/] 「getTargetException」関数で、スローされた原因である例外を取得することができます。 それでも原因がわからない場合 それでも原因がわからない場合とは、自分が作ったプログラムの中に、「InvocationTargetException」をスローする可能性のあるプログラムが無い場合です。 先ほど書いた「try-catch」文も、 [crayon-5c07994e740c1184367761/] コンパイルした時点でこういったエラーが出てしまったのではないでしょうか。 おそらく、使用しているAPI自身が「InvocationTargetException」をスローしているものと思われます。 例えば、「Application」クラスの「start」関数になにかしらの処理を書いたとして、その処理の中に「InvocationTargetException」をスローする可能性のあるプログラムはないが、「start」関数自体が「InvocationTargetException」をスローする場合です。 この場合は、「try-catch」文を自分が書いたプログラムに入れることは出来ないため、最初に紹介したやり方では解決できません。 なので、自分が書いた処理内容を工夫して「InvocationTargetException」が出ない処理に書き換える必要があります。

【JavaFX】FPSを固定するやり方

このFPS=60というのは、1秒間に60フレーム現れるということです。 つまりFPSを固定するには、1フレームにかかる時間を固定するということです。 ちなみに 1秒 = 1000ms なので、 この場合は 1フレーム = 1000ms ÷ 60 = 16.666...ms となります。 ここで問題になるのが、16.666...の、小数点以下の数字です。 無限に続いてしまうので、ピッタリ正確にとはいきません。 しかし、今回はなるべく正確になるようにしたいので、誤差時間を1フレームずつ修正していく方法をとります。 毎フレーム誤差時間を計算し、次のフレームに持ち越すことによって、トータルでの誤差をほぼなくしていきます。 また、整数型（long）で小数点以下の値を保持しないといけないため、あらかじめ整数型（long）の値を1000倍、10000倍するなどして保持するようにします。 掛け算はシフト演算することで高速化できるので、シフト演算を用います。 [crayon-5c331ed371fbb765210911/] 参考： メインループはメインスレッド内で「while」文を回して行います。 ループ内の処理は「Platform」クラスの「runLater」関数を実行して行います。

【JavaFX】簡易HTMLエディタを作りながら、JavaFXの使い方を解説

JavaFXを用いた簡易HTMLエディタを作るやり方を紹介します。 最終的な完成イメージはこちらです。 こんな感じのHTMLエディタを作っていきます。 JavaFX Scene Builder 2.0でレイアウトを作る JavaFX Scene Builder 2.0というアプリを使い、レイアウトを作成していきます。 JavaFXを使う上で、このアプリは必要不可欠です。 パソコンにアプリが入っていないという方は以下のリンクからダウンロードしてください。 そしたらアプリを開いて、レイアウトを作成していきます。 最初に、「AnchorPane」をドラッグアンドドロップしてください。 そしたら、下の「Controls」を開き、HTMLエディタを挿入します。 あとは「AnchorPane」と「HTMLEditor」の両方を上手くサイズ調整をしていきます。 しなくても今回は大丈夫ですが。 私は以下のように調整してみました。 サイズ調整はマウスで直感的に操作が可能です。 次に、ファイルを保存するためのボタンを追加します。 ボタンも「Controls」にあります。 今回はこのように配置しました。 ボタンを追加したら、「Text」の部分を変更しましょう。 最初は「Button」になっていると思いますが、今回は「HTML」と書き直します。 ここまでできたら名前を付けて保存します。 保存は、 「File」→「Save」 もしくは、 「Ctrl＋S」キー を押せばできます。 今回は「main.fxml」という名前で保存しました。 Mainファイルを作成する それではMainファイルを作っていきます。 [crayon-5c289196be82d180765980/] FXMLをファイルを読み込むには、FXMLLoaderクラスのload関数を使用します。 [crayon-5c289196be838882265689/] load関数はこのように定義されています。 引数がURL型なので注意。 URL型は、ClassのgetResource関数で取得できます。 Class

Javaにおける関数ポインタのやり方

Cで使われる関数ポインタは、Javaでも同じようなことができます。 Java自体に関数ポインタというのは存在しませんが、これから紹介するやり方で実現することができます。 そのためには、JavaのInterfaceという機能を使います。 なので今回はそのInterfaceを用いた関数ポインタのやり方を紹介します。 Interfaceを定義する それではまず、Interfaceを定義しましょう。 今回はMain.javaというファイル名でプログラムをします。 [crayon-5c31cd3bdd4d6637843004/] Interfaceを定義するには、interfaceというキーワードを使います。 中にfunc関数を定義していますが、このfunc関数はInterface内では定義しません。 なので今は、Interfaceの中にfunc関数があるだけの状態です。 main関数を定義する そしたらmain関数を定義しましょう。 [crayon-5c31cd3bdd4de838751848/] 関数ポインタを使う関数を定義する それではいよいよ、関数ポインタを使っていきます。（正確には関数ポインタを使うとは言いませんが） Mainクラス内に以下のshow関数を定義します。 [crayon-5c31cd3bdd4e0241367757/] このshow関数の引数はInterfaceとなっています。 C言語だと関数ポインタをする際は「void *(show)()」といった感じで行うのですが、Javaの場合はInterfaceを渡します。 実際に、関数を引数に入れてみる そしたら実際に、関数を引数に渡してみます。 [crayon-5c31cd3bdd4e3590418775/] 少し複雑になったので、分けて解説していきます。 まず、show関数を呼び出さないといけないので、show関数を呼び出します。 [crayon-5c31cd3bdd4e5482127085/] そしたら、show関数の引数はInterfaceなので、Interfaceを引数にいれます。 [crayon-5c31cd3bdd4e6254277510/] 普通だったこうしたいところですが、これではエラーになってしまいます。 そのため、Interfaceを引数に入れる際は、 [crayon