EFOでフォームの途中離脱を防ぐ｜「V2J」検証コントロールの実力は？

みなさん、こんにちは。今回の記事では、2018年10月31日（水）にリリース予定のInputManJS（V2J）に追加された「検証コントロール」について詳しく説明します。以下のブログでは新機能の一覧を紹介していますので、併せてご覧ください！

注目されるEFO（イーエフオー）とは？

申請画面に入力している時にイライラして、会員登録や資料請求、購入申請などを諦めてしまったという経験はありませんか？どんな理由であっても、利用者がWeb画面から離れてしまってはコンバージョンに導くことができず、機会損失になってしまいます。そのため近年では、申請フォームからの離脱を防ぐ施策が注目されており、「快適なエントリーフォームを実現する」という意味でEFO（Entry Form Optimazation）という言葉が使われるようになってきました。

InputManJSを活用して頂くことで、EFOに欠かせない入力コントロールやふりがなの自動入力を少ないコードで実装できます

コントロールと検証タイミングの組み合わせ

次期バージョン（V2J）では、従来のInputManJSコントロールに検証機能を搭載できます。

・テキストコントロール（GcTextBox）
・マスクコントロール（GcMask）
・数値コントロール（GcNumber）
・日付時刻コントロール（GcDateTime）

※V2Jの新機能「コンボコントロール（GcComboBox）」にも検証機能を搭載できます。

また検証タイミングを3種類ご用意しており、入力フォームに最適な設定をお選びいただけます。

1）フォーカスを失った時・・・次のコントロールにカーソルを移動するなど、フォーカスが外れたタイミングで検証を実施
2）入力中（リアルタイム）・・・コントロールに入力している状態で検証を実施
3）手動による検証・・・ボタン押下などコマンドを実行したタイミングで実施

入力フォームへの実装例

次のサンプルはInputManJSのコントロールのみ使用した、よくある入力フォームを想定した画面です。ここではカーソルを移動した（フォーカスを失った）タイミングで検証が行われるように設定しています。 

1) 氏名
値が入力されているかどうか　（rule: ValidateTypeに"Required"を設定）

2) メールアドレス
E-mail形式の文字列（a~z/0~9/@）が入力されているか

3) 電話番号
コントロールでアルファベットが入力できないように設定
(※検証機能は搭載していません)

4) 住所
全角文字が入力されているかどうか

5) 予約人数
1〜10の値が入力されているかどうか（rule: ValidateTypeに”OutOfRange”と入力して、GcNumberコントロールで最小値と最大値を設定）

See the Pen InputManJS_devlog_validation by GrapeCity JS Samples (@spreadjssample) on CodePen.

検証通知のUI

検証を通知する方法として、下記３種類をご用意しています。

1) バルーンチップ通知
エラーの内容を文字で知らせる

2) アイコン通知
検証結果（True/False）をアイコンにより通知する

3) コントロール状態による通知
ボックス枠のカラーにより、検証結果（True/False）を通知する

さらに用意したカスタムアイコンを使用したり、表示位置を変更することも可能です。

いかがでしたでしょうか？今回はInputManJS(V2J)の新機能「検証コントロール」をご紹介しました。弊社Webでも追加機能の一覧を準備していますので、今後の情報にご期待ください！

Flashビューワが次期バージョンで廃止決定。移行先はPDF?それともHTML5?

Flashが2020年末に終了

発表から1年以上経過し、すでにご存じの方も多いと思いますが、アドビシステムズ社は、2020年末にFlash Playerのサポートと配布を終了すると発表しました。

サポート終了後はセキュリティパッチの配布などが行われないので、Flashを使い続けることはセキュリティの観点から見て非常にリスクが高いです。

ActiveReportsのFlashビューワも廃止が決定

これに伴い、ActiveReportsが提供する「Flashビューワ」も次期バージョンで廃止とすることが決定されており、現行のバージョン12.0Jではそれに先駆け、Flashビューワのオプションを非推奨扱いに変更しています。

ActiveReports for .NET 12.0J ユーザーガイド - 変更点
※「ActiveReports for .NET 11.0Jから12.0Jにかけての変更点」 ⇒「Flashビューワ」をご覧ください。

コードからViewerTypeプロパティにFlashViewerを指定した場合、ビルド時に以下のような警告が表示されます。

警告が出ているだけでFlashビューワの利用に支障はありませんが、前述の通り次期バージョンからはFlashビューワは提供されなくなりますし、現行のActiveReportsをそのまま使い続けるにしても、2021年以降はセキュリティのリスクが出てきますので、いずれにせよ移行が必要になってきます。

今回の記事ではFlashビューワの最適な移行先について考えてみたいと思います。

InputManJS V2Jの新機能

2018年10月31日（水）、InputManJSの新バージョン「V2J」のリリースを予定しています。今回はこのリリースに先駆け「V2J」の主な新機能をご紹介したいと思います。

新コントロール

「V2J」では新コントロールの「リストコントロール」や「コンボコントロール」をお使いいただけるようになります。

リストコントロール

「リストコントロール」は、Web上で高度なリスト表示を実現するコントロールです。リストのヘッダーや複数列の表示、テンプレート設定によるリストアイテムの柔軟なレイアウト設定などが可能です。

上図は、同コントロールを用いてInputManJS「V2J」のコントロール一覧を表示した例です。リストのヘッダー表示と複数列の活用によって、このように一覧情報をわかりやすく、かつ詳細に表示することができます。

また以下のように、テンプレート設定を活用することでリストアイテムのレイアウトを自在に設定し、画像表示や多段のアイテム表示を実現することも可能です。

この例では、次のようなリストアイテムのレイアウトをテンプレートで設定しています。

この際、InputManJSのAPIで設定するテンプレートデータはこのようになります。

<div>
  <div><img src="{画像のURL}"></div>
  <div>
    <div>{!コントロール名（英）のデータフィールド名}</div>
    <div>{!コントロール名（日）のデータフィールド名}</div>
  </div>
  <div>
    {!説明のデータフィールド名}
  </div>
</div>

コンボコントロール

「コンボコントロール」を使用すると、HTMLの標準機能では実現できない多機能なコンボボックスを実装することができます。

外観はHTMLタグによるSELECTコントロールに似ていますが、単純なリスト表示やアイテム選択のみに止まらず、スピン機能や入力時の自動フィルタ機能など、多彩な機能を兼ね備えたコントロールとなっています。

また、このドロップダウン部には前述の「リストコントロール」が使用されており、同コントロールと同じように高度なリスト表示が可能となっています。例えば以下ではコンボボックスコントロールのドロップダウンリストで、複数列とテンプレートの設定を行っています。

一層強化された基本機能

新コントロールに加えて、既存のコントロールもより便利にご利用いただけるようになる予定です。

ドロップダウンプラグイン

新機能の「ドロップダウンプラグイン」により、InputManJSのGcTextBoxコントロールやGcMaskコントロールにドロップダウン機能を付加できるようになります。

以下はInputManJSのGcTextBoxコントロールに、弊社製品「Wijmo」収録のFlexGrid（図中太枠部分）をドロップダウンとして組み合わせた例です。

InputManJSのコントロールと、弊社のJavaScript製品やお使いのJavaScriptライブラリを柔軟に組み合わせて、高度な処理を実現するドロップダウンコントロールを作成することが可能です。

検証機能（検証コントロール）

また、InputManJSの各コントロールで検証機能（検証コントロール）が利用できるようになりました。この機能を利用することによって、組み込み機能によるグラフィカルなUI通知付きの入力チェックが可能となります。

検証機能は、検証タイミング（フォーカス移動時/入力中/任意）と検証規則の設定に対応しており、「必須入力」や「範囲外の入力」などの検証規則に加えて独自の検証ロジックを設定することもできるようになっています。

様々な開発スタイルに対応する強化

このほか「V2J」では、同じく弊社のJavaScript製品「Wijmo」で先行登場したWebデザイナとnpmによるモジュールダウンロードに対応します。デザイナを用いたノンコーディングのUI設計や、Node.jsおよび各種JSフレームワークを使用した開発など、さまざまな開発スタイルでInputManJSを便利にご利用いただけるようになります。

Webデザイナ

ほかにも続々、新機能

「V2J」では他にも以下のような機能強化が実施される予定となっており、詳細については後日、弊社Webサイトの製品ページにて詳しくご紹介する予定ですので、ご期待ください！

• 日付時刻ピッカー
• フォーカス移動制御
• 編集中イベントの追加
• テーマサポート
• コンストラクタでのオプション（プロパティ）設定
• ドロップダウンカレンダーの「元年」表示

2018年9月 - GrapeCity.devlog月間ランキング

こんにちは。
10月に入り、通勤途中ですれ違う学生さんたちが衣替えをしていました。
冬服の学生さんたちを見ると、一気に冬まで季節が進んだような気持ちになります。

さて、今月のGrapeCity.devlogの人気記事をご紹介いたします。

【9月】ブログ人気記事TOP5を発表！

★第1位

---

ドキュメントを生成・更新する開発支援APIライブラリシリーズの新ブランド「DioDocs（ディオドック）」を発表

この記事を読んでいる方の中には、既にご存じの方もいるでしょうか？
弊社開発支援ツールに新しい製品ブランドが登場します。

その名は・・・「DioDocs（ディオドック）」と申します。

　　　　　　　　　

開発環境や運用環境でMicrosoft ExcelやAdobe Acrobat等の専用ソフトウェアを使うことなく、コードでAPIを操作することでドキュメントファイルの生成・更新が可能となります。
何ができるの？どう使うの？専用ソフトウェアが不要って？
いろいろ疑問が浮かんできますよね。

Q&A形式で10月17日リリース予定の新製品について解説した記事「謎の？DioDocs（ディオドック）」をご覧いただければ、いくつかの謎が解明されます。

★第2位

---

ツリー表示を実現するスプレッドシートの「アウトライン列」

シートを利用して集計などをする際、項目ごとにグループ化してデータを集計したい、
ということはありませんか？

SpreadJSの新バージョン「V11J」では、「アウトライン列」の機能の追加によって
スプレッドシート上の列のデータに階層情報を付与して、ツリー表示を実現できるようになりました。
階層ごとに画像の設定をできるほか、階層を一括選択できるチェックボックスを設定することも可能です。

★第3位

---

サブレポートを活用して帳票開発を効率化しよう！

「サブレポート」機能はActiveReportsの発売当初から搭載されている機能なので、
実際に使用している方や知っている方は多いかもしれません。

ActiveReportsの3つのレポート形式では、サブレポート機能を利用して帳票開発を効率化することができます。
この記事では、 複数のレポートで再利用する方法と、複数のデータソースを使用する方法をご紹介しています。

Webサイトではデモアプリケーションを公開中！

第4位

---

第5位

---

---

10月17日（水）にリリース予定の新ブランド「DioDocs（ディオドック）」は、多くの
ニュースサイトに取り上げていただき、SNSでも良い反響をいただいております。
これから、DioDocsの情報をGrapeCity.devlogでご紹介していく予定ですので、
ぜひ覗いてみてください。

★殿堂入り

---

---

GrapeCity.devlogでは製品・技術に関するブログを毎週投稿しています。
今月も皆さまのお役に立てる情報を提供していきたいと思います。
10月のGrapeCity.devlog月間ランキングもどうぞお楽しみに☆彡

Xamarin.Forms 3.0で追加されたVisual State Managerを使ってみる

今回はXamarin.Forms 3.0で追加されたVisual State ManagerをComponentOne for Xamarinでも使ってみたいと思います。

Visual State Managerとは？

Visual State Manager (VSM) は、Xamarin.Forms 3.0 の新機能です。 VSM は、コードからユーザーインターフェースに視覚的変更を加える構造化された方法を提供します。 ほとんどの場合、アプリケーションのユーザーインターフェイスは XAML で定義され、この XAML には Visual State Manager がユーザーインターフェイスの表示に影響を与える方法を記述するマークアップが含まれています。

Xamarin.Forms Visual State Manager - Xamarin | Microsoft Docs

WPFやUWPでアプリケーション開発を行っていた方々にはお馴染みの機能かもしれません。