シラサギハンズオン 1015 1016

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

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

ハンズオン　目次

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

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

シラサギの紹介

目次

１．会社概要２．シラサギについて３．ＣＭＳアプリケーション４．開発コミュニティ

会社概要

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

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

社員数事業内容

「シラサギ」という名称の由来

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

ＭＩＴライセンス

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

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

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

モデルアドオン設計

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

ＭｏｎｇｏＤＢ

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

「シラサギ」の動作環境

対象バージョンなどOS CentOS 6,7 64bit　 or　 Ubuntu Server 14.04LTS

Webサーバアプリケーションサーバ

nginx or Apache+Unicorn

DBシステム MongoDB 3.0　Ruby 2.2.2

Ruby on Rails 4.2.3

常に最新のバージョンに適用しています。

ＣＭＳアプリケーション

シラサギのコアとなる部分の設計は汎用ＳＮＳになっており、Ｗｅｂアプリ開発プラットフォームとして利用できます。現在は、そのプラットフォーム上でＣＭＳアプリケーションが稼働しています。

初期データ

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

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

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

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

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

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

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

拡張プラグイン

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

地図データベース機能

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

バリアフリーマップ

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

マルチテナント対応

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

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

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

Ajax パーツ

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

マルチデバイス対応

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

管理画面

多言語対応

管理画面のメニューテキストは、外部ファイルに一括保存しているため、多言語版としてすぐに利用可能。将来的には、ログインユーザーごとに利用言語を選択できるように。

「シラサギ」の機能について

「シラサギ」は、中・大規模サイト向け CMSということもあり、他にもたくさんの機能があります。特に、官公庁、自治体、教育委員会、大学などで利用されることを想定し、可能な限り運用が楽になるように配慮しています。下記のシラサギ公式サイトで今後の開発予定については、公開されておりますので、是非ご確認ください。

http://www.ss-proj.org/dev/roadmap.html

GitHub による公開開発

「シラサギ」は、 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

http://localhost:3000/.mypageVagrantの環境をお持ちの方

公開画面と管理画面

管理画面 – システム管理

管理画面 – サイト管理

管理画面 – フォルダ一覧

公開画面 – 記事フォルダ

管理画面 – フォルダ詳細

管理画面 – レイアウト一覧

管理画面 – レイアウト詳細

管理画面 – 記事一覧

管理画面 – 記事詳細

公開画面 – 記事詳細

アドオン以下をカプセル化したもの1. DB のフィールド2. HTML の入力フィールド3. ビジネス・ロジック

Rails モデルクラスに include することで、モデルの機能を拡張する。

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. Vagrant Box のインストール

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-handsonGoogleで「 github itowtips」を検索しても OK

SSID: XXXXXXXXPASS ： xxxxxxxx

ハンズオン用 Github

https://github.com/itowtips/ss-handsonVagrantfile をダウンロード

ハンズオン環境の起動> cd Vagrantfile をダウンロードしたディレクトリ> vagrant up

ハンズオン環境へログイン■Windowsの方IPアドレス : localhostポート : 2222User: vagrantPassword: vagrant

■Mac, Linux の方$ vagrant ssh

シラサギハンズオン

ハンズオン　目次1. 開発サンプル紹介2. 準備3. シラサギの構成　4. ブログページ作成5. 天気入力フォーム作成6. 一覧フォルダー作成

開発サンプル　紹介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：開発サンプルブログページ今回のハンズオンの流れ

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

2. シラサギの構成について他の Rails アプリケーションと違う、変わった構成の箇所を紹介

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

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

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




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. 天気入力フォーム作成6. 一覧フォルダー作成

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

• 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

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

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

準備　 Gitとソースコード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

# cp config/defaults/environment.yml config/# vi config/environment.yml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # default environment RAILS_ENV: production- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Railsを developmentモードに

準備　 RAILS_ENV

# cp config/defaults/environment.yml config/# 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: "localhost:3000" }'

サイト作成

環境にあわせてＩＰ or ドメイン


#rake db:create_indexes#rake 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=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: "localhost: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: "localhost:3000" }'#rake db:seed name=users site=www#rake db:seed name=demo site=www#rake unicorn:start

unicorn 起動

準備　確認http://ドメイン :3000/

準備　ソースコード　シラサギは 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. 天気入力フォーム作成6. 一覧フォルダー作成

シラサギの構成app/controllersapp/modelsapp/viewsconfig/localesconfig/routes ソースコードをエディタで開いてみてください

シラサギの構成app/controllersapp/modelsapp/viewsconfig/localesconfig/routes シラサギ独特な構成

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

シラサギの構成app/controllersapp/modelsapp/viewsconfig/localesconfig/routes シラサギ独特な構成

• addon• routes• agents

シラサギの構成　 Addon

app/controllersapp/modelsapp/viewsconfig/localesconfig/routes シラサギ独特な構成

• addon• routes• agents

シラサギの構成　 Addon

app/controllersapp/modelsapp/viewsconfig/localesconfig/routes models/concerns/cms/addon/body.rb 本文models/concerns/cms/addon/file.rb ファイルmodels/concerns/cms/addon/meta.rb メタ情報…

シラサギの構成　 Routing

app/controllersapp/modelsapp/viewsconfig/localesconfig/routes シラサギ独特な構成

• routes• addon• agents

app/controllersapp/modelsapp/viewsconfig/localesconfig/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

シラサギの構成　 Routing config/routes/article/routes.rb



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


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

config/routes/article/routes.rb

次のコマンドで記事モジュールのルーティングを確認してみてください。　　#rake routes | grep article


シラサギの構成　 Routing　管理画面content "article" do resources :pagesend

article_pages GET /.:site/article:cid/pages(.:format) article/pages#index {:cid=>/\w+/} POST /.:site/article:cid/pages(.:format) article/pages#create {:cid=>/\w+/} new_article_page GET /.:site/article:cid/pages/new(.:format) article/pages#new {:cid=>/\w+/} edit_article_page GET /.:site/article:cid/pages/:id/edit(.:format) article/pages#edit {:cid=>/\w+/} article_page GET /.:site/article:cid/pages/:id(.:format) article/pages#show {:cid=>/\w+/} PATCH /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/\w+/} PUT /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/\w+/} DELETE /.:site/article:cid/pages/:id(.:format) article/pages#destroy {:cid=>/\w+/}

シラサギの構成　 Routing　管理画面content "article" do resources :pagesend

Ex. 管理画面記事一覧 : http://demo.ss-proj.org/.demo/article1/pages 　　記事詳細 : http://demo.ss-proj.org/.demo/article1/pages/28

article_pages GET /.:site/article:cid/pages(.:format) article/pages#index {:cid=>/\w+/} POST /.:site/article:cid/pages(.:format) article/pages#create {:cid=>/\w+/} new_article_page GET /.:site/article:cid/pages/new(.:format) article/pages#new {:cid=>/\w+/} edit_article_page GET /.:site/article:cid/pages/:id/edit(.:format) article/pages#edit {:cid=>/\w+/} article_page GET /.:site/article:cid/pages/:id(.:format) article/pages#show {:cid=>/\w+/} PATCH /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/\w+/} PUT /.:site/article:cid/pages/:id(.:format) article/pages#update {:cid=>/\w+/} DELETE /.:site/article:cid/pages/:id(.:format) article/pages#destroy {:cid=>/\w+/}

/.:site/article:cid

pages

http://demo.ss-proj.org/.demo/article1/pages

シラサギの構成　 Routing　公開画面node "article" do … endpart "article" do … endpage "article" do … end

article_node GET /.:site/nodes/article/page(/index.:format) cms/public#index {:cell=>"nodes/page"}article_part_page GET /.:site/parts/article/page(.:format) cms/public#index {:cell=>"parts/page"} GET /.:site/pages/article/page/:filename.:format cms/public#index {:cell=>"pages/page"}

シラサギの構成　 Routing　公開画面node "article" do … endpart "article" do … endpage "article" do … end

article_node GET /.:site/nodes/article/page(/index.:format) cms/public#index {:cell=>"nodes/page"}article_part_page GET /.:site/parts/article/page(.:format) cms/public#index {:cell=>"parts/page"} GET /.:site/pages/article/page/:filename.:format cms/public#index {:cell=>"pages/page"}

Ex. 公開画面記事一覧フォルダー : http://demo.ss-proj.org/docs/　　記事ページ : http://demo.ss-proj.org/docs/30.html

cms/public#indexcell: " nodes/page " とは ?

http://demo.ss-proj.org/docs/

http://demo.ss-proj.org/docs/


Routingまとめ• 管理画面

• content ブロックを記述し定義• ドメイン /.サイト名 /モジュール (ID)/リソース　　 ex. http://demo.ss-proj.org/.demo/article1/pages

• 公開画面• page, node, parts ブロックを記述し定義• アクセスできる URL（ルーティング）は変化する？　　　記事を作った、記事を消した等々　　　　→ agents

ブログページ作成　 Agents


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



controllers/article/agents

• agents• アクションチェインを実現するための手段• アクション→アクションという流れを実現する

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

　　公開側（利用者）のアクセスを各コンテンツに振り分ける　　 Ex. http://ドメイン/docs/page.html　→　記事ページ　　　　 http://ドメイン/calendar/　→　イベントカレンダー• 静的ページ書き出し


http://xn--eckwd4c7c/docs/page.html





http://xn--eckwd4c7c/calendar/





公開側ルーティング config/routes/cms/routes_end.rb　

• 管理画面と特殊なルーティング以外全てを cms/public#indexで受け付ける

…match "*public_path" => "cms/public#index", public_path: /[^\.].*/,　 via: [:get, :post, :put, :patch, :delete] root "cms/public#index", defaults: { format: :html }…

glob ※ ルーティング（ Route Globbing）



• 管理画面と特殊なルーティング以外全てを cms/public#indexで受け付ける　　公開画面 "記事 "にアクセス　　　 http://ドメイン /docs/page.html





• 管理画面と特殊なルーティング以外全てを cms/public#indexで受け付ける　　公開画面 "記事 "にアクセス　　　 http://ドメイン /docs/page.html

　　 Controller　　　 cms/public#index





• 管理画面と特殊なルーティング以外全てを cms/public#indexで受け付ける　　公開画面 "記事 "にアクセス　　　 http://ドメイン/docs/page.html

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




cell: " pages/page "






シラサギの構成まとめ• Addon

• 再利用可能なプログラム• Model に include することで　アドオンの入力フォームが増える

• Routing• 管理画面公開画面がある• コンテンツを追加する場合はそれぞれのルーティングを定義する

• Agents• アクション → アクションを実現するための仕組み• 公開画面の変化するルーティングの解決に利用• 静的書き出しに利用

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





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





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




ブログページ作成app/controllersapp/modelsapp/viewsconfig/localesconfig/routes ここから実際に、ブログモジュールを追加していきます。

ブログページ作成app/controllers/blogapp/models/blogapp/views/blogconfig/locales/blogconfig/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

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



• include Cms::Model::Page app/models/concerns/cms/model/page.rb　　　 DB の Collection は cms_pages に




Cms::Model::Page



• include Addonsinclude Cms::Addon::Meta include Cms::Addon::Body

include Cms::Addon::File …




Addons



• default_scopewhere(route: "blog/page") route: コンテンツを識別する値"blog/page" ブログ /ブログページ




default_scope

ブログページ作成Blog Page Initializer

app/models/blog/page.rbapp/models/blog/initializer.rb

• Cms::Node.plugin "blog/page" フォルダー属性にブログ /ブログページというコンテンツが追加されます

module Blog 　 class Initializer 　　 Cms::Node.plugin "blog/page" 　 endend

ブログページ作成Blog Page Controller

app/models/blog/page.rbapp/models/blog/initializer.rbapp/controllers/blog/pages_controller.rb

• ブログページ管理側コントローラー

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.rbapp/models/blog/initializer.rbapp/controllers/blog/pages_controller.rb

• Include Filters必要なアクションが定義されます 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

Filters

ブログページ作成Blog Page Agents View & Controller

app/models/blog/page.rbapp/models/blog/initializer.rbapp/controllers/blog/pages_controller.rbapp/controllers/blog/agents/pages_controller.rbapp/views/blog/agents/pages/index.html.erb

• ブログページ公開側コントローラー公開側ビュー• 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.rbapp/models/blog/initializer.rbapp/controllers/blog/pages_controller.rbapp/controllers/blog/agents/pages_controller.rbapp/views/blog/agents/pages/index.html.erbapp/views/blog/main/_navi.html.erb

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

app/models/blog/page.rbapp/models/blog/initializer.rbapp/controllers/blog/pages_controller.rbapp/controllers/blog/agents/pages_controller.rbapp/views/blog/agents/pages/index.html.erbapp/views/blog/main/_navi.html.erbconfig/locales/blog/ja.yml

• ブログモジュールの locale

ja:　 blog: 　　 page: ブログページ　modules:　　 blog: ブログ

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

ブログページ作成Blog Page Routes

app/models/blog/page.rbapp/models/blog/initializer.rbapp/controllers/blog/pages_controller.rbapp/controllers/blog/agents/pages_controller.rbapp/views/blog/agents/pages/index.html.erbapp/views/blog/main/_navi.html.erbconfig/locales/blog/ja.ymlconfig/routes/blog/routes.rb

• ブログモジュールの Routing管理画面 content "blog" do … end公開画面 page "blog" do … end

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

管理画面

公開画面

ブログページ作成app/models/blog/page.rbapp/models/blog/initializer.rb

app/controllers/blog/pages_controller.rbapp/controllers/blog/agents/pages_controller.rb

app/views/blog/agents/pages/index.html.erbapp/views/blog/main/_navi.html.erb

config/locales/blog/ja.ymlconfig/routes/blog/routes.rb

ブログページ作成　確認作成したブログページを使ってみます。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,　…

ブログページ作成ここまでで新しいページが作成できるようになりました。しかし、これでは記事ページと変わらないので　→　入力フォームをカスタマイズします。

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

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

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







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







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






天気入力フォーム作成Blog Weather Addon

app/models/concerns/blog/addon/weather.rb

• 天気アドオン

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.rbapp/models/blog/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　 include Blog::Addon::Weather



Include weather addon

天気入力フォーム作成Blog Weather Addon Views

app/models/concerns/blog/addon/weather.rbapp/models/blog/page.rbapp/views/blog/agents/addons/weather/_form.html.erb　app/views/blog/agents/addons/weather/_show.html.rb app/views/blog/agents/addons/weather/view/index.html.erb

• 天気アドオンの view

天気入力フォーム作成Blog Weather Addon Views

app/models/concerns/blog/addon/weather.rbapp/models/blog/page.rbapp/views/blog/agents/addons/weather/_form.html.erb　管理画面入力フォームapp/views/blog/agents/addons/weather/_show.html.rb 管理画面詳細画面app/views/blog/agents/addons/weather/view/index.html.erb 公開画面• 天気アドオンの view

天気入力フォーム作成Blog Config Locales

app/models/concerns/blog/addon/weather.rbapp/models/blog/page.rbapp/views/blog/agents/addons/weather/_form.html.erbapp/views/blog/agents/addons/weather/_show.html.rb app/views/blog/agents/addons/weather/view/index.html.erbconfig/locale/ja.yml

• 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.rbapp/models/blog/page.rb

app/views/blog/agents/addons/weather/_form.html.erbapp/views/blog/agents/addons/weather/_show.html.rb app/views/blog/agents/addons/weather/view/index.html.erb

config/locale/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

• ブログ一覧フォルダー

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 & View

app/models/blog/node.rbapp/controllers/blog/agents/nodes/page_controller.rb

• 公開側コントローラー

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 Agents Nodes/Page Controller & View

app/models/blog/node.rbapp/controllers/blog/agents/nodes/page_controller.rbapp/views/blog/agents/nodes/page/index.html.erb

• 公開側一覧ビュー

一覧フォルダー作成Blog Config Locales

app/models/blog/node.rbapp/controllers/blog/agents/nodes/page_controller.rbapp/views/blog/agents/nodes/page/index.html.erbconfig/locales/blog/ja.yml

• localeを追記

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

一覧フォルダー作成Blog Config Locales

app/models/blog/node.rbapp/controllers/blog/agents/nodes/page_controller.rbapp/views/blog/agents/nodes/page/index.html.erbconfig/locales/blog/ja.ymlconfig/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.rbapp/views/blog/agents/nodes/page/index.html.erb

app/controllers/blog/agents/nodes/page_controller.rb

config/locales/blog/ja.ymlconfig/routes/blog/routes.rb

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

まとめ• 自治体サンプルのインストールを行いました。• シラサギの独特な構成を紹介しました。• 新しいページ、アドオン、フォルダーを作りました。• 既存のコードを変更せずにコンテンツを追加できます。

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

シラサギハンズオン 1015 1016

Technology

Transcript of シラサギハンズオン 1015 1016