1
テクニカルセッション
意外と簡単！自分で作るFormaアイテム
2
テクニカルセッションアジェンダ
16:20 Formaアイテム作成概要のご説明(10分)
16:30 アイデアコンテストのご紹介(5分)
16:35 各社の作成アイテム紹介・デモ(各社5分)
・株式会社グローバル・ソリューションズ様
「PDFビューワー」
・株式会社東海ソフトウェア様
「郵便番号→住所自動入力アイテム」
・株式会社エコー・システム様
「登録ボタン拡張アイテム」
・株式会社フォーカスシステムズ様
「メッセージ連携アイテム」
(順不同)
16:55 コンサル作成アイテムの紹介・質疑応答(5分)
3
■念のためFormaの説明
IM-FormaDesignerによる開発画面 パレット化された 部品より、使用し たいアイテムをド ラッグ＆ドロップ するだけで配置可 能。 項目をダブルク リックすると、入 力チェックや、表 示スタイル変更な ども可能。IM-FormaDesignerは、システム共通基盤intra-mart上で動作し、
ブラウザ上の簡単な操作のみでWeb画面フォームを作成することが
できるツールです。
4
■作成方法説明の前に
単一項目入力系
複数項目入力系
入力項目なし系
Formaアイテムは、大きく分けて以下の３タイプとなります。
標準アイテムで機能不足の場合、以下の方法で要件を満たせるか検討します。
代替方法 代替可能ケース スクリプトアイテムを利用 入力チェック、GUI動作(アクション、デザイン) アクションイベントを利用 入力切替、表示切替 外部連携を利用 外部・業務データソースとのデータ取得(画面内) 前処理、後処理を利用 外部・業務データソースとのデータ連携(画面外) 入力チェックプログラムを利用 高度な入力チェック、外部データとの整合チェック IMWFプラグイン処理 業務プログラム処理上記でも代替ができない場合、独自のFormaアイテム作成を検討します。
5
お奨めの方法は、「既存アイテムをコピーして後、コピーしたアイテム
を修正して希望するアイテムに仕上げる」方法です。
一からアイテムを作成するより、容易にアイテムを作成可能です。
■推奨のアイテム作成方法
コンサルの推奨するアイテム作成方法
ⅰ．ⅰ．関連ファイルコピー
ⅰ．ⅱ．設定ファイルの書き換え
STEP1
アイテム
コピー
STEP2
アイテム
修正
主な修正点
ⅱ．ⅰ．デザイン修正
ⅱ．ⅱ．イベント処理修正
ⅱ．ⅲ．プロパティ修正
＊上記を修正するのに必要なファイル構成は後述スライド、もしくは 下記Formaアイテム作成ガイドを参照。IM-FormaDesigner for Accel Platform / 画面アイテム作成ガイド
http://www.intra-mart.jp/document/library/forma/public/forma_item_guide/texts/revision_history/index.html
アイテム作成の2STEP
6
1 クライアントサイドファイルのコピー
<%WAR%>/forma/csjs/types/product/72/textbox.js
↓
<%WAR%>/forma/csjs/types/
imesh/sample/
2 サーバサイドファイルのコピー
<%WAR%>/WEB-INF/jssp/product/src/forma/designer/types/product/72/textbox
↓
<%WAR%>/WEB-INF/jssp/src/forma/designer/types/imesh/sample/
3 構成ファイルの書き換え
各構成ファイルで定義されている画面アイテム「文字列」の画面アイテムタイプ
「product_72_textbox」を「imesh_sample_textbox」に置換します。
※：テキストエディタにてファイルを開き、全置換コマンド等で一括置換を
実施して下さい。
4 ツールキットに追加
ツールキットに「imesh_sample_textbox」を追加します
※詳細は 次頁「実装した画面アイテムをツールキットに登録する」にて説明します。
アイテムコピーを行うための手順
新規に作成する画面アイテムタイプを「imesh_sample_textbox」とした場合
■ⅰ．ⅰ．関連ファイルコピー ～
ⅰ．ⅱ．設定ファイルの書き換え
7
■ ⅰ．ⅱ．設定ファイルの書き換え
（実装した画面アイテムをツールキットに登録する）
下記「xxx」を任意とした設定ファイルを作成します。
<%WAR%>/WEB-INF/conf/forma-extension-config/forma-config_xxx.xml
<forma-extension-config xmlns="http://www.intra-mart.jp/forma-extension-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/forma-extension-config ../../schema/forma-extension-xsi:schemaLocation="http://www.intra-mart.jp/forma-extension-config.xsd"> <toolkit-setting> <define-item> <item-path>forma/designer/types/imesh/sample/textbox</item-path> </define-item> <default-grouping> <group> <group-id>input</group-id> <item-id>imesh_sample_textbox</item-id> </group> </default-grouping> </toolkit-setting> </forma-extension-config> 設定例 画面アイテム「imesh_sample_textbox」 アイテムグループを「input」グループ に設定アプリケーション種別の利用範囲は「すべて」（設定なし）8
単一項目入力系
複数項目入力系
入力項目なし系
ＵＩとしては、大きく分けて3つあります。
アイテムの振る舞いとして、以下を決めます。
①入力チェック（必須/桁数/形式）
②イベント処理（ボタン押下時、フォーカスイン/アウト、等）
③入力チェックエラー時の表現
■ⅱ．ⅰ．デザイン修正 ～ ⅱ．ⅱ．イベント処理修正
（画面部品のUIや振舞いを決める）
9
■ⅱ．ⅲ．プロパティ修正
（フォーム・デザイナ上で設定可能なプロパティ項目を決める）
フォーム・デザイナ上で設定可能なプロパティ項目を決めます。
10
■ⅱ．ⅲ．プロパティ修正
（プロパティ設定情報を保存するためのデータ構成を決める）
前述のプロパティのデータは、下記のようなツリー構造になっています。
プロパティ項目を追加する
場合は、内容に合わせて
データ構成の「アイテム詳
細設定」内
もしくは、「入力フィール
ドリスト」の下の「入力
フィールド詳細設定」内に
追加してください。
（略）
11
■補足説明
画面アイテム構成ファイル(1/3)
画面アイテムタイプとは、画面アイテムを識別するためのIDです。
画面アイテム構成ファイルとは１つの画面アイテムを構成するファイル群です。
例：画面アイテム「文字列」の場合、画面アイテムタイプは「product_72_textbox」 <%WAR%>/WEB-INF/jssp/product/src/forma/designer/types/product/72/textbox/ <%WAR%>/forma/csjs/types/product/72/textbox.js サーバサイドファイル クライアントサイドファイル *赤字以下を任意のパスで設定可能です。画面アイテム構成ファイルをそれぞれ実装し、ツールキットに作成した画
面アイテムを登録するとフォーム・デザイナから作成した画面アイテムを
利用できるようになります。
各構成ファイルは次頁に記載します。
12
ファイル名
説明
type (js) 画面アイテム定義や入力チェックを実装するファイル preview (html/js) フォーム・デザイナ画面で表示されるプレビュー用の画面部品ファイル properties (html/js) 画面アイテム情報を設定するプロパティ画面用の画面部品ファイル input (html/js) 表示タイプ「入力可」の画面部品ファイル reference (html/js) 表示タイプ「参照」の画面部品ファイル サーバサイドファイル （スクリプト開発モデル のファイル）アプリ作成者が利用する
フォーム・デザイナのため
のファイル
%画面アイテムタイ
プ%(js) /
preview(html/js) /
properties(html/js) /
help(html/js) / type(js)
アプリ作成者が利用する
フォーム・デザイナのため
のファイルの関連は右図の
イメージ通りです。
■補足説明
画面アイテム構成ファイル(2/3)
13
ファイル名
説明
%画面アイテムタイプ%
(js)
画面アイテムのデータ構成定義を行うファイル
クライアントサイドファイル （静的ファイル)アプリ利用者が利用する登
録・編集画面/参照画面のた
めのファイル
input(html/js) /
reference(html/js) /
type(js)
アプリ利用者が利用する登
録・編集画面/参照画面の各
ファイルの関連は右図のイ
メージの通りです。
■補足説明
画面アイテム構成ファイル(3/3)
14
■補足説明
画面アイテムの動作確認
追加したファイルを、FormaやIM-BISから呼び出して、動作確認をして
ください。チェックポイントは以下となります。
・Formaの「アプリ」として利用可能か。
・Formaの「IM-Workflow」として利用可能か。承認可能か。
・IM-BISのフォームとして利用可能か。承認可能か。
・追記設定が利用可能か。（追記設定できないアイテムもあります。）
・参照画面で利用可能か。
追加アイテム
の挙動を確認
15
■アイデアコンテストのご紹介
時期
マイルストーン
メイン担当
備考
4月
企画発表
アイデア募集
IM社
→パートナー様
Accelコンソーシアムに
て
5月～
6月30日
アイデア考案
アイデア資料作成
パートナー様
パートナーサイトにて
7月初旬
人気投票
IM社/パートナー様
パートナーサイトにて
7月
選考・発表
（4案）
IM社
選考方法は検討中
Accelコンソーシアムにて8月～9月
実現方法検討
選考されたパート
ナー様・IM社
Formaアイテム作成集中
講座
9月～10月 開発
選考されたパート
ナー様
10月
実現アイテムの紹介
選考されたパート
ナー様
EWS
１Q
２Q
３Q
４Q
アイデア募集
★説明
★発表・表彰
選考
実現方法検討・開発
★EWS
本日
16
■Formaアイデアコンテストについて
応募アイデア、優秀アイデア
レーティングバー 手書きフィールド スクリプトホルダー 命名規則設定 スライダーアイテム 現在位置情報の取得アイテム 伏字入力テキスト Googleマップ連携アイテム プログレスバーアイテム 暗号化データ入力アイテム 動画アイテム 隠しパラメータ一括管理アイテム アイコンアイテム 統計情報の収集 音声アイテム 部品検索機能 PDFビューワー 色弱用画面作成 駅すぱあと連携アイテム viewcreator連携アイテム タイムリミットアイテム 画面ロック機能 テーマアイテム メッセージ連携アイテム GoogleMaps地図アイテム ファイル内検索機能 タブアイテム 制御アイテム ポップアップダイアログアイ テム D&D対応入力項目 ガントチャートアイテム 明細テーブルアイテム機能追加 IMBoxタイムラインアイテム コンボボックス（入力＋選択） 画面保存確認(タイマー) Ajax通信設定アイテム バルーンフィールド 時刻選択アイテム ファイルアップロード拡張アイテム POST送信アイテム グラフ描画アイテム グラフアイテム iAC連携部品 スケジュール パンくずリストアイテム 動的ラベルアイテム 郵便番号住所変換アイテム iAC連携部品 ファイルライブラリ 音声入出力アイテム 電卓アイテム 時刻範囲選択アイテム iAC連携部品 アンケート(予定) 作業時間記録アイテム 書式テキストアイテム スクリーンキーボード入力アイテム iAC連携部品 電子会議室(予定) 登録済みフォーム検索アイテム FindBugsアイテム 付箋アイテム 営業日数計算アイテム ajaxリクエスト送信アイテム ボタングループアイテム チェックボックスの機能強化 年齢計算アイテム 金融機関入力部品 ドラッグボックスアイテム アコーディオンアイテム WF申請/処理アイテム 条件付き必須テキストボックス データソース無しコンボボッ クス 音声認識入力アイテム 登録ボタン拡張アイテム 距離計算アイテム 郵便番号→住所自動入力アイ テム アコーディオン領域の作成アイテム IM-Wirkflowへの部署設定引き渡し 複数選択しての座標位置調整機能 Excelファイル、Wordファイ ルなどをForma内で見られる 部品 明細テーブルの強化（１）列 定義 一覧選択 で複数 列 設定 各アイテムの表示スタイルにimui-cssの選択肢を追加 絞り込み機能付きセレクト/リストボックスセット ログインユーザのロールで フォームに配置してあるアイ テムの表示・非表示設定 CSVでのフォーム編集内部品 インポート フォーム編集時のフィールド一覧の項目追加 ストレージサービスのイメージを動的に表示するアイテム ドラッグ&ドロップアイテム メニューアイテム 時間入力補助アイテム期間中、
全88アイテムの応募
がありました。たくさんのご応募ありがとうございます！
人気投票、実現性審査の結果、88アイテム中以下の4アイテムが表彰されました。
17
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
PDFビューワー
アイテム名
PDFファイルをダウンロードせず、画面上で閲覧可能となります。
具体的には、以下のようなことがアイテムで実現できます。
・ファイルライブラリ等に存在するPDFを、Formaの画面上で閲覧
・ユーザがPDFをアップロード→内容を画面上で確認してワークフ
ロー処理
概要/アピールポイント
15日
作成期間
18
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
PDFを表示するアイテムを2種類作成。
今回作成したアイテム
・PDFアップロードアイテム
ユーザのファイルアップロードした
PDFを表示
作成期間…8日
・PDFプレビューアイテム
パブリックストレージや、URL上の
PDFを表示
作成期間…7日
19
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
デモ
20
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
プロパティ設定(PDFアップロードアイテム)
ラベルのみ指定
21
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
プロパティ設定(PDFプレビューアイテム)
PDFの配置場所を設定する。
例. ファイルライブラリのURL
ファイル操作で配置したPDF
22
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
フォーム画面(PDFアップロードアイテム)
下にあるアイテムは
23
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
今回のコンテストで約20アイテムのアイディアを投稿し
ました。
表彰頂いたアイテム以外も作成し、公開する予定です。
自社製品と組み合わせたアイテムも作成中です。
※詳細は会社HPに記載予定。
会社HP:
http://global-solutions.co.jp/
以下のアイテム作成済
時刻選択アイテム
スクリーンキーボード入力アイテム
アイコンアイテム
スライダーアイテム
Wikiページ表示アイテム
ログイン履歴表示アイテム
今後の予定
24
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
作成済アイテムの紹介(時刻選択アイテム)
時刻をマウスクリックで
入力可能なアイテム
プロパティで開始時刻、
終了時刻、時間単位を指定
作成期間…7日
25
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
作成済アイテムの紹介(キーボード入力アイテム)
テンキーをマウスクリック
で入力できるアイテム
(キーボード入力アイテム
の前段階として作成)
プロパティで値のマスキング表示、
キーのランダム表示が指定可能
作成期間…5日
26
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
作成済アイテムの紹介(アイコンアイテム)
アイコンとテキストを
セットで表示するアイテム
アイコンはCSS Sprite
Image Listに記載された
ものを利用可能
作成期間…4日
27
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
作成済アイテムの紹介(スライダーアイテム)
スライダーの移動によって
値入力できるアイテム
プロパティでスライダーの
値範囲、刻み幅の指定が可能
作成期間…4日
28
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
作成済アイテムの紹介(自社製品アイテム)
製品「Wiki」のアイテム
→作成したwikiページを表示
製品「ログイン履歴」のアイテム
→前回のログイン履歴を表示
29
株式会社グローバル・ソリューションズ
会社名
窓口：営業本部 永久
電話：03-6802-7147
E-Mail：
[email protected]
本社所在地：東京都江東区有明3-6-11 TFTビル東館9階
アクセス：りんかい線「国際展示場」駅 徒歩５分
ゆりかもめ「国際展示場正門」駅 直結徒歩約１分
お問合せ窓口
http://global-solutions.co.jp
URL
■表彰作品のご紹介
株式会社グローバル・ソリューションズ様
30
■表彰作品のご紹介 株式会社東海ソフトウェア様
郵便番号→住所自動入力アイテム
アイテム名
intra-martより提供されている「郵便番号検索機能」を利用し、郵
便番号、住所が自動で入力されるアイテムです。
概要/アピールポイント
3日
作成期間
住所番号検索画面を表示
設定した住所をセット
31
■表彰作品のご紹介 株式会社東海ソフトウェア様
デモ
32
■表彰作品のご紹介 株式会社東海ソフトウェア様
http://www.tokaisoftware.co.jp
33
■表彰作品のご紹介 株式会社エコー・システム様
登録ボタン拡張アイテム
アイテム名
アプリケーション種別「標準」の登録ボタンを使用した際
登録後の挙動を簡単に制御できると便利と思います。
登録ボタンに以下のような設定ができるアイテムを作成したいです。
■遷移あり
○登録完了（インフォメーション）ページへ ※デフォルト
○任意ページへ
・ＵＲＬ設定：http://～
・パラメータ：キー、値
■遷移なし ※リロードなし
○メッセージ：登録できました。
○任意スクリプト：alert("hogehoge");
概要/アピールポイント
5日
作成期間
34
■表彰作品のご紹介 株式会社エコー・システム様
デモ
35
【標準版の登録ボタン】の場合
登録画面
登録後の挙動は、画面遷移のみ
36
【拡張版の登録ボタン】の場合
登録画面任意の画面に遷移
・ＵＲＬの設定
・ＧＥＴ、ＰＯＳＴ
・パラメータの設定
画面遷移なし
・メッセージ表示
・スクリプトの設定
37
【拡張版の登録ボタン】の場合
登録後の挙動は、プロパティで設定できるように拡張
（拡張設定タブを追加）
38
【拡張版の登録ボタン】の場合
任意URL設定
メッセージ設定
スクリプト設定
画面遷移あり・なし
39
用途（当アイテムで出来ること）
#### 機能紹介 ###
スクリプトを設定できることであれば
様々な挙動を実現できます！
例えば・・・
40
二重送信防止！（登録ボタンを非活性に変更）
■プロパティにスクリプトを設定
$(registButton).attr('disabled','disabled');
$(registButton).css("color","#9932cc");
41
二重送信防止！（登録ボタンを非活性に変更）
42
一時保存！（登録モードを更新モードに変更）
$(registButton).val("更新ボタンに変更しました。 "); $("#imfr_response_type").val("EDIT"); var _imfr_version_no = $("#imfr_version_no").val();if (typeof _imfr_version_no === 'undefined') { //form_areaにelement生成 var q = document.createElement('input'); q.type = 'hidden'; q.id = 'imfr_version_no'; q.name = 'imfr_version_no'; q.value = 1; $('#form_area').append(q); } else { //インクリメント _imfr_version_no = parseInt(_imfr_version_no) + 1; $("#imfr_version_no").val(_imfr_version_no) ; }
43
画面遷移なしで、何度でも登録（更新）出来ます！
44
//印刷用関数作成
var PrintArea = function(el){ //テーブルＩＤ取得
var getTableId = function(itemId){ // table要素
var $table = $('div[table_id=' + itemId + ']').children('table.imfr_item_table:eq(0)'); return $table[0].id;
}
var _id = getTableId('sampleTable'); //alert(_id);
var element = document.getElementById(_id); //html2canvas.js取得 $.getScript("http://lesancedt:8282/imart/html2canv as.js", function(){ //html2canvas.js取得後に実行 html2canvas(element, { onrendered: function(canvas) { //IFRAME作成 var iframe = document.createElement('iframe'); iframe.id = "print-iframe"; document.body.appendChild(iframe); var iframe_doc = iframe.contentWindow.document; iframe_doc.write('<html>'); iframe_doc.write('<head>'); //iframe_doc.write('<style type="text/css">#canvas-image { }</style>'); iframe_doc.write('</head>'); iframe_doc.write('<body>'); iframe_doc.write('<img id="canvas-image"/>'); iframe_doc.write('</body></html>'); //作成したIFRAMEに画像データを流す var iframe = document.getElementById("print-iframe"); var iframeWindow = iframe.contentWindow; var imageElement = iframeWindow.document.getElementById("canvas-image"); if ( typeof canvas.toBlob === "function" ) { var blobURL = URL.createObjectURL(canvas.toBlob()); imageElement.src = blobURL; } else {
var dataURL = canvas.toDataURL(); imageElement.src = dataURL; } iframeWindow.print(); //作成したIFRAME削除 //document.body.removeChild(iframe); } }); }); } //印刷関数実行 PrintArea(registButton);
特定の画面項目を印刷！
45
明細テーブルのみを印刷することも出来ます！
46
その他
Ａｊａｘでサーバサイドの処理を実行
・IMBOX連携
・メール送信
・スケジュール更新
・ダウンロード
・他システム連携
・etc
画面連携の制御
・親画面スクリプト実行
・ポップアップ画面閉じる
47
48
参考：開発の流れ
49
参考：開発の流れ
ドキュメントやforma-config.xmlなどを参考に
標準版の登録ボタンのモジュールを特定
### 流用 ###
別のフォルダに
ファイルコピー
一から作ると大変手間です。
出来るだけ、使える部品を探し流用すると効率Ｕ
Ｐ！
次に、製品アイテムの解析、使える部品を探す作業を行いました。
調査スキル：スクリプト開発、 jQuery
50
参考：開発の流れ
パッケージ名の変更
アイテムＩＤの変更
メッセージプロパティの変更
流用したファイルを変更
51
参考：開発の流れ
機能追加作業 ： プロパティに拡張項目を追加
実装スキル：スクリプト開発、 jQuery
52
参考：開発の流れ
機能追加作業 ： 登録ボタン処理の変更
reference.html
53
まとめ（感想）
■良い点
製品を直接カスタマイズすることなく、アドオンアイテムとして、実装することが出来
ます。
既存の部品を流用（コピー）することで、効率的に開発出来ます。
■留意点
はじめは、実装機能のイメージ作りが大変でした。
Formaのアーキテクチャを理解すること、どんな追加機能・振舞いにするか、
どの部品を流用するか、モジュール構成やシーケンスはどうするかなど
2～3人日程度悩みました。（想定以上に時間を費やした印象です）
また、スクリプト開発、JQueryのプログラミング経験も重要かと思いました。
経験が乏しいと、出来ることも限られます。工数にも大きく影響します。
アイテム作りは、慣れが必要な印象でしたが、1度体験すれば、
ポイントが理解できるので、まずは一つ作ってみるのも、習得のコツかと思いました。
54
株式会社エコー・システム
会社名
エコー・システム 東京事業所
〒101-0032
東京都千代田区岩本町2-1-17 鈴与日本橋ビル4F
TEL：（03）5835-0770 ／ FAX：（03）5835-0771
担当：坂根（[email protected]）
お問合せ窓口
エコー・システム ホームページ
http://www.echosystem.co.jp/
URL
■表彰作品のご紹介 株式会社エコー・システム様
55
■表彰作品のご紹介 株式会社フォーカスシステムズ様
メッセージ連携アイテム
アイテム名
複数行文字列アイテムに入力された文字列を、設定された送信先へと連携するアイテムです。 メッセージ連携処理には、IM-MessageHubを利用しており、 IM-MessageHubに用意された送信先はもちろんのこと、その特性を活かし、簡単に送信先を拡 張することが可能な構成となっております。※ IM-MessageHub 標準の連携先：「メール」「 IMBox 」「 IM-Notice 」 また、 Forma標準のDB登録仕様を活用し、対象のメッセージWEBサービスにより公開し、外部連携を 可能にします。 今後、活用の枠を広げるため以下の連携先を拡張していく予定です。 ・SNS連携（twitter、facebookなど） ・外部WEBサービス
