シラサギハンズオン 1015 1016

Ruby/Rails/mongoDBで動作する中・大規模サイト向けCMS「シラサギ」のハンズオン

自己紹介
ウェブチップス
1. 野原
2. 伊藤
3. 中野

ハンズオン目次
1. シラサギの紹介 [10min]
2. ハンズオンの導入 [20min]
3. ハンズオンの環境構築 [20min]
4. ハンズオン [60min]
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成

目次
１．会社概要
２．シラサギについて
３．ＣＭＳアプリケーション
４．開発コミュニティ

会社概要
会社名
設立
資本金
所在地
役員
株式会社ウェブチップス
2013年9月20日
500万円
〒770-0872 徳島県徳島市北沖洲三丁目6番58号石本ビル202
代表取締役社長CEO 野原直一
技術担当取締役CTO 谷沢和寿
6名（役員含む）
オープンソースソフトウェア開発事業
オープンソースソフトウェアを使った導入・カスタマイズ事業
オープンソースソフトウェアのサポート事業
オープンソースソフトウェアを使ったクラウドサービス事業
社員数
事業内容

「シラサギ」という名称の由来
サギ科の鳥のうち、全身の羽毛が白いものを「白鷺（しらさぎ）」と呼びます。
徳島県では1965年10月から「シラサギ」を県の鳥に指定しています。
サギ類は、他の種類のサギたちと一緒に「鷺山（さぎやま）」という巣を作り、
繁殖するという特徴があります。
その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを
開発していくというコンセプトと一致したためこの名称を採用しました。
「シラサギ」は、みんなで育てるオープンソースソフトウェアです。

ＭＩＴライセンス
誰でも自由にカスタマイズできます。
誰でも自由にフォークできます。
拡張機能を公開するかどうかを自由に選べます。

Webアプリ開発プラットフォーム
ＣＭＳですが、コアの設計は汎用ＳＮＳになっており、Ｗｅｂアプリ開発プラットフォーム
として利用できます。
将来的にグループウェア、ＳＮＳなどの様々なアプリケーションの開発ができます。

モデルアドオン設計
下記をカプセル化して任意のコレクションに
取り付けられます。
・DBのフィールド
・データ検証や保存ロジック
・編集画面
・詳細画面
アドオンをうまく使うことで、モジュールの
肥大化を抑えられます。
結果、ソース管理が非常に楽になります。

ＭｏｎｇｏＤＢ
NoSQLであるMongoDBを採用し、高速化を
実現しています。
公開されているフォルダ・ページには、リレー
ションによる関連付けはなく、それぞれがファ
イル名（ＵＲＬ）を保持しています。
そのため、MongoDBの強みである前方一致
検索のパフォーマンスを最大限に引き出せ
ます。そのため、任意のフォルダ内の検索も
非常に高速かつ効率的に行えます。

「シラサギ」の動作環境
対象バージョンなど
OS CentOS 6,7 64bit or Ubuntu Server 14.04LTS
Webサーバ
アプリケーションサーバ
nginx or Apache
+
Unicorn
DBシステム MongoDB 3.0
Ruby 2.2.2
Ruby on Rails 4.2.3
常に最新のバージョンに適用しています。

ＣＭＳアプリケーション
シラサギのコアとなる部分の設計は汎用ＳＮＳになっており、Ｗｅｂアプリ開発プラットフォーム
として利用できます。
現在は、そのプラットフォーム上でＣＭＳアプリケーションが稼働しています。

初期データ
市町村向けの自治体サンプルデータ、企業サンプル
データを初期データとして提供しています。
インストール時に初期データを切り替えられます。
今後も様々なサンプルデータを提供していきます。
・子育てサイトサンプル
・大学サンプル
・県向け自治体サンプル
など

初期データを使ったホームページ作成（１）
初期データ「企業サンプル」企業向けホームページ
ロゴ
写真
色
レイアウト
を調整

初期データを使ったホームページ作成（２）
初期データ「自治体サンプル」自治体向けホームページ
ロゴ
写真
色
レイアウト
を調整

拡張プラグイン
独自の拡張プラグイン機能「egg（エッグ）」があります。
モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。

地図データベース機能
表示項目
検索条件
などを調整
バリアフリーマップ
拡張プラグインを使ったウェブシステム開発

マルチテナント対応
同一データベース同一スキーマ方式を採用しています。
これにより管理者の運用コストを軽減できます。

マルチテナントを使ったサービス提供
シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。
例：徳島県オープンデータポータルサイトと各市町村オープンデータサイト

Ajaxパーツ
即時反映と低負荷を実現します。
ページは、検索クローラーを想定して静的ＨＴＭＬファイルを書き出します。
レイアウト、記事リストなどのパーツは、動的表示を選択することで最新の情報を表示。

マルチデバイス対応
公開画面及び管理画面は、ＰＣ、スマホ、携帯、
タブレットなど様々なデバイスに対応します。
公開画面
管理画面

多言語対応
管理画面のメニューテキストは、
外部ファイルに一括保存して
いるため、多言語版としてすぐ
に利用可能。
将来的には、ログインユーザー
ごとに利用言語を選択できる
ように。

「シラサギ」の機能について
「シラサギ」は、中・大規模サイト向けCMSということもあり、他にもたくさんの機能があります。
特に、官公庁、自治体、教育委員会、大学などで利用されることを想定し、可能な限り運用が
楽になるように配慮しています。下記のシラサギ公式サイトで今後の開発予定については、
公開されておりますので、是非ご確認ください。
http://www.ss-proj.org/dev/roadmap.html

GitHubによる公開開発
「シラサギ」は、GitHub上で公開開発を行っており、全国の中小ベンダーが開発に参加して
います。オープンデータプラグインも、導入によって定期的に機能追加されています。

シラサギ公式サイト
新着情報
リリースノート
よくある質問
ダウンロード
オンラインデモ
導入事例
開発情報
など
http://ss-proj.org/

シラサギプロジェクト開発コミュニティ
シラサギプロジェクトの開発コミュ
ニティをfacebook上の公開グルー
プとして立ち上げています。
リリース詳細や他のエンジニアの
方からのレポートなども掲載され
ていますので、是非ご参加くださ
い。

研修制度、開発セミナー
■研修制度
下記のエンジニア受入実績があります。
徳島県内企業３社
東京の企業１社
※期間は１週間～３ヵ月
■開発セミナー
シラサギを用いた開発セミナーを実施しています。
松江エンジニア向け１１名１月３０日
Ｒｕｂｙビジネス推進協議会（大阪）２０名２月２７日
東京築地２３名４月２２日
東京築地２５名１０月１５日
塩尻１２名１０月１６日

ハンズオンの狙い
1. シラサギの概要を理解する。
2. シラサギの仕組みを理解する。
3. シラサギの機能追加と機能拡張の方法を理解する。

導入の目的
管理画面
1. メニューやコンテキストメニューの操作方法
2. フォルダ
3. レイアウト
4. パーツ
5. ページ
6. アドオン

シラサギデモ
http://ss-proj.org/download/demo.html
Googleで「shirasagi demo」を検索してもOK
http://localhost:3000/.mypage
Vagrantの環境をお持ちの方

管理画面 – システム管理

管理画面 – サイト管理

管理画面 – フォルダ一覧

公開画面 – 記事フォルダ

管理画面 – フォルダ詳細

管理画面 – レイアウト一覧

管理画面 – レイアウト詳細

アドオン
以下をカプセル化したもの
1. DBのフィールド
2. HTMLの入力フィールド
3. ビジネス・ロジック
Rails モデルクラスに include することで、モデルの機能を拡張する。

Rails モデルクラスでのアドオン
class Article::Page
include Cms::Page::Model
include Cms::Addon::Meta
include Cms::Addon::Body
include Cms::Addon::File
include Cms::Addon::Release
include Cms::Addon::ReleasePlan
include Cms::Addon::RelatedPage
include Category::Addon::Category
include Event::Addon::Date
include Map::Addon::Page
include Workflow::Addon::Approver
include Contact::Addon::Page
include History::Addon::Backup
…

振り返り
管理画面
1. メニューやコンテキストメニューの操作方法
2. フォルダ
3. レイアウト
4. パーツ
5. ページ
6. アドオン

ハンズオンの環境構築
環境構築
1. VirtualBox インストール
2. Vagrant インストール
3. Windows の方だけ
1. git のインストール
2. Tera Term インストール
4. Vagrant Boxのインストール

VirtualBox & Vagrant インストール
■VirtualBox
https://www.virtualbox.org/wiki/Downloads
Googleで「virtualbox download」を検索してもOK
■Vagrant
https://www.vagrantup.com/downloads.html
Googleで「vagrant download」を検索してもOK

Windows の方だけ
■Git
https://msysgit.github.io/
Googleで「windows git」を検索してもOK
■Tera Term
http://sourceforge.jp/projects/ttssh2/releases/
Googleで「teraterm download」を検索してもOK

ハンズオン用Github
https://github.com/itowtips/ss-handson
Googleで「github itowtips」を検索してもOK
SSID: XXXXXXXX
PASS： xxxxxxxx

ハンズオン用Github
Vagrantfile をダウンロード

ハンズオン環境の起動
> cd Vagrantfile をダウンロードしたディレクトリ
> vagrant up

ハンズオン環境へログイン
■Windowsの方
IPアドレス: localhost
ポート: 2222
User: vagrant
Password: vagrant
■Mac, Linux の方
$ vagrant ssh

2. 準備
3. シラサギの構成

開発サンプル紹介
SHIRASAGI Wiki
https://github.com/shirasagi/shirasagi/wiki
開発サンプル：ブログページ
https://github.com/shirasagi/shirasagi/wiki/開発サンプル：ブログページ
今回のハンズオンで使用するリポジトリ、コマンド集などあります
※これを見ながら進めていきます

シラサギWiki：開発サンプルブログページ
シラサギにはページを作成し公開できる機能がいくつかあります
• 記事ページ
• 固定ページ
• イベントページ
• FAQページ

シラサギにはページを作成し公開できる機能がいくつかあります
• 記事ページ
• 固定ページ
• イベントページ
• FAQページ
• ブログページ ← 今回はこれを追加します

今回のハンズオンの流れ
1. 開発用のシラサギインストール
シラサギのインストール、デモデータの登録ができるようになります
2. シラサギの構成について
他のRailsアプリケーションと違う、変わった構成の箇所を紹介
ページの追加を行います独自のページが作れるようになります
アドオンの追加を行います入力フォームの拡張ができるようになります
5. フォルダーの追加
作成したページ用一覧フォルダーの追加を行います、フォルダー作成ができるようになります

準備前提知識
シラサギで使っている技術
• Ruby & Ruby On Rails
• Javascript & CoffeeScript
• Css & Scss
• Git
• MongoDB

準備 Gitとソースコード
シラサギの動く環境がある方はGitHubからソースコードを取得してください
#cd $HOME
#git clone https://github.com/itowtips/ss-handson sample
#cd sample

必要な設定ファイル(各種ymlとunicorn.rb)をコピーします
#cd $HOME
#cd sample
#cp config/samples/* config/

bundle install
#cd $HOME
#cd sample
#cp config/samples/* config/
#bundle install

準備 MongoDB設定
# vi config/mongoid.yml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# mongodb configuration
production:
sessions:
default:
database: ss
development:
# Configure available database sessions. (required)
sessions:
# Defines the default session. (required)
default:
# Defines the name of the default database that Mongoid can connect to.
# (required).
database: ss
使用するデータベース名を変更します production & development

準備 MongoDB設定
# vi config/mongoid.yml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# mongodb configuration
production:
sessions:
default:
database: ss_sample
development:
# Configure available database sessions. (required)
sessions:
# Defines the default session. (required)
default:
# Defines the name of the default database that Mongoid can connect to.
# (required).
database: ss_sample
使用するデータベース名を変更します production & development

準備 RAILS_ENV
# cp config/defaults/environment.yml config/
# vi config/environment.yml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# default environment
RAILS_ENV: production
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Railsをdevelopmentモードに

準備 RAILS_ENV
# cp config/defaults/environment.yml config/
# vi config/environment.yml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# default environment
RAILS_ENV: development
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Railsをdevelopmentモードに

準備サンプルデータ
#rake db:create_indexes
MongoDB インデックス作成

#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'
システム管理者作成

#rake ss:create_site data='{ name: "サイト名", host: "www", domains: "localhost:3000" }'
サイト作成
環境にあわせてＩＰ or ドメイン

#rake db:seed name=users site=www
サンプルユーザ＆グループ作成

#rake db:seed name=demo site=www
自治体サンプルデータ投入

#rake db:seed name=demo site=www
#rake unicorn:start
unicorn起動

準備確認
http://ドメイン:3000/

準備ソースコード
シラサギはGitでソースコードを管理しています
今回使用するリポジトリは v0.9.0ベース
３つの開発サンプル（ブログページ、天気アドオン、フォルダー）
をブランチに分けています適宜、切り替えて動かしてみてください
git checkout -b sample-blog-page origin/sample-blog-page
git checkout -b sample-blog-addon origin/sample-blog-page
git checkout -b sample-blog-node origin/sample-blog-page

シラサギの構成
app/controllers
app/models
app/views
config/locales
config/routes
ソースコードをエディタで開いてみてください

app/controllers
app/models
app/views
config/locales
config/routes
シラサギ独特な構成
• 再利用可能なプログラムがある
• 公開画面、管理画面がある
• 静的ＨＴＭＬ書き出し機能がある

app/controllers
app/models
app/views
config/locales
config/routes
• addon
• routes
• agents

シラサギの構成 Addon
app/controllers
app/models
app/views
config/locales
config/routes
• addon
• routes
• agents

シラサギの構成 Addon
app/controllers
app/models
app/views
config/locales
config/routes
models/concerns/cms/addon/body.rb 本文
models/concerns/cms/addon/file.rb ファイル
models/concerns/cms/addon/meta.rb メタ情報
…

シラサギの構成 Routing
app/controllers
app/models
app/views
config/locales
config/routes
• routes
• addon
• agents

app/controllers
app/models
app/views
config/locales
config/routes
config/routes.rb
config/routes/article/routes.rb
記事モジュール

app/controllers
app/models
app/views
config/locales
config/routes
config/routes.rb
SS::Application.routes.draw do
…
content "article" do
get "/" => redirect { |p, req| "#{req.path}/pages" }, as: :main
get "generate" => "generate#index“
post "generate" => "generate#run“
resources :pages, concerns: [:deletion, :copy, :move, :lock]
end
…
node "article" do
get "page/(index.:format)" => "public#index", cell: "nodes/page“
get "page/rss.xml" => "public#rss", cell: "nodes/page", format: "xml“
end
part "article" do
get "page" => "public#index", cell: "parts/page"
end
page "article" do
get "page/:filename.:format" => "public#index", cell: "pages/page“
end
end

app/controllers
app/models
app/views
config/locales
config/routes
config/routes.rb
ルーティング追加ブロック
管理画面 content
公開画面 node, page, part
※namespaceの拡張
…
get "/" => redirect { |p, req| "#{req.path}/pages" }, as: :main
get "generate" => "generate#index“
post "generate" => "generate#run“
resources :pages, concerns: [:deletion, :copy, :move, :lock]
end
…
node "article" do
get "page/(index.:format)" => "public#index", cell: "nodes/page“
get "page/rss.xml" => "public#rss", cell: "nodes/page", format: "xml“
end
part "article" do
get "page" => "public#index", cell: "parts/page"
end
page "article" do
get "page/:filename.:format" => "public#index", cell: "pages/page“
end
end

次のコマンドで記事モジュールのルーティングを確認してみてください。
#rake routes | grep article

シラサギの構成 Routing 管理画面
resources :pages
end
article_pages GET /.:site/article:cid/pages(.:format) article/pages#index {:cid=>/w+/}
POST /.:site/article:cid/pages(.:format) article/pages#create {:cid=>/w+/}
new_article_page GET /.:site/article:cid/pages/new(.:format) article/pages#new {:cid=>/w+/}
edit_article_page GET /.:site/article:cid/pages/:id/edit(.:format) article/pages#edit {:cid=>/w+/}
article_page GET /.:site/article:cid/pages/:id(.:format) article/pages#show {:cid=>/w+/}
PATCH /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/w+/}
PUT /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/w+/}
DELETE /.:site/article:cid/pages/:id(.:format) article/pages#destroy {:cid=>/w+/}

シラサギの構成 Routing 管理画面
resources :pages
end
Ex. 管理画面
記事一覧: http://demo.ss-proj.org/.demo/article1/pages
記事詳細: http://demo.ss-proj.org/.demo/article1/pages/28
article_pages GET /.:site/article:cid/pages(.:format) article/pages#index {:cid=>/w+/}
POST /.:site/article:cid/pages(.:format) article/pages#create {:cid=>/w+/}
new_article_page GET /.:site/article:cid/pages/new(.:format) article/pages#new {:cid=>/w+/}
edit_article_page GET /.:site/article:cid/pages/:id/edit(.:format) article/pages#edit {:cid=>/w+/}
article_page GET /.:site/article:cid/pages/:id(.:format) article/pages#show {:cid=>/w+/}
PATCH /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/w+/}
PUT /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/w+/}
DELETE /.:site/article:cid/pages/:id(.:format) article/pages#destroy {:cid=>/w+/}
/.:site/article:cid
pages

シラサギの構成 Routing 公開画面
node "article" do … end
part "article" do … end
page "article" do … end
article_node GET /.:site/nodes/article/page(/index.:format) cms/public#index {:cell=>"nodes/page"}
article_part_page GET /.:site/parts/article/page(.:format) cms/public#index {:cell=>"parts/page"}
GET /.:site/pages/article/page/:filename.:format cms/public#index {:cell=>"pages/page"}

シラサギの構成 Routing 公開画面
node "article" do … end
part "article" do … end
page "article" do … end
article_node GET /.:site/nodes/article/page(/index.:format) cms/public#index {:cell=>"nodes/page"}
article_part_page GET /.:site/parts/article/page(.:format) cms/public#index {:cell=>"parts/page"}
GET /.:site/pages/article/page/:filename.:format cms/public#index {:cell=>"pages/page"}
Ex. 公開画面
記事一覧フォルダー: http://demo.ss-proj.org/docs/
記事ページ: http://demo.ss-proj.org/docs/30.html
cms/public#index cell: " nodes/page " とは?

Routingまとめ
• 管理画面
• content ブロックを記述し定義
• ドメイン/.サイト名/モジュール(ID)/リソース
ex. http://demo.ss-proj.org/.demo/article1/pages
• 公開画面
• page, node, parts ブロックを記述し定義
• アクセスできるURL（ルーティング）は変化する？
記事を作った、記事を消した等々
→agents

ブログページ作成 Agents
app/controllers
app/models
app/views
config/locales
config/routes
• routes
• addon
• agents

app/controllers
app/models
app/views
config/locales
config/routes
controllers/article/agents

• agents
• アクションチェインを実現するための手段
• アクション→アクションという流れを実現する
• 利用箇所
• 公開側のコントローラー (cms/public_controller)
公開側（利用者）のアクセスを各コンテンツに振り分ける
Ex. http://ドメイン/docs/page.html → 記事ページ
http://ドメイン/calendar/ → イベントカレンダー
• 静的ページ書き出し

公開側ルーティング config/routes/cms/routes_end.rb
• 管理画面と特殊なルーティング以外全てをcms/public#indexで受け付ける
…
match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete]
root "cms/public#index", defaults: { format: :html }
…
※glob ルーティング（Route Globbing）

公開画面"記事"にアクセス
http://ドメイン/docs/page.html
…
…

Controller
cms/public#index
…
…

Controller
cms/public#index → article/agents/pages/page_controller#index
…
…
cell: " pages/page "

まとめ
• Addon
• 再利用可能なプログラム
• Model にinclude することでアドオンの入力フォームが増える
• Routing
• 管理画面公開画面がある
• コンテンツを追加する場合はそれぞれのルーティングを定義する
• Agents
• アクション → アクションを実現するための仕組み
• 公開画面の変化するルーティングの解決に利用
• 静的書き出しに利用

ブログページ作成
シラサギWiki：ブログページ作成

※管理画面でブログページが作成できるようになります。

※公開画面での表示。
まずは既存のページを参考に、同様のものを作成します。

app/controllers
app/models
app/views
config/locales
config/routes
ここから実際に、ブログモジュールを追加していきます。

app/controllers/blog
app/models/blog
app/views/blog
config/locales/blog
config/routes/blog
ここから実際に、ブログモジュールを追加していきます。
手動でソースを追加するのは面倒…
#git checkout -b sample-blog-page origin/sample-blog-page
#rake unicorn:stop
#rake unicorn:start

Blog Page Model
app/models/blog/page.rb
class Blog::Page
include Cms::Model::Page
before_save :seq_filename, if: ->{ basename.blank? }
default_scope ->{ where(route: "blog/page") }
private
def validate_filename
(@basename && @basename.blank?) ? nil : super
end
def seq_filename
self.filename = dirname ? "#{dirname}#{id}.html" : "#{id}.html"
end
end

Blog Page Model
• include Cms::Model::Page
app/models/concerns/cms/model/page.rb
DB の Collection は cms_pages に
class Blog::Page
private
end
def seq_filename
end
end
Cms::Model::Page

Blog Page Model
• include Addons
…
class Blog::Page
private
end
def seq_filename
end
end
Addons

Blog Page Model
• default_scope
where(route: "blog/page")
route: コンテンツを識別する値
"blog/page" ブログ/ブログページ
class Blog::Page
private
end
def seq_filename
end
end
default_scope

Blog Page Initializer
app/models/blog/initializer.rb
• Cms::Node.plugin "blog/page"
フォルダー属性にブログ/ブログページというコンテンツが追加されます
module Blog
class Initializer
Cms::Node.plugin "blog/page"
end
end

Blog Page Controller
app/controllers/blog/pages_controller.rb
• ブログページ管理側コントローラー
class Blog::PagesController < ApplicationController
include Cms::BaseFilter
include Cms::PageFilter
include Workflow::PageFilter
model Blog::Page
append_view_path "app/views/cms/pages“
navi_view "blog/main/navi“
private
def fix_params
{ cur_user: @cur_user, cur_site: @cur_site,
cur_node: @cur_node }
end
#public
# Cms::PageFilter
end

Blog Page Controller
• Include Filters
必要なアクションが定義されます
Index, show, new…
class Blog::PagesController < ApplicationController
include Cms::BaseFilter
include Cms::PageFilter
include Workflow::PageFilter
model Blog::Page
append_view_path "app/views/cms/pages“
navi_view "blog/main/navi“
private
def fix_params
{ cur_user: @cur_user, cur_site: @cur_site,
cur_node: @cur_node }
end
#public
# Cms::PageFilter
end
Filters

Blog Page Agents View & Controller
app/controllers/blog/agents/pages_controller.rb
app/views/blog/agents/pages/index.html.erb
• ブログページ公開側コントローラー
公開側ビュー
• agentsの下に配置
class Blog::Agents::Pages::PageController < ApplicationController
include Cms::PageFilter::View
end
<%= render file: "cms/agents/pages/page/index" %>

Blog Page Navi View
app/views/blog/main/_navi.html.erb
• ブログモジュールnavi view
<%= node_navi do %>
<nav class="sub-menu">
<header><h1><%=t"modules.blog" %></h1></header>
<div>
<%= link_to :"blog.page", blog_pages_path,
class: "icon-page" %>
</div>
</nav>
<% end %>

Blog Config Locales
config/locales/blog/ja.yml
• ブログモジュールのlocale
ja:
blog:
page: ブログページ
modules:
blog: ブログ
" blog/page "
ブログ/ブログページ

Blog Page Routes
config/routes/blog/routes.rb
• ブログモジュールのRouting
管理画面 content "blog" do … end
公開画面 page "blog" do … end
Blog::Initializer
concern :deletion do
get :delete, on: :member
end
content "blog" do
get “/” => redirect { |p, req| “#{req.path}/pages” },
as: :main
resources :pages, concerns: :deletion
end
page "blog" do
get "page/:filename.:format" => "public#index",
cell: "pages/page"
end
end
管理画面
公開画面

ブログページ作成確認
作成したブログページを使ってみます。
1. 適当なフォルダー下でモジュールをブログに切り替え
2. 新規作成
→ ブログページが作成できます。

作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo

#mongo
#use ss_sample

#mongo
#use ss_sample
#db.cms_pages.find({route: "blog/page"}).pretty()

#mongo
#use ss_sample
#db.cms_pages.find({route: "blog/page"}).pretty()
{
"_id" : 43,
"permission_level" : 1,
"group_ids" : [1],
"state" : "public",
"order" : 0,
"category_ids" : [ ],
"file_ids" : [ ],
"related_page_ids" : [ ],
"route" : "blog/page",
“name” : “ページサンプル",
“layout_id” : 10, …

ここまでで新しいページが作成できるようになりました。
しかし、これでは記事ページと変わらないので
→ 入力フォームをカスタマイズします。
#git checkout -b sample-blog-addon origin/sample-blog-addon
#rake unicorn:restart

2. 準備

天気入力フォーム作成
シラサギWiki：天気入力フォーム作成

※ページのアドオンを追加し入力フォームを追加します。

※公開側では入力した天気と日付を表示します。

Blog Weather Addon
app/models/concerns/blog/addon/weather.rb
• 天気アドオン
module Blog::Addon
module Weather
extend ActiveSupport::Concern
extend SS::Addon
included do
field :weather, type: String
permit_params :weather
public
def weather_options
[ ["晴れ", "sunny"], ["曇り", "cloudy"],
["雨", "rain"], ["雪", "snow"], ]
end
end
end
end
field

Blog Page Model
• 天気アドオンをページに追加
class Blog::Page
include Blog::Addon::Weather
private
end
def seq_filename
end
end
Include weather addon

Blog Weather Addon Views
app/views/blog/agents/addons/weather/_form.html.erb
app/views/blog/agents/addons/weather/_show.html.rb
app/views/blog/agents/addons/weather/view/index.html.erb
• 天気アドオンのview

Blog Weather Addon Views
app/views/blog/agents/addons/weather/_form.html.erb 管理画面入力フォーム
app/views/blog/agents/addons/weather/_show.html.rb 管理画面詳細画面
app/views/blog/agents/addons/weather/view/index.html.erb 公開画面
• 天気アドオンのview

Blog Config Locales
config/locale/ja.yml
• localeを追記
ja:
blog:
page: ブログページ
sunny: ☀
cloudy: ☁
rain: ☂
snow: ☃
modules:
blog: ブログ
addons:
blog/weather: 今日の天気
mongoid:
attributes:
cms/page/model: weather: 天気

config/locale/ja.yml

管理画面から“今日の天気”を入力してみます。

天気入力フォーム作成練習
1. 天気マークを追加してみてください（雷注意報、にわか雨、お花見日和…
2. 別の入力フォームを作ってみてください（別のアドオンを作成
3. 修正したコードをローカルでcommitしてみてください（おまけ

独自の入力フォームを作成しました。
最後にフォルダーの作成を説明します。
#git checkout -b sample-blog-node origin/sample-blog-node
#rake unicorn:restart

一覧フォルダー作成
シラサギWiki：一覧フォルダー作成

※「フォルダー属性」ブログページリストが作成できるようになります

※公開側のページ一覧を変更し独自のものを作成します

Blog Node Model
app/models/blog/node.rb
• ブログ一覧フォルダー
module Blog::Node
class Base
include Cms::Model ::Node
default_scope ->{ where(route: /^blog//) }
end
class Page
include Cms::Model ::Node
include Cms::Addon::PageList
end
end

Blog Agents Nodes/Page Controller & View
app/controllers/blog/agents/nodes/page_controller.rb
• 公開側コントローラー
class Blog::Agents::Nodes::PageController < ApplicationController
include Cms::NodeFilter::View
helper Cms::ListHelper
Public
def pages
Blog::Page.site(@cur_site).public(@cur_date).
where(@cur_node.condition_hash)
end
def index
@items = pages.
order_by(@cur_node.sort_hash).
page(params[:page]). per(@cur_node.limit)
render_with_pagination @items
end
end

Blog Agents Nodes/Page Controller & View
app/views/blog/agents/nodes/page/index.html.erb
• 公開側一覧ビュー

Blog Config Locales
• localeを追記
ja:
…
cms:
nodes:
blog/page: ブログページリスト
…

Blog Config Locales
• routesにnodeブロックを追記
フォルダーの公開側
…
node "blog" do
get "page/(index.:format)" => "public#index",
cell: "nodes/page "
end
…
end

管理画面から一覧フォルダーを作成してみます。

まとめ
• 自治体サンプルのインストールを行いました。
• シラサギの独特な構成を紹介しました。
• 新しいページ、アドオン、フォルダーを作りました。
• 既存のコードを変更せずにコンテンツを追加できます。

最後に
長い時間ありがとうございました！
是非SHIRASAGIをカスタマイズしてみてください！

シラサギハンズオン 1015 1016

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to シラサギハンズオン 1015 1016

Similar to シラサギハンズオン 1015 1016 (20)

Recently uploaded

Recently uploaded (8)

シラサギハンズオン 1015 1016

Editor's Notes