<![CDATA[Startialab Dev Blog]]> https://dev.startialab.blog/ Tue, 02 Mar 2021 16:35:29 +0900 Wed, 10 Feb 2021 13:51:39 +0900 CMS Blue Monkey http://blogs.law.harvard.edu/tech/rss <![CDATA[初めまして、やまさんです。]]> https://dev.startialab.blog/selfintro/a113  

挨拶

2020年12月よりスターティアラボ Fukuoka SectionにJoinしました、やまさんと申します。

1994年生まれ、現在27歳。

出身は愛知県。
九州、福岡に来るのは初めてです。

趣味

自転車が好きです。ロード、シクロクロス、マウンテンバイクトライアルなど幅広く楽しんでます。

暖かくなったら自転車で九州を旅しようと計画中です。

経歴

大学・大学院

商学と経営学を学んでいました。大学は地元、大学院は関西で過ごしました。

新卒

出身地の愛知県に戻って、粉専門のプラントエンジニアリング会社に入社。営業と実験などをしていました。

プログラミングスクール

新卒で入ったプラントエンジニアリング会社を退職後、プログラミングスクールにて学習していました。

これから

未経験からの参入なので、学んだこと等をアウトプットしていこうと思います。
よろしくお願いいたします。

]]>
Wed, 10 Feb 2021 13:51:39 +0900
<![CDATA[はじめまして、1月から入社しました「てら」です。]]> https://dev.startialab.blog/selfintro/a115

自己紹介

はじめまして、てらと申します!

2021年1月より、スターティアラボ株式会社の福岡に入社いたしました。

佐賀県唐津市出身、福岡在住31歳です。

IT業界だと11年目ぐらいになりました。

入社前は?

中学生の頃の心理テストでプログラマという職業を知り、

そのままプログラマを目指して福岡の専門学校で学び、Web系がメインの会社に入社し、

SES業界やら経験しこちらに入社しました。

前職では金融系のアプリだったりシステムをメインに担当していたので、

福岡で現在開発しているようなAR技術は初めてで「こんなのつくれるもんなの?」とびっくりすることばかりです。

趣味

このコロナ禍で人とはあんまり行けていないですが、ゲームとカラオケが趣味です(大声出したい)

ビールが好きなのでクラフトビールが出るお店を探していっぱい行ってました。

あとはマラソン大会に出るのが好きで、制限時間長めなフルマラソンか10キロとかの短めマラソンに時々出てます!

 

まったくの別の業界から入社しているので、その中で気づいたこととか

感動したことなど、お伝えできればと思います!

]]>
Tue, 26 Jan 2021 15:35:56 +0900
<![CDATA[A-Frame v1.1.0 から Hit-test と Dom-overlay の実装が入りました]]> https://dev.startialab.blog/WebAR/a114
目次

A-Frame v1.1.0

去年12月になりますが、A-Frameがv1.1.0をリリースしました。
A-Frameも初回リリースから5年が経ち、様々な機能が追加されています。

https://aframe.io/blog/aframe-v1.1.0/

今回v1.1.0では、WebXR関係の機能追加が多く入っています。

A-Frame 1.1.0 is out! Core functionality is more polished and robust than ever. Full support for WebXR AR module and initial and experimental integration for upcoming and exciting WebXR APIs like immersive navigationhand trackingcompositor layers or hit tests

その中でも気になる機能として、hit-test と dom-overlay に注目しています。

WebXR

そもそもWebXRとはという話から。

WebXRはブラウザでAR/VRどちらも利用するための新しいWeb APIです。
あれ?今までできていたのは?と思いますが、今まではWebVR APIという、VRに特化した別のAPIを利用していました。
現在では、WebVR APIはほとんどのブラウザで、サポートから外れています。

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

WebXR Device APIについては以下のサイトがまとまっています。

https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API

A-Frameでの具体的な実装方法は、ドキュメントを参照しましょう。

https://aframe.io/docs/1.1.0/components/webxr.html

WebXR Device API自体がまだDraftなのでAndroid Chromeブラウザでしか動作しません。

Hit-test

現実空間の平面などを認識することができ、その位置に3Dモデルを配置するなど、現実とリンクしたXR体験を行うことができます。
VR空間におけるRaycasterと同様に現実のものとRayがぶつかった箇所を認識できます。

https://immersive-web.github.io/hit-test/

Dom-overlay

A-Frame v1.0.0でもWebXRに対応していましたが、ARモードの場合はDOM表示できませんでした。
それが、v1.1.0でDom-overlayが導入されたことにより、ARモードにもDOM表記できるようになります。

これで、ボタンやSelectorなど、一般的な2D部品を表示して操作することができます。

https://immersive-web.github.io/dom-overlays/


それぞれのA-Frameにおける実装方法はまた別の記事で。

]]>
Fri, 22 Jan 2021 10:24:01 +0900
<![CDATA[アーキテクチャパターン:MVC]]> https://dev.startialab.blog/etc/a82 前書き みなさん! お久しぶりです!
ワンです!

今回はWeb開発の「アーキテクチャパターン:MVC」です!
勉強しましょうか?!

内容

アーキテクチャパターンって?
アーキテクチャパターンとは 「与えられた状況のソフトウェア構造から発生する問題点を解決するため、【一般化】された再利用可能なソリューション」ということです。

様々な方法の中で今回は、「MVCパターン」です!

MVCパターンは 「Model + View + Controller」を合わせた言葉です!

MVCパターンの構造、動作、特徴、長所、短所を話してみます!

1. 構造

スクリーンショット 2020-09-30 14.15.05.png

・Model : アプリケーションで使用されるデータとそのデータを処理する部分です。
・View : ユーザーに表示される UI 部分です。
・Controller : ユーザーの入力(Action)を受け取り、処理する部分です。

2. 動作

 MVC パターンの動作順序は以下のとおりです。

  1) ユーザーのActionはControllerに入ってきます。
  2) ControllerはユーザーのActionを確認してModelをアップデートします。
  3) Controllerは、Modelを表すビューを選択します。
  4) ViewはModelを利用して画面を表示します。

3. 特徴

Controllerは、複数のビューを選択できる1:n構造です。
ControllerはViewを選択するだけで、直接アップデートしません。

4. 長所

シンプルなため、普遍的に多く使われるデザインパターンです。

5. 短所

MVCパターンのデメリットは、ViewとModelの間の依存性が高いということです。
ViewとModelの依存性の高さは、アプリケーションが大きくなるほど複雑になり、メンテナンスを困難にすることがあります。

最後に

みなさんどうですか?
私もよく使ってるWebアーキテクチャパターンです。

みなさんも作ってみたらいかがでしょうか?
では、次「MVPパターン」で会いましょう!]]>
Fri, 15 Jan 2021 10:55:46 +0900
<![CDATA[アーキテクチャパターン:MVP]]> https://dev.startialab.blog/etc/a107 前書き みなさん!
お疲れ様です。

ワンです!
前回の記事に続けて

第二の「アーキテクチャパターン:MVP」を勉強してみましょうか?!

内容

MVPパターンはModel + View + Presenterを合わせた用語です。
ModelとViewはMVCパターンと同じで、Controllerの代わりにPresenterが存在します。

MVPパターンの構造、動作、特徴、長所、短所をみましょう!。

1. 構造

MVP MVPはModel + View + Presenterのことです。
スクリーンショット 2020-09-30 14.14.46.png
・Model : アプリケーションで使用されるデータとそのデータを処理する部分です。
・View : ユーザーに表示される UI 部分です。
・Presenter : Viewから要請された情報にModelを加工してViewに伝える部分です。
Tip) ViewとModelをくっつける接着剤のような役割をします。

2. 動作

 MVP パターンの動作順序は以下のとおりです。

  1) ユーザーのActionはViewを通じて入ってきます。
  2) ViewはデータをPresenterに要請します。
  3) PresenterはModelにデータを要請します。
  4) ModelはPresenterで要求されたデータを返します。
  5) Presenterは、Viewにデータを返します。
  6) Viewは、Presenterが応答したデータを利用して画面を表示します。

3. 特徴

PresenterはViewとModelのインスタンスを持っていて、両方をつなぐ接着剤の役割をします。
PresenterとViewは1:1の関係です。

4. 長所

MVP パターンのメリットは、View と Model の間の依存性がないことです。
MVPパターンはMVCパターンの短所であった、ViewとModelの依存性を解決しました。

5. 短所

MVCパターンの短所であるViewとModelの間の依存性は解決されましたが、
ViewとPresenterの間の依存性が高いという短所があります。
アプリケーションが複雑になればなるほど、ViewとPresenterの間の依存性が強くなります。

最後に

みなさん!
今日も頑張りましたよね!

内容はいかがでしたか?

次は、「アーキテクチャパターン:MVVM」です!
では、また!]]>
Wed, 13 Jan 2021 14:19:55 +0900
<![CDATA[Functionの表現と宣言(2)]]> https://dev.startialab.blog/uncategorized/a110 前書き みなさん!
こんにちは!

では、前回の記事に続けて、勉強しましょうか?

内容

Function表現式の長所

・closureで使用
・callbackで使用

closureはFunctionを実行する前に、そのFunctionに変数を渡したかった時使います。
例を挙げてみます。
```
function exampleFunction(index) {
        return function clickEvent(event)
                // 外にあるexampleFunction()のindexをここでアクセスできます。
                console.log(index); // itemをクリックする時ごと、そのitemのindexを表示
        };
}

var item = document.querySelectorAll('.item');
var x;

for( x = 0; x < item.length; x += 1) {
        item[x].onclick = exampleFunction(x);
}
```
ここで、分かるのはclosureを使ってexampleFunctionの外からindexにアクセスできた点です。

Function表現式は一般的に臨時変数に保存して使ってます。
```
var temp = function() {

};
```
JavascriptのAPIのforEach()を使う時もcallbackを使えます。
```
var exampleArr = [1, 2, 3];
exampleArr.foreach(function () {
        
});
```

最後に

いかがでしたか?

Function表現式が宣言式に比べて、長所が多いですが、
結局、これを理解している上にコードを作成するのが大事だと思います!

でも、自分がコーディングしやすい方法で進めるのがいいんじゃないでしょうか?

では、また!]]>
Tue, 05 Jan 2021 16:39:50 +0900
<![CDATA[Functionの表現と宣言(1)]]> https://dev.startialab.blog/javascript/a109 前書き みなさん!
こんにちは!

ワンです!
今日はFunctionの表現と宣言について勉強しようと思ってます!

勉強のため、ウズウズしてますね!

内容

実は、ここで書いた「表現と宣言」は「表現式と宣言式」の意味です!

Function宣言式 - Function Declarations
一般的にプログラミング言語でのFunctionの宣言と似ています!
```
function exampleFunctiopn() {
        return 'Function Declarations'
}
```

Function表現式 - Function Expressions
緩やかなJavascriptの言語の特徴を活用した宣言方法です!
```
var functionExample = function () {
        return 'Function Expressions'
}
```

Function宣言式と表現式の差

宣言式はホイスティングに影響を受けますが、表現式は影響を受けていません。

宣言式の場合、コードを書いた場所と構わずに、Javascriptの特徴のホイスティングによって
ブラウザからJavscriptを読み込む時、一番上に引き上げられますね。
```
declarations(); // 'Function'
expressions(); // Uncaught TypeError: expressions is not a function

function declarations() {
        return 'Function';
}

var expressions = function () {
        return 'Function';

```

コメントのところが結果です。
実はexpressionsという変数にも、ホイスティングが適用されて、上にいきました。

```
function declarations() {
        return 'Function';
}

var expressions;

declarations(); 
expressions(); 
```
でも、expressionsに付与されたFunctionロジックは呼び出した後に定義されるので、
Functionで認識せずに、変数で認識してます!

最後に

いかがでしょうか?
これで、Functionって書き方がすごいでしょう?

では、次「Functionの表現式の長所」をみましょう!]]>
Mon, 04 Jan 2021 13:42:33 +0900
<![CDATA[はじめまして、「そのび」と申します]]> https://dev.startialab.blog/selfintro/a111 自己紹介

皆様はじめまして、「そのび」と申します。
2020年 11月よりスターティアラボ株式会社福岡セクションにjoinしました。
1994年生まれの現在26歳です。

趣味

ゲームをよくやります。最近ハマったのは「Minecraft」です。
トラップタワーをよく作ってました。

あとは、「League of Legends」をやっています。ブロンズです。

経歴

大学卒業後、地元長崎県で3年間Webプログラマーをやっていました。

記事として書くこと

自分が業務やプライベートで勉強したことをアウトプットしていけたらと思います。]]>
Mon, 21 Dec 2020 11:10:35 +0900
<![CDATA[アーキテクチャパターン:MVVM]]> https://dev.startialab.blog/etc/a108 前書き お疲れ様です。

みなさん
お忙しいところ、私の記事をみていただいて
誠にありがとうございます!

では、「アーキテクチャパターン:MVVM」始めます!

内容

MVVMパターンは、Model + View + View Modelを合わせた言葉です。
ModelとViewは他のパターンと同じです。

MVVMの構造、動作、特徴、長所、短所をみましょうか?!

1. 構造

スクリーンショット 2020-09-30 14.14.56.png
「MVVM」はModel + View + View Modelのことです。

・Model : アプリケーションで使用されるデータとそのデータを処理する部分です。
・View : ユーザーに表示される UI 部分です。
・View Model : Viewを表現するために作られたViewのためのModelです。
Viewを表すためのModelであり、Viewを表すためのデータ処理を行う部分です。

2. 動作

 MVVM パターンの動作順序は以下のとおりです。

  1) ユーザーのActionはViewを通じて入ってきます。
  2) ViewにActionが入ってくると、Commandという表現でView ModelのActionを伝えます。
  3) View ModelはModelにデータを要請します。
  4) ModelはView Modelから要求を受けたデータを返します。
  5) View Modelは、応答したデータを加工して返します。
  6) ViewはView ModelとData Bindingして画面を表示します。

3. 特徴

MVVMパターンはCommandパターンとData Bindingの2つのパターンを使用して作られました。
CommandパターンとData Bindingを利用してViewとView Modelの間の依存性をなくします。
View ModelとViewは1:n関係です。

4. 長所

MVVMパターンは、ViewとModelの間の依存性がありません。
また、CommandパターンとData Bindingを使用してViewとView Modelの間の依存性もなくす
デザインパターンです。
それぞれの部分は独立しているため、モジュール化して開発できます。

5. 短所

MVVMパターンの短所は、View Modelの設計が容易ではないという点です。

最後に

みなさん!
お疲れ様でした!

私から用意したアーキテクチャパターンの話は
ここまでです!

様々なパターンがまだまだ、あるので
いつか、勉強しましょう!

では、また!]]>
Fri, 18 Dec 2020 19:08:59 +0900
<![CDATA[異色の経歴がJOINしたお話【かねりょー】]]> https://dev.startialab.blog/selfintro/a112  ご挨拶




ブログをご覧の皆様、はじめまして!かねりょーと申します!

2020年11月より、スターティアラボ株式会社 クリエイティブエンジニアリンググループ Fukuoka Section にJOINしました。

山口県出身、福岡市在住の32歳です。

エンジニア歴はまだ浅いものの、私なりの気付きをこのブログを通して発信していきます。


 経歴



・山口県で生まれ、高校卒業の18歳まで育つ
・高校では自動車工学を学び、3級整備士の資格を取得
・高校卒業後、愛知県に移住して自動車メーカーの工場で完成車の製造に従事
・産業能率大学の通信制課程に進学し兼業学生となる
・自動車メーカーを退職後、東京に移住して営業職としてECコンサルタントに従事
・ECコンサルタントを通してITリテラシーの重要さを痛感し、Webエンジニアになることを決意
・退職後、福岡に移住して職業訓練を活用しエンジニアとしての一歩を踏み出す
・マッチングアプリ運営会社にて要件定義〜テスト、リリースまで幅広く担当
・2020/11〜 スターティアラボ株式会社入社


 お伝えしたいこと



弊社には開発部門に限らず多様な経歴を持ったメンバーが多くいます。

また、メンバー1人ひとりのキャリア指向や、やる気にしっかり応える企業文化もあります。

これにより、エンジニアとしてだけでなくビジネスマンとしての成長を叶えることもできます。

・エンジニアとしてキャリアを積みたい
・ビジネススキルを上げたい
・デジタルマーケティングを通して社会に貢献したい
etc...

という方はぜひ一度お話しましょう!

スターティアラボ採用情報はこちら

☆実務未経験者の採用実績もあります☆]]>
Thu, 17 Dec 2020 15:20:40 +0900