徳島oss勉強会第四回シラサギハンズオン 0925

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

自己紹介ウェブチップス1. 伊藤2. 中野

ハンズオン　目次

1. シラサギの紹介 [10min]2. ハンズオンの環境構築 [50min]3. ハンズオン [60min]

1. 開発サンプル紹介2. ブログページ作成3. 天気入力フォーム作成4. 一覧フォルダー作成

シラサギの紹介

会社概要

会社名設立資本金所在地役員

株式会社ウェブチップス２０１３年９月２０日５００万円〒 770-0872 　徳島県徳島市北沖洲三丁目 6 番 58 号　石本ビル202代表取締役社長 CEO 　野原直一技術担当取締役 CTO 　谷沢和寿６名（役員含む）オープンソースソフトウェア開発事業オープンソースを使った導入・カスタマイズ事業オープンソースを使ったクラウドサービス事業

社員数事業内容

名称の由来

サギ科の鳥のうち、全身の羽毛が白いものを「シラサギ」と呼びます。徳島県では 1965 年 10 月から「シラサギ」を県の鳥に指定しています。サギ類は、他の種類のサギたちと一緒に巣を作り、繁殖するという特徴があります。その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを開発していくというコンセプトと一致したためこの名称を採用しました。「シラサギ」は、みんなで育てるＣＭＳです。

ＭＩＴライセンス

誰でも自由にカスタマイズできます。誰でも自由にフォークできます。拡張機能を公開するかどうかを自由に選べます。

Web アプリ開発プラットフォーム

ＣＭＳですが、コアの設計はＷｅｂアプリ開発プラットフォームとして利用できます。将来的にグループウェア、ＳＮＳなどの様々なアプリケーションの開発ができます。

動作環境

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

ＭｏｎｇｏＤＢ

NoSQL である MongoDB を採用し、高速化を実現しています。公開されているフォルダ・ページには、リレーションによる関連付けはなく、それぞれがファイル名（ＵＲＬ）を保持しています。そのため、 MongoDB の強みである前方一致検索のパフォーマンスを最大限に引き出せます。そのため、任意のフォルダ内の検索も非常に高速かつ効率的に行えます。

モデルアドオン設計

下記をカプセル化して任意のコレクションに取り付けられます。・ DB のフィールド・データ検証や保存ロジック・編集画面・詳細画面アドオンをうまく使うことで、モジュールの肥大化を抑えられます。結果、ソース管理が非常に楽になります。

初期データ

市町村向けの自治体サンプルデータ、企業サンプルデータを初期データとして提供しています。インストール時に初期データを切り替えられます。今後も様々なサンプルデータを提供していきます。・子育てサイトサンプル・大学サンプル・県向け自治体サンプルなど

初期データを使ったホームページ作成（１）

初期データ「企業サンプル」企業向けホームページ

ロゴ写真色レイアウトを調整

初期データを使ったホームページ作成（２）

初期データ「自治体サンプル」自治体向けホームページ

ロゴ写真色レイアウトを調整

拡張プラグイン

独自の拡張プラグイン機能「 egg （エッグ）」があります。モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。

地図データベース機能

表示項目検索条件などを調整

バリアフリーマップ

拡張プラグインを使ったウェブシステム開発

マルチテナント対応

同一データベース同一スキーマ方式を採用しています。これにより管理者の運用コストを軽減できます。

マルチテナントを使ったサービス提供

シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。例：徳島県オープンデータポータルサイトと各市町村オープンデータサイト

Ajax レイアウト（バージョン 0.5.0 で Ajax パーツに）

即時反映と低負荷を実現します。ページは、検索クローラーを想定して静的ＨＴＭＬファイルを書き出します。レイアウト、記事リストなどのパーツは、動的表示となります。

マルチデバイス対応

公開画面及び管理画面は、ＰＣ、スマホ、携帯、タブレットなど様々なデバイスに対応。

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

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

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



https://github.com/itowtips/ss-handson

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




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




開発サンプル　紹介

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

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



ハンズオン　目次

1. 開発サンプル紹介2. 準備3. ブログページ作成4. 天気入力フォーム作成5. 一覧フォルダー作成

準備　前提知識　シラサギで使っている技術

• Ruby & Ruby On Rails• Javascript & CoffeeScript• Css & Scss• Git• MongoDB

準備　ソースコード　シラサギは Git でソースコードを管理しています今回、使用するのは v0.9.0

今回使用する３つの開発サンプルをブランチに分けています適宜、切り替えて動かしてみてください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：ブログページ作成





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





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




ブログページ作成シラサギの構成/ – app ├ models ├ views └ controllers └ config – locales　　　　　└ routes ソースコードをエディタで開いてみてください

ブログページ作成シラサギの構成/ – app ├ models ├ views └ controllers └ config – locales　　　　　└ routes シラサギ独特な構成

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

ブログページ作成シラサギの構成/ – app ├ models ├ views └ controllers └ config – locales　　　　　└ routes シラサギ独特な構成

• routes• addon• agents

ブログページ作成　 routes

/ – app ├ models ├ views └ controllers └ config – locales　　　　　└ routes シラサギ独特な構成

• routes• addon• agents

/ – app ├ models ├ views └ controllers └ config – locales　　　　　└ routes

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



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




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





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




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

cell: " pages/page " とは ??





ブログページ作成　 agents


シラサギ独特な構成• routes• addon• 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://xn--eckwd4c7c/docs/page.html




http://xn--eckwd4c7c/calendar/




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



　※glob ルーティング（ Route Globbing ）公開画面 " 記事 " にアクセス　 http:// ドメイン /docs/page.html




　※glob ルーティング（ Route Globbing ）公開画面 " 記事 " にアクセス　 http://ドメイン/docs/page.html

Controller　 cms/public#index









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









Controller　 cms/public#index → 　 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::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



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




Addon を include



• 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

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


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


　#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

天気入力フォーム作成シラサギ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



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

一覧フォルダー作成シラサギ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 をカスタマイズしてみてください！

徳島oss勉強会第四回 シラサギハンズオン 0925

Technology

徳島oss勉強会第四回シラサギハンズオン 0925