Force.comサイトで動かす Web Starter Kit

Taiki Yoshikawa

名前：吉川 大樹http://tyoshikawa1106.hatenablog.com/

@tyoshikawa1106

+TaikiYoshikawa

tyoshikawa1106

tyoshikawa1106

Web Starter Kitとは

readwrite.jp http://goo.gl/hWkMtA

techcrunch http://goo.gl/rLRrIF

Web Starter Kitを試してみる

Web Starter Kit https://developers.google.com/web/starter-kit/

Web Starter Kitを試してみる

index.htmlから動きます。

Force.comサイトで動かしてみる

<apex:page>タグをつけて CSSやJSを静的リソースから読みこむようにすれば Force.comサイトで動きます。

Force.comサイトで動かしてみる

Style - Buttons

Style - Icons

Style - Table

Style - Grid

Style - Colours

Style - Highlights

デモ サイト

Force.com Sites Demo http://ty-yoshikawa-git-site-developer-edition.na15.force.com/

サンプルコード - GitHub

Apex_WebStarterKit https://github.com/tyoshikawa1106/Apex_WebStarterKit

サイト開発のポイント①

エラーページをデフォルトのまま使用すると せっかく開発したサイトが残念な感じに・・・。 エラーページもきちんと用意しましょう。

サイト開発のポイント②

Force.comサイトでは一部のCSSが通常のHTMLのようには 反映されないことがあるので注意しましょう。

例えばfont-familyやfont-weightはbody * のように 宣言しないと反映されないことがあります。

サイト開発のポイント③

サイト開発を行うときはサイトテンプレートを利用しましょう。

サンプルコード - GitHub

Apex_ForcedotcomSitesSample https://github.com/tyoshikawa1106/Apex_ForcedotcomSitesSample

ありがとうございました