jQueryにはいろんな場面でお世話になっているのですが、いまいち理解できていないことも多かったのでjQueryデザインの教科書を読んで勉強しました。
この本にはセレクタで要素を取得する方法やイベントハンドラを設定してマウスオーバー時にCSSを変更するなどの基本的な部分から、レスポンシブなナビーゲーション、コンテンツを切り替えるタブ、簡易的なイメージギャラリーなどの便利なUIを作成する方法についてわかりやすくまとめられていました。
その他にもCSSを操作するアニメーションやモーダルウィンドウの表示、ウィンドウ上端で固定するグローバルナビゲーションなど役立つ機能の実装方法についても説明されていてすごく勉強になりました。実際にサンプルコードが用意されていて各項目ごとに試しながら進めていけるようになっています。
本の内容を一通り確認した後に本のサンプルコードを使ってForce.comサイト上で動かしてみました。
jQueryデザインの教科書には全部で6ページ分のサンプルが用意されているのですが、その内の4ページをForce.comサイト上で動かしてみました。各ページはメニューにあるリンクから遷移できるようになっています。(※SHAREリンクのみ動作しません。)
@media screenでレスポンシブ対応もしてあるのでモバイルからアクセスしたときにも見やすいレイアウトになっていることを確認できます。
Force.comサイトで動かすときに気をつけること
Force.comサイト開発では次のことに気をつけた方が良さそうです。
- hタグはブロック要素として扱われない
- aタグの罫線を非表示にしてもhover時に表示されてしまう
- liタグのリストマーカーを非表示にしたときに隙間ができてしまう
- classの名称で“.tab”や”.btn"は使わない
- 画像ファイルのアップロード先は静的リソースにしてはいけない
① hタグはブロック要素として扱われない
h1タグなどの見出しタグはVFページ上ではブロック要素として扱われないみたいです。そのためhtmlファイルで正常に表示されたものがVF上ではレイアウトが崩れてしまうことがあります。この問題は次のCSSで回避できると思います。
h1, h2, h3, h4, h5, h6 {
display: block;
}
② aタグの罫線を非表示にしてもhover時に表示されてしまう
Webサイト開発では良くリンクの罫線を非表示にするために、「text-decoration: none;」を指定すると思います。Force.comサイト上ではこの指定をしてもhover時には反映されないといったことがありました。この問題は次のように「!important」を指定することで解決できます。
a:hover {
text-decoration: none !important;
}
③ liタグのリストマーカーを非表示にしたときに隙間ができてしまう
メニュー部分をliタグで実装する場合など、「list-style: none;」を指定してリストマーカーを非表示にすることがあると思います。このときForce.comサイトの場合はリストマーカーの幅だけが残って隙間が開いてしまいます。「margin-left: -1px;」というように指定することで予定通りのデザインを表示することができます。
ul li {
margin-left: -1px;
}
④ classの名称で“.tab”や”.btn"は使わない
classの名称に".tab"や".btn"を指定していた箇所のレイアウトが崩れる現象に遭遇しました。Salesforce標準のclass名と一致してしまったためだと思われます。この現象はstandardStylesheets="false"などを指定して標準のスタイルを読み込まないようにした状態でも発生しました。他に原因があったかもしれませんが、良くある名称は避けたほうが良さそうです。
⑤ 画像ファイルのアップロード先は静的リソースにしてはいけない
静的リソースにはアップロードできるファイルのサイズが5MBまでという制限があります。Force.comサイト開発では複数の画像ファイルが使用されることが多いと思うので5MBは簡単に超えてしまいます。ファイルを分割するという方法も一応ありますが、今回その方法を試してみたところ開発がすごく大変になりました。関連する画像ファイルはできる限り一つにまとめるようにした方がいいと思います。
静的リソースの代わりのアップロード先ですが、コンテンツがいいと思います。コンテンツを利用すればライブラリ機能で関連ファイル毎に整理することができるのと、バージョン管理機能が付いているので誰がいつファイルを編集したかといった履歴情報を残すこともできます。画像を取得するときにクエリを実行しなくてはいけませんが、静的リソースで管理するよりもメンテナンスしやすい環境にできると思います。
リンク
Amzonのリンクの関連記事のリンクです。Kindle版も発売しているみたいです。
