ＩＴ – ページ 4 – Abridge-News

2022年2月21日2022年2月18日

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

今回は、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

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

■デメリット
・仲介役のControllerの負担が大きくなる

MVVM

■メリット
・Viewに素早くデータを反映することができる

■デメリット
・動作の流れが見えづらくなる
・MVCと比べ、分業して作業を進めにくい

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

2022年1月11日2022年7月16日

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

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

【日時】

平日午前10時～11時／午後3時～4時　

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

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

2021年12月27日2021年12月27日

「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

2021年12月17日2021年12月17日

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

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

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

→発注ラウンジ

2021年12月13日2021年12月13日

PANTONE COLOR OF THE YEAR 2022が発表されました

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

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

私たちは変革の時代に生きています。PANTONE 17-3938 Very Periは、現在の世界的な時代精神と私たちが経験している移行の象徴です。
私たちが孤立の激しい時期から抜け出すにつれて、私たちの概念と基準は変化し、私たちの物理的生活とデジタル生活は新しい方法で融合しました。
デジタルデザインは、現実の限界を広げ、新しい色の可能性を探求し、創造できるダイナミックな仮想世界への扉を開くのに役立ちます。
ゲームのトレンドに伴い、デジタル空間でのメタバースと芸術コミュニティの人気の高まり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（要会員登録）

2021年10月28日2021年11月1日

A-Frameのご紹介

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

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

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

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

を組み込む。

<a-scene class="inpost" embedded>
<a-entity light="type: directional; color: #EEE; intensity: 1" position="1 1 1"></a-entity>
<a-entity
geometry="primitive: box;"
material="color: #FF0000; roughness: 0.5; metalness: 0.2;"
position="0 1 -5"
rotation="0 0 0"
animation="property: rotation;
from: 0 360 0;
to: 0 0 0;
dir: alternate;
dur: 10000;
loop: true;
easing: easeInOutSine">
</a-entity>

<a-plane position="0 0 -5" rotation="-90 0 0" width="10" height="10" color="#CCCCCC"></a-plane>
<a-sky color="#4444EE"></a-sky>
</a-scene>

をbodyタグ内に追加する。

——————

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

<a-scene class="inpost" embedded>

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

<a-entity light="type: directional; color: #EEE; intensity: 1" position="1 1 1"></a-entity>

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

<a-entity
geometry="primitive: box;"
material="color: #FF0000; roughness: 0.5; metalness: 0.2;"
position="0 1 -5"
rotation="0 0 0"
animation="property: rotation;
from: 0 360 0;
to: 0 0 0;
dir: alternate;
dur: 10000;
loop: true;
easing: easeInOutSine">
</a-entity>

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

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

——————

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

2021年8月20日

学生向けオンラインインターンシップ開催！

=======
24卒以降の就職を考えている方を対象にしたインターンシップ(就業体験)を8月20日にオンラインで実施しました！
このコロナ禍でなかなか就職活動をすることが難しい学生の皆さんのためにオンラインを活用することでIT業界に興味を持って頂きたいという思いで、この度、実施いたしました。
参加者の感想は・・・
Aさん
Bさん
【参加資格】
就職を希望している沖縄県在住の学生の方
【参加費】
無料
【スケジュール】
会社概要(15分)
HTML/CSS/JavaScriptの超基礎(1時間)
ストップウォッチ作成(2時間)
休憩を含めて計4時間
現在でも募集しておりますので、この機会にITの仕事を身近に感じて頂けると、私たちは満足です！
【問い合わせ先】
株式会社エイブリッジ　インターンシップ担当　
it-okinawa@abridge-co.jp
=====

2020年8月7日2020年8月7日

日経産業新聞に掲載されました

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

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

2020年8月4日2021年2月19日

お問合せ多数！遠隔支援ツール「リモートブリッジ」について

昨今、新型コロナウイルスの影響を受けて急速に「遠隔・リモート」の需要が高まりました。

現在弊社には、遠隔支援ツールである「リモートブリッジ」についてのお問い合わせが様々な業種の方からあった為、こちらお知らせにて簡単に説明させていただきたく思います。

■こんなお悩み、ございませんか？

製造業や設備工事など専門的な作業が必要になる場合、技術者が現地へ向かい細かい作業を行うことが多く、時間や移動費などのコストを消費してきました。

しかし、年々技術者の数は減りつつあります。数少ない熟練技術者が作業を行う為に全国を移動したり、新人教育を兼ねて新人技術者を現地へ同伴させて作業方法を見せて学ばせたり、こういったことには様々なコストがかかります。

例えば、熟練技術者の移動による体力・移動時間・交通費、同伴させる新人技術者への教育方法・同伴さえる交通費など。

そんな専門的作業で生じる課題をITソリューションで解決することが出来ます。

■リモートブリッジってなに？

従来であれば、顧客より連絡があった際やメンテナンスの時期に熟練技術者が現地に向かい作業を行っていました。これにより、技術者のスケジュールの調整や様々なコストがかかる課題が発生しましたが、リモートブリッジを使用することで解決します。

リモートブリッジには２つの役目があります。1つ目は現地にて実際に作業を行う作業者、２つ目は自社・本部にて遠隔で支援を行う指示者(管理者)の２つです。

作業者はグラス型のウェアラブル端末を着用し、搭載されたカメラより遠隔で現場の状況を指示者へ送ります。指示者はパソコンの画面越しに作業者より送られた現場の映像を確認し状況を把握します。
作業者と指示者は遠隔で現場の状況を共有し、必要な指示を音声・文字・スタンプで行うことにより、交通費・時間・新人教育などの悩みが解決されます。

■予想される今後の使用方法とは？

昨今ではリモートワークやオンラインでの会議など“遠隔”で行えるものの需要が高まりつつあります。リモートブリッジを使用すれば、全く知識の無い方がメンテナンスを行うことも、引っ越し作業員の取り付け工事も可能です。また、災害現場や工事現場などの現状を把握するためにも現地の方が着用することで迅速な判断が可能となります。

コロナ禍を経験した今、遠隔が求められる機会が増えました。
経験から学ぶ課題は何かを考え、今後も様々なプロダクト開発を行います。

======================

リモートブリッジについてのお問合せ、案件のご相談承ります。
以下のフォームよりお問合せください。
お問合せフォームはこちら

======================

2020年8月4日2020年8月7日

東京都中小企業振興公社様のホームページに掲載されました

東京都中小企業振興公社様が運営されている
生産性向上のためのIoT・AI・ロボットの導入支援事業のホームページにて
弊社サービスのウェアラブル端末を利用した支援ツール
「リモートブリッジ」と「マニュアルアシスト」が掲載されました。
是非ご覧ください。

東京都中小企業振興公社様ホームページ

カテゴリー: ＩＴ

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

MVCとは？

各役割

MVVMとは？

各役割

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

MVC

MVVM

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

■三角形「CSS triangle generator」

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

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

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

■box-shadow「CSS3 Generator」

■アイコン「CSS ICON」