Skip to content

コンボボックスの有効/無効を切り替える

入力のサジェストができるコンボボックスコントローラで、入力の有効/無効を切り替える方法です。

実際のデモはJSFiddle上で試せます。

作り方

HTMLの実装

HTML側ではコンボボックスの有効、無効を切り替えるためのボタンを追加します。

JavaScriptの実装

JavaScript側では、this._accountComboBoxController の enable/disableを実行して有効/無効を切り替えます。

JavaScript全体のコードは次のようになりなす。


今回のデモはこちらにあります。入力を制限する際に使ってください。

HTML5 Enterprise Application Conference 2017を開催します!

〜HTML5で実現する業務アプリケーションのモダン化&マルチデバイス化〜

企業が利用・提供する業務アプリケーションに関わるテクノロジーが日々進化し、情報システム部門に求められている課題は、デジタルトランスフォーメーションを代表として、いっそうテクノロジーを活用した業務革新が求められるようになってきました。

一方で、既存の業務システムのセキュリティや保守サポートのレベルを落とすわけにもいかず、情シス部門の人員が増えるわけでもなく、どのように新しい時代の情シスへと変革していけば良いのでしょうか。

本カンファレンスでは、HTML5を使用した業務アプリケーション開発の最先端にいる各社がスポンサーとなり、HTML5によるモダナイゼーションやマルチデバイス対応に関する最新動向や開発事例をご紹介する予定です。

HTML5というオープンテクノロジーの切り口で、ベンダーに依存せず、効率のよいツールやフレームワークを用いて内製等の課題を解決していくことで、IT産業の今まであり方に一石を投じるようなエッセンスを皆様にお伝えできればと思います。

申し込みはこちらから!

「動かないコンピュータ」を10数年担当した

「日経コンピュータ」元編集長がご登壇!

基調講演には、「ソフトを他人に作らせる日本、自分で作る米国」「社長が知りたいIT 50の本当」の著者であり、「日経コンピュータ」の人気連載「動かないコンピュータ」を10数年担当された「日経コンピュータ」元編集長の谷島 宣之様をお招きし、日本の情報システム部門がこれから直面していくであろう課題や、いままではとは異なる業務内容について解説いただきます。今までの情報システム部門に求められていた「守り」の業務と、これから求められる「攻め」の業務をクリアにし、かつ、これからどのように解決していくか糸口をお伝えいたします。

情報システム部門や実際に開発に携わっている皆様にとって、貴重な1日になること間違いなしの特別カンファレンスです。皆様のお申込み・ご来場を心よりお待ちしております。


HTML5とは?

HTML5とは、2014年にHTMLのバージョン5として勧告されたものです。前のバージョンにあたる「HTML4.01」の勧告から15年ぶりに改定されました。
HTML5は、最新版のIE11を除く旧バージョンのIEがサポート終了になったことや、 スマートフォンブラウザに表示されず、2020年にサポートが終了するAdobe Flashコンテンツの代替としてWebアプリケーションを構築する際に用いられるケースが増えてきました。

HTML5ベースで業務システムを構築することで、単に見栄えや操作感に優れたWebシステムを作れるというだけでなく、「マルチデバイス対応が容易」「配布コストを軽減できる」「ベンダーロックインを回避可能」といった様々なメリットが得られます。

これからのユーザー企業にとって、業務システムをパートナー企業と一緒に開発・運用を進めていくための技術として私たちはHTML5を推奨しています。


HTML5の大きな特徴

  1. Webアプリケーションのためのweb標準
    ドラッグ&ドロップができ、リアルタイムに反応を返すことが可能です。HTML5をベースに、CSS、JavaScriptを組み合わせてより効率良く実現できるような構造となっています。
  2. 異なる環境下でも動作
    HTML5で作られたアプリケーションは、異なるプラットフォームやOSでも同様に表示し動作することが可能です。これは、素早く多くの環境にサービスを提供出来ることでもあり、システム開発側だけでなく、利用者にとっても大いなメリットとなります。
  3. オープンシステム
    今までシステム開発は、OSや特定のベンダーの製品にのみ対応した開発が行われてきました。しかしながら、HTML5のようなオープンシステムは、OSやデバイス、特定のベンダーのプラットフォームにも縛られることなくアプリケーションを展開することが可能です。
    とりわけWebブラウザに関して言えば、HTML5というオープンシステムに準拠していることが競争の前提となってきています。今までとは異なり、独自仕様を競う競争ではなく、より高速に・安定して・拡張性に優れ・使い易さがWebアプリケーション開発に期待されるようになってきています。

AGENDA

時間 内容
13:40~14:00 受付
14:10~14:50 「日経コンピュータ」元編集長による情シス部門に向けた基調講演

業務システム明日 ~ 内製の勧め

業務システムについて企業はこれからどうしていくべきでしょうか。モバイル、AI、IoTなど業務システムに関わるテクノロジーが急変し、企業の経営者は「新しいことがやれるのではないか」と期待をかけています。一方、既存の業務システムは肥大化、老朽化しており、情報システム担当者は日々、システムの保守に追われています。即効性のある対策はありませんが、業務システムの現状と今後、目指す方向、担い手の条件、内製の可能性といったことを考えてみます。

谷島宣之様

日経BP総研 上席研究員

ご略歴

1985年、日経マグロウヒル社(現・日経BP社)入社、「日経コンピュータ」誌の記者に。システム開発プロジェクトの失敗を報じる連載「動かないコンピュータ」を10数年担当。2009年に日経コンピュータ編集長。現在はシンクタンク部門の研究員。

著書

ソフトを他人に作らせる日本、自分で作る米国

社長が知りたいIT 50の本当

この度、カンファレンスに御来場いただいた皆様に「社長が知りたいIT50の本当」をご用意いたしました。

アンケートにご協力いただいた皆様にプレゼントいたします!

14:50~15:20
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから

近年にみるWebテクノロジのめざましい進歩をきっかけに、業務アプリケーション開発に大きな変化が訪れようとしています。開発支援ツールのメーカー・ベンダーとして業界の変遷に追従しつづけるグレープシティが、最新のJavaScriptライブラリ「Wijmo」と「SpreadJS」の導入事例を参考としながら、昨今に見られるシステム開発の動向と開発スタイルについてご紹介します。

グレープシティ株式会社 ツール事業部 マーケティング部

村上 功光

15:20~15:50
モバイルファーストな業務システムをHTML5で実現

〜Monaca活用事例に学ぶ、モバイルアプリ開発の成功ポイント解説〜

モバイルデバイスの急速な普及により、業務システムにおいてもモバイルデバイスを用いた業務改革が求められるようになっています。一方で、モバイルアプリ開発エンジニアや開発ノウハウの不足により失敗するプロジェクトも多々見受けられます。

そこで近年注目をされているのがHTML5ハイブリッドアプリ。HTML5ハイブリッドアプリはWeb標準技術であるHTML5を用いてiOS、Android、Windowsのマルチプラットフォームに対応したアプリが開発できる技術です。

本セッションでは、これまで国内外で8万以上のアプリ開発に利用されて生きた開発プラットフォームMonacaの活用事例を通じて、業務システムにおけるモバイルアプリ開発の成功ポイントについて解説をいたします。

アシアル株式会社

取締役 マーケティング・事業開発担当

塚田 亮一

16:00~16:30
hifiveで実現するエンタープライズHTML5システム開発

業務システムの分野でも、より生産性の高いUIを求める声が高まっています。

表やグラフをはじめ、3DなどWebでも高度な表現が可能になってきましたが、業務システムでは編集などの機能性も求められます。また、パフォーマンスよく大量のデータを扱えることは勿論、多人数での開発や長期の運用・保守をも考慮する必要があります。

複雑・高度化する企業Webシステムに対し、弊社ではHTML5企業Webシステム向けプラットフォーム「hifive/Pitalium」を開発・公開し様々な案件を実行してきました。本セッションでは、その中で得られたノウハウをご紹介します。

新日鉄住金ソリューションズ株式会社

技術本部 システム研究開発センター イノベーティブアプリケーション研究部

hifive アーキテクト 三淵 喬

16:30~17:00
サポート終了が迫るFLEXをHTML5/Angularでリニューアル!

本年7月、Adobe Systemsは、2020年末に「Flash」の提供を終了し、同ソフトウェアのアップデートと配布を停止すると発表しました。それに伴い、FlashプレイヤーもEOSを迎え、脆弱性対策等も行われなくなります。また、Microsoftも2020年までにWindowsにおけるFlashのサポートを廃止することを決定しています。これにより、過去リッチインターネットアプリケーション(RIA)の開発フレームワークとして、業務システム開発に盛んに利用されたFLEXもサポート終了となります。

企業が大量に資産を抱えるFLEXによる業務システムをどのようにして、リニューアルするのか?

スタイルズではその解決策として、HTML5/Angularによるリライトサービスをご提供しています。スタイルズが過去実施したFLEX→HTML5/Angularへの大規模リライト事例を混じえて、サービス内容をご紹介します。また、今後情シス部門がパートナーとすべきSI企業の選定ポイントをお伝えします。

株式会社スタイルズ

代表取締役 梶原 稔尚

17:00~17:30
名刺交換・相談会

CONFERENCE DETAIL

カンファレンス名 HTML5 Enterprise Application Conference 2017~ HTML5で実現する業務アプリケーションのモダン化&マルチデバイス化~
日時 2017年12月6日(水)14時00分~17時30分(受付開始:13時40分)
会場 秋葉原UDXカンファレンス6F type350(A+B)
(東京都 千代田区外神田 4-14-1 秋葉原UDX南ウィング6F)
最寄り駅 JR山手線・総武線 秋葉原駅 電気街口徒歩2分
東京メトロ銀座線・日比谷線 秋葉原駅 徒歩4分
定員 100人
費用 無料(事前申込制)

SPONSER

アシアル株式会社
グレープシティ株式会社
新日鉄住金ソリューションズ株式会社
株式会社株式会社スタイルズ


※講演内容・プログラムは都合により一部変更させていただくことがございます。予めご了承ください。
※お申し込み頂いた個人情報を、本イベントに関連したサービスを、有益かつ適切にお客様、お取引先等に提供するため、株式会社スタイルズが収集した個人情報をイベント共催会社(アシアル株式会社、グレープシティ株式会社、新日鉄住金ソリューションズ株式会社、株式会社スタイルズ)で共同利用いたします。
※入力いただきました個人情報は、株式会社スタイルズおよびイベント共催会社(アシアル株式会社、グレープシティ株式会社、新日鉄住金ソリューションズ株式会社)のプライバシーポリシーに従い、厳重な管理のもと、お取り扱いいたします。

申し込みはこちらから!

hifiveのUIライブラリ拡大表示で拡大率を変更する

hifiveのUIライブラリ、お絵かきボードの機能で拡大率を変更する方法です。

実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。

HTMLについて

HTMLは前回の拡大表示をベースに、拡大率を設定できるテキストボックスを追加します。

JavaScriptについて

JavaScriptでは拡大率を設定する処理を次のように書きます。

以上の処理でダイナミックに拡大率の変更ができるようになります。


今回のデモはJSFiddleにアップロードされていますのでぜひご覧ください。必要に応じて拡大率を変えてみてください。

お絵かきボード

カレンダーコンポーネントで特定の曜日を色分けする

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。

動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。

HTMLの記述

HTMLは通常のカレンダーに加えて、曜日とカラーリング設定(スタイルシートのクラス)を指定できるドロップダウンを設定します。

スタイルシートは次のようになります。

JavaScriptの記述

ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。

全体のコードは次のようになります。


実際に動いているデモはこちらになります。曜日毎に色を変えたい(休日など)時にご利用ください。

絵文字入力/表示ライブラリまとめ

業務システムにおいても絵文字が使われるようになっています。報告書などはとても無理ですが、従業員同士のコミュニケーションにおいて絵文字を使うことで感情を上手に表現できるようになります。

自社システムに絵文字機能を組み込む際には次のようなライブラリを使うと良いでしょう。

EmojiPanel

スマートフォンやデスクトップで使える絵文字入力によく似た絵文字ピッカーです。絵文字自体は派手すぎないデザインになっているので、多くの場面で利用できそうです。絵文字自体はアイコンで、肌の色などには対応していないようです。

EmojiPanel

mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

テキストエリア、テキストボックスで使える絵文字ピッカーです。jQueryプラグインで、多くのオプションを提供しています。自動補完機能もありますが、設定でオフにすることもできます。

mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

Textcomplete

入力補完の際には絵文字がでていますが、テキストエリアやテキストボックスには文字列として絵文字が追加されます。見た目と異なるので、一般ユーザよりも開発者向けに使えるのではないでしょうか。

Textcomplete

wdt-emoji-bundle – Demo

テキストを解析して絵文字にしてくれます。デザインをシステムに合わせて変更可能で、Apple/Google/Twitter/Facebook/Emojioneといったサービスごとに若干異なるアイコンデザインになります。

wdt-emoji-bundle – Demo

iamcal/js-emoji: A JS Emoji conversion library

Webブラウザ毎に異なる絵文字のデザインを吸収してくれるライブラリです。テキストを解析し、それぞれの環境に合わせた絵文字を表示してくれます。jQueryと組み合わせた使い方もできます。

iamcal/js-emoji: A JS Emoji conversion library

emojione/emojify.js: A Javascript module to convert Emoji keywords to images

テキストを解析して絵文字に変換します。絵文字自体は500種類以上用意されています。すでに入力されたテキストに対して適用される仕組みです。

emojione/emojify.js: A Javascript module to convert Emoji keywords to images

diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.

WYSIWYGで使える絵文字ピッカーです。絵文字は自分で用意しなければならないですが、入力できる文字を自由に制御できるとも言えます。jQueryプラグインなのでカスタマイズも容易でしょう。

diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.


絵文字は感情表現を和らげたり、手軽に反応を返せるようになります。あまり多用するとカジュアルになりすぎたり、ビジネスには向かないかも知れません。あくまでもスムーズなコミュニケーションを実現するために使うのが良いでしょう。

カレンダーコンポーネントで特定の日付にラベルを追加する

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の日付に対してラベルをつける方法です。

動作している様子は次のようになります。また、こちらでデモを確認できます

作り方

HTMLの記述

HTML側ではラベルに使う文字列と、イベントを実行するボタンを配置します。

JavaScriptの実装

JavaScript側の実装です。this.calendarController.setTooltip を使って、日付と表示するラベルを指定します。

全体のJavaScriptは次のようになります。


覚えておくべき日付を説明とともに表示したり、データベースから日付データをカレンダーに載せるような使い方が考えられます。カレンダーは業務システムでもよく使われますのでhifiveのカレンダーコンポーネントを使いこなしてください。

Webベースのファイルマネージャライブラリまとめ

Webアプリケーションにおいて、ファイルを操作したいというニーズが発生するのは少なくありません。ローカルで扱うようにWebサーバ上にあるファイルを扱えると便利です。

今回はそんな時に使えるライブラリを紹介します。ユーザ体験を向上させるのに使えるでしょう。

File Manager

ファイル検索機能、ファイルの新規作成/コピー/移動/削除、GitやSubversionなどのコマンドを実行できます。依存性がなく、単体で動作します。ユーザ管理機能を備えていますので、ユーザ毎のフォルダを作成することもできます。

File Manager

jQuery File Browser demo

jQueryプラグインとして作られています。フォルダやファイルによってアイコンが違うようになっています。ファイルが実際に存在しなくとも、Web上で仮想的にフォルダ/ファイル表示を行うのに使えます。

jQuery File Browser demo

Cloud Commander

Webベースとしては珍しい二画面ファイラーとなっています。キーボードショートカットも多数用意されていますので、プログラマなどがファイルを素早く操作するのに向いています。

Cloud Commander

tshannon / freehold — Bitbucket

ファイルサーバをWeb化するソフトウェアです。ファイル管理だけでなく、マインドマップ機能もあります。また、Dropbox風のクライアントソフトウェアがあり、それを使うことでファイルの同期も可能です。

tshannon / freehold — Bitbucket

AJAX File Browser Demo

Ajaxによるファイルブラウザです。UIはエクスプローラーライクになっています。ダブルクリックすると関連するアプリケーションで開きます。コンテクストメニューも実装されており、本格的なファイル管理が可能です。

AJAX File Browser Demo

ebidel/filer.js: A wrapper library for the HTML5 Filesystem API what reuses UNIX commands (cp, mv, ls) for its API.

アイコンとリスト表示がサポートされています。画像やHTMLであればプレビュー機能が実装されています。HTML5のFile APIを体験できるソフトウェアになっています。

ebidel/filer.js: A wrapper library for the HTML5 Filesystem API what reuses UNIX commands (cp, mv, ls) for its API.


フォルダやファイル操作を実装するのは大変ですが、ライブラリを使うことでUIを簡単に実現できます。後はAjaxなどでデータをサーバに送り、実際にそのようにファイルを動かせば良いでしょう。もちろんデータベースを仮想的にファイルシステム風に見せるのも良さそうです。