force.comサイトで動かすweb starter kit
TRANSCRIPT
![Page 1: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/1.jpg)
Force.comサイトで動かす Web Starter Kit
Taiki Yoshikawa
![Page 2: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/2.jpg)
名前:吉川 大樹http://tyoshikawa1106.hatenablog.com/
@tyoshikawa1106
+TaikiYoshikawa
tyoshikawa1106
tyoshikawa1106
![Page 3: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/3.jpg)
Web Starter Kitとは
readwrite.jp http://goo.gl/hWkMtA
techcrunch http://goo.gl/rLRrIF
![Page 4: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/4.jpg)
Web Starter Kitを試してみる
Web Starter Kit https://developers.google.com/web/starter-kit/
![Page 5: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/5.jpg)
Web Starter Kitを試してみる
index.htmlから動きます。
![Page 6: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/6.jpg)
Force.comサイトで動かしてみる
<apex:page>タグをつけて CSSやJSを静的リソースから読みこむようにすれば Force.comサイトで動きます。
![Page 7: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/7.jpg)
Force.comサイトで動かしてみる
![Page 8: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/8.jpg)
Style - Buttons
![Page 9: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/9.jpg)
Style - Icons
![Page 10: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/10.jpg)
Style - Table
![Page 11: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/11.jpg)
Style - Grid
![Page 12: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/12.jpg)
Style - Colours
![Page 13: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/13.jpg)
Style - Highlights
![Page 14: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/14.jpg)
デモ サイト
Force.com Sites Demo http://ty-yoshikawa-git-site-developer-edition.na15.force.com/
![Page 15: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/15.jpg)
サンプルコード - GitHub
Apex_WebStarterKit https://github.com/tyoshikawa1106/Apex_WebStarterKit
![Page 16: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/16.jpg)
サイト開発のポイント①
エラーページをデフォルトのまま使用すると せっかく開発したサイトが残念な感じに・・・。 エラーページもきちんと用意しましょう。
![Page 17: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/17.jpg)
サイト開発のポイント②
Force.comサイトでは一部のCSSが通常のHTMLのようには 反映されないことがあるので注意しましょう。
例えばfont-familyやfont-weightはbody * のように 宣言しないと反映されないことがあります。
![Page 18: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/18.jpg)
サイト開発のポイント③
サイト開発を行うときはサイトテンプレートを利用しましょう。
![Page 19: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/19.jpg)
サンプルコード - GitHub
Apex_ForcedotcomSitesSample https://github.com/tyoshikawa1106/Apex_ForcedotcomSitesSample
![Page 20: Force.comサイトで動かすWeb Starter Kit](https://reader033.vdocuments.mx/reader033/viewer/2022052619/556a5489d8b42a7a138b49b0/html5/thumbnails/20.jpg)
ありがとうございました