他のテンプレートの機能を活用する方法を知りたい

この記事では、他のテンプレートを参考にして、作成中のアプリケーションに機能や画面デザインを取り入れる方法について紹介します。

Accel Studioには、さまざまな業務に対応したテンプレートが用意されています。テンプレートからアプリケーションを作成するだけでなく、他のテンプレートの画面やロジックを参考にして、自分のアプリケーションをカスタマイズすることもできます。

参考にしたいテンプレートからアプリケーションを作成し、画面デザインやアクション、ロジックフローの設定などを確認してみましょう。

他のテンプレートを参考にする

Accel Studioのテンプレートは、アプリケーションを作成するためのだけでなく、画面やロジックを作成するときの参考としても活用できます。

たとえば、次のような場合に、ほかのテンプレートを参考にできます。

• スマートフォンに対応した画面を作成したい
• 現在時刻を画面に表示したい
• 一覧テーブルやグラフを表示したい
• カード型のデザインを作成したい
• IM-共通マスタのユーザを検索したい

このような機能を一から作成する場合、画面の構成やエレメントの設定、ロジックの組み立てなどを検討する必要があります。そこで、目的に近いテンプレートを参考にすることで、実際の設定を確認しながら、自分のアプリケーションに合わせてカスタマイズできます。

アプリケーションに機能を追加する場合との違い

Accel Studioでは、「オプションテンプレート」を利用して、既存のアプリケーションに機能を追加することもできます。たとえば、「ファイルアップロード」や「CSVインポート」・「CSVエクスポート」など、「オプションテンプレート」として提供されている機能は、テンプレートを利用してアプリケーションに追加できます。

一方、他のテンプレートを参考にする方法では、テンプレートから作成したアプリケーションの画面やロジックを確認し、その設定を参考にして自分のアプリケーションをカスタマイズします。

他のテンプレートを参考にする方法

他のテンプレートを参考にする場合は、次の方法があります。

1. 参考にしたいテンプレートからアプリケーションを作成する
2. 作成済みのアプリケーションを確認する

テンプレートの設定を詳しく確認したい場合は、参考にしたいテンプレートからアプリケーションを作成し、画面やロジックを確認します。また、過去にテンプレートを利用して作成したアプリケーションがある場合は、そのアプリケーションを開いて設定を確認することもできます。

テンプレートからアプリケーションを作成する

参考にしたいテンプレートからアプリケーションを作成します。作成したアプリケーションの管理画面から、画面やロジックなどの設定を確認できます。

たとえば、画面のデザインを参考にしたい場合は、画面に配置されているエレメントやアクション設定を確認します。処理を参考にしたい場合は、ロジックのフローや入出力設定などを確認します。このように、実際の設定を確認しながら、自分のアプリケーションに必要な部分を取り入れていきます。

参照用に作成したアプリケーションを削除する

参照用にアプリケーションを作成した場合、確認が終わった後、アプリケーションを削除できます。

アプリケーションに取り入れたい機能から探す

ここからは、アプリケーションを作成するときによく利用される機能を例に、どのテンプレートを参考にできるか、どの設定を確認すればよいかを紹介します。

• スマートフォンに対応したい場合
• 現在の日時を表示したい場合
• 一覧テーブルとグラフを表示したい場合
• カード型のデザインを作成したい場合
• IM-共通マスタのユーザを検索したい場合

なお、ここで紹介するケースは、アプリケーションを作成している途中で「新たな機能を追加したい」と検討している状況を想定しています。そのため、上記「2. 作成済みのアプリケーションを確認する」方法を前提に説明します。

スマートフォンに対応したい場合

スマートフォンにも対応したレスポンシブな画面を作成したい場合は、「打刻アプリ」テンプレートを参考にできます。

---

＜参照方法＞

｢打刻アプリ」テンプレートをもとにアプリケーションを作成し、「アプリケーション管理」画面を表示します。

画面を確認する

［画面］タブから「打刻画面」を開き、レスポンシブデザインに関連するエレメントを確認してみましょう。［画面構成］をクリックすると、使用されているエレメントが表示されます。

• エレメント「カラム」：複数のエレメントを横方向または画面幅に応じて柔軟に並べ替える

現在の日時を表示したい場合

画面に現在の日付や時刻を表示したい場合は、「打刻アプリ」テンプレートを参考にできます。

---

＜参照方法＞

｢打刻アプリ」テンプレートをもとにアプリケーションを作成し、「アプリケーション管理」画面を表示します。

画面を確認する

［画面］タブから「打刻画面」を開き、日時に関する設定を確認してみましょう。

• 変数：$variable.state.dateTime、$variable.responseData.getSystemDateなど
• アクション設定「Get System Date」：「システム時刻取得処理」を呼び出す
• アクション設定「Get Color of Time」：画面の色味を時間に合わせて変化させる
• アクション設定「Get Weekday From SystemDate」：取得した日時を曜日に変換する

処理を確認する

［ロジック］タブから「システム時刻取得処理」を開き、日時に関する設定を確認してみましょう。

• 入出力設定：出力値（systemDate、dateTime）
• 「終了」制御要素のマッピング設定：マッピング関数formatWithAccountTimeZoneなど

一覧テーブルとグラフを表示したい場合

一覧テーブルを表示し、その集計結果をグラフで表示したい場合は、「タスク管理」テンプレートを参考にできます。

---

＜参照方法＞

｢タスク管理」テンプレートをもとにアプリケーションを作成し、「アプリケーション管理」画面を表示します。

画面を確認する

［画面］タブから「タスク一覧画面」を開き、一覧やグラフを確認します。

一覧テーブルについては、［Table］コンテナヘッダ内のエレメントを確認します。

• エレメント「テーブルコンテナ（繰り返し）」：表形式（行と列）で配置する
• 変数：$variable.state.tableData、$variable.endPoint.listなど
• アクション設定「Load Table Data」：「タスク一覧参照処理」を呼び出す

グラフについては、［Graph］コンテナヘッダ内のエレメントを確認します。

• エレメント「円グラフ」：円グラフを表示する
• 変数：$variable.state.graphData、$variable.endPoint.pieChartなど
• アクション設定「Load Pie Chart Data」：「タスク円グラフデータ取得処理」を呼び出す

処理を確認する

［ロジック］タブから該当する処理を開きます。一覧テーブルについては、「タスク一覧参照処理」を開き、フローや入出力設定などを確認します。グラフについては、「タスク円グラフデータ取得処理」を開いて確認してください。

• 一覧テーブル：「タスク一覧参照処理」の入出力設定、定数設定、マッピング設定
• グラフ：「タスク円グラフデータ取得処理」の入出力設定、定数設定、マッピング設定

カード型のデザインを作成したい場合

画像や説明などを含むカード型のデザインを作成したい場合は、「自己紹介」テンプレートを参考にできます。

---

＜参照方法＞

｢自己紹介」テンプレートをもとにアプリケーションを作成し、「アプリケーション管理」画面を表示します。

画面を確認する

［画面］タブから「一覧画面」を開き、［Card List］コンテナヘッダ内のエレメントを確認します。

• エレメント「カラム（繰り返し）」：複数のエレメントを横方向または画面幅に応じて柔軟に並べ替える

IM-共通マスタのユーザを検索したい場合

IM-共通マスタに登録されているユーザを検索し、画面上で選択したい場合は、「顧客管理」テンプレートを参考にできます。

---

＜参照方法＞

｢顧客管理」テンプレートをもとにアプリケーションを作成し、「アプリケーション管理」画面を表示します。

画面を確認する

［画面］タブから「登録・編集画面」を開き、［Input Area 3］コンテナヘッダ内のエレメントを確認します。

• 変数：$variable.state.entity.inhouseManager、$variable.state.searchUserParam
• 環境情報変数：$env.const.startTime、$env.const.null
• アクション設定「on Click Add Inhouse Manager」：「複数選択ユーザ検索ダイアログを表示する」アイテム
• イベント設定：「自社担当者を選択する」ボタンにアクション「on Click Add Inhouse Manager」が設定

まとめ

Accel Studioのテンプレートは、アプリケーションを作成するためだけでなく、画面やロジックの設定を確認するための参考資料としても活用できます。

「似たような画面を作りたい」「この処理を実現したい」といった場合は、目的に近いテンプレートからアプリケーションを作成し、画面のエレメントやアクション、ロジックの設定などを確認してみましょう。テンプレートの設定を参考にしながら、自分のアプリケーションに必要な部分だけを取り入れることで、効率よくカスタマイズできます。

intra-martでは、Accel Studioをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。Accel Studioの機能を最大限に発揮させるためにも、ぜひご活用ください。