シラサギ勉強会 サイト構築の基本とメールフォーム

Transcript

1. http://www.web-tips.co.jp/ Copyright © 2014- Web Tips Co.,Ltd All Rights Reserved. シラサギ勉強会 サイト構築の基本とメールフォーム 2017/11/17 株式会社ウェブチップス 稲⾕ 昌樹
2. ページ⽣成の仕組み 2
3. ページ⽣成の仕組み 3 • レイアウト ページ全体のレイアウトをＨＴＭＬで作 成し、管理します。 フォルダー、ページ単位で設定ができま す。 • パーツ レイアウトに配置するコンテンツ。 複数のレイアウトで共⽤するものをパー ツ化。 • 本⽂ 本⽂欄はページ作成時に⼊⼒した内容が 表⽰されます。 構成イメージ
4. ページ⽣成の仕組み 4 • コンテンツ 利⽤頻度の⾼いフォルダーをショートカットと して登録します。 • フォルダー サイトは「フォルダー」による階層構造で管理 します。 • 固定ページ 現在開いている「フォルダー」にある固定ペー ジを表⽰します。 • パーツ レイアウトに配置するHTMLの部品を「パー ツ」で管理します。 • レイアウト ページ全体のレイアウトをHTMLで作成し、管 理します。 基本メニュー
5. レイアウト 5
6. レイアウト 6 レイアウトは通常のHTMLに加え、 主に3つの独⾃記述があります。
7. レイアウト 7 レイアウトの記述
8. レイアウト 8 {{ part “パーツのファイル名” }} パーツを埋め込むための記述です。 パーツの記述例 ルート階層のパーツの場合 {{ part “head” }} フォルダー内の場合 {{ part “slide（フォルダー名）/slide” }}
9. レイアウト 9 #{page_name} ページやフォルダーのタイトルを埋め込むための記述です。
10. レイアウト 10 {{yield}} ページやフォルダーの本⽂、内容を埋め込むための記述です。
11. レイアウト 11 編集画⾯の「？」の部分で他の独⾃記述も確認できます。
12. パーツ 12
13. パーツ 13 複数のレイアウトで共⽤するヘッダーやフッター などをパーツにします。
14. パーツ 14 パーツには「パーツ属性」という設定があり、 HTMLの記述以外にも機能を持たせることが可能。
15. パーツ 15 パーツ属性の例
16. パーツ 16 パーツ属性「標準機能/HTML記述」 通常のHTMLを記述します。
17. パーツ 17 パーツ属性「〇〇リスト」 ページの⼀覧等を表⽰するパーツです。 リスト表現に必要なループ表現のHTML等を記述します。 ⼀覧取得したいフォルダー内に作成するか検索条件にフォルダーのパスを指定します。
18. パーツ 18 パーツ属性「〇〇リスト」 ループHTMLには独⾃記述が必要ですが、 利⽤できる記述は「？」をクリックすることで確認できます。
19. パーツ 19 パーツ属性「標準機能/パンくずリスト」 パンくずメニューを⾃動⽣成するパーツです。 HTMLは⾃動出⼒されます。
20. パーツ 20 パーツ属性「標準機能/SNSシェアボタン」 SNSシェアボタンを⾃動⽣成するパーツです。 HTMLは⾃動出⼒されます。
21. 固定ページ 21
22. 固定ページ 22 最も基本的なページです。 ページのタイトルや本⽂を⼊⼒し作成します。
23. 固定ページ 23 レイアウトを指定することで デザインが決まります。 他にも地図の埋め込みやイベントカレンダーへの 掲載など様々な機能を持っています。
24. 固定ページ 24 シラサギでは固定ページの他にも⽤途に応じた 様々な種類のページが存在します。
25. フォルダー 25
26. フォルダー 26 ページはフォルダーによる 階層構造管理を⾏います。 また、フォルダー属性という 独⾃の設定があり、 これに応じてフォルダー直下に index.html 等を⾃動⽣成します。
27. フォルダー フォルダー属性について 27 新規作成 公開画⾯ 管理画⾯ カテゴリー/カテゴリーリスト カテゴリー/ページリスト
28. パーツ 28 フォルダー属性の例
29. フォルダー 29 フォルダー属性「〇〇リスト」 フォルダー内の〇〇に該当する⼀覧をフォルダー直下のindex.htmlです。 リスト表現に必要なループ表現のHTML等を記述します。 ⼀覧取得したいフォルダー内に作成するか検索条件にフォルダーのパスを指定します。
30. フォルダー 30 フォルダー属性「〇〇リスト」 リストの例 標準機能/フォルダーリスト 公開画⾯でフォルダー直下のフォルダーの⼀覧を表⽰。 標準機能/ページリスト 公開画⾯でフォルダー直下のページの⼀覧を表⽰。 記事/記事リスト 管理画⾯のこのフォルダー内では記事ページを作成、管理する画⾯になりま す。公開画⾯ではフォルダー直下の記事ページ⼀覧を表⽰。 カテゴリー/ カテゴリーリスト 管理画⾯でページのカテゴリーの選択肢になります。 公開画⾯ではフォルダー直下のカテゴリー系のフォルダー⼀覧を表⽰ カテゴリー/ ページリスト 管理画⾯でページのカテゴリーの選択肢になります。 公開画⾯内ではこのカテゴリーが設定されたページの⼀覧を表⽰ イベント/イベントリスト 管理画⾯のこのフォルダー内ではイベントページを作成、管理する画⾯にな ります。 公開画⾯ではイベント⽇が設定されたページの⼀覧をカレンダー形式で表⽰
31. フォルダー 31 フォルダー属性「メールフォーム/フォーム」 フォルダー直下にメールフォームを⽣成します。 質問項⽬の作成や通知設定などを⾏います。
32. フォルダー 32 フォルダー属性「施設/〇〇」 フォルダー直下に施設検索し、地図表⽰する画⾯を⽣成します。 施設系のフォルダー属性のフォルダーを組み合わせることで画⾯が⽣成されます。
33. CSS、JavaScript 33
34. CSS、JavaScript 34 CSSやJavaScriptなど デザインを管理するファイルは フォルダー属性が「アップローダー 」の フォルダー内にアップロードし利⽤します。
35. CSS、JavaScript 35 アップローダーには SCSS、CoffeeScriptの ⾃動コンパイル機能が備わっています。 アップロードすると同名の CSS、JavaScriptファイルを⾃動⽣成します。
36. CSS、JavaScript 36 保存（⾃動コンパイル） section { width: 100%; p { font-weight: bold; } } section { width: 100%; } section p { font-weight: bold; } SCSS CSS
37. CSS、JavaScript 37 また、SCSSはCompassの利⽤も可能です。 p { display: block; @include box-shadow( 0 0 10px #ccc); } p { display: block; -webkit-box-shadow: 0 0 10px #a82f34; -moz-box-shadow: 0 0 10px #a82f34; box-shadow: 0 0 10px #a82f34; } SCSS CSS 保存（⾃動コンパイル）
38. 記事ページ 38
39. 記事ページ 39 固定ページとほぼ同じようなページですが ⽤途により使い分けを⾏います。
40. 記事ページ 40 40 記事ページと固定ページの使い分け カテゴリー 暮らし カテゴリー ⼦育て カテゴリー 観光 カテゴリー 産業 記事リスト フォルダー 記事ページ 記事ページ １つのフォルダー内でページの管理を⾏います。 ページはカテゴリーを設定することでカテゴリー フォルダーの配下にページがあるように⾒せられる ので、1つのページに複数のカテゴリーを設定する 場合に適しています。 また、記事ページのファイル名（URL）は連番で⾃ 動設定されますので、⾏政サイト等、多⼈数でサイ トの管理を⾏う場合に適しています。 ※ページのURLは記事リストフォルダーの配下にあ るようになります。（/docs/1234.html）
41. 記事ページ 補⾜ 41 記事ページと固定ページの使い分け 固定ページ ページを直接フォルダーの配下に作成します。 複数のカテゴリーからのルートを設定しない場合や メインとなるルートが決まっている場合、URLを固 定にしたい場合に適しています。 ※固定ページにもカテゴリーを設定することは出来 ます。 また、階層を意識したローカルメニューを設置する 場合は、固定ページが適しています。 フォルダー 暮らし ⼦育て 観光 産業 固定ページ 固定ページ 固定ページ 固定ページ フォルダー フォルダー フォルダー
42. メールフォーム 42
43. メールフォーム 43 お問い合わせやアンケートのために 利⽤する機能です。
44. メールフォーム 44 ⾃由に質問項⽬を設定し、フォームを作成できます。
45. メールフォーム 45 アンケートの集計結果を表⽰することもできます。
46. メールフォーム 46 パーツ属性「メールフォーム/フィードバック」を利⽤ すればページ単位でアンケートをとることもできます。
47. メールフォーム 47 このパーツは管理画⾯では⾃治体サイトで 「この情報は役に⽴ちましたか？」というような アンケートを取るために作成されたものですが 様々な応⽤⽅法がありそうです。
48. メールフォーム 48 例えば、イベント申し込みフォームを作成し イベントページにフィードバックを 埋め込むことで 1つのメールフォームで 複数のイベント申し込みの管理が⾏えます。
49. 最後に 49
50. 最後に 50 詳しい内容は操作マニュアルを公開しています。 http://www.ss-proj.org/download/manual.html