はじめに

みなさん、こんにちは。
2018年2月にSkyVisualEditorチームにジョインした平谷です。

初投稿の記事は、SkyVisualEditor歴4ヶ月の私がお送りする初心者向け記事「はじめてのSkyVisualEditor」です。少しボリュームのある記事になってしまいましたが、最後まで読んでいただけると幸いです。

本記事では、「はじめてSkyVisualEditorをご利用になられる方向け」にSkyVisualEditorの基本的な操作方法をご紹介します。SkyVisualEditorの初期設定から画面デザイン、作成した画面をSalesforceで表示するまでの一通りの流れを理解できることが本記事のゴールとなります。

SkyVisualEditorを利用するためには、事前に会員登録が必要となります。アカウントをお持ちでない方は、こちらの「無料登録」よりアカウントを取得ください。ユーザー登録に関して、詳細な情報はヘルプドキュメント「2-3. ユーザー登録」をご確認ください。

前提条件

Salesforceアカウント
SkyVisualEditorアカウント
SkyVisualEditorのStudioが動作するPC

＊SkyVisualEditorは、Microsoft Internet Explorer 且つ Microsoft Silverlight に準拠します。サポート対象のブラウザは「7-3-1. サポート対象ブラウザ、バージョンは？」をご確認ください。

＊Salesforceの環境は、「Salesforce Classic」を使用しております。

作業の流れ

SkyVisualEditor Studio環境へログイン
SkyVisualEditor Studio環境での画面作成
作成した画面をSalesforceへデプロイ
Salesforceで表示するための設定

作業

SkyVisualEditor Studio環境へログイン

SkyVisualEditor Studio環境は、最新の機能が常に利用可能な本番環境と一世代前の環境が利用可能な旧環境が存在します。Studio環境に関して、詳細な情報はブログ記事「新・旧２つのStudio環境を活用して任意のタイミングでバージョンアップ！」をご覧ください。

本記事では、本番環境を利用するためこちらからログインください。ログイン後、Salesforce組織へのログインダイアログが表示されますので、作成した画面をデプロイするSalesforce組織を指定ください。Salesforce組織への接続に関して、詳細な情報はヘルプドキュメント「3-4. Studio画面（Salesforce接続）」をご確認ください。

実際にログインすると以下の画面が表示されます。

SkyVisualEditor Studio環境の画面構成に関して、詳細な情報はヘルプドキュメント「3-5. Studio画面（画面作成）」をご確認ください。

SkyVisualEditor Studio環境での画面作成

SkyVisualEditorでは、ウィザード形式で短時間で画面を作成することができるテンプレートを使って画面を作成する方法とSalesforce標準ページレイアウトを取得して画面を作成する方法があります。今回は、より簡単に画面を作成することができるSalesforce標準ページレイアウトから画面を作成する方法をご紹介します。SkyVisualEditorが提供するテンプレートを使った画面の作成方法に関して、詳細な情報はヘルプドキュメント「4-1-1. 新規」をご確認ください。

メニューエリアの[ファイル＞ページレイアウト取得]をクリックします。

Salesforce標準ページレイアウトを取得したいオブジェクトとページレイアウトを選択し、「開く」をクリックします。今回は、「取引先」オブジェクトの「マスタ」レコードタイプを取得します。

無事取得ができれば、下記画面が表示されます。これでSalesforce標準ページレイアウトの取得は完了です。

次に、Salesforce標準ページレイアウトを使って画面を作成します。今回は下記3点をやりたいと思います。

コンポーネント（ページブロックセクション）のカラム数を増やしてみる
コンポーネント（、オブジェクト項目）を削除してみる
コンポーネント、オブジェクト項目を配置してみる

コンポーネント（ページブロックセクション）のカラム数を増やしてみる

「取引先情報」と記載されたページブロックセクションのカラム数を1つ追加します。

ページブロックセクションをクリックします。するとデザインキャンバス右上に「列追加」「列削除」と記載されたダイアログが表示されます。今回は列を追加するのでダイアログ左にある「列追加」をクリックします。

するとカラムが1つ追加されます。カラムの追加作業はこれだけですが、見た目的にも、作業内容的にも少し寂しいので、今回は、取引先情報に配置されているオブジェクト項目の一部を、追加したカラムにドラッグ＆ドロップで移動させてみます。

移動させた後の画面が下記になります。

なお、上記画面では左右にあった小画面が非表示になっていますが、SkyVisualEditorでは小画面の表示/非表示を切り替えることができます。表示/非表示の切り替えは、下記画面のように各画面に表示されている小さい矢印のエリアをクリックすることで可能です。こちらの機能は、デザインキャンバスが見づらいときなどに重宝します。

コンポーネント（、オブジェクト項目）を削除してみる

次に、Salesforce標準ページレイアウトからコンポーネントを削除してみます。コンポーネントに配置されているオブジェクト項目をすべて削除したい場合は、該当のコンポーネントを削除することでオブジェクト項目も自動的に削除されます。反対にオブジェクト項目を個別に削除したい場合は、該当のオブジェクト項目の上で右クリックすることで削除することが可能です。今回は、コンポーネントを削除したいと思います。

「追加情報」と記載されているページブロックセクションを右クリックし、削除メニューに表示されている「削除」をクリックします。

クリックすると確認ダイアログが表示されるので、問題がなければ「OK」をクリックします。

「追加情報」と記載されたページブロックセクションが削除されました。

コンポーネントなどの削除方法は、キーボード「Delete」キーの押下、オブジェクト/コンポーネントペインにドラッグ＆ドロップすることでも可能です。なお、ドラッグ＆ドロップでの削除に関しては、各ペインにドラッグした時点でごみ箱のアイコンが表示されるため、削除可能な範囲の目安にすることができます。詳細な情報はヘルプドキュメント「(2)-c. オブジェクトペイン、コンポーネントペイン」をご確認ください。

コンポーネント、オブジェクト項目を配置してみる

コンポーネント、オブジェクト項目の追加は、オブジェクト/コンポーネントペインからドラッグ＆ドロップで配置します。

配置したいコンポーネントをコンポーネントペインからドラッグ＆ドロップで配置します。各コンポーネントには配置可能、不可能があります。ドラッグ＆ドロップした際にアイコンで可・不可が判断できるようになっているので、配置可能な範囲の目安にすることができます。

次に、配置したいオブジェクト項目をオブジェクトペインからドラッグ＆ドロップで配置します。

コンポーネントとオブジェクト項目の配置は以上で完了です。

以上で、SkyVisualEditor Studio環境での画面の作成は終了になります。
次に作成した画面をSalesforceにデプロイし、表示確認したいと思います。

作成した画面のSalesforceへのデプロイ

作成した画面を、SkyVisualEditor Studio環境にログインした際に指定したSalesforce組織にデプロイしたいと思います。

ヘッダーにあるデプロイボタンをクリックします。

デプロイボタンをクリックすると、デプロイ確認ダイアログが表示されます。デプロイ先組織を指定し、問題がなければ「デプロイ」をクリックします。今回は、SalesforceのDeveloper Edition環境を使用しているため、「テスト環境」を指定してデプロイします。デプロイ確認ダイアログに関して、詳細な情報はヘルプドキュメント「(1)-g. デプロイ」をご確認ください。

デプロイが正常に終了すると下記デプロイ完了画面が表示されます。画面内「ページを開く」をクリックすると作成した画面がSalesforceで表示されます。なお、Salesforceに未ログインの場合、Salesforceのログイン画面が表示されますので、SkyVisualEditor Studio画面で指定したSalesforce組織のアカウントでログインください。