2022年10⽉28⽇（⾦）
株式会社ウェブチップス
制作チーム

http://www.web-tips.co.jp/
Copyright © 2014- Web Tips Co.,Ltd All Rights Reserved.

⽬次
第⼀部 13:00〜

第⼆部 14:00〜

1. シラサギの基本操作
2. 記事の作成⽅法
3. 質疑応答1. フォルダー、パーツの作成
2. デザインの調整
3. 質疑応答2

第⼀部 13:00〜

3

会社概要

4

会社概要
会社名

株式会社ウェブチップス

法⼈番号6480001008682

所在地〒770-0865 徳島県徳島市南末広町4番53号 エコービル4階

電話番号

088-678-6619

FAX番号

088-678-6669

役員

代表取締役社⻑ CEO：野原 直⼀
技術担当取締役 CTO：⾕沢 和寿

設⽴

2013年9⽉20⽇

資本⾦1,000万円

事業内容

オープンソースソフトウェア「シラサギ」開発事業「シラサギ」を⽤いた受託開発事業「シラサギ」を⽤いたサポートサービス事業「シラサギ」を⽤いたクラウドサービス事業

社員数

11名（役員2名）

参加団体（⼀社）徳島県情報産業協会、（公財）e-とくしま推進財団、OSSコンソーシア
ム、オープンソースビジネス推進協議会、⽇本OSS推進フォーラム、とくしま
OSS普及協議会、Rubyビジネス推進協議会

2018年 ISMS取得

自社開発のオープンソースソフトウェア「シラサギ」を、全国３９都道府県１３９社の協業ベンダー様の協力を得て、２００以上の団体（官公庁、自治体、大学、病院など）に導入しています。

5

シラサギについて6

シラサギについて

シラサギの特徴「シラサギ」は、みんなで育てるOSSl Ruby、Ruby on Rails、MongoDBで動作する中・⼤規模サイト向けCMS
l コアの設計がSNS → Webアプリケーション開発プラットフォームとしても利⽤可能
l 誰でも無償で利⽤可能なオープンソース
7シラサギについて
サイト運⽤イメージ

CMSの特徴中・⼤規模サイトの運⽤もラクラク機能するウェブページを、⾃分たちで。

l マルチテナント⽅式に対応
l 安⼼・便利な機能が満載
ü 緊急災害レイアウト
ü 施設機能ü 組織変更ü アクセシビリティツールなど8シラサギについて
シラサギのページ構成イメージ• レイアウト
ページ全体のレイアウトをＨＴＭＬで作成し、管理します。フォルダー、ページ単位で設定ができます。上位のフォルダーにレイアウトを設定している場合は、ページ作成時に⾃動で同じレイアウトが設定されます。

• パーツ
レイアウトに配置するコンテンツをパーツという部品で管理します。複数のレイアウトで共⽤することで管理が⾮常に楽になります。

• 本⽂
本⽂欄はページ作成時に⼊⼒した内容が表⽰されます。
フォルダートップページ（index.html）はフォルダー作
成時に設定したフォルダ属性に応じた内容が表⽰されます。
9

シラサギの基本操作

10シラサギの基本操作

ハンズオン
http://hanson.sswk.web-tips.co.jp

⼦育て⽀援サンプルのサイト

Basic認証
ユーザーID
パスワード

11

シラサギの基本操作

管理画⾯へのアクセス
http://hanson.sswk.web-tips.co.jp/.mypage• 公開画⾯の末尾に「.mypage」とつけると管理画⾯になります。

管理画⾯
ユーザーID
パスワード12シラサギの基本操作
マルチテナントに対応しているのでサイト⼀覧が表⽰されます。

13

シラサギの基本操作
CMSの管理画⾯の構成
管理画⾯ルートへ画⾯を確認
メインメニュー
（運⽤・サイト構
築メニュー）

アプリケーション
選択、アカウント
メニュー
パンくずメニュー本⽂エリア（⼀覧もしくは詳細）

設定系メニュー

14

シラサギの基本操作
メインメニューの構成• コンテンツ
利⽤頻度の⾼いフォルダーをショートカットとして登録します。

• フォルダー
サイトは「フォルダー」による階層構造で管理します。

• 固定ページ
現在開いている「フォルダー」にある固定ページを表⽰します。

• パーツ
レイアウトに配置するHTMLの部品を「パーツ」で管理します。

• レイアウト
ページ全体のレイアウトをHTMLで作成し、管理します。
15

記事の作成⽅法

16

フォルダー・ページの作成
記事ページを作成する

公開画⾯

管理画⾯

記事ページ17

質疑応答

18

第⼆部 14:00〜

19

フォルダー・ページの作成

20

フォルダー・ページの作成
3つのフォルダーを作成します。
園からのお知らせフォルダー1

フォルダー属性 カテゴリー/カテゴリーリスト
フォルダー名notice

レイアウト

フォルダーリスト

2、3は1の中に作成
フォルダー2

お知らせ

フォルダー3

⾏事の様⼦

フォルダー属性

カテゴリー/ページリスト

フォルダー属性

カテゴリー/ページリスト

フォルダー名noticeフォルダー名

event

レイアウト

ページリストレイアウト

ページリスト21

フォルダー・ページの作成
フォルダー属性について
公開画⾯

カテゴリー/カテゴリーリスト

管理画⾯

新規作成

カテゴリー/ページリスト
22フォルダー・ページの作成
作った記事ページにカテゴリーを設定する

公開画⾯

管理画⾯

記事ページ

カテゴリー/ページリスト
23

デザインの調整

24

デザインの調整
パーツ・レイアウトの配置構成
レイアウト
新着情報のパーツ

サイドメニューの広告バナーのパーツ

リンクまとめたパーツ
ページトップに戻るパーツ
広告バナーのパーツ

レイアウトという枠組みの中にパーツが配置されている
25

デザインの調整
レイアウトについて
管理画⾯• パーツの埋め込みタグ{{ part “パーツのファイル名" }}ページ⽣成時に指定したパーツがHTMLとして出⼒（例）{{ part “head-top" }}{{ part “key_visual/slide” }}トップレイアウト

フォルダー内に作成しているパーツの場合はフォルダーのパスから記載します。
26

デザインの調整
レイアウトについて
管理画⾯• ページタイトルの埋め込みタグ#{ page_name }• 本⽂の埋め込みタグ{{ yield }}トップレイアウト

記事ページの場合は⼊⼒をしたもの、フォルダーの場合はフォルダ属性に基づいた内容が出⼒されます。

27

デザインの調整
1

ヘッダーのサイト名を変更する

28

デザインの調整
１ ヘッダーのサイト名を変更する
パーツ＞

ヘッダー：トップ＞

編集する

ヘッダー：トップ29

デザインの調整
２「園からのお知らせ」のページ⼀覧をトップページに表⽰する

30

デザインの調整
２「園からのお知らせ」のページ⼀覧をトップページに表⽰する
フォルダ

パーツ作成

パーツの埋め込み

パーツ設置場所

フォルダー1
園からのお知らせ(notice)の配下

パーツ属性

記事/記事リスト

パーツ名list

トップページ（top.layout.html）
レイアウト ＞ トップページ
⾚枠の記述を追加＞

編集する
31

補⾜

32

補⾜
他のフォルダー属性

キービジュアル/画像管理施設

メールフォーム/フォーム

33

デザインの調整
CSSについてSCSSの利⽤が可能です。
シラサギへアップロードした SCSS ファイルは⾃動的にコンパイルされ CSS ファイルが⽣成されます。

34

デザインの調整
⼦育て⽀援サンプルのcssの説明
フォルダー ＞

CSS

mobile.css

フィーチャーフォン表⽰⽤の CSS

style.css

メインの CSS のファイル
style.scss が⾃動コンパイルされ style.cssを書き出される_init.scss

リセットCSS のパーシャルファイル_part.scss

変数や mixin を定義したパーシャルファイル

ckeditor_contents.css :テキストエディター⽤のCSS

35

質疑応答

36