シラサギハンズオン大阪

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

登壇者

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

nakano

全体の目次がいる。

ハンズオンの狙い

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

nakano

全体の目次がいる。ハンズオン募集ページとの整合性確認。

ハンズオン　目次

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. シラサギの機能追加と機能拡張の方法を理解する。

nakano


導入

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

nakano


シラサギデモ

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


Vagrantfile をダウンロード

ハンズオン環境の起動

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

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

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

■Mac, Linux の方$ vagrant ssh

シラサギハンズオン

nakano

目次がほしいい。「？ページ参照」や「？ページのこと」という説明がしやすく、あとで振り返りやすい。


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

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

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ページ





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





シラサギWiki：開発サンプルブログページ今回の開発の流れ

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

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

3. フォルダーの追加　　作成したページ用一覧フォルダーの追加を行います　　新しいタイプのフォルダー作成ができるようになります




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





準備　 Gitとソースコード

シラサギの動く環境がある方は GitHubからソースコードを取得してください

#cd /var/www#git clone https://github.com/itowtips/ss-handson　 sample#cd sample


必要な設定ファイル ( 各種 yml と unicorn.rb) をコピーします

#cd /var/www#git clone https://github.com/itowtips/ss-handson sample#cd sample#cp config/samples/* config/


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

サイト作成

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



ブログページ作成

シラサギ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



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




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





ルーティングを確認してみます　　#rake routes | grep article




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




cell: " pages/page " とは ??


ブログページ作成　 agents


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

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

• 利用箇所• 公開側のコントローラー　 cms/public_controller• ページ書き出し


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





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


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






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










Controller　 cms/public#index










Controller　 cms/public#index →　 agents










Controller　 cms/public#index →　 agents → article/agents/pages/page_controller#index










Controller　 cms/public#index →　 agents → article/agents/pages/page_controller#index


cell: " pages/page "







/ – app ├ models ├ views └ controllers └ config – locales　　　　　 └ routes ブログモジュールを追加していきます。


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


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




Addonを include


Blog Page Model


• default_scopeを設定• field :route

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




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


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



天気入力フォーム作成

シラサギ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



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



一覧フォルダー作成

シラサギ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をカスタマイズしてみてください！

シラサギハンズオン 大阪

Technology

シラサギハンズオン大阪