aptpod Tech Blog

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

コンポーネントを活用したアプリケーション群のデザイン

UI/UXデザイン

f:id:aptpod_tech-writer:20200720123718j:plain aptpodデザインチームの高森です。ウェブアプリケーションのデザインをメインにスマートフォンアプリケーションや印刷物のデザインを担当しております。現在aptpodでは、intdashのサービスを利用するための周辺アプリケーションを開発中です。関連するアプリケーションを複数デザインする中で、デザイン共通化に向けた取り組みや、デザインで検討した点をまとめてみました。

続きを読む

SphinxとLuaLaTeXで、日本語PDFマニュアルを作る

ドキュメンティング

f:id:aptpod_tech-writer:20200715105149j:plain

アプトポッドにて、テクニカルライターとして製品マニュアルの制作を担当している篠崎です。

現在弊社では、製品マニュアルの制作に、Sphinxを導入しようとしています。Sphinxは、1つの原稿ファイルからHTML、PDF等を出力できるドキュメントジェネレーターです。この記事では、SphinxにLuaLaTeXを組み合わせて日本語PDFを生成する方法を探ってみました。

  • 背景
  • SphinxでLuaLaTeXを使う設定
    • (A) LuaLaTeXを使用する
    • (B) LaTeXドキュメントクラスとしてltjsbookを使用する
    • (C) Polyglossiaパッケージを読み込まないようにする
    • (D) サンセリフ系フォント、ゴシック系フォントを指定する（AXISフォントを使用するため）
    • (E) デフォルトのフォントをサンセリフ系、ゴシック系に変更する（AXISフォントを使用するため）
  • おわりに、今後に向けて
  • 参考文献
続きを読む

Turtlebot3の実機を使ったSLAMとNavigationをAWS RoboMaker上でやってみた

製品紹介 ROS・ロボット AWS

f:id:aptpod_tech-writer:20200702163024j:plain

研究開発グループの酒井 (@neko_suki)です。

今回は、「Turtlebot3の実機を使ったSLAMとNavigationをAWS RoboMaker上でやってみた」という取り組みについて紹介します。

SLAMは、Simultaneous Localization and Mappingの略で、ロボットによる自己位置推定と地図作成を同時に行うことです。Navigationは、指定した目的地までロボットを移動させることです。

まずは、動画をご覧ください。

www.youtube.com

動画ではAWS RoboMakerのシミュレーションジョブ上で、Turtlebot3のNavigationを行うためのノードを起動します。 そして、シミュレーション上のrvizで目的地を設定します。 そうすると、Turtlebot3が自律走行していることが確認できます。

今回の記事では、この動作をどのように実現したのかをお伝えします。

なお、本内容は、ROS Japan UG #37 オンラインROS勉強会 で発表した内容をベースに執筆しております。 資料は SlideShare にアップロードしてあります。

  • 取り組みのモチベーション
  • 技術的に検討をしたポイント
    • ①インターネット経由でSLAM/Navigationを動かすために必要なROSトピックを調べる
      • SLAM に必要なROSトピックの確認
      • turtlebot3_slam_gmapping がpublish/subscribeしているROSトピックの一覧
      • Navigationに必要なROSトピックの確認
      • Navigationに使用されているROSトピックの一覧
      • 帯域の計測
    • ②AWS RoboMaker上でSLAM/Navigationを動かす。
      • ROS bag再生に対応したシミュレーションアプリケーションを作る
      • ROS bag再生用のシミュレーションジョブの作成
  • まとめ
続きを読む

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

JavaScript React フロントエンド

f:id:aptpod-tetsu:20200626111708p:plain

はじめまして！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の公式ページは本当にドキュメントが豊富なのでめっちゃ勉強になります。本稿では、抽象度の高い＆英語の公式の記載について、なるべく分かりやすくお伝えすることを目的としています。

  • Redux Toolkitを使おう
  • Storeに格納するデータは正規化しよう
  • useSelectorはパフォーマンスを意識しよう
    • 1. useSelectorでオブジェクトを返す時はshallowEqualを併用する
    • 2. useSelectorを用いる時は大きいオブジェクトを一度に返すのではなく、細かく必要な値ごとに用いる
    • 3. 重い処理にはreselectを用いる
  • まとめ
続きを読む

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

JavaScript フロントエンド

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

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

勢いのままに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タグ。シールになっていて貼り付けられる。

続きを読む