concrete5 harvest festival資料

1. concrete5 harvest festival
環境構築とconcrete5の操作紹介

2. アジェンダ
1.目的
2.concrete5における環境構築
3.concrete5インストール
4.concrete5の基本的な使い方を学ぼう
5.質疑応答

3. 1.目的と概要説明
目的：
・concrete5というCMSでどんなことができるかを
手持ちのPC環境に入れて試してみる

4. 2.concrete5における環境構築
必要環境
・MySQL 5.1以上
・PHP5.4以上
・Apache 2.4以上

5. 2.concrete5における環境構築
検証環境
どんな構築においても検証する環境が必要
そこでよく使われるツールを紹介します。
・MAMP
WindowsやMacでapacheベースのwebサーバ
をたてることができる。

6. 2.concrete5における環境構築
実際にconcrete5を入れるためのMAMP環境
またはMAMPP環境を入れてみましょう
Windowsの手順
1.MAMPをダウンロードする
2.MAMPをインストールする
3.MｙSQLのユーザを作る（空のデータベースも作成）
4. concrete5のインストール

7. 2.concrete5における環境構築
1.MAMPを以下のサイトからダウンロード
https://www.mamp.info/en/

8. 2.concrete5における環境構築
2.MAMPをインストール
Nextを選択

9. 2.concrete5における環境構築
2.MAMPをインストール
MAMP PROのチェックをはずしNextを選択

10. 2.concrete5における環境構築
2.MAMPをインストール
Nextを選択

11. 2.concrete5における環境構築
2.MAMPをインストール
Nextを選択

12. 2.concrete5における環境構築
1.MAMPをインストール
Nextを選択

13. 2.concrete5における環境構築
2.MAMPをインストール
インストール

14. 2.concrete5における環境構築
2.MAMPをインストール
インストール完了。

15. 2.concrete5における環境構築
1.MAMPをインストール
ApacheとMySQLを起動

16. 2.concrete5における環境構築
3.MｙSQLのユーザを作る
Phpadminを起動する。

17. 2.concrete5における環境構築
3.MｙSQLのユーザを作る
サーバ接続の照合順序をut8mb4_general_ciに設定

18. 2.concrete5における環境構築
3.MｙSQLのユーザを作る
ユーザ ユーザを追加するを選択。

19. 2.concrete5における環境構築
3.MｙSQLのユーザを作る
枠の箇所のユーザ情報を入れる

20. 2.concrete5における環境構築
3.MｙSQLのユーザを作る
ユーザ情報を入れたら実行を押す。

21. 2.concrete5における環境構築
5. concrete5のファイルをC:MAMPhtdocsに入れる。
以下のサイトからファイルをダウンロードして
解凍。
http://www.concrete5.org/get-started
解凍したものをC:MAMPhtdocsに入れる。

22. 2.concrete5における環境構築
5. concrete5のインストール
以下のURLからファイルをダウンロードして解凍。
http://www.concrete5.org/get-started
解凍したものをC:MAMPhtdocsに入れる。

23. 2.concrete5における環境構築
5. concrete5のインストール
ブラウザを立ち上げて、concrete5を起動
http://localhost/concrete5のpath
concrete5のpathとは
htdocsに保存した時のフォルダ名

24. 2.concrete5における環境構築
5. concrete5のインストール
日本語を選択

25. 2.concrete5における環境構築
5. concrete5のインストール
必須項目をチェック。問題なければインストール続ける

26. 2.concrete5における環境構築
5. concrete5のインストール
サイト情報を入れる

27. 2.concrete5における環境構築
5. concrete5のインストール
サイト情報を入れる。入れ終わったらインストール

28. 2.concrete5における環境構築
5. concrete5のインストール
インストール開始15分くらい待つ

29. 2.concrete5における環境構築
5. concrete5のインストール
インストール完了。サイトを開くでサイト構築開始

30. 2.concrete5における環境構築
5. concrete5のインストール
管理画面-システムと設定を開く

31. 2.concrete5における環境構築
5. concrete5のインストール
基本ーアクセシビティを開く

32. 2.concrete5における環境構築
5. concrete5のインストール
チェックボックスをチェック入れる

33. 4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
まずは、以下のURLからファイルをダウンロードする。
https://github.com/concrete5japan/sakan

34. 4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
packages/sakanのファイルを
concrete5をインストールしたpackages配下に
フォルダーごといれる

35. 4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
管理画面
Concrete5拡張
機能追加
インストール
を押す

36. 4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
サイトコンテンツ
をリセットします
にチェックを入れて
インストールを押す

37. 4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanがインストールされました

38. 4.concrete5の基本的な使い方を学ぼう
基本的なお作法としては
新規を押す
↓
ブロックを配置する
↓
記事を書く
↓
編集モードを押す

39. 4.concrete5の基本的な使い方を学ぼう
レイアウトの編集
ブロックのレイアウトを変えるには

40. 4.concrete5の基本的な使い方を学ぼう
レイアウトの編集
ブロックのレイアウトを変えるには

41. 4.concrete5の基本的な使い方を学ぼう
レイアウトの編集
ブロックのレイアウトを変えるには

42. 4.concrete5の基本的な使い方を学ぼう
またホームページのデザインを変えるには
設定-デザイン-カスタマイズで
プリセットを選択
プリセットには豊富なデザインの
パターンがあるのでそれを
使用することによりデザインを変えることができる

43. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
記事-その名のとおりWebページに記事を書くための
ブロックです。

44. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
ファイル-ファイルを貼り付けるためのブロックです。

45. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
HTML-HTMLのソースのみを書く場合のブロックです。

46. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
特色-アイコンが選べてタイトルとして使いやすい
ブロックです。

47. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
水平線-見栄えを良くするため水平線を入れるときに
使用するブロックです。

48. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
画像-画像を貼り付けるためのブロックです。
ブロックごとにサイズを変更して保存することが可能

49. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
オートナビ-webページ固有のメニューを自動で
作成してくれるブロック

50. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
日付ナビ-日付指定の記事を書くブロック

51. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
FAQ-お問い合わせを作成するブロック

52. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
ページリスト-更新履歴を書くのに最適なブロック

53. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
ページタイトル-ページタイトルを書くのに最適なブロッ
ク

54. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
RSS表示-ほかのブログサイトからブログの記事を見
見込むのに最適なブロック

55. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
タグ-ページにタグを埋め込むのに最適なブロック

56. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
トピックリスト-最新の記事を自動的に表示するのに最
適なブロック

57. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
外部フォーム-外部のフォームを取り込むのに最適な
ブロック

58. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
外部フォーム-外部のフォームを取り込むのに最適な
ブロック

59. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
フォーム-オリジナルのお問い合わせフォームを作るの
に最適なブロック

60. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
コメント欄-記事に対してのコメントを残すのに最適なブ
ロック

61. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
このページを…-ページをシェアするのに最適なブロッ
ク

62. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ソーシャルリンク-SNSにシェアするのに最適なブロッ
ク

63. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
紹介-紹介文を作成するのに最適なブロック

64. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ソーシャルリンク-SNSにシェアするのに最適なブロッ
ク

65. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
Googleマップ-地名を指定するだけで地図が貼れるブ
ロック

66. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
画像スライダー-トップページに画像を定期的にスライ
ダーされるブロックを張ることができる

67. 4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
Yotubeビデオ-yotubeのurlを書くだけでyoutbe動画が
貼れる

68. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
サイトマップ
Webページをツリー状
に確認することができる。

69. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
ファイル
画像やドキュメントを管理できる

70. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
メンバー
記事を編集する別のメンバを
管理できる

71. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
レポート
フォームのブロックを作成した場合
そのログが見れる

72. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
ページとテーマ
テーマを入手や作成した場合
ここから選ぶことができる

73. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
コメント欄
コメント欄を使用した場合
ここからログが見れる

74. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
ワークフロー
複数のメンバーで編集する場合
タスク管理ができる

75. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
スタックとブロック
スタックの管理が行える
スタックについては
公式ガイドブックを参照ください

76. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
concrete5を拡張
アドオンの購入はこちらからできる

77. 4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
システムと設定
concrete5の詳細な設定を
ここから行うことができる