2017 | 2ページ目 (3ページ中)

concrete5 を Version5.7 から Version8 (8.1.0) にバージョンアップする方法とエラー時の対応方法

concrete5 version 8.1.0がリリースされています。

日本時間の1月25日にconcrete5のバージョン8.1.0がリリースされました。

そろそろバージョン8が安定してきたかなぁと様子を伺いつつ、アップデートを行いました。

今回、私が行ったアップグレード方法をご紹介します。

基本、以下のURLで紹介されていた英文をGoogle翻訳を掛けつつ進めました。

間違っている操作があれば教えて下さいませ。

Upgrading concrete5
https://documentation.concrete5.org/developers/installation/upgrading-concrete5

Version8.1.0へのアップデート手順

以下の手順でアップデートを行いました。

5.7系のconcrete5を利用している想定で話を進めます。

5.7系の最新バージョン（5.7.13）にアップデート
8.1.0をダウンロードして解凍
必要なファイルをアップロード
管理画面からアップデート
つまづいたことと対応方法まとめ

Version8へアップデートしよう

1. 5.7系の最新バージョン（5.7.13）にアップデート

管理画面にログイン後、システムのバージョンアップを実行します。
この操作の前にバックアップはとっておきましょう！

以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って5.7.13にアップデートしていきます。

ダウンロードボタンをクリックして自動でダウンロードします。

（もしこのダウンロードボタンをクリックしてもエラーになる場合、手順2,3のように5.7.5.13を手動アップデートします。）

その後、更新をインストールをクリックしてバージョンアップを行います。

問題なく5.7.13にアップデートできました。

2. 8.1.0をダウンロードして解凍

次に、concrete5 Ver.8.1.0を公式サイトからダウンロードします。

concrete5 ダウンロード
https://concrete5-japan.org/about/download/

ダウンロードしたら解凍しましょう。

3. 必要なファイルをアップロード

解凍したファイルの中から、concreteディレクトリのみを残してそれ以外を削除します。

concreteディレクトリのみを残してそれ以外は全て削除

concreteディレクトリが格納された、concrete5-8.1.0ディレクトリを、updatesディレクトリにアップします。

concrete5-8.1.0ディレクトリをupdatesディレクトリにアップロード

4. 管理画面からアップデート

アップロードが完了したら、以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って、8.1.0をインストールしていきます。

更新をインストールをクリックします。

これでVersion8.1へのアップデートは完了しました。

5.つまづいたことと対応まとめ

アップデートをしていると上手く行かないことがありました。

以下にエラーと対処方法を列挙します。

予期せぬエラーが発生しました。実行時間オーバーエラー

Maximum execution time of 30 seconds exceeded

上記のエラーが出た場合は、php.iniの設定を見直します。

php.ini の以下のパラメータを長く（120秒位?）設定します。

max_execution_time = 120

実行時間オーバーエラーが出て以降、エラーでインストールが進まない。

php.iniの設定をしたのに、エラーで動かない場合、concrete.phpファイルを設定してあげます。

\concrete\config\concrete.php

上記をコピーして以下のディレクトリに貼り付ける。

\application\config\

その後以下のパラメータ（170行目あたり）をtrueに変更してアップロードする。

/**
* Use Doctrine development mode
*
* @var bool
*/
'doctrine_dev_mode' => true,

/**

* Use Doctrine development mode

* @var bool

'doctrine_dev_mode' => true,

※ アップデートが無事に終わったら上記をfalseに戻しておきましょう！

まとめ

スムーズに進めばすんなりとアップデートが完了するはずですが、躓いたら色々と調べる事になります！頑張りましょう！

また、これからはconcrete5のバージョン8が主流になっていくと思うので、影響が小さそうなサイトからアップデートを試し、ノウハウを蓄積してから大きめなサイトのアップデートをすることがおすすめです。

健闘を祈ります！

[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)

表を検索したい！簡単に！

都道府県別にある情報を簡単に絞り込みたい。というご要望。

セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。

というかたちで実装を考えました。

テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。

jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。

参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。

動作デモ・ソースコード

動作デモ

http://onocom.net/code/japan-prefecture/

ソースコード

https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570

ライセンス：WTFPL

好きに利用して改変して下さい。

実装したこと

セレクトボックスで選択した値(value)で表を検索（絞り込み）する機能を実装します。

ソースと解説

ソースコードサンプルと合わせてご覧くださいませ。

1.表を作る

取り敢えず検索するための表を作ります。

今回、都道府県の一覧表を作りました。

theadに見出しを。tbodyにデータを記述しましょう。

<table class="table table-borderd">
    <thead>
        <tr class="active">
            <td>番号</td>
            <td>都道府県名</td>
            <td>読み</td>
            <td>都道府県庁 所在地</td>
            <td>最大都市</td>
            <td>地方</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>北海道</td>
            <td>ほっかいどう</td>
            <td>札幌市</td>
            <td>札幌市</td>
            <td>北海道</td>
        </tr>
        <tr>
            <td>02</td>
            <td>青森県</td>
            <td>あおもりけん</td>
            <td>青森市</td>
            <td>青森市</td>
            <td>東北</td>
        </tr>
        ・・・
    </tbody>
</table>

<thead>

<td>都道府県名</td>

<td>都道府県庁所在地</td>

</tr>

</thead>

<tbody>

<tr>

<td>ほっかいどう</td>

</tr>

<tr>

<td>あおもりけん</td>

</tr>

・・・

</tbody>

</table>

2.都道府県選択用のセレクトボックスを作る

表を絞り込む為のセレクトボックスを作ります。

<select id="pref-select" class="form-control">
    <option value="">都道府県で絞り込み</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    ・・・
</select>

<option value="">都道府県で絞り込み</option>

・・・

</select>

optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。

<option value="青森県">青森県で絞り込む</option>

1	<option value="青森県">青森県で絞り込む</option>

また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。

3.JavaScriptを組む

キモとなるJavaScriptのコードは以下のように記述します。

コメントで処理を補足しておりますので、参考にしてみてくださいませ。

jQuery(function ($) {
    // セレクトボックスが変更されたら処理をする
    $('#pref-select').change(function () {
    
        // 選択した値を取得
        var select_val = $('#pref-select option:selected').val();
        
        // tbodyのtr数回 処理をする
        $.each($("#pref-table tbody tr"), function (index, element) {
        
            // 選択した値が空欄だったら、全ての行を表示する為の処理
            if (select_val == "") {
                $(element).css("display", "table-row");
                return true; // 次のtrへ
            }
            
            // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック
            var row_text = $(element).text();
            
            if (row_text.indexOf(select_val) != -1) {
                // 見つかった場合は表示する
                $(element).css("display", "table-row");
            } else {
                // 見つからなかった場合は非表示に
                $(element).css("display", "none");
            }

        });
    });
});

jQuery(function ($) {

// セレクトボックスが変更されたら処理をする

$('#pref-select').change(function () {

// 選択した値を取得

var select_val = $('#pref-select option:selected').val();

// tbodyのtr数回処理をする

$.each($("#pref-table tbody tr"), function (index, element) {

// 選択した値が空欄だったら、全ての行を表示する為の処理

if (select_val == "") {

$(element).css("display", "table-row");

return true; // 次のtrへ

}

// 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック

var row_text = $(element).text();

if (row_text.indexOf(select_val) != -1) {

// 見つかった場合は表示する

$(element).css("display", "table-row");

} else {

// 見つからなかった場合は非表示に

$(element).css("display", "none");

}

});

まとめ

あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。

もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。

お役に立てば幸いです。

WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

searchform.php をテーマフォルダに追加
searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置
検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ（以下例だとpref）をご自身のサイトに付け加えてあげてください。

<?php
/* 
 * 検索ボックスのカスタマイズ
 *   カスタムタクソノミーを検索条件に追加する
 */
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">検索キーワード</span>
        <input type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" />
    </label>
    <label>
        <span class="screen-reader-text">都道府県で絞り込み</span>
        <?php
            $selected = get_query_var("pref",0);
            $args = array(
                        'show_option_all' => '都道府県で絞り込み',
                        'taxonomy'    => 'pref',
                        'name'        => 'pref',
                        'value_field' => 'slug',
                        'hide_empty'  => 1,
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>
    <input type="submit" class="search-submit" value="検索" />
</form>

<?php

* 検索ボックスのカスタマイズ

* カスタムタクソノミーを検索条件に追加する

<label>

<span class="screen-reader-text">検索キーワード</span>

</label>

<label>

<span class="screen-reader-text">都道府県で絞り込み</span>

<?php

$selected = get_query_var("pref",0);

$args = array(

'show_option_all' => '都道府県で絞り込み',

'taxonomy' => 'pref',

'name' => 'pref',

'value_field' => 'slug',

'hide_empty' => 1,

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

</form>

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル（例：都道府県）
■■■・・・タクソノミーの名前[半角英数]（例：pref）

  <label>
        <span class="screen-reader-text">●●●で絞り込み</span>
        <?php
            $selected = get_query_var("■■■",0);   // 選択状態となるタクソノミースラッグを取得
            $args = array(
                        'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）
                        'taxonomy'    => '■■■',   // タクソノミーの名前
                        'name'        => '■■■',   // タクソノミーの名前
                        'value_field' => 'slug',   // タクソノミーのスラッグをセレクトボックスのオプションに設定する
                        'hide_empty'  => 1,        // 空のタクソノミーは非表示(0にすると表示)
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>

<label>

<span class="screen-reader-text">●●●で絞り込み</span>

<?php

$selected = get_query_var("■■■",0); // 選択状態となるタクソノミースラッグを取得

$args = array(

'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）

'taxonomy' => '■■■', // タクソノミーの名前

'name' => '■■■', // タクソノミーの名前

'value_field' => 'slug', // タクソノミーのスラッグをセレクトボックスのオプションに設定する

'hide_empty' => 1, // 空のタクソノミーは非表示(0にすると表示)

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート（sidebar.php等）に以下のコードを記載します。

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた！

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。

[制作者向け] WAFが正常なJavaScriptもエラーにしてしまう場合の.htaccessによる対応方法（CPIシェアードプランACE01の場合）

WordPressやconcrete5等のCMSを使うなら絶対あったほうが良いWAF

WordPressに対する不正攻撃からサーバを守ってくれるWAF（Webアプリケーションファイアウォール）。

CPIのレンタルサーバシェアードプランACE01にはWAFが標準装備されていて、クロスサイト・スクリプティングやSQLインジェクション等のサイバー攻撃を未然に防いでくれます。

詳しくはCPIの以下のページに分かりやすい解説が載っています。

https://www.cpi.ad.jp/shared/detail/waf.html

CPIは、ジェイピー・セキュア社のSiteGuard Liteを導入しているようですね。

WAFがある安心感は非常に大きく、利用しないのはもったいない！というかWAFが使えるなら絶対に使ったほうが良い機能です。

しかしながら、WAFがしっかりと動作しすぎるために、サイト構築時に悪意のないJavaScriptもエラーになるケースも割りと多かったりします。

GoogleAnalyticsのコードをconcrete5の管理画面にペーストして保存しようとすると以下のようなエラーになり上手く保存が出来ないことも。

.htaccessでWAFの設定を変更・無効にできる

そんなときに私は、JavaScriptを貼り付けて保存する間だけ.htaccessを使ってWAFを無効化しています。

手順とは言いながら、.htaccessに以下の一行を付け加えるだけです。

SiteGuard_User_ExcludeSig all

1	SiteGuard_User_ExcludeSig all

これで、WAFを無効に出来ます。この行を削除すると有効化されます。

無効化して作業が終わったら、すぐに有効化をしましょう！

すぐに有効化をしましょう！

大事なので2回言いました。

また、ON（有効）・OFF（無効）の2択ではなくて、より柔軟にWAFの除外設定をすることも可能です。

その解説は以下のCPIスタッフブログに詳しく書かれていますのでご一読下さいませ。

知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法
http://shared-blog.kddi-web.com/webinfo/129#setting

2017年2月24日追記

あれから色々と調べていたら、以下サイトに記載されていた、IPアドレスによりWAFの除外設定をする方法がCPIでも使えました。

<IfModule mod_siteguard.c>
  SiteGuard_User_ExcludeSig ip(192.168.1.1)
</IfModule>

SiteGuard_User_ExcludeSig ip(192.168.1.1)

</IfModule>

192.168.1.1 の部分を自分のIPアドレスに変更すると、該当IPアドレスからのアクセスの場合、WAFのフィルタリングから除外されます。

【誤検知】WAFのSiteGuard Liteで閲覧をブロックされてしまった場合の除外設定の方法
http://spot-web.jp/blog/2700/

感想

WAFがサイト構築の足かせにならないように、WAFと仲良く付き合っていきたいですね。

CPI LOVEなページを作りました

4年以上愛用しているCPIの共用レンタルサーバー ACE01について、褒めたり、愛のこもった文句を言うページを作りました。CPIサーバをご検討されている方は、もし良ければこちらもご覧ください。

【動画付き操作方法】複数に分かれたファイルを１つにまとめて圧縮する方法。まとめたファイルをファイル便（無料の大容量ファイル転送サービス)で送る方法。（Windows/Mac）

大容量の写真をメールで送りたい！沢山のファイルを纏めて送りたい！という方へ

写真ファイルなどのファイルサイズの大きなファイルをやり取りする時に、メールに添付してしまうと容量オーバーで送れない場合があります。また、ファイル数が多いと尚大変です。

そういったときのために、

１：複数ファイルを圧縮して１つにまとめる方法

２：圧縮したファイルをファイル便、大容量ファイル転送サービスで送る方法

を動画付きでご紹介します。

Windowsで操作をしていますが、「圧縮してひとつに纏めて送る。」という基本的な考え方はMacでも同様です。

１：複数ファイルを圧縮して１つにまとめる方法

複数のファイルサイズの大きいファイルをひとつに纏めて圧縮する方法は以下のとおりです。

手順

フォルダを作成する
フォルダに圧縮したいデータを入れる
フォルダを右クリックする
右クリックメニューの「送る」から「圧縮( zip形式 )フォルダー」を選択
圧縮ファイルが出来上がります

２：圧縮したファイルをファイル便、大容量ファイル転送サービスで送る方法

宅ふぁいる便というサービスを利用してファイルを一旦オンラインにアップロードします。（宅ふぁいる便だと300MBまで無料で送ることが出来ます。）

アップロードするとダウンロード用のURLが発行されますので、そちらをコピーしてメールやサイボウズLive、チャットワーク等に貼り付けて共有します。

手順（300MB以内のファイルを送る場合）

300MB以内の場合は宅ふぁいる便というサービスが使いやすいです。

宅ふぁいる便のアップロード用URLにアクセスする
https://free.filesend.to/fileup_free
圧縮したファイルをドラッグ＆ドロップで放り込む
「著作権侵害や違法なファイル等ではありません」にチェックを入れる
「アップロード内容を確認する」ボタンをクリックしてファイルをアップロードする
ダウンロードURLをコピーして、メールやサイボウズLiveで送信します。

手順（300MB以上のファイルを送る場合）

300MBを超える物凄く大きなファイルを送りたい場合は、ギガファイル便というサービスを利用します。

宅ふぁいる便のアップロード用URLにアクセスする
http://gigafile.nu/
圧縮したファイルをドラッグ＆ドロップで放り込む
ダウンロードURLが発行されるので、URLをコピーして、メールやサイボウズLiveで送信します。

まとめ

最近はGoogleDriveやDropboxといったサービスでやり取りすることも増えてきましたが、クライアントさんによってはそういうサービスを利用していない方も多いので、ファイル送信サービスをご紹介しました。

ご参考になれば幸いです。