Successfully reported this slideshow.
Your SlideShare is downloading. ×

シラサギハンズオン 東京

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 140 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to シラサギハンズオン 東京 (20)

Recently uploaded (20)

Advertisement

シラサギハンズオン 東京

  1. 1. Ruby/Rails/mongoDBで動作する中・大規模サイト向けCMS「シラサギ」のハンズオン
  2. 2. 登壇者 ウェブチップス 1. 野原 2. 中野 3. 伊藤
  3. 3. ハンズオンの狙い 1. シラサギの概要を理解する。 2. シラサギの仕組みを理解する。 3. シラサギの機能追加と機能拡張の方法を理解する。
  4. 4. ハンズオン 目次 1. シラサギの紹介 [10min] 2. ハンズオンの導入 [15min] 3. ハンズオン [60min] 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  5. 5. シラサギの紹介
  6. 6. 会社概要 会社名 設立 資本金 所在地 役員 株式会社ウェブチップス 2013年9月20日 500万円 〒770-0872 徳島県徳島市北沖洲三丁目6番58号 石本ビル202 代表取締役社長CEO 野原 直一 技術担当取締役CTO 谷沢 和寿 5名(役員含む) 2015年1月から6名に オープンソースソフトウェア開発事業 オープンソースを使った導入・カスタマイズ事業 オープンソースを使ったクラウドサービス事業 社員数 事業内容
  7. 7. 名称の由来 サギ科の鳥のうち、全身の羽毛が白いものを「シラサギ」と呼びます。 徳島県では1965年10月から「シラサギ」を県の鳥に指定しています。 サギ類は、他の種類のサギたちと一緒に巣を作り、繁殖するという特徴が あります。 その様子が、様々な企業と技術者でコミュニティを形成し、ソフトウェアを 開発していくというコンセプトと一致したためこの名称を採用しました。 「シラサギ」は、みんなで育てるCMSです。
  8. 8. MITライセンス 誰でも自由にカスタマイズできます。 誰でも自由にフォークできます。 拡張機能を公開するかどうかを自由に選べます。
  9. 9. Webアプリ開発プラットフォーム CMSですが、コアの設計は汎用SNSになっており、Webアプリ開発プラットフォーム として利用できます。 将来的にグループウェア、SNSなどの様々なアプリケーションの開発ができます。
  10. 10. モデルアドオン設計 下記をカプセル化して任意のコレクションに 取り付けられます。 ・DBのフィールド ・データ検証や保存ロジック ・編集画面 ・詳細画面 アドオンをうまく使うことで、モジュールの 肥大化を抑えられます。 結果、ソース管理が非常に楽になります。
  11. 11. MongoDB NoSQLであるMongoDBを採用し、高速化を 実現しています。 公開されているフォルダ・ページには、リレー ションによる関連付けはなく、それぞれがファ イル名(URL)を保持しています。 そのため、MongoDBの強みである前方一致 検索のパフォーマンスを最大限に引き出せ ます。そのため、任意のフォルダ内の検索も 非常に高速かつ効率的に行えます。
  12. 12. 動作環境 Internet Explorer (ver.8 以上)、Firefox、Chrome、Safariの最新バージョンを想定しています。 対象 バージョンなど OS CentOS 6.5 64bit Webサーバ nginx + unicorn DBシステム MongoDB Ruby 2.1.2 Ruby on Rails 4.1.4
  13. 13. 初期データ 市町村向けの自治体サンプルデータ、企業サンプル データを初期データとして提供しています。 インストール時に初期データを切り替えられます。 今後も様々なサンプルデータを提供していきます。 ・子育てサイトサンプル ・大学サンプル ・県向け自治体サンプル など
  14. 14. 初期データを使ったホームページ作成(1) 初期データ「企業サンプル」 企業向けホームページ ロゴ 写真 色 レイアウト を調整
  15. 15. 初期データを使ったホームページ作成(2) 初期データ「自治体サンプル」 自治体向けホームページ ロゴ 写真 色 レイアウト を調整
  16. 16. 拡張プラグイン 独自の拡張プラグイン機能「egg(エッグ)」があります。 モジュールとして追加したコンテンツのプラグイン化、デプロイが行えます。
  17. 17. 地図データベース機能 表示項目 検索条件 などを調整 バリアフリーマップ 拡張プラグインを使ったウェブシステム開発
  18. 18. マルチテナント対応 同一データベース同一スキーマ方式を採用しています。 これにより管理者の運用コストを軽減できます。
  19. 19. マルチテナントを使ったサービス提供 シラサギのクラウドサービスを立ち上げ、同じコンテンツサイトを横並びで構築していく。 例:徳島県オープンデータポータルサイトと各市町村オープンデータサイト
  20. 20. Ajaxレイアウト(バージョン0.5.0でAjaxパーツに) 即時反映と低負荷を実現します。 ページは、検索クローラーを想定して静的HTMLファイルを書き出します。 レイアウト、記事リストなどのパーツは、動的表示となります。
  21. 21. マルチデバイス対応 公開画面及び管理画面は、PC、スマホ、携帯、 タブレットなど様々なデバイスに対応。
  22. 22. GitHubによる公開開発 既にシラサギの開発に共感してくれている個人のエンジニアの方から、 プルリクエスト(開発したプログラムを取り込む依頼)を定期的にいただいています。
  23. 23. シラサギ公式サイト 新着情報 リリースノート よくある質問 ダウンロード オンラインデモ 導入事例 開発情報 など http://ss-proj.org/
  24. 24. シラサギプロジェクト開発コミュニティ シラサギプロジェクトの開発コミュ ニティをfacebook上の公開グルー プとして立ち上げています。 リリース詳細や他のエンジニアの 方からのレポートなども掲載され ていますので、是非ご参加くださ い。
  25. 25. ハンズオンの導入
  26. 26. ハンズオンの狙い 1. シラサギの概要を理解する。 2. シラサギの仕組みを理解する。 3. シラサギの機能追加と機能拡張の方法を理解する。
  27. 27. 導入 管理画面 1. メニューやコンテキストメニューの操作方法 2. フォルダ 3. レイアウト 4. パーツ 5. ページ 6. アドオン
  28. 28. シラサギデモ http://ss-proj.org/download/demo.html Googleで「shirasagi demo」を検索してもOK
  29. 29. 公開画面と管理画面
  30. 30. 管理画面 – システム管理
  31. 31. 管理画面 – サイト管理
  32. 32. 管理画面 – フォルダ一覧
  33. 33. 管理画面 – フォルダ詳細
  34. 34. 管理画面 – レイアウト一覧
  35. 35. 管理画面 – レイアウト詳細
  36. 36. 管理画面 – パーツ
  37. 37. 管理画面 – 記事一覧
  38. 38. 管理画面 – 記事詳細
  39. 39. Rails モデルクラスでのアドオン class Article::Page include Cms::Page::Model include Cms::Addon::Meta include Cms::Addon::Body include Cms::Addon::File include Cms::Addon::Release include Cms::Addon::ReleasePlan include Cms::Addon::RelatedPage include Category::Addon::Category include Event::Addon::Date include Map::Addon::Page include Workflow::Addon::Approver include Contact::Addon::Page include History::Addon::Backup …
  40. 40. 振り返り 管理画面 1. メニューやコンテキストメニューの操作方法 2. フォルダ – イベントカレンダーフォルダ、記事フォルダ、... 3. レイアウト 4. パーツ 5. ページ – イベントページ、記事ページ、… 6. アドオン
  41. 41. ハンズオン環境構築
  42. 42. ハンズオンの環境構築 環境構築 1. VirtualBox インストール 2. Vagrant インストール 3. Windows の方だけ 1. git のインストール 2. Tera Term インストール 4. シラサギ・ハンズオン環境のインストール
  43. 43. VirtualBox & Vagrant インストール ■VirtualBox https://www.virtualbox.org/wiki/Downloads Googleで「virtualbox download」を検索してもOK ■Vagrant https://www.vagrantup.com/downloads.html Googleで「vagrant download」を検索してもOK
  44. 44. Windows の方だけ ■Git https://msysgit.github.io/ Googleで「windows git」を検索してもOK ■Tera Term http://sourceforge.jp/projects/ttssh2/releases/ Googleで「teraterm download」を検索してもOK
  45. 45. ハンズオン用Github https://github.com/itowtips/ss-handson Googleで「github itowtips」を検索してもOK SSID: XXXXXXXX PASS: xxxxxxxx
  46. 46. ハンズオン用Github https://github.com/itowtips/ss-handson Vagrantfile をダウンロード
  47. 47. ハンズオン環境の起動 > cd Vagrantfile をダウンロードしたディレクトリ > vagrant up
  48. 48. ハンズオン環境へログイン ■Windowsの方 IPアドレス: localhost ポート: 2222 User: vagrant Password: vagrant ■Mac, Linux の方 $ vagrant ssh
  49. 49. シラサギハンズオン
  50. 50. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  51. 51. 開発サンプル 紹介 SHIRASAGI Wiki https://github.com/shirasagi/shirasagi/wiki 開発サンプル:ブログページ https://github.com/shirasagi/shirasagi/wiki/開発サンプル:ブログページ 今回のハンズオンで使用するリポジトリ、コマンド集などあります https://github.com/itowtips/ss-handson ※これを見ながら進めていきます
  52. 52. 開発サンプル 紹介 シラサギWiki:開発サンプルブログページ シラサギにはページを作成し公開できる機能がいくつかあります • 記事ページ • 固定ページ • イベントページ • FAQページ
  53. 53. 開発サンプル 紹介 シラサギWiki:開発サンプルブログページ シラサギにはページを作成し公開できる機能がいくつかあります • 記事ページ • 固定ページ • イベントページ • FAQページ • ブログページ ← 今回はこれを追加します
  54. 54. 開発サンプル 紹介 シラサギWiki:開発サンプルブログページ 今回の開発の流れ 0. 開発用のシラサギインストール シラサギのインストール、デモデータの登録ができるようになります 1. ブログページ作成 ページの追加を行います 独自のページが作れるようになります 2. 天気入力フォーム作成 アドオンの追加を行います 入力フォームの拡張ができるようになります 3. フォルダーの追加 作成したページ用一覧フォルダーの追加を行います 新しいタイプのフォルダー作成ができるようになります
  55. 55. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  56. 56. 準備 前提知識 シラサギで使っている技術 • Ruby & Ruby On Rails • Javascript & CoffeeScript • Css & Scss • Git • MongoDB
  57. 57. 準備 前提知識 シラサギで使っている技術 • Ruby & Ruby On Rails • Javascript & CoffeeScript • Css & Scss • Git • MongoDB
  58. 58. 準備 Gitとソースコード シラサギの動く環境がある方はGitHubからソースコードを取得してください #cd $HOME #git clone https://github.com/itowtips/ss-handson sample #cd sample
  59. 59. 準備 Gitとソースコード 必要な設定ファイル(各種ymlとunicorn.rb)をコピーします #cd $HOME #git clone https://github.com/itowtips/ss-handson sample #cd sample #cp config/samples/* config/
  60. 60. 準備 Gitとソースコード bundle install #cd $HOME #git clone https://github.com/itowtips/ss-handson sample #cd sample #cp config/samples/* config/ #bundle install
  61. 61. 準備 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
  62. 62. 準備 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
  63. 63. 準備 RAILS_ENV # vi config/environment.yml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # default environment RAILS_ENV: production - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Railsをdevelopmentモードに
  64. 64. 準備 RAILS_ENV # vi config/environment.yml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # default environment RAILS_ENV: development - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Railsをdevelopmentモードに
  65. 65. 準備 サンプルデータ #rake db:create_indexes MongoDB インデックス作成
  66. 66. 準備 サンプルデータ #rake db:create_indexes #rake ss:create_user data='{ name: "システム管理者", email: "sys@example.jp", password: "pass" }' システム管理者作成
  67. 67. 準備 サンプルデータ #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: "ドメイン:3000" }' サイト作成 ローカル環境のIP 例) 192.168.182.128
  68. 68. 準備 サンプルデータ #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: "ドメイン:3000" }' #rake db:seed name=users site=www サンプルユーザ&グループ作成
  69. 69. 準備 サンプルデータ #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: "ドメイン:3000" }' #rake db:seed name=users site=www #rake db:seed name=demo site=www 自治体サンプルデータ投入
  70. 70. 準備 サンプルデータ #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: "ドメイン:3000" }' #rake db:seed name=users site=www #rake db:seed name=demo site=www #rake unicorn:start unicorn起動
  71. 71. 準備 確認 http://ドメイン:3000/
  72. 72. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  73. 73. ブログページ作成 シラサギWiki:ブログページ作成
  74. 74. ブログページ作成 シラサギWiki:ブログページ作成 ※管理画面でブログページが作成できるようになります。
  75. 75. ブログページ作成 シラサギWiki:ブログページ作成 ※公開画面での表示。 まずは既存のページを参考に、同様のものを作成します。
  76. 76. ブログページ作成 シラサギの構成 / – app ├ models ├ views └ controllers └ config – locales └ routes ソースコードをエディタで開いてみてください
  77. 77. ブログページ作成 シラサギの構成 / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • 公開画面、管理画面がある • 再利用可能なプログラムがある • 静的HTML書き出し機能がある …
  78. 78. ブログページ作成 シラサギの構成 / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • routes • addon • agents
  79. 79. ブログページ作成 routes / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • routes • addon • agents
  80. 80. / – app ├ models ├ views └ controllers └ config – locales └ routes config/route.rb config/route/モジュール名/routes.rb ブログページ作成 routes
  81. 81. / – app ├ models ├ views └ controllers └ config – locales └ routes config/route.rb config/route/article/routes.rb ブログページ作成 routes
  82. 82. / – app ├ models ├ views └ controllers └ config – locales └ routes config/route.rb config/route/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 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
  83. 83. / – app ├ models ├ views └ controllers └ config – locales └ routes config/route.rb config/route/article/routes.rb ルーティング追加ブロック 管理画面 content 公開画面 node, page, part 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 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
  84. 84. ルーティングを確認してみます #rake routes | grep article ブログページ作成 routes
  85. 85. / – app ├ models ├ views └ controllers └ config – locales └ routes config/route.rb config/route/article/routes.rb ルーティング追加ブロック 管理画面 content 公開画面 node, page, part 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 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 cell: " pages/page " とは?? ブログページ作成 routes
  86. 86. ブログページ作成 agents / – app ├ models ├ views └ controllers └ config – locales └ routes シラサギ独特な構成 • routes • addon • agents
  87. 87. • agents • コントローラーからコントローラーを呼び出す仕組み • シラサギ独自実装 • lib/ss/agent.rb • 利用箇所 • 公開側のコントローラー (cms/public_controller) 公開側(利用者)のアクセスを各コンテンツに振り分ける 例)http://ドメイン/docs/page.html → 記事ページ http://ドメイン/calendar/ → イベントカレンダー • ページ書き出し ブログページ作成 agents
  88. 88. 公開側ルーティング config/routes/cms/routes_end.rb#L73-78 ※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
  89. 89. 公開側ルーティング config/routes/cms/routes_end.rb#L73-78 ※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
  90. 90. 公開側ルーティング config/routes/cms/routes_end.rb#L73-78 ※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
  91. 91. 公開側ルーティング config/routes/cms/routes_end.rb#L73-78 ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス http://ドメイン/docs/page.html Controller cms/public#index → agents 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
  92. 92. 公開側ルーティング config/routes/cms/routes_end.rb#L73-78 ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス http://ドメイン/docs/page.html Controller cms/public#index → agents → 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
  93. 93. 公開側ルーティング config/routes/cms/routes_end.rb#L73-78 ※glob ルーティング(Route Globbing) 公開画面"記事"にアクセス http://ドメイン/docs/page.html Controller cms/public#index → agents → 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 } cell: " pages/page " ブログページ作成 agents
  94. 94. ブログページ作成 / – app ├ models ├ views └ controllers └ config – locales └ routes ブログモジュールを追加していきます。
  95. 95. ブログページ作成 / – app ├ models – blog ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog ブログモジュールを追加していきます。
  96. 96. ブログページ作成 / – app ├ models – blog ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog → それぞれにソースコードを追加していきます。
  97. 97. ブログページ作成 / – 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
  98. 98. ブログページ作成 Blog Page Model / – app ├ models – blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • include Cms::Page::Model • app/models/concerns/cms/node/model.rb class Blog::Page include Cms::Page::Model 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
  99. 99. ブログページ作成 Blog Page Model / – app ├ models – blog – page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • 使用するAddonを追加 • 本文、添付ファイル等々 class Blog::Page include Cms::Page::Model 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
  100. 100. ブログページ作成 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::Page::Model 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 "
  101. 101. ブログページ作成 Blog Page Initializer / – app ├ models – blog – page.rb └ initializer.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • "blog/page" content をpluginに登録 module Blog class Initializer Cms::Node.plugin "blog/page" end end
  102. 102. ブログページ作成 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" %>
  103. 103. ブログページ作成 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 %>
  104. 104. ブログページ作成 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
  105. 105. ブログページ作成 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
  106. 106. ブログページ作成 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 " ブログ/ブログページ
  107. 107. ブログページ作成 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 • ブログモジュールのroutesを追加 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
  108. 108. ブログページ作成 確認 作成したブログページを使ってみます。 1. 適当なフォルダー下でモジュールをブログに切り替え 2. 新規作成 → ブログページが作成できます。
  109. 109. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo
  110. 110. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo #use ss_sample
  111. 111. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo #use ss_sample #db.cms_pages.find({route: "blog/page"})
  112. 112. ブログページ作成 作成したブログページのMongoドキュメント(レコード)をチェックしてみます。 #mongo #use ss_sample #db.cms_pages.find({route: "blog/page"}) { "_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, …
  113. 113. ブログページ作成 / – 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
  114. 114. ブログページ作成 ここまでで新しいページが作成できるようになりました。 しかし、これでは記事ページと変わらないので.. → 入力フォームをカスタマイズします。 #git checkout -b sample-blog-addon origin/sample-blog-addon #rake unicorn:restart
  115. 115. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  116. 116. 天気入力フォーム作成 シラサギWiki:天気入力フォーム作成
  117. 117. 天気入力フォーム作成 シラサギWiki:天気入力フォーム作成 ※ページのアドオンを追加し入力フォームを追加します。
  118. 118. 天気入力フォーム作成 シラサギWiki:天気入力フォーム作成 ※公開側では入力した天気と日付を表示します。
  119. 119. 天気入力フォーム作成 Blog Weather Addon / – app ├ models – blog – addon.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • 天気アドオンを追加 module Blog::Addon module Weather extend ActiveSupport::Concern extend SS::Addon set_order 190 included do field :weather, type: String permit_params :weather public def weather_options [ ["晴れ", "sunny"], ["曇り", "cloudy"], ["雨", "rain"], ["雪", "snow"], ] end end end end addonの表示順 fieldを定義
  120. 120. 天気入力フォーム作成 Blog Page Model / – app ├ models – blog – addon.rb └ page.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog class Blog::Page include Cms::Page::Model 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
  121. 121. 天気入力フォーム作成 Blog Weather Addon Index View / – app ├ models – blog – addon.rb └ page.rb ├ views – blog – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog └ routes – blog • アドオンのviewを作成
  122. 122. 天気入力フォーム作成 Blog Weather Addon Index View / – app ├ models – blog – addon.rb └ page.rb ├ views – blog – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog └ routes – blog • アドオンのviewを作成 管理画面入力フォーム 管理画面表示 公開画面表示
  123. 123. 天気入力フォーム作成 Blog Config Locales / – app ├ models – blog – addon.rb └ page.rb ├ views – blog – 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: 天気
  124. 124. 天気入力フォーム作成 管理画面から"今日の天気"を入力してみます
  125. 125. 天気入力フォーム作成 / – app ├ models – blog – addon.rb └ page.rb ├ views – blog – addons – weather – _form.html.erb ├ _show.html.rb └ controllers – blog └ index.html.erb └ config – locales – blog – ja.yml └ routes – blog
  126. 126. 天気入力フォーム作成 練習 1. 天気マークを追加してみてください (雷注意報、にわか雨、お花見日和… 2. 別の入力フォームを作ってみてください (別のアドオンを作成 3. 修正したコードをローカルでcommitしてみてください (おまけ
  127. 127. 天気入力フォーム作成 独自の入力フォームを作成しました。 最後にフォルダーの作成を説明します。 #git checkout -b sample-blog-node origin/sample-blog-node #rake unicorn:restart
  128. 128. ハンズオン 目次 1. 開発サンプル紹介 2. 準備 3. ブログページ作成 4. 天気入力フォーム作成 5. 一覧フォルダー作成
  129. 129. 一覧フォルダー作成 シラサギWiki:一覧フォルダー作成
  130. 130. 一覧フォルダー作成 ※「フォルダー属性」ブログページリストが作成できるようになります シラサギWiki:一覧フォルダー作成
  131. 131. 一覧フォルダー作成 ※公開側のページ一覧を変更し独自のものを作成します シラサギWiki:一覧フォルダー作成
  132. 132. 一覧フォルダー作成 Blog Node Model / – app ├ models – blog – node.rb ├ views – blog └ controllers – blog └ config – locales – blog └ routes – blog • ブログ一覧フォルダーを作成 module Blog::Node class Base include Cms::Node::Model default_scope ->{ where(route: /^blog//) } end class Page include Cms::Node::Model include Cms::Addon::PageList default_scope ->{ where(route: "blog/page") } end end
  133. 133. 一覧フォルダー作成 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
  134. 134. 一覧フォルダー作成 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
  135. 135. 一覧フォルダー作成 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: ブログページリスト …
  136. 136. 一覧フォルダー作成 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
  137. 137. 一覧フォルダー作成 / – 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
  138. 138. 一覧フォルダー作成 管理画面から一覧フォルダーを作成してみます
  139. 139. まとめ • 新しいページ、アドオン、フォルダーを作りました • 既存のコードを変更せずにコンテンツを追加できます
  140. 140. 最後に 長い時間ありがとうございました! 是非SHIRASAGIをカスタマイズしてみてください!

Editor's Notes

  • ・皆様、忙しい中お集まりいただきありがとうございます。

    ・このような場を設けていただいた、 山陰ITレーダー編集部様ならびに関係者様の皆様、ありがとうございます。
  • 野原から、私、中野にかわりまして、ハンズオンに取り掛かる前に、導入として、シラサギの概要と操作方法を簡単ではありますが、説明させていいただきます。
  • 本日のハンズオンを理解して、次の案件に、シラサギを採用していただければと思います。
  • 導入では、公開画面、管理画面、メニューの操作方法、コンテキストメニュー、フォルダ、ページ、レイアウト、パーツ、アドオンなんかについて解説していきます。
  • ・ハンズオンの導入では、シラサギのデモを用いて、シラサギが持つ機能の概要を説明していきます。

    ・皆様、ブラウザで、この URL を開いてください。
  • ・自治体サンプルと、企業サンプルの 2 つのデモを提供しています。
    ・これらは、広く一般に公開しているので、公開画面と呼びます。

    ・下の方にあるのが管理画面で、
     管理画面では記事の投稿や削除などの機能が利用できます。
    ・シラサギは、マルチテナントをサポートしているので、公開画面は 2 つありますが、管理画面は 1 つしかありません。
    ・管理画面は、ユーザIDとパスワードでの承認が必要で、今回は、左にあるシステム管理者のアカウントを使用して、説明を進めさせていただきます。
  • ・管理画面がどんな機能を持つか見て行きたいと思います。
    ・管理画面を表示します。
     ログインは、画面の通り sys@example.jp / pass です。
    ・ログインすると表示されるのは、システム全体を管理する画面です。
    ・左側にはシステム管理用のメニューが並んでいます。
     今回は時間の都合上、説明は割愛させて頂きます。

    ・右側には管理できるサイトの一覧が表示されています。
     デモなので、 画面に表示されているのは 2 つしかりあせんが、「サイト」をクリックして新規追加することができます。

    ・なお、左側のメニューですが、シラサギでは「ナビ ビュー」と呼んでいます。

    ・次にサイト管理にどのような機能があるかを見て行きたいと思いますので、「自治体サンプル」をクリックしてください。
  • ・左側のナビビューには、サイトを管理するためのメニューが表示されています。
    ・最初に選択されている「コンテンツ」は、よく使用する機能へのショートカットです。
    ・フォルダ、固定ページ、パーツ、レイアウトなどの管理メニューがあります。

    ・CMS の主役といえば「ページ」ですが、
     「フォルダー」を使用して階層で構造でページを管理することで管理しやすくしています。

    ・どの企業様もそうですが、トップページには非常に凝った専用のページを配置することが多いです。
     そのような固定の URL で表示する一枚物のページを「固定ページ」で管理することができます。

    ・シラサギでは、様々なページで繰り返し出現する再利用可能な部分を「パーツ」という部品にして管理することができます。
     パーツは、レイアウトに組み込んで使用します。

    ・「レイアウト」とは、ページ全体をどのように構成するかを定義したもので、
     ロゴの位置、ナビゲーションの位置、メニューの位置、本文の位置、フッターの位置などを定義したものです。

    ・フォルダ書き出し、ページ書き出しは、フォルダやページを HTML に変換し、ローカルに保存します。
     ローカルに HTML として書き出しておくことで、ユーザからのアクセスを効率よくさばくことができるようになります。
     (x_sendfile という機能を利用して apache や nginx が直接ファイルを応答することができるようになります)。
  • ・フォルダがどうなっているかを見て行きたいと思いますので、ナビメニューの「フォルダー」をクリックしてください。

    ・左のメニューには、フォルダーを新規作成する「新規作成」があります。
    ・右にはフォルダー一覧が表示されています。

    ・フォルダ一覧ですが、ちょっと操作が特殊です。
    ・タイトルをクリックすると、フォルダ内に登録されている項目が見えます。
    ・フォルダ外をクリックすると、コンテキストメニューが表示されます。

    ・一覧の左から、「タイトル」「フォルダー名」「モジュール」があります。

    ・まず、「モジュール」とはフォルダに割り当てられている機能のことで、
     イベント管理する「イベントカレンダー」フォルダには、「カレンダー」モジュールが割り当てられています。
     記事を管理する「記事」フォルダには「記事」モジュール割り当てられています。

    ・シラサギの「フォルダー」はページを階層構造で管理する以外の機能もあり、
     CMS では、一覧やイベントカレンダーなどのページ以外のコンテンツがあるのが普通です。
     これらを「フォルダー」で定義します。

    ・フォルダもコンテンツの一部であると説明しましたが、モジュールとはコンテンツの種類とみなすこともできます。

    ・「フォルダー名」は、公開画面の URL のパスと対応しています。SEO 的に重要な部分ですので、フォルダを新規に作成する場合は十分検討してください。
     シラサギでは、フォルダーは「フォルダ名」を持ち、ページは「ファイル名」をもち、それぞれ URL のパスと対応しています。

    ・フォルダがコンテツの一部だと言いました。これを確認するために「記事」の余白をクリックし、表示されたコンテキストメニューから「公開画面を見る」をクリックしてください。
    ・記事ページの一覧が表示されました。
    ・では、この画面がどのような構成であるかを確認してみたいと思いますので、管理画面に戻って、余白をクリックし「詳細を見る」をクリックしてください。
  • ・フォルダの詳細が表示されました。

    ・左側に、記事フォルダを管理するためのメニューがあります。
    ・その下にアドオンとありますが、これは後ほど解説します。

    ・右側には大きく、記事フォルダの構成が表示されています。

    ・時間の都合上、注目して欲しいところだけ解説しますと、記事フォルダは、上部HTML、ループHTML、下部HTML の 3 つの設定を持つことができ、
     ちょうど、公開画面で記事一覧に相当する部分は、ループ HTML にあたります。

    ・公開画面の繰り返し以外の部分はどこで設定されているかというと、「レイアウト」に設定されている「記事レイアウト」で設定されています。

    ・「記事レイアウト」をみてみましょう。
    ナビメニューから、レイアウトをクリックしてみてください。


  • ・レイアウトが表示されました。

    ・画面左には先ほどみたフォルダがあり、画面右にはレイアウト一覧が表示されています。

    ・レイアウトにフォルダがありますが、弊社では、1) レイアウトの数が少ないこと、2) フォルダの下に置くと逆に管理しにくいことから、レイアウトのフォルダは使用していません。

    ・レイアウトは、厳密に言えばコンテンツではないんですが、管理しやすいようにファイル名を持っています。

    ・先ほど見た「記事フォルダ」に設定されている「記事レイアウト」を確認してみましょう。
  • ・記事レイアウトが表示されました。

    ・左側にはレイアウトを管理するためのメニューが有り、その下にはアドオンがあります。
     アドオンについては後ほど説明します。

    ・右側には、レイアウト名、ファイル名、肝心の HTML があります。

    ・シラサギではレイアウトを HTML で書きますが、少し違うのは </ part …/> という部分です。

    ・様々なページで繰り返し出現する再利用可能な部分を「パーツ」という部品にし、そのパーツを組み込んでいます。

    ・他、重要なのは yield という箇所です。
     Ruby プログラマならおなじみですね。そうです。Ruby と同じ yield です。
    ・yield が指定された箇所に、先ほどみた、上部 HTML、ループ HTML、下部 HTML が展開されます。
  • ・左のメニューから「パーツ」をクリックしてみましょう(上図)。
    ・様々なパーツを標準で提供しています。
    ・「パーツ属性」に注目してください。
    ・「HTML記述」とあるパーツを開いてみると、パーツの内容が HTML で記述されています。
    ・「HTML記述」以外のパーツは、Ruby(Rails)のプログラムで書かれています。
  • ・時間も残り少なくなってきましたので、CMS の主役である「記事ページ」を見て行きたいと思います。
    ・フォルダーに戻り、「記事フォルダー」の中身を表示してみてください。

    ・皆様、もう見慣れましたね。
     左には管理するためのメニューが有り、右側には記事一覧が表示されています。

    ・記事は、タイトル、ファイル名などの情報を持っており、フォルダーのところでも解説しましたが、
     記事のファイル名は、 URL のパスに対応しており、SEO 的に非常に重要です。

    ・デモなので、SEO 的に全くダメな連番がついていますが、
     皆様がサイトを構築する際は、SEO を考えて適切なファイル名をつけてください。

    ・なお某 CMS では、記事のパスが固定されておらず、SEO 的なチューニングがしにくかったんですが、シラサギでは大丈夫です。
  • ・「転居届」をみてみましょう。
    ・もうみなさん見慣れましたね。左側には記事を管理するためのメニューが有り、下にアドオンがあります。
     アドオンの解説はこの後すぐです。

    ・「本文」には、記事の内容が設定されています。
    ・記事ページを公開画面で確認してみましょう。
    ・本文に設定されている内容と同じものが表示されています。
    ・本文以外の「ナビゲーションメニュー」や「いいね」ボタンは、先程と同様、記事ページに設定されているレイアウトで表示されています。
  • ・お待ちかね、いよいよアドオンを解説する時がやって来ました。

    ・アドオンの例として、Article::Page をお見せしたいと思います。
     シラサギでは、このようにアドオンを include することで、モデルクラスを簡単に拡張し、機能を追加することができます。

    ・少し補足しますと、シラサギでは、ドキュメント指向データベースの MongoDB をバックエンドに採用しています。

    ・MongoDB というのは、RDB のように事前にテーブル定義を決めなくてもいいんですね。

    ・シラサギでは、目的に応じたいろんな種類のページが有り、ページごとに属性が異なり、様々なモデルが存在しますが、
     全てのページは、”cms_pages” というテーブル(MongoDB ではコレクションと呼びますが)、に入っています。

    ・シラサギが、このようにアドオンを include することで簡単に機能を追加できたり、様々な種類のページを “cms_pages” という単一のテーブルに格納できるのは、
     MongoDB をフル活用しているからです。
  • ・導入として、次の項目を見てきました。

    ・以上、簡単ではございますが解説を終わり、ハンズオンに入りたいと思います。

    ・ハンズ・オンでは、ローカルにインストールされた Ruby 開発環境を使用します。
     もし、VM などの準備が必要でしたら、ご準備の方をお願いします。

    ・では、担当の伊藤に交代しますので、少々お待ちください。
  • ・ノートパソコンを持ってないという方。
    その方は、引き続き前方のデモを御覧ください。

    ・ノートパソコンを持っているけど、シラサギ・Ruby の環境がないという方?

    ・今、手を上げている方の中で、Vagrant をインストールしても良い・あるいは既に Vagrant を持っているという方、いらっしゃいますか?

  • ・ハンズオンを開始する前に、VirtualBox や Vagrant のインストール、および、シラサギ・ハンズオン環境のインストールをお手伝いすることができます。

    ・この中で、ノートパソコンを持ってないという方。
    その方は、引き続き前方のデモを御覧ください。

    ・ノートパソコンを持っているけど、シラサギ・Ruby の環境がないという方?

    ・今、手を上げている方の中で、Vagrant をインストールしても良い・あるいは既に Vagrant を持っているという方、いらっしゃいますか?


  • ・会場の wi-fi 環境があまり速くないので、希望者に USB メモリを回すことができます。

    ・ご希望の方、いらっしゃいますか?

    ・全員でダウンロードを始めてしまうと、wi-fiルータが過負荷になってネットワークがダウンする可能性もありますので、
     ぜひ、USBメモリをご利用ください。
  • ・会場の wi-fi 環境があまり速くないので、希望者に USB メモリを回すことができます。

    ・ご希望の方、いらっしゃいますか?

    ・全員でダウンロードを始めてしまうと、wi-fiルータが過負荷になってネットワークがダウンする可能性もありますので、
     ぜひ、USBメモリをご利用ください。
  • DOS プロンプトを起動し、先ほど作成しいたディレクトリで、上記のコマンドを実行。
  • Windows の方は、Teraterm を起動し、上記のサーバにログインしてみましょう。

    Mac, Linux の方は、コンソールから vagrant ssh を実行してください。
  • では、実際にソースコードを追加して開発を行っていきます。
  • 5[min]

×