Post on 17-Jul-2015
Ruby/Rails/mongoDBで動作する中・大規模サイト向けCMS「シラサギ」のハンズオン
登壇者
ウェブチップス
1. 野原
2. 中野
3. 伊藤
ハンズオンの狙い
1. シラサギの概要を理解する。
2. シラサギの仕組みを理解する。
3. シラサギの機能追加と機能拡張の方法を理解する。
ハンズオン 目次
1. シラサギの紹介 [10min]
2. ハンズオンの導入 [15min]
3. ハンズオン [60min]
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成
シラサギの紹介
会社概要
会社名
設立
資本金
所在地
役員
株式会社ウェブチップス
２０１３年９月２０日
５００万円
〒770-0872 徳島県徳島市北沖洲三丁目6番58号 石本ビル202
代表取締役社長CEO 野原 直一技術担当取締役CTO 谷沢 和寿
５名（役員含む） ２０１５年１月から６名に
オープンソースソフトウェア開発事業
オープンソースを使った導入・カスタマイズ事業
オープンソースを使ったクラウドサービス事業
社員数
事業内容
名称の由来
サギ科の鳥のうち、全身の羽毛が白いものを「シラサギ」と呼びます。
徳島県では1965年10月から「シラサギ」を県の鳥に指定しています。
サギ類は、他の種類のサギたちと一緒に巣を作り、繁殖するという特徴があります。
その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを開発していくというコンセプトと一致したためこの名称を採用しました。
「シラサギ」は、みんなで育てるＣＭＳです。
ＭＩＴライセンス
誰でも自由にカスタマイズできます。誰でも自由にフォークできます。拡張機能を公開するかどうかを自由に選べます。
Webアプリ開発プラットフォーム
ＣＭＳですが、コアの設計は汎用ＳＮＳになっており、Ｗｅｂアプリ開発プラットフォームとして利用できます。将来的にグループウェア、ＳＮＳなどの様々なアプリケーションの開発ができます。
モデルアドオン設計
下記をカプセル化して任意のコレクションに取り付けられます。
・DBのフィールド・データ検証や保存ロジック・編集画面・詳細画面
アドオンをうまく使うことで、モジュールの肥大化を抑えられます。結果、ソース管理が非常に楽になります。
ＭｏｎｇｏＤＢ
NoSQLであるMongoDBを採用し、高速化を実現しています。
公開されているフォルダ・ページには、リレーションによる関連付けはなく、それぞれがファイル名（ＵＲＬ）を保持しています。
そのため、MongoDBの強みである前方一致検索のパフォーマンスを最大限に引き出せます。そのため、任意のフォルダ内の検索も非常に高速かつ効率的に行えます。
動作環境
Internet Explorer (ver.8 以上)、Firefox、Chrome、Safariの最新バージョンを想定しています。
対象 バージョンなど
OS CentOS 6.5 64bit
Webサーバ nginx + unicorn
DBシステム MongoDB
Ruby 2.1.2
Ruby on Rails 4.1.4
初期データ
市町村向けの自治体サンプルデータ、企業サンプルデータを初期データとして提供しています。
インストール時に初期データを切り替えられます。
今後も様々なサンプルデータを提供していきます。・子育てサイトサンプル・大学サンプル・県向け自治体サンプルなど
初期データを使ったホームページ作成（１）
初期データ「企業サンプル」 企業向けホームページ
ロゴ写真色レイアウトを調整
初期データを使ったホームページ作成（２）
初期データ「自治体サンプル」 自治体向けホームページ
ロゴ写真色レイアウトを調整
拡張プラグイン
独自の拡張プラグイン機能「egg（エッグ）」があります。モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。
地図データベース機能
表示項目検索条件などを調整
バリアフリーマップ
拡張プラグインを使ったウェブシステム開発
マルチテナント対応
同一データベース同一スキーマ方式を採用しています。これにより管理者の運用コストを軽減できます。
マルチテナントを使ったサービス提供
シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。例：徳島県オープンデータポータルサイトと各市町村オープンデータサイト
Ajaxレイアウト（バージョン0.5.0でAjaxパーツに）
即時反映と低負荷を実現します。ページは、検索クローラーを想定して静的ＨＴＭＬファイルを書き出します。レイアウト、記事リストなどのパーツは、動的表示となります。
マルチデバイス対応
公開画面及び管理画面は、ＰＣ、スマホ、携帯、タブレットなど様々なデバイスに対応。
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
公開画面と管理画面
管理画面 –システム管理
管理画面 –サイト管理
管理画面 –フォルダ一覧
管理画面 –フォルダ詳細
管理画面 –レイアウト一覧
管理画面 –レイアウト詳細
管理画面 –パーツ
管理画面 –記事一覧
管理画面 –記事詳細
Rails モデルクラスでのアドオン
class Article::Pageinclude Cms::Page::Modelinclude Cms::Addon::Metainclude Cms::Addon::Bodyinclude Cms::Addon::Fileinclude Cms::Addon::Releaseinclude Cms::Addon::ReleasePlaninclude Cms::Addon::RelatedPageinclude Category::Addon::Categoryinclude Event::Addon::Dateinclude Map::Addon::Pageinclude Workflow::Addon::Approverinclude Contact::Addon::Pageinclude History::Addon::Backup
…
振り返り
管理画面
1. メニューやコンテキストメニューの操作方法
2. フォルダ – イベントカレンダーフォルダ、記事フォルダ、...
3. レイアウト
4. パーツ
5. ページ – イベントページ、記事ページ、…
6. アドオン
ハンズオン環境構築
ハンズオンの環境構築
環境構築
1. VirtualBox インストール
2. Vagrant インストール
3. Windows の方だけ
1. git のインストール
2. Tera Term インストール
4. シラサギ・ハンズオン環境のインストール
VirtualBox & Vagrant インストール
■VirtualBox
https://www.virtualbox.org/wiki/DownloadsGoogleで「virtualbox download」を検索してもOK
■Vagrant
https://www.vagrantup.com/downloads.htmlGoogleで「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: XXXXXXXXPASS： xxxxxxxx
ハンズオン用Github
https://github.com/itowtips/ss-handson
Vagrantfileをダウンロード
ハンズオン環境の起動
> cd Vagrantfileをダウンロードしたディレクトリ> vagrant up
ハンズオン環境へログイン
■Windowsの方IPアドレス: localhostポート: 2222User: vagrantPassword: vagrant
■Mac, Linux の方$ vagrant ssh
シラサギハンズオン
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成
開発サンプル 紹介
SHIRASAGI Wiki
https://github.com/shirasagi/shirasagi/wiki
開発サンプル：ブログページ
https://github.com/shirasagi/shirasagi/wiki/開発サンプル：ブログページ
今回のハンズオンで使用するリポジトリ、コマンド集などあります
https://github.com/itowtips/ss-handson
※これを見ながら進めていきます
開発サンプル 紹介
シラサギWiki：開発サンプルブログページ
シラサギにはページを作成し公開できる機能がいくつかあります• 記事ページ• 固定ページ• イベントページ• FAQページ
開発サンプル 紹介
シラサギWiki：開発サンプルブログページ
シラサギにはページを作成し公開できる機能がいくつかあります• 記事ページ• 固定ページ• イベントページ• FAQページ• ブログページ ← 今回はこれを追加します
開発サンプル 紹介
シラサギWiki：開発サンプルブログページ
今回の開発の流れ
0. 開発用のシラサギインストール
シラサギのインストール、デモデータの登録ができるようになります
1. ブログページ作成ページの追加を行います 独自のページが作れるようになります
2. 天気入力フォーム作成アドオンの追加を行います 入力フォームの拡張ができるようになります
3. フォルダーの追加
作成したページ用一覧フォルダーの追加を行います
新しいタイプのフォルダー作成ができるようになります
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成
準備 前提知識
シラサギで使っている技術• Ruby & Ruby On Rails• Javascript & CoffeeScript• Css & Scss• Git• MongoDB
準備 前提知識
シラサギで使っている技術• 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
準備 Gitとソースコード
必要な設定ファイル(各種ymlとunicorn.rb)をコピーします
#cd $HOME#git clone https://github.com/itowtips/ss-handson sample#cd sample#cp config/samples/* config/
準備 Gitとソースコード
bundle install
#cd $HOME#git clone https://github.com/itowtips/ss-handson sample#cd sample#cp config/samples/* config/#bundle install
準備 MongoDB設定
# vi config/mongoid.yml- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -# mongodb configurationproduction: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 configurationproduction: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
# vi config/environment.yml- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -# default environment RAILS_ENV: production- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Railsをdevelopmentモードに
準備 RAILS_ENV
# vi config/environment.yml- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -# default environment RAILS_ENV: development- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Railsをdevelopmentモードに
準備 サンプルデータ
#rake db:create_indexes
MongoDB インデックス作成
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'
システム管理者作成
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'#rake ss:create_site data='{ name: "サイト名", host: "www", domains: "ドメイン:3000" }'
サイト作成
ローカル環境のＩＰ例) 192.168.182.128
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'#rake ss:create_site data='{ name: "サイト名", host: "www", domains: "ドメイン:3000" }'#rake db:seed name=users site=www
サンプルユーザ＆グループ作成
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'#rake ss:create_site data='{ name: "サイト名", host: "www", domains: "ドメイン:3000" }'#rake db:seed name=users site=www#rake db:seed name=demo site=www
自治体サンプルデータ投入
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'#rake ss:create_site data='{ name: "サイト名", host: "www", domains: "ドメイン:3000" }'#rake db:seed name=users site=www#rake db:seed name=demo site=www#rake unicorn:start
unicorn起動
準備 確認
http://ドメイン:3000/
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成
ブログページ作成
シラサギWiki：ブログページ作成
ブログページ作成
シラサギWiki：ブログページ作成
※管理画面でブログページが作成できるようになります。
ブログページ作成
シラサギWiki：ブログページ作成
※公開画面での表示。まずは既存のページを参考に、同様のものを作成します。
ブログページ作成 シラサギの構成
/ – app├ models├ views └ controllers
└ config – locales└ routes
ソースコードをエディタで開いてみてください
ブログページ作成 シラサギの構成
/ – app├ models├ views └ controllers
└ config – locales└ routes
シラサギ独特な構成• 公開画面、管理画面がある• 再利用可能なプログラムがある• 静的ＨＴＭＬ書き出し機能がある …
ブログページ作成 シラサギの構成
/ – app├ models├ views └ controllers
└ config – locales└ routes
シラサギ独特な構成• routes• addon• agents
ブログページ作成 routes
/ – app├ models├ views └ controllers
└ config – locales└ routes
シラサギ独特な構成• routes• addon• agents
/ – app├ models├ views └ controllers
└ config – locales└ routes
config/route.rbconfig/route/モジュール名/routes.rb
ブログページ作成 routes
/ – app├ models├ views └ controllers
└ config – locales└ routes
config/route.rbconfig/route/article/routes.rb
ブログページ作成 routes
/ – app├ models├ views └ controllers
└ config – locales└ routes
config/route.rbconfig/route/article/routes.rb
記事モジュール
SS::Application.routes.draw do…
content "article" doget "/" => redirect { |p, req| "#{req.path}/pages" }, as: :mainget "generate" => "generate#index“post "generate" => "generate#run“resources :pages, concerns: :deletion
end…
node "article" doget "page/(index.:format)" => "public#index", cell: "nodes/page“get "page/rss.xml" => "public#rss", cell: "nodes/page", format: "xml“
end
part "article" doget "page" => "public#index", cell: "parts/page"
end
page "article" doget "page/:filename.:format" => "public#index", cell: "pages/page“
endend
ブログページ作成 routes
/ – app├ models├ views └ controllers
└ config – locales└ routes
config/route.rbconfig/route/article/routes.rb
ルーティング追加ブロック管理画面 content 公開画面 node, page, part
SS::Application.routes.draw do…
content "article" doget "/" => redirect { |p, req| "#{req.path}/pages" }, as: :mainget "generate" => "generate#index“post "generate" => "generate#run“resources :pages, concerns: :deletion
end…
node "article" doget "page/(index.:format)" => "public#index", cell: "nodes/page“get "page/rss.xml" => "public#rss", cell: "nodes/page", format: "xml“
end
part "article" doget "page" => "public#index", cell: "parts/page"
end
page "article" doget "page/:filename.:format" => "public#index", cell: "pages/page“
endend
ブログページ作成 routes
ルーティングを確認してみます
#rake routes | grep article
ブログページ作成 routes
/ – app├ models├ views └ controllers
└ config – locales└ routes
config/route.rbconfig/route/article/routes.rb
ルーティング追加ブロック管理画面 content 公開画面 node, page, part
SS::Application.routes.draw do…
content "article" doget "/" => redirect { |p, req| "#{req.path}/pages" }, as: :mainget "generate" => "generate#index“post "generate" => "generate#run“resources :pages, concerns: :deletion
end…
node "article" doget "page/(index.:format)" => "public#index", cell: "nodes/page“get "page/rss.xml" => "public#rss", cell: "nodes/page", format: "xml“
end
part "article" doget "page" => "public#index", cell: "parts/page"
end
page "article" doget "page/:filename.:format" => "public#index", cell: "pages/page“
endend
cell: " pages/page " とは??
ブログページ作成 routes
ブログページ作成 agents
/ – app├ models├ views └ controllers
└ config – locales└ routes
シラサギ独特な構成• routes• addon• agents
• agents• コントローラーからコントローラーを呼び出す仕組み• シラサギ独自実装• lib/ss/agent.rb
• 利用箇所• 公開側のコントローラー (cms/public_controller)
公開側（利用者）のアクセスを各コンテンツに振り分ける例）http://ドメイン/docs/page.html → 記事ページ
http://ドメイン/calendar/ → イベントカレンダー
• ページ書き出し
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※glob ルーティング（Route Globbing）
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: true
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: false
root "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※glob ルーティング（Route Globbing）
公開画面"記事"にアクセスhttp://ドメイン/docs/page.html
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: true
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: false
root "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※glob ルーティング（Route Globbing）
公開画面"記事"にアクセスhttp://ドメイン/docs/page.html
Controllercms/public#index
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: true
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: false
root "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※glob ルーティング（Route Globbing）
公開画面"記事"にアクセスhttp://ドメイン/docs/page.html
Controllercms/public#index → agents
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: true
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: false
root "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※glob ルーティング（Route Globbing）
公開画面"記事"にアクセスhttp://ドメイン/docs/page.html
Controllercms/public#index → agents → article/agents/pages/page_controller#index
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: true
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: false
root "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※glob ルーティング（Route Globbing）
公開画面"記事"にアクセスhttp://ドメイン/docs/page.html
Controllercms/public#index → agents → article/agents/pages/page_controller#index
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: true
match "*public_path" => "cms/public#index", public_path: /[^\.].*/,via: [:get, :post, :put, :patch, :delete], format: false
root "cms/public#index", defaults: { format: :html }
cell: " pages/page "
ブログページ作成 agents
ブログページ作成
/ – app├ models├ views └ controllers
└ config – locales└ routes
ブログモジュールを追加していきます。
ブログページ作成
/ – app├ models – blog├ views – blog└ controllers – blog
└ config – locales – blog└ routes – blog
ブログモジュールを追加していきます。
ブログページ作成
/ – app├ models – blog├ views – blog└ controllers – blog
└ config – locales – blog└ routes – blog
→ それぞれにソースコードを追加していきます。
ブログページ作成
/ – app├ models – blog├ views – blog└ controllers – blog
└ config – locales – blog└ 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├ views – blog └ controllers – blog
└ config – locales – blog└ routes – blog
• include Cms::Page::Model• app/models/concerns/cms/node/model.rb
class Blog::Pageinclude Cms::Page::Modelinclude Cms::Addon::Metainclude Cms::Addon::Bodyinclude Cms::Addon::Fileinclude Cms::Addon::Releaseinclude Cms::Addon::RelatedPageinclude Category::Addon::Categoryinclude Workflow::Addon::Approver
before_save :seq_filename, if: ->{ basename.blank? } default_scope ->{ where(route: "blog/page") }
privatedef validate_filename
(@basename && @basename.blank?) ? nil : superend
def seq_filenameself.filename = dirname ? "#{dirname}#{id}.html" : "#{id}.html"
endend
ブログページ作成
Blog Page Model
/ – app├ models – blog – page.rb├ views – blog └ controllers – blog
└ config – locales – blog└ routes – blog
• 使用するAddonを追加• 本文、添付ファイル等々
class Blog::Pageinclude Cms::Page::Modelinclude Cms::Addon::Metainclude Cms::Addon::Bodyinclude Cms::Addon::Fileinclude Cms::Addon::Releaseinclude Cms::Addon::RelatedPageinclude Category::Addon::Categoryinclude Workflow::Addon::Approver
before_save :seq_filename, if: ->{ basename.blank? } default_scope ->{ where(route: "blog/page") }
privatedef validate_filename
(@basename && @basename.blank?) ? nil : superend
def seq_filenameself.filename = dirname ? "#{dirname}#{id}.html" : "#{id}.html"
endend
Addonをinclude
ブログページ作成
Blog Page Model
/ – app├ models – blog – page.rb├ views – blog └ controllers – blog
└ config – locales – blog└ routes – blog
• default_scopeを設定• field :route
• コンテンツを識別する値• “blog/page” → ブログ/ブログページ
class Blog::Pageinclude Cms::Page::Modelinclude Cms::Addon::Metainclude Cms::Addon::Bodyinclude Cms::Addon::Fileinclude Cms::Addon::Releaseinclude Cms::Addon::RelatedPageinclude Category::Addon::Categoryinclude Workflow::Addon::Approver
before_save :seq_filename, if: ->{ basename.blank? } default_scope ->{ where(route: "blog/page") }
privatedef validate_filename
(@basename && @basename.blank?) ? nil : superend
def seq_filenameself.filename = dirname ? "#{dirname}#{id}.html" : "#{id}.html"
endend
Addonをinclude
default_scoperoute: " blog/page "
ブログページ作成
Blog Page Initializer
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog└ controllers – blog
└ config – locales – blog└ routes – blog
• "blog/page" contentをpluginに登録
module Blogclass Initializer
Cms::Node.plugin "blog/page"end
end
ブログページ作成
Blog Page Agents View & Controller
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ config – locales – blog└ routes – blog
• ブログページ公開側• コントローラー• ビュー
• agentsの下に配置
class Blog::Agents::Pages::PageController < ApplicationControllerinclude Cms::PageFilter::View
end
<%= render file: "cms/agents/pages/page/index" %>
ブログページ作成
Blog Page Navi View
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb
└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ config – locales – blog└ routes – blog
• ブログモジュール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 Page Controller
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb
└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ pages_controller.rb└ config – locales – blog
└ routes – blog
• ブログページ管理側コントローラー
class Blog::PagesController < ApplicationControllerinclude Cms::BaseFilterinclude Cms::PageFilterinclude Workflow::PageFilter
model Blog::Page
append_view_path "app/views/cms/pages“navi_view "blog/main/navi“
privatedef fix_params
{ cur_user: @cur_user, cur_site: @cur_site, cur_node: @cur_node }
end
#public# Cms::PageFilter
end
ブログページ作成
Blog Page Controller
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb
└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ pages_controller.rb└ config – locales – blog
└ routes – blog
• 必要なFilterをincludeします。• Index show new…
class Blog::PagesController < ApplicationControllerinclude Cms::BaseFilterinclude Cms::PageFilterinclude Workflow::PageFilter
model Blog::Page
append_view_path "app/views/cms/pages“navi_view "blog/main/navi“
privatedef fix_params
{ cur_user: @cur_user, cur_site: @cur_site, cur_node: @cur_node }
end
#public# Cms::PageFilter
end
Filterをinclude
ブログページ作成
Blog Config Locales
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb
└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ pages_controller.rb└ config – locales – blog – ja.yml
└ routes – blog
• ブログモジュールのlocaleを追加
ja:blog:
page:ブログページ
modules:blog: ブログ
" blog/page "ブログ/ブログページ
ブログページ作成
Blog Page Routes
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb
└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ pages_controller.rb└ config – locales – blog – ja.yml
└ routes – blog – routes.rb
• ブログモジュールのroutesを追加
SS::Application.routes.draw doBlog::Initializerconcern :deletion do
get :delete, on: :memberend
content "blog" doget “/” => redirect { |p, req| “#{req.path}/pages” },as: :main
resources :pages, concerns: :deletionend
page "blog" doget "page/:filename.:format" => "public#index", cell: "pages/page"
endend
ブログページ作成 確認
作成したブログページを使ってみます。
1. 適当なフォルダー下でモジュールをブログに切り替え2. 新規作成
→ ブログページが作成できます。
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo#use ss_sample
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo#use ss_sample#db.cms_pages.find({route: "blog/page"})
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo#use ss_sample#db.cms_pages.find({route: "blog/page"}){
"_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, …
ブログページ作成
/ – app├ models – blog – page.rb
└ initializer.rb├ views – blog – agents – pages – index.html.erb
└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb
└ pages_controller.rb└ config – locales – blog – ja.yml
└ routes – blog – routes.rb
ブログページ作成
ここまでで新しいページが作成できるようになりました。
しかし、これでは記事ページと変わらないので..
→ 入力フォームをカスタマイズします。#git checkout -b sample-blog-addon origin/sample-blog-addon#rake unicorn:restart
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成
天気入力フォーム作成
シラサギWiki：天気入力フォーム作成
天気入力フォーム作成
シラサギWiki：天気入力フォーム作成
※ページのアドオンを追加し入力フォームを追加します。
天気入力フォーム作成
シラサギWiki：天気入力フォーム作成
※公開側では入力した天気と日付を表示します。
天気入力フォーム作成
Blog Weather Addon
/ – app├ models – blog – addon.rb├ views – blog└ controllers – blog
└ config – locales – blog└ routes – blog
• 天気アドオンを追加
module Blog::Addonmodule Weather
extend ActiveSupport::Concernextend SS::Addon
set_order 190
included dofield :weather, type: Stringpermit_params :weather
publicdef weather_options
[ ["晴れ", "sunny"], ["曇り", "cloudy"],["雨", "rain"], ["雪", "snow"], ]
endend
endend
addonの表示順
fieldを定義
天気入力フォーム作成
Blog Page Model
/ – app├ models – blog – addon.rb
└ page.rb├ views – blog└ controllers – blog
└ config – locales – blog└ routes – blog
class Blog::Pageinclude Cms::Page::Modelinclude Cms::Addon::Metainclude Cms::Addon::Bodyinclude Cms::Addon::Fileinclude Cms::Addon::Releaseinclude Cms::Addon::RelatedPageinclude Category::Addon::Categoryinclude Workflow::Addon::Approverinclude Blog::Addon::Weather
before_save :seq_filename, if: ->{ basename.blank? } default_scope ->{ where(route: "blog/page") }
privatedef validate_filename
(@basename && @basename.blank?) ? nil : superend
def seq_filenameself.filename = dirname ? "#{dirname}#{id}.html" : "#{id}.html"
endend
Include Weather Addon
天気入力フォーム作成
Blog Weather Addon Index View
/ – app├ models – blog – addon.rb
└ page.rb├ views – blog – addons – weather – _form.html.erb
├ _show.html.rb└ controllers – blog └ index.html.erb
└ config – locales – blog└ routes – blog
• アドオンのviewを作成
天気入力フォーム作成
Blog Weather Addon Index View
/ – app├ models – blog – addon.rb
└ page.rb├ views – blog – addons – weather – _form.html.erb
├ _show.html.rb└ controllers – blog └ index.html.erb
└ config – locales – blog└ routes – blog
• アドオンのviewを作成
管理画面入力フォーム
管理画面表示
公開画面表示
天気入力フォーム作成
Blog Config Locales
/ – app├ models – blog – addon.rb
└ page.rb├ views – blog – addons – weather – _form.html.erb
├ _show.html.rb└ controllers – blog └ index.html.erb
└ config – locales – blog – ja.yml└ routes – blog
• localeを追記
ja:blog:
page:ブログページsunny:☀cloudy: ☁rain: ☂snow: ☃
modules:blog: ブログaddons:
blog/weather: 今日の天気
mongoid:attributes:
cms/page/model: weather:天気
天気入力フォーム作成
管理画面から"今日の天気"を入力してみます
天気入力フォーム作成
/ – app├ models – blog – addon.rb
└ page.rb├ views – blog – addons – weather – _form.html.erb
├ _show.html.rb└ controllers – blog └ index.html.erb
└ config – locales – blog – ja.yml└ routes – blog
天気入力フォーム作成 練習
1. 天気マークを追加してみてください （雷注意報、にわか雨、お花見日和…
2. 別の入力フォームを作ってみてください （別のアドオンを作成
3. 修正したコードをローカルでcommitしてみてください （おまけ
天気入力フォーム作成
独自の入力フォームを作成しました。最後にフォルダーの作成を説明します。
#git checkout -b sample-blog-node origin/sample-blog-node#rake unicorn:restart
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. ブログページ作成
4. 天気入力フォーム作成
5. 一覧フォルダー作成
一覧フォルダー作成
シラサギWiki：一覧フォルダー作成
一覧フォルダー作成
※「フォルダー属性」ブログページリストが作成できるようになります
シラサギWiki：一覧フォルダー作成
一覧フォルダー作成
※公開側のページ一覧を変更し独自のものを作成します
シラサギWiki：一覧フォルダー作成
一覧フォルダー作成
Blog Node Model
/ – app├ models – blog – node.rb├ views – blog└ controllers – blog
└ config – locales – blog└ routes – blog
• ブログ一覧フォルダーを作成
module Blog::Nodeclass Base
include Cms::Node::Model
default_scope ->{ where(route: /^blog\//) }end
class Pageinclude Cms::Node::Modelinclude Cms::Addon::PageList
default_scope ->{ where(route: "blog/page") } end
end
一覧フォルダー作成
Blog Agents Nodes/Page Controller
/ – app├ models – blog – node.rb├ views – blog – agents – nodes – page – index.html.erb└ controllers – blog – agents – nodes – page_controller.rb
└ config – locales – blog└ routes – blog
• 公開側コントローラー、一覧ビューを作成• agents/nodes/page
一覧フォルダー作成
Blog Agents Nodes/Page Controller
/ – app├ models – blog – node.rb├ views – blog – agents – nodes – page – index.html.erb└ controllers – blog – agents – nodes – page_controller.rb
└ config – locales – blog└ routes – blog
• 公開側コントローラー、一覧ビューを作成• agents/nodes/page
class Blog::Agents::Nodes::PageController < ApplicationControllerinclude Cms::NodeFilter::Viewhelper Cms::ListHelper
Publicdef 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 @itemsend
end
一覧フォルダー作成
Blog Config Locales
/ – app├ models – blog – node.rb├ views – blog – agents – nodes – page – index.html.erb└ controllers – blog – agents – nodes – page_controller.rb
└ config – locales – blog – ja.yml└ routes – blog
• localeに追記
ja:…
cms:nodes:
blog/page: ブログページリスト…
一覧フォルダー作成
Blog Config Locales
/ – app├ models – blog – node.rb├ views – blog – agents – nodes – page – index.html.erb└ controllers – blog – agents – nodes – page_controller.rb
└ config – locales – blog – ja.yml└ routes – blog – routes.rb
• routesにnodeを追記
SS::Application.routes.draw do…
node "blog" doget "page/(index.:format)" => "public#index", cell: "nodes/page "
end…end
一覧フォルダー作成
/ – app├ models – blog – node.rb├ views – blog – agents – nodes – page – index.html.erb└ controllers – blog – agents – nodes – page_controller.rb
└ config – locales – blog – ja.yml└ routes – blog – routes.rb
一覧フォルダー作成
管理画面から一覧フォルダーを作成してみます
まとめ
• 新しいページ、アドオン、フォルダーを作りました
• 既存のコードを変更せずにコンテンツを追加できます
最後に
長い時間ありがとうございました！是非SHIRASAGIをカスタマイズしてみてください！