Ruby/Rails/mongoDB で動作する中・大規模サイト向け CMS 「シラサギ」のハンズオン
自己紹介ウェブチップス1. 伊藤2. 中野
ハンズオン 目次
1. シラサギの紹介 [10min]2. ハンズオンの環境構築 [50min]3. ハンズオン [60min]
1. 開発サンプル紹介2. ブログページ作成3. 天気入力フォーム作成4. 一覧フォルダー作成
シラサギの紹介
会社概要
会社名設立資本金所在地役員
株式会社ウェブチップス2013年9月20日500万円〒 770-0872 徳島県徳島市北沖洲三丁目 6 番 58 号 石本ビル202代表取締役社長 CEO 野原 直一技術担当取締役 CTO 谷沢 和寿6名(役員含む)オープンソースソフトウェア開発事業オープンソースを使った導入・カスタマイズ事業オープンソースを使ったクラウドサービス事業
社員数事業内容
名称の由来
サギ科の鳥のうち、全身の羽毛が白いものを「シラサギ」と呼びます。徳島県では 1965 年 10 月から「シラサギ」を県の鳥に指定しています。サギ類は、他の種類のサギたちと一緒に巣を作り、繁殖するという特徴があります。その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを開発していくというコンセプトと一致したためこの名称を採用しました。「シラサギ」は、みんなで育てるCMSです。
MITライセンス
誰でも自由にカスタマイズできます。誰でも自由にフォークできます。拡張機能を公開するかどうかを自由に選べます。
Web アプリ開発プラットフォーム
CMSですが、コアの設計はWebアプリ開発プラットフォームとして利用できます。将来的にグループウェア、SNSなどの様々なアプリケーションの開発ができます。
動作環境
Internet Explorer (ver.8 以上 ) 、 Firefox 、 Chrome 、 Safari の最新バージョンを想定しています。
対象 バージョンなどOS CentOS 7.1 64bit
Web サーバ nginx + unicorn
DB システム MongoDB
Ruby 2.2.3
Ruby on Rails 4.2.3
MongoDB
NoSQL である MongoDB を採用し、高速化を実現しています。公開されているフォルダ・ページには、リレーションによる関連付けはなく、それぞれがファイル名(URL)を保持しています。そのため、 MongoDB の強みである前方一致検索のパフォーマンスを最大限に引き出せます。そのため、任意のフォルダ内の検索も非常に高速かつ効率的に行えます。
モデルアドオン設計
下記をカプセル化して任意のコレクションに取り付けられます。・ DB のフィールド・データ検証や保存ロジック・編集画面・詳細画面アドオンをうまく使うことで、モジュールの肥大化を抑えられます。結果、ソース管理が非常に楽になります。
初期データ
市町村向けの自治体サンプルデータ、企業サンプルデータを初期データとして提供しています。インストール時に初期データを切り替えられます。今後も様々なサンプルデータを提供していきます。・子育てサイトサンプル・大学サンプル・県向け自治体サンプルなど
初期データを使ったホームページ作成(1)
初期データ「企業サンプル」 企業向けホームページ
ロゴ写真色レイアウトを調整
初期データを使ったホームページ作成(2)
初期データ「自治体サンプル」 自治体向けホームページ
ロゴ写真色レイアウトを調整
拡張プラグイン
独自の拡張プラグイン機能「 egg (エッグ)」があります。モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。
地図データベース機能
表示項目検索条件などを調整
バリアフリーマップ
拡張プラグインを使ったウェブシステム開発
マルチテナント対応
同一データベース同一スキーマ方式を採用しています。これにより管理者の運用コストを軽減できます。
マルチテナントを使ったサービス提供
シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。例:徳島県オープンデータポータルサイトと各市町村オープンデータサイト
Ajax レイアウト(バージョン 0.5.0 で Ajax パーツに)
即時反映と低負荷を実現します。ページは、検索クローラーを想定して静的HTMLファイルを書き出します。レイアウト、記事リストなどのパーツは、動的表示となります。
マルチデバイス対応
公開画面及び管理画面は、PC、スマホ、携帯、タブレットなど様々なデバイスに対応。
GitHub による公開開発
既にシラサギの開発に共感してくれている個人のエンジニアの方から、プルリクエスト(開発したプログラムを取り込む依頼)を定期的にいただいています。
シラサギ公式サイト
新着情報リリースノートよくある質問ダウンロードオンラインデモ導入事例開発情報など
http://ss-proj.org/
シラサギプロジェクト開発コミュニティ
シラサギプロジェクトの開発コミュニティを facebook 上の公開グループとして立ち上げています。リリース詳細や他のエンジニアの方からのレポートなども掲載されていますので、是非ご参加ください。
ハンズオン環境構築
ハンズオン環境へログイン■Windows の方IP アドレス : localhostポート : 2222User: vagrantPassword: vagrant
■Mac, Linux の方$ vagrant ssh
ハンズオン用 Github
https://github.com/itowtips/ss-handsonGoogle で「 github itowtips 」を検索しても OK
Commandlist.txt をブラウザで表示
MongoDB – Vagrant Box ご利用の方向け1. ファイル /etc/yum.repos.d/mongodb-org-3.0.repo を作成
2. MongoDB をインストールして開始
sudo vi /etc/yum.repos.d/mongodb-org-3.0.repo- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [mongodb-org-3.0]name=MongoDB Repositorybaseurl=http://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.0/x86_64/gpgcheck=0enabled=1- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
sudo yum install mongodb-orgsudo service mongod start
MongoDB – Mac をご利用の方向け1. MongoDB をインストール
2. MongoDB を開始
brew updatebrew install mongodb
mongod --config /usr/local/etc/mongod.conf &
Prequicities
1. 必須モジュールのインストールsudo yum install git ImageMagick ImageMagick-devel
brew install imagemagick
Vagrant Box をお使いの方
Mac をお使いの方
ハンズオン用シラサギインストール1. 次のコマンドを実行
git clone https://github.com/itowtips/ss-handson samplecd samplecp -n config/samples/*.{rb,yml} config/bundle install
データベース設定1. config/mongoid.yml を編集します。
vi config/mongoid.yml- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -# mongodb configurationproduction: sessions: default: database: ss_sample
development: sessions: default: database: ss_sample- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
環境設定1. config/environment.yml を編集します。
cp config/defaults/environment.yml config/vi config/environment.yml- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -# default environmentRAILS_ENV: development- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
初期データ投入1. 次のコマンドを実行します。
rake db:droprake db:create_indexesrake ss:create_user data='{ name: " システム管理者 ", email: "[email protected]", password: "pass" }'rake ss:create_site data='{ name: " サイト名 ", host: "www", domains: "localhost:3000" }'rake db:seed name=users site=wwwrake db:seed name=demo site=wwwrake unicorn:start
シラサギ概観管理画面1. メニューやコンテキストメニューの操作方法2. フォルダ3. レイアウト4. パーツ5. ページ6. アドオン
シラサギデモ公開画面 :http://localhost:3000/
管理画面 :http://localhost:3000/.mypageユーザー : [email protected]パスワード : pass
公開画面
管理画面 – システム管理
管理画面 – サイト管理
管理画面 – フォルダ一覧
公開画面 – 記事フォルダ
管理画面 – フォルダ詳細
管理画面 – レイアウト一覧
管理画面 – レイアウト詳細
管理画面 – 記事一覧
管理画面 – 記事詳細
公開画面 – 記事詳細
アドオン以下をカプセル化したもの1. DB のフィールド2. HTML の入力フィールド3. ビジネス・ロジック
Rails モデルクラスに include することで、モデルの機能を拡張する。
Rails モデルクラスでのアドオンclass Article::Page include Cms::Model::Page include Cms::Addon::EditLock include Workflow::Addon::Branch include Workflow::Addon::Approver include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Category::Addon::Category include Cms::Addon::ParentCrumb include Event::Addon::Date…
振り返り管理画面1. メニューやコンテキストメニューの操作方法2. フォルダ3. レイアウト4. パーツ5. ページ6. アドオン
シラサギハンズオン
ハンズオン 目次1. 開発サンプル紹介2. 準備 3. ブログページ作成4. 天気入力フォーム作成5. 一覧フォルダー作成
開発サンプル 紹介SHIRASAGI Wikihttps://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 でソースコードを管理しています今回、使用するのは v0.9.0
今回使用する3つの開発サンプルをブランチに分けています適宜、切り替えて動かしてみてください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
ハンズオン 目次1. 開発サンプル紹介2. 準備3. ブログページ作成4. 天気入力フォーム作成5. 一覧フォルダー作成
ブログページ作成シラサギWiki:ブログページ作成
ブログページ作成シラサギWiki:ブログページ作成
※管理画面でブログページが作成できるようになります。
ブログページ作成シラサギWiki:ブログページ作成
※公開画面での表示。 まずは既存のページを参考に、同様のものを作成します。
ブログページ作成 シラサギの構成/ – app ├ models ├ views └ controllers └ config – locales └ routes ソースコードをエディタで開いてみてください
ブログページ作成 シラサギの構成/ – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成
• 公開画面、管理画面がある• 再利用可能なプログラムがある• 静的HTML書き出し機能がある …
ブログページ作成 シラサギの構成/ – 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/routes.rbconfig/routes/ モジュール名 /routes.rb
ブログページ作成 routes
/ – app ├ models ├ views └ controllers └ config – locales └ routes
config/routes.rbconfig/routes/article/routes.rb
ブログページ作成 routes
/ – app ├ models ├ views └ controllers └ config – locales └ routes
config/routes.rbconfig/routes/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, :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
ブログページ作成 routes
/ – app ├ models ├ views └ controllers └ config – locales └ routes
config/routes.rbconfig/routes/article/routes.rb
ルーティング追加ブロック 管理画面 content 公開画面 node, page, part
ブログページ作成 routes
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
ルーティングを確認してみます #rake routes | grep article
ブログページ作成 routes
/ – app ├ models ├ views └ controllers └ config – locales └ routes
config/routes.rbconfig/routes/article/routes.rb
ルーティング追加ブロック 管理画面 content 公開画面 node, page, part
cell: " pages/page " とは ??
ブログページ作成 routes
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
ブログページ作成 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
※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
※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
※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
※glob ルーティング( Route Globbing )公開画面 " 記事 " にアクセス http://ドメイン/docs/page.html
Controller cms/public#index → 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
※glob ルーティング( Route Globbing )公開画面 " 記事 " にアクセス http://ドメイン/docs/page.html
Controller cms/public#index → 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
cell: " pages/page "
ブログページ作成/ – 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::Model::Page• app/models/concerns/cms/model/page.rb
class Blog::Page include Cms::Model::Page 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::Model::Page 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::Model::Page 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
• Cms::Node.plugin “blog/page” → フォルダー属性にブログ / ブログページというコンテンツが追加される。
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
• ブログモジュールのルーティングを追加
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"}).pretty()
ブログページ作成作成したブログページの Mongo ドキュメント ( レコード ) をチェックしてみます。
#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, …
ブログページ作成/ – 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 – concerns – blog – addon – weather.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog
• 天気アドオンを追加
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
/ – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog
class Blog::Page include Cms::Model::Page 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 – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – 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 – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog └ routes – blog
• アドオンの view を作成
管理画面入力フォーム
管理画面表示
公開画面表示
天気入力フォーム作成Blog Config Locales
/ – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – 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 – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog – ja.yml
天気入力フォーム作成 練習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::Model ::Node
default_scope ->{ where(route: /^blog\//) } end
class Page include Cms::Model ::Node 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 をカスタマイズしてみてください!