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

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

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

サーバー(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アプリケーションの開発をする際はぜひ使用してみてください!

Inertia.jsについて

Inertia(イナーシャ)とは

今回私がLaravelとVueを使ったWebアプリ作成の学習をしていた際に、Inertia.jsの存在を知った為ご紹介します。

Inertiaは日本時間 2023年1月27日にVersion1.0がリリースされました。クライアントサイドレンダリング、サーバーサイトレンダリングの両方を組み合わせたSPAの作成が可能となった仕組みです。

SPA開発時にはバックエンド側でAPIの開発をしたり、フロントエンドでルーティングを行うなど実装の複雑さがありました。ですが、Inertaを組み込むことにより、APIを構築することもフロントエンドでルーティングを行うこともなくなりSPAを作成できるようになりました。

勘違いされがちですが、Inertia(イナーシャ)はJavaScriptのフレームワークではないようです。

Laravelの開発者であるTaylor OtwellがXにて以下内容をポストしていました。


これはJSONプロトコルの仕様で、バックエンド(Laravelだけではありません!)がReact / Vue / Svelteのフロントエンドに、どのページをどのようなデータでロードするかを通信できるようにするものです。 Inertiaの様々なバックエンドとフロントエンドのライブラリは、基本的にこのプロトコルで動作するためのヘルパーを提供するだけです。 このように理解すれば、Inertiaは「完全なソフトウェア」である。


つまり、サーバーサイドとクライアントをつなぐ接着剤のようなものです。

Inertiaで何が出来るの

Inertiaはページ全体を再読み込みすることなく、一部分のみの切り替えでページ間の移動ができます。かつ、LaravelのBladeを使っているような感覚で、Vue(またはReact)を導入し、SPA開発を行うことができるようです。

Vue Routerなどを使わずにLaravelの機能だけでうまくいくってとても便利ですね。

一部分のみというのは、以下画像のように、ヘッダーとサイドメニューはそのまま。メインとなる中央部分のみ、切り替えることが可能となります。

Inertia Example Image

イメージとしてはSide内にリンクがあるとすれば、リンク押下すると、黄色枠内のみ表示が切り替わります。

ヘッダーとサイドを読み込まない分、高速な処理が可能となっています。

最後に

現在のサポート

現在サポートされているフレームワークは一部のみです。

フロントエンド

  • React
  • Vue
  • Svelte

サーバーサイド

  • Laravel
  • Rails

参考サイト

CMSとCRMの違いについて


今回はCMSとCRMの違いについて紹介しようと思います。
というのも、私がCMSとCRMがどっちがどっちか分からなくなることがあったのでまとめていこうと思いました。

目次
――――――――――――――――――――――――――――
① CMSとは
② CRMとは
③ まとめ
――――――――――――――――――――――――――――

① CMS とは
・「CMS」とは、「Contents Management System:コンテンツ・マネジメント・システム」の略で、簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報(テンプレート)などを一元的に保存・管理するシステムのことです。

② CRM とは
・CRM(Customer Relationship Management)とは「顧客関係管理」と訳され、顧客と良好な関係を構築・維持するための施策、あるいは施策を実現するためのシステムを指します。

③ まとめ
・このようにCMSはWebサイトの更新や管理を効率化するシステムであり、サイト運用を技術面でサポートします。 一方、CRMは顧客情報を一元管理するシステムであり、顧客が求めるWebコンテンツを内容面でサポートします。

以上、CMSとCRMについてまとめてきました。
次回の更新もお楽しみに〜

jQueryでselectboxの選択内容を引き継いでcloneする

jQueryでselectboxをcloneすると、optionのselectedが引き継がれないバグ(?)があります。
これをなんとかしてみました。

■修正前のもの

選択肢を「みかん」から「りんご」に変更してcloneボタンを押しても、cloneしたものは「みかん」のままです。

See the Pen
selectboxの選択内容を保持したままcloneする(できないver.)
by matsu (@pochi__2828)
on CodePen.

■修正したもの

選択肢を「みかん」から「りんご」に変更してcloneボタンを押すと、cloneしたものも「りんご」になっています。

See the Pen
selectboxの選択内容を保持したままcloneする
by matsu (@pochi__2828)
on CodePen.

■解説

クローン元のoption内のselectedの位置を記憶して、クローン先のoption内の同じ位置にselectedを追加することでselectedが引き継ぎできます。
クローンするときはclone(true)にすることで、クローン先のボタンも動作するようにします。

【Laravelの機能についてまとめてみよう】~~~Model編~~~

今回は、【Laravelの機能についてまとめてみよう】第二弾です。
第二弾は….. 『Model』についてです!!

※Laravel バージョンは8をベースにしております。

目次

――――――――――――――――――――――――――――
① Modelとは
② 作成方法
③ 使用方法
④ まとめ
――――――――――――――――――――――――――――

① Model とは

Model(モデル)はデータベースとデータをやりとりするために作成します。
モデルを使うことで、LaravelのORMであるEloquentの機能を使って、データの取得や追加・更新などを行うことができます。

以下のサイトも参考にしてみてください。
↓↓※公式リファレンスを日本語訳しているサイト↓↓
https://readouble.com/laravel/8.x/ja/eloquent.html

② 作成方法

最初にModelクラスの作成からはじめましょう。

直接ファイルを作成することも出来ますが、今回はLaravelの機能『artisan』コマンドを使用して作成していきます。

project
├─ app
│ ┗Models
│   ┗Test.php (※ここにファイルが生成される)
├─ 略(config database public 等)

作成されたファイルを確認します。

【Test.php】

< ?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Test extends Model
{
use HasFactory;
}

※Artisanコンソールについての詳細は以下のサイトをご覧ください。
https://readouble.com/laravel/8.x/ja/artisan.html

③ 使用方法

次に、Laravel(Model)とDBの紐づけを行っていきましょう。

[1] Modelクラスの命名規則
・Modelクラスの名前は紐づけたいテーブルに対して単数形でかくように決められています。

今回はテーブル名がtestsを使用するので、Modelの名前をtestとします。
例)テーブル名が『users』の場合。→Modelは『user』となる。

・決められたModel名以外のテーブルを使用したい場合。
$tableプロパティを作成し、そこで定義する。
例)『samples』テーブルと紐づけたい場合

protected $table ='samples'

[2] データの登録設定
・Laravelでデータを追加するためにcreateメソッドを使用しますが、使うためにはfillableかguardedの設定が必要です。
例)登録可能にしたいカラムを全て記載します。指定されたカラム以外は登録できないようになります。

protected $fillable = [
'name',
'password',
'email',
'tell'
];

④ まとめ
このようにルールに従い、Modelを作成することでEloquentを利用してテーブルを操作することが可能です。

以上、簡単にではありますが大まかなModelについてまとめてきました。
Modelを深堀りするとまだまだまとめきれてないことが多いので
次の機会にもっと深く紹介できればと思います!

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のみでした。。)ので、こちらの手順よりは前述した①の手段のほうが確実といえます。

 

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

アクティビティ図について

【アクティビティ図(Activity Diagram)】

アクティビティ図とは、UML(統一モデリング言語)の一種で「システム実行の流れと条件分岐」を図解したものです。基本設計において、システムやその処理の流れを簡単な図で示すことで、図形の意味や、読み方さえわかれば、処理やシステムに対する理解度が向上します。

あらかじめ構成された要素(ノードだったりオブジェクトだったり)を配置し、それらを矢印でむずびつけることで、開始状態から何らかの終了状態への手順を示すことができます。

構成要素

構成要素として以下が挙げられます。※一部抜粋

初期ノード 記号 初期ノード:スコープ内での開始を意味します。

最終ノード 記号 終了ノード:スコープ内での終了を意味します。

最終制御 記号 最終制御:それまでのアクション(制御)で使用されたトークンをすべて破棄します。

♢ デジションノード/マージノード:条件によるフロー分岐または、複数のフローの合流を意味します。

などなど約15種類以上もの要素で表現可能です。

フローチャートとアクティビティ図の違いは?

ざっくりでいうと、全体的なシステムをアクティビティ図で表し、詳細な流れの部分をフローチャートで表します。

まとめ

もし、アクティビティ図やそのほかのUMLを理解できれば、システムの概要や、処理の詳細などのコードや文面じゃわかりにくい部分も図解することで大まかに理解できたりします。企業の基本設計書だったりにも使用されていたりするので、書き方や読み方など覚えておいても損はないと思い、紹介しました。