見やすさと使いやすさを追求。AngularとWijmoで実現したデザイン性・操作性の高いIT資産管理・MDMツール
エムオーテックス株式会社
エムオーテックス株式会社は、サイバーセキュリティに関するプロダクト開発やサービス提供を通じて、企業のIT資産管理、情報漏洩対策、ウイルス対策に加え、総合的なセキュリティ診断やコンサルティングを行い、サイバーセキュリティの課題解決を支援している企業である。同社では、PCやスマホをクラウドで一元管理できるIT資産管理・MDM「LANSCOPE エンドポイントマネージャー クラウド版(以下、エンドポイントマネージャー)」を提供している。今回は、同製品のフロントエンド開発に採用されたメシウスのJavaScriptライブラリ「Wijmo(ウィジモ)」について、同社 開発本部 サービス開発1部の栗田さま、南さまにお話を伺った。
開発案件
- IT資産管理・MDM「LANSCOPE エンドポイントマネージャー クラウド版」
導入した製品
導入前の状況
- 使用していたライブラリではアプリケーションの要件を十分に満たすことができなかった
- 高いカスタマイズ性が求められ、より適切なライブラリに切り替える必要があった
導入の決め手
- アプリケーション要件に応じた柔軟なカスタマイズが可能だった
- JavaScriptフレームワーク「Angular」に対応していた
- 豊富なコントロールを備えており、サービスの将来的なメンテナンスや機能拡張にも対応できると期待できた
導入による効果
- 自前でコーディングする場合と比較して、開発工数を約30%削減できた
- UIの品質と操作性が向上し、ユーザーからの評価が高まった
- ライブラリの豊富なコントロールに加え、オンラインデモや製品ヘルプの充実、サポートサービスの丁寧な対応など、十分な費用対効果が得られた
はじめはスマホ管理機能のみ…ユーザーの声に応えてPC・スマホを一元管理できるように
―はじめに、「LANSCOPE エンドポイントマネージャー クラウド版」がどのようなサービスなのか教えてください。
南さま
弊社はソフトウェア開発ベンダーとして創業し、現在は「LANSCOPE」ブランドのもと、サイバーセキュリティに関するプロダクト開発・サービス提供の事業を展開しております。その中でも「エンドポイントマネージャー」は、累計導入実績10,000社以上を誇り、市場シェア1位※を獲得するなど、多くのお客様から高いご評価をいただいている製品です。
エンドポイントマネージャーは企業や組織内のPC、スマホ、タブレットなどのエンドポイントをクラウド上で一元管理できる製品で、IT資産管理や情報漏洩対策、ウイルス対策など、エンドポイント管理に必要な機能を幅広く備えています。
PCやスマホの操作ログを取得して「どの PC で」「いつ」「どんな操作をしたのか」「どんなアプリケーションを立ち上げたのか」などの利用状況を把握したり、デバイスの紛失や盗難時には位置情報の確認や、遠隔で画面ロックして情報の流出を防ぐ、といったことができます。
- 株式会社テクノ・システム・リサーチ「PC資産・PCセキュリティSaaS市場 メーカーシェア 2023年 ブランド別市場シェア」分野
―どのようなきっかけによってエンドポイントマネージャーの開発が始まったのでしょうか。
栗田さま
エンドポイントマネージャーは、2012年に「LanScope An」という名称でリリースしました。この製品は元々、スマホの業務利用の普及を背景にMDM(モバイルデバイス管理)ツールとして開発したものです。弊社では、PCのIT資産管理ツールとしてオンプレミス型の製品を別途提供しており、PC管理はその製品で、モバイル管理はLanScope Anで、というかたちで用途を分けて提供していたのですが、実際にユーザーの声を伺うと、PCとスマホを別々のツールで管理するのは手間がかかるといったご意見が寄せられました。
そこで、LanScope AnでWindows、macOS、iOS、Androidをクラウド上で一元管理できるよう、順次アップデートを行いました。その後リブランディングを経て、現在は「LANSCOPE エンドポイントマネージャー クラウド版」という名称で提供しており、従業員数十名の小規模企業から1万名以上の大企業まで、幅広いお客様にエンドポイントマネージャーをご利用いただいています。
フルスタックフレームワーク「Angular」+Wijmoでフロントエンドを開発。Angular採用のメリットとは?
―エンドポイントマネージャーにWijmoを導入いただいた理由を教えてください。
南さま
Wijmoを導入する前に別のライブラリを使っていたのですが、アプリケーション要件に応じた細かい指定やカスタマイズをしたい場合に、その製品だと要件を満たせないといったことがありまして…。試しにWijmoを組み込んでみたところ、UIの見た目に大きな差がないうえ、機能要件も満たせることが分かり、Wijmoを採用するに至りました。
―フロントエンド開発にはAngularを採用したと伺っております。JavaScriptフレームワークにはVue.jsやReactなどもありますが、なぜAngularを採用したのでしょうか。
南さま
理由はいくつかありまして、まずTypeScriptが使えるという点です。JavaScriptが動的型付けであるのに対しTypeScriptは静的型付けなので、エラーを未然に防ぎ、安全にコードを書くことができます。
また、Angularはフルスタックなフレームワークなので、フォームやルーター、 HttpClient、状態管理など、フロントエンド開発に必要な機能が揃っている点も魅力的でした。それから、これはAngular独自の機能というわけではないのですが、同じようなデザインや動きを持つUIを部品化して再利用できるので、効率的に開発を進めることができました。
栗田さま
Angularはかなりメジャーなフレームワークなので、半年に1度はメジャーバージョンアップデートされて、しっかりメンテナンスが行われているのも良いですね。将来的にマイナーになってしまう懸念も少ないと思っています。
WijmoがAngularに対応していた点も、Wijmo採用に繋がっていると思います。
専門チームが手がけたUIデザイン。“使いやすい”“見やすい”設計でユーザーから高評価
―エンドポイントマネージャーにWijmoのどのコントロールをご利用いただいているのか教えてください。
南さま
グリッドやチャートなど、やはり一から部品を組んで作るとなるとなかなか工数がかかるので、Wijmoのコントロールはたくさん使わせていただいています。
使用しているコントロール例
- FlexGrid
- FlexChart
- FlexPie
- TreeView
- Popup
- ComboBox
- InputDate
- InputNumber
- InputTime
- MultiSelectなど
例えば、こちらはエンドポイントマネージャーで管理しているデバイスを一覧表示している管理コンソールの画面ですが、ここではFlexGridを使用しています。
また、このように「残業注意のデバイス※1」「デバイスの放置時間※2」「OSのサポートが終了しているデバイス」などの情報をグラフィカルに可視化する画面にはFlexPieを活用していまして、左側の「ネットワーク全体」では、TreeViewを使って部署単位で階層表示を行っています。
- 取得したデバイスの操作ログから、業務時間外に利用されたデバイスを把握し、長時間労働につながる働き方を見える化
- スクリーンセーバーや画面ロックの時間から、放置時間が多いデバイスを把握し、業務時間中の不適切な行動を見える化
このほかにも、InputNumberやInputTime、InputDateなどの入力系コントロール、FlexChart、ComboBoxなど、システム内のいろいろなところにWijmoを使わせていただいています。
―たくさんのコントロールをご活用いただきありがとうございます!UIがシンプルで色味も優しいのでとても見やすいですね。お客様からの反応はいかがですか?
南さま
先ほどご覧いただいたような管理コンソールについては、シンプルで使いやすく、操作性が非常に優れているため、初めてでも操作に迷うことがない、といったお声をいただいています。モノトーンを基調とした色合いや、見やすいフォントなども好評です。また、IT製品・SaaSレビューサイト「ITreview」では、統合運用管理ツール/MDM・EMMツール/IT資産管理ツール/ログ管理システムの4部門でLEADERバッジを獲得※しており、多くのユーザーから高い評価をいただけていることを実感しています。
- 「ITreview」では、ユーザーから投稿されたレビューをもとに、四半期ごとにカテゴリ別で評価の高い製品を表彰している
栗田さま
使いやすいデザイン、操作性には特に力を入れていまして、レイアウトやビジュアルデザインは専門のチームに担当してもらっています。そのチームが作成したデザインイメージを基に開発を行っているので、デザイン面からしっかりと設計されたシステムを構築できています。開発当時から長年UIを製品の強みに据えておりますので、そのあたりが導入実績とユーザーからの評価にしっかり結びついているのかなと感じます。
―UIにこだわりを持った製品にWijmoを組み込んでいただき嬉しい限りです。Wijmoの使い勝手はいかがでしたか?また、Angularとの親和性についても感じたことがあればぜひ教えてください。
南さま
各部品の仕様(プロパティ、メソッド、イベントなど)がドキュメントにまとめられており、Angularでの使い方もサンプルとして用意されていたため、比較的スムーズに組み込めたかと思います。
難点を挙げるとすれば、どのコンポーネントも大まかな組み込みは比較的簡単にできますが、画面の要件やデザインにきっちり合わせるためには少々手を加える必要がありました。例えば、管理コンソールにあるデバイスの利用状況を表すレポートに円グラフを採用していますが、円グラフ自体はFlexPieを利用し、凡例についてはデザインや機能要件に合わせて自前で実装しています。逆に言えば、独自に実装できるほどカスタマイズ性が高いとも考えられます。
Angularとの親和性に関しては、Angularの最新バージョンアップへの対応が非常に早いと感じています。基本的には、検証しながらAngularのLTSバージョンに追随していく方針をとっているため、助かっています。
―オンラインデモやメールのサポートサービスなどはご活用されましたか?
南さま
オンラインデモはサンプルコードとデモを一緒に確認でき、実際にコードを書き換えて動作を確認できるのでよく利用させていただいています。ドキュメントも詳細にまとめられていたので、大変参考になりました。デモやヘルプで解決できない場合や、少し特殊な実装を行いたいときにはサポートサービスに技術的な質問をさせていただいていますが、サンプルコードと共に丁寧な回答をいただけています。
Wijmo導入で約30%の工数削減、豊富なコントロールでさらなる期待
―Wijmoを導入したことによるメリットがあれば教えてください。
南さま
製品開発における実装時には、スクラッチで自前のUIを実現した部分もあるのですが、やはりコーディング量がとても多くて、CSSも一から書く必要があったので工数がかかったなという印象があります。一方で、Wijmoを使えば土台はコンポーネント側で担保されているので、プロパティの値を少し設定するだけで簡単に実装できたりと、工数は削減できていると感じます。
栗田さま
感覚的には、自社で一からコーディングした場合と比べて約30%の工数削減ができていると思います。
現在、FlexGridやFlexChartなどさまざまなコントロールを利用していますが、Wijmoに搭載されている豊富な機能をまだ十分に活用しきれていないなという感じはありますね。エンドポイントマネージャーの今後の機能拡張や将来的な展望を考えると、まだ活用できていない機能に対してもさらに期待が持てると感じています。
―先ほど、サポートサービスもご利用されているとお話しされていました。Wijmoの開発ライセンスには技術サポートなどを含むサブスクリプションサービスが付随していますが、ライセンスコストについてはどうお考えですか?
栗田さま
そうですね、弊社は「特別契約※」という形で契約を結んでいますが、他社のライセンスと比較するとそこまで高価だという感覚はありません。製品の品質も担保されていますし、ドキュメントやサポートにも満足していますので、コストに見合った価値は十分に感じています。
ただ、現在のライセンス契約は、1つの開発ライセンスに対して特定の開発者を紐づける必要があります。弊社では開発を進める中でスポット的にパートナーに支援に入ってもらうことがあって、その際にライセンスを一時的に他の担当者に割り当てたいケースがあるのですが、例えば、Aさんに割り当てたライセンスをBさんに変更したい場合、その切り替えが大変な印象があります。固定された使用者に縛られない、いわば「椅子が常に用意されていて誰でも座れる」というようなライセンスの使い方ができれば、とてもありがたいと感じています。
- アプリケーションを市販、配信、またはサービス提供などの目的で開発・配布する際には、特別な契約が必要になる場合があります
―ご要望いただきありがとうございます。ご認識のとおり、開発ライセンスは特定の開発者に紐づけられる考え方となります。ただし、弊社ではライセンスオプションとして、お客様の開発体制やご要望に応じてライセンスのカスタマイズが可能です。このオプションを契約いただくことで、今より使い勝手の良い仕組みをご提供できるかと思いますので、詳細については後ほど営業担当からご案内させていただきます。
今後の展望とメシウスに期待することとは?
―エンドポイントマネージャーの今後の展望について教えてください。
南さま
ユーザーのニーズに応えていくために機能追加も引き続き行っていきますが、並行して、顧客満足度を向上させるための改善も行っていきます。また、現状は大規模ユーザーの環境下において、管理するデバイスがとても多い場合に性能面などでの課題が多少あるため、そういった環境下でも問題なくご利用いただけるように対応を進めていく予定です。
―最後になりますが、弊社製品に対する要望やご意見などはありますか?
栗田さま
ドキュメントやデモが充実していて全体的にはとても満足しています。ただ、知りたい情報を見つけられずに苦労したことがありました。
具体的には、Angular 8から12にバージョンアップする時ですね。Angular側の仕様変更があって、Angular 8以前ではコンポーネント側でプロパティを定義した順に初期化される仕様でしたが、Angular 9以降ではコンポーネントを使用する側で指定した順序で初期化されるようになりました。実際はWijmoの製品ヘルプで本件に関する情報が公開されていたのですが、当時その情報を認知できておらず、動作検証をしていく中でこの仕様変更に気づき、バージョンアップに少し手間取ってしまいました。
Wijmoの更新履歴のページにアナウンスがあると、こうした仕様変更をキャッチアップしやすくなるので、ぜひお願いしたいものです。
―現在、ヘルプやナレッジベースの情報強化に加え、必要な情報をより探しやすくするための改善を進めておりますので、今後の改善にご期待いただければ幸いです。本日はありがとうございました。本日はありがとうございました。
取材協力:2024年5月
エムオーテックス株式会社
本社所在地 | 〒532-0011 大阪市淀川区西中島5-12-12 エムオーテックス新大阪ビル |
---|---|
設立 | 1990年7月 |
主な事業内容 | サイバーセキュリティに関するプロダクト開発・サービス事業 |
URL | https://www.motex.co.jp/ |
ご紹介した事例内容をPDF形式でご覧いただけます。