はじめての concrete5 (2016年1月) 第56回コンなご勉強会

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

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

本日の目次 (後半)
今日のスライドは公開します！
青いところはリンクなのでクリックできまっせ
● ワークショップ
○ MAMP の準備方法
○ concrete5 インストールの準備
○ concrete5 を準備
● サンプルファイルを使って操作
● 時間があれば
○ 追加機能の紹介
○ おすすめアドオンブロック

自己紹介

Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
Chief Communications 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 について
“More enterprise than WordPress,
less painful than Drupal”
(WordPress よりもエンタープライズで、Drupal よりも簡単)
- Franz Maruna, CEO, PortlandLabs

開発コスト
MovableType 等
のれん
Web Releases
Experience Manager 等
小規模
シンプル
大規模
複雑

● WordPress = 分譲住宅
○ 素早く安価にサイトを作りたい
○ テンプレート通りのサイトを作りたい
○ プラグインとの相性がすべて。相性によっては開発しにくい。
● 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年パートナー制度が始動
● 2016/1 約1900名がユーザー登録

concrete5 の
実績

導入実績(2016/1/24 現在)
世界

導入実績
アメリカ陸軍 (europe.armymwr.com)

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

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

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

導入実績
コニカミノルタ情報機器販売拠点向け B2B サイト

導入実績
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.5
● PHP 5.3.3 以降 (注意！ concrete5.8 から PHP 5.5.9が必須に)
○ 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 公認

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

セキュリティー

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

法人&営業サポート

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

コミュニティ
充実！

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

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

カレー食ったり

コスプレしたり！

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

さて・・・

concrete5 ワークショップ
基礎編

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

STEP 1: concrete5 環境を準備
concrete5.7.5.5
● PHP 5.3.3 以降 (できれば新しい PHP 5.5.9 以降がいいなー)
○ 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. 「データベースを作成す
る」でデータベースの名
前と接続照合順序を選
択。
今日は
名前: c5ngo
接続照合順序:
utf8mb4_general_ci

MySQL の準備
択。
今日は
名前: c5ngo
接続照合順序:
utf8mb4_general_ci
c5ngo

MySQL の準備
択。
今日は
名前: concrete5
接続照合順序:
utf8mb4_general_ci
c5ngo

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

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

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

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

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

ウンロード
6. フォルダ名を「c5ngo」
等
7. アクセスのアドレス
http://localhost/c5ngo
c45ngo
c5ngo

ウンロード
6. フォルダ名を
「concrete5」等
7. アクセスのアドレス
concrete5 の準備が完了しました！
c5ngo

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

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

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

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

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

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

STEP 3: 基本操作

の前に

STEP 4: 引っ越しの方法

今日のワークショップ
ダウンロード (今日の教材)
https://docs.google.
com/document/d/1f4sHMV_qqVa0hmY
LECQXyt-
zpUgbCGxfeyP68dEs_Ew/edit#
お断り
このデータをそのまま使ってサイト公開は絶対にし

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

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

今日の教材: これにしたがって作業します
https://docs.google.
com/document/d/1f4sHMV_qqVa0hm
YLECQXyt-
zpUgbCGxfeyP68dEs_Ew/edit#

ただいま〜

手抜きで紹介
● ブロックの編集 (はじめての 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 (2016年1月) 第56回コンなご勉強会

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to はじめての concrete5 (2016年1月) 第56回コンなご勉強会

Similar to はじめての concrete5 (2016年1月) 第56回コンなご勉強会 (17)

More from Katz Ueno

More from Katz Ueno (20)