レビューメディア「ジグソー」

WordPress もいいけれど、こちらもいいかも の使い方。

たまには、WordPress じゃないのもいいかなと、使ってみた時のメモです。

 

#concrete5

更新: 2015/04/06

【設置手順①】phpMyAdminでSQLを設定 ~ ユーザーとデータベース

① concrete5がアクセスするDBユーザーを追加

[ユーザ]タブ - [ユーザを追加する]

User name：

Host : localhost
パスワード：

グローバル特権：すべてチェックする

 

※ ユーザー追加時、ユーザー名、ホスト、パスワード に加えて、
[ユーザ専用データベース] - [同名のデータベースを作成してすべての特権を…] として [実行]

として、ユーザーと同時にデータベースを作成してもよい。（次の②は省略）

（作成後、データベースを選択して[操作] - [照合順序：] = utf8_general_ci の設定が必要。）

 

 

②concrete5用のデータベースを追加

データベース名：（「.」ピリオドを含めると、データベースは作成できるが、クエリが失敗する）

照合順序：utf8_general_ci

更新: 2015/02/21

【設置手順②】ファイルをコピーする

ダウンロードしたzipファイルを解凍し、サーバーにコピーする。

コピー元： zipファイルの最上位フォルダ（concrete5.7.3.1）の内容

コピー先：/var/www/html 直下なら、URLは、サーバーのドメイン
　　/var/www/html/[ディレクトリ名] なら、URLは、ドメイン/[ディレクトリ名]

ネスト（concrete5の中にconcrete5）すると、セッションが混乱して動作できない。

 

アップロードしたファイルのパーミッション変更を757に変更する。

更新: 2015/02/21

【設置手順③】インストール（項目を設定）

サイト名：任意の文字列（日本語もOK）
メール、パスワード：（admin（管理者）のパスワードになる）
サーバー：同一マシンなので、「localhost」
MySQLユーザー名、パスワード：phpAmAdmin で設定したものを設定
データベース名：phpAmAdmin で設定したものを設定
パスワードが合っていないとエラー → 確認して再入力
はじめのうちは、サンプルコンテツを入れておく

 

インストール完了。

 

サンプルテーマ

更新: 2015/04/11

HTMLのテンプレートをconcrete5のテーマにコンバートしながら練習する

参考の動画：https://www.youtube.com/watch?v=vQm1QXN9OfI&index=1&list=PLuZvBX9NmGACZ6JZqW59Nuc8nqOP_L4RX


日本語解説：
https://github.com/hissy/c5_theme_development_tutorial/releases

日本語オフィシャル（ここだけ見てもわかりにくい）：http://concrete5-japan.org/help/5-7/developer/designing-for-concrete5/building-a-concrete5-theme/converting-an-html-template-to-a-concrete5-theme/

HTMLのテンプレート集（HTML5、Bootstrap3）：

http://www.templatemo.com/preview/templatemo_395_urbanic

http://startbootstrap.com/template-overviews/business-casual/

 

※ コンバートしながら作る場合は、Concrete5インストール時にサンプルコンテンツを有効にしなくてもよい（インストールはされている）。

※ 設定を進めるときは、Concrete5のキャッシュは切っておく（キャッシュがあると設定がすぐに反映されない場合あり）

 

基本

  1. ディレクトリ、/var/www/html/application/themes/[テーマディレクトリ名] を作成
  2. その中にdescription.txt（1行目がタイトル、2行目以降が説明）、thumbnail.png（120x90px） を設置（管理画面の[ページとテーマ]-[テーマ]に表示される）
  3. /var/www/html/application/themes/[テーマディレクトリ名]  に テンプレート集のhtml 以下一式展開
  4. [ページとテーマ] - [テーマ] で、[インストール可能なテーマ] - [インストール]（[テーマ一覧に戻る]）、[インストール済] - （当該テーマを）[有効]（[すべてのページに適用しますか？]→[はい]、（[テーマ一覧に戻る]））
    （http://[IP]/ にアクセスしても、白いページが表示される（エラーも出ない））
  5. [ページとテーマ] - [ページテンプレート] で、[すべて]、名前：full、ハンドル：full、好きなアイコン → [更新]
  6. index.html を default.php にリネーム
    （初めにサンプルをインストールした場合、スタイルシートの当たっていないHTMLが表示される）
  7. default.phpで パスと、concrete5がインジェクションする指定を編集する


    ・冒頭に決まり文句（phpとして扱われるため）
    　<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
    ・ローカライゼーション（<!DOCTYPE html> の直下）
    　<html lang="<?php echo Localization::activeLanguage()?>">
    ・ローカルを参照しているhref （css、font）、src（js、img）の参照先にphpタグ挿入
    　置換例）src="img  →
    　src="<?php echo $this->getThemePath()?>/img
    　href="css →
    　href="<?php echo $this->getThemePath()?>/css
    ・ヘッダ、フッタ にconcrete5がインジェクションする指定
    　<?php Loader::element('header_required');?> ← <head>の直下
    　<?php Loader::element('footer_required'); ?> ← </body>の直前
    ・IE8対応のmetaタグ関係→消していい（concrete5がやってくれる）

    　<meta charset="utf-8"> 削除

    　<title>Gp Bootstrap Template</title> 削除

    　<!--[if lt IE 9]> 以下削除
    　<script src="js/html5shiv.js"></script>
    　<script src="js/respond.min.js"></script>
    　<![endif]-->  
    ・<body></body>のすぐ内側に、
    　<div class="<?php echo $c->getPageWrapperClass()?>"></div>
    （</div> は、<?php Loader::element('footer_required'); ?> の上でも）

     
    （http://[IP]/  で、テンプレートどおりに表示されることを確認）

  8. 上部にconcrete5のメニューバーが出ない場合
    z-indexで重なり順を調整する。
    default.php の navbar のスタイルに、「style="z-index: 500"」を加えるか、該当するcssファイルの該当箇所を編集する。値は1000以下にする（concrete5 のメニューバーのz-indexは、1000なのでそれより背面に）かつ、カーソルを宛てたときにブロック編集の選択ができるようにするため。
  9. 編集可能／不可能エリアの設定、など編集
    編集可能にするエリアでどのタグを置き換えるかは、ブラウザのインスペクターで確認しながら判断する（Chrome）。
    記事ブロックを置き換えたい場合、class="text-center" を含む divタグを置き換えるとちょうどよい。 

ヘッダ、フッタをそれぞれ分割

default.php から header.php と footer.php を切り出してサイト全体で共通部分とします。
共通部分をグローバル化するには、編集可能エリアを設定するときにグローバルエリアとして設定します。（グロ－バル化しない場合は、共通部分にもかかわらずページごとに編集が可能です。）

ただし、グローバルエリアでは、ページ編集時にレイアウトを追加できない（したがってグリッドの設定もできない）ので、グリッドを使うときは、HTMLブロックを配置してその中で記述します。

  • default.phpから header.php と footer.php を切り出し、
    /var/www/html/cn5/application/themes/gp/elements/ 
    に置く。切り出しはほぼ単純に３分割。ただし、default.php の１行目の
    「 <?php defined('C5_EXECUTE') or die("Access Denied."); 」は残す。
  • default.php の切り出した跡の位置に
    <?$this->inc('elements/header.php'); ?> 
    <?$this->inc('elements/footer.php'); ?> 
    を書く。（実行時にそれぞれが挿入される。）

グリッドの設定

webデザイン（とくにBootstrap ）でグリッドとは、段組のようなものです。
作成中にいつのまにかページが崩れる心配もなく、レスポンシブな対応もおまかせでできるので、活用できれば便利です。

参考の動画：https://www.youtube.com/watch?v=UWgxpVvyKHs

  1. concrete5で使用可能なグリッドフレームワークを確認
    → 下記ディレクトリの設定ファイルの存在確認
    /var/www/html/[テーマディレクトリ名]/concrete/src/Page/Theme/GridFramework/Type/
  2. クラスファイルの編集、編集可能エリア部分のコード追加
    /var/www/html/[テーマディレクトリ名]/application/themes/page_theme.php


    <?php
    namespace Application\Theme\Agency102;

    　class PageTheme extends \Concrete\Core\Page\Theme\Theme
    　{
    　　protected $pThemeGridFrameworkHandle = 'bootstrap3';

    　}
    }

  3. テーマの再インストール
  4. いったん別のテーマを[有効]（にしないと次の[削除]ができない）、作業中のテーマを[削除]（＝アンイントールであって、インストール対象に戻る）、[インストール]
  5. default.php の編集可能エリアに1行追加

    <?php
    $a = new Area('Services');
    $a->enableGridContainer();
    $a->display($c);
    ?>

エリアタブ － [レイアウトを追加] でグリッドを含む編集エリアが追加できるようになります。

Bootstrapのグリッドを導入しなくても、デフォルトで「自由形式のグリッド」は使えます。ただし、レスポンシブな動作ができません（はみ出たりする）。

 

CSS と JavaScript のアセット

参考の動画：https://www.youtube.com/watch?v=FsWc09wR0Pc

 

関連ファイル（しくみの説明用）

/var/www/html/concrete/config/app.php

/var/www/html/concrete/blocks/content/controller.php

 

既製のテンプレートを改変して使用する場合、元のテンプレートの内容とconcrete5がインジェクションする内容で、.js ファイルなどを重複して読み込まないようにする工夫が必要です。
重複していると、機能が使えなくなることあります。

/var/www/html/application/themes/[テーマディレクトリ名]/page_theme.php

を編集します。

 

page_theme.php では他に ブロックのデザインオプション や 設定でデフォルト以外のクラスが選択できるよう記述することができます。

記述例）

<?php
namespace Application\Theme\Gp;

class PageTheme extends \Concrete\Core\Page\Theme\Theme
{
　protected $pThemeGridFrameworkHandle = 'bootstrap3';

　public function registerAssets() {
　　$this->providesAsset('javascript', 'bootstrap/*');
　　$this->providesAsset('css', 'bootstrap/*');
　　$this->providesAsset('css', 'blocks/form');
　　$this->providesAsset('css', 'core/frontend/*');
　　$this->requireAsset('javascript', 'jquery');
　}

　public function getThemeBlockClasses()
　{
　　return array(
　　　'content' => array('text-center', 'navbar', 'navbar-default', 'navbar-fixed-top','container') // 記事ブロック
// 'content' => array('text-center') // 記事ブロック
　　);
　}

　public function getThemeEditorClasses()
　{
　　return array(
　　　array('title' => t('Brand Name'), 'menuClass' => 'brand-name', 'spanClass' => 'brand-name'),
　　　array('title' => t('Intro Text'), 'menuClass' => 'intro-text', 'spanClass' => 'intro-text')
　　);
　}
}

 

LESSが使える

LESS形式のスタイルシートをconcrete5がCSS形式に変換して読み込みます。

併せて XMLファイルを作ると、[デザイン]-[テーマのカスタマイズ]でGUIで設定できます。

 

【基本】たとえば、CSS上分散している文字色などの設定の変更が１か所の修正で変更できるようになります。

  • キャッシュを切る
  • 使用中の .css ファイルの拡張子を .less に変える（CSSが正常に機能していること）
  • /var/www/html/cn5/application/themes/gp/css/presets/defaults.less  を新規作成
  • defaults.less に 定義「
    @primary-action-color: #E8CE0E;
     」 を記述
  • main.less（元 main.css、テンプレートに付いていたファイル）の 「#E8CE0E」を「@primary-action-color」に置換
  • main.less に 「 
    @import "presets/defaults.less";
    」を記述
  • default.php または、header.php でスタイルシートをリンクする記述を変更
    <link href="<?=$view->getStylesheet('main.less')?>" rel='stylesheet' type='text/css'>

【発展】 xmlファイルを作成して、concrete5のGUIでコードなしに設定作業が可能にできます。

  • （後日）

 

 

HLTMブロックでのパスの記述

.js のどれかに追加しておくと、src と href のパスが [インストールディレクトリ]をルートにしたパスで記述できます。

 

読み込まれる.js のどれか（ユーザー用）に次を追加

$(function() {
　$('.myimg').each(function(){
　　$(this).attr('src', CCM_BASE_URL + CCM_REL + $(this).attr('src'));
　});
　$('.mylink').each(function(){
　　$(this).attr('href', CCM_BASE_URL + CCM_REL + $(this).attr('href'));
　});
});

 

たとえば、

[インストールディレクトリ]/application/themes/gp/images/slider_one.jpg

にあるファイルを読みたいとき、

src="application/themes/gp/images/slider_one.jpg"

（実行時に「[IP]/[インストールディレクトリ]/」が前方に追加されてhtml用絶対パスとなる）

と書けます。[インストールディレクトリ]を変更してもブロックのソースを修正が不要になります。

更新: 2015/04/11

制作中やメンテ中には、concrete5のキャッシュは切る

キャッシュ設定のデフォルト

更新: 2015/04/11

制作中やメンテ中に外部からのアクセスを制限する

サイト全体の閲覧・編集を制御するパラメーター。
[管理画面]-[システムと設定]-[権限とアクセス]-[サイトアクセス]

 

更新: 2015/02/21

concrete5.7.x の複数サイトを１つのサーバーに設置する時

[concrete5 サイト]/application/config/concrete5.phpを

以下で編集する。

 

<?php
　return array(
　　'session' => array(
　　　'name' => '[名前]'
　　)
　);

 

※ [名前]は、重複しないこと。

※ 設定後は、ブラウザの cookies はクリアする。

 

ログイン、ログアウトなど、ブラウザとのセッションを設置した複数のサイトごとに区別するため。

 

2015/02/20 時点、設置した複数のサイトは、別のブラウザ または 別のPCから開く必要がある。（PC内の同じブラウザのタブ（別ウインドウ）で開くとセッションが交錯する。）

 

更新: 2015/02/18

サイトを削除、インストール前に戻す

マシンをフォーマットせず、MySQLの再インストールなし、concrete5のディレクトリは保存したまま、サイトを削除します。concrete5のインストール開始まで戻ります。

 

MySQLで、データベースを空にする

（phpMyAdminから、そのデータベース下のすべてのテーブルを削除する）

ファイルを削除する
/var/www/html/application/files 内全部、
/var/www/html/application/config/database.php

更新: 2015/04/06

バックアップ・リストア（未整理）

【バックアップ ＆ リストア】2015/03/10
例）cn5.cloudapp.net のサイト

 

バックアップ

concrete5）
[管理画面] - [システムと設定] - [権限とアクセス] - [メンテナンスモード]
メンテナンスモードを有効にする
[管理画面] - [システムと設定] - [最適化]
キャッシュをすべて無効にする、キャッシュをクリアする
/var/www/html/cn5/ をzip圧縮
/var/www/html で、
$ sudo zip -r cn5.zip cn5
ローカルにcn5.zipを保存する

 

SQL） http://concrete5-japan.org/help/5-6/install/how_to_backup/ の「phpMyAdmin で行う方法」
1. phpMyAdmin にログイン
http://www.ecopower-labo.net/phpmyadmin/
ログイン：root、パス：>sei6211（MySQL設定時と同じ）
2. データベースを選択、エクスポートを選択
4. [実行]（設定はデフォルトのまま変更なし）
ローカルにcn5.sqlが保存される

 

SQL 別解）
/home/vagrant で、
$ sudo mysqldump -u root -p cn5 > cn5.dump.sql

cn5.dump.sql は、テキストファイルなのでエディタで中身確認

（文字コードでトラブル。通常なない）

▶ $ sudo mysqldump --default-character-set=latin1 -u root -p cn5 > cn5.dump.sql
（サーバー設定ミス（mariaDBインストール時にコード設定漏れ）？ ゆえ、オプション必要 ＝ 暫定対処）
ローカルにcn5.dump.sql を保存する
10行目を編集（暫定対処）
/*!40101 SET NAMES utf8 */;

（作業後、メンテナンスモード、キャッシュの設定を元に戻しておく）

192.168.0.30 へ
（すでにサービス中のサイトがある場合は、メンテナンスモードにして、ディレクトリをリネームしておく）

 

リストア

SQL）
1. phpMyAdmin にログイン
2. 空のデータベースを作成 （＊データベース名）
3. データベースを選択、インポートを選択
4. ローカルのcn5.sqlを指定（設定はデフォルトのまま変更なし
5. [実行]

 

SQL 別解）
ローカルからcn5.dump.sql を /home/vagrant コピーする
/home/vagrant で、
$ sudo mysql -u root -p
> create database cn5a;
> exit;
（データベース名はdatabase.php で設定できるので新しい名前でよい）
$ sudo mysql -u root -p cn5a < cn5.dump.sql
（> show databases; 、> show tables; で確認すること）

 

concrete5）
ローカルから cn5.zip を /var/www/html にコピー
/var/www/html で、
$ sudo unzip cn5.zip
（解凍前に旧バーションのディレクトリ名をリネーム）

/var/www/html/cn5/application/config/database.php
を編集 （＊データベース名）
$ sudo chmod -R a=Xrw /var/www/html/cn5/packages/
$ sudo chmod -R a=Xrw /var/www/html/cn5/updates/
$ sudo chmod -R a=Xrw /var/www/html/cn5/application/config/
$ sudo chmod -R a=Xrw /var/www/html/cn5/application/files/sitemap.xml ← 見つからないので何もしない。
（上記コマンドで子以下のディレクトリもパーミッションを変更する）

 

リストア後

http://192.168.0.30/cn5/index.php/login
（すでにログイン状態なので、右上のメニューを押して設定など確認する [ログイン]は押さない）
（メイン画面はログイン待ちになっているのでメンテナンスモードを無効にしてから、ログインする）

 

※ HTMLブロックで画像をのpath変更（htmlルートを変更しているため（変数が使えない））
記事ブロックでは、HTMLが崩れる。

http://www.onside.com/web_design/6560.html

更新: 2015/04/10

新しいテンプレートを追加 → ページをたくさん追加

新しいテンプレートを追加

  • maintemp.php を作成します。（inc()でヘッダ・フッタを取り込む、section １つ の構成として定義。取り込むheader.php、footer.php はすでにグローバルエリアを含んでいる）

  • [管理画面] - [ページとテーマ] - [ページテンプレート]で、[テンプレートを追加 ]
    → 名前：追加記事、ハンドル：maintemp で追加（ハンドル＝php名）アイコン：覚えやすいのを選ぶ（定義の内容に関係ない）
    → [新規]
    （画像）
  • [管理画面] - [ページタイプ]で、[ページタイプを追加]
    ページタイプ名：ニュース、ページタイプハンドル：news
    （テンプレートはあとから変更できる（「新しいページタイプ」の[基本情報]） が、すでに内容を作成した場合は崩れるかもしれない）
    （ページタイプ（とページハンドル）がページリスト作成のキーとなる）
    （画像）
  • 作成した「ニュース」の[出力] で、
    「追加記事」の[デフォルトを編集] → maintemp.php で定義した内容に対して編集できる。レイアウトの追加、エリアにブロックの追加ができる。（”グローバルブロック”の表示がでる）

  • [新規ページ] - [新しいページ] には、「ニュース」が選択可能になっている

新規ページを編集

  • [新規ページ] - [新しいページ] から「ニュース」を選択。（下書きからも選択できる）
  • 公開の設定をしていないので、[編集モード終了] をしても[ページを公開]できない。 

新規ページを公開

  • [編集モード終了]前に、[設定]
    [属性] で、[名前]
    [場所] - [場所を選択] で、親ページ を設定、
    [変更を保存] → [編集モードを終了] - [ページを公開]

  • サイトマップに表示が追加されたのを確認
更新: 2015/04/11

設置ディレクトリが変わっても影響ない href と src のリンク記述のための .js

リンクしている .js のどこかに記述しておくてと、HTMLブロックで src と href のパスが [インストールディレクトリ]をルートにしたパスで記述できます。

// （HTMLロード時、
// .mylink クラスを持つ<a>タグの内の href の前と、
// .myimg クラスを持つ<img>タグの内の src の前に、
// [インストルしたディレクトリ]から上のパス（末尾の"/"あり）を付けて埋め戻す。）
$(function() {
　$('.myimg').each(function(){
　　$(this).attr('src', CCM_BASE_URL + CCM_REL + '/' + $(this).attr('src'));
　});
　$('.mylink').each(function(){
　　$(this).attr('href', CCM_BASE_URL + CCM_REL + '/' + $(this).attr('href'));
　});
});

 

更新: 2015/04/11

問題点／疑問点／メモ

  • /var/www/html/application/config/database.php にDBのパスワードが平文で入っている。（セキュリティ上、本題とならないか）
  • レイアウトで、1ページ式で上部のメニューを不動にするのと、メニューセクション＋複数ページではどちらがいいか、適するか。
  • chromeのデフォルトはフォントが汚いので、デフォルトでも出来上がりをチェックする
    （スタイルで強制的にフォントを決める必要がありそう）
  • c5のファイフマネージャでファイル転送する場合、サイズ制限が？ サーバー内のファイルでも受け入れ不可。
  • 「新着情報」などは、ページリストブロックで。外部ブログのリストはRSSブロックで。
  • フォトギャラリーの作り方？
  • 5.7で 5.6仕様の記事ブロックは使えないのか？（5.7は、Redactor  5.6は、）
  • 公開前の更新分を、個別に公開していく方法？
  • ブロックのCSS、カスタムテンプレート（ex.フォントの変更・日本語フォントを指定するには）？
  •  ユーザーが追加するページのテンプレートの作り方（特定の親ページの下に付ける設定、ケージのフォーマット（記事ブロック、スライドショーブロック））

  • 購入金額

    0円

  • 購入日

    2015年02月18日

  • 購入場所

15人がこのレビューをCOOLしました！

コメント (0)

ZIGSOWにログインするとコメントやこのアイテムを持っているユーザー全員に質問できます。

YouTube の動画を挿入

YouTube の URL または動画の ID を入力してください

動画の ID が取得できません。ID もしくは URL を正しく入力してください。

ニコニコ動画の動画を挿入

ニコニコ動画の URL または動画の ID を入力してください

動画の ID が取得できません。ID もしくは URL を正しく入力してください。

ZIGSOWリンク挿入

検索対象とキーワードを入力してください

    外部リンクを挿入

    リンク先の URL とタイトルを入力してください

    URL を正しく入力してください。

    画像を挿入(最大サイズ6MB)

    画像を選択してください

    ファイルサイズが6MBを超えています

    別の画像を追加

    このレビューもチェック

    新着レビュー

    カテゴリーからレビューを探す 一覧へ

    ちばとどさん

    concrete5.7
    持ってる！ 気になる！

    持ってる人 (1)

    ZIGSOW にログイン

    ZIGSOW会員登録（無料）はこちらから

    ログインできない場合はこちら