はじめての 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 Officerhttp://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 ReleasesExperience Manager 等

小規模シンプル

大規模複雑

● WordPress = 分譲住宅○ 素早く安価にサイトを作りたい○ テンプレート通りのサイトを作りたい○ プラグインとの相性がすべて。相性によっては開発しにくい。

● concrete5 = 注文住宅○ ちょっと手間がかかっても良いから、自分のニーズに合ったサイトを作りた

い○ オジリナル性を出したい○ 開発がしやすい設計

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

concrete5 の歴史

2003年ルイス・クラーク探検隊200周年記念サイト

• 開発期間2ヶ月• 更新者90名• Word 感覚で更新ができる• 秒間1万ヒット

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 の特徴をピックアップ

● 直感的な操作性● 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 に設定」をクリック

6. 「OK」を押す

6. 「OK」を押す(またパスワードを求められる場合もあります)

7. MAMP 設定完了

MySQL の準備1. 「オープン WebStart

の」という中途半端なボタンを押す

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

が開く

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

アドレス: localhostユーザー名: rootパスワード: root(ホスティングの場合もこれらの情報が必要です)

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

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

リック

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

ます

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

ます6. 「データベース」をクリッ

MySQL の準備7. 「データベースを作成す

る」でデータベースの名前と接続照合順序を選択。

今日は名前: c5ngo接続照合順序:utf8mb4_general_ci

今日は名前: concrete5接続照合順序:utf8mb4_general_ci

concrete5 のファイルをダウンロード1. 日本語サイトを訪問

http://concrete5-japan.org/

concrete5 のファイルをダウンロード1. 日本語サイトを訪問

http://concrete5-japan.org/2. 「ダウンロード」ページ

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

ZIP ファイルをダウンロード

concrete5 のファイルをダウンロード4. ZIPファイルを MAMP

のフォルダに移動(/アプリケーション /MAMP/htdocs/)

5. ZIPファイルを解凍

concrete5 のファイルをダウンロード6. フォルダ名を「c5ngo」

等適当に名前変更

concrete5 のファイルをダウンロード6. フォルダ名を「c5ngo」

等適当に名前変更

7. アクセスのアドレスhttp://localhost/c5ngo

c45ngoc5ngo

concrete5 のファイルをダウンロード6. フォルダ名を

「concrete5」等適当に名前変更

7. アクセスのアドレスhttp://localhost/c5ngo

concrete5 の準備が完了しました！

STEP 2: concrete5 インストール

1. さきほど設定したフォルダ名でアクセス

例:http://localhost/c5ngo

c5ngo/

2. インストール開始「Japanese (Japan)」を選択

3. Choose Language ボタンを押す

2. インストール開始「Japanese (Japan)」を選択

3. Choose Language ボタンを押す

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

5. 「インストールを続ける」ボタンを押す

5. 必要項目を入力

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

6. インストール作業

7. インストール完了

STEP 3: 基本操作

の前に

STEP 4: 引っ越しの方法

今日のワークショップ

ダウンロード (今日の教材)https://docs.google.com/document/d/1f4sHMV_qqVa0hmYLECQXyt-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. ログイン用 URLhttp://localhost/c5ngo/index.php/login

8. ログインID: adminPass: 123456

STEP 3: 基本操作今日の教材: これにしたがって作業します

https://docs.google.com/document/d/1f4sHMV_qqVa0hmYLECQXyt-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回コンなご勉強会

Design

concrete5 デザインカスタマイズ基礎編

第4回concrete5京都勉強会...

concrete5 デザインカスタマイズ実践編

concrete5...

concrete5とコワーキング / コワーキング...

第1回concrete5初心者向け勉強会環境構築

concrete5 5.7でテーマ作ってみよう超初級編

awsによるwebサイト構築と運用 - concrete5 編 -

20130621 勝つる合コン

concrete5 勉強会...

concrete5 wesling question

kof2015...

オープンソースcms concrete5 のご紹介

concrete5 wesling

第2回 concrete5 神戸勉強会 in...

kof2015...

cisco nac ゲストサーバインストレーション...

concrete5 osc kyoto

concrete5 テーマ作成ハンズオン (ver5.6 まで)

concrete5 in japan 2014

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

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