はじめての concrete5 基礎・インストール編 - 第52回コンなご (concrete5 名古屋ユーザーグループ) 勉強会

2015.9.19 (土) はじめての concrete5 - 第52回コンなご (concrete5 名古屋ユーザーグループ) 勉強会
concrete5 の紹介
2015/2/21 (土) @ CMS Fun #1
はじめての concrete5
2015/9/19 (土) @ 第52回
コンなご勉強会

本日の目次 (前半)
● 自己紹介
● concrete5 の紹介
concrete5 の歴史
操作の基本
SEO
会員・権限・承認ワークフロー機能
テーマ作成・エンタープライズ
● ワークショップ
今日のスライドは公開します！
青いところはリンクなのでクリックできまっせ

本日の目次 (後半)
今日のスライドは公開します！
青いところはリンクなのでクリックできまっせ
● ワークショップ
○ MAMP の準備方法
○ concrete5 インストールの準備
○ concrete5 を準備
● サンプルファイルを使って操作
● 読書会
○ 日本語・英語公式サイトのヘルプページの紹介

自己紹介

Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
Chief Communciations Officer
http://concrete5.co.jp
名古屋で concrete5 CMS の普及

● 1980年三重県四日市市生まれ
● アメリカに留学→映画制作 →
雑誌編集 → Web に
● TOEIC 990点 (満点)
● 多言語に強いです

2009年 - concrete5
日本コミュニティを立ち上げました
concrete5-japan.org

全国各地に普及活動しました
青森・仙台・東京・
千葉・静岡・浜松・
名古屋・京都・大阪
・奈良・広島でUGが
立ち上がる
詳細は
concrete5-japan.org/community/local/

毎月2回勉強会等開催中
@ベースキャンプ名古屋
名古屋でも定期的に勉強会を開催
concrete5nagoya.doorkeeper.jp

共著の紹介
concrete5 公式活用ガイドブ
ック
買ってねー
● マイナビ
● 3542円
● 書籍 & 電子書籍版

concrete5
について

concrete5 について
• 直接ページ上からコンテンツを編集
• ページに「ブロック」を積み上げる
• かゆいところに手が届く
• お客さんの手離れがすごく良い
• 無料オープンソースCMS

concrete5 の歴史
2003年ルイス・クラーク探検隊200周年記念サイト
• 開発期間2ヶ月
• 更新者90名
• Word 感覚で更新ができる
• 秒間1万ヒット

concrete5 の歴史
〜2008年
エンタープライズ CMS
「concrete」
1ライセンス1万ドル

concrete5 の歴史
2008年
「concrete5」
オープンソース化

concrete5 の歴史
2008年
「concrete5」
バージョン5 で大成したので

concrete5 の歴史
2008年
「concrete5」
バージョン5 で大成したので
「concrete6」にはなりません

日本語版 (concrete5-japan.org)
●2009年日本ユーザーグループが立ち上がる
●2012年コンクリートファイブジャパン株式会社
●2014年「concrete5 公式活用ガイドブック」
●2014年パートナー制度が始動
●2015/9 約1700名がユーザー登録

concrete5 の
実績

導入実績(2015/9/19 現在)
世界

導入実績
イギリス・ミニクーパー (www.mini.co.uk)

導入実績
スイス政府 (www.ch.ch)

導入実績
NHKエデュケーショナル (www.nhk-ed.co.jp)

導入実績
JTBグローバルマーケティング&トラベル (www.jtbgmt.com)

導入実績
京都大学 K.U. Research (research.kyoto-u.ac.jp)

導入実績
バンプレストナビ (www.bpnavi.jp)

導入実績
モバイルファクトリー (www.mobilefactory.jp)

導入実績
京都駅前地下街ポルタ (www.porta.co.jp)

導入実績 (日本国内)
● 市町村の公式サイト
● 大学サイト
● 多言語サイト
● キャンペーンサイト
● 企業のイントラネットサイト
○ 社員向け
○ 販売パートナー向け
詳しくは公式サイトの事例紹介コーナーまで
http://concrete5-japan.org/partners/showcase/

concrete5 の使用条件
concrete5.7.5.2
● PHP 5.3.3 以降
○ CURL, zip, mcrypt, openSSL, GD, mysql, mbstring, iconv
○ post_max_uploadsize=20
○ post_max_size=20
○ max_memory_limit = 128MB
● MySQL 5.1.5 以降
○ 接続照合順序 = utf8_general_ci (utf8mb4が推奨)
○ --lower-case-table-name=0
● 特定ディレクトリの書き込み権限
詳しくはこちら

concrete5 の特徴を
ピックアップ

concrete5 の特徴をピックアップ
●直感的な操作性
●SEOに強い
●権限・承認フロー
●安全なアドオン
●テーマの作成が簡単
●開発フレームワークとして最適
●エンタープライズ製品
●法人サポート
●コミュニティ

直感的な操作性

ログイン

編集可能な状態

編集したいページに直接訪問
「編集モード」で編集

編集モード

管理画面ではなく
直接「ブロック」を編集

ユーザーのサポートが
めっちゃ簡単！

ドラッグして
簡単にブロックを直接移動出来る

以上

SEO に強い

SEO に強い
サイトを concrete5 に移行しても
404 の心配なし！

SEO に強い
標準で SEO 関連の機能も充実
アドオンを探さなくてOK

SEO に強い
条件で複数ページを絞込・・・

SEO に強い
ページタイトルなどSEO関連項目を
一括編集

以上
SEO に強い

権限・承認フロー
会員サイトも簡単に作れる！

シンプルな閲覧・編集権限モード
加えて上級権限モードがすごい

面倒くさいほど
細かな権限の設定が可能

ページ・エリア・ブロック単位
で設定可能

例
● 誰もが見れるページ
● ログイン会員しか見えないボタンを設置
● 会員専用ページへ移動できる

● 会員登録
○ 一般
○ 限定
● Facebook, Twitter, Google ログインサポート
(5.7.x より標準機能)

上司に更新を承認してもらえる
承認フロー

1段階までは標準装備
多段階はエンタープライズ有償アドオン

多段階なら無制限に
承認ステップを増やせる

承認・否認後の
移動先ステップの指定が自由

ページの公開・削除・SEO変更・テンプレート変更などを
承認フローに送れる

以上
会員サイトも簡単に作れる！

成長する
マーケットプレイス

concrete5.org マーケットプレイス

テーマやアドオン
ダウンロードや購入

誰でも公開 & 販売ができる

審査員 (PRB) グループがきちんと審査
(Katz も管理者)

テーマの作成が簡単

●concrete5 テーマ作成に
PHP の高度な知識は一切不要
●11行の PHP コードをコピペだけ

●元々は HTML ファイル

編集可能なエリアにしたい領域を

数行のPHPだけで実装可能！

以上

開発しやすい

開発しやすい
●最新のフレームワークを採用
●ライブラリーやヘルパーも充実
●単なる CMS としてではなく、
フレームワークとしても使える！

エンタープライズ
アドオン

エンタープライズアドオン
●静的HTML出力
●多段階ワークフロー
●エンタープライズ多言語(無料版も有ります)
●デジタルアセット管理
●イントラネットパッケージ

パートナー制度

●concrete5 の制作ができる制作会社の登録制度
●PortlandLabs 公認

●名古屋でも3社加入 (個人も加入してます)

セキュリティー

セキュリティー
●HackerOne で世界中から脆弱性のレポートを受付
●日本からも HissyNC と katzueno が参加
●JVN とも連携
●どうしても心配な人は静的 HTML 出力アドオン

法人&営業サポート

法人＆営業サポート
●法人「コンクリートファイブジャパン株式会社」
○「無料オープンソースの無保証は心配」なお客さん
向け
○「大きい案件を受注しちゃった」「分からない
concrete5 の案件を受注しちゃった」「トレーニン
グしなきゃ」
○有償でサポートを提供

コミュニティ
充実！

全国各地に広がる
ユーザーコミュニティ！
青森・仙台・東京・千葉・静
岡・浜松・名古屋・京都・大
阪・奈良・広島
あなたの地域も！
サポートします！
詳細は
concrete5-japan.org/community/local/

コミュニティ活動の例
日本語版制作や勉強会の他に・・・
● 制作に欠かせない
○ 仕様書テンプレート
(無料で公開中)
○ 営業資料の無償提供
○ 日本語スターターテーマ
「SAKAN」
(制作中、レスポンシブ対応で
仕事に使えるパッケージ)

カレー食ったり

コスプレしたり！

楽しく Web を作り
成果を出す！
みなさんのご参加、お待ちしております！

さて・・・

concrete5 ワークショップ
基礎編

concrete5 ワークショップ
●インストール
●デモデータのインストール
(引っ越しのシュミレーション)
●基本操作
○編集モード
○カスタムテンプレート
○ページタイプの基本

STEP 1: concrete5 環境を準備
concrete5.7.5.2
● PHP 5.3.3 以降 (できれば新しい PHP がいいなー)
○ CURL, zip, mcrypt, openSSL, GD, mysql, mbstring, iconv
○ post_max_uploadsize=20
○ post_max_size=20
○ max_memory_limit = 128MB
● MySQL 5.1.5 以降
○ 接続照合順序 = utf8_general_ci (utf8mb4が推奨)
○ --lower-case-table-name=0
● 特定ディレクトリの書き込み権限
詳しくはこちら

concrete5 に対応している日本のホスティング一覧
http://concrete5-japan.org/help/5-7/developer/installation/hosting/

今日はMAMP か XAMPP を使います
(MAMP をおすすめ。Win版あります)

MAMPの設定
1. インストール
2. MAMP を起動
(パスワード入れない
といけないかも)

MAMPの設定
1. インストール
2. MAMP を起動
(パスワード入れない
といけないかも)
3. 「設定」をクリック

MAMPの設定
4. 「ポート」をクリック

MAMPの設定
5. 「Web と MySQL の
ポートを 80 と 3306
に設定」をクリック

MAMPの設定
ポートを 80 と 3306
6. 「OK」を押す

MAMPの設定
ポートを 80 と 3306
(またパスワードを求
められる場合もあり
ます)

MAMPの設定
ポートを 80 と 3306
(またパスワードを求
められる場合もあり
ます)
7. MAMP 設定完了

MySQL の準備
1. 「オープン WebStart
の」という中途半端
なボタンを押す

MySQL の準備
2. MAMP のスタート画
面が開く

MySQL の準備
面が開く
3. MySQL の情報を確認

MySQL の準備
面が開く
3. MySQL の情報を確認
アドレス: localhost
ユーザー名: root
パスワード: root
(ホスティングの場合もこれ
らの情報が必要です)

MySQL の準備
4. 「ツール」をクリッ
ク

MySQL の準備
4. 「ツール」をクリッ
ク
5. 「phpMyAdmin」を
クリック

MySQL の準備
5. データベースを作成
します

MySQL の準備
5. データベースを作成
します
6. 「データベース」を
クリック

MySQL の準備
7. 「データベースを作
成する」でデータベ
ースの名前と接続照
合順序を選択。
今日は
名前: concrete5
接続照合順序
:utf8mb4_general_ci

concrete5 のファイルを
ダウンロード
1. 日本語サイトを訪問
http://concrete5-japan.org/

ダウンロード
1. 日本語サイトを訪問
http://concrete5-japan.org/
2. 「ダウンロード」ペ
ージヘ

ダウンロード
3. ダウンロードから
ZIP ファイルを
ダウンロード

ダウンロード
4. ZIPファイルを
MAMP のフォルダに
移動
(/アプリケーション/MAMP/htdocs/)
5. ZIPファイルを解凍

ダウンロード
6. フォルダ名を「
concrete5」等
適当に名前変更

ダウンロード
concrete5」等
7. アクセスのアドレス
http://localhost/concrete5

ダウンロード
concrete5」等
7. アクセスのアドレス
concrete5 の準備が完了しました！

STEP 2: concrete5 インストール
1. さきほど設定したフ
ォルダ名でアクセス
例:

2. インストール開始
「Japanese (Japan)
」を選択
3. Choose Language ボ
タンを押す

4. インストールチェック
画面
(これで、なにか問題が
あったらそこを直しま
す)
5. 「インストールを続け
る」ボタンを押す

5. 必要項目を入力
サイト情報・管理者情報はお好きな
情報を。
データベース情報は、さきほど準備
で準備したデータベース情報を入植

6. インストール作業
情報を。

7. インストール完了
情報を。

STEP 3: 基本操作

の前に

STEP 4: 引っ越しの方法

サンプルデータ
ダウンロード (今日の教材)
http://firestorage.jp/download/bf030067587fac2
552245bfcf098afd34b75048f
お断り
このデータをそのまま使ってサイト公開は絶対
にしないでください。

サンプルデータのインストール方法
1. ZIP ファイルを解凍
2. c5ngo フォルダを htdocs/c5ngo 等に展開
3. MAMP などの phpmyadmin へ
4. データベース名 c5ngo を新規作成
5. sql ファイル「c5ngo.sql」をインポート

サンプルデータのインストール方法
6. サイトにアクセスできるかテスト
http://localhost/c5ngo/
7. ログイン用 URL
http://localhost/c5ngo/index.php/login
8. ログイン
ID: admin
Pass: 123456

ただいま〜

手抜きで紹介
● ブロックの編集 (はじめての concrete5)
http://www.slideshare.net/HishikawaTakuro/concrete5-41538126
● カスタムテンプレートの操作方法 & 作り方
http://www.slideshare.net/katz515/concrete5-7customtemplate
● ページタイプのコンセプト

ヘルプページ
読書会

concrete5 ヘルプ
http://concrete5-japan.org/help/

concrete5 ヘルプ
Ustream 動画講座アーカイブ

concrete5 ヘルプ
concrete5.7 ヘルプ

concrete5 ヘルプ
英語ヘルプ
●Editor’s Guide
●Developer’s Guide
●How-tos

ありがとうございました！
Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
info@concrete5.co.jp

はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会

More Related Content

What's hot

Viewers also liked

Similar to はじめての concrete5 基礎・インストール編 - 第52回 コンなご (concrete5 名古屋 ユーザーグループ) 勉強会

More from Katz Ueno