SlideShare uma empresa Scribd logo
1 de 181
Ruby/Rails/mongoDBで動作する中・大規模サイト向けCMS「シラサギ」のハンズオン
自己紹介
ウェブチップス
1. 野原
2. 伊藤
シラサギの紹介
目次
1.会社概要
2.シラサギについて
3.CMSアプリケーション
4.開発コミュニティ
会社概要
会社名
設立
資本金
所在地
役員
株式会社ウェブチップス
2013年9月20日
500万円
〒770-0872 徳島県徳島市北沖洲三丁目6番58号 石本ビル202
代表取締役社長CEO 野原 直一
技術担当取締役CTO 谷沢 和寿
6名(役員含む)
オープンソースソフトウェア開発事業
オープンソースソフトウェアを使った導入・カスタマイズ事業
オープンソースソフトウェアのサポート事業
オープンソースソフトウェアを使ったクラウドサービス事業
社員数
事業内容
目次
1.会社概要
2.シラサギについて
3.CMSアプリケーション
4.開発コミュニティ
「シラサギ」という名称の由来
サギ科の鳥のうち、全身の羽毛が白いものを「白鷺(しらさぎ)」と呼びます。
徳島県では1965年10月から「シラサギ」を県の鳥に指定しています。
サギ類は、他の種類のサギたちと一緒に「鷺山(さぎやま)」という巣を作り、
繁殖するという特徴があります。
その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを
開発していくというコンセプトと一致したためこの名称を採用しました。
「シラサギ」は、みんなで育てるオープンソースソフトウェアです。
MITライセンス
誰でも自由にカスタマイズできます。
誰でも自由にフォークできます。
拡張機能を公開するかどうかを自由に選べます。
Webアプリ開発プラットフォーム
CMSですが、コアの設計は汎用SNSになっており、Webアプリ開発プラットフォーム
として利用できます。
将来的にグループウェア、SNSなどの様々なアプリケーションの開発ができます。
モデルアドオン設計
下記をカプセル化して任意のコレクションに
取り付けられます。
・DBのフィールド
・データ検証や保存ロジック
・編集画面
・詳細画面
アドオンをうまく使うことで、モジュールの
肥大化を抑えられます。
結果、ソース管理が非常に楽になります。
MongoDB
NoSQLであるMongoDBを採用し、高速化を
実現しています。
公開されているフォルダ・ページには、リレー
ションによる関連付けはなく、それぞれがファ
イル名(URL)を保持しています。
そのため、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
常に最新のバージョンに適用しています。
目次
1.会社概要
2.シラサギについて
3.CMSアプリケーション
4.開発コミュニティ
CMSアプリケーション
シラサギのコアとなる部分の設計は汎用SNSになっており、Webアプリ開発プラットフォーム
として利用できます。
現在は、そのプラットフォーム上でCMSアプリケーションが稼働しています。
初期データ
市町村向けの自治体サンプルデータ、企業サンプル
データを初期データとして提供しています。
インストール時に初期データを切り替えられます。
今後も様々なサンプルデータを提供していきます。
・子育てサイトサンプル
・大学サンプル
・県向け自治体サンプル
など
初期データを使ったホームページ作成(1)
初期データ「企業サンプル」 企業向けホームページ
ロゴ
写真
色
レイアウト
を調整
初期データを使ったホームページ作成(2)
初期データ「自治体サンプル」 自治体向けホームページ
ロゴ
写真
色
レイアウト
を調整
拡張プラグイン
独自の拡張プラグイン機能「egg(エッグ)」があります。
モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。
地図データベース機能
表示項目
検索条件
などを調整
バリアフリーマップ
拡張プラグインを使ったウェブシステム開発
マルチテナント対応
同一データベース同一スキーマ方式を採用しています。
これにより管理者の運用コストを軽減できます。
マルチテナントを使ったサービス提供
シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。
例:徳島県オープンデータポータルサイトと各市町村オープンデータサイト
Ajaxパーツ
即時反映と低負荷を実現します。
ページは、検索クローラーを想定して静的HTMLファイルを書き出します。
レイアウト、記事リストなどのパーツは、動的表示を選択することで最新の情報を表示。
マルチデバイス対応
公開画面及び管理画面は、PC、スマホ、携帯、
タブレットなど様々なデバイスに対応します。
公開画面
管理画面
多言語対応
管理画面のメニューテキストは、
外部ファイルに一括保存して
いるため、多言語版としてすぐ
に利用可能。
将来的には、ログインユーザー
ごとに利用言語を選択できる
ように。
「シラサギ」の機能について
「シラサギ」は、中・大規模サイト向けCMSということもあり、他にもたくさんの機能があります。
特に、官公庁、自治体、教育委員会、大学などで利用されることを想定し、可能な限り運用が
楽になるように配慮しています。下記のシラサギ公式サイトで今後の開発予定については、
公開されておりますので、是非ご確認ください。
http://www.ss-proj.org/dev/roadmap.html
目次
1.会社概要
2.シラサギについて
3.CMSアプリケーション
4.開発コミュニティ
GitHubによる公開開発
「シラサギ」は、GitHub上で公開開発を行っており、全国の中小ベンダーが開発に参加して
います。オープンデータプラグインも、導入によって定期的に機能追加されています。
シラサギ公式サイト
新着情報
リリースノート
よくある質問
ダウンロード
オンラインデモ
導入事例
開発情報
など
http://ss-proj.org/
シラサギプロジェクト開発コミュニティ
シラサギプロジェクトの開発コミュ
ニティをfacebook上の公開グルー
プとして立ち上げています。
リリース詳細や他のエンジニアの
方からのレポートなども掲載され
ていますので、是非ご参加くださ
い。
研修制度、開発セミナー
■研修制度
下記のエンジニア受入実績があります。
徳島県内企業 3社
東京の企業 1社
※期間は1週間~3ヵ月
■開発セミナー
シラサギを用いた開発セミナーを実施しています。
松江エンジニア向け 11名 1月30日
Rubyビジネス推進協議会(大阪) 20名 2月27日
東京築地 23名 4月22日
東京築地 25名 10月15日
塩尻 12名 10月16日
サイト構築ハンズオン
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
シラサギの基本操作 開発環境
https://github.com/shirasagi/ss-vagrant
http://localhost:3000/
Vagrant環境のシラサギを起動してください
実習では企業サンプルを利用します
http://192.168.33.10:3000/
シラサギの基本操作 開発環境
シラサギの基本操作 特徴
シラサギの基本操作 構成
ページ&レイアウト
トップや記事などのHTML
シラサギの基本操作 構成
ページ&レイアウト
トップや記事などのHTML
フォルダー
機能単位のブロック
URLが遷移します
シラサギの基本操作 構成
ページ&レイアウト
トップや記事などのHTML
フォルダー
機能単位のブロック
URLが遷移します
パーツ
レイアウトに貼り付け可能なブロック
タブ、新着記事、スライドショー等
シラサギの基本操作 特徴
 シラサギCMSの特徴
• マルチテナント
• 負荷軽減のための静的HTML書き出し
• Ruby(スクリプト)をテンプレート(レイアウト)に書かなくてもOK
• プラグイン無しで多機能(フォルダー属性を自由に変更できる)
• 今後、グループウェアを同一システム内で使えるようになる予定
シラサギの基本操作 ログイン
管理画面へアクセスし、ログインします。
ユーザーID:sys
パスワード:pass
シラサギの基本操作 サイト一覧
マルチテナントに対応しているので、まずサイト一覧が表示されます。
シラサギの基本操作 サイト名の変更
サンプルデータのサイト名を「シラサギ商店」
に変更します。
編集する
シラサギの基本操作 サイト管理画面へ移動
サイト名を選択し、サイトの管理画面へ移動します。
シラサギの基本操作 管理画面サイトトップの画面構成
サイト内のメインメニューは下記で構成されています。
・コンテンツ
利用頻度の高いフォルダーをショートカットとして登録します。
・フォルダー
サイトは「フォルダー」による階層構造で管理します。
・固定ページ
現在開いている「フォルダー」にある固定ページを表示します。
・パーツ
レイアウトに配置するHTMLの部品を「パーツ」で管理します。
・レイアウト
ページ全体のレイアウトをHTMLで作成し、管理します。
シラサギの基本操作 フォルダー
「フォルダー属性」に応じて様々な画面/機能を生成します。
記事リスト
メールフォームフォルダー属性
シラサギの基本操作 固定ページ
ページタイトル、本文、カテゴリー等を入力することでページを作成します。
入力画面 公開画面
シラサギの基本操作 パーツ
本文以外の画面表示は「パーツ」と呼ばれる部品で管理しています。
パーツ「キービジュアル」
パーツ「お問い合わせ」
パーツ「ニュース」
パーツ「ヘッダー」
ヘッダーやメニュー等、複数の
ページで共通の表示となる部
分を「パーツ」で管理します。
自由にHTMLを記述できる他、
ページの一覧やパンくず等を
機能的に表示することも出来
ます。
シラサギの基本操作 レイアウト
ページの適用する全体レイアウトで
す。複数のパーツを組み合わせて
作成します。
パーツの読み込み
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
フォルダーの作成
実際にフォルダーを作成してみます。
ページ作成時のカテゴリーの選択肢をフォルダーで追加します。
フォルダー属性が
「カテゴリー/カテゴリーリスト」 もしくは 「カテゴリー/ページリスト」
のフォルダーを追加することでカテゴリーが追加されます。
■フォルダー属性
・カテゴリー/カテゴリーリスト
フォルダー内のカテゴリーフォルダー一覧を表示するフォルダーです。
・カテゴリー/ページリスト
該当のカテゴリーが設定されているページの一覧を表示します。
フォルダーの作成
以下3つのフォルダーを作成します。
1. サポート( /support/ )
フォルダー属性: カテゴリー/カテゴリーリスト
タイトル : サポート
フォルダー名 : support
レイアウト : 1カラム
2. 製品サポート( /support/product/ )
フォルダー属性: カテゴリー/ページリスト
タイトル : 製品サポート
フォルダー名 : product
レイアウト : 1カラム
3. サービスサポート( /support/service/ )
フォルダー属性: カテゴリー/ページリスト
タイトル :サービスサポート
フォルダー名 : service
レイアウト : 1カラム
フォルダーの作成
作成したフォルダーは以下のように表示されます。
1. サポート 2. 製品サポート 3. サービス・サポート
フォルダー内のカテゴリーフォルダーが表示されます。
該当するカテゴリーが設定されたページはないので、
何も表示されていない状態です。
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
記事ページの作成
作成したカテゴリーを設定した記事ページを作成します。
シラサギでは固定ページの他、記事ページやイベントページなど
用途に合わせた様々な種類のページがあります。
記事ページの作成
記事ページはフォルダー属性「記事リスト」が設定されたフォルダーの中で作成します。
コンテンツ画面 記事リストフォルダー内
記事ページの作成
各項目に内容を入力し公開保存します。
・タイトル
システム相談会を開催します。
・カテゴリー
「サポート」「製品サポート」をチェック
・地図
「〒945-0055 新潟県柏崎市駅前2丁目1−19」にマーカーを設置
・本文
記事ページの作成
記事ページが作成されました。
製品サポートのページにも表示されます。
記事ページ 製品サポート
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
パーツの作成
作成したカテゴリーが設定された記事ページ一覧を表示するパーツを作成します。
自由にHTMLを記述するパーツの他、様々な機能を持ったパーツも存在します。
パーツの作成
トップページに配置されている
パーツ「ニュース」を編集し、
カテゴリー「サポート」が設定され
たページの一覧を表示するタブ
を追加します。
パーツの作成
パーツ「ニュース」のタブ設定(URL)にサポートのフォルダーパスを追加し、保存します。
パーツ一覧 パーツ編集画面
パーツの作成
トップページの「ニュース」部分に「サポート」のタブが追加されました。
パーツの作成
カテゴリー「サポート」の設定された記事一覧を作成します。
フォルダー「サポート」の中でパーツ属性「記事リスト」のパーツを作成することで
カテゴリー「サポート」の設定された記事一覧を表示するパーツを作成することができます。
パーツ属性 : 記事リスト
パーツ名 : 記事リスト
フィル名 : list
検索条件(URL) : support/product, support/service
パーツの作成
この時点ではレイアウトにパーツを表示していないので、
作成したパーツはどこにも表示されていません。
次のレイアウトの作成でパーツを埋め込んでみます。
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
レイアウトの作成
ページの全体デザインを決定するレイアウトの作成を行います。
フォルダー「サポート」に適用するレイアウトを作成します。
レイアウトはHTMLとパーツや本文を埋め込む独自タグにより構成されています。
レイアウトの作成
独自タグの説明
■パーツの埋め込みタグ
{{ part “パーツのファイル名" }}
例
{{ part “head" }}
{{ part “support/list” }}
フォルダー内に作成しているパーツの場合はフォルダーのパスから記載します。
レイアウトの作成
独自タグの説明
■本文の埋め込みタグ
{{ yield }}
■ページタイトルの埋め込みタグ
#{page_name}
レイアウトの作成
フォルダー「サポート」に適用するレイアウトを作成します。
・レイアウト名
サポート
・ファイル名
support
・HTML
レイアウト「1カラム」のHTMLをコピーし、 {{ yield }} の下行に
{{ part “support/list” }} を追記します。
レイアウトの作成
作成したレイアウトをフォルダー「サポート」に適用します。
レイアウトの作成
パーツ「記事リスト」を配置したレイアウトが適用されました。
レイアウトの作成
ここまでで画面表示に必要な要素が揃ったので一度、書き出しを行います。
管理画面サイトトップに戻り、「フォルダー書き出し」→「実行」と選択します。
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
表示の調整
サポートの画面に 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行目に記述しているコードを追加します。
表示の調整
サポートの画面表示が変更されました。
目次
1. シラサギの基本操作
2. フォルダーの作成
3. 記事ページの作成
4. パーツの作成
5. レイアウトの作成
6. 表示の調整
7. 課題
課題
今までの説明を踏まえ、以下の画面を作成してみてください。
カテゴリー/カテゴリーリスト カテゴリー/ページリスト
機能開発ハンズオン
※ネット接続が必要です
開発サンプル 紹介
SHIRASAGI Wiki
https://github.com/shirasagi/shirasagi/wiki
開発サンプル:ブログページ
https://github.com/shirasagi/shirasagi/wiki/開発サンプル:ブログページ
今回のハンズオンで使用するリポジトリ、コマンド集などあります
https://github.com/itowtips/ss-handson
※これを見ながら進めていきます
開発サンプル 紹介
シラサギWiki:開発サンプルブログページ
シラサギにはページを作成し公開できる機能がいくつかあります
• 記事ページ
• 固定ページ
• イベントページ
• FAQページ
開発サンプル 紹介
シラサギWiki:開発サンプルブログページ
シラサギにはページを作成し公開できる機能がいくつかあります
• 記事ページ
• 固定ページ
• イベントページ
• FAQページ
• ブログページ ← 今回はこれを追加します
開発サンプル 紹介
シラサギWiki:開発サンプルブログページ
今回のハンズオンの流れ
1. 開発用のシラサギインストール
シラサギのインストール、デモデータの登録ができるようになります
2. シラサギの構成について
他のRailsアプリケーションと違う、変わった構成の箇所を紹介
3. ブログページ作成
ページの追加を行います 独自のページが作れるようになります
4. 天気入力フォーム作成
アドオンの追加を行います 入力フォームの拡張ができるようになります
5. フォルダーの追加
作成したページ用一覧フォルダーの追加を行います、フォルダー作成ができるようになります
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. シラサギの構成
4. ブログページ作成
5. 天気入力フォーム作成
6. 一覧フォルダー作成
準備 前提知識
シラサギで使っている技術
• Ruby & Ruby On Rails
• Javascript & CoffeeScript
• Css & Scss
• Git
• MongoDB
準備 前提知識
シラサギで使っている技術
• 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 configuration
production:
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 configuration
production:
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: "sys@example.jp", password: "pass" }'
システム管理者作成
準備 サンプルデータ
#rake db:create_indexes
#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }'
#rake ss:create_site data='{ name: "サイト名", host: "www", domains: "localhost:3000" }'
サイト作成
環境にあわせてIP or ドメイン
準備 サンプルデータ
#rake db:create_indexes
#rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", 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: "sys@example.jp", 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: "sys@example.jp", 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ベース
3つの開発サンプル(ブログページ、天気アドオン、フォルダー)
をブランチに分けています適宜、切り替えて動かしてみてください
#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/controllers
app/models
app/views
config/locales
config/routes
ソースコードをエディタで開いてみてください
※/vagrant フォルダーがホスト側と共有されているはずです。
シラサギの構成
app/controllers
app/models
app/views
config/locales
config/routes
シラサギ独特な構成
• 再利用可能なプログラムがある
• 公開画面、管理画面がある
• 静的HTML書き出し機能がある
シラサギの構成
app/controllers
app/models
app/views
config/locales
config/routes
シラサギ独特な構成
• addon
• routes
• agents
シラサギの構成 Addon
app/controllers
app/models
app/views
config/locales
config/routes
シラサギ独特な構成
• addon
• routes
• agents
シラサギの構成 Addon
app/controllers
app/models
app/views
config/locales
config/routes
models/concerns/cms/addon/body.rb 本文
models/concerns/cms/addon/file.rb ファイル
models/concerns/cms/addon/meta.rb メタ情報
…
シラサギの構成 Routing
app/controllers
app/models
app/views
config/locales
config/routes
シラサギ独特な構成
• routes
• addon
• agents
app/controllers
app/models
app/views
config/locales
config/routes
config/routes.rb
config/routes/article/routes.rb
シラサギの構成 Routing
記事モジュール
app/controllers
app/models
app/views
config/locales
config/routes
config/routes.rb
config/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
app/controllers
app/models
app/views
config/locales
config/routes
config/routes.rb
config/routes/article/routes.rb
ルーティング追加ブロック
管理画面 content
公開画面 node, page, part
※namespaceの拡張
シラサギの構成 Routing
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
シラサギの構成 Routing 管理画面
content "article" do
resources :pages
end
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 :pages
end
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
シラサギの構成 Routing 公開画面
node "article" do … end
part "article" do … end
page "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 … end
part "article" do … end
page "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#index cell: " nodes/page " とは?
シラサギの構成 Routing
Routingまとめ
• 管理画面
• content ブロックを記述し定義
• ドメイン/.サイト名/モジュール(ID)/リソース
ex. http://demo.ss-proj.org/.demo/article1/pages
• 公開画面
• page, node, parts ブロックを記述し定義
• アクセスできるURL(ルーティング)は変化する?
記事を作った、記事を消した等々
→agents
ブログページ作成 Agents
app/controllers
app/models
app/views
config/locales
config/routes
シラサギ独特な構成
• routes
• addon
• agents
ブログページ作成 Agents
app/controllers
app/models
app/views
config/locales
config/routes
controllers/article/agents
• agents
• アクションチェインを実現するための手段
• アクション→アクションという流れを実現する
• 利用箇所
• 公開側のコントローラー (cms/public_controller)
公開側(利用者)のアクセスを各コンテンツに振り分ける
Ex. http://ドメイン/docs/page.html → 記事ページ
http://ドメイン/calendar/ → イベントカレンダー
• 静的ページ書き出し
ブログページ作成 Agents
公開側ルーティング 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)
ブログページ作成 Agents
公開側ルーティング 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)
ブログページ作成 Agents
公開側ルーティング config/routes/cms/routes_end.rb
• 管理画面と特殊なルーティング以外全てをcms/public#indexで受け付ける
公開画面"記事"にアクセス
http://ドメイン/docs/page.html
…
match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete]
root "cms/public#index", defaults: { format: :html }
…
※glob ルーティング(Route Globbing)
ブログページ作成 Agents
公開側ルーティング config/routes/cms/routes_end.rb
• 管理画面と特殊なルーティング以外全てをcms/public#indexで受け付ける
公開画面"記事"にアクセス
http://ドメイン/docs/page.html
Controller
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)
ブログページ作成 Agents
公開側ルーティング config/routes/cms/routes_end.rb
• 管理画面と特殊なルーティング以外全てをcms/public#indexで受け付ける
公開画面"記事"にアクセス
http://ドメイン/docs/page.html
Controller
cms/public#index → article/agents/pages/page_controller#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)
ブログページ作成 Agents
cell: " pages/page "
シラサギの構成
まとめ
• Addon
• 再利用可能なプログラム
• Model にinclude することで アドオンの入力フォームが増える
• Routing
• 管理画面 公開画面がある
• コンテンツを追加する場合はそれぞれのルーティングを定義する
• Agents
• アクション → アクションを実現するための仕組み
• 公開画面の変化するルーティングの解決に利用
• 静的書き出しに利用
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. シラサギの構成
4. ブログページ作成
5. 天気入力フォーム作成
6. 一覧フォルダー作成
ブログページ作成
シラサギWiki:ブログページ作成
ブログページ作成
シラサギWiki:ブログページ作成
※管理画面でブログページが作成できるようになります。
ブログページ作成
シラサギWiki:ブログページ作成
※公開画面での表示。
まずは既存のページを参考に、同様のものを作成します。
ブログページ作成
app/controllers
app/models
app/views
config/locales
config/routes
ここから実際に、ブログモジュールを追加していきます。
ブログページ作成
app/controllers/blog
app/models/blog
app/views/blog
config/locales/blog
config/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"
end
end
ブログページ作成
Blog Page Model
app/models/blog/page.rb
• include Cms::Model::Page
app/models/concerns/cms/model/page.rb
DB の Collection は cms_pages に
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"
end
end
Cms::Model::Page
ブログページ作成
Blog Page Model
app/models/blog/page.rb
• include Addons
include Cms::Addon::Meta
include Cms::Addon::Body
include Cms::Addon::File
…
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"
end
end
Addons
ブログページ作成
Blog Page Model
app/models/blog/page.rb
• default_scope
where(route: "blog/page")
route: コンテンツを識別する値
"blog/page" ブログ/ブログページ
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"
end
end
default_scope
ブログページ作成
Blog Page Initializer
app/models/blog/page.rb
app/models/blog/initializer.rb
• Cms::Node.plugin "blog/page"
フォルダー属性にブログ/ブログページというコンテンツが追加されます
module Blog
class Initializer
Cms::Node.plugin "blog/page"
end
end
ブログページ作成
Blog Page Controller
app/models/blog/page.rb
app/models/blog/initializer.rb
app/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::PageFilter
end
ブログページ作成
Blog Page Controller
app/models/blog/page.rb
app/models/blog/initializer.rb
app/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::PageFilter
end
Filters
ブログページ作成
Blog Page Agents View & Controller
app/models/blog/page.rb
app/models/blog/initializer.rb
app/controllers/blog/pages_controller.rb
app/controllers/blog/agents/pages_controller.rb
app/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.rb
app/models/blog/initializer.rb
app/controllers/blog/pages_controller.rb
app/controllers/blog/agents/pages_controller.rb
app/views/blog/agents/pages/index.html.erb
app/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.rb
app/models/blog/initializer.rb
app/controllers/blog/pages_controller.rb
app/controllers/blog/agents/pages_controller.rb
app/views/blog/agents/pages/index.html.erb
app/views/blog/main/_navi.html.erb
config/locales/blog/ja.yml
• ブログモジュールのlocale
ja:
blog:
page: ブログページ
modules:
blog: ブログ
" blog/page "
ブログ/ブログページ
ブログページ作成
Blog Page Routes
app/models/blog/page.rb
app/models/blog/initializer.rb
app/controllers/blog/pages_controller.rb
app/controllers/blog/agents/pages_controller.rb
app/views/blog/agents/pages/index.html.erb
app/views/blog/main/_navi.html.erb
config/locales/blog/ja.yml
config/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"
end
end
管理画面
公開画面
ブログページ作成
app/models/blog/page.rb
app/models/blog/initializer.rb
app/controllers/blog/pages_controller.rb
app/controllers/blog/agents/pages_controller.rb
app/views/blog/agents/pages/index.html.erb
app/views/blog/main/_navi.html.erb
config/locales/blog/ja.yml
config/routes/blog/routes.rb
ブログページ作成 確認
作成したブログページを使ってみます。
1. 適当なフォルダー下でモジュールをブログに切り替え
2. 新規作成
→ ブログページが作成できます。
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo
#use ss_sample
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#mongo
#use ss_sample
#db.cms_pages.find({route: "blog/page"}).pretty()
ブログページ作成
作成したブログページのMongoドキュメント(レコード)をチェックしてみます。
#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:天気入力フォーム作成
天気入力フォーム作成
シラサギWiki:天気入力フォーム作成
※ページのアドオンを追加し入力フォームを追加します。
天気入力フォーム作成
シラサギ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.rb
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
include Blog::Addon::Weather
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"
end
end
Include weather addon
天気入力フォーム作成
Blog Weather Addon Views
app/models/concerns/blog/addon/weather.rb
app/models/blog/page.rb
app/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.rb
app/models/blog/page.rb
app/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.rb
app/models/blog/page.rb
app/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
config/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.rb
app/models/blog/page.rb
app/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
config/locale/ja.yml
天気入力フォーム作成
管理画面から“今日の天気”を入力してみます。
天気入力フォーム作成 練習
1. 天気マークを追加してみてください (雷注意報、にわか雨、お花見日和…
2. 別の入力フォームを作ってみてください (別のアドオンを作成
3. 修正したコードをローカルでcommitしてみてください (おまけ
天気入力フォーム作成
独自の入力フォームを作成しました。
最後にフォルダーの作成を説明します。
#cd $HOME/sample
#git checkout -b sample-blog-node origin/sample-blog-node
#rake unicorn:restart
ハンズオン 目次
1. 開発サンプル紹介
2. 準備
3. シラサギの構成
4. ブログページ作成
5. 天気入力フォーム作成
6. 一覧フォルダー作成
一覧フォルダー作成
シラサギ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") }
end
end
一覧フォルダー作成
Blog Agents Nodes/Page Controller & View
app/models/blog/node.rb
app/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
end
end
一覧フォルダー作成
Blog Agents Nodes/Page Controller & View
app/models/blog/node.rb
app/controllers/blog/agents/nodes/page_controller.rb
app/views/blog/agents/nodes/page/index.html.erb
• 公開側一覧ビュー
一覧フォルダー作成
Blog Config Locales
app/models/blog/node.rb
app/controllers/blog/agents/nodes/page_controller.rb
app/views/blog/agents/nodes/page/index.html.erb
config/locales/blog/ja.yml
• localeを追記
ja:
…
cms:
nodes:
blog/page: ブログページリスト
…
一覧フォルダー作成
Blog Config Locales
app/models/blog/node.rb
app/controllers/blog/agents/nodes/page_controller.rb
app/views/blog/agents/nodes/page/index.html.erb
config/locales/blog/ja.yml
config/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
app/views/blog/agents/nodes/page/index.html.erb
app/controllers/blog/agents/nodes/page_controller.rb
config/locales/blog/ja.yml
config/routes/blog/routes.rb
一覧フォルダー作成
管理画面から一覧フォルダーを作成してみます。
まとめ
• 自治体サンプルのインストールを行いました。
• シラサギの独特な構成を紹介しました。
• 新しいページ、アドオン、フォルダーを作りました。
• 既存のコードを変更せずにコンテンツを追加できます。
最後に
長い時間ありがとうございました!
是非SHIRASAGIをカスタマイズしてみてください!

Mais conteúdo relacionado

Mais procurados

2014 01-11-tdc-6th-anniversary
2014 01-11-tdc-6th-anniversary2014 01-11-tdc-6th-anniversary
2014 01-11-tdc-6th-anniversary
Chieko Aihara
 
Azureの契約直前・直後に意識しておくこと10箇条
Azureの契約直前・直後に意識しておくこと10箇条Azureの契約直前・直後に意識しておくこと10箇条
Azureの契約直前・直後に意識しておくこと10箇条
Yui Ashikaga
 

Mais procurados (20)

シラサギ紹介20161119
シラサギ紹介20161119シラサギ紹介20161119
シラサギ紹介20161119
 
Shirasagi20191010
Shirasagi20191010Shirasagi20191010
Shirasagi20191010
 
SHIRASAGI Introduction OSC nagoya 2016
SHIRASAGI Introduction OSC nagoya 2016SHIRASAGI Introduction OSC nagoya 2016
SHIRASAGI Introduction OSC nagoya 2016
 
シラサギ紹介OSC京都2017
シラサギ紹介OSC京都2017シラサギ紹介OSC京都2017
シラサギ紹介OSC京都2017
 
Shirasagi20190222(OSC TOKYO)
Shirasagi20190222(OSC TOKYO)Shirasagi20190222(OSC TOKYO)
Shirasagi20190222(OSC TOKYO)
 
OSC KYOTO 2018
OSC KYOTO 2018OSC KYOTO 2018
OSC KYOTO 2018
 
シラサギ紹介20170915
シラサギ紹介20170915シラサギ紹介20170915
シラサギ紹介20170915
 
OSCnagoya2019(Shirasagi20190709)
OSCnagoya2019(Shirasagi20190709)OSCnagoya2019(Shirasagi20190709)
OSCnagoya2019(Shirasagi20190709)
 
Osc広島2017
Osc広島2017Osc広島2017
Osc広島2017
 
OSC長岡
OSC長岡OSC長岡
OSC長岡
 
シラサギ紹介(OSC東京)
シラサギ紹介(OSC東京)シラサギ紹介(OSC東京)
シラサギ紹介(OSC東京)
 
Osc島根
Osc島根Osc島根
Osc島根
 
Office365勉強会 #23 Azure AD のテナント設計(Office365管理者向け)
Office365勉強会 #23 Azure AD のテナント設計(Office365管理者向け)Office365勉強会 #23 Azure AD のテナント設計(Office365管理者向け)
Office365勉強会 #23 Azure AD のテナント設計(Office365管理者向け)
 
オープンソースがエンドユーザーイニシアティブをもたらす!? — 「シラサギ」使ったらこんなこともあんなことも —
オープンソースがエンドユーザーイニシアティブをもたらす!? — 「シラサギ」使ったらこんなこともあんなことも —オープンソースがエンドユーザーイニシアティブをもたらす!? — 「シラサギ」使ったらこんなこともあんなことも —
オープンソースがエンドユーザーイニシアティブをもたらす!? — 「シラサギ」使ったらこんなこともあんなことも —
 
2014 01-11-tdc-6th-anniversary
2014 01-11-tdc-6th-anniversary2014 01-11-tdc-6th-anniversary
2014 01-11-tdc-6th-anniversary
 
OSC Chiba 2017
OSC Chiba 2017OSC Chiba 2017
OSC Chiba 2017
 
Azureの契約直前・直後に意識しておくこと10箇条
Azureの契約直前・直後に意識しておくこと10箇条Azureの契約直前・直後に意識しておくこと10箇条
Azureの契約直前・直後に意識しておくこと10箇条
 
Azure ad 条件付きアクセス Legacy block_Preview
Azure ad 条件付きアクセス Legacy block_PreviewAzure ad 条件付きアクセス Legacy block_Preview
Azure ad 条件付きアクセス Legacy block_Preview
 
100人100通りの働き方を支えるサイボウズ流情報システム部門の在り方
100人100通りの働き方を支えるサイボウズ流情報システム部門の在り方100人100通りの働き方を支えるサイボウズ流情報システム部門の在り方
100人100通りの働き方を支えるサイボウズ流情報システム部門の在り方
 
Web制作会社様向け 知って得するMicrosoft Azureの概要と使い方!
Web制作会社様向け 知って得するMicrosoft Azureの概要と使い方!Web制作会社様向け 知って得するMicrosoft Azureの概要と使い方!
Web制作会社様向け 知って得するMicrosoft Azureの概要と使い方!
 

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

WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめWebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
Akira Inoue
 
自分達のサイボウズ office-を開発しよう
自分達のサイボウズ office-を開発しよう自分達のサイボウズ office-を開発しよう
自分達のサイボウズ office-を開発しよう
Cybozucommunity
 

Semelhante a シラサギハンズオン 2016 05-26 (20)

Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
OpenWhisk Serverless への期待
OpenWhisk Serverless への期待OpenWhisk Serverless への期待
OpenWhisk Serverless への期待
 
自分達のサイボウズ Office を開発しよう
自分達のサイボウズ Office を開発しよう自分達のサイボウズ Office を開発しよう
自分達のサイボウズ Office を開発しよう
 
Profile
ProfileProfile
Profile
 
Drupal + Japan IT 2017
Drupal + Japan IT    2017Drupal + Japan IT    2017
Drupal + Japan IT 2017
 
概説 Data API v3
概説 Data API v3概説 Data API v3
概説 Data API v3
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステムJPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
JPC2018[H4]マイクロソフトの Azure オープン ソース戦略とパートナー エコシステム
 
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめWebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
 
自分達のサイボウズ office-を開発しよう
自分達のサイボウズ office-を開発しよう自分達のサイボウズ office-を開発しよう
自分達のサイボウズ office-を開発しよう
 
ウェブ社内報セミナー
ウェブ社内報セミナーウェブ社内報セミナー
ウェブ社内報セミナー
 
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
 
20211109 JAWS-UG SRE keynotes
20211109 JAWS-UG SRE keynotes20211109 JAWS-UG SRE keynotes
20211109 JAWS-UG SRE keynotes
 
IA2010 - アジャイル時代のWeb解析事例
IA2010 -  アジャイル時代のWeb解析事例IA2010 -  アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
 
[AWS Developers Meetup 2017] Developerのための ライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] Developerのための ライブAWSウォークスルー 〜 AWS SDKの使い方 〜
 
2019年9月18日開催AWS Japan × Atlassianセミナー_セッション2「AmazonカルチャーとDevOps」
2019年9月18日開催AWS Japan × Atlassianセミナー_セッション2「AmazonカルチャーとDevOps」2019年9月18日開催AWS Japan × Atlassianセミナー_セッション2「AmazonカルチャーとDevOps」
2019年9月18日開催AWS Japan × Atlassianセミナー_セッション2「AmazonカルチャーとDevOps」
 
CMSを利用した次世代ワークフローを考える
CMSを利用した次世代ワークフローを考えるCMSを利用した次世代ワークフローを考える
CMSを利用した次世代ワークフローを考える
 
制作者にとってのWeb解析
制作者にとってのWeb解析制作者にとってのWeb解析
制作者にとってのWeb解析
 
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
 
[CTO Night & Day 2019] CTO のためのセキュリティ for Seed ~ Mid Stage #ctonight
[CTO Night & Day 2019] CTO のためのセキュリティ for Seed ~ Mid Stage #ctonight[CTO Night & Day 2019] CTO のためのセキュリティ for Seed ~ Mid Stage #ctonight
[CTO Night & Day 2019] CTO のためのセキュリティ for Seed ~ Mid Stage #ctonight
 

Último

Último (12)

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 

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

Notas do Editor

  1. ・時間になりましたので、シラサギハンズオンを始めさせていただきます。 ・皆様、忙しい中お集まりいただきありがとうございます。 ・このような場を設けていただいた、 XXXXXXならびに関係者様の皆様、ありがとうございます。
  2. シラサギハンズオンですが、ウェブチップスから野原、伊藤、中野の 3 名でお送りします。 申し遅れましたが、私は中野と言います。本日はよろしくお願いします。
  3. 野原から、私、中野にかわりまして、ハンズオンに取り掛かる前に、導入として、シラサギの概要と操作方法を簡単ではありますが、説明させていいただきます。
  4. ・皆様にも実際に操作していただきたいので、ネットワークへアクセス可能な方は、上記の URL をウェブブラウザで開いてください。
  5. ・シラサギの公式サイトでは、自治体サンプルと、企業サンプルの 2 つのデモを提供しています。 ・これらは、広く一般に公開しているので、公開画面と呼びます。 ・下の方にあるのが管理画面で、  管理画面では記事の投稿や削除などの機能が利用できます。 ・シラサギは、マルチテナントをサポートしているので、公開画面は 2 つありますが、管理画面は 1 つしかありません。 ・では、早速、システム管理者アカウントを使用して、管理画面にログインしてみましょう。
  6. 野原から、私、中野にかわりまして、ハンズオンに取り掛かる前に、導入として、シラサギの概要と操作方法を簡単ではありますが、説明させていいただきます。
  7. 5[min]