2019.03.11

今まで使っていた書類がSalesforceで再現できちゃう？！SkyVisualEditorの自由レイアウトとは　#シス管見習いの備忘録　vol.07

ポスト

まだまだ、改善の余地アリ！

これまでSkyVisualEditorを使って、名刺の入力画面や取引先の検索画面を作ってきました。
同僚からの評判も良く、役に立っている実感がじわじわと出始めてきたところです。

しかし、まだまだ使いづらい部分もあるようで…
今日は、同期のまりちゃんからこんな相談がありました。

「扶養控除申請書のデータをSalesforceに入力することになったんだ。
　自分で入力ページを作ってみたんだけれども、項目が多くて2列しか配置できないから困っていて…
　画面が長くなっちゃし、紙の申請書と勝手が違うから入力しづらいし。
　SkyVisualEditorで何とかならないかな？」

ということで、まずはまりちゃん自作の標準画面を見せてもらうことに。

そっと、画面を閉じたくなりました。
これは何とかしてあげないといけません！

SkyVisualEditorを使えば、1行に項目をたくさん配置できるので
「画面が長くなってしまう」という悩みは解決できます。
ただ「紙の申請書と勝手が違うから入力しづらい」という点はどうでしょう…？

二人でうーん、うーんと悩んでいたら、通りがかりのノブ先輩が、教えてくれました。
「今使っている書類と近い形の画面を作りたいなら、自由レイアウトがいいかもしれないねぇ」

自由レイアウトとは

自由レイアウトとは、なんでしょう？
テラスカイのホームページを見てみましょう。

”Salesforceのデザインにとらわれず、自由に画面をデザインできます。
既存書類と同等のレイアウトを作成したり、他のシステムやアプリケーションの入力フォームをSalesforceに再現したい場合などに利用します。”

今使っているフォーマットを”背景画像”にして、そのうえに自由に項目を配置できるそうです。
見た目は既存の書類とほぼ変わらないので、これまでのやり方に近い形で運用できる、と。

本当にそんなことが出来たら、まりちゃんも喜ぶはず！
さっそく使ってみましょう。

①背景画像の準備　②背景画像の取り込み　③項目の配置　④項目の設定
という流れで進めていきます。

まずは背景画像を準備します

SkyVisualEditorを開く前に、まずは背景画像をSalesforceに登録します。
お使いのフォーマットがExcelやPDFの場合は、サポートされている形式(※)に変換してください。
扶養控除申請書の入力フォーマットはPDFで提供されているので、jpegに変換しました。
(※)2019年2月時点では、jpeg、pjpeg、png、x-png、gif、bmpがサポートされています

背景画像が準備できたら、Salesforceの「静的リソース」に保存します。
設定からプラットフォームツール→カスタムコード→静的リソース　と進みます。
画面中央にある「新規」ボタンをクリックしてください。

ファイルをアップロードして、「保存」ボタンを押します。
これで、Salesforceに背景画像が登録されました。

エディターで背景画像を取り込みます

ここまで来たら、SkyVisualEditorの出番です。
ログインして、新規作成ボタンを押すと、レイアウトマネージャーが出てきます。
「自由レイアウト」を選んで、オブジェクトを選択。
Visualforceページ名を入力して、「OK」を押します。

すると真っ白な画面が出てきますが、エラーではないので、安心してください。
まだ背景画像を選択していないので、真っ白な画面が出てくるだけなんです(^^)

早速、背景画像の取り込みをしましょう。
ページプロパティの中に「背景画像」という項目がありますので、まずはそれを探します。
「参照」ボタンをクリックして、先ほど静的リソースに登録した画像を選択しましょう。

扶養控除申請書の入力フォーマットが、背景画像として取り込まれましたね。
今のままだと画面から見切れてしまうので、調節します。

ページプロパティの「背景画像」の下に、色々と文言が追加されたことにお気づきでしょうか？
「画像をページサイズに合わせる」ボタンをクリックすると、背景画像がページ内に収まるようになります。
サイズの調整で縦横比がずれてしまった場合は、そのうえにある「縦横比を維持する」にチェックをつけてください。

項目を配置していきます

背景画像の取り込みができたら、後はいつも通りです。
左側にある項目一覧（オブジェクトペインと呼ぶそうです）から項目をドラッグして、ページ内に配置していきます。
配置後、マウスで位置や大きさを調整しましょう。

今回は項目数がとても多いので、途中でどこにどの項目を置いたか分からなくなってしまいました。

焦ってアレコレいじっているうちに気が付いたのですが、枠の上にカーソルを当てると、項目名が出てくるようです。

コントロールキーを押しながら複数項目を選択すると、まとめて大きさを揃えることができます。

終わった～！デプロイしよう！

そんなこんなで、全項目の配置が終わりました！
果たして、フォーマット上に入力ができるようになっているのでしょうか。
試しにデプロイしてみましょう。

スゴイ。
ちゃんと、背景画像に設定したフォーマットの上に入力できるようになってます！
これなら、紙の申請書と入力画面の差異が少ないので、まりちゃんの手間もだいぶ減りそうです。

ただ、よ～く画面を見てみると、いくつか残念なところがあります。
・謎の[2019/03/01]という文字がある
・項目の位置が不ぞろい
・入力欄の文字のサイズが、枠の大きさと合っていない　…などなど。

これらも、ちゃんと解決する方法がありますよ。
次回のブログでご紹介します。

続きは、次回！

今回、4つのステップのうち
①背景画像の準備　②背景画像の取り込み　③項目の配置
まで終わりました。

次回は　④項目の設定　に挑戦してみます！

これまでSalesforceライクな画面しか作ってきませんでしたが、既存の書類に近い形の画面が作れるとは…。
まだまだSkyVisualEditorには、私の知らない魅力がありそう。
完成するのが今から楽しみです。

「自分も画面を作ってみたい！」という方には、体験セミナーがおすすめです！
シナリオに沿って、SkyVisualEditorでの画面開発が体験できるそうですよ。
自社で活用する際のイメージがより具体的になると思います♪
毎月開催していますので、ご都合の良いタイミングでぜひ足を運んでみてください。