画像フォーマットWebPについて

■WebPとは

WebP (ウェッピー)とは、GoogleがWebサイトの表示速度短縮を目的として開発した画像フォーマットです。
圧縮率が高いためページの読み込み速度が向上し、SEO的な効果も期待できます。

2010年9月に提供が開始されましたが、当時は対応するブラウザが少なく、Photoshop等のソフトウェアがwebp形式に対応していなかったため、普及していませんでした。
2022年現在は主要ブラウザに対応し、Photoshop23.2以降でwebp形式が扱えるようになったため、今後は普及が進むと思われます。

https://caniuse.com/?search=WebP

■WebPの特徴

WebPと他の画像形式を比較表にしました。
JPEGより高い圧縮率で、JPEG・PNG・GIFでできる事を網羅しているフォーマットということがわかります。

画像形式 WebP JPEG PNG GIF
圧縮方式 非可逆圧縮
可逆圧縮
非可逆圧縮 可逆圧縮 可逆圧縮
1670万色以上 1670万色以上 256~
1670万色以上
256色
透過 ×
アニメーション × ×

■WebPの圧縮率

WebPはJPEGに比べて、25~30%くらい容量が軽いと言われています。

①JPEG 822kB

②WebP 18.3kB

上の画像は①のJPEGからPhotoshopで②のWebPに変換したものです。
変換時の設定は以下の通りです。

 

 

 

 

 

 

画質0にも関わらず、拡大しても劣化がわからないですね。
←JPEG WebP→

■WebPのメリット

JPEG・PNG・GIFでできる事を網羅しているため、写真ならJPEG、アニメーションならGIFなど、形式をそれぞれに書き出す必要がありません。
画質を下げることなく軽量化できるため、webサイトの表示速度の改善が期待でき、SEO対策のひとつとして有用です。

■WebPのデメリット

デメリットは扱えるソフトウェアが非常に限られていることです。
現在はPhotoshop23.2以降、GIMP2.10.0以降で編集することができます。
そのため、Googleから変換サイトが提供されています。
https://squoosh.app/

まとめ

WebPは画質を保ったまま軽量化することが可能で、サイトの表示速度を上げたり、SEO対策にも効果的です。
昔と比べて、主要なブラウザも対応しているので、利用してみてはいかがでしょうか。

メールアドレスに⽇本語が使える(Laravel)

laravel

WEBシステム開発でメールアドレスの⼊⼒を求めるケースは多々あるが、テストで異常値の確認を⾏っている際、ふとメールアドレス欄に⽇本語を⼊⼒すると通ってしまう事象が発⽣。
調べてみると約10年前から⽇本語(厳密にはUTF-8)が使えるようになっていた模様。

RFCについて

Request For Comments の略で、インターネット技術の標準化を⾏うIETFが発⾏しており、インターネット関連の技術に関する仕様がまとめられている。

メールアドレスの⽇本語(UTF-8)対応

■ローカル部

RFC 6531(2012年)

■ドメイン部

RFC 6531(2012年)RFC 6532(2012年)

Laravelでのメールアドレスバリデーション

Laravelでは標準でメールアドレス⽤のバリデーションが⽤意されています。

rfc: RFCValidation
strict: NoRFCWarningsValidation
dns: DNSCheckValidation
spoof: SpoofCheckValidation
filter: FilterEmailValidation

 
以下のように組み合わせることで必要なバリデーションをかけることが可能。

'email' => 'email:rfc,dns'

https://readouble.com/laravel/8.x/ja/validation.html

システム検証業務

新規派遣求人募集

期間:4月1日~

業務内容:システム検証

時間:9:30~18:00

勤務日:平日

時給:940円

勤務地:沖縄県那覇市

交通費:支給あり

IT業界に特化した派遣求人を取り扱っております。

ホームページよりエントリー可能です。

ソーシャル型VRアプリ・プラットフォームについて


今回の記事では、VRの中でもソーシャル型VRアプリ・プラットフォームについて紹介させていただきます。

SNSはみなさま使われている方も多いと思いますが、今から紹介いただくアプリに関しては、まさしくVRの中でSNSのような繋がりを持つ事ができます。
分かりやすく例えると、「ゲーム + SNS + VR」みたいな形です。

以下は、その中でもメジャーなアプリになります。

■VRChat

■Cluster

■Horizon

上記、3つのアプリの共通の特徴としてはVRの世界上で交流を行うことができます。
また、VRの世界上のコンテンツ(アバター・オブジェクト・ワールド)に対してユーザーからも変更を行う事ができます。

また、私の方でVRChatを半年ほど使ってみた感想を以下に述べさせていただきます。

私はオーキュラスクエストでプレイしました。
VRChatの世界の始まりは、部屋から始まります。
文字通りプレイすると、色々なギミックが配置された部屋にいる状態です。
そこから、鏡をみて自分のアバターの容姿を変更したり、ワープ用のギミックから別の空間に移動したりすることができます。
当初は全く何をすればいいか?どこに行けばいいか?などが分からずひたすらワールドを彷徨ってました。
正直この時は、全く楽しくないと思いつつひたすらワールドを練り歩きました。
 
ネットで情報を探すと、どうやら日本人の方が多いワールドがありそこから直接話しかけてコミュニティ(フレンド)を増やしていくと楽しめるとわかりました。
そこから日本人の方に文字通り話しかけ続けました。チャットではなく本当にアバターにボイスチャットで唐突に話かけます。
話しかけた方がVRChat上級者の方の場合は、初心者の私にとても親切にVRChatについて教えていただきました。
 
コミュニケーションを取れるようになり徐々にVRChatが楽しくなっていきました。
VRChatのメインコンテンツは、コミュニケーションだと感じました。
それ以外の要素に関してはあくまでこのコミュニケーションを発展させるための要素でしかないので、コミュニケーションなしでひたすら歩き続けても楽しくないのは当然でした。

 
今回VRChatでは新しいSNSに触れた時に感動した体験を思い出しました。
私でいうと、「初めてインターネットの掲示板で他のユーザーと交流した」時と「Facebookに登録した時に世界中のユーザーと繋がった」時です。

今後VRChatのようなVRによるコミュニティが主流になるかは分かりませんが、物事の仮想体験という場としては絶対的なものになると思いました。

『MVC』 と『MVVM』の違いについて


今回は、Webサービスやアプリ開発をする時に基礎となってくる、設計思想(ソフトウェアアーキテクチャー)または設計モデルといわれる『MVC』と『MVVM』の違いについて比較しながら解説していきます。
※他にも「MVP」「VIPER」などありますが、今回は上記の2つだけにします。

最初に、それぞれの単語の意味と役割をみていきたいと思います。

MVCとは?

  • 設計手法の1つで、実装を [Model] [View] [Controller] の3つに分けて行うこと
  • 3つの頭文字をとって『MVC』という

各役割

「Model」:データの処理を行い、データの変更をViewに通知する役割
「View」:ModelからのデータをUIへ出力する役割
「Controller」:ViewとModelの橋渡し、データをコントロールする役割

MVVMとは?

  • 設計手法の1つで、実装を「Model」「View」「ViewModel」の3つに分けて行うこと
  • 3つの頭文字をとって『MVVM』という

各役割

「Model」:データの加工、取得、保存などが役割
「View」:ViewModelの情報を使用してUIに表示、ViewModelにアクションを送信
「ViewModel」:ModelからのUIに描画するための情報を変換保持する役割

それぞれのメリット・デメリット

MVC

■メリット
・機能毎に分割されているため,分業して作業を進めやすくなる(開発者の得意な所に集中できる)
・それぞれが独立しているので変更・修正があった場合にその影響を受けにくい
 
■デメリット
・仲介役のControllerの負担が大きくなる

MVVM

■メリット
・Viewに素早くデータを反映することができる
 
■デメリット
・動作の流れが見えづらくなる
・MVCと比べ、分業して作業を進めにくい

 

以上、『MVC』 と『MVVM』の違いについてでした。

PHPのTraitの使い所


今回はPHPでTrait(トレイト)を使う⽅法について解説します。

Traitとは?

まずはじめに、Traitとはどういうものかを公式サイトをもとに説明します。

PHP は、コードを再利⽤するための「トレイト」という仕組みを
実装しています。
トレイトは、PHP のような単⼀継承⾔語でコードを再利⽤するための仕組みのひとつです。 トレイトは、単⼀継承の制約を減らすために作られたもので、 いくつかのメソッド群を異なるクラス階層にある独⽴したクラスで再利⽤できるようにします。 トレイトとクラスを組み合わせた構⽂は複雑さを軽減させてくれ、 多重継承や Mixin に関連するありがちな問題を回避することもできます。
トレイトはクラスと似ていますが、トレイトは単にいくつかの機能をまとめるためだけのものです。 トレイト⾃⾝のインスタンスを作成することはできません。 昔ながらの継承に機能を加えて、振る舞いを⽔平⽅向で構成できるようになります。 つまり、継承しなくてもクラスのメンバーに追加できるようになります。

https://www.php.net/manual/ja/language.oop5.traits.php

機能(メソッド)を再利⽤できるようにまとめる仕組みです。

Traitの書き⽅

■定義⽅法

trait トレイト名 {
  function メソッド名1() {
    // 処理
  }
  function メソッド名2() {
    // 処理
  }
}

■利⽤⽅法

class クラス名 {
  use トレイト名;
}

■Laravelでの利⽤

Laravel内でもTraitは多く利⽤されており、会員登録やログイン周り・通知など、WEBサービスを構築する上でよく使う機能を予めまとめておくことで、コードが煩雑になるのを防ぎ、可読性が向上します。

<?php
namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;

class RegisterController extends Controller
{
  /*
  |--------------------------------------------------------------------------
  | Register Controller
  |--------------------------------------------------------------------------
  |
  | This controller handles the registration of new users as well as their
  | validation and creation. By default this controller uses a trait to
  | provide this functionality without requiring any additional code.
  |
  */
  use RegistersUsers;

... 省略 ...

おすすめcssジェネレーター


便利なcssジェネレーターをご紹介します。
三角形やグラデーションなどの、面倒なコードをさくっと生成してくれる頼もしい味方です。

■三角形「CSS triangle generator」

http://apps.eky.hk/css-triangle-generator/

頂点の向きと幅・高さ・色を設定するだけ。

■グラデーション「CSS Gradient」

https://cssgradient.io/

複雑な多色グラデーションも直感的なインターフェイスで簡単に作成できます。

■吹き出し「吹き出しデザインジェネレーター」

https://generator.web-alpha.info/fukidashi/

細かいところまで設定できる優れもの。

■border-radius「境界角丸作成ツール」

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator

変則的な角丸も作成できます。

■box-shadow「CSS3 Generator」

http://ds-overdesign.com/shadow/box-shadow.html

数値より見た目が重要なシャドウ作成には必須のジェネレーターです。

■アイコン「CSS ICON」

https://cssicon.space/#/icon/

最後はジェネレーターではありませんが、cssのみでアイコンを作成したいときに便利なサイトです。
アイコンを構成する各パーツのコードがひと目でわかるようになっており、勉強になります。


★沖縄にてお仕事説明会開催中★

お仕事お探しの方 説明会を開催しております 

【日時】

平日 午前10時~11時/午後3時~4時 

20~30代で業界への希望されている方

お問い合わせお待ちしております。
https://abridge-co.jp/contact.html

「AR.js」と「ARマーカー」について


エイブリッジでは、AR、VRのアプリ開発を行っています。

今回はWebブラウザ上でARを動かすことができるライブラリ「AR.js」と「ARマーカー」について説明させていただきます。

AR.jsの機能としては、大きく分けて以下3つの事が可能です。

Image Tracking(画像トラッキング)
カメラの映像内にマーカー・もしくが映ると、その情報を元にARコンテンツを表示する事ができる。

Marker Tracking(マーカートラッキング)
カメラの映像内に対象画像が映ると、その情報を元にARコンテンツを表示する事ができる。

Location Based AR(位置情報ベースAR)
スマートフォンの位置情報(GPSをベースに)を元にARコンテンツを表示する事ができる。

上記機能をメインにWebブラウザ上で必要に沿ったARコンテンツを表示することができます。
注意事項としましては関連しているモジュール上、HTTPSのアドレスがあるサーバーにプログラムを配置しないと動作しません。

ライブラリの詳細コードに関しては、以下のURLリンクを参考にしていただければと思います。
https://ar-js-org.github.io/AR.js-Docs/

■■■■■
次にARマーカーの話です。
ARマーカーの良し悪しでユーザーの満足度に大きく左右してきます。

ImageTrackingとMaker Trackingですが、違いとしてはトラッキング(追跡)する対象が違います。

  • ImageTracking=写真やイラストなどの画像をトラッキングする。
  • MarkerTracking=QRコードなどに似た、ルールが決まっているマーカーを元にトラッキングする。

ImageTrackingで使用する画像は、基本的にはなんでも良いのですが画像によってトラッキングの質が変わってきます。

  • トラッキングの質が良い = コンテンツがスムーズに表示され、ユーザーのストレスが低い
  • トラッキングの質が悪い = コンテンツがぐらぐらと表示され、ユーザーのストレスが高い

トラッキングの質をよくするためには、以下の条件をクリアした画像をマーカーに指定する必要があります。

  • 画像の複雑さ
  • 画像の解像度

●画像の複雑さ
画像の複雑さですが、ARでは画像を元に、画像の位置や姿勢(向き)を検出します。
したがって画像の情報量が多ければ多いほど良い画像とされます。
なぜ画像の情報量が多い方がいいかと言うと以下のことからかと思われます。

  • カメラに写っているほかの情報と比較しやすくするため
  • 上下左右などの画像自体の姿勢を推定しやすくするため

●画像の解像度
画像の解像度ですが、「画像の複雑さ」と起因しますがカメラに写った際に情報を取り込みやすくなればなるほど、トラッキングの質が上がるからです。
解像度が低すぎると、カメラの映像から画像を検出できませんし、トラッキングも安定しません。

向いている画像

向いていない画像

OpenCVの公式ページを翻訳されている方のURLがありましたので、参考に添付させていただきます。
http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_feature2d/py_matcher/py_matcher.html#matcher

発注ラウンジにて弊社をご紹介いただきました

システム開発会社の比較・見積もりサイト「発注ナビ」が運営するオウンドメディア「発注ラウンジ」にて、弊社のインタビュー記事が掲載されました。

複数の競合サービス併用から、発注ナビ1つに絞り込んだことで、商談数、受注件数の増加、エンジニアのスキル向上、営業スタッフの育成など、多方面に結果が出ていることをお話させていただきました。
ぜひご覧ください。

発注ラウンジ

年末年始休業のお知らせ

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

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

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