サイト構築ハンズオン0629

Size: px

Start display at page:

Download "サイト構築ハンズオン0629"

ゆりなかやぬま
6 years ago
Views:

1 サイト構築ハンズオン講師 : 大草

2 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

3 シラサギの基本操作開発環境 Vagrant 環境のシラサギを起動してください

4 シラサギの基本操作開発環境自治体サンプル

5 シラサギの基本操作開発環境企業サンプル

6 シラサギの基本操作開発環境子育て支援サンプル

7 シラサギの基本操作開発環境オープンデータサンプル

8 シラサギの基本操作開発環境管理画面公開画面の URL に /.mypage をつけると管理画面になります今回は企業サンプルを利用してのハンズオンとなります

9 シラサギの基本操作構成イメージレイアウトページ全体のレイアウトを HTML で作成し管理しますフォルダーページ単位で設定ができます上位のフォルダーにレイアウトを設定している場合はページ作成時に自動で同じレイアウトが設定されますパーツレイアウトに配置するコンテンツをパーツという部品で管理します複数のレイアウトで共用することで管理が非常に楽になります本文本文欄はページ作成時に入力した内容が表示されますフォルダートップページ (index.html) はフォルダー作成時に設定したフォルダ属性に応じた内容が表示されます

10 シラサギの基本操作フォルダー属性の種類記事記事リストフォルダ内の記事ページ一覧を表示しますカテゴリーカテゴリーリストフォルダ属性カテゴリーを設定したフォルダ一覧を表示しますページリストカテゴリーが設定されているページ一覧を表示します標準機能フォルダリストフォルダ内のフォルダ一覧を表示しますページリストフォルダ内のページ一覧を表示しますイベントイベントリストイベントの一覧をカレンダー形式で表示しますアップローダーアップローダーファイルをアップロードするためのフォルダです

11 シラサギの基本操作特徴 n シラサギCMSの特徴マルチテナント負荷軽減のための静的 HTML 書き出し Ruby( スクリプト ) をテンプレート ( レイアウト ) に書かなくてもOK プラグイン無しで多機能 ( フォルダー属性を自由に変更できる ) グループウェアウェブメールを同一システム内で使える今後他のアプリケーションも追加予定

12 シラサギの基本操作ログイン管理画面へアクセスしログインしますユーザー ID:sys パスワード :pass

13 シラサギの基本操作サイト一覧マルチテナントに対応しているのでまずサイト一覧が表示されます

14 シラサギの基本操作サイト名の変更サンプルデータのサイト名をシラサギ商店に変更します

15 シラサギの基本操作サイト名の変更シラサギ管理画面トップに戻るにはをクリックしてください

16 シラサギの基本操作サイト管理画面へ移動サイト名を選択しサイトの管理画面へ移動します

17 シラサギの基本操作管理画面サイトトップの画面構成サイト内のメインメニューは下記で構成されていますコンテンツ利用頻度の高いフォルダーをショートカットとして登録しますフォルダーサイトはフォルダーによる階層構造で管理します固定ページ現在開いているフォルダーにある固定ページを表示しますパーツレイアウトに配置する HTML の部品をパーツで管理しますレイアウトページ全体のレイアウトを HTML で作成し管理します

18 シラサギの基本操作フォルダーフォルダーは通常のディレクトリという意味合いだけではなくフォルダーの設定項目であるフォルダー属性に応じて様々な公開画面を自動生成しますまた管理画面内でのフォルダー内部の UI もフォルダー属性に応じたものとなります

19 シラサギの基本操作固定ページページタイトル本文カテゴリー等を入力することでページを作成します入力画面公開画面

20 シラサギの基本操作パーツ本文以外の画面表示はパーツと呼ばれる部品で管理していますヘッダーやメニュー等複数のページで共通の表示となる部分をパーツで管理します自由に HTML を記述できる他ページの一覧やパンくず等を機能的に表示することも出来ますパーツヘッダーパーツニュースパーツキービジュアルパーツお問い合わせ

21 シラサギの基本操作レイアウトページの適用する全体レイアウトです複数のパーツを組み合わせて作成しますパーツヘッダー : トップパーツキービジュアルパーツニュースパーツお問い合わせパーツ製品サービスカテゴリーパーツ関連サイトパーツページトップパーツフッター : トップ

22 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

23 フォルダーの作成実際にフォルダーを作成してみますページ作成時のカテゴリーの選択肢をフォルダーで追加しますフォルダー属性がカテゴリー / カテゴリーリストもしくはカテゴリー / ページリストのフォルダーを追加することでカテゴリーが追加されます

24 シラサギの基本操作フォルダーフォルダー属性に応じて様々な画面 / 機能を生成しますフォルダー新規作成フォルダー属性指定されたフォルダー属性に応じた index.html をフォルダー直下に自動生成しますフォルダー属性はフォルダー作成後に変更することも可能です

25 シラサギの基本操作フォルダー生成される index.html の例記事 / 記事リストフォルダー内にある記事の一覧を表示します多人数でサイトの管理を行う場合に 1 つの記事フォルダー内でページを作成しカテゴリーの設定で表示する階層の振り分けを行います管理画面内は記事ページを作成する UI になります

26 シラサギの基本操作フォルダー生成される index.html の例カテゴリー / カテゴリーリストフォルダー内にあるフォルダー属性カテゴリーが設定されているフォルダー一覧を表示します親カテゴリーを作成する場合に利用しますカテゴリー / カテゴリーリストはページ作成の際のカテゴリーの選択肢にもなります

27 シラサギの基本操作フォルダー生成される index.html の例カテゴリー / ページリストこのカテゴリーが設定されているページの一覧を表示します子カテゴリーを作成する場合に利用しますカテゴリー / ページリストはページ作成の際のカテゴリーの選択肢にもなります

28 シラサギの基本操作フォルダー生成される index.html の例メールフォーム / フォーム問い合わせやアンケートに利用するメールフォームの画面を表示します設定に応じた入力確認画面や送信完了画面が自動で生成されます自動返信設定なども可能です管理画面内は質問項目を作成する UI や利用者からの回答を閲覧する UI になります

29 シラサギの基本操作フォルダー生成される index.html の例イベント / イベントリストイベントの一覧を表示するカレンダー形式のページが表示されます月別の一覧と日別の一覧が自動で生成されます各種ページにはイベント日の設定が可能になっておりイベント日の設定されているページへのリンクがカレンダー上に表示されます管理画面内はイベントページを作成する UI になります

30 シラサギの基本操作フォルダー生成される index.html の例施設施設情報を検索する画面を表示します施設の画面表示は複数のフォルダーを組み合わせて作成します施設一覧を管理する施設 / 施設リスト施設情報の登録を行う施設 / 施設情報検索条件の設定にあたる施設 / 施設の種類施設の用途施設のある地域検索画面にあたる施設 / 施設の検索を組み合わせて作成します管理画面内は施設情報を作成する UI になります

31 フォルダーの作成フォルダー属性カテゴリー / カテゴリーリストフォルダー内のカテゴリーフォルダー一覧を表示するフォルダーですカテゴリー / ページリスト該当のカテゴリーが設定されているページの一覧を表示します

32 フォルダーの作成以下 3 つのフォルダーを作成します 1. サポート ( /support/ ) フォルダー属性 : カテゴリー / カテゴリーリストタイトル : サポートフォルダー名 : support レイアウト : 1カラム 2. 製品サポート ( /support/product/ ) フォルダー属性 : カテゴリー / ページリストタイトル : 製品サポートフォルダー名 : product レイアウト : 1カラム 3. サービスサポート ( /support/service/ ) フォルダー属性 : カテゴリー / ページリストタイトル : サービスサポートフォルダー名 : service レイアウト : 1カラム

33 フォルダーの作成プレビューシラサギは静的 HTML の書き出しに対応していますシラサギ導入時に設定した定期実行のタイミングで HTML が書き出されますので管理画面内で変更した内容は公開画面には即時反映されません ( 通常は 15 分に 1 回の書き出しを設定 ) 公開画面とは別にプレビューを設けていますのでサイト構築中このプレビューより更新の即時確認を行います後ほど説明するページ自体は保存時に書き出されます

34 フォルダーの作成作成したフォルダーは以下のように表示されます 1. サポート 2. 製品サポート 3. サービスサポートフォルダー内のカテゴリーフォルダーが表示されます該当するカテゴリーが設定されたページはないので何も表示されていない状態です

35 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

36 記事ページの作成作成したカテゴリーを設定した記事ページを作成しますシラサギでは固定ページの他記事ページやイベントページなど用途に合わせた様々な種類のページがあります固定ページと記事ページはほぼ同じようなページですが用途により使い分けを行います

つのページに複数のカテゴリーを設定する場合に適していますまた記事ページのファイル名 (URL) は連番で自動設定されますので行政サイト等

37 記事ページの作成記事ページと固定ページの使い分け記事ページ 1 つのフォルダー内でページの管理を行いますページはカテゴリーを設定することでカテゴリーフォルダーの配下にページがあるように見せられるので 1 つのページに複数のカテゴリーを設定する場合に適していますまた記事ページのファイル名 (URL) は連番で自動設定されますので行政サイト等多人数でサイトの管理を行う場合に適しています記事ページ記事リストフォルダーページの URL は記事リストフォルダーの配下にあるようになります (/docs/1234.html) カテゴリーカテゴリーカテゴリーカテゴリー暮らし育て観光産業

38 記事ページの作成記事ページと固定ページの使い分け固定ページページを直接フォルダーの配下に作成します複数のカテゴリーからのルートを設定しない場合やメインとなるルートが決まっている場合 URL を固定にしたい場合に適しています固定ページにもカテゴリーを設定することは出来ますまた階層を意識したローカルメニューを設置する場合は固定ページが適していますフォルダーフォルダーフォルダーフォルダー暮らし育て観光産業固定ページ固定ページ固定ページ固定ページ

39 記事ページの作成ルート階層への戻り方この後の手順では各作業前にはルート階層に戻っていただく必要がありますまずルート階層に戻ってください

40 記事ページの作成地図を利用できるようにするグーグルマップは 2016 年 6 月 22 日から新規サイトでは API キーが必要になりました

41 記事ページの作成地図を利用できるようにする Open layers に変更

42 記事ページの作成記事ページはフォルダー属性記事リストが設定されたフォルダーの中で作成しますコンテンツ画面記事リストフォルダー内

43 記事ページの作成各項目に内容を入力し公開保存しますタイトルシステム相談会を開催します本文カテゴリーサポート製品サポートをチェック地図東京都渋谷区円山町 28 番 4 号にマーカーを設置

44 記事ページの作成記事ページが作成されました製品サポートのページにも表示されます記事ページ製品サポート

45 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

46 パーツの作成作成したカテゴリーが設定された記事ページ一覧を表示するパーツを作成します自由に HTML を記述するパーツの他様々な機能を持ったパーツも存在します管理画面サイトトップに戻りパーツの作成を行ってください

47 パーツの作成トップページに配置されているパーツニュースを編集しカテゴリーサポートが設定されたページの一覧を表示するタブを追加します

48 パーツの作成パーツニュースのタブ設定 (URL) にサポートのフォルダーパスを追加し保存しますパーツ一覧パーツ編集画面

49 パーツの作成トップページのニュース部分にサポートのタブが追加されました

50 パーツの作成カテゴリーサポートの設定された記事一覧を作成しますフォルダーサポートの中でパーツ属性記事リストのパーツを作成することでカテゴリーサポートの設定された記事一覧を表示するパーツを作成することができますパーツ属性パーツ名フィル名 : 記事リスト : 記事リスト : list 検索条件 (URL) : support/product, support/service

51 パーツの作成この時点ではレイアウトにパーツを表示していないので作成したパーツはどこにも表示されていません次のレイアウトの作成でパーツを埋め込んでみますサイトトップに戻りレイアウトの作成を行ってください

52 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

53 レイアウトの作成ページの全体デザインを決定するレイアウトの作成を行いますフォルダーサポートに適用するレイアウトを作成しますレイアウトは HTML とパーツや本文を埋め込む独自タグにより構成されています

54 レイアウトの作成独自タグの説明パーツの埋め込みタグ {{ part パーツのファイル名 " }} 例 {{ part head" }} {{ part support/list }} フォルダー内に作成しているパーツの場合はフォルダーのパスから記載します

55 レイアウトの作成独自タグの説明本文の埋め込みタグ {{ yield }} ページタイトルの埋め込みタグ #{page_name}

56 レイアウトの作成フォルダーサポートに適用するレイアウトを作成しますレイアウト名サポートファイル名 support HTML レイアウト 1 カラムの HTML をコピーし {{ yield }} の下行に {{ part support/list }} を追記します

57 レイアウトの作成作成したレイアウトをフォルダーサポートに適用します

58 レイアウトの作成パーツ記事リストを配置したレイアウトが適用されました

59 レイアウトの作成ここまでで画面表示に必要な要素が揃ったので一度書き出しを行います管理画面サイトトップに戻りフォルダー書き出し実行と選択します

60 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

61 表示の調整サポートの画面に CSS を適用します SCSS Compass の利用が可能ですシラサギへアップロードした SCSS ファイルは自動的にコンパイルされ CSS ファイルが生成されます

62 表示の調整 CSS ファイルはフォルダー属性がアップローダーとなっているフォルダー CSS に格納されています

63 表示の調整企業サンプル内の CSS ファイルの説明 camera.css トップページのスライドショー用の CSS mobile.css フィーチャーフォン表示用の CSS style.css( style.scss) メインの CSS のファイル style.scss が自動コンパイルされ style.css を書き出される _init.scss リセット CSS のパーシャルファイル _part.scss 変数や mixin を定義したパーシャルファイル

64 表示の調整企業サンプル内の CSS ファイルの説明 SCSS とはネストされたルール変数ミックスインセレクタ継承など CSS にあると便利な拡張を使うことができるようになりますその他にも if,for,each,while なども使えるようになります冗長になりがちな CSS コードをコンパクトにまとめ効率的に CSS を管理できます SCSS の記述 CSS の記述 section { width: 100%; p { font-weight: bold; } } コンパイル section { width: 100%; } section p { font-weight: bold; }

65 表示の調整企業サンプル内の CSS ファイルの説明 Compass とは SCSS を元にしたフレームワークです代表的なものですと CSS3 のプロパティを記述する際にベンダープレフィックス ( ブラウザごとの記述 ) を書く必要がなくなります Compass の記述 p { display: box-shadow( px #ccc); } CSS で記述すると p { display: block; -webkit-box-shadow: px #a82f34; -moz-box-shadow: px #a82f34; box-shadow: px #a82f34; } リセット CSS とはブラウザが持っているデフォルトの CSS をリセットするための CSS です

66 表示の調整 style.scss の 948 行目以降に text.txt の 90~111 行目に記述しているコードを追加します

67 表示の調整サポートの画面表示が変更されました

68 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題

69 課題今までの説明を踏まえ以下の画面を作成してみてくださいカテゴリー / カテゴリーリストカテゴリー / ページリスト

70 課題課題のヒントフォルダーを 3 点作成スタッフ紹介 (staff) 役員 (staff/officer) 社員 (staff/employee) フォルダーニュース内に記事ページを 2 点作成代表取締役社長白鷺太郎 ( カテゴリー : スタッフ, 役員 ) 黒鷺花子 ( カテゴリー : スタッフ, 社員 ) フォルダースタッフ紹介の中にパーツ記事 / 記事リストを作成検索条件 (URL):staff/officer, staff/employee レイアウトを新規作成 HTML の内容は先に作成したものをコピーし {{ part support/list }} の部分を上記で作成したパーツのパスに変更

PowerPoint プレゼンテーション

PowerPoint プレゼンテーションシラサギハンズオン in 東京第 1 回 ( 全 2 回 ) サイト構築編自己紹介株式会社ウェブチップス講師野原直一 ( のはらなおかず ) 代表取締役社長 CEO 稲谷昌樹 ( いなやまさき ) 製作チームリーダーオープンソースソフトウェアシラサギのご紹介講師 : 野原目次 1. 会社概要 2. シラサギについて 3.CMSアプリケーション 4. 開発コミュニティ会社概要会社名設立資本金所在地役員社員数事業内容