スライド 1

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 デプロイ SkyVisualEditorの 標 準 機 能 にはない グラフの 表 示 Copyright 2015 TerraSky Co.,Ltd. All Rights Reserved. 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 Motionboard for salesforce AppMove ワークフロー 郵 便 番 号 の 一 部 を 入 力 することにより 住 所 リストから 都 道 府 県 市 区 郡 町 名 番 地 の 項 目 を 自 動 的 に 入 力 することができます 標 準 オブジェクトやカスタムオブジェクト カスタム 項 目 で 動 作 します 選 択 リスト 項 目 テキスト 項 目 の 選 択 肢 を 画 面 単 位 で 自 由 に 設 定 変 更 することが できます また 選 択 リスト 項 目 に 自 由 な 文 字 列 を 入 力 可 能 にすることもできます 株 式 会 社 ジラッファが 提 供 するガントチャートアプリです AppComponentとしてご 利 用 いただくことで Salesforceで 管 理 している 取 引 先 取 引 先 責 任 者 商 談 に 紐 づく ToDoや 行 動 を 自 由 な 位 置 にガントチャートとして 配 置 できます ウイングアーク1st 株 式 会 社 が 提 供 するクラウド 型 のレポート ダッシュボード&BI( 意 思 決 定 支 援 ソフト) 製 品 です Motionboard for salesforceをappcomponentと してご 利 用 いただくことで 自 由 な 位 置 に 非 常 に 表 現 力 の 高 いボードを 配 置 できます 株 式 会 社 インタームーブが 提 供 するワークフローアプリです 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を 選 択 し(1) 画 面 右 側 に 表 示 されるプロ パティエリアにある 郵 便 番 号 項 目 ID のアイコン( )を 選 択 します (2) 次 に 画 面 上 に 配 置 した 郵 便 番 号 の 入 力 項 目 を 選 択 します (3) この 操 作 を 都 道 府 県 市 区 町 村 町 域 と 設 定 します カナを 設 定 する 際 も 同 様 の 手 順 です すべてを 選 択 できれば 画 面 をデプロイすれば 設 定 は 完 了 です 3 2 1 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を 選 択 し(1) 画 面 右 側 に 表 示 されるプロパティエリアにある[ 直 接 編 集 可 ]のチェックボックスをONにします (2) 次 に [1. 対 象 項 目 ]のアイコン( )を 選 択 し(3) 項 目 を 直 接 入 力 できるようにしたい 選 択 リスト 型 の 項 目 を 選 択 します (4) 最 後 に 画 面 をデプロイすれば 設 定 は 完 了 です なお 選 択 した 項 目 を 解 除 したい 場 合 は ( )のアイコンをダブルクリックしてください 4 2 3 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を 選 択 し(1) 画 面 右 側 に 表 示 される[ 対 象 項 目 ]のアイコン( )を 選 択 し(2) 項 目 を 直 接 入 力 できるようにしたい 選 択 リスト 型 の 項 目 を 選 択 します (3) 次 に [ 選 択 リスト 値 ]のアイコン( )を 選 択 した 際 に 表 示 されるダイアログに 定 義 したい 選 択 肢 の リストを 入 力 します (4) 最 後 に 画 面 をデプロイすれば 設 定 は 完 了 です 4 2 3 1 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:product.sales@terrasky.co.jp 問 合 せ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