Webデザイナーに開発をお願いする前に伝えたいこと

はじめに

みなさん、こんにちは。 Sites機能やコミュニティ機能の認知が上がった関係でコミュニティやSites機能を利用して外部ユーザーが参照するページを作成する機会が多くなっていると感じています。 外部ユーザーが参照するページですので、ページデザインやレイアウト等に力を入れたいお客様も多く、Webデザイナーと協力して開発する機会もあるかと思います。 今回はSalesforceについて知らないWebデザイナーに事前にお伝えしておいた方が良いと思われる点についていくつか紹介します。

※SFDC開発者視点でのお話ですので、Webデザイナー視点から見た場合は別のご意見もあると思いますがご了承下さい。

プロジェクトの進め方について

Webデザインに関する打ち合わせを実施する場合、下記の点からWebデザイナーに全てまかせるのではなく必ず同行すべきだと考えています。

  1. Visualforceの制限やパフォーマンスを考慮したデザインにする。
  2. デザインの段階から実装方法を検討できる。
  3. デザインによる開発工数増加を考慮できる。

特に１番には注意が必要で、多くのデータを表示するケースや画像をたくさん表示する画面には特に注意が必要になります。

Visualforceの制限について

Salesforceのデザインを決める上で制限事項はとても重要になりますので下記のページから制限事項についてWebデザイナーにあらかじめ伝えておくことが大事です。

制限についてはこちら

特にビューステートによる制限には注意が必要で、表示するデータや項目を少なくする、といったことが必要になります。

画像や、CSS、JSファイルについて

デザインが完成した後、HTMLからVisualforceへ組み込みますが、画像ファイル、CSS、JSファイル等のパスを静的リソースのパスに書き換える作業が必要になります。画像、CSS、JSファイル等がバラバラですと変更作業が多くなりますので可能であれば１つのフォルダの中にまとめてHTMLを作って頂く方が組み込み作業が簡単になります。可能であればCSSを１つのファイルで作成して頂くのが望ましいですがWebデザインの開発にかかわる部分ですので事前にWebデザイナーに相談した方がよいと思います。

CSSファイルの書き方について

CSSファイルの中に画像パスを記載する書き方だと静的リソースのパスを差し込みすることができないため、可能であればHTML側に画像のパスを記載するような形で依頼すると画像のメンテナンスが簡単になります。

common.css
#topSearch .topimg {
background-image: url("../img/top.png");
静的リソースの差し込みできないのでVisualforce側に画像パスが記載する。
background-repeat: no-repeat;
background-position: left top;
}

Visualforceのテンプレートについて

グローバルナビゲーションがあるデザインの場合、Visualforceのテンプレートを使用して効率よくページを作成することができます。

特にヘッダーとフッターは共通化できるケースが多いので、あらかじめVisufalforceのテンプレートについて説明し、ヘッダー用とフッター用で分けて作成して頂くとVisualforceページの組み込みが簡単になります。

また、ヘッダー、フッターにはリンクが多く置かれると思いますので、あらかじめ各Visualforceページへのリンクもお伝えしておくと組み込みが簡単になります。

おわりに

HTMLからVisualforceに組み込む場合の注意点をまとめてみましたが、Visualforceページへの組み込みはとても簡単にできます。

文字や画像を表示するだけの静的ページであれば、HTMLのソースをそのままコピー＆ペーストでVisualforceページに張り付けて画像ファイルやCSSへのパスを変更するだけで表示できます。

今回はSalesforceの視点でブログを書きましたが、機会があればWebデザイナー視点でのご意見も聞いてみたいと思っております。 もしご意見を聞くことができたらまたブログに投稿してみようと思います。

ではでは