Ruby/Rails/mongoDB で動作する中・大規模サイト向け CMS 「シラサギ」のハンズオン
登壇者
ウェブチップス1. 野原2. 中野3. 伊藤
ハンズオンの狙い
1. シラサギの概要を理解する。2. シラサギの仕組みを理解する。3. シラサギの機能追加と機能拡張の方法を理解する。
ハンズオン 目次
1. シラサギの紹介 [10min]
2. ハンズオンの導入 [15min]
3. ハンズオン [60min]1. 開発サンプル紹介2. 準備3. ブログページ作成4. 天気入力フォーム作成5. 一覧フォルダー作成
シラサギの紹介
会社概要
会社名設立資本金所在地役員
株式会社ウェブチップス2013年9月20日500万円〒 770-0872 徳島県徳島市北沖洲三丁目 6番 58号 石本ビル202
代表取締役社長 CEO 野原 直一技術担当取締役 CTO 谷沢 和寿5名(役員含む) 2015年1月から6名にオープンソースソフトウェア開発事業オープンソースを使った導入・カスタマイズ事業オープンソースを使ったクラウドサービス事業
社員数事業内容
名称の由来
サギ科の鳥のうち、全身の羽毛が白いものを「シラサギ」と呼びます。
徳島県では 1965年 10月から「シラサギ」を県の鳥に指定しています。
サギ類は、他の種類のサギたちと一緒に巣を作り、繁殖するという特徴があります。
その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを開発していくというコンセプトと一致したためこの名称を採用しました。
「シラサギ」は、みんなで育てるCMSです。
MITライセンス
誰でも自由にカスタマイズできます。誰でも自由にフォークできます。拡張機能を公開するかどうかを自由に選べます。
Web アプリ開発プラットフォーム
CMSですが、コアの設計は汎用SNSになっており、Webアプリ開発プラットフォームとして利用できます。将来的にグループウェア、SNSなどの様々なアプリケーションの開発ができます。
モデルアドオン設計
下記をカプセル化して任意のコレクションに取り付けられます。
・ DBのフィールド・データ検証や保存ロジック・編集画面・詳細画面
アドオンをうまく使うことで、モジュールの肥大化を抑えられます。結果、ソース管理が非常に楽になります。
MongoDB
NoSQLであるMongoDBを採用し、高速化を実現しています。
公開されているフォルダ・ページには、リレーションによる関連付けはなく、それぞれがファイル名(URL)を保持しています。
そのため、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
初期データ
市町村向けの自治体サンプルデータ、企業サンプルデータを初期データとして提供しています。
インストール時に初期データを切り替えられます。
今後も様々なサンプルデータを提供していきます。・子育てサイトサンプル・大学サンプル・県向け自治体サンプルなど
初期データを使ったホームページ作成(1)
初期データ「企業サンプル」 企業向けホームページ
ロゴ写真色レイアウトを調整
初期データを使ったホームページ作成(2)
初期データ「自治体サンプル」 自治体向けホームページ
ロゴ写真色レイアウトを調整
拡張プラグイン
独自の拡張プラグイン機能「 egg(エッグ)」があります。モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。
地図データベース機能
表示項目検索条件などを調整
バリアフリーマップ
拡張プラグインを使ったウェブシステム開発
マルチテナント対応
同一データベース同一スキーマ方式を採用しています。これにより管理者の運用コストを軽減できます。
マルチテナントを使ったサービス提供
シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。例:徳島県オープンデータポータルサイトと各市町村オープンデータサイト
Ajax レイアウト(バージョン 0.5.0 で Ajax パーツに)
即時反映と低負荷を実現します。ページは、検索クローラーを想定して静的HTMLファイルを書き出します。レイアウト、記事リストなどのパーツは、動的表示となります。
マルチデバイス対応
公開画面及び管理画面は、PC、スマホ、携帯、タブレットなど様々なデバイスに対応。
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::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. シラサギ・ハンズオン環境のインストール
VirtualBox & Vagrant インストール
■VirtualBoxhttps://www.virtualbox.org/wiki/Downloads
Googleで「 virtualbox download」を検索しても OK
■Vagranthttps://www.vagrantup.com/downloads.html
Googleで「 vagrant download」を検索しても OK
Windows の方だけ
■Githttps://msysgit.github.io/
Googleで「 windows git」を検索しても OK
■Tera Termhttp://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:開発サンプルブログページ今回の開発の流れ
1. ブログページ作成ページの追加を行います。独自のページが作れるようになります
2. 天気入力フォーム作成アドオンの追加を行います。入力フォームの拡張ができるようになります
3. フォルダーの追加 作成したページ用一覧フォルダーの追加を行います 新しいタイプのフォルダー作成ができるようになります
ハンズオン 目次
1. 開発サンプル紹介2. 準備3. ブログページ作成4. 天気入力フォーム作成5. 一覧フォルダー作成
準備 Gitとソースコード
シラサギの動く環境がある方は GitHubからソースコードを取得してください
#cd /var/www#git clone https://github.com/itowtips/ss-handson sample#cd sample
準備 Gitとソースコード
必要な設定ファイル ( 各種 yml と unicorn.rb) をコピーします
#cd /var/www#git clone https://github.com/itowtips/ss-handson sample#cd sample#cp config/samples/* config/
準備 Gitとソースコード
bundle install
#cd /var/www#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: "[email protected]", password: "pass" }'
システム管理者作成
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者 ", email: "[email protected]", password: "pass" }'#rake ss:create_site data='{ name: "サイト名 ", host: "www", domains: "ドメイン :3000" }'
サイト作成
ローカル環境のIP例 ) 192.168.182.128
準備 サンプルデータ
#rake db:create_indexes#rake ss:create_user data='{ name: "システム管理者 ", email: "[email protected]", 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: "[email protected]", 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: "[email protected]", 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 シラサギ独特な構成
• routes• agents
ブログページ作成 routes
/ – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成
• routes• 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" do get "/" => redirect { |p, req| "#{req.path}/pages" }, as: :main get "generate" => "generate#index“ post "generate" => "generate#run“ resources :pages, concerns: :deletion 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
ブログページ作成 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" do get "/" => redirect { |p, req| "#{req.path}/pages" }, as: :main get "generate" => "generate#index“ post "generate" => "generate#run“ resources :pages, concerns: :deletion 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
ブログページ作成 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" do get "/" => redirect { |p, req| "#{req.path}/pages" }, as: :main get "generate" => "generate#index“ post "generate" => "generate#run“ resources :pages, concerns: :deletion 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
cell: " pages/page " とは ??
ブログページ作成 routes
ブログページ作成 agents
/ – app ├ models ├ views └ controllers └ config – locales └ routes
シラサギ独特な構成• routes• agents
• agents• コントローラーからコントローラーを呼び出す仕組み• シラサギ独自実装• lib/ss/agent.rb
• 利用箇所• 公開側のコントローラー cms/public_controller• ページ書き出し
ブログページ作成 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: falseroot "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: falseroot "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※ glob ルーティング( Route Globbing)
公開画面 "記事 "にアクセス http://ドメイン /docs/page.html
Controller cms/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: falseroot "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※ glob ルーティング( Route Globbing)
公開画面 "記事 "にアクセス http://ドメイン /docs/page.html
Controller cms/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: falseroot "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※ glob ルーティング( Route Globbing)
公開画面 "記事 "にアクセス http://ドメイン /docs/page.html
Controller cms/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: falseroot "cms/public#index", defaults: { format: :html }
ブログページ作成 agents
公開側ルーティング config/routes/cms/routes_end.rb#L73-78
※ glob ルーティング( Route Globbing)
公開画面 "記事 "にアクセス http://ドメイン /docs/page.html
Controller cms/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: falseroot "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::Page include Cms::Page::Model include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::RelatedPage include Category::Addon::Category include Workflow::Addon::Approver
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" endend
ブログページ作成
Blog Page Model
/ – app ├ models – blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog
• 使用する Addonを追加• 本文、添付ファイル等々
class Blog::Page include Cms::Page::Model include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::RelatedPage include Category::Addon::Category include Workflow::Addon::Approver
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" 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::Page include Cms::Page::Model include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::RelatedPage include Category::Addon::Category include Workflow::Addon::Approver
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" 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 Blog class Initializer Cms::Node.plugin "blog/page" endend
ブログページ作成
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 < ApplicationController include 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 < 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::PageFilterend
ブログページ作成
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 < 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::PageFilterend
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 do 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" 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::Addon module Weather extend ActiveSupport::Concern extend SS::Addon
set_order 190
included do field :weather, type: String permit_params :weather
public def weather_options [ [" 晴れ ", "sunny"], [" 曇り ", "cloudy"], [" 雨 ", "rain"], [" 雪 ", "snow"], ] end end end end
addonの表示順
fieldを定義
天気入力フォーム作成
Blog Page Model
/ – app ├ models – blog – addon.rb └ page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog
class Blog::Page include Cms::Page::Model include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::RelatedPage include Category::Addon::Category include Workflow::Addon::Approver include Blog::Addon::Weather
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" 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::Node class Base include Cms::Node::Model
default_scope ->{ where(route: /^blog\//) } end
class Page include Cms::Node::Model include Cms::Addon::PageList
default_scope ->{ where(route: "blog/page") } endend
一覧フォルダー作成
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 < 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 endend
一覧フォルダー作成
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" do get "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をカスタマイズしてみてください!