InputManJS/JavaScript/Wijmo/デモで学ぶ業務アプリのUI開発

デモで学ぶ業務アプリのUI開発（1） – 社員情報管理 –

by MESCIUS-dev

メシウスのWebサイトではJavaScriptライブラリを活用した業務アプリのUIの実装サンプルを、ダウンロード可能なソースコード付きで多数公開しています。

本連載ではWebサイトで公開しているサンプルアプリケーションを例に、様々な業務アプリケーションのUIの実装のポイントを解説していきます。第1回はJavaScript UIライブラリ「Wijmo（ウィジモ）」とJavaScript入力ライブラリ「InputManJS（インプットマンJS）」を使用した「社員情報管理」デモの解説です。

社員情報管理デモ

こちらのデモは「社員登録」「社員一覧」「社員評価」の3つのタブで構成されていますが、その中から最も多くのコントロールを利用している「社員評価」のタブについて、利用しているコントロールの機能や実装のアイディアなどを解説します。

社員評価タブ
「社員評価」タブ

利用しているコントロール

「社員評価」タブではWijmoとInputManJSの以下のコントロールを使用しています。

評価値の入力にはGcNumber（InputManJS）のスライダー入力を実装し、直感的でスピーディな入力を実現します。また、入力した評価値はFlexRadar（Wijmo）を使用してレーダーチャートで可視化できます。
社員へのフィードバックの入力にはGcRichtextEditorを使用し、各種装飾を施した視認性の高い文章作成が可能です。
さらにPdfDocument（Wijmo）を使用して、ページの内容をPDFにエクスポートできます。

コントロール名利用目的イメージ
ComboBox（Wijmo）評価を行う従業員を選択するComboBox（Wijmo）
GcNumber（InputManJS）社員の評価値を入力するInputNumber（InputManJS）
FlexRadar（Wijmo）入力された評価値に応じたチャートを表示するFlexRadar（Wijmo）
GcRichTextEditor（InputManJS）社員へのフィードバックを記載するGcRichTextEditor（InputManJS）
PdfDocument（Wijmo）FlexRadarおよびGcRichTextEditorの内容をPDF出力するFlexRadarおよびGcRichTextEditorの内容をPDF出力する

各コントロールの解説

ここからは各コントロールのソースコード部分を抜粋し、ポイントとなる部分の解説します。

ComboBox編

var employeeCombobox = new input.ComboBox('#combobox', {
    itemsSource: multirow.itemsSource, // 1
    displayMemberPath: 'fullname',
    selectedValuePath: 'fullname',
    selectedIndexChanged: () => {　//2
        let selectedEmployee = employeeCombobox.selectedValue;
        if (selectedEmployee) {
            let data = employeeData.items.filter(emp => emp.fullname === selectedEmployee);
            r.itemsSource = data[0].feedbacks;
            gcNumber1.value = data[0].feedbacks[0].performance;
            gcNumber2.value = data[0].feedbacks[1].performance;
            gcNumber3.value = data[0].feedbacks[2].performance;
            gcNumber4.value = data[0].feedbacks[3].performance;
            let index = employeeData.items.findIndex(emp => emp.fullname === employeeCombobox.selectedValue);
            if (index !== -1) {
                feedback.setContent(feedbackData[index].feedback, GcRichtexteditor.InputMan.ContentFormat.Html); 
            }
        }
        else {
            r.itemsSource = [];
        }
    }
});

解説

  1. ComboBoxに設定するデータソースを設定します。ここでは社員一覧のタブに存在するMultiRowのitemsSourceを設定しています。
  2. 社員が変更されたときのイベントをselectedIndexChangedイベントでハンドリングします。このイベント内では、選択された従業員のデータに基づき、FlexRadar、GcNumber、GcRichTextEditorのデータを更新しています。

GcNumber編

GcNumberは合計4つ配置していますが、いずれも同じ処理を行っているため1つのみ紹介します。

const gcNumber1 = new InputMan.GcNumber(document.getElementById('gcNumber1'), {
    minValue: 0,
    maxValue: 10,
    formatDigit: '#',
    value: employeeData.items[0].feedbacks[0].performance,
    sliderConfig: {
        visible: true,
    }
});

・・・

gcNumber1.onInput((s, e) => (changeChartData(s.value, 0)));

・・・

const changeChartData = (value, feedbackindex) => {
    let index = employeeData.items.findIndex(emp => emp.fullname === employeeCombobox.selectedValue);
    employeeData.items[index].feedbacks[feedbackindex].performance = value;
    r.itemsSource = employeeData.items[index].feedbacks;
    r.collectionView.refresh();
};

解説
GcNumberの値が変更されたとき、onInputイベントを利用します。ここでは、変更されたデータに基づき、社員の評価値の更新を行います。その後、更新されたデータで再度FlexRadarを更新して、GcNumberとFlexRadarでデータが同期されるようにしています。

FlexRadar編

var r = new radar.FlexRadar('#chart', {
    palette: chart.Palettes.cocoa,
    bindingX: 'field',
    series: [
        { name: '評価値', binding: 'performance' },
    ],
    axisY: {
        min: 0,
        max: 10
    }
});

解説
FlexRadarでは、GcNumberの入力値に合わせて最大値、最小値を0～10の範囲で表現できるようにしています。

GcRichTextEditor編

feedback.registerToolbarItem("customButton", {
    text: "内容を保存",
    tooltip: "入力中のフィードバックを保存します。",
    enabled: true,
    onAction: () => {
        let index = employeeData.items.findIndex(emp => emp.fullname === employeeCombobox.selectedValue);
        if (index !== -1) {
            feedbackData[index].feedback = feedback.getContent(GcRichtexteditor.InputMan.ContentFormat.Html);
            alert('フィードバックが保存されました。');
        }
        else {
            alert('社員が選択されていません。');
        }
    }
});

GcRichTextEditorでは、ツールバーにカスタムボタン（customButton）を追加して、エディタの内容を保存できる機能を実装しています。ここで、データを保存する際、復元後のデータも GcRichTextEditorに再表示することを考慮し、getContentメソッドのパラメータはContentFormat.Htmlを指定しています。

PdfDocument編

document.querySelector('#btnExport').addEventListener('click', () => {
    let doc = new pdf.PdfDocument({
        ended: (sender, args) => pdf.saveBlob(args.blob, 'feedbackreport.pdf')
    });
    doc.registerFont({ source: `https://${window.location.host}/wijmo/demos/fonts/ipaexg.ttf`, name: 'ipaexg' });
    doc.setFont(new pdf.PdfFont('ipaexg'));
    r.saveImageToDataUrl(chart.ImageFormat.Png, (url) => {
        doc.header.drawText(employeeCombobox.selectedValue + 'さんの評価');
        doc.drawImage(url);
        doc.moveDown();
        let font = new pdf.PdfFont('ipaexg');
        doc.drawText(feedback.getContent(GcRichtexteditor.InputMan.ContentFormat.Text), null, null, { font: font });
        doc.end();
    });
});

PdfDocumentでは、フォントの設定を行った後、出力するPDFコンテンツに、Comboboxの選択された従業員名→FlexRadarの表示内容→GcRichTextEditorの内容の追加を行い出力します。GcRichTextEditorの内容はPDFではテキスト表示させる必要があるため、getContentメソッドの引数はContentFormat.Textを指定し、drawTextメソッドでテキストとしてPDFに追加しています。

さいごに

今回はWijmoとInputManJSを使用した「社員情報管理」デモの各種機能の実装のポイントを解説しました。製品サイトでは今回ご紹介したデモアプリケーションをブラウザ上で手軽にお試し可能で、加えてソースコード付きでダウンロードも可能なので、是非こちらもチェックしてみてください。

そのほか、製品サイトでは、WijmoとInputManJSのトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／