Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発

4,996 views

Published on

Developers Summit 2014 ランチセッション講演資料
http://event.shoeisha.jp/devsumi/20140213/session/388/

Published in: Technology
  • Be the first to comment

Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発

  1. 1. + JavaScriptライブラリ 「Wijmo(ウィジモ)」 による日本仕様のUI開発 February 13, 2014 グレープシティ株式会社 山崎 顕由 ハッシュタグ:#devsumiD セッションID :13-D-L
  2. 2. + 質問 ランチをとっているところ恐縮ですが・・・ 1. 業務アプリケーションの開発がメイン (運用/テスト/マネージメント等含) の方? 2. GrapeCityのツールを利用したことがあ る方?
  3. 3. + Wijmo[ウィジモ]って何? Web標準技術(HTML5/ JavaScript/CSS3)で開発された、 業務アプリケーションに必要 なUIウィジェットをワンセット にしたライブラリ集
  4. 4. + Wijmo[ウィジモ] = jQuery UI, jQuery Mobileベース jQuery Mobile Webサイトでも紹介 http://jquerymobile.com/resources/
  5. 5. + Wijmo 収録ウィジェット グリッド Grid Spread Sheet 入力 Combobox InputText InputDate InputMask InputNumber List Checkbox Dropdown Radio Textbox チャート Barchart Bubblechart Compositechart Linechart Piechart Scatterchart コンテナ Superpanel Tabs Gallery Splitter ユーティリティ Accordion Expander Carousel Calendar EventsCalendar Dialog Editor Pager Tooltip Wizard メニュー Menu Tree Ribbon ビジュアライズ LinearGauge RadialGauge Progressbar Rating Slider モバイル向け AppView ListView 画像・ビデオ Video Player
  6. 6. + jQuery UI 収録ウィジェット ユーティリティ Accordion Dialog Tooltip 入力 Button Datepicker Spinner Autocomplete コンテナ Tabs メニュー Menu ビジュアライズ Progressbar Slider
  7. 7. + Wijmo 収録ウィジェット グリッド Grid Spread Sheet 入力 Combobox InputText InputDate InputMask InputNumber List Checkbox Dropdown Radio Textbox チャート Barchart Bubblechart Compositechart Linechart Piechart Scatterchart コンテナ Superpanel Tabs Gallery Splitter ユーティリティ Accordion Expander Carousel Calendar EventsCalendar Dialog Editor Pager Tooltip Wizard メニュー Menu Tree Ribbon ビジュアライズ LinearGauge RadialGauge Progressbar Rating Slider モバイル向け AppView ListView 画像・ビデオ Video Player
  8. 8. + Demo Wijmoを利用したアプリケーション (チャート/グリッド/スライダー) http://demo.componentone.com/ASPNET/StockPortfolio/Stocks
  9. 9. + 業務で要求される WebアプリケーションのUI
  10. 10. + 日本の業務アプリケーションの傾向 15年以上にわたる製品サポートから見えるもの  伝統を重んじる  既存のワークフローや手順を変えたくない •  Ex)ファンクションキーによるボタン操作 アーキテクチャが変わっても同じUIを求める • •  Ex)1画面あたりのデータ量が多い Ex)「入力」に対する細部のこだわり 日本固有の要件が存在  Excel依存  IME制御  半角(1byte)と全角(2byte) とサロゲートペア(4byte)の制御  日付の表記方法(西暦/和暦)  同じ文字を複数の文字種で表現(氏名/シメイ/しめい)
  11. 11. + 日本企業の業務アプリケーション ありがちな要件 その1 Excelと同じ感覚で使いたい Excelでできることは簡単にやれ るでしょ? 顧客 顧客 既存Excelファイルを読み込んで 画面で入力したい 画面で入力したデータをExcel ファイルに出力したい 顧客
  12. 12. + Wijmo:SpreadJS[スプレッドJS] Excelライクな操作性を実現するグリッド • Excelの操作性を実現 • Excelの機能を踏襲 • 数式(320種類以上)や柔軟なセル連結等 • Excelファイルのインポート/エクスポート(サーバー連携) • 専用GUIデザイナ
  13. 13. + Demo SpreadJS[スプレッド]基本機能 http://wijmo.c1.grapecity.com/demo/SpreadJS/samples/
  14. 14. + Demo SpreadJS[スプレッド] Excel I/O http://wijmo.c1.grapecity.com/demo/SpreadJS/samples/ExcelIOSample/
  15. 15. + 日本企業の業務アプリケーション ありがちな要件 その2 既存デスクトップシステムと同じ 操作感覚(UI)にしたい 顧客 顧客 この紙伝票と同じ画面をつくって ほしい
  16. 16. + Wijmo:入力系ウィジェット 日本固有の業務要件をサポート • 日本固有の入力要件に対応 • 日付の表記(西暦/和暦) • 入力書式と表示書式の分離 • 半角(1byte)と全角(2byte) の制御 • 日本語文字種の入力制限 例1)入力時と表示時で異なる書式 入力時 表示時 例2)特定書式およびアンダースコアの表示 HTML5 Wijmo
  17. 17. + Demo 日本仕様の入力フォーム
  18. 18. + Wijmoの特長 フロントエンドでリッチなUIを簡単に提供できる 高機能なUIライブラリがワンセット 1. • 多彩なウィジェットを数多く提供 業務アプリケーションに最適化 2. • Excelと親和性の高い操作性と機能を持つスプレッドシート • 入力UIの細部で日本固有の要件を実現 マルチプラットフォームに最適化 3. • 容易なデザイン設定 4. • 5. 同一ウィジェットをモバイル環境でも利用可能 ThemeRollerとBootstrapサポート スタンダードライブラリをサポート(→組み込みやすい!)
  19. 19. + 製品情報
  20. 20. + 製品ラインナップとライセンス デュアルライセンスモデル Wijmo Professional 収録製品 Wijmo Enterprise Optional Pack for Wijmo Enterprise 基本40 ウィジェット Wijmo Professional +SpreadJS SpreadJS用 デザイナ+Excel I/O 商用/ OSS(GPLv3) 商用のみ ライセンス 商用/ OSS(GPLv3) 商用価格 1年契約 • 57,750円 94,500円 25,000円 (更新:23,100円) (更新:37,800円) (更新:10,500円) 商用ライセンス(1年契約のサブスクリプション) • 1開発者につき1ライセンス必要(ランタイムフリー) • 年3回(5月/9月/1月)メジャーバージョンアップ • サブスクリプション更新価格:2年目以降は本体価格の40% • Eメールサポート 全て税込価格
  21. 21. + 各種情報の入手方法 Wijmo専用Webサイトあります http://wijmo.c1.grapecity.com ウィジモ 検索
  22. 22. + ブース出展してます!! お気軽にお立ち寄りください いまココ! GrapeCityはこちら ★この会場の目の前★
  23. 23. + ご清聴ありがとうございました。 Wijmo[ウィジモ]が皆様の開発のお役に立てますように

×