エムスリーテックブログスマートフォン用の表示で見るエムスリーテックブログエムスリー(m3)のエンジニア・開発メンバーによる技術ブログです2019-03-29スプレッドシートライブラリHandsontableの1セルで構造化されたデータを扱うエンジニアリンググループでアンケートを作るためのシステムを開発している岩本です。エムスリーが実施するアンケートでは、薬剤ごとの処方数や患者数などを入力してもらうために、下記のように表形式で数値入力を大量に入力してもらうことが頻発します。10程度の表となることも珍しくありませんし、それが1アンケート中に複数ページでてきます。入力値のバリデーションを定義しますが、全て同一ではなく、少しだけ異なっているため、全て同一の定義とすることもできません。アンケートを作成する人は、このバリデーションの定義をしないといけないのですが、普通のWebシステムのインタフェースだとかなり辛いものがあります。10もの定義をひたすら繰り返すことも現実的ではありません。そこで、スプレッドシートUIライブラリのHandsontableで大量のバリデーション定義を効率化したので、その紹介をします。HandsontableとはHandsontableとはスプレッドシートのJavaScriptライブラリです。GoogleのスプレッドシートのようなものをWebシステム上に実装することができます。Editionで無償で利用できたのですが、バージョン7から有償プランが必要になってしまいました。実現したものまずは下記の動画を参照ください。主な機能として下記を実装しています。個々のセルのバリデーション定義を設定可能バリデーションのコピペが可能。実現した機能をどのように実現したかを紹介します。上記のような設定を行った場合、実際のデータは下記のように定義されています。}Handsontableに入力するデータは下記のように設定します。null]]]各セルのデータはバリデーション定義のIDです。このように構造化されたデータのIDを指定しておけばコピーやペースト処理も通常とあまりかわらずに実行することができます。上記のデータをhandsontableのrendererで表示します。同じデータはユーザが判断できるように、「制限1」「制限2」などといったラベルを表示することによって実際に値を開かなくてもわかるように工夫しています。これはvalidationTypeInQuestionに定義されている数字を利用しています。編集ポップオーバーを開くためのボタンもこのrendererで実現します。「編集」ボタンをクリックするとポップオーバーを表示し、その中で編集操作を行います。ポップオーバーを閉じるタイミングでセルの値を作成したバリデーション定義のIDで更新します。numberValidationRuleId);このときに、同じ設問内に設定されているバリデーション定義を再計算し、validationTypeInQuestionの値も更新しておきます。その他にもコピペの処理などいろいろと細かい点はあるものの大筋の流れは以上です。使用感については、イレギュラーなインタフェースなので直感的に使えるかどうか心配ではありましたが、頻繁に大量のバリデーション設定がされており効率と柔軟性を両立できているようです。一方で実装する観点から見ると、ユーザの操作タイミングでうまく動かない場合もあり実装しづらいです。要素の高さも調整しないといけなかったり、本来実装したいところじゃないUI部分の工数がかかってしまうことも難点でした。スプレッドシートを実装する場合には本当に必要な箇所に限って利用したほうが良さそうです。まとめスプレッドシートのUIはやはり強い入れ子になったデータもIDを参照することで通常のデータと同様に扱える開発は大変。Hiringエムスリーでは自身で手を動かし、技術で医療の課題を解決するエンジニアを募集しています。あけましておめでとうございます。SaaSを比較する際の高速なプロトタイプ作成Tipsエンジニアの冨岡(@jooohn)です。月別アーカイブ注目記事はてなブログをはじめよう!m3techさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。