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

サーバーの種類・名称について知ろう

「サーバー」と一口に言っても、その種類・名称は用途によって多岐にわたります。
今回は、複数あるサーバーの種類と名称、各サーバーの用途を、なるべくわかりやすくまとめていきます。

そもそも「サーバー」って何なんじゃい?

サーバー(Server)とは、クライアントからの要求(リクエスト)に応じて、コンテンツを提供するコンピュータのことを指します。
一番身近なコンテンツで言うと、パソコンやスマートフォンでWebブラウザを利用する時に見る「Webページ」が該当します。(Yahooのトップページ、Googleの検索結果を表示するページなど)

サーバーの種類について

サーバーの種類は、私達が実際に手にとって使える「物理サーバー」と、1つの物理サーバー上で複数のOS(Linuxなど)を稼働させることで、”複数のサーバーと見なして”稼働させる「仮想サーバー」の2種類があります。
ザックリと、実物があるのが「物理サーバー」、実物がなくプログラム上で稼働するのが「仮想サーバー」と認識していただければ大丈夫です。

・共用サーバー
物理サーバーに分類されるサーバーで、所謂「レンタルサーバー」と呼ばれるものです。1台のサーバーを複数人で利用するサーバーを指し、一般的に「サーバー」といえばこの共有サーバーを指すことが多いです。
比較的低価格でレンタルでき、OSの設定や保守の手間が掛からないのがメリットです。その反面で複数人で利用するため、カスタマイズ性が少なく、他の利用者の使用状況によってサーバーの処理能力が影響されやすいデメリットもあります。

・専用サーバー
こちらも物理サーバーに分類されるサーバーで、レンタルサーバーです。共有サーバーと違う点として、1台のサーバーを丸々使用できます。
こちらは、サーバーそのものをレンタルしているため、自分の好きなようにカスタマイズでき、他の利用者も居ないため安定した運用ができるのがメリットです。逆に、共用サーバーと違いサーバーを丸々1台レンタルするため料金が高額になりやすく、また、サーバーの保守も自身で行わないといけないため、運用の手間が掛かるのがデメリットとなります。

・VPS
VPS(Virtual Private Server)とは仮想サーバーに分類されるサーバーで、イメージとしては前述の共用サーバー内に専用サーバーを突っ込んだものとなります。
こちらは、共用サーバーと同様に1つのサーバーを複数人で利用しますが、サーバー利用者一人ひとりに個別の環境が仮想上に用意されており、他のサーバー利用者の影響を受けにくいメリットがあります。また、個々人で環境を持っているため、専用サーバーほどではないですがカスタマイズ性があるのもメリットの一つです。

・クラウドサーバー
クラウドサーバーは仮想サーバーに分類されるサーバーで、クラウド上に構築されるサーバーです。これまで紹介したサーバーが”1台のサーバー”で運用するのに対し、クラウドサーバーは”複数台のサーバーで機能を分散”して運用できるのが最大の特徴です。
機能を各サーバーに分散しているため、利用者のニーズに応じてカスタマイズしやすく、利用している機能のみの費用で済みます。
ただし、構築から運用・保守は自身で行わなければならないため、一定のスキルを持つ人向けのサーバーといえます。

サーバーの用途による名称の違い

これまではサーバーの種類についてまとめましたが、サーバーは運用目的によって「〇〇サーバー」というように名称が異なってきます。
次は、各サーバーの名称と用途について軽くご紹介します。

・Webサーバー
Webサーバーはその名の通り、Webページを構築するデータ(HTML、CSSなど)を保有するサーバーを指します。利用者(クライアント)からのリクエストに応じて、Webページを表示するために必要なデータを返します。

・メールサーバー
メールサーバーは、電子メールのやり取りを制御し、各端末での送受信を可能にしているサーバーです。送信と受信でそれぞれサーバーが独立しており、
○送信は「SMTP(Simple Mail Transfer Protocol)」サーバー、
○受信は「IMAP ( Internet Message Access Protocol )・POP(Post Office Protocol)」サーバー
によって管理されています。

・ファイルサーバー
ファイルサーバーとは、ネットワーク上でデータを共有・使用するためのサーバーです。サーバー上にデータを保管する目的というよりは、「各端末間でデータをやり取りする」目的で運用されます。

・データベースサーバー
データベースサーバーは、クライアントからのリクエストに応じて、データベース上に保管されているデータを返却します。DBMS(データベース管理システム)を利用してデータ整理を行います。

・DNSサーバー
DNS(Domain Name System)サーバーとは、利用者のリクエストに応じてIPアドレス(Web上の住所のようなもの)とドメイン(独自のWebサイトの名前のようなもの)を結びつける役割を担うサーバーです。

・アプリケーションサーバー
アプリケーションサーバーは、前述のWebサーバーが担わない動的な機能を担当しています。クライアントからのリクエストに応じて、Javaやphpなどのプログラムを実行して必要なデータを取り出したり、特定の条件に応じた結果をWebサーバーに返却する役割を持っています。

・FTPサーバー
FTP(File Transfer Protocol)サーバーは、クライアント側とWebサーバーとの間で行われる、ファイルの送受信を制御しています。FTPサーバーは、クライアントがコンピュータからサーバーにデータをアップロードしたり、サーバーからデータをダウンロードしたりすることができます。

 

今回は、サーバーの種類・名称とその用途についてまとめてみました。
サーバーを選ぶ際には、使用目的によって慎重に検討する必要がありますので、この記事が皆さんのサーバー選びの助けになればと思います。

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業界は常に新しくなり続けているので、日々学習を続け置いていかれず、他者に教えられるようになります!」

 

 

【UnityとHololens2のエミュレータを連動させてみた】

今回は、唐突にUnityとHololens2のエミュレータを連動させてみたくなったのでその備忘録も兼ねて手順をまとめていきたいと思います。

目次


[1]前提条件(環境等)
[2]手順
[3]まとめ


[1]前提条件(環境等)

前提条件としてWindows OSの使用とします。
また、Hyper-Vの機能が使える事が必須です。(Windows 10 Proのみ)

今回、以下の3つを使用いたします。※インストールします
【Unity・Visual Studio2019・Hololens2エミュレータ】

【Unity】https://unity3d.com/jp/get-unity/download
・現時点での最新のバージョンで尚且つ長期サポート(LTS)の『2021.3.24f1』を使用していきます。

【Visual Studio 2019】https://visualstudio.microsoft.com/ja/downloads/
・無料版の『Community』をダウンロードします。

【Hololens2 Emulator】https://go.microsoft.com/fwlink/?linkid=2220897
・サイト記載時の最新のビルド『10.0.20348.1535』を使用

[2]手順

⓪必要なソフトのインストール!
※今回、各ソフトウェアのインストール手順は省きます。

①初めにPCにHololens2のエミュレータを使用するためにHyper-Vの確認をします。※PCにHyper-Vがないとエラーになります…
1.「windowsの機能の有効化または無効化」を開きます。

2.Hyper-Vを有効にします(有効にした場合、再起動する必要あり。)

②Unityでエミュレータにて起動するアプリのプロジェクトを作成します。
1.Unity Hubを起動し、新規作成ボタンを押下する。

2. バージョン、保管場所、プロジェクト名を適当に決めてプロジェクトを生成します。※テンプレートは『3D』を選んでください。

3.エミュレータとの連携確認用に好きなオブジェクトを設置します。

③.Microsoft.MixedReality.Toolkit(MRTK)をプロジェクト(アセット)に追加
※MRTKをもっていない人は先にダウンロードから!
1.『Assets』⇒『Import Package』⇒『Custom Package』押下。

2.ダウンロードしたMRTKを選択する。
(Microsoft.MixedReality.Toolkit.Unity.Foundation.2.8.3.unitypackage)

3.そのまま、すべてImportします!

4.『Mixed Reality』⇒『Toolkit』⇒『Add to Scene and Configure…』を押下。
※プロジェクト(Scene)にMRTKが追加されます!

④ Unityの書き出し設定
『Build Settings』
・Universal Windows Platform に切り替える。値を画像に合わせる。

『Project Settings』
・【XR Plugin Management】をインストールする。

・【Quality】を画像に合わせる

⑤プロジェクト(Seacne)をビルドする。※事前に別フォルダを作るのをお勧めします!(今回は「Build」フォルダを作成)

⑥ビルドしたプロジェクトをVisual Studio 2019にてエミュレータ環境で実行する。

[3]まとめ

まとめ!大まかな流れとしては以下となります。
⓪必要なソフトをインストール
①前提条件をチェック(Hyper-Vが有効になっているか等)
②Unityプロジェクトを作成、オブジェクト設置。
③UnityプロジェクトにMRTKをインポート
④Unityの書き出し設定を行う。
⑤プロジェクト(Seacne)をビルドする。
⑥ビルドしたプロジェクトをVisual Studio 2019にてエミュレータ環境で実行する。

以上、UnityとHololens2のエミュレータを連動させてみた!でした~