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

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

ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateとContextやデファクトスタンダードとなってきているRedux、そして新興のRecoilがあります。
弊社のWEBチームではReduxを採用するケースが多いです。私もReduxについては一通りの知識と経験は持っていたつもりだったのですが、先日担当させていただいたプロジェクトで初めてReduxの設計に取り組んだところ、自分がReduxの思想や勘所について何も理解していなかったという事に気づきました。
そこで、同じくReduxの設計で悩んでいる方に向けて少しばかりのヒントになればと思い、私がReduxについて再勉強をする中で見つけた3つのTipsについて本記事にまとめました！(ただし、私自身が大規模開発の経験がないため、本記事は小〜中規模開発向けの内容になります🙇‍♂️)

※本稿のTipsは、公式のRedux Style Guideにも記載があります。Reduxの公式ページは本当にドキュメントが豊富なのでめっちゃ勉強になります。本稿では、抽象度の高い＆英語の公式の記載について、なるべく分かりやすくお伝えすることを目的としています。

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

Webチームの蔵下です。Chrome 81でWeb NFCが試験的に導入されました！ ちょっと変わり種なのでネット上ではあまり話題にならなかったのですが、個人的にはビッグニュースでした。

Web NFCを使うと、下記のTweetのような実在するカードとWebサイトを組み合わせたゲームなどが実装できます！ すごい！

🏷️ Web NFC reaches a key milestone - it is coming soon!
Check out https://t.co/wC4Sx6Rpu8 pic.twitter.com/MmsIDHGNjy

— Chrome for Developers (@ChromiumDev) 2019年12月17日

勢いのままにWeb NFCを触ってみたので、ソースコードを交えて使い方を紹介します。

Web NFCとは？

Web NFCとは、JavaScriptでWebサイトからNFCタグにデータを読み書きできるAPIです。記事公開時点（2020年6月）ではAndroid Chromeでの対応となっているため、NFC機能が搭載されているAndroidスマートフォンで動作が確認できます。

NFCタグ

NFC（Near Field Communication）とは近接型無線通信方式で、デバイスでNFCタグにタッチするだけでデータの読み書きができます。今回Web NFC確認用に Amazon で購入したNFCタグは、容量が144Byteと小さいですが価格も安く手軽に試せます。

購入したNFCタグ。シールになっていて貼り付けられる。

通信遅延発生時にTurtlebot3を安全に遠隔制御する技術

先進技術調査グループのエンジニアの酒井 (@neko_suki)です。

過去に2回、Turtlebot3の遠隔制御について紹介をしました。

tech.aptpod.co.jp

tech.aptpod.co.jp

今回は、ネットワークの切断やほかの要因によって大幅な通信遅延が発生した際に、Turtlebot3を安全に遠隔制御技術する技術として以下の2点についてご紹介します。

①フェールセーフ機能

②メッセージの遅延への対応

Visual M2M のデザインについて

はじめに

デザイン室 @tetsu です。

弊社aptpod製品 Visual M2M (以下VM2M) について、ありがたいことにお客様から「デザインが良い」とお褒めをいただくことが多いとのことで、デザインについての記事を書いて欲しい。

そんな話で営業チームからおだてられてオファーがありまして、本記事を書かせていただきます。

VM2M初期のコンセプトから現在の形にいたるまで、振り返りながら書いてみようと思います。

「デザインが良い」と言われた時に、ヴィジュアル（全体の雰囲気、カラー、レイアウトなど見た目の印象）のことを言われている方と、使い勝手を含めたシステム全体のことを指して言われている方といらっしゃると思います。

この記事では、主に前者のヴィジュアル面のデザインに寄った形で、UI（ユーザーインターフェース）の設計について書いています。

fastaiで学習に使う関数をApache MXNetで真似してみた

はじめに

先進技術調査グループのせとです。本ブログでは、Apache MXNetを用いてfastaiで実装されている実践的な関数を真似てみた結果を紹介します。この試みのゴールは、完全一致の結果を目指すのではなく同じような傾向を得られるかを目指したものになります。完全一致を目指したいところですが、各フレームワークで用意しているモデルの構造が少し違ったり、各関数の計算方法が異なるので結果が等しくなりませんでした。もちろん、他方に併せて関数を自作すればほとんど一致する結果を得ることができますが実装のコストが高かったため、今回は行いませんでした。

モチベーション

弊社のプロジェクトでAI部分をAmazon SageMaker（以下、SageMaker）を使って実装したい要望がありました。しかし、プロジェクトで利用していたフレームワークはfastaiであるために簡単にSageMaker上で実行できないことがわかりました。この課題を解決するために、はじめは単純な学習を行えば達成できると思っていたのですが、実際にためしたところfastaiで達成した精度を再現できませんでした。このため、ファーストステップとしてfastaiで用いた関数をSageMakerのベースに使われているApache MXNetで真似て精度を再現を行えるかを試みました。