Chrome拡張機能とは

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

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

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

用意するもの

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

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

実際に作成していく

１,まず初めに用意したフォルダを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にインストールしていきましたが、ストアには数多くの便利な拡張機能が公開されているので時間があるときに探してみてはいかがでしょうか。

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

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

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

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

サーバーの種類について

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

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

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

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

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

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

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

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

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

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の機能だけでうまくいくってとても便利ですね。

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

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

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

最後に

現在のサポート

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

フロントエンド

• React
• Vue
• Svelte

サーバーサイド

• Laravel
• Rails

参考サイト

• Taylor Otwell
• chot Inc.

今回は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すると、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)にすることで、クローン先のボタンも動作するようにします。

当社従業員および過去に当社従業員であった⽅へ

詳細につきましてはこちらをご確認下さい。

MetaHuman Animatorについて

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

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

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

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