シラサギハンズオン 2016 05-26

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

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

シラサギの紹介

目次

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

会社概要

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

株式会社ウェブチップス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. 記事ページの作成4. パーツの作成5. レイアウトの作成6. 表示の調整7. 課題

シラサギの基本操作　開発環境https://github.com/shirasagi/ss-vagrant

http://localhost:3000/Vagrant 環境のシラサギを起動してください

実習では企業サンプルを利用しますhttp://192.168.33.10:3000/

シラサギの基本操作　開発環境

シラサギの基本操作　特徴

シラサギの基本操作　構成

ページ＆レイアウトトップや記事などのHTML



フォルダー機能単位のブロックURLが遷移します



フォルダー機能単位のブロックURLが遷移します

パーツレイアウトに貼り付け可能なブロックタブ、新着記事、スライドショー等

シラサギの基本操作　特徴シラサギ CMSの特徴

• マルチテナント• 負荷軽減のための静的 HTML 書き出し• Ruby(スクリプト )をテンプレート（レイアウト）に書かなくても OK

• プラグイン無しで多機能（フォルダー属性を自由に変更できる）• 今後、グループウェアを同一システム内で使えるようになる予定

シラサギの基本操作　ログイン管理画面へアクセスし、ログインします。

ユーザー ID ： sysパスワード： pass

シラサギの基本操作　サイト一覧マルチテナントに対応しているので、まずサイト一覧が表示されます。

シラサギの基本操作　サイト名の変更サンプルデータのサイト名を「シラサギ商店」に変更します。

編集する

シラサギの基本操作　サイト管理画面へ移動サイト名を選択し、サイトの管理画面へ移動します。

シラサギの基本操作　管理画面サイトトップの画面構成サイト内のメインメニューは下記で構成されています。

・コンテンツ利用頻度の高いフォルダーをショートカットとして登録します。・フォルダーサイトは「フォルダー」による階層構造で管理します。・固定ページ現在開いている「フォルダー」にある固定ページを表示します。・パーツレイアウトに配置する HTMLの部品を「パーツ」で管理します。・レイアウトページ全体のレイアウトを HTMLで作成し、管理します。

シラサギの基本操作　フォルダー「フォルダー属性」に応じて様々な画面 /機能を生成します。

記事リスト

メールフォームフォルダー属性

シラサギの基本操作　固定ページページタイトル、本文、カテゴリー等を入力することでページを作成します。

入力画面公開画面

シラサギの基本操作　パーツ本文以外の画面表示は「パーツ」と呼ばれる部品で管理しています。

パーツ「キービジュアル」

パーツ「お問い合わせ」パーツ「ニュース」

パーツ「ヘッダー」ヘッダーやメニュー等、複数のページで共通の表示となる部分を「パーツ」で管理します。自由に HTMLを記述できる他、ページの一覧やパンくず等を機能的に表示することも出来ます。

シラサギの基本操作　レイアウトページの適用する全体レイアウトです。複数のパーツを組み合わせて作成します。

パーツの読み込み

フォルダーの作成実際にフォルダーを作成してみます。ページ作成時のカテゴリーの選択肢をフォルダーで追加します。フォルダー属性が「カテゴリー /カテゴリーリスト」もしくは「カテゴリー /ページリスト」のフォルダーを追加することでカテゴリーが追加されます。■フォルダー属性・カテゴリー /カテゴリーリスト　フォルダー内のカテゴリーフォルダー一覧を表示するフォルダーです。・カテゴリー /ページリスト　該当のカテゴリーが設定されているページの一覧を表示します。

フォルダーの作成以下 3つのフォルダーを作成します。

1. サポート（ /support/ ）フォルダー属性：　カテゴリー /カテゴリーリストタイトル　　　：　サポートフォルダー名　：　 supportレイアウト　　：　 1カラム2. 製品サポート（ /support/product/ ）フォルダー属性：　カテゴリー /ページリストタイトル　　　：　製品サポートフォルダー名　：　 productレイアウト　　：　 1カラム3. サービスサポート（ /support/service/ ）フォルダー属性：　カテゴリー /ページリストタイトル　　　：サービスサポートフォルダー名　：　 serviceレイアウト　　：　 1カラム

フォルダーの作成作成したフォルダーは以下のように表示されます。

1. サポート 2. 製品サポート　　 3. サービス・サポート

フォルダー内のカテゴリーフォルダーが表示されます。該当するカテゴリーが設定されたページはないので、何も表示されていない状態です。

記事ページの作成作成したカテゴリーを設定した記事ページを作成します。シラサギでは固定ページの他、記事ページやイベントページなど用途に合わせた様々な種類のページがあります。

記事ページの作成記事ページはフォルダー属性「記事リスト」が設定されたフォルダーの中で作成します。コンテンツ画面記事リストフォルダー内

記事ページの作成各項目に内容を入力し公開保存します。・タイトル　システム相談会を開催します。

・カテゴリー　「サポート」「製品サポート」をチェック・地図　「〒 945-0055 新潟県柏崎市駅前２丁目１−１９」にマーカーを設置　

・本文　

記事ページの作成記事ページが作成されました。製品サポートのページにも表示されます。記事ページ製品サポート

パーツの作成作成したカテゴリーが設定された記事ページ一覧を表示するパーツを作成します。自由に HTMLを記述するパーツの他、様々な機能を持ったパーツも存在します。

パーツの作成トップページに配置されているパーツ「ニュース」を編集し、カテゴリー「サポート」が設定されたページの一覧を表示するタブを追加します。

パーツの作成パーツ「ニュース」のタブ設定 (URL)にサポートのフォルダーパスを追加し、保存します。パーツ一覧パーツ編集画面

パーツの作成トップページの「ニュース」部分に「サポート」のタブが追加されました。

パーツの作成カテゴリー「サポート」の設定された記事一覧を作成します。フォルダー「サポート」の中でパーツ属性「記事リスト」のパーツを作成することでカテゴリー「サポート」の設定された記事一覧を表示するパーツを作成することができます。パーツ属性　　：　記事リストパーツ名　　　　：　記事リストフィル名　　　　：　 list

検索条件 (URL) ：　 support/product, support/service

パーツの作成この時点ではレイアウトにパーツを表示していないので、作成したパーツはどこにも表示されていません。次のレイアウトの作成でパーツを埋め込んでみます。

レイアウトの作成ページの全体デザインを決定するレイアウトの作成を行います。フォルダー「サポート」に適用するレイアウトを作成します。レイアウトは HTMLとパーツや本文を埋め込む独自タグにより構成されています。

レイアウトの作成独自タグの説明■パーツの埋め込みタグ{{ part “パーツのファイル名 " }}

例{{ part “head" }}

{{ part “support/list” }}

フォルダー内に作成しているパーツの場合はフォルダーのパスから記載します。

レイアウトの作成独自タグの説明■本文の埋め込みタグ{{ yield }}

■ページタイトルの埋め込みタグ#{page_name}

レイアウトの作成フォルダー「サポート」に適用するレイアウトを作成します。・レイアウト名　サポート・ファイル名　 support

・ HTML　レイアウト「 1カラム」の HTMLをコピーし、 {{ yield }} の下行に　 {{ part “support/list” }} を追記します。

レイアウトの作成作成したレイアウトをフォルダー「サポート」に適用します。

レイアウトの作成パーツ「記事リスト」を配置したレイアウトが適用されました。

レイアウトの作成ここまでで画面表示に必要な要素が揃ったので一度、書き出しを行います。管理画面サイトトップに戻り、「フォルダー書き出し」→「実行」と選択します。

表示の調整サポートの画面に CSS を適用します。SCSS、 Compass の利用が可能です。シラサギへアップロードした SCSS ファイルは自動的にコンパイルされ CSS ファイルが生成されます。

表示の調整CSS ファイルはフォルダー属性が「アップローダー」となっているフォルダー「 CSS」に格納されています。

表示の調整企業サンプル内の CSS ファイルの説明■camera.css　トップページのスライドショー用の CSS

■mobile.css　フィーチャーフォン表示用の CSS

■style.css（ style.scss）　メインの CSS のファイル　 style.scss が自動コンパイルされ style.css を書き出される■_init.scss　リセット CSS のパーシャルファイル■_part.scss　変数や mixin を定義したパーシャルファイル　

表示の調整企業サンプル内の CSS ファイルの説明■SCSS とはネストされたルール、変数、ミックスイン、セレクタ継承など CSS にあると便利な拡張を使うことができるようになります。その他にも if ,for ,each ,while なども使えるようになります。冗長になりがちな CSS コードをコンパクトにまとめ、効率的に CSS を管理できます。

section { width: 100%; p { font-weight: bold; }}

section { width: 100%;}

section p { font-weight: bold;}

SCSSの記述 CSSの記述

コンパイル

表示の調整企業サンプル内の CSS ファイルの説明■CompassとはSCSS を元にしたフレームワークです。代表的なものですと、 CSS3 のプロパティを記述する際にベンダープレフィックス（ブラウザごとの記述）を書く必要がなくなります。

■リセット CSS とはブラウザが持っているデフォルトの CSS をリセットするための CSS です。

p { display: block; @include box-shadow( 0 0 10px #ccc);}

Compassの記述p { display: block; -webkit-box-shadow: 0 0 10px #a82f34; -moz-box-shadow: 0 0 10px #a82f34; box-shadow: 0 0 10px #a82f34;}

CSSで記述すると

表示の調整style.scss の 948 行目以降に text.txt の 90 ～ 111 行目に記述しているコードを追加します。

表示の調整サポートの画面表示が変更されました。

課題今までの説明を踏まえ、以下の画面を作成してみてください。

カテゴリー /カテゴリーリストカテゴリー /ページリスト

機能開発ハンズオン※ネット接続が必要です

開発サンプル　紹介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

準備　開発環境仮想環境はサイト構築のものを利用します sshで接続しターミナルを開いてください

開発用にシラサギをインストールするところから開始しますので、　サイト構築用のシラサギを停止してください。#cd $HOME/shirasagi#rake unicorn:stop

準備　 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 -n config/samples/*.{yml,rb} config/

準備　 Gitとソースコードbundle install

#cd $HOME#git clone https://github.com/itowtips/ss-handson sample#cd sample#cp -n config/samples/*.{yml,rb} 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 ベース３つの開発サンプル（ブログページ、天気アドオン、フォルダー）をブランチに分けています適宜、切り替えて動かしてみてください

#cd $HOME/sample

#git checkout -b sample-blog-page origin/sample-blog-page#git checkout -b sample-blog-addon origin/sample-blog-addon#git checkout -b sample-blog-node origin/sample-blog-node

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

シラサギの構成app/controllersapp/modelsapp/viewsconfig/localesconfig/routes ソースコードをエディタで開いてみてください※/vagrant フォルダーがホスト側と共有されているはずです。

シラサギの構成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/


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

ここから実際に、ブログモジュールを追加していきます。手動でソースを追加するのは面倒…

　　

#cd $HOME/sample#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,　…

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

#cd $HOME/sample#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してみてください　（おまけ

天気入力フォーム作成独自の入力フォームを作成しました。最後にフォルダーの作成を説明します。#cd $HOME/sample#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をカスタマイズしてみてください！

シラサギハンズオン 2016 05-26

Technology