AppComponentをつかってみよう

SkyVisualEditorオンラインセミナー
～第10回 基本編～
AppComponentをつかってみよう
2015年2月10日（火）
はじめに
本セミナーの目的
SkyVisualEditorの機能および設定方法の紹介を目的としています
本日のセミナーのご対象者
・ AppComponentについて興味・ご関心のあるご担当者様
・ AppComponentの利用方法についてお困りのご担当者様
本セミナーのゴール
AppComponentの概要と設定方法を理解する。
※ SkyVisualEditorの製品概要については以下をご覧ください。
（http://info.skyvisualeditor.com/）
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
2
SkyVisualEditorのコンテンツについて
SkyVisualEditorの設定ガイドやTipsなどのコンテンツをWebで公開しています。是非、ご活用ください。
（http://info.skyvisualeditor.com/developer/beginner/）
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
3
本日のアジェンダ
1. AppComponentのご紹介
2. AppComponent 「住所補完」をつかってみよう
3. AppComponent 「編集可能な選択リスト」をつかってみよう
※ 本セミナーの詳細な内容は以下操作マニュアルをご覧ください。
（https://www.skyvisualeditor.com/help/skyvisualeditor_help.pdf）
※ 当資料のロゴや設定画面はSalesforceのバージョンアップによって変更する可能性がございます。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
4
1. AppComponentのご紹介
2. AppComponent「住所補完」をつかってみよう
3. AppComponent「編集可能な選択リスト」をつかってみよう
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
5
SkyVisualEditorの拡張機能
SkyVisualEditorはSalesforceの画面開発サービスとして、豊富なUIコンポーネントを標準機能として
提供しております。さらに、お客様の個別のご要件にお応えするための拡張機能を用意しております。
今回は、このうち「AppComponent」という拡張機能について紹介いたします。
拡
張
AppComponent
独自画面の表示や
個別処理の実行
ApexClass拡張
JavaScript/CSS
サーバーサイド側での
個別処理の実行
クライアントサイド側での
個別処理の実行/
スタイルの変更
UI
DB
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
6
AppComponentとは
AppComponentとは、SkyVisualEditorの標準コンポーネントで提供されていないお客様独自の機能
（個別処理や画面表示など）を拡張できる部品（コンポーネント）です。
AppComponentはSkyVisualEditorの標準コンポーネント同様に、お客様のSkyVisualEditor上で、
ドラッグ＆ドロップとマウスクリックの操作により設定できます。
本セミナーでは、AppComponentのメリットや使い方の流れを紹介します。
▼ SkyVisualEditor Studio
▼ デプロイ後のSalesforce画面
デプロイ
AppComponent
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
SkyVisualEditorの
標準機能にはない
グラフの表示
7
AppComponentを活用するメリット
AppComponentをご活用いただくメリットは以下の通りです。
1. AppComponentはドラッグ＆ドロップおよびマウスクリックの操作で画面上に設定できるため、
開発生産性が大きく向上します。
2. お客様自身で開発いただく必要はありますが、SkyVisualEditorの標準コンポーネントにない
機能を独自に用意することで画面の利便性を向上できます。
3. お客様の個別要件をAppComponentとして部品化することで、画面毎に同じ処理やテスト
クラスを繰り返し開発する必要がなくなります。
4. AppComponentは既存のコンポーネントと独立した部品のため、仕様変更が発生した際に
修正個所を減らすことができます。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
8
AppComponent一覧
AppComponentには、弊社の開発チームが独自に提供しているコンポーネントと、弊社パートナー様に
AppComponent対応いただいた有償のコンポーネントがございます。
現在公開しているコンポーネントの一例は以下の通りです。以下URLより詳細をご確認いただけます。
（http://info.skyvisualeditor.com/developer/use/appcomponent.php）
無償
住所補完
郵便番号の一部を入力することにより、住所リストから都道府県、市区郡、町名番地
の項目を自動的に入力することができます。
標準オブジェクトやカスタムオブジェクト、カスタム項目で動作します。
編集可能な選択リスト
選択リスト項目、テキスト項目の選択肢を画面単位で自由に設定変更することが
できます。 また選択リスト項目に自由な文字列を入力可能にすることもできます。
SuperGanttChart
株式会社ジラッファが提供するガントチャートアプリです。AppComponentとしてご利
用いただくことで、Salesforceで管理している取引先・取引先責任者・商談に紐づく
ToDoや行動を自由な位置にガントチャートとして配置できます。
Motionboard
for salesforce
ウイングアーク1st株式会社が提供するクラウド型のレポート・ダッシュボード＆BI（意思
決定支援ソフト）製品です。Motionboard for salesforceをAppComponentと
してご利用いただくことで、自由な位置に非常に表現力の高いボードを配置できます。
AppMove
ワークフロー
株式会社インタームーブが提供するワークフローアプリです。Salesforceの標準を超え
た日本独特のワークフローをクリックベースで簡単に利用でき、AppComponentとして
ご利用いただくことで、申請用紙と同じレイアウトのワークフローシステムを実現できます。
有償
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
9
AppComponentの使い方
AppComponentをご利用いただく際の手順は以下の通りです。
1. AppComponentをご利用のSalesforce組織へインストール
2. AppComponentをSkyVisualEditorの画面上に配置
3. 配置したAppComponentのプロパティ設定
4. デプロイ
また、今回は説明いたしませんが、AppComponentはお客様自身でご作成できます。
作成方法は、以下URLをご確認ください。
（http://info.skyvisualeditor.com/developer/develop/）
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
10
1. AppComponentのご紹介
2. AppComponent 「住所補完」をつかってみよう
3. AppComponent「編集可能な選択リスト」をつかってみよう
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
11
AppComponent「住所補完」について
AppComponentの「住所補完」は、郵便番号を入力することで住所候補を表示させ、選択した
住所を住所項目（都道府県、市区郡、町名・番地）に設定できる機能です。
郵便番号は3ケタ以上入力すると、候補一覧が表示されます。
▼ 住所の候補一覧の表示
▼ 候補一覧より住所を選択した後の画面
選択した住所が
入力項目に
反映されます
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
12
「住所補完」機能の設定（AppComponentのインストール）
まず、ご利用のSalesforce組織に「住所補完」のAppComponentをインストールします。
以下URL内の「SkyVisualEditor標準AppComponent」をクリックし、[パッケージインストール]より、
AppComponentをお客様のSalesforce組織へインストールしてください。
（http://info.skyvisualeditor.com/developer/use/appcomponent.php）
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
13
「住所補完」機能の設定（画面への配置）
「SkyVisualEditor標準AppComponent」をインストールすると、SkyVisualEditorスタジオに
AppComponentセクションにインストールしたAppComponent一覧が表示されます。
一覧の中から、「住所補完」を画面へドラッグ＆ドロップにより配置します。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
14
「住所補完」機能の設定（プロパティ設定）
次にプロパティの設定をします。
まず、画面に配置した「住所補完」のAppComponentを選択し（①）、画面右側に表示されるプロ
パティエリアにある「郵便番号 項目ID」のアイコン（
）を選択します。（②）
次に、画面上に配置した郵便番号の入力項目を選択します。(③)
この操作を「都道府県」「市区町村」「町域」と設定します。カナを設定する際も同様の手順です。
すべてを選択できれば、画面をデプロイすれば、設定は完了です。
③
②
①
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
15
[参考] 最新の郵便番号データの取得方法
住所補完のAppComponentをインストールする際に、「ZipCodeSupport」という名前で静的リソースに
郵便番号データをお客様のSalesforce組織にインストールします。
この郵便番号データを最新の郵便番号データへ更新する方法は以下の通りです。
なお、詳細な設定方法については、以下ヘルプをご覧ください。
（https://s3.amazonaws.com/www.skyvisualeditor.com/AppComponent/SkyVisualEditor/appcomponent_skyvisualeditor_guide.pdf）
1. 以下のURLより、最新の郵便番号データのZipファイルをローカルへダウンロードします。
（https://s3.amazonaws.com/www.skyvisualeditor.com/AppComponent/SkyVisualEditor/ZipCod e/ZipCodeConverter.zip）
2. ダウンロードしたZipファイルを、お客様のSalesforce組織の静的リソースへ保存します。
3. SkyVisualEditor Studioで配置しているAppComponent「住所補完」のプロパティの最下部
にある「郵便番号リソース名」に、2.で設定した静的リソースの名前をコピーし、デプロイ。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
16
1. AppComponentのご紹介
2. AppComponent「住所補完」をつかってみよう
3. AppComponent 「編集可能な選択リスト」をつかってみよう
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
17
AppComponent「編集可能な選択リスト」について
Salesforceの「選択リスト」型の項目は、ユーザ定義のリストからプルダウン形式で値を選択できます。
しかし、入力できる値はユーザ定義のリスト（選択肢）のみとなり、選択肢以外の値を手入力で入力する
ことはできません。
AppComponentの「編集可能な選択リスト」をご利用いただくことで、プルダウン形式の入力と、編集可能
なテキスト形式を組み合わせた、コンボボックス形式の入力を実現できます。
選択肢だけでなく、テキスト
を直接入力できます。
▲ Salesforce標準の「選択リスト」型の項目の場合
▲ 「編集可能な選択リスト」を使用した場合
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
18
「編集可能な選択リスト」機能の設定（画面への配置）
p.13でインストールした「SkyVisualEditor標準AppComponent」 の中に、「編集可能な選択リスト」の
AppComponentも含まれていますので、p.13ですでにパッケージをインストールしている場合は、再度
インストールは不要です。インストールがまだの方は、p.13をご覧ください。
画面への配置の手順は、「住所補完」のAppComponentと同様、設定したい画面へ「編集可能な選択
リスト」を配置します。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
19
「編集可能な選択リスト」機能の設定（プロパティ設定）
次にプロパティの設定をします。
まず、画面に配置した「編集可能な選択リスト」のAppComponentを選択し（①）、画面右側に
表示されるプロパティエリアにある[直接編集可]のチェックボックスをONにします。（②）
次に、[1.対象項目]のアイコン（
）を選択し（③）、項目を直接入力できるようにしたい選択
リスト型の項目を選択します。（④）
最後に、画面をデプロイすれば設定は完了です。
なお、選択した項目を解除したい場合は、（
）のアイコンをダブルクリックしてください。
④
②
③
①
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
20
[参考] テキスト型項目の選択リスト化
AppComponent「編集可能な選択リスト」は、プルダウン形式の選択リスト型の項目をコンボボックス
形式に変更するだけでなく、Salesforceの「テキスト」型の項目に対して、SkyVisualEditor側で
定義したリストを選択肢として表示することができます。
▼ Salesforce標準の「テキスト」型の項目の場合
▼ 「編集可能な選択リスト」を使用した場合
テキスト型の項目に
SkyVisualEditor側で
定義したリストを選択肢と表示
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
21
[参考] テキスト型項目の選択リスト化（設定方法）
設定方法は、p.20の選択リスト型の項目への設定の流れと同様です。
まず、画面に配置した「編集可能な選択リスト」のAppComponentを選択し（①）、画面右側に
表示される[対象項目]のアイコン（
）を選択し（②）、項目を直接入力できるようにしたい選
択リスト型の項目を選択します。（③）
次に、[選択リスト値]のアイコン（
）を選択した際に表示されるダイアログに定義したい選択肢の
リストを入力します。（④）最後に、画面をデプロイすれば設定は完了です。
④
②
③
①
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
22
[参考] 「編集可能な選択リスト」に関するFAQ
1. 選択リスト型、テキスト型の項目以外でも適用できますか？
適用できません。
プロパティ設定上は、選択リスト型、テキスト型以外のデータ型の項目にも設定はできますが、
正常動作をしなくなるため設定しないようお願いいたします。
2. 選択リスト型の項目にスタジオで選択肢を指定した場合どうなりますか？
SkyVisualEditor側で定義したリストが、Salesforce側で定義しているリストを上書きします。
そのため、選択リスト型の項目にSkyVisualEditor スタジオ側で選択肢を指定する場合は、
ご注意ください。
3. データテーブル内の関連オブジェクトの項目へも適用できますか？
適用できます。
設定の流れは、当資料で紹介した流れと同様ですが、該当の関連オブジェクトを配置している
データテーブルの[JavaScript」プロパティに、以下のスクリプトを記述ください。
----ChangeSelectList.changeSelectinTable();
-----
その他の詳細な内容については、操作マニュアルをご覧ください。
（https://s3.amazonaws.com/www.skyvisualeditor.com/AppComponent/SkyVisualEditor/appcomponent_skyvisualeditor_guide.pdf）
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
23
お役立ち情報
・セミナー/イベント情報
・サポート窓口
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
24
サポート窓口
SkyVisualEditorの機能/設定に関するお問合せ
SkyVisualEditorのご契約者様は、以下の専用問合せページよりお問合せいただけます。
SkyVisualEditorの標準の機能/設定に関するお問合せは無償です。
また、別途、有償サポートのプランも用意しております。詳しくは以下問合せE-Mailより
お問合せください。
契約者様専用問合せページ：https://terrasky.secure.force.com/ProductSupport
SkyVisualEditorのご導入に関するお問合せ
SkyVisualEditorに関するお問合せは以下お問合せフォームおよびメールアドレス、
お電話番号にて受け付けています。お気軽にお問合せください。
問合せフォーム：https://www.terrasky.co.jp/contact/support/index.php
問合せE-Mail：[email protected]
問合せTEL ：03-5255-3411
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
25
セミナー・イベント情報
SkyVisualEditorの事例を知る、体験する
• 3月20日（金） 14:00-17:00 「SkyVisualEditor紹介＆体験セミナー」
（http://www.terrasky.co.jp/event/2015/0320-001.php）
SkyVisualEditorを学習する
• SkyVisualEditor標準トレーニング
SkyVisualEditorの基本的な機能を網羅したプライベート研修です。
標準トレーニングをご受講いただくことで、SkyVisualEditorの基本的な
操作手順をご理解いただけます。
[SkyVisualEditor標準トレーニング内容]
12万円/回（税別） 1回あたり4名様までご受講いただけます。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
26
次回以降のオンラインセミナーについて
第11回 活用編 「AppComponentをつかってみよう その2」（予定）
3月10日（火） 15:30-16:00
第11回は、弊社で独自に作成したAppComponentを紹介します。
PDFの改ページや項目変更履歴の表示など実際の案件でもご利用いただけそうな機能を
紹介します。
第12回 活用編 「SkyVisualEditorの便利な機能 その3」（予定）
4月7日（火） 15:30-16:00
第12回は、JavaScriptやCSSを使ったSkyVisualEditorの拡張機能について
紹介します。JavaScriptやCSSの設定方法や活用例を紹介します。
Copyright © 2015 TerraSky Co.,Ltd. All Rights Reserved.
27