concrete5 harvest festival
環境構築とconcrete5の操作紹介
アジェンダ
1.目的
2.concrete5における環境構築
3.concrete5インストール
4.concrete5の基本的な使い方を学ぼう
5.質疑応答
1.目的と概要説明
目的:
・concrete5というCMSでどんなことができるかを
手持ちのPC環境に入れて試してみる
2.concrete5における環境構築
必要環境
・MySQL 5.1以上
・PHP5.4以上
・Apache 2.4以上
2.concrete5における環境構築
検証環境
どんな構築においても検証する環境が必要
そこでよく使われるツールを紹介します。
・MAMP
WindowsやMacでapacheベースのwebサーバ
をたてることができる。
2.concrete5における環境構築
実際にconcrete5を入れるためのMAMP環境
またはMAMPP環境を入れてみましょう
Windowsの手順
1.MAMPをダウンロードする
2.MAMPをインストールする
3.MySQLのユーザを作る(空のデータベースも作成)
4. concrete5のインストール
2.concrete5における環境構築
1.MAMPを以下のサイトからダウンロード
https://www.mamp.info/en/
2.concrete5における環境構築
2.MAMPをインストール
Nextを選択
2.concrete5における環境構築
2.MAMPをインストール
MAMP PROのチェックをはずしNextを選択
2.concrete5における環境構築
2.MAMPをインストール
Nextを選択
2.concrete5における環境構築
2.MAMPをインストール
Nextを選択
2.concrete5における環境構築
1.MAMPをインストール
Nextを選択
2.concrete5における環境構築
2.MAMPをインストール
インストール
2.concrete5における環境構築
2.MAMPをインストール
インストール完了。
2.concrete5における環境構築
1.MAMPをインストール
ApacheとMySQLを起動
2.concrete5における環境構築
3.MySQLのユーザを作る
Phpadminを起動する。
2.concrete5における環境構築
3.MySQLのユーザを作る
サーバ接続の照合順序をut8mb4_general_ciに設定
2.concrete5における環境構築
3.MySQLのユーザを作る
ユーザ ユーザを追加するを選択。
2.concrete5における環境構築
3.MySQLのユーザを作る
枠の箇所のユーザ情報を入れる
2.concrete5における環境構築
3.MySQLのユーザを作る
ユーザ情報を入れたら実行を押す。
2.concrete5における環境構築
5. concrete5のファイルをC:MAMPhtdocsに入れる。
以下のサイトからファイルをダウンロードして
解凍。
http://www.concrete5.org/get-started
解凍したものをC:MAMPhtdocsに入れる。
2.concrete5における環境構築
5. concrete5のインストール
以下のURLからファイルをダウンロードして解凍。
http://www.concrete5.org/get-started
解凍したものをC:MAMPhtdocsに入れる。
2.concrete5における環境構築
5. concrete5のインストール
ブラウザを立ち上げて、concrete5を起動
http://localhost/concrete5のpath
concrete5のpathとは
htdocsに保存した時のフォルダ名
2.concrete5における環境構築
5. concrete5のインストール
日本語を選択
2.concrete5における環境構築
5. concrete5のインストール
必須項目をチェック。問題なければインストール続ける
2.concrete5における環境構築
5. concrete5のインストール
サイト情報を入れる
2.concrete5における環境構築
5. concrete5のインストール
サイト情報を入れる。入れ終わったらインストール
2.concrete5における環境構築
5. concrete5のインストール
インストール開始15分くらい待つ
2.concrete5における環境構築
5. concrete5のインストール
インストール完了。サイトを開くでサイト構築開始
2.concrete5における環境構築
5. concrete5のインストール
管理画面-システムと設定を開く
2.concrete5における環境構築
5. concrete5のインストール
基本ーアクセシビティを開く
2.concrete5における環境構築
5. concrete5のインストール
チェックボックスをチェック入れる
4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
まずは、以下のURLからファイルをダウンロードする。
https://github.com/concrete5japan/sakan
4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
packages/sakanのファイルを
concrete5をインストールしたpackages配下に
フォルダーごといれる
4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
管理画面
Concrete5拡張
機能追加
インストール
を押す
4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanを入れてみよう
サイトコンテンツ
をリセットします
にチェックを入れて
インストールを押す
4.concrete5の基本的な使い方を学ぼう
日本語のテーマsakanがインストールされました
4.concrete5の基本的な使い方を学ぼう
基本的なお作法としては
新規を押す
↓
ブロックを配置する
↓
記事を書く
↓
編集モードを押す
4.concrete5の基本的な使い方を学ぼう
レイアウトの編集
ブロックのレイアウトを変えるには
4.concrete5の基本的な使い方を学ぼう
レイアウトの編集
ブロックのレイアウトを変えるには
4.concrete5の基本的な使い方を学ぼう
レイアウトの編集
ブロックのレイアウトを変えるには
4.concrete5の基本的な使い方を学ぼう
またホームページのデザインを変えるには
設定-デザイン-カスタマイズで
プリセットを選択
プリセットには豊富なデザインの
パターンがあるのでそれを
使用することによりデザインを変えることができる
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
記事-その名のとおりWebページに記事を書くための
ブロックです。
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
ファイル-ファイルを貼り付けるためのブロックです。
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
HTML-HTMLのソースのみを書く場合のブロックです。
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
特色-アイコンが選べてタイトルとして使いやすい
ブロックです。
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
水平線-見栄えを良くするため水平線を入れるときに
使用するブロックです。
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
基本
画像-画像を貼り付けるためのブロックです。
ブロックごとにサイズを変更して保存することが可能
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
オートナビ-webページ固有のメニューを自動で
作成してくれるブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
日付ナビ-日付指定の記事を書くブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
FAQ-お問い合わせを作成するブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
ページリスト-更新履歴を書くのに最適なブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
ページタイトル-ページタイトルを書くのに最適なブロッ
ク
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
RSS表示-ほかのブログサイトからブログの記事を見
見込むのに最適なブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
タグ-ページにタグを埋め込むのに最適なブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ナビゲーション
トピックリスト-最新の記事を自動的に表示するのに最
適なブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
外部フォーム-外部のフォームを取り込むのに最適な
ブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
外部フォーム-外部のフォームを取り込むのに最適な
ブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
フォーム-オリジナルのお問い合わせフォームを作るの
に最適なブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
コメント欄-記事に対してのコメントを残すのに最適なブ
ロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
このページを…-ページをシェアするのに最適なブロッ
ク
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ソーシャルリンク-SNSにシェアするのに最適なブロッ
ク
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
紹介-紹介文を作成するのに最適なブロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
ソーシャルリンク-SNSにシェアするのに最適なブロッ
ク
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
Googleマップ-地名を指定するだけで地図が貼れるブ
ロック
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
画像スライダー-トップページに画像を定期的にスライ
ダーされるブロックを張ることができる
4.concrete5の基本的な使い方を学ぼう
concrete5でよく使うブロックを紹介
Yotubeビデオ-yotubeのurlを書くだけでyoutbe動画が
貼れる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
サイトマップ
Webページをツリー状
に確認することができる。
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
ファイル
画像やドキュメントを管理できる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
メンバー
記事を編集する別のメンバを
管理できる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
レポート
フォームのブロックを作成した場合
そのログが見れる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
ページとテーマ
テーマを入手や作成した場合
ここから選ぶことができる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
コメント欄
コメント欄を使用した場合
ここからログが見れる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
ワークフロー
複数のメンバーで編集する場合
タスク管理ができる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
スタックとブロック
スタックの管理が行える
スタックについては
公式ガイドブックを参照ください
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
concrete5を拡張
アドオンの購入はこちらからできる
4.concrete5の基本的な使い方を学ぼう
Concrete5の管理画面を紹介
システムと設定
concrete5の詳細な設定を
ここから行うことができる

環境構築資料