カテゴリー: ＩＴ

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

RFCについて

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

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

■ローカル部

RFC 6531（2012年）

■ドメイン部

RFC 6531（2012年）、RFC 6532（2012年）

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

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

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

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

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

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

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

■VRChat

■Cluster

■Horizon

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

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

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

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

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

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

MVCとは？

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

各役割

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

MVVMとは？

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

各役割

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

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

MVC

MVVM

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

便利な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、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つに絞り込んだことで、商談数、受注件数の増加、エンジニアのスキル向上、営業スタッフの育成など、多方面に結果が出ていることをお話させていただきました。
ぜひご覧ください。

→発注ラウンジ

PANTONEからカラーオブザイヤー2022が発表されました。
→PANTONE COLOR OF THE YEAR 2022

2022年のトレンドカラーは「PANTONE 17-3938 Very Peri（ベリーペリ）」。
青味が強くて彩度の低い、柔らかい印象の紫色ですね。

カラーデータ

HEX　#6667AB
sRGB　102 103 171
LAB　45.75, 12.21, -36.75

Photoshopのカラーピッカーではこんな感じです。

PANTONE CONNECT

PANTONE CONEECTではAdobe系のカラースウォッチで使えるASEファイルがダウンロードできます。
また、Very Periを元にしたカラーパレットやシェードも用意されています。
→PANTONE CONNECT（要会員登録）

エイブリッジでは、AR、VRのアプリ開発を行っています。
最近ではOcculus Quest2など安価で高性能な端末が販売されるようになってきており、弊社にも開発のご相談をいただくことが多いです。
基本的にはプラットフォームを決めて、アプリを開発することが多いのですが
最近は「メタバース」というワードも流行って来ており、同じコンテンツをさまざまなプラットフォームで見れるようにしたい！という要望も増えております。

そういう時にうってつけのフレームワークが「A-Frame」というものがあります。
A-FrameはHTMLで3Dコンテンツが表示できるようになるフレームワークです。
A-Frameはブラウザで機能するので、iOS、Android、PC、VRデバイス上で動作するのでサーバーとコンテンツさえ用意すればマルチプラットフォームのアプリを開発することができます。

また、ブラウザベースということで品質が落ちるのでは？という懸念があると思いますがそんなことはありません！
VRデバイスでA-Frameで開発したサイトにアクセスすると、他のブラウザベースではない作り込まれたコンテンツと遜色ない体験ができるようになってます。

以下の手順で簡単に自分のHPに組み込むことができます。

を組み込む。

をbodyタグ内に追加する。

——————

以下、簡単に解説させていただきます。

A-Frame用のシーンを定義するタグになります。
このタグ内にコンテンツを書き込むことになります。

ライト用のタグになります。
ライトはコンテンツの見え方に影響してきます。
現実世界の照明と同じです。

上記は、画面中央に表示されているBOXになります。
パラメーターの詳細などは公式サイトのリファレンスを参照してください。
今回は、アニメーションを設定しています。

サンプルを下記URLで公開しています。
https://abridge-co.jp/test/example.blade.php

——————

A-Frame公式サイト
https://aframe.io/

【メディア掲載のお知らせ】
8/7発売の日経産業新聞の最終面（Start Up）にて、「アグリヘルスマネージャー」が掲載されました。
農作業者の体調管理や作業効率化について紹介されています。ぜひご覧ください。

アグリヘルスマネージャーの詳細について