シラサギハンズオン東京

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


Vagrantfileをダウンロード

ハンズオン環境の起動

> cd Vagrantfileをダウンロードしたディレクトリ> vagrant up

ハンズオン環境へログイン

■Windowsの方IPアドレス: localhostポート: 2222User: vagrantPassword: vagrant

■Mac, Linux の方$ vagrant ssh

シラサギハンズオン



2. 準備




開発サンプル紹介

SHIRASAGI Wiki

https://github.com/shirasagi/shirasagi/wiki

開発サンプル：ブログページ

https://github.com/shirasagi/shirasagi/wiki/開発サンプル：ブログページ

今回のハンズオンで使用するリポジトリ、コマンド集などあります


※これを見ながら進めていきます

https://github.com/shirasagi/shirasagi/wiki/%E9%96%8B%E7%99%BA%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%EF%BC%9A%E3%83%96%E3%83%AD%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8




シラサギWiki：開発サンプルブログページ

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




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




今回の開発の流れ

0. 開発用のシラサギインストール

シラサギのインストール、デモデータの登録ができるようになります

1. ブログページ作成ページの追加を行います独自のページが作れるようになります

2. 天気入力フォーム作成アドオンの追加を行います入力フォームの拡張ができるようになります

3. フォルダーの追加

作成したページ用一覧フォルダーの追加を行います

新しいタイプのフォルダー作成ができるようになります


https://github.com/itowtips/ss-handson/blob/master/doc/hands-on-0422/hands-on.txt

https://github.com/shirasagi/shirasagi/wiki/%E3%83%96%E3%83%AD%E3%82%B0%E5%BD%A2%E5%BC%8F%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90

https://github.com/shirasagi/shirasagi/wiki/%E5%A4%A9%E6%B0%97%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E4%BD%9C%E6%88%90

https://github.com/shirasagi/shirasagi/wiki/%E4%B8%80%E8%A6%A7%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E4%BD%9C%E6%88%90



2. 準備




準備前提知識

シラサギで使っている技術• 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#git clone https://github.com/itowtips/ss-handson sample#cd sample#cp config/samples/* config/


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: "[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" }'

サイト作成

ローカル環境のＩＰ例) 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/



2. 準備




ブログページ作成

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




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




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


ブログページ作成シラサギの構成

/ – app├ models├ views └ controllers

└ config – locales└ routes

ソースコードをエディタで開いてみてください




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




シラサギ独特な構成• routes• addon• agents

ブログページ作成 routes






config/route.rbconfig/route/モジュール名/routes.rb




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





ルーティング追加ブロック管理画面 content 公開画面 node, page, part



end…


end


end


endend


ルーティングを確認してみます

#rake routes | grep article





ルーティング追加ブロック管理画面 content 公開画面 node, page, part



end…


end


end


endend

cell: " pages/page " とは??


ブログページ作成 agents




• agents• コントローラーからコントローラーを呼び出す仕組み• シラサギ独自実装• lib/ss/agent.rb

• 利用箇所• 公開側のコントローラー (cms/public_controller)

公開側（利用者）のアクセスを各コンテンツに振り分ける例）http://ドメイン/docs/page.html → 記事ページ

http://ドメイン/calendar/ → イベントカレンダー

• ページ書き出し


https://github.com/shirasagi/shirasagi/blob/master/lib/ss/agent.rb

http://ドメイン/docs/page.html

http://ドメイン/calendar/

公開側ルーティング 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 }


https://github.com/shirasagi/shirasagi/blob/master/config/routes/cms/routes_end.rb#L73-78



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









Controllercms/public#index









Controllercms/public#index → agents









Controllercms/public#index → agents → article/agents/pages/page_controller#index









Controllercms/public#index → agents → article/agents/pages/page_controller#index




cell: " pages/page "






ブログモジュールを追加していきます。


/ – 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


• 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



• 使用するAddonを追加• 本文、添付ファイル等々






endend

Addonをinclude


Blog Page Model



• default_scopeを設定• field :route

• コンテンツを識別する値• “blog/page” → ブログ/ブログページ






endend

Addonをinclude

default_scoperoute: " blog/page "


Blog Page Initializer

/ – app├ models – blog – page.rb

└ initializer.rb├ views – blog└ controllers – blog


• "blog/page" contentをpluginに登録

module Blogclass Initializer

Cms::Node.plugin "blog/page"end

end


Blog Page Agents View & Controller


└ initializer.rb├ views – blog – agents – pages – index.html.erb└ controllers – blog – agents – pages – page_controller.rb


• ブログページ公開側• コントローラー• ビュー

• agentsの下に配置

class Blog::Agents::Pages::PageController < ApplicationControllerinclude Cms::PageFilter::View

end

<%= render file: "cms/agents/pages/page/index" %>


Blog Page Navi View


└ initializer.rb├ views – blog – agents – pages – index.html.erb

└ main – _navi.html.erb└ controllers – blog – agents – pages – page_controller.rb


• ブログモジュール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




└ 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




└ 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




└ pages_controller.rb└ config – locales – blog – ja.yml

└ routes – blog

• ブログモジュールのlocaleを追加

ja:blog:

page:ブログページ

modules:blog: ブログ

" blog/page "ブログ/ブログページ


Blog Page Routes





└ 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#use ss_sample



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



#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, …






└ routes – blog – routes.rb


ここまでで新しいページが作成できるようになりました。

しかし、これでは記事ページと変わらないので..

→ 入力フォームをカスタマイズします。#git checkout -b sample-blog-addon origin/sample-blog-addon#rake unicorn:restart



2. 準備




天気入力フォーム作成

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




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




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



Blog Weather Addon

/ – app├ models – blog – addon.rb├ views – blog└ controllers – 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


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





endend

Include Weather Addon


Blog Weather Addon Index View


└ page.rb├ views – blog – addons – weather – _form.html.erb

├ _show.html.rb└ controllers – blog └ index.html.erb


• アドオンのviewを作成


Blog Weather Addon Index View





• アドオンのviewを作成

管理画面入力フォーム

管理画面表示

公開画面表示


Blog Config Locales




└ 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:天気


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

天気入力フォーム作成練習

1. 天気マークを追加してみてください（雷注意報、にわか雨、お花見日和…

2. 別の入力フォームを作ってみてください（別のアドオンを作成

3. 修正したコードをローカルでcommitしてみてください（おまけ


独自の入力フォームを作成しました。最後にフォルダーの作成を説明します。

#git checkout -b sample-blog-node origin/sample-blog-node#rake unicorn:restart



2. 準備




一覧フォルダー作成

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



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




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




Blog Node Model

/ – app├ models – blog – node.rb├ views – blog└ controllers – 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


• 公開側コントローラー、一覧ビューを作成• agents/nodes/page


Blog Agents Nodes/Page Controller



• 公開側コントローラー、一覧ビューを作成• 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



• localeに追記

ja:…

cms:nodes:

blog/page: ブログページリスト…


Blog Config Locales


└ config – locales – blog – ja.yml└ routes – blog – routes.rb

• routesにnodeを追記


node "blog" doget "page/(index.:format)" => "public#index", cell: "nodes/page "

end…end



└ config – locales – blog – ja.yml└ routes – blog – routes.rb


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

まとめ

• 新しいページ、アドオン、フォルダーを作りました

• 既存のコードを変更せずにコンテンツを追加できます

最後に

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

シラサギハンズオン東京

Technology

Transcript of シラサギハンズオン東京

シラサギハンズオン 東京

Technology

Transcript of シラサギハンズオン 東京

シラサギハンズオン東京

Transcript of シラサギハンズオン東京