スライド 1

SkyVisualEditorオンラインセミナー ~ 第 3 回 基 本 編 ~ Salesforceでワークフローの 申 請 画 面 を 作 成 しよう 2014 年 7 月 15 日 ( 火 )

はじめに 本 セミナーの 目 的 SkyVisualEditorの 機 能 および 設 定 方 法 の 紹 介 を 目 的 としています 本 日 のセミナーのご 対 象 者 Salesforceで 既 存 の 紙 のような 申 請 画 面 を 作 成 したいとご 検 討 中 のご 担 当 者 様 SkyVisualEditorの 自 由 レイアウト の 設 定 にお 困 りのご 担 当 者 様 本 セミナーのゴール SkyVisualEditorの 自 由 レイアウト という 機 能 を 使 い 画 面 の 作 成 方 法 を 理 解 する SkyVisualEditorの 製 品 概 要 については 以 下 をご 覧 ください (http://info.skyvisualeditor.com/) 過 去 のオンラインセミナーの 資 料 は 以 下 よりご 覧 ください (http://www.terrasky.co.jp/document/skyvisualeditor/) Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 2

オンラインセミナーのコンテンツについて 毎 月 テーマに 沿 って 開 催 しています オンラインセミナーの 資 料 動 画 は 下 記 URLよりご 覧 いただけます (http://www.terrasky.co.jp/document/skyvisualeditor/) テラスカイホームページの 右 サイドバー 内 にある[Contents]バナーを クリックしてもご 覧 いただけます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 3

本 日 のアジェンダ 1. 本 日 の 完 成 イメージ 2. 申 請 画 面 の 作 成 方 法 3. 作 成 した 画 面 を 使 ってみよう 本 セミナーの 詳 細 な 内 容 は 以 下 操 作 マニュアルをご 覧 ください (https://www.skyvisualeditor.com/help/skyvisualeditor_help.pdf) 当 資 料 のロゴや 設 定 画 面 はSalesforceのバージョンアップによって 変 更 する 可 能 性 がございます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 4

1. 本 日 の 完 成 イメージ 2. 申 請 画 面 の 作 成 方 法 3. 作 成 した 画 面 を 使 ってみよう Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 5

本 日 の 完 成 イメージ( 備 品 購 入 申 請 フォーム) POINT1 既 存 帳 票 と 同 じ 入 力 フォームを 実 現 POINT3 選 択 リスト 型 の 項 目 を ラジオボタン 表 示 に 切 り 替 え POINT2 フォーカス 時 の 背 景 色 を 指 定 POINT5 SkyVisualEditorで 作 成 した 画 面 はレイアウトの 変 更 や 項 目 の 追 加 もドラッグ&ドロップの 設 定 でかんたん POINT4 数 値 項 目 を 半 角 のみの 入 力 に 指 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 6

Salesforce 標 準 画 面 の 場 合 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 7

自 由 レイアウトとは 自 由 レイアウトとはSalesforceのデザインにとらわれず 自 由 に 画 面 をデザインできるレイアウトです 既 存 帳 票 と 同 等 のレイアウトを 作 成 したり 他 のシステムやアプリケーションの 入 力 フォームを Salesforceに 再 現 したい 場 合 などに 利 用 します Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 8

1. 本 日 の 完 成 イメージ 2. 申 請 画 面 の 作 成 方 法 3. 作 成 した 画 面 を 使 ってみよう Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 9

本 日 のご 紹 介 内 容 以 下 は SkyVisualEditorで 自 由 レイアウト 画 面 を 作 成 する 際 の 流 れです 本 日 は 以 下 手 順 にそって 自 由 レイアウトを 使 った 申 請 画 面 の 作 成 方 法 をご 紹 介 いたします 1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 10

1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 11

1. 背 景 画 像 の 設 定 自 由 レイアウトは 既 存 の 帳 票 を 背 景 として 設 定 できます 既 存 の 帳 票 画 像 をSalesforceのユーザメニューより [ 設 定 ]-[アプリケーションの 設 定 ]-[ 開 発 ]-[ 静 的 リソース]を 選 択 し [ 新 規 ]ボタンをクリックし 既 存 の 帳 票 画 像 をSalesforceに 保 存 します なお 背 景 画 像 として 表 示 される 画 像 のタイプは jpeg pjpeg ping x-ping gif bmpです 画 像 のサイズが 大 きくなるとSkyVisualEditorで 作 成 したページの 描 画 速 度 が 遅 くなりますので ご 注 意 ください Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 12

1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 13

2. オブジェクト(テーブル)の 選 択 SkyVisualEditorスタジオへのログイン 後 メニューエリアの[ファイル]-[ 新 規 ]をクリックし レイアウトマネージャより [ 自 由 レイアウト]を 選 択 します レイアウトを 作 成 したいオブジェクトを 選 び 必 要 に 応 じてVisualforceページ 名 を 設 定 し [OK]をクリックします 今 回 は [ 申 請 ]というカスタムオブジェクトを 選 びます SkyVisualEditorスタジオへのログイン 方 法 等 は 以 下 をご 覧 ください (https://ap.salesforce.com/sfc/p/#10000000dwyn/a/10000000cucm/i5eayznyvoq6o_mguzti8n7gok7magkeyt5eo9jdis8=) Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 14

1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 15

3. 項 目 の 配 置 ( 背 景 画 像 の 取 り 込 み) オブジェクトを 選 択 しますと 白 地 の 画 面 が 表 示 されます 画 面 右 のプロパティエリアの 下 部 の[ 背 景 画 像 ]より 背 景 画 像 を 読 み 込 むことができます [ 背 景 画 像 ] 内 の[ 参 照 ]ボタンをクリックしますと Salesforceの 静 的 リソースに 格 納 されている 画 像 一 覧 が 表 示 されますので 該 当 する 画 像 を 選 択 し [ 背 景 画 像 設 定 ]ボタンをクリックします 2 1 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 16

3. 項 目 の 配 置 ( 画 面 サイズの 設 定 など) 背 景 画 像 が 取 り 込 まれました 次 に 取 り 込 んだ 背 景 画 像 のサイズを 画 面 サイズに 合 わせます 方 法 は2 種 類 あります 1. 下 記 キャプチャの1のエリアの[ページ 表 示 サイズ]の 幅 高 さを 2の 背 景 画 像 の 幅 高 さと 合 わせる 2. 2のエリアの[ 画 像 をページサイズに 合 わせる]ボタンをクリック 今 回 は 1の 方 法 にて 画 面 サイズを 背 景 画 像 のサイズに 合 わせます 1 2 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 17

3. 項 目 の 配 置 背 景 画 像 を 取 り 込 み 背 景 画 像 と 画 面 サイズの 設 定 が 完 了 しますと いよいよ 項 目 の 配 置 です 画 面 左 部 の1のエリアに 選 択 したオブジェクトの 項 目 一 覧 が 表 示 されてますので ドラッグ&ドロップ による 操 作 で 項 目 を 配 置 します 2のエリアの[ 入 力 ][ 表 示 ][ラベル]を 切 り 替 えることで 入 力 フィールド 参 照 フィールド 項 目 ラベルを それぞれ 配 置 できます 以 上 で 入 力 フォームは 完 成 です 次 に 配 置 した 項 目 に 対 する 詳 細 な 設 定 方 法 をご 紹 介 します 2 1 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 18

[ 参 考 ] グリッドの 表 示 画 面 右 のプロパティエリアの 下 部 の[グリッド]より グリッド 線 を 表 示 できます グリッドを 利 用 することで 項 目 の 整 列 が 容 易 になります Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 19

1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 20

4. 配 置 した 項 目 の 詳 細 設 定 ( 項 目 幅 高 さの 指 定 ) 配 置 した 項 目 の 横 幅 や 高 さは 自 由 に 指 定 できます 配 置 した 項 目 の 青 い 枠 線 の 右 部 下 部 右 下 部 にマウスのカーソルを 合 わせると マウスポインタが 変 わりますので ドラッグ&ドロップすることで 横 幅 や 高 さを 指 定 できます また 画 面 右 部 のプロパティエリアの[レイアウト] 内 の[ 幅 ][ 高 さ]より ピクセル 単 位 で 横 幅 や 高 さを 指 定 できます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 21

4. 配 置 した 項 目 の 詳 細 設 定 (ボタンの 配 置 ) 画 面 キャプチャの 画 面 左 上 の[コンポーネント]タブをクリックすると ページを 作 成 する 際 のボタンや アイテム レイアウトが 表 示 されます コンポーネントタブ 内 の[ボタン]には 保 存 編 集 キャンセル 削 除 コピーといった 標 準 ボタンと 処 理 内 容 を 定 義 することができるカスタムボタンがあります 配 置 したいボタンを 選 択 し ドラッグ&ドロップで 画 面 に 配 置 します 1 2 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 22

4. 配 置 した 項 目 の 詳 細 設 定 (IME 設 定 ) SkyVisualEditorでは 商 品 コードや 数 量 金 額 など 英 数 字 の 入 力 項 目 に 対 し 半 角 のみ 入 力 を 可 能 とする 機 能 を 用 意 しております 入 力 補 助 を 設 定 したい 項 目 を 選 択 し 画 面 右 部 のプロパティエリア 内 の[テキスト]-[IMEモード] より デフォルト 全 角 デフォルト 半 角 半 角 のみを 選 択 できます IMEモードは Microsoft Internet Explorer Mozilla Firefoxのみの 動 作 します Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 23

4. 配 置 した 項 目 の 詳 細 設 定 ( 選 択 リストのラジオボタン 化 ) SkyVisualEditorでは 選 択 リスト 型 の 項 目 をラジオボタン 表 示 に 変 更 できます 設 定 方 法 は ラジオボタン 化 したい 選 択 リストを 選 択 後 画 面 右 部 のプロパティエリア 内 の[テキスト]- [ラジオボタン 化 ]のチェックボックスをONにすることで ラジオボタン 表 示 に 変 更 されます また なし を 表 示 したくない 場 合 は [ なし を 表 示 ]のチェックボックスをOFFにします 1 2 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 24

4. 配 置 した 項 目 の 詳 細 設 定 (フォーカス 色 の 設 定 ) SkyVisualEditorでは 入 力 項 目 にカーソルがフォーカス( 遷 移 )した 際 に 入 力 フィールドの 背 景 色 を 変 更 できます 画 面 右 部 のプロパティエリア 内 の[フォーカス 色 ]の[フォーカス 色 の 有 効 化 ]のチェックボックスをONにし 背 景 色 を[Pink]もしくは[Blue]に 選 択 できます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 25

4. 配 置 した 項 目 の 詳 細 設 定 ( 参 照 画 面 作 成 ) 1 SkyVisualEditorでは 作 成 した 入 力 画 面 を2ステップの 手 順 で 一 括 で 参 照 ( 表 示 用 ) 画 面 に 変 換 することができます 設 定 方 法 は メニューエリアの[ツール]より[ 参 照 画 面 作 成 ]をクリックし ページ 名 を 設 定 後 [OK]を クリックすると 参 照 画 面 が 表 示 されます 3 2 配 置 した 項 目 の 幅 や 位 置 などは 別 途 調 整 が 必 要 な 場 合 があります Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 26

4. 配 置 した 項 目 の 詳 細 設 定 ( 関 連 リストの 配 置 ) SkyVisualEditorでは Salesforceの 関 連 リストを 画 面 に 配 置 することができます 画 面 左 部 の1の[コンポーネント]タブより [ 関 連 リスト]のコンポーネントを 選 択 し ドラッグ&ドロップによる 操 作 で 画 面 上 に 関 連 リストを 配 置 します 表 示 できる 関 連 リストについては 以 下 をご 参 照 ください 今 回 は[ 承 認 履 歴 ]を 選 択 します (https://www.skyvisualeditor.com/help/skyvisualeditor_help.pdf#page=142) 1 2 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 27

1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 28

5. 作 成 した 画 面 のデプロイ メニューエリアの[ファイル より [デプロイ]をクリックします Sandbox 環 境 やDeveloper Editionに 画 面 を 生 成 する 場 合 は[テスト 環 境 ]を 本 番 環 境 へ 直 接 デプロイする 場 合 は [ 本 番 環 境 ]を 選 択 し [デプロイ]をクリックします Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 29

5. 作 成 した 画 面 のデプロイ( 画 面 の 確 認 ) デプロイが 完 了 しますと [ページを 開 く]というリンクが 表 示 されますので クリックします Studioでデザインした 画 面 を Salesforceで 確 認 することができます 以 上 で 画 面 のデザインは 完 了 です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 30

1. 背 景 画 像 の 設 定 4. 配 置 した 項 目 の 詳 細 設 定 2. オブジェクトの 選 択 5. 作 成 した 画 面 のデプロイ 3. 項 目 の 配 置 6. デプロイ 後 のSalesforceの 設 定 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 31

6. デプロイ 後 のSalesforceの 設 定 (Visualforceページアクセス/Apexクラスの 有 効 化 ) SkyVisualEditorで 作 成 したページは Salesforceで 画 面 を 利 用 するプロファイル 毎 にVisualforce ページ/Apexクラスのアクセスを 有 効 化 する 必 要 があります Salesforceのユーザメニューより [ 設 定 ]-[ 管 理 者 設 定 ]-[ユーザの 管 理 ]-[プロファイル]を 選 択 し 作 成 したページを 有 効 化 したいプロファイルをクリックします プロファイルページの 有 効 なVisualforceページ 有 効 なApexクラス の[ 編 集 ]より 有 効 化 したい ページとクラスを 選 択 し [ 保 存 ]します Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 32

6. デプロイ 後 のSalesforceの 設 定 ( 標 準 ボタンの 上 書 き) 作 成 したページを[ 申 請 ]オブジェクトの[ 新 規 ]ボタンをクリックした 際 に 表 示 されるように 設 定 します Salesforceのユーザメニューより [ 設 定 ]-[アプリケーションの 設 定 ]-[ 作 成 ]-[オブジェクト]-[ 申 請 ]-[ボタン リンク およびアクション]を 選 択 し ボタン 一 覧 の 新 規 のアクション 項 目 の[ 編 集 をクリックします 遷 移 先 の 画 面 の[ 上 書 き 手 段 ]より Visualforceページ を 選 択 し 該 当 のページを 選 択 して[ 保 存 ]を クリックします 設 定 はこれで 完 了 です Salesforceの[ 申 請 ]タブより[ 新 規 ]ボタンをクリックした 際 に 設 定 したページが 実 際 に 表 示 されるかをご 確 認 ください 同 様 に [ 参 照 ]ボタンには 作 成 した 参 照 画 面 の[Visualforceページ]を 設 定 します Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 33

1. 本 日 の 完 成 イメージ 2. 申 請 画 面 の 作 成 方 法 3. 作 成 した 画 面 を 使 ってみよう Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 34

作 成 した 画 面 にデータを 入 力 しよう 既 存 の 申 請 画 面 と 同 様 の 画 面 にて 申 請 情 報 を 入 力 できます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 35

承 認 プロセス 画 面 承 認 された 申 請 は PDFで 出 力 できます ユーザが 使 いやすい 画 面 で 承 認 状 況 の 確 認 や 申 請 / 却 下 ができます Salesforceの 承 認 プロセスの 設 定 については 以 下 をご 参 照 ください (http://successjp.salesforce.com/blogs/2012/08/post-55a0.html) Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 36

[ 参 考 ] AppMoveワークフローのご 紹 介 AppMoveワークフロー とは 株 式 会 社 インタームーブ 社 が 提 供 するワークフローアプリです 柔 軟 な 申 請 者 / 承 認 者 ルートが 設 定 可 能 なほか Salesforce 標 準 の 承 認 プロセスにはない 日 本 特 有 の 承 認 機 能 ( 委 任 / 振 替 など)を 標 準 機 能 として 提 供 しております AppMoveワークフローは AppComponent ( ) 対 応 をしており SkyVisualEditorで 作 成 した 画 面 に AppMoveワークフローの 機 能 を 追 加 できます SkyVisualEditorでの 設 定 イメージ AppComponentについてはこちら(http://info.skyvisualeditor.com/developer/use/)をご 参 照 ください Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 37

[ 参 考 ] Notesユーザのお 客 様 へ Notesで 運 用 していた 申 請 承 認 ワークフローなどのNotesアプリケーションを サポート 切 れなどを 期 に 移 行 をご 検 討 のお 客 様 へNotesからSalesforceへ 移 行 するサービスを 提 供 しています オートマイグレーションEngine がお 客 様 のNotes 環 境 から 設 計 情 報 を 抽 出 し その 設 計 情 報 をもとに Notesの 画 面 をSalesforce 環 境 に 自 動 生 成 することで 短 期 間 低 コストでSalesforceへの 移 行 を 実 現 します 移 行 後 もSalesforce 環 境 の 画 面 をコーディングなしで 自 由 にレイアウトすることができます データベースにより 移 行 率 が 変 わります 当 サービスの 提 供 元 は 富 士 ソフト 株 式 会 社 様 (http://www.fsi.co.jp/salesforce/notes.html)です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 38

お 役 立 ち 情 報 セミナー/イベント 情 報 サポート 窓 口 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 39

セミナー イベント 情 報 SkyVisualEditorの 事 例 や 製 品 について 知 る 8 月 6 日 ( 水 ) SkyVisualEditor 定 例 セミナー http://www.terrasky.co.jp/event/2014/0806-001.php SkyVisualEditorを 体 験 する 学 習 する 残 席 わずか SkyVisualEditor 体 験 セミナー 実 際 にSkyVisualEditorを 操 作 しながら 画 面 開 発 を 体 験 できるセミナーです 8 月 8 日 ( 金 ) http://www.terrasky.co.jp/event/2014/0808-001.php 8 月 20 日 ( 水 ) http://www.terrasky.co.jp/event/2014/0820-001.php SkyVisualEditor 標 準 トレーニング SkyVisualEditorの 基 本 的 な 機 能 を 網 羅 したプライベート 研 修 です こちらを 受 講 いただければ SkyVisualEditorの 基 礎 を 十 分 にご 理 解 いただけます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 40

サポート 窓 口 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 2014 TerraSky Co.,Ltd. All Rights Reserved. 41

次 回 以 降 のオンラインセミナーについて 第 4 回 活 用 編 いますぐ 使 える!SkyVisualEditorの 便 利 な 機 能 紹 介 8 月 21 日 ( 木 ) 15:30-16:00にて 開 催 第 4 回 は SkyVisualEditorで 画 面 を 作 成 していく 際 に お 客 様 からよくあるご 質 問 に 対 するTipsをいくつかご 紹 介 させていただきます 皆 さまのSkyVisualEditorの 更 なるご 活 用 /ご 検 討 にお 役 立 てください 第 5 回 基 本 編 Salesforceで 見 積 作 成 画 面 を 作 成 しよう 9 月 開 催 予 定 第 5 回 は Salesforceで 実 現 するアプリケーションとして 要 望 が 高 い 見 積 について SkyVisualEditorで 入 力 しやすい 画 面 を 作 成 するノウハウや 手 順 をご 紹 介 します Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 42