本記事はソラコムが提供する「SORACOM公式ブログ」に掲載された「SORACOM Harvest Data の UI を刷新！操作がより直感的に、アクセシビリティも向上」を再編集したものです。
こんにちは。ソラコムでフロントエンドなどを担当しているソフトウェアエンジニアの河野（こうの）です。ソラコム内でのニックネームはakiraです。
今回はSORACOM Harvest Dataのユーザーコンソールページのリニューアルについてご紹介します。
SORACOM Harvest Data のユーザーコンソールページのリニューアル
SORACOM Harvest（以下、Harvest）とは、IoT向けのデータ収集・蓄積サービスです。IoTデータの蓄積にはサーバーやクラウドを別に準備するのが一般的ですが、Harvestを利用するとSORACOMの設定だけでデータ蓄積が開始できるという手軽さから、非常に人気のあるサービスです。
Harvestには温度や湿度、位置情報といったデータ向けにHarvest Dataが、CSVやログのようなファイル向けにHarvest Filesと役割があり、今回はHarvest Dataをリニューアルいたしました。
このエントリでは新しいUIの注目ポイントと、今回の取り組んだウェブアクセシビリティー向上のための取り組みについてご紹介します。
リニューアルの注目ポイント
ソラコムのエンジニアリングチームでは、新規機能の開発やバグ修正の他に、既存機能の見直しや改善も継続的に実施しています。今回のリニューアルにおいても、リリースから時間が経ち、機能が増えるにしたがって複雑になっていたHarvest Dataページに対して、レイアウトや各種UIコンポーネントの見直しを含む改善を実施しました。以下でポイントを絞って何点かご紹介したいと思います。
新しい Harvest Data のページ
Soracom Design Systemを利用した新しいUIデザイン
ソラコムでは、サービス横断で一貫したUX（User Experience）を提供するため、Soracom Design Systemを開発しています。
ユーザーコンソールのほうが歴史が長いため、まだすべてのページでこの共通デザインが適用されているわけではないのですが、徐々に置き換えを進めていっているところです。
今回のHarvest Dataページのリニューアルでも、Soracom Design Systemを全面的に活用すると共に、いくつかのコンポーネントを新しく開発しています。
ページレイアウトの刷新
Harvest Dataページにはこれまでのアップデートにより、以下のような様々な機能が存在しています。
・Harvest Dataのデータ保存期間をデフォルトの40日間からおよそ2年に延長するためのオプション設定
・最新データの自動更新機能
・グラフにおけるデータ系列の表示・非表示の切り替え
・グラフや地図上でのデータポイントをクリックした際に、当該データポイントの詳細情報を表示
・地図上にデータを表示する際の、緯度／経度として用いるデータ系列名のカスタム設定
以前は初期表示時には隠れているタブの中にあったりと、すぐにはわかりにくい状態になっていました。新しいデザインではこれらの機能をより直感的に利用できるよう、配置やデザインを見直しましたので、ぜひ一度触ってみてください。
「直近７日間」等の相対期間の指定ができるように
以前のHarvest Dataページでは、表示するデータの期間を変更する際には、 開始と終了のそれぞれの日時を指定するようなUIになっていました。今回のリニューアルにおいては、より簡単かつ便利に指定できるよう、これまでの指定方法に加えて、「直近7日間」や「全期間」といったよく使う相対期間の指定ができるように改善し、合わせてUIコンポーネントも新しく開発しました。
期間指定コンポーネント
また、これらの期間の選択は、データ表示するリソースの選択などと共にURLにも反映されるようになっています。したがって、「SIM AとSIM Bの直近7日間のデータ」を表示するようなページのリンクを簡単に共有したりブックマークしたりできますので、ぜひご活用ください。
ウェブアクセシビリティー向上の取り組みについて
「世界中のヒトとモノをつなげ共鳴する社会へ」というビジョンをかかげるソラコムでは、すべてのユーザーがSORACOMプラットフォームを快適に利用できるようにするためのウェブアクセシビリティー向上はとても重要な課題です。
現状ではSORACOMユーザーコンソールのすべての部分で高いアクセシビリティーを実現できているわけではないのですが、少しずつ向上させていくための取り組みを始めており、前述したSoracom Design Systemでも、配色などアクセシビリティーに配慮したデザインと機能開発を行なっています。
ここからは、今回の Harvest Dataページのリニューアルに際して実施した取り組みについてご紹介します。
Harvest Dataページにおけるリソースセレクターの実装
ウェブアクセシビリティーには様々な要素や観点がありますが、今回はHarvest Dataページで新しく開発した、データの表示対象となるリソース（SIMなどの通信回線）を選択するための “リソースセレクター” と呼んでいるUIコンポーネントのケースについて説明します。
一般に、こういったユーザー操作を伴うUIコンポーネントにおいてアクセシビリティーを高めるためには、ブラウザーの組み込み機能や、Bootstrap、Materialなどのよく作り込まれたライブラリの機能を使うのが近道です。しかし、サービス固有のデザインや操作性を満たすためには、UIコンポーネントを独自に開発することが必要なケースも多くあります。
このような場合、W3Cが定めるウェブアクセシビリティーに関する仕様であるWAI-ARIAに準拠することで、アクセシビリティーを向上させることが可能です。
今回のHarvest Dataページのリニューアルでは、データを表示するリソースを選択するためのUIコンポーネントである、リソースセレクターを新たに作成するにあたって、WAI-ARIA 1.1で規定されるcomboboxの要求仕様を満たすように実装を行ないました。
アクセシビリティーに配慮したリソースセレクター
このリソースセレクターでは、いわゆるオートコンプリート機能を提供していますが、その際にWAI-ARIAのcomboboxの仕様に沿って実装を行なうことで、ウェブブラウザーや支援技術が機能を認識することができ、支援を必要とするユーザが利用しやすくなっています。
また、仕様にしたがってキーボードによる操作もサポートしていますので、マウスが使えない環境でもお使いいただけます。また、キーボードでの操作を好むギークなユーザーの方にも便利に使っていただけるのではないでしょうか。
Vimiumなどの、キーボード操作を行ないやすくするブラウザー拡張をお使いの方へ：
WAI-ARIA combobox に準拠している、Harvest Dataページのリソースセレクターでは、テキスト入力時に＜ESC＞
さいごに
今回は、新しくなったHarvest Dataページとその中で取り組んだウェブアクセシビリティー向上のための試みについてご紹介しました。
ソラコムでは今後もこういった取り組みを続け、SORACOMプラットフォームをより使いやすく改善していきたいと思います。
また、ソラコムでは一緒にユーザーコンソールのアクセシビリティー向上や、プラットフォームの進化を進めていただける仲間を募集しています。以下のページに、募集職種やオープンハウスのスケジュールを掲載していますので、ぜひチェックいただければと思います。
SORACOM Recruit
株式会社ソラコムの採用サイトです。 世界中のヒトとモノをつなげ共鳴する社会の実現に向けて、共に世界を目指しフルスピードで駆け抜けるメンバーを募集しています。
この連載の記事
-
第466回
デジタル
カメラとAIで楽器演奏シーンを簡単に残す、IoTプロトタイピングの裏側 -
第465回
デジタル
数千を超えるIoT機器を管理！生成AIで設備運用を効率化するhacomonoの挑戦 -
第464回
デジタル
SORACOMのビジネスパートナープログラムに、新たに5社の認定済パートナーが参画、SORACOM Harvest Data で日時データをタイムスタンプとして利用可能に takuyaのほぼ週刊ソラコム 08/31-09/13 -
第463回
デジタル
SORACOM Lagoon 3 の Alert rule の考え方をマスターして、最適な通知を作成 -
第462回
デジタル
LTE USB ドングル UD-USC1 を SORACOM サービスと組み合わせて利用する -
第461回
デジタル
EV充電インフラを保護する5つの方法 -
第460回
デジタル
IoT プロジェクトの課題を解決する、SORACOM サービスの活用事例 -
第459回
デジタル
ATOM Cam 2 専用 LAN アダプターを販売開始、ソラカメのクラウド録画マルチストリーミング再生機能をリリース takuyaのほぼ週刊ソラコム 08/17-08/30 -
第458回
デジタル
IoTで接続された充電ステーションがEVの普及を促進する -
第457回
デジタル
SORACOM Napterがさらに便利に！リモートアクセスの安全性と利便性を両立したWebターミナルのご紹介