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

f:id:aptpod_tech-writer:20200729165735p:plain

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

開発中もコミュニケーションを取り合うことでお互いの認識齟齬は減らせるのですが、実装着手前にデザイン面で不確定要素が多いほど手戻りの手間(工数)が膨らんでしまいます。

実装着手前にすべての不確定要素を解消することは難しいですが、開発中に議論になりやすいポイントにはいくつかのパターンがありました。それを実装着手前のデザインレビューで確認できるようにチェックリストとしてまとめましたので紹介します。

続きを読む

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

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上でやってみた

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

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

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

ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateContextやデファクトスタンダードとなってきている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を用いる
  • まとめ
続きを読む