JavaFXとSceneBuilder

はじめに

今回はJavaを学習しているとJavaFXなるものに出会ったので備忘録を兼ねて簡単なアプリケーションを作成しながら記事をまとめていきたいと思います。

JavaFXとは

JavaFXとはJavaのフレームワークの1つで、GUIアプリケーションを作成するときに役立ちます。特徴としてXLMやCSSを利用して作成するといった点が挙げられます。

実行環境・ツール

実行環境およびツールは以下を用意・使用していきます。

・Windows11
・Eclipse 2022-12
・SceneBuilder

SceneBuilderを使用しての画面作成

ツールの用意ができたら早速画面の作成をしていきたいと思います。画面作成には「SceneBuilder」というツールを使っていきます。SceneBuilderはJavaFXで使用する画面のXMLファイルをドラッグアンドドロップで簡単に作成することができます。
ツールを起動すると空の状態から画面を作成するか、テンプレートを使用して画面を作成するかを選択できるかと思います。今回は基本アプリケーションのテンプレートを編集して画面の作成を行っていきます。


基本アプリケーションのテンプレートを選択すると上記のようにある程度編集されたされた画面が表示されます。その後、左のツールバーから必要な要素ををドラッグアンドドロップ、右のツールバーで各要素に対してIDを振り分けして画面を作成していきます。
今回は下記のような画面を作成し、「Main.fxml」という名前で保存します。


*挿入文字列のテキストフィールドに入力した文字列をSample.txtという名前のテキストファイルに挿入し、readボタンを押すとテキストファイルに記載されている文字をテキストエリアに表示するといった機能を実装していきます。左上のテキストフィールドは挿入された文字列のコンソールになります。

Eclipseプラグインの導入とプロジェクトの作成

1,Eclipseプラグインの導入

Eclipseを起動したらJavaFXプロジェクト作成のためにプラグインを導入します。ヘルプ(H)→Eclipse マーケットプレイス(M)→検索欄でJavaFXと検索→検索結果から「e(fx)clipse」というプラグインをインストールします。

2,プロジェクトの作成

プラグインのインストールが完了したらいよいよプロジェクトを作成していきます。
ファイル(F)→新規(N)→プロジェクト(R)→ウィザードの選択でJavaFX プロジェクトを選択→次へを押してプロジェクト名を入力(筆者はFxSampleという名前で作成)→次へを押してビルドの設定(後ほどやるのでそのまま次へ)→言語後をFXMLに設定し、ファイル名をMainにして完了する。
上記が完了したら以下画像のようなプロジェクトツリーができます(Main.fxmlは先ほど作成したファイルを設定してください)。

3,JavaFXモジュールのダウンロード

次にJavaFXモジュールのダウンロードを行います。ブラウザで「JavaFX」と入力すると公式サイトからダウンロードできるので最新版をダウンロードします。ダウンロードが完了したら任意のディレクトリに解凍します(後ほど必要になるので保存先を覚えておいて下さい)。

4,ビルドパスとコマンドライン引数の設定

次はビルドパスの設定を行っていきます。手順は以下となります。
プロジェクトを右クリック→ビルド・パス(B)→ライブラリの追加(L)→ユーザーライブラリ→ユーザーライブラリ(U)→新規(N)→任意の名前を設定(筆者はJavafxとして設定)→Javafxライブラリを選択し、外部jarの追加→先ほど解凍したJavaFXモジュールのlibフォルダにあるjarファイルをすべて選択→適応して完了
上記が完了するとビルドパスの設定が完了します、またコマンドライン引数を設定する前にプロジェクトディレクトリにある以下のファイル、ビルド・パスを削除しておいてください(これがあると実行時にエラーが発生します)。

・JavaFX SDK
・module-info.java

続いてコマンドライン引数の設定を行います。JavaFXにはモジュールシステムが利用されているため、使用するモジュールの設定を行わなければいけません。そのため以下の手順で設定を行います。
実行の構成を開く→プロジェクトを選択する(今回はFxSample)→引数タブを選択→VM引数に「–module-path “解凍したJavaFXフォルダ内のlibフォルダのパス”  –add-modules javafx.controls,javafx.fxml」を設定
上記の設定が完了すると実行することができます。

5,コーディング

設定が終わったらコーディングをしていきます。今回はapplicationディレクトリ下に以下の4つのJavaファイルを作成していきます。
・Main.java(今回は特にコーディングは行わない)
・MainController.java
・Reader.java
・Writer.java

それではコーディングを行っていきます。
Reder.java

package application;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;

public class Reader {
	public static String reader() {
		String text = "";
		try(BufferedReader br = new BufferedReader(new FileReader("Sample.txt"))){
			String str = null;
			while((str = br.readLine()) != null) {
				text += str + "\n";
			}
		}catch(IOException e) {
		
		}
		return text;
	}
}

Writer.java

package application;

import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.IOException;

public class Writer {
	public static void writer(String str) {
		try(BufferedWriter bw =
		          new BufferedWriter(new FileWriter("Sample.txt",true))){
			bw.write(str);
			bw.newLine();
			bw.flush();
		}catch(IOException e){
			
		}
	}
}

MainController.java

package application;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;

public class MainController implements Initializable {
    @FXML
    private TextField writeLabel;
    @FXML
    private TextField console;
    @FXML
    private TextArea readArea;
    @FXML
    private Button writeButton;
    @FXML
    private Button readButton;
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // 時に記載なし
    }
    public void writeText() {
    	String wl = writeLabel.getText();
    	Writer.writer(wl);
    	writeLabel.setText("");
    	console.setText(wl);
    }
    public void readText() {
     String rt = Reader.reader();
     readArea.appendText(rt);;
    }
}

6,実行

コーディングが終わったらいよいよ実行していきます。アプリケーションを実行するとSceneBuilderで作成した画面が表示されるかと思います。画面が表示されたら実際に文字を入力してテキストエリアに文字を表示していきたいと思います。無事に文字を表示することができました。

終わりに

今回はJavaFXアプリケーションを作成するための基礎知識をご紹介していきましたがいかがだったでしょうか。GUIアプリケーションの作成は画面の構築が面倒なイメージがありますが、画面レイアウトをツールで作成することができればかなりの作業を削減することができます。GUIアプリケーションを作成する際の選択肢の一つとしてぜひいかがでしょうか。

VBAの基礎知識

Excel上で、以下のようなフォーマットを見たことはあるでしょうか?
上記のフォーマットは、

①「移行元フォルダパス」に置換したいExcelファイルが格納されているフォルダパスを指定

②「移行先フォルダパス」に置換後のファイルを保存するフォルダパスを指定

③「ファイル置換」のボタンを押下すると、置換対象のExcelファイルをもとに、別フォーマットに書き換えたExcelファイルを移行先フォルダパスで指定したフォルダに出力する

という一連の処理をマクロ化したExcelファイルになります。
このように、Excel上で特定の処理をマクロ化する際に使用する言語をVBA(Visual Basic for Application)といいます。
今回は、VBAを使うための初歩操作と、簡単なプログラムについて解説していきます。

VBAエディタ(VBE)の開き方

VBAを書き込むエディタ「VBE(VisualBasicEditor)」を開く方法は、以下の2通りがあります。

①Ctrl+F11を押下
②「開発」タブから「Visual Basic」を押下(「開発」タブについては、オプションからタブ上に表示させるように設定する必要があります)

上記方法でエディタを開くと、以下の画面になると思います。
この画面のままではまだコードの書き込みは行えないので、モジュールを追加します。
上記画面で、「挿入」タブ→「標準モジュール」を押下するとコードを書き込むウインドウが表示されます。
次は、簡単なプログラムについて解説します。

足し算・引き算の処理を実行するプログラムを作る

ここからは、標準モジュール内にプログラムを書き込み、「セル内の数値を判定して足し算・引き算の計算結果を出力するプログラム」を作成していきます。
まず、モジュール内に「Sub <Sub名>()」を記載します。このSubは、他のプラグラミング言語でいうメソッドに該当します。
<Sub名>には、任意の名前をつけられます。日本語も使用可能なので、本記事では「足し引き処理」とします。

「Sub 足し引き処理()」を記入後、Enterを押すと末尾に「End Sub」という記載が自動的に追加されます。このEnd SubとSubの間に、行いたい処理を羅列していきます。

Sub内に、以下のコードを書き込みます。

Dim num1 As Integer
Dim num2 As Integer
Dim calcResult As Integer
Dim calc As String

上記コードは、処理内で使う変数の宣言になります。「Dim <変数名>」で変数名、「As <データ型>」でその変数の型を宣言しています。
今回は計算のプログラムなので、計算を行う数値を格納する変数を2つと、計算方法を指定するための変数を宣言しています。

次に、以下のコードを記入します。

 '1つ目のセル内の値を判定
If IsNumeric(Cells(2, 2).Value) Then
 'セルの中身が数値の場合、数値を変数に格納
 num1 = Cells(2, 2).Value
Else
 'セルの中身が数値以外の場合、エラーメッセージを出して処理を終了
 MsgBox "数値を入力してください。"
 End
End If

一個ずつ解説していきます。
2行目の「If <判定したい値・式> Then」は、<判定したい値・式>に記入した式や値が返す真偽の結果によって、処理を分岐させるためのステートメントです。Thenのあとには、判定結果がTrueの場合の処理を記載します。
「IsNumeric」は指定した値が数値かどうかを判定するための関数となります。今回は、セルの値を参照して数値かどうかを判定しています。

続いて、4行目の「num1 = Cells(2, 2).Value」は、先程宣言した変数の中にセルの値を格納しています。
Cells(行,列).valueは、セル内の値を参照しています。かっこ内の行と列については、どちらも数値で指定する必要があります。(列指定はA列から順に指定、E列を指定する場合は”5″になります)
今回は、B2に1つ目の数値を入力するため、Cells(2, 2)を指定します。

5~8行目は、1行目の条件分岐がFalseとなった場合の処理になります。
7行目のMsgBoxは、Excel上でメッセージボックスを表示させるための関数になります。MsgBoxのあとに、表示させたいメッセージを””(ダブルクォーテーション)囲みで記載します。

8行目のEndは、VBAの処理を途中で中断させる場合に用います。変数内に数値が入っていない状態で計算を行うと、予期しないエラーが発生する可能性があるため、セル内に数値以外が入力されている場合は、その時点で処理を中断させるようにしています。

こちらの処理は1つ目の数値に対する処理のため、2つ目の数値の処理も同じように記載します。

'2つ目のセル内の値を判定
If IsNumeric(Cells(3, 2).Value) Then
 'セルの中身が数値の場合、数値を変数に格納
 num1 = Cells(3, 2).Value
Else
 'セルの中身が数値以外の場合、エラーメッセージを出して処理を終了
 MsgBox "数値を入力してください。"
 End
End If

こちらは、セルの取得範囲をB2からB3に変更したのみなので、説明は省略します。

次に、計算方法の判定を行う処理を記載していきます。
以下のコードを記載します。

'計算方法の判定・計算実施
If Cells(4, 2).Value = "+" Then
 '+の場合、足し算を実施
 calcResult = num1 + num2
ElseIf Cells(4, 2).Value = "-" Then
 '-の場合、引き算を実施
 calcResult = num1 - num2
Else
 '上記以外の場合、エラーメッセージを出して処理を終了
 MsgBox "+か-を入力してください。"
 End
End If

2行目では、B4セルの値を取得して、特定の文字列であるかどうかの判定を行っています。今回は足し算or引き算を実施したいため、四則演算の記号”+”であるかどうかを判定します。
また、もし”+”でない場合でも、引き算であれば処理を実施したいため、5行目で四則演算の記号”-“であるかどうかを追加で判定しています。1つ目の条件がNGの場合に2つ目の条件判定を行いたい場合、ElseIfを記載します。

単純な計算を行う場合は、四則演算記号を使うのみで問題ありませんが、掛け算と割り算はプログラム上ではそれぞれ記号が異なるので注意してください。(今回は割愛します)

最後に、計算結果をセルに入力する処理を記載してプログラムは完成となります。

 '計算結果をセルに記入
Cells(5, 2).Value = calcResult

完成したプログラムをExcel上で呼び出せるようにする

ここまでで計算を行うプログラムは完成しましたが、このままではまだExcel上から処理を行えないため、ここからはExcel上からプログラムを呼び出して処理を行えるようにする手順を紹介します。

まず、Excel上で「開発」タブ→「挿入」を押下してください。すると色々な図形が出てくるので、その中から「フォームコントロール」の長方形の図形(一番左上にあると思います)を選択します。

※VBAで指定したセルの箇所をわかりやすくするため、A列にそれぞれの値を記入しています

長方形を選択すると、カーソルが+状になると思うので、ワークシート上の適当な場所を選択します。
選択すると、マクロ登録ウインドウが出てくるので、こちらで先程作成した「足し引き処理」を選択します。

選択後、OKを押下すると「ボタン」と表示された長方形が生成されます。
こちらの長方形をクリックすると、「足し引き処理」に記述した処理が順次実施されます。
試しに、12+5の処理を実施してみます。B2セルに12、B3セルに5、B4セルに”+”を入力後、「ボタン」を押下してみます。
無事に計算結果である17が出力されました。

今度は、6-9を実施してみます。正常に動作すれば、-3になるはずです。
ちゃんと-3になりましたね。これで計算が正しく行われていることは確認できました。

最後に、想定しない入力が行われた場合にメッセージを表示させてくれるかを確認します。
数値1に”あいうえお”と入力してOKを押してみます。
ちゃんとメッセージも表示されていますね。これで入力エラーになる心配はなさそうです。

 

今回は、VBAの基礎を解説しました。かなり簡単なプログラムでしたが、もう少し複雑なプログラムを組むと、「シートの入力内容を別シートに書き移す」などの処理も自動化できるので、もしよろしければ是非VBAについて詳しく調べてみてください。

PHPにおけるシングルトンについて

はじめに

PHPのコードを色々触っている時に、シングルトンなるものに出会ったのでまとめます!

今回のシングルトンというものは、デザインパターンの一つです。
そのために、まずはデザインパターンについて、軽く紹介させていただきます!

デザインパターンとは

過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。引用元(Wikipedia)

プログラミングには、この場合はこの書き方が正解。というようなものがいくつかあります。そう言ったものをデザインパターンと呼びます。
その中の一つがシングルトンパターンです。

シングルトンパターンとは

とあるクラスのインスタンスを2つ以上作成できないようにし、どのクラスからアクセスしても同じインスタンスを参照されることを保証します。

1つしか作成できないように強制するような機能というような感じです。

設計者が「1箇所以外から呼び出したくない!」と考えていても、別の箇所から呼び出し可能であれば、設計者の意図をくみ取れないビギナーズが遠慮なく複数生成することがありますよね?(私がその中の1人です…汗)

この複数生成を防ぐためにあるのが、シングルトンです。

通常であれば、複数のインスタンスを作成することができるが、インスタンス作成を1つのみにしたい場合に使用します。

Q:いくつもインスタンスを作成したくない場合ってどんな状況?

設定管理

アプリケーションの設定情報を保持するクラスは、通常は一つのインスタンスだけで十分です。
設定情報はアプリケーション全体で共有されるため、複数のインスタンスを持つと各データの一貫性が失われる可能性があります。

データベース接続

データベース接続は、リソースを多く消費して、複数の接続を開くとパフォーマンスが低下する可能性があります。
シングルトンを使うことで、アプリケーション全体で一つのデータベース接続を共有し、リソースの使用を効率化できます。

ロギング

ログを記録するクラスは、アプリケーション全体で一つだけあれば充分です。
シングルトンを使用すると、ログの記録に一貫性が保たれ、パフォーマンスの問題を避けることができます。

ハードウェアインターフェースの管理

ハードウェアリソース(プリンターなど)へのアクセスを管理する場合、シングルトンは一つのインスタンスを通じてリソースを共有し、競合することを防ぎます。

キャッシュ

データキャッシュやオブジェクトキャッシュのようなリソースは、アプリケーション内で一貫性と効率を保つために、通常は単一のインスタンスで管理されます。

複数のインスタンスが存在すると、データの整合性の問題や無駄なリソースの使用、パフォーマンスの低下などさまざまな問題が発生します。
シングルトンは、これらの問題を解決する効果的な方法です。
ですが、使用する際にはその影響範囲と制約を理解して適切に利用できるよう意識することが大事です。

【Laravelでcronを実装してみた!】

今回は、特定の処理を決まった時間に定期的に実行したいと思い。
Laravelのcron機能を実装してみたので、その備忘録も兼ねて、まとめていきたいと思います。
(Laravelのscheduleクラスを利用しております。)
https://readouble.com/laravel/10.x/ja/scheduling.html
※今回のLaravel バージョンは10です。

目次
――――――――――――――――――――――――――――
① 「cron」とは
② 基礎
③ 発展
④ まとめ
――――――――――――――――――――――――――――

①『cron』とは
cronとは、「定期的にタスクを自動実行するための機能」です。
「クーロン」と読みます。cronを利用すると時間を指定して、あらかじめ決まった時間にタスクを実行してくれます。

以下、「cron」の使用例です。
例)毎分ごとに特定のディレクトリを参照し、ファイルを読み込みたい。
例)日付が変わるタイミングで特定の処理をしたい。
例)毎月初めにステータスをリセットしたい。

②基礎
[1]まずは実行するプログラムを作成します。
・Laravelのコマンドでファイルを作成します。
php artisan make:command SendEmails

上記のコマンドにより、Commandsディレクトリにファイルが作成されます。
project
├─ app
│ ├─ Console
│ │ ├─ Commands
│ │ │ └─ SeendEmails
│ │ ├─ Kernel.php

[2]つぎにファイルを追記していきます。
・「$signature」変数にコマンド名を格納します。
例)protected $signature = ‘command:sendEmails’;

・「$description」変数に処理の内容を格納します。
例)protected $description = ‘メールを配信する。’;

・「handle()」メソッド内に処理を記載します。
例)public function handle() {

{
ここにしたい事を書く。
※今回は割愛します。
}

以上の手順にて、実行するプログラム(コマンド)を作成することができます。

③発展
基礎にてコマンドを作成したので、発展では定期的に実行できるようにタスクスケジュールをしていきましょう。

[1] Kernelファイルにスケジュールを記載する。
・ConsoleフォルダにあるKernel.phpファイルに追記します。
project
├─ app
│ ├─ Console
│ ├─ Commands
│ │ └─ SeendEmails
│ ├─ Kernel.php

・Kernal.phpの$commandsに追記する。
例)protected $commands = [
\App\Console\Commands\SendEmails::class,
];

・Kernal.phpのschedule()メソッドにてスケジュールを指定できる。
例)protected function schedule(Schedule $schedule)
{
$schedule->command(‘command:sendEmails’)->everyTenMinutes();
}

以上の設定にて、10分ごとにsendEmailsコマンドを実行するように設定することができます。

[2] スケジュールの種類

メソッド 説明
cron('* * * * *');
カスタムcronスケジュールでタスクを実行
everySecond();
毎秒タスク実行
everyTwoSeconds();
2秒毎にタスク実行
everyFiveSeconds();
5秒毎にタスク実行
everyTenSeconds();
10秒ごとにタスク実行
everyFifteenSeconds();
15秒毎にタスク実行
everyTwentySeconds();
20秒ごとにタスク実行
everyThirtySeconds();
30秒ごとにタスク実行
everyMinute();
毎分タスク実行
everyTwoMinutes();
2分毎にタスク実行
everyThreeMinutes();
3分毎にタスク実行
everyFourMinutes();
4分毎にタスク実行
everyFiveMinutes();
5分毎にタスク実行
everyTenMinutes();
10分毎にタスク実行
everyFifteenMinutes();
15分毎にタスク実行
everyThirtyMinutes();
30分毎にタスク実行
hourly();
毎時タスク実行
hourlyAt(17);
1時間ごと、毎時17分にタスク実行
everyOddHour($minutes = 0);
奇数時間ごとにタスク実行
everyTwoHours($minutes = 0);
2時間毎にタスク実行
everyThreeHours($minutes = 0);
3時間毎にタスク実行
everyFourHours($minutes = 0);
4時間毎にタスク実行
everySixHours($minutes = 0);
6時間毎にタスク実行
daily();
毎日深夜12時に実行
dailyAt('13:00');
毎日13:00に実行
twiceDaily(1, 13);
毎日1:00と13:00に実行
twiceDailyAt(1, 13, 15);
毎日1:15と13:15に実行
weekly();
毎週日曜日の00:00にタスク実行
weeklyOn(1, '8:00');
毎週月曜日の8:00に実行
monthly();
毎月1日の00:00にタスク実行
monthlyOn(4, '15:00');
毎月4日の15:00に実行
twiceMonthly(1, 16, '13:00');
毎月1日と16日の13:00にタスク実行
lastDayOfMonth('15:00');
毎月最終日の15:00に実行
quarterly();
四半期の初日の00:00にタスク実行
quarterlyOn(4, '14:00');
四半期の4日の14:00に実行
yearly();
毎年1月1日の00:00にタスク実行
yearlyOn(6, 1, '17:00');
毎年6月1日の17:00にタスク実行
timezone('America/New_York');
タスクのタイムゾーンを設定

④まとめ
このようにLaravelでは、スケジュール機能にてcron機能を実装することができます。
とても便利な機能なので、ぜひ使用してみてはいかがでしょうか。

年末年始休業のお知らせ

平素は格別のご高配を賜り、誠にありがとうございます。
株式会社エイブリッジでは誠に勝手ながら、年末年始休業日を下記のとおりとさせていただきます。

【年末年始休業日】
2023年12月29日(金)~2024年1月4日(木)
※2024年1月5日(金)より、通常営業を開始致します。
※休暇中のお問い合わせにつきましては、2024年1月5日(金)以降に対応させていただきます。

ご不便をおかけいたしますが、何卒ご了承いただきますようお願い申し上げます。

PANTONE COLOR OF THE YEAR 2024はPeach Fuzz(ピーチファズ)

PANTONEからカラーオブザイヤー2024が発表されました。
PANTONE COLOR OF THE YEAR 2024

2024年のトレンドカラーは「PANTONE 13-1023 Peach Fuzz(ピーチファズ)」。
ピンクに近い彩度が低めのオレンジ色ですね。
この数年間は彩度の低い、いわゆる「くすみカラー」が選ばれています。

PANTONEのCOLOR OF THE YEAR、Peach Fuzz 13-1023 は、自分自身と他人を育てたいという私たちの願望を表現しています。ビロードのような優しいピーチトーンで、すべてを包み込むスピリットが心、体、魂を豊かにします。
親密さとつながりに対する私たちの生来の憧れを反映する色合いを求めて、私たちは暖かさとモダンなエレガンスを備えた色を選びました。思いやりの心に共鳴し、触覚的な抱擁を提供し、若さと時代を超越したものを簡単に橋渡しする色合い。

カラーデータ

HEX #FFBE98
sRGB 255, 190, 152
LAB 83.16, 22.40, 30.15

Photoshopのカラーピッカーではこんな感じです。

PANTONE CONNECT

Peach Fuzzを元にしたカラーパレットやシェードも用意されています。
PANTONE CONNECT(要会員登録)

Webシステムにて印刷のプレビュー画面を表示させ方法について

今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる事があったのでその備忘録としてまとめたいと思います。

目次
――――――――――――――――――――――――――――
① 開発環境
② 実装方法
③ まとめ
――――――――――――――――――――――――――――

①開発環境
※今回の機能は特段、開発環境に依存は無い為、簡潔に記載いたします。
・Laravel
・JQuery
・Bootstrap

 

②実装方法
・まずはお好みで画像を用意します。

<canvas id="canvas" class="test_image"></canvas>

・次は以下の2つのJavaScriptを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

・次にボタンとスクリプトを設置します。
【button】

<a id="print" class="btn btn-default"></a>印刷

【javascript】

$('#print').on('click', (e) =&gt; {
html2canvas($('#modal_plot .modal-body')[0], {scale: 3}).then(canvas =&gt; {
var myImage = canvas.toDataURL("image/png");
printJS(myImage, 'image');
});
});

 

③まとめ
・今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる方法についてまとめてみました。
公開されているJavaScriptのライブラリを使用すると様々なことを実装することができます。
今後も色々と調べていきたいですね。

Flutter 3について

弊社ではアプリケーションの開発にFlutterを使用することが多くなってきています。

現在(2023/11/20段階)では、Flutterの最新のStable環境は3.16.0になっており
今回はFlutter 3で追加された機能の一部抜粋して紹介します。

  • 開発環境ではWindows7/8が非推奨に
  • 折りたたみスマホに対応
  • AndroidのGradleバージョンのアップデート
  • パフォーマンスの向上(主に描画周り)
  • Material 3のサポート
  • Apple’s App Tracking Transparency要求の対応

詳細に関しては以下のサイトをご確認ください。https://docs.flutter.dev/release/whats-new

所感ですが、Flutterの開発環境は徐々に安定・向上してきているので
今後も長期で使い続けれるのではないかと期待しております。

unreal engine4

Unreal engineとは

Unreal Engineは1998年にEPICgamesより開発されたゲームエンジンで、ゲームエンジンとは共通して用いられる主要な処理を代行しこうりつし効率化するソフトウェアの総称です。

ゲームエンジンではあるが、アニメーションや映画作成、VR空間の作成など幅広い分野で使われている。

現在、Unreal engineはunreal engine5まで出ていますが、推奨スペック(ソフトを快適に動かすための性能)が高いためunreal engine4の4.27を使用します。

  • 今回使用するバージョンの最小スペックは

OS Windows 10 64-bit

プロセッサ Quad-core Intel Intel または AMD2.5 GHz またはそれ以上のプロセッサ

メモリ 8 GB RAM

ダウンロード

  • Unreal Engineのダウンロードをする前に、EPIC games launcherを公式サイトよりインストールします。
  • https://www.epicgames.com/site/ja/home
  • Launcherのインストール終了後、アカウントを作成またはログインし、Unreal Engineにアクセスします。
  • ログインしたらUnreal Engineタブに移動しバージョンを選択、インストール ボタンをクリックするとダウンロードが始まります。

画面の名称

作成

  • 今回は色を付けてみたいと思います。
  • Unreal engineを起動すると​右の画面になるので、ゲームを選択しプロジェクトを開くを押します。

プロジェクト設定

  • プロジェクトを開いたらテンプレートを選択という画面にうつります。今回はサードパーソンを選択します。
  • プロジェクト設定の方では、スターターコンテンツを有りにすると、様々なコンテンツを使うことができるため、あり有りにすることをおすすめします。

画面

  • 設定を終えロードが終わるとつぎ次の画面になります。
  • 今回はボールに色を付けていくので、右側のmodeのなかからスフィアをドラッグアンドドロップで画面内に配置します。

色を付ける

  • Unreal engineで色を付けるときはmaterialを選択します。
  • ContentBrowserと呼ばれる下の​
  • materialを開くと次の画面になります。
  • 色を付ける際必要となる操作が、ベースカラー、メタリック、スペキュラ、ラフネスの4つとなります。
  • ベースカラーを変える際のノードを呼び出すためには、キーボードの3キーを押しながら左クリックを押し、他の3つのノードは1キーを押しながら左クリック押します。
  • 右上の保存ボタンを押した後view画面に戻り、スフィアに作成したマテリアルをドラッグアンドドロップします。
  • するとスフィアに色が付きま

まとめ

今回はunreal engineを使った色の変更を行いました。unreal engineを使う上での基本操作となりますので是非覚えてください。現在unreal engineは様々な分野で使われていますが、ノーコードでゲームを作れるということで趣味で作成している人も多いエンジンです。これを機に自身でゲームを作ってみるのはいかかでしょうか。今回はこれで以上となります。次回の更新をお楽しみに

Chrome拡張機能について

Chrome拡張機能とは

Chrome拡張機能(Chrome Extension)とは、Chromeブラウザに機能を追加することができるアドオンツールであり、Chromeウェブストアで様々な機能を検索してインストールすることができます。

また、自分自身でコーディングしてパッケージ化されていない拡張機能を作成することもできます。現場では、自作した拡張機能を使ってwebページの見た目を変更し、操作してはいけないページのデザインテーマの変更などを行っていました。

そこで今回は現場でも使われている「ページの見た目変更」を行える拡張機能をabridgeのホームページで再現し、ページが読み込まれた際にページの見た目と内容を少し変更する拡張機能を作成していきたいと思います。

用意するもの

拡張機能を作成するにあたって以下を準備します。

1,Chromeブラウザ
2,拡張機能を作成するためのフォルダ
3,コーディングするためのエディター(今回はVisual Studio Codeを使用)

実際に作成していく

1,まず初めに用意したフォルダをVisual Studio Codeで開き、「manifest.json」というファイルを作成し以下のように編集します。

manifest_version:マニフェストのバージョンを表しており、3と記述する。

name:拡張機能の名前を付けることができる。

version:作成する拡張機能のバージョンであり、任意のバージョンを付けることができる。

description:拡張機能の説明文を記載することができる

icons:  拡張機能のアイコンを設定することができる

content script:表示しているWebページの詳細を読み取ったりDOM操作を行ったりする今回は「matches」指定したURLを持つサイトに対して「js」で操作を行う。

2,次にmanifest.jsonファイルと同じディレクトリ内にabridge.jsを作成し、以下のように編集します。

こちらはfooterを持つ要素のバックグラウンドカラーを色コード#FF0000に、top_aboutを親要素に持つ要素のテキストを挨拶に変更するコードになっています。

今回は、文言の変更と一部背景色の変更を行うためにページフッターの背景色と一部文言を変更する機能を実装していきます。

拡張機能をインストールする

編集が完了した作成した拡張機能をChromeにインストールします。

Chromeを開いたら、ユーザーアイコンの右隣にある3点マークをクリックし「拡張機能→拡張機能を管理」を開きます。次に、ストアに公開されていない拡張機能を使用できるようにするために、右上のスイッチでデベロッパーモードをオンにします。

最後に以下の2通りのどちらかの操作を完了することで作成した拡張機能を使用することができます。

1,「パッケージ化されていない拡張機能を読み込む」をクリックし、拡張機能のファイルが入ったフォルダを選択する。

2,拡張機能のファイルが入ったフォルダをドラッグアンドドロップする。

拡張機能画面でこのようになれば拡張機能のインストール完了です。

拡張機能が実際に動くのか確認する

それでは実際に拡張機能が動いているのか見ていきたいと思います。はじめは拡張機能をオフにした状態でabridgeのホームページを開いていきます。するとこのような表示になっているはずです。

次に拡張機能をオンにした状態でもう一度abridgeのホームページを読み込んでいきます。すると以下のように表示が切り替わっているはずです。


最後に

このように、拡張機能を使うことで簡単にwebページの見た目を変更することができます。実際の現場ではwebアプリの改修などを行う際に本番環境と間違えてしまわないよう見た目を変えることに使われることがあります。また今回作成した拡張機能は指定のURLが読み込まれる度にスクリプトが働きページの表示内容を変更しているため、拡張機能をオフにしない限り私のPCでabridgeのホームページはこのような表示になります。

今回は拡張機能を自作しChromeにインストールしていきましたが、ストアには数多くの便利な拡張機能が公開されているので時間があるときに探してみてはいかがでしょうか。

今回は以上となります、次回の更新をお楽しみに。