フレクトのクラウドblog re:newal

http://blog.flect.co.jp/cloud/からさらに引っ越しています

Amazon Chime SDK新機能を使ってホワイトボードを実装した件

こんにちは。研究開発室の岡田です。

前回は、Amazon Chime SDKのVirtual背景の作り方についてご紹介しました。

cloud.flect.co.jp

今回も引き続きAmazon Chime SDKのお話をしたいと思います。

さて、先日AmazonAmazon Chime SDKの新機能追加を発表したのをご存知でしょうか。

Amazon Chime SDK がリアルタイムシグナリング用のデータメッセージを追加

本機能は、Amazon Chimeで使われているデータ通信路を間借りすることで、会議の参加者間でデータメッセージのやり取りを可能にする機能です。 発表にも書かれているとおり、これにより例えば会議室参加者間でホワイトボードを共有したり、絵文字のやり取りを簡単に行えたりします。 また、活用の仕方によっては、参加者のミュートを強制するなど会議室の状態制御を行うことも可能になります。

ということで今回は、早速この機能を使ってホワイトボードを作ってみましたのでご紹介したいと思います。

今回作ったホワイトボードの挙動はこんな感じです。

f:id:Wok:20200529102321g:plain

続きを読む

Measure the distance with Eye-Tracking on ARKit

研究開発室の馮 志聖(マイク)です。

Introduction

Maybe you know, there are the rumor Apple provide the new device called 'Apple Glass'.

japanese.engadget.com

Such next generation devices are becoming more and more realistic.

With these devices, must we use the finger to touch the screen??

Never. We can use the eyes to point it.

It will become cool thing.

I made an experimental application that uses eye tracking to determine distance.

It could be implemented in Apple Glass.

Fortuitously Apple ios release the ARKit 2.

It can detect the face, eye and tongue.

This time I will use eye tracking.

Let the fantasy thing become the real.

I will use Twilio and ARKit for demo the application.

First I will talk about which technology Apple use for Eye-Tracking.

続きを読む

Amazon Chime SDKとBodyPixでビデオ会議システムにバーチャル背景を実装した話。

こんにちは。研究開発室の岡田です。

前回は、Amazon Chime SDKについてご紹介しました。

cloud.flect.co.jp

今回は、引き続きAmazon Chime SDKに関連して、自分でVirtual背景を作る方法をご紹介します。

Virtual背景とは、背景を他の画像に置き換える機能のことで、主に相手に自分の部屋を見せたくないなーというときに使うものです。 世の中のビデオ会議ソフトでZoomやMS Teamsは Virtual背景をサポートしていますが、Amazon ChimeやAgora.io、Twillioなどでは提供されていないようです。

今回は、なければ作ればいいの精神で、Amazon Chime SDKを用いたビデオ会議システムでVirtual背景を自分で作ってみようと思います。 なお、Twillioでも以下で説明するやり方でできるはずです。ドキュメントを読む限りは。(未検証)

作成したVirtual背景の動きとしては、こんな感じです。

f:id:Wok:20200519183656g:plain

続きを読む

New iPad Pro with LiDAR max distance

技術開発室の馮 志聖(マイク)です。

Introduction

I work in some project and it use New iPad Pro with LiDAR.

I try to find out the LiDAR sensor max distance.

But I can not find out any information about this.

So I try to do some experimental test.

Visual SLAM

ios ARkit is base on this.

It will create a map for AR.

And base on Localization & Mapping.

How Visual SLAM work?

IMU (Inertial Measurement Unit、慣性計測装置) with Camera.

LiDAR SLAM

What is LiDAR (Light Detection and Ranging)?

LiDAR is depth sensor.

It can detect depth data.

How LiDAR SLAM work?

IMU (Inertial Measurement Unit、慣性計測装置) + LiDAR + Camera.

issue

Brightness

For this case I will test it in morning and night.

And use application to detect the value of brightness.

続きを読む

Amazon Chime SDKのデモを動かしてみた件

こちらに Amazon Chime SDK React Component Library を使ってデモを動かした記事も書きました。是非ご覧ください。

こんにちは。研究開発室の岡田です。

前回はマルチバーコードスキャナのご紹介をしました。

cloud.flect.co.jp

今回は、だいぶ話が変わりますが、現在弊社で注目しているAmazonのビデオ会議システム「Amazon Chime」のSDKについてご紹介させてください。

さて、昨今、コロナ禍のためZoomやTeamsといったビデオ会議サービスが注目を集めています。 AWSも数年前からAmazon Chimeというビデオ会議サービスを提供しているのはご存知でしょうか?

aws.amazon.com

Amazon Chimeの特徴については、公式ページやこのページなどに纏められていますので、ここでは詳しく述べませんが、 画面共有や録音など他のビデオ会議サービスでも提供されている一般的な機能はもちろん、電話番号への発信、電話番号への SMS メッセージの送信といったこともできるようです。

我々クラウドインテグレータの視点からすると、AWSが提供しているサービスであること、そしてSDKが提供されているという点で、AWS上に構築したシステムにビデオ会議を統合しやすく、大変便利だと思っています。 弊社でもAmazon Chime SDKを用いたシステムを提案、構築しておりますので、今回は宣伝も兼ねて、Amazon Chime SDKを用いてどのようなことができるのかを、公式のAmazon SDKのデモを動かしてご紹介します。

続きを読む

wasmでマルチバーコードスキャナを高速化した件

こんにちは。研究開発室の岡田です。(所属変わりました。)

前回は、TeamsやZoomで自分をアニメ絵にする方法をご紹介しました。

cloud.flect.co.jp

業務から少し離れていましたがキャッチーな内容なので結構評判が良かったみたいです。 今回は、FLECTの業務に関連する内容をご紹介したいと思います。

FLECTは、ユーザ体験の向上を重視したサービス、プロダクトの提案をさせていただいています。 その中で重要な考え方の一つとして、「特別なソフトウェアをインストールせずに利用できるサービスを提供する」があります。 具体的にはスマートフォンのブラウザ上で動くソフトウェアを開発し、提供することになります。

一方で、一般的に、ブラウザ上で動くソフトウェアはネイティブアプリと比較すると応答性能が劣化する、という問題があります。 応答性能の劣化は直接ユーザ体験にも影響しますので、場合によってはブラウザ上で動かすことによるメリットよりデメリットが勝ってしまうことも考えられます。 このような問題を回避する手段として、ブラウザ上で動くソフトウェアを高速化するWebAssembly(wasm)という技術*1を使うことがあります。

今回は、FLECTが開発しているスマートフォンのブラウザ上で動くマルチバーコードスキャナをwasmを用いて高速化した話をご紹介します。

結果、こんな感じで結構高速で動くようになりました。

f:id:Wok:20200501062054g:plain

*1:仕様と言われたり、言語と言われたりもします。ここが詳しい

続きを読む

GitHubでJacocoのカバレッジレポートを表示するまで(CircleCI+Codecov+gradle)

こんにちは。クラウドインテグレーション事業部の上原です。

研究開発系の先端的な内容が多いFLECTブログですが、
今回は開発の方面から、ちょっとしたTipsを共有してみようと思います。

対象アプリケーション

今回の記事で取り扱うのは、Spring Boot製のバックエンドAPIアプリケーションです。

CIツールにはCircleCIを採用し、GitHubへのpushをトリガーにテスト(JUnit)およびビルド・デプロイを自動実行しています。

circleci.com

「レビューのときにカバレッジが見たい」

CircleCIを導入するにあたり、とりあえず自動テストの実行と、テスト結果をGitHubのプルリクエスト画面に連携する所までを設定。
しかし、コードカバレッジについてはHTMLレポートを出力して保存するタスクを作っただけでした。

.circleci/config.yml

      - run:
          # カバレッジレポートの生成
          name: Generate coverage report
          command: ./gradlew jacocoTestReport
          when: always
      - run:
          # HTMLレポートを移動
          name: Save coverage report
          command: |
            mkdir -p ~/test-results/jacoco/
            find . -type f -regex ".*/build/reports/jacoco/test/.*xml" -exec cp {} ~/test-results/jacoco/ \;
            cp -r ./build/reports/jacoco/test/html ~/test-results/jacoco/html
          when: always
      - store_artifacts:
          # アーティファクトとして保存
          path: ~/test-results/jacoco


f:id:flect-uehara:20200420113416p:plain
実行結果画面のARTIFACTSタグから、レポートを見に行けます

最初はこれで問題なかったのですが、開発が進むにつれ、毎回CircleCIの画面に遷移してレポートを開いて該当部分のカバレッジを探して…というのが手間になってきました。

できればカバレッジもプルリクエスト画面で見えるようにしたいな…欲を言えば、修正分の差分が測定できたり、カバレッジが不十分だったらマージできないようにできたらいいな…
でもそんな都合の良いサービスなんて…………ありました。

CodecovというWebサービスです。

codecov.io

GitHub連携でプルリクエストにカバレッジレポートを表示可。差分測定に対応。UIやグラフも綺麗。いいですね!


f:id:flect-uehara:20200420112248p:plain

利用方法もとても簡単。

  1. Githubアカウントでユーザ登録
  2. Codecovの管理画面からリポジトリを選択GitHub組織の管理者がインテグレーションを許可する必要があります)
  3. アップロードトークンが払い出されるので、設定ファイル(codecov.yml)を作成してトークンを書き込む。(※ 環境変数でも可)
  4. GitHubにpushすると自動でCodecovにカバレッジ情報がアップロードされ、レポートが見えるようになる

あとはCircleCIとCodecovを連携して、自動テストのタイミングでカバレッジを収集するよう設定すればOK!
連携方法は公式のドキュメントとブログに記載されています。

circleci.comGenerating Code Coverage Metrics - CircleCI circleci.comMaking code coverage easy to see with the Codecov CircleCI orb - CircleCI






f:id:flect-uehara:20200420025325p:plain

英語やん…(2020年4月現在)



そう、CodeCovやCircleCIの一部ドキュメントは英語。いろいろ探したのですが、この件に関する日本語の記事は見つかりませんでした。
また、検索の腕が悪いのか「CircleCI+Codecov+Jacoco+gradle」のピンポイントな情報も見つからず…

ということで、英語と格闘して試行錯誤しながら何とか動かせるところまで持っていきました。というのがメインのお話です。

本題(設定ファイル)

結論から言うと、設定ファイルは以下のようになりました。
(注:重要なところだけ抜き出しているので、これだけだと動きません)

build.gradle

apply plugin: 'jacoco'

jacoco {
    toolVersion = '0.8.4'
}

jacocoTestReport {
    reports {
        xml.enabled = true
    }
}

.circleci/config.yaml

orbs:
  codecov: codecov/codecov@1.0.5

jobs:
  run-junit-test:
    steps:
      - (テストの実行などのstep)
      - run:
          # カバレッジレポートの生成
          name: Generate coverage report
          command: ./gradlew jacocoTestReport
          when: always
      - codecov/upload:
          # Orb
          file: ./build/reports/jacoco/test/jacocoTestReport.xml
          when: always

必要な設定は以下の通りです。

  • CircleCIの環境変数に「CODECOV_TOKEN」を追加し、値にアップロードトークンを設定しておく
  • build.gradleの設定で、JaCoCoがXMLレポートを出力するように設定する
  • CircleCIの設定ファイルで、CodeCovのOrb(CircleCIにおけるサードパーティライブラリ的なもの)を読み込ませる
  • CircleCIのstepでレポート出力を実行する
  • CircleCIのstepで、XMLファイルのパスを指定してOrbの「upload」コマンドを実行する

どのファイルをアップロードすればよいのか?認証方法の設定は?など色々ハマったところはあったのですが、まとめるとこんな感じです。
Slackへの通知についても色々調べたのですが、GitHubからの通知に差分等が出てくるようになったので、結局使っていません。

f:id:flect-uehara:20200420111549p:plain
GitHubからのSlack通知に表示されるようになりました

なお、合格とするカバレッジ閾値などは設定ファイルで細かく制御可能です。
細かい設定を追いきれていないので詳しくはCodeCovのドキュメントをご覧ください。

CodeCovのOrbのドキュメントはこちら。

https://circleci.com/orbs/registry/orb/codecov/codecov

おわりに

カバレッジをひと目で確認できるようになり、レビューが格段にやりやすくなりました。開発のスピードや品質を確保するには、仕組み作りが必要不可欠ですね。
CircleCIは機能がとても豊富なので、あとは設定ファイルの例がもっと増えてくれると嬉しいです… (あとOrbの説明ページにも設定ファイルの記述例を…どうか………)

ここからテストの並列実行に取り組んだ話などもあるのですが、それは別の記事でお話できればと思います。 少しでもお役に立てたなら幸いです。それでは!