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について詳しく調べてみてください。

DTOについて

最近、業務で多用したDTOについて、復習の意味も込めて書こうと思います。

DTOとは
Data Transfer Object
といい、データを転送する目的で定義されるクラスのことです。
SpringBootを使用して、Webアプリケーションの開発する際、controllerクラス、serviceクラスを使用しますが、その間のデータやり取り時にDTOを挟むことで、とてもコードをシンプルに書くことができます。
なれるととても便利で、コーディング時も画面から送られてくるデータをきちんと把握できるので、とても楽ですし、データが増えたり減ったりしてもDTO部分をいじるだけでいいのでお勧めです!

SpringBootなどWedアプリケーションの開発をする際はぜひ使用してみてください!

MetaHuman Animatorについて

MetaHuman Animatorについて

UnrealEngineに新機能「MetaHuman Animator」がリリースされました。
MetaHuman Animatorを説明するには、MetaHumanの機能を説明する必要があります。

MetaHumanとは
MetaHumanとは、UnrealEngineの開発元のEpic Gamesから提供されているサービスになります。
名前の通り、高性能な人型のキャラクターモデルを簡単に生成することができます。
生成したモデルは、UnrealEngine内であれば無償で使用可能です。

MetaHuman Animatorとは
MetaHuman Animatorはカメラの映像をもとにフェイシャルキャプチャデータを抽出し
そのデータをMetaHumanで再生することができます。
これだけだと簡単なように聞こえますが、本来はフェイシャルキャプチャのデータを利用するには
高額な機材、専用のライブラリが必要になります。
それを本機能では条件付きではありますが、無償で行うことができます。

ぜひ皆様も使用してみてはいかがでしょうか。

動画の音ズレはどうして発生するの?

iPhoneやAndroidのスマートフォンが普及して以来、スマートフォンのカメラを利用して写真や動画を撮る機会が年々増えてきた人も多いかと思います。
動画を編集する作業をしたことがある人なら、
「スマートフォンで撮影した動画をそのまま再生する分には問題ないけど、複数の動画を一纏めにしようと動画編集すると、なぜか音ズレが起こる」
という経験をしたことがある人も、中にはいるのではないでしょうか?

今回は、このような音ズレが発生する原因と、その解決方法についてご紹介していきます。

前提:フレームレートについて

音ズレの原因を解説する前に、動画とは切っても切り離せない関係の「フレームレート」を紹介します。
フレームレートは、「fps(frames per second)」の略称で使われることがほとんどで、「1秒あたりに表示される画像の枚数」を表したものになります。
そもそも、動画とは「複数の画像を連続で表示させたもの」であるので、このフレームレートが高ければ高いほど、一つの動画で使える画像の枚数が増える(=動画が滑らかに見える)ことになります。
一般的に、テレビやyoutubeなどで目にする動画は30fpsであることがほとんどです。

動画ファイルのフレームレートは2種類存在する

一般的にフレームレートと言っても、「固定フレームレート(CFR)」と「可変フレームレート(VFR)」の2種類が存在することはご存知でしょうか?

固定フレームレート(以降はCFRと表記)は、その名の通り、1秒間に表示される画像の枚数が一定値で固定されているものを指します。CFRの場合、30fpsと指定されている場合、どの区間においても必ず30fpsで動画が作成されます。

一方、可変フレームレート(以降はVFRと表記)は1秒間に表示される画像の枚数が定まっていない動画を指します。
例えば、
「区間Aでは動きが激しい描画が多いから、この区間ではフレームレートを増やして動きを滑らかに見せよう」
「区間Bではほとんど動きがないから、この区間はフレームレートを減らして動画ファイルの容量を削減しよう」
というように、動画の内容に合わせて適切なフレームレートを使い分けてくれるのがVFRの特徴です。

昨今のスマートフォンで撮影された動画は、VFRであることがほとんどです。

動画の音ズレはどうして発生するの?

ここからが本題で、音ズレが発生する原因は、動画のフレームレートがVFR(可変フレームレート)である場合が多いです。
VFR形式の動画は、動画再生ソフトでは音ズレなく再生できているように見えますが、動画編集ソフトなどで読み込みを行うと音ズレが発生してしまいます。
これは、動画編集ソフト側がVFR形式の動画に対応しておらず、無理やりCFR形式として読み込もうとして発生してしまう事象です。

もう少し詳しく解説します。
VFR動画の「画像」と「音声」を、以下のように切り分けたとします。

VFR動画
画像:\-\-\‐\-\‐\ー\-\―\-\-\-\-\-\-\―\-\‐\-\―\-\
音声:\-\-\‐\-\‐\ー\-\―\-\-\-\-\-\-\―\-\‐\-\―\-\

上記のVFR動画で、”\”区切りで記載されている”-“や”ー”が、1フレームの表示時間となります。VFRは可変フレームレートなので、1フレームが長い部分は動きがない部分、逆に短い部分は動きがある部分と捉えていただけたら大丈夫です。

このVFR動画の内容をCFR動画に変換し、1フレームレートでの表示時間をすべて一定化すると以下のようになります。

CFR動画
画像:\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\
音声:\-\-\‐\-\‐\ー\-\―\-\-\-\-\-\-\―\-\‐\-\―\-\

パッと見でもわかるように、画像の表示時間と音声の再生時間に大きな差が出てきていますね。これが音ズレの原因となります。(図で表示するとかなりずれ込んでいるように見えますが、実際にズレてくるのはごくわずかです)
フレームレートはあくまで動画(画像)の表示方法であり、音声には反映されないため、動画編集ソフトを介するとこのような音ズレが起こります。(こんな感じの説明で理解できるでしょうか。。?)
ちなみに、動画再生ソフトのほとんどがVFR形式の動画に対応しているため、音ズレなく再生できます。逆に、動画編集ソフトの大半はVFR形式に非対応のため、VFR形式の動画ファイルは編集に不向きな動画と言えますね。

どうやったらCFRかVFRか分かるの?

基本的に、動画ファイルのプロパティからではCFRかVFRかの判別は不可能です。
撮影した動画がVFRかを判断するには、「MediaInfo」等のファイル解析ソフトを利用する必要があります。

せっかく撮影した動画がVFR形式だった!

これまでに解説した通り、VFR形式の動画だと動画編集で利用するときにかなり不便を感じるかと思います。
では、VFR形式の動画が全部編集で使えないのか?と聞かれるとそんなことはありません。いくつかの対応方法を紹介します。

①事前にVFR形式の動画をCFR形式に変換する
VFR形式の動画を予めCFR形式に変換して動画編集ソフトに読み込ませると、上に挙げたような音ズレはなくなります。
フリーソフトの「Hand Brake」や「AviSynth」などを活用すれば、CFR形式の動画に変換できるので、お手軽に試せる手段でもあります。

②動画編集ソフト側にVFR形式の動画を読み込めるよう設定を行う
フリーの動画編集ソフトである「AviUtl」では、特定のプラグインをインストールすることでVFR形式の動画を読み込むことができるようになります。
ただし、対応しているソフトが極端に少ない(筆者が調べた限り、情報が出たのはAviUtlのみでした。。)ので、こちらの手順よりは前述した①の手段のほうが確実といえます。

 

今回は、「動画の音ズレ」という少しマニアックな問題について解説させていただきました。
皆さんも、動画編集を行う際にはフレームレートの種類に気をつけてください!(筆者は動画編集が終わったあとに完成品を検閲して何度かやらかしてます汗)

企業説明会

企業説明会の様子

2023年6月14日に国際電子ビジネス専門学校(KBC)様で会社説明会を行いました。
今回の会社説明会ではユーマーク株式会社様との合同説明会で15人の参加者に来場していただきました。

*説明会の様子*


GitとGithub

前書き

個人的にGithubについて学習している際に便利と思ったり、感心したりした内容だけを抜粋して書いていきます。

おおまかな概念やどういった利便性があるのかを伝えられたらなと考えています。

Gitとは

Gitとはソフトウェアバージョン管理ツールの一つです。

Gitを使うことで、複数人で開発する時に「誰が、いつ、どのような目的でコードを修正したのか」を残せるというメリットがあります。

例えば「2023/06/12に田中さんが〇〇機能のバグ修正」を行なったとします。

これらの情報を残さない場合、以下のような場合チームメンバー全員に確認する手間と時間が増えるため効率的ではありません。

いつ修正したのか、誰が修正したのか、何のためにソースを修正したのか。

Gitはこういった情報を一括で履歴を保管してくれます。


GitHubとは

バージョン管理ツール「Git」によりチーム開発に適した機能を付け加えたサービスがGitHubです。

プロジェクトのバグ管理に使えるIssuesや、コードレビューを効率化するPull Requestsなどのチーム開発に役立つ機能が、Web上から使えるようになります。

他にもPull Requests時にレビュワーがレビューOKと判断した場合にメインブランチへ修正を結合するといったこともできます。

※メインブランチという言葉が出ましたが、これは後ほど詳しく説明するため「一旦そういうのがあるんだな〜」くらいに考えてください。


GitHub_機能説明

リポジトリとは

作成したファイルやディレクトリの状態を保存・記録しておく 「場所」 のことです。

修正を行う作業場所とイメージすると分かりやすいと思います。

Githubには大きく分類してリモートリポジトリローカルリポジトリの2つの作業場所があります。

リモートリポジトリ

ネット上にあるチームメンバー全員で共有されている作業場所です。

ここにアップされたソースはチームメンバー全員が見ることができ、かつ修正を加えることが可能です。

ローカルリポジトリ

名前の通り自分のPC上にあるチームメンバーに共有されない作業場所です。

自分自身しか使えない作業場所なので、誰にも影響を与えずに修正を行うことが可能です。

ブランチとは

Gitにはブランチという概念があります。

このブランチ機能を上手く活用すると、例えば新規機能開発とバグ修正といった複数の作業を、並行して進められるようになります。

例えばこのようにターミナルで git branchと入力するとmainが表示されます。

これはローカルリポジトリ内のブランチはmainだけありますよという結果を教えてくれています。

「*」が今いるブランチという意味で、今の作業場所はmainだよといった意味になります。

試しに新しく「test01」というブランチの作成を行います。

改めてブランチ一覧を表示してみると以下のようになります。

以下二つのブランチがありますよと結果が返ってきます。

  • main
  • test01

mainブランチが大元として存在している状態で、「バグ修正」を行いたいとなった場合に新しくブランチを作成します。

ブランチ=作業ディレクトリの複製

ただ複製するだけでなく、最終的に複製前のブランチに変更点をマージできます。

mainブランチとは別の作業場所でバグ修正を行い、レビュー、テストまで完了して問題ないと判断されれば大元のmainブランチへマージを行います。

この一連の作業後、mainブランチでも動作に問題ないと判断すればリモートリポジトリへPush(アップロード)し、最終的にはリリースといった流れになります。

ブランチ機能のないバージョン管理システムだと、一度新規機能の実装を始めてしまうと簡単なバグでも修正することが難しくなってしまいます。

新規機能の実装分がコードに反映されているため、バグを修正したとしても中途半端な状態となり、リリースができなくなります。

ヘッダーメニュー

ヘッダーのキャプチャと紐付けながら説明します。

Search or jump to…

検索ボックスです。ぱっと見で分かると思いますが、こちらに何か知りたいキーワードを入力することでキーワードにヒットした内容が表示されます。

例:Githubに公開されているOSSなどの検索が可能です。

Pull Requests

ローカルリポジトリをリモートリポジトリへアップロードするために、レビュワーへレビュー依頼を行う機能です。レビュー依頼を出し、OKが出ればリモートリポジトリのmainブランチへマージされます。

Issues

Issuesはプロジェクトやソースコードの課題を管理するための機能です。

例えばバグが見つかった場合に「〇〇機能_バグ修正」といった内容でIssuesを作成することで、そのIssuesにAssigneesするメンバーや、バグやドキュメント修正などのタグを割り当てることができます。

基本的にはIssues一つに対して1つのブランチが紐づくようにして作業を行なっていきます。

Codespaces

GitHubが提供するクラウドホステッド開発環境のこと(有料)

GitHubのWebサイトから起動することが可能で、ブラウザさえ使えればパソコンからでもタブレットからでも利用でき、WebベースのIDEとして用いることが可能。

公式から引用した有料料金も載せておきます。

Maeketplace

開発者に各種開発ツールを提供するオンラインストアのこと。

一般のユーザや企業などが開発したツールが有料で提供されています。

Explore

超いけてるトレンドのリポジトリの一覧などを確認することができます。

気に入ったものはwatchに追加することで、Issuesが作成されたことを通知してくれたりします。watchはSNSでいうフォローと同じかなと思ってます。

気になるリポジトリを見つけた場合は読んでみるのもいいかもしれませんね。

Github Apps

Githubへの拡張機能のようなものです。GoogleChromeの拡張機能や、VSCodeの拡張機能のGithub版だと思ってください。

今回は個人的に便利だと思った2つを紹介します。

GitHub Apps:Create Issue Branch

issues を作成した際に、リモートブランチ を自動で作成することが可能になる機能です。

ブランチ 名は予め設定した内容になり、一人一人がブランチを作成する手間を削減することができます。

GitHub Apps:Delete merged Branch

Pull Requests が マージ された際に、紐づいている リモートブランチ を自動で削除してくれる機能です。ブランチ が整理されていくので、レポジトリ をシンプルに保つことができます。

ざっくりですが、私が便利だと思った機能の紹介でした。

2023年度新入社員 研修レポート

 こんにちは、4月にエイブリッジに入社しました田場と内間です。無事に新人研修を終えましたので今回は研修内容と感想をお伝えします!

研修で学んだこと

  • 社会人マナー(仕事に取り組む姿勢、社会人としての心得、情報セキュリティ、傾聴力、メール作成、Slack)
  • office研修(PowerPoint、Excel)
  • プログラミング基礎研修(HTML、CSS、Java、JavaScript、
  • spring boot)

研修での感想

田場

 「二ヶ月の研修を終え、私は自分自身が大きく成長していると感じました。私は入社以前IT業界とは全く別の業界におり、ITに関して右も左もわからない状態でした。しかし、専属講師のもとで研修をこなし、また同期や先輩社員の方々にサポートしていただくことで着実にITのスキルや知識を身に付けることができました。
その他にも社会人マナー研修では社会人としての心得や傾聴力を学習し、今後仕事をしていくうえで大切なスキルを身に付けることができました。」

内間

 「研修で難しかったことはプログラミング研修のJavaについてです。私は長い間プログラミングについて学習してきましたが、Javaについては初めて学習しました。Javaはこれまで習ったC言語ととても似ていましたが、記述の方法が多少異なっていたためつられてしまうことが多く、理解するまで時間がかかりました。」

Q&A

Q:社内の雰囲気について

A:内間「明るく気軽に質問できる会社で、質問に対してもしっかり答えていただきました!」

Q:プログラミングを実際に学習して感じたことは?

A:田場「専門用語を1から覚えていかなければならず、また論理的思考力が必要であるため、かなり苦戦しました。しかし、それと同時にプログラムを実際に動かす楽しさも感じることができました!」

Q:今後の目標は何ですか?

A:田場「まずは一人前のエンジニアを目指していこうと考えており、その後ITコンサルタントを目指そうと考えています!」

A:内間「フルスタックエンジニアを目指します。そして 目標達成のため一年に一つの資格取得を目指します。!」
 *フルスタックエンジニアとは、複数のスキルを持ち、マルチに活躍できるエンジニアのこと

意気込み

田場「研修を終えこれから業務に取り組んでいくため、研修で学んだことをしっかりと活かしていきたいです!」

内間「IT業界は常に新しくなり続けているので、日々学習を続け置いていかれず、他者に教えられるようになります!」

 

 

ChatGPTを開発した会社

今や聞いたことがない人の方が、少ない「Chat-GPT」ですが開発元OpenAIの事はご存知でしょうか。
本記事では、OpenAIがどんな所かを簡易に説明できればと思います。

OpenAIについて
OpenAIですが、正式名称 OpenAI Inc.といい2015年にサンフランシスコで設立されました。
設立メンバーには数々の著名人が名を連ねています。
なんと、設立時には合計で10億ドルがOpenAIに提供されました。(日本円だと1000億円ぐらい)

最高責任者について
OpenAIの最高責任者であるサム・アルトマンという方はプログラムーであり起業家・投資家です。OpenAIの設立の際は30歳になります。
サム・アルトマンさんの経歴を簡単に紹介させていただくと19歳の時にスマホアプリの会社立ち上げ・会社を買収->Yコンビネータ社にパートナー契約し・代表に就任という凄い経歴です。

今・今後のOpenAI
その後OpenAI社は2022年11月にChatGPTを発表し、2023年の2月にChatGPT Plusを開始しています。
ChatGPTはGPT-3.5がベースモデルになりますが、最近GPT4が追加されました。

今後ChatGPTがどのように進化していくかは想像もつかないですが公開されて半年ほどで社会現象を起こすコンテンツを開発したOpenAI社がどのような会社になっていくか楽しみです。

Log4jの脆弱性について

「Log4j」とは、Javaベースでシステムやアプリを開発する際によく使われる「API」の一つです。

Log4jはJavaアプリケーションの標準的なロギングライブラリであり、処理スピードの速さや、
その多機能性から、多くの人たちから利用されいます。

機能一部
・Java開発では欠かせないデバック情報、エラー情報を出力できる機能。
・出力先が、コンソール、指定したファイル、ログサーバ等、幅広い。

Log4jの脆弱性
といった風にとても便利なLog4jですが、2021年にとある事件が起こりました。
Log4jに発見された脆弱性「Log4Shell」というものであり。
この脆弱性を利用すれば、任意のコードをリモートで実行する、
RCE(Remote Code Execution:リモートコード実行)が可能です。
原因としては、Log4jの「JNDI Lookup」という機能が問題で、攻撃者が送信した文字列を、
Log4jがログとして記録してしまうと、その文字列に記述された通信先やサーバー内部のファイルからjava classファイルを読み込んでしまい、
実行してしまうというものです。
この「Log4jShell」は容易に悪用できる点や。様々なコードをリモートで実行できる点から、
危険度の高い脆弱性といえ、Apacheソフトウェア財団からも、CVSSレートを最高段階の「10」に指定しています。

CVSSはCommon Vulnerability Scoring Systemの略で、共通脆弱性評価システムと訳されています。
脆弱性の深刻度を0から10までの数値でレーティングしています。数値が大きくなるほど深刻度が高くなり、10は深刻な脆弱性であることを示しています。

回避方法
・Log4jのバージョンをApache Log4j 2.15.0よりあとのバージョンにすることで回避可能です。
  色々な事情によりバージョンアップが難しい場合は、JndiLookupクラスをクラスパスから削除をしてください。

まとめ
便利なソフトやシステムを使っていても、バージョンが古かったりすると、
システムのセキュリティは大幅に落ちてしまいます。
こまめなバージョン確認や、使うシステムの脆弱性について調べることが、とても大切だと思います。