Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

232 views

Published on

徳島OSS勉強会第四回 シラサギハンズオンのスライドです

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Ruby/Rails/mongoDBで動作する中・大規模サイト向けCMS「シラサギ」のハンズオン
  2. 2. 自己紹介 ウェブチップス 1. 伊藤 2. 中野
  3. 3. ハンズオン 目次 1. シラサギの紹介 [10min] 2. ハンズオンの環境構築 [50min] 3. ハンズオン [60min] 1. 開発サンプル紹介 2. ブログページ作成 3. 天気入力フォーム作成 4. 一覧フォルダー作成
  4. 4. シラサギの紹介
  5. 5. 会社概要 会社名 設立 資本金 所在地 役員 株式会社ウェブチップス 2013年9月20日 500万円 〒770-0872 徳島県徳島市北沖洲三丁目6番58号 石本ビル202 代表取締役社長CEO 野原 直一 技術担当取締役CTO 谷沢 和寿 6名(役員含む) オープンソースソフトウェア開発事業 オープンソースを使った導入・カスタマイズ事業 オープンソースを使ったクラウドサービス事業 社員数 事業内容
  6. 6. 名称の由来 サギ科の鳥のうち、全身の羽毛が白いものを「シラサギ」と呼びます。 徳島県では1965年10月から「シラサギ」を県の鳥に指定しています。 サギ類は、他の種類のサギたちと一緒に巣を作り、繁殖するという特徴が あります。 その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを 開発していくというコンセプトと一致したためこの名称を採用しました。 「シラサギ」は、みんなで育てるCMSです。
  7. 7. MITライセンス 誰でも自由にカスタマイズできます。 誰でも自由にフォークできます。 拡張機能を公開するかどうかを自由に選べます。
  8. 8. Webアプリ開発プラットフォーム CMSですが、コアの設計はWebアプリ開発プラットフォームとして利用できます。 将来的にグループウェア、SNSなどの様々なアプリケーションの開発ができます。
  9. 9. 動作環境 Internet Explorer (ver.8 以上)、Firefox、Chrome、Safariの最新バージョンを想定しています。 対象 バージョンなど OS CentOS 7.1 64bit Webサーバ nginx + unicorn DBシステム MongoDB Ruby 2.2.3 Ruby on Rails 4.2.3
  10. 10. MongoDB NoSQLであるMongoDBを採用し、高速化を 実現しています。 公開されているフォルダ・ページには、リレー ションによる関連付けはなく、それぞれがファ イル名(URL)を保持しています。 そのため、MongoDBの強みである前方一致 検索のパフォーマンスを最大限に引き出せ ます。そのため、任意のフォルダ内の検索も 非常に高速かつ効率的に行えます。
  11. 11. モデルアドオン設計 下記をカプセル化して任意のコレクションに 取り付けられます。 ・DBのフィールド ・データ検証や保存ロジック ・編集画面 ・詳細画面 アドオンをうまく使うことで、モジュールの 肥大化を抑えられます。 結果、ソース管理が非常に楽になります。
  12. 12. 初期データ 市町村向けの自治体サンプルデータ、企業サンプル データを初期データとして提供しています。 インストール時に初期データを切り替えられます。 今後も様々なサンプルデータを提供していきます。 ・子育てサイトサンプル ・大学サンプル ・県向け自治体サンプル など
  13. 13. 初期データを使ったホームページ作成(1) 初期データ「企業サンプル」 企業向けホームページ ロゴ 写真 色 レイアウト を調整
  14. 14. 初期データを使ったホームページ作成(2) 初期データ「自治体サンプル」 自治体向けホームページ ロゴ 写真 色 レイアウト を調整
  15. 15. 拡張プラグイン 独自の拡張プラグイン機能「egg(エッグ)」があります。 モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。
  16. 16. 地図データベース機能 表示項目 検索条件 などを調整 バリアフリーマップ 拡張プラグインを使ったウェブシステム開発
  17. 17. マルチテナント対応 同一データベース同一スキーマ方式を採用しています。 これにより管理者の運用コストを軽減できます。
  18. 18. マルチテナントを使ったサービス提供 シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。 例:徳島県オープンデータポータルサイトと各市町村オープンデータサイト
  19. 19. Ajaxレイアウト(バージョン0.5.0でAjaxパーツに) 即時反映と低負荷を実現します。 ページは、検索クローラーを想定して静的HTMLファイルを書き出します。 レイアウト、記事リストなどのパーツは、動的表示となります。
  20. 20. マルチデバイス対応 公開画面及び管理画面は、PC、スマホ、携帯、 タブレットなど様々なデバイスに対応。
  21. 21. GitHubによる公開開発 既にシラサギの開発に共感してくれている個人のエンジニアの方から、 プルリクエスト(開発したプログラムを取り込む依頼)を定期的にいただいています。
  22. 22. シラサギ公式サイト 新着情報 リリースノート よくある質問 ダウンロード オンラインデモ 導入事例 開発情報 など http://ss-proj.org/
  23. 23. シラサギプロジェクト開発コミュニティ シラサギプロジェクトの開発コミュ ニティをfacebook上の公開グルー プとして立ち上げています。 リリース詳細や他のエンジニアの 方からのレポートなども掲載され ていますので、是非ご参加くださ い。
  24. 24. ハンズオン環境構築
  25. 25. ハンズオン環境へログイン ■Windowsの方 IPアドレス: localhost ポート: 2222 User: vagrant Password: vagrant ■Mac, Linux の方 $ vagrant ssh
  26. 26. ハンズオン用Github https://github.com/itowtips/ss-handson Googleで「github itowtips」を検索してもOK Commandlist.txt をブラウザで表示
  27. 27. MongoDB – Vagrant Box ご利用の方向け 1. ファイル /etc/yum.repos.d/mongodb-org-3.0.repo を作成 2. MongoDB をインストールして開始 sudo vi /etc/yum.repos.d/mongodb-org-3.0.repo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [mongodb-org-3.0]name=MongoDB Repositorybaseurl=http://repo.mongodb.org/yum/redhat/$releasever/mongo db-org/3.0/x86_64/gpgcheck=0enabled=1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - sudo yum install mongodb-org sudo service mongod start
  28. 28. MongoDB – Macをご利用の方向け 1. MongoDBをインストール 2. MongoDB を開始 brew update brew install mongodb mongod --config /usr/local/etc/mongod.conf &
  29. 29. Prequicities 1. 必須モジュールのインストール sudo yum install git ImageMagick ImageMagick-devel brew install imagemagick Vagrant Boxをお使いの方 Macをお使いの方
  30. 30. ハンズオン用シラサギインストール 1. 次のコマンドを実行 git clone https://github.com/itowtips/ss-handson sample cd sample cp -n config/samples/*.{rb,yml} config/ bundle install
  31. 31. データベース設定 1. config/mongoid.yml を編集します。 vi config/mongoid.yml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # mongodb configuration production: sessions: default: database: ss_sample development: sessions: default: database: ss_sample - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  32. 32. 環境設定 1. config/environment.yml を編集します。 cp config/defaults/environment.yml config/ vi config/environment.yml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # default environment RAILS_ENV: development - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  33. 33. 初期データ投入 1. 次のコマンドを実行します。 rake db:drop 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
  34. 34. シラサギ概観 管理画面 1. メニューやコンテキストメニューの操作方法 2. フォルダ 3. レイアウト 4. パーツ 5. ページ 6. アドオン
  35. 35. シラサギデモ 公開画面: http://localhost:3000/ 管理画面: http://localhost:3000/.mypage ユーザー: sys@example.jp パスワード: pass
  36. 36. 公開画面
  37. 37. 管理画面 – システム管理
  38. 38. 管理画面 – サイト管理
  39. 39. 管理画面 – フォルダ一覧
  40. 40. 公開画面 – 記事フォルダ
  41. 41. 管理画面 – フォルダ詳細
  42. 42. 管理画面 – レイアウト一覧
  43. 43. 管理画面 – レイアウト詳細
  44. 44. 管理画面 – 記事一覧
  45. 45. 管理画面 – 記事詳細
  46. 46. 公開画面 – 記事詳細
  47. 47. アドオン 以下をカプセル化したもの 1. DBのフィールド 2. HTMLの入力フィールド 3. ビジネス・ロジック Rails モデルクラスに include することで、モデルの機能を拡張する。
  48. 48. Rails モデルクラスでのアドオン class Article::Page include Cms::Model::Page include Cms::Addon::EditLock include Workflow::Addon::Branch include Workflow::Addon::Approver include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Category::Addon::Category include Cms::Addon::ParentCrumb include Event::Addon::Date …
  49. 49. 振り返り 管理画面 1. メニューやコンテキストメニューの操作方法 2. フォルダ 3. レイアウト 4. パーツ 5. ページ 6. アドオン
  50. 50. シラサギハンズオン
  51. 51. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  52. 52. 開発サンプル 紹介 SHIRASAGI Wiki https://github.com/shirasagi/shirasagi/wiki 開発サンプル:ブログページ https://github.com/shirasagi/shirasagi/wiki/開発サンプル:ブログページ 今回のハンズオンで使用するリポジトリ、コマンド集などあります https://github.com/itowtips/ss-handson ※これを見ながら進めていきます
  53. 53. 開発サンプル 紹介 シラサギWiki:開発サンプルブログページ シラサギにはページを作成し公開できる機能がいくつかあります • 記事ページ • 固定ページ • イベントページ • FAQページ
  54. 54. 開発サンプル 紹介 シラサギWiki:開発サンプルブログページ シラサギにはページを作成し公開できる機能がいくつかあります • 記事ページ • 固定ページ • イベントページ • FAQページ • ブログページ ← 今回はこれを追加します
  55. 55. 開発サンプル 紹介 シラサギWiki:開発サンプルブログページ 今回の開発の流れ 0. 開発用のシラサギインストール シラサギのインストール、デモデータの登録ができるようになります 1. ブログページ作成 ページの追加を行います 独自のページが作れるようになります 2. 天気入力フォーム作成 アドオンの追加を行います 入力フォームの拡張ができるようになります 3. フォルダーの追加 作成したページ用一覧フォルダーの追加を行います 新しいタイプのフォルダー作成ができるようになります
  56. 56. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  57. 57. 準備 前提知識 シラサギで使っている技術 • Ruby & Ruby On Rails • Javascript & CoffeeScript • Css & Scss • Git • MongoDB
  58. 58. 準備 前提知識 シラサギで使っている技術 • Ruby & Ruby On Rails • Javascript & CoffeeScript • Css & Scss • Git • MongoDB
  59. 59. 準備 ソースコード シラサギはGitでソースコードを管理しています 今回、使用するのは v0.9.0 今回使用する3つの開発サンプルをブランチに分けています 適宜、切り替えて動かしてみてください 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
  60. 60. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  61. 61. ブログページ作成 シラサギWiki:ブログページ作成
  62. 62. ブログページ作成 シラサギWiki:ブログページ作成 ※管理画面でブログページが作成できるようになります。
  63. 63. ブログページ作成 シラサギWiki:ブログページ作成 ※公開画面での表示。 まずは既存のページを参考に、同様のものを作成します。
  64. 64. ブログページ作成 シラサギの構成 / – app ├ models ├ views └ controllers └ config – locales └ routes ソースコードをエディタで開いてみてください
  65. 65. ブログページ作成 シラサギの構成 / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • 公開画面、管理画面がある • 再利用可能なプログラムがある • 静的HTML書き出し機能がある …
  66. 66. ブログページ作成 シラサギの構成 / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • routes • addon • agents
  67. 67. ブログページ作成 routes / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • routes • addon • agents
  68. 68. / – app ├ models ├ views └ controllers └ config – locales └ routes config/routes.rb config/routes/モジュール名/routes.rb ブログページ作成 routes
  69. 69. / – app ├ models ├ views └ controllers └ config – locales └ routes config/routes.rb config/routes/article/routes.rb ブログページ作成 routes
  70. 70. / – app ├ models ├ views └ controllers └ config – locales └ 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 ブログページ作成 routes
  71. 71. / – app ├ models ├ views └ controllers └ config – locales └ routes config/routes.rb config/routes/article/routes.rb ルーティング追加ブロック 管理画面 content 公開画面 node, page, part ブログページ作成 routes 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
  72. 72. ルーティングを確認してみます #rake routes | grep article ブログページ作成 routes
  73. 73. / – app ├ models ├ views └ controllers └ config – locales └ routes config/routes.rb config/routes/article/routes.rb ルーティング追加ブロック 管理画面 content 公開画面 node, page, part cell: " pages/page " とは?? ブログページ作成 routes 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
  74. 74. ブログページ作成 agents / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • routes • addon • agents
  75. 75. • agents • コントローラーからコントローラーを呼び出す仕組み • シラサギ独自実装 • lib/ss/agent.rb • 利用箇所 • 公開側のコントローラー (cms/public_controller) 公開側(利用者)のアクセスを各コンテンツに振り分ける 例)http://ドメイン/docs/page.html → 記事ページ http://ドメイン/calendar/ → イベントカレンダー • ページ書き出し ブログページ作成 agents
  76. 76. 公開側ルーティング config/routes/cms/routes_end.rb ※glob ルーティング(Route Globbing) … match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: true match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: false root "cms/public#index", defaults: { format: :html } … ブログページ作成 agents
  77. 77. 公開側ルーティング config/routes/cms/routes_end.rb ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス http://ドメイン/docs/page.html … match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: true match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: false root "cms/public#index", defaults: { format: :html } … ブログページ作成 agents
  78. 78. 公開側ルーティング config/routes/cms/routes_end.rb ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス http://ドメイン/docs/page.html Controller cms/public#index … match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: true match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: false root "cms/public#index", defaults: { format: :html } … ブログページ作成 agents
  79. 79. 公開側ルーティング config/routes/cms/routes_end.rb ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス 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], format: true match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: false root "cms/public#index", defaults: { format: :html } … ブログページ作成 agents
  80. 80. 公開側ルーティング config/routes/cms/routes_end.rb ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス 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], format: true match "*public_path" => "cms/public#index", public_path: /[^.].*/, via: [:get, :post, :put, :patch, :delete], format: false root "cms/public#index", defaults: { format: :html } … ブログページ作成 agents cell: " pages/page "
  81. 81. ブログページ作成 / – app ├ models ├ views └ controllers └ config – locales └ routes ここから実際に、ブログモジュールを追加していきます。
  82. 82. ブログページ作成 / – app ├ models – blog ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog ここから実際に、ブログモジュールを追加していきます。
  83. 83. ブログページ作成 / – app ├ models – blog ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog → それぞれにソースコードを追加していきます。
  84. 84. ブログページ作成 / – app ├ models – blog ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog → それぞれにソースコードを追加していきます。 手動でソースを追加するのは面倒… #git checkout -b sample-blog-page origin/sample-blog-page #rake unicorn:stop #rake unicorn:start
  85. 85. ブログページ作成 Blog Page Model / – app ├ models – blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • include Cms::Model::Page • app/models/concerns/cms/model/page.rb class Blog::Page include Cms::Model::Page include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::RelatedPage include Category::Addon::Category include Workflow::Addon::Approver before_save :seq_filename, if: ->{ basename.blank? } default_scope ->{ where(route: "blog/page") } private def validate_filename (@basename && @basename.blank?) ? nil : super end def seq_filename self.filename = dirname ? "#{dirname}#{id}.html" : "#{id}.html" end end
  86. 86. ブログページ作成 Blog Page Model / – app ├ models – blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • 使用するAddonを追加 • 本文、添付ファイル等々 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 Addonをinclude
  87. 87. ブログページ作成 Blog Page Model / – app ├ models – blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • default_scopeを設定 • field :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 Addonをinclude default_scope route: " blog/page "
  88. 88. ブログページ作成 Blog Page Initializer / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • Cms::Node.plugin “blog/page” → フォルダー属性にブログ/ブログページというコンテンツが追加される。 module Blog class Initializer Cms::Node.plugin "blog/page" end end
  89. 89. ブログページ作成 Blog Page Agents View & Controller / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ controllers – blog – agents – pages – page_controller.rb └ config – locales – blog └ routes – blog • ブログページ公開側 • コントローラー • ビュー • agentsの下に配置 class Blog::Agents::Pages::PageController < ApplicationController include Cms::PageFilter::View end <%= render file: "cms/agents/pages/page/index" %>
  90. 90. ブログページ作成 Blog Page Navi View / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ main – _navi.html.erb └ controllers – blog – agents – pages – page_controller.rb └ config – locales – blog └ routes – blog • ブログモジュールnavi viewを追加 <%= node_navi do %> <nav class="sub-menu"> <header><h1><%=t"modules.blog" %></h1></header> <div> <%= link_to :"blog.page", blog_pages_path, class: "icon-page" %> </div> </nav> <% end %>
  91. 91. ブログページ作成 Blog Page Controller / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ main – _navi.html.erb └ controllers – blog – agents – pages – page_controller.rb └ pages_controller.rb └ config – locales – blog └ routes – blog • ブログページ管理側コントローラー class Blog::PagesController < ApplicationController include Cms::BaseFilter include Cms::PageFilter include Workflow::PageFilter model Blog::Page append_view_path "app/views/cms/pages“ navi_view "blog/main/navi“ private def fix_params { cur_user: @cur_user, cur_site: @cur_site, cur_node: @cur_node } end #public # Cms::PageFilter end
  92. 92. ブログページ作成 Blog Page Controller / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ main – _navi.html.erb └ controllers – blog – agents – pages – page_controller.rb └ pages_controller.rb └ config – locales – blog └ routes – blog • 必要なFilterをincludeします。 • Index show new… class Blog::PagesController < ApplicationController include Cms::BaseFilter include Cms::PageFilter include Workflow::PageFilter model Blog::Page append_view_path "app/views/cms/pages“ navi_view "blog/main/navi“ private def fix_params { cur_user: @cur_user, cur_site: @cur_site, cur_node: @cur_node } end #public # Cms::PageFilter end Filterをinclude
  93. 93. ブログページ作成 Blog Config Locales / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ main – _navi.html.erb └ controllers – blog – agents – pages – page_controller.rb └ pages_controller.rb └ config – locales – blog – ja.yml └ routes – blog • ブログモジュールのlocaleを追加 ja: blog: page: ブログページ modules: blog: ブログ " blog/page " ブログ/ブログページ
  94. 94. ブログページ作成 Blog Page Routes / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ main – _navi.html.erb └ controllers – blog – agents – pages – page_controller.rb └ pages_controller.rb └ config – locales – blog – ja.yml └ routes – blog – routes.rb • ブログモジュールのルーティングを追加 SS::Application.routes.draw do Blog::Initializer concern :deletion do get :delete, on: :member end content "blog" do get “/” => redirect { |p, req| “#{req.path}/pages” }, as: :main resources :pages, concerns: :deletion end page "blog" do get "page/:filename.:format" => "public#index", cell: "pages/page" end end
  95. 95. ブログページ作成 確認 作成したブログページを使ってみます。 1. 適当なフォルダー下でモジュールをブログに切り替え 2. 新規作成 → ブログページが作成できます。
  96. 96. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo
  97. 97. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo #use ss_sample
  98. 98. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo #use ss_sample #db.cms_pages.find({route: "blog/page"}).pretty()
  99. 99. ブログページ作成 作成したブログページの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, …
  100. 100. ブログページ作成 / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog – agents – pages – index.html.erb └ main – _navi.html.erb └ controllers – blog – agents – pages – page_controller.rb └ pages_controller.rb └ config – locales – blog – ja.yml └ routes – blog – routes.rb
  101. 101. ブログページ作成 ここまでで新しいページが作成できるようになりました。 しかし、これでは記事ページと変わらないので.. → 入力フォームをカスタマイズします。 #git checkout -b sample-blog-addon origin/sample-blog-addon #rake unicorn:restart
  102. 102. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  103. 103. 天気入力フォーム作成 シラサギWiki:天気入力フォーム作成
  104. 104. 天気入力フォーム作成 シラサギWiki:天気入力フォーム作成 ※ページのアドオンを追加し入力フォームを追加します。
  105. 105. 天気入力フォーム作成 シラサギWiki:天気入力フォーム作成 ※公開側では入力した天気と日付を表示します。
  106. 106. 天気入力フォーム作成 Blog Weather Addon / – app ├ models – concerns – blog – addon – weather.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • 天気アドオンを追加 module Blog::Addon module Weather extend ActiveSupport::Concern extend SS::Addon included do field :weather, type: String permit_params :weather public def weather_options [ ["晴れ", "sunny"], ["曇り", "cloudy"], ["雨", "rain"], ["雪", "snow"], ] end end end end fieldを追加
  107. 107. 天気入力フォーム作成 Blog Page Model / – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog class Blog::Page include Cms::Model::Page include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::RelatedPage include Category::Addon::Category include Workflow::Addon::Approver include Blog::Addon::Weather 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
  108. 108. 天気入力フォーム作成 Blog Weather Addon Index View / – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog └ routes – blog • アドオンのviewを作成
  109. 109. 天気入力フォーム作成 Blog Weather Addon Index View / – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog └ routes – blog • アドオンのviewを作成 管理画面入力フォーム 管理画面表示 公開画面表示
  110. 110. 天気入力フォーム作成 Blog Config Locales / – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog – ja.yml └ routes – blog • localeを追記 ja: blog: page: ブログページ sunny: ☀ cloudy: ☁ rain: ☂ snow: ☃ modules: blog: ブログ addons: blog/weather: 今日の天気 mongoid: attributes: cms/page/model: weather: 天気
  111. 111. 天気入力フォーム作成 管理画面から"今日の天気"を入力してみます
  112. 112. 天気入力フォーム作成 / – app ├ models – concerns – blog – addon – weather.rb └ blog – page.rb ├ views – blog – agents – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog – ja.yml
  113. 113. 天気入力フォーム作成 練習 1. 天気マークを追加してみてください (雷注意報、にわか雨、お花見日和… 2. 別の入力フォームを作ってみてください (別のアドオンを作成 3. 修正したコードをローカルでcommitしてみてください (おまけ
  114. 114. 天気入力フォーム作成 独自の入力フォームを作成しました。 最後にフォルダーの作成を説明します。 #git checkout -b sample-blog-node origin/sample-blog-node #rake unicorn:restart
  115. 115. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  116. 116. 一覧フォルダー作成 シラサギWiki:一覧フォルダー作成
  117. 117. 一覧フォルダー作成 ※「フォルダー属性」ブログページリストが作成できるようになります シラサギWiki:一覧フォルダー作成
  118. 118. 一覧フォルダー作成 ※公開側のページ一覧を変更し独自のものを作成します シラサギWiki:一覧フォルダー作成
  119. 119. 一覧フォルダー作成 Blog Node Model / – app ├ models – blog – node.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • ブログ一覧フォルダーを作成 module Blog::Node class Base include Cms::Model ::Node default_scope ->{ where(route: /^blog//) } end class Page include Cms::Model ::Node include Cms::Addon::PageList default_scope ->{ where(route: "blog/page") } end end
  120. 120. 一覧フォルダー作成 Blog Agents Nodes/Page Controller / – app ├ models – blog – node.rb ├ views – blog – agents – nodes – page – index.html.erb └ controllers – blog – agents – nodes – page_controller.rb └ config – locales – blog └ routes – blog • 公開側コントローラー、一覧ビューを作成 • agents/nodes/page
  121. 121. 一覧フォルダー作成 Blog Agents Nodes/Page Controller / – app ├ models – blog – node.rb ├ views – blog – agents – nodes – page – index.html.erb └ controllers – blog – agents – nodes – page_controller.rb └ config – locales – blog └ routes – blog • 公開側コントローラー、一覧ビューを作成 • agents/nodes/page class Blog::Agents::Nodes::PageController < ApplicationController include Cms::NodeFilter::View helper Cms::ListHelper Public def pages Blog::Page.site(@cur_site).public(@cur_date). where(@cur_node.condition_hash) end def index @items = pages. order_by(@cur_node.sort_hash). page(params[:page]). per(@cur_node.limit) render_with_pagination @items end end
  122. 122. 一覧フォルダー作成 Blog Config Locales / – app ├ models – blog – node.rb ├ views – blog – agents – nodes – page – index.html.erb └ controllers – blog – agents – nodes – page_controller.rb └ config – locales – blog – ja.yml └ routes – blog • localeに追記 ja: … cms: nodes: blog/page: ブログページリスト …
  123. 123. 一覧フォルダー作成 Blog Config Locales / – app ├ models – blog – node.rb ├ views – blog – agents – nodes – page – index.html.erb └ controllers – blog – agents – nodes – page_controller.rb └ config – locales – blog – ja.yml └ routes – blog – routes.rb • routesにnodeを追記 SS::Application.routes.draw do … node "blog" do get "page/(index.:format)" => "public#index", cell: "nodes/page " end … end
  124. 124. 一覧フォルダー作成 / – app ├ models – blog – node.rb ├ views – blog – agents – nodes – page – index.html.erb └ controllers – blog – agents – nodes – page_controller.rb └ config – locales – blog – ja.yml └ routes – blog – routes.rb
  125. 125. 一覧フォルダー作成 管理画面から一覧フォルダーを作成してみます
  126. 126. まとめ • 新しいページ、アドオン、フォルダーを作りました • 既存のコードを変更せずにコンテンツを追加できます
  127. 127. 最後に 長い時間ありがとうございました! 是非SHIRASAGIをカスタマイズしてみてください!

×