aptpod Tech Blog

株式会社アプトポッドのテクノロジーブログです

フロントエンド

デジタルツインと遠隔操作の機能を強化!Visual M2M Data Visualizerの新機能について紹介します

Visual M2Mグループの白金です。 普段は Visual M2M Data Visualizerの製品開発を担当しています。 先日、intdashの新しいバージョンがリリースされ、 建設、物流、自動車開発のDX化の促進を推進するため、以下のROSデータと連携する新機能がVisual M2M Data…

GLSLを使ってWebで3D点群を可視化する

こんにちは。 aptpod Advent Calendar 2023 12月21日を担当するVisual M2Mグループの白金です。 普段は Visual M2M Data Visualizer (以下 Data Visualizer )の製品開発を担当しています。 当製品においてLiDARで計測した3D点群を可視化するための開発をする…

SPA に OAuth 2.0 の認可フローを実装してみた

aptpod Advent Calendar 2022の20日目を担当します、intdash グループ フロントエンドエンジニアの佐藤です。 早速ですが、弊社では認可制御にOAuth 2.0 を採用しています。 tech.aptpod.co.jp ブラウザのアプリケーションでこの認可制御をする際、Express …

VM2Mビジュアルパーツに Googleマップを3Dで表示してみた

aptpod Advent Calendar 2022 6日目の記事を担当する、Visual M2M グループの白金です。 弊社製品の Visual M2M Data Visualizer では、計測データを可視化するための様々なビジュアルパーツを提供しています。 その中の一つに、計測データに含まれる位置情…

Next.js とReact Query でデータを表示したり更新する

こんにちは。intdash グループ フロントエンドエンジニアの佐藤です。 Next.js を使った管理画面を作成するプロジェクトを担当する機会がありました。 管理画面は「頻繁にデータが更新されることがない」、「同時アクセスはあまり起きない」という前提の元に…

WebCodecs による H.264 を再生する Video Player パーツの改善と苦労の軌跡

こんにちは。Visual M2M Data Visualizer の製品開発を担当している白金です。 以前に、「WebCodecs の VideoDecoder を使用してH.264の動画を再生してみた」の記事を紹介させていただきました。 tech.aptpod.co.jp その後、弊社が提供するVisual M2M Data V…

またまた激動過ぎた2021年を振り返る

Aptpod Advent Calendar 2021 24日目の記事です。(土日休みにしているので最終日です) CTOの梶田です。 今年もあっという間でAdvent Calendarなんとか走りきれそうです。始まる前は、集まりがあまりよくなく焦りましたが、ロビー活動!?とかとかでなんとか…

Yup と i18next を使ったスキーマの単体テストを作ってみた

aptpod Advent Calendar 2021の 23 日目を担当する、製品開発グループ intadsh チームの佐藤 (TK)です。 多言語化されたアプリケーションのフォームの開発で Yup を使ったスキーマを作成する機会があり Formik や、React Hook Form などのフォーム用のライブ…

WebCodecs の VideoDecoder を使用して H.264 の動画を再生してみた

はじめに こんにちは。Visual M2M Data Visualizer Team の白金です。 弊社の製品の intdashでは、H.264形式の動画データを収集/計測できます。計測した動画データは、Fragmented MP4 のフォーマットを使用したライブ動画をストリーミング再生したり、計測し…

Visual Parts SDK を使ってフリートマップを作ってみた

こんにちは。Visual M2M Data Visualizer の開発を担当している白金です。 この度、Visual M2M Data Visualizer Ver3.0.0 のアップデートとあわせて 可視化用パーツ「ビジュアルパーツ」を開発するための開発キット(以下「Visual Parts SDK」) をリリースし…

Material UIをベースにしたデザインルール策定のレシピ

aptpod Advent Calendar 2020の23日目を担当しますフロントエンドエンジニアの蔵下です。 弊社Advent Calendarも今年で3年目になりました。立ち上げ当初は参加メンバーも少なく、一人で4記事書くというなかなか体力気力が必要でしたが、昨年から参加メンバー…

2021年に活用していきたいReactの状態管理ライブラリRecoil

aptpodフロントエンドエンジニアの黒川です! aptpod Advent Calender2020の19日目を担当します。 2020年は新型コロナウイルスの世界的流行により全てが一変した年でした。 オリンピックも延期になりましたし、私達の生活様式や働き方、価値観まで変わりまし…

React開発のコンポーネント構成とテストツールの紹介

はじめに こんにちは、aptpodに入社しそろそろ1年になりますWebチームの松本です。 aptpodでは日々フロントエンドエンジニアとしてReact/TypeScriptを用いた、お客様向けアプリケーションのUIを実装しています。 Reactは実は入社してから初めて触ったフレー…

フロントエンドエンジニア目線のデザインチェックリスト

Webチームの蔵下です。先日、弊社デザイナーの高森が公開した記事「コンポーネントを活用したアプリケーション群のデザイン」で紹介したように、aptpodではフロントエンドエンジニアとデザイナーとで、頻繁に議論を重ねながら開発を進めています。 開発中も…

Reduxを用いる時にオススメしたい3つのTips

はじめまして!WEBチームの黒川と申します!昨年7月にaptpodに入りましてもうすぐaptpod歴1年になります! aptpodでは主にフロントエンドエンジニアとしてReact/TypeScriptを用いて、お客様向けアプリケーションのUI部分を実装しております。 ご存じの方も多…

【Web NFC】JavaScriptでNFCタグのデータを読み書きしてみた

Webチームの蔵下です。Chrome 81でWeb NFCが試験的に導入されました! ちょっと変わり種なのでネット上ではあまり話題にならなかったのですが、個人的にはビッグニュースでした。 Web NFCを使うと、下記のTweetのような実在するカードとWebサイトを組み合わ…

360°動画Player開発の実用TIPS集

Webチームの蔵下です。弊社で開発しているintdashには、Media Servicesという動画や音声などのメディアデータを扱うサービスがあります。さまざまなカメラに対応できることもあり、RICOH THETAのような360°カメラで撮影した動画を扱うこともあります。 「全…

Rust+wasmでWebSocket上にバイナリデータ(CBOR)を流してみる

この記事はAptpod Advent Calendar 2019の10日目の記事です。 先端技術調査グループの大久保です。 前回の記事では、WebSocketのechoサーバにアクセスするwasmをRustとGoで作成しました。今回は、echoだけでは物足りないので、意味のあるバイナリデータをサ…

RustとGoでWebAssemblyのファイルサイズを比較する

この記事はAptpod Advent Calendar 2019の3日目の記事です。 先端技術調査グループの大久保です。 最近はWebAssemblyが注目されるようになり、弊社でもWebフロントエンド側での軽量化・高速化に応用できないか検討をしています。 そこで、今回はWebSocketのe…