onocom

【concrete5】concrete5.7のカスタマイズ（スーパー管理者のこと、サブディレクトリインストール方法、記事ブロックエディタ[Redactor]のカスタマイズ、確認画面付き問い合わせフォームの作成）

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

案外情報が少なくて、concrete5の構築には割りと時間がかかりがちですが、でもそれが面白かったりするわけで。

今回、concrete5でサイトを作る際に躓いたことや小技的なものを共有するために記事にしました。

ちなみにこの記事は、concrete5 5.7.5.9 を対象に作成しています。他のバージョンでも動くかは不明ですが参考にはなるかと思います。

困った：ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

スーパー管理者：一番最初に作成されるユーザー admin ユーザのこと

一般管理者：管理者グループに属している自分で追加したユーザのこと

詳しくは、Katzさん記事が分かりやすかったです。

concrete5 で管理者が複数人いるときの豆知識
http://ja.katzueno.com/2014/11/3288/

サブディレクトリにconcrete5をインストールしてルート（/）で公開したい

やりたいこと

/ ・・・ルートディレクトリにはconcrete5をインストールせず、

/concrete5/ ・・・ concrete5ディレクトリにインストールした状態で、

http://example.com/ にアクセスしても、concrete5を読み出して表示させたい！

理由は聞かないで！そうしたいんだ！

色々と参考になるフォーラムがあったのでそれを参考に実装しました。

フォーラムを読むと、.htaccssだけでも実現可能ということも書かれていましたが、私の場合は、concrete5インストールディレクトリ直下のindex.phpを修正しないと、画像などのパスが「http://example.com/concrete5/・・・」となってしまいましたので、index.phpも修正を行いました。

参考にしたフォーラム記事

https://concrete5-japan.org/community/forums/5-7-x/post-10739/

https://concrete5-japan.org/community/forums/usage/post-2602/

ちなみに動作確認したのはCPIのACE01レンタルサーバです。

修正・作成するファイル

/.htaccess

/concrete5/.htaccess

/concrete5/index.php

/.htaccess の修正内容

ルートディレクトリ直下の.htaccessに以下のルールを記述する。
下2行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

RewriteEngine On
RewriteBase /

RewriteRule ^$ index.php [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^concrete5/ [NC]
RewriteRule ^(.*)$ /concrete5/$1

RewriteEngine On

RewriteBase /

RewriteRule ^$ index.php [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !^concrete5/ [NC]

RewriteRule ^(.*)$ /concrete5/$1

/concrete5/.htaccess の修正内容

concrete5インストールディレクトリ直下の.htaccessに以下のルールを記述する。
最終行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /concrete5/index.php/$1 [L]

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /concrete5/index.php/$1 [L]

/concrete5/index.php の修正内容

concrete5インストールディレクトリ直下のindex.phpを修正する。
require(‘concrete/dispatcher.php’);よりも上に以下の4行を追加する。
それぞれ「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

<?php
$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']); 
$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);
$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

<?php

$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']);

$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);

$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);

$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

追加するとこんな感じになる。

<?php
$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']); 
$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);
$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

require('concrete/dispatcher.php');

<?php

$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']);

$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);

$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);

$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

require('concrete/dispatcher.php');

動作確認する

自分のサイトURLにアクセスして、concrete5がちゃんと読み出されていることを確認するべし。

記事ブロックのWYSIWYGエディタ（Redactor）の挙動を変更したい

記事ブロックのWYSIWYGエディタのRedactor（リダクター）のカスタマイズ方法です。

concrete5 バージョン8からはCKEditorが使われるようになったので5.7までしか役に立たないかもしれません。ごめんなさい。

以下のドキュメントを参考に行います。

https://concrete5-japan.org/help/5-7/recipes/customizing-redactor-editor/

やりたいこと

・自動的にdiv要素がp要素に変換される処理をやめたい

・spanなどのインライン要素が勝手に消去される処理をやめたい

修正・追加するファイル

/application/bootstrap/app.php

/application/src/Editor/RedactorEditor.php

/application/bootstrap/app.php を修正する

/application/bootstrap/app.php ファイルを開き、以下のソースを追加します。

Core::bindShared('editor', function() {
    return new \Application\Src\Editor\RedactorEditor();
});

Core::bindShared('editor', function() {

return new \Application\Src\Editor\RedactorEditor();

});

/application/src/Editor/RedactorEditor.php を追加する

<?php
namespace Application\Src\Editor;

// コアの RedactorEditor クラスを継承してオーバーライド
class RedactorEditor extends \Concrete\Core\Editor\RedactorEditor
{
    protected function getEditor($key, $content = null, $options = array())
    {
        // オプションを追加する
        $options['replaceDivs'] = false; // divがpに変換される処理をストップする
        $options['removeWithoutAttr'] = false; // spanが消去される処理をストップする

        // 親クラスの getEditor() メソッドを呼び出す
        return parent::getEditor($key, $content, $options);
    }
}

<?php

namespace Application\Src\Editor;

// コアの RedactorEditor クラスを継承してオーバーライド

class RedactorEditor extends \Concrete\Core\Editor\RedactorEditor

{

protected function getEditor($key, $content = null, $options = array())

{

// オプションを追加する

$options['replaceDivs'] = false; // divがpに変換される処理をストップする

$options['removeWithoutAttr'] = false; // spanが消去される処理をストップする

// 親クラスの getEditor() メソッドを呼び出す

return parent::getEditor($key, $content, $options);

}

肝になるのが以下の部分。

$options[‘replaceDivs’] = false; // divがpに変換される処理をストップする

$options[‘removeWithoutAttr’] = false; // spanが消去される処理をストップする

それぞれ、

・replaceDivsをfalseにすることでDivが置き換わるのを停止。

・removeWithoutAttrをfalseにすることで属性の付いていないspan等の要素が消されるのを停止。

という設定になります。

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利！スイトン（SUITON）確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる！

GitHubで公開されているconcrete5 5.7系用確認画面付メールフォーム「suiton_confirm_form_pack」を利用すると確認画面付きのメールフォームが簡単に作れました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

しかも、管理者用の自動返信メールと送信者（問い合わせしてくれた人）用の自動返信メールを別々に設定出来るのも便利でした！

インストール方法・使い方

GitHubにインストール方法や使い方が書かれています。

使う時にカスタムテンプレートの指定を「confirm」に設定することをお忘れなく。私はテンプレート指定が出来ておらず、なんで確認画面が出ないんだ～～！と頭を抱えました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php に以下の記述をして、enableGridContainer を呼び出すとエラー画面が表示される。あ、これだけ、concrete5 version 8.1で起きたことです。

page_theme.php

<?php
namespace Application\Theme\MyTheme;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{
    protected $pThemeGridFrameworkHandle = 'bootstrap3';
}

<?php

namespace Application\Theme\MyTheme;

use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme

{

protected $pThemeGridFrameworkHandle = 'bootstrap3';

}

テーマのグリッド設置部分で以下のようにエリアを呼び出す。

home.php

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

<?php

$a = new Area('Main');

$a->enableGridContainer();

$a->display($c);

エラー発生内容

予期せぬエラーが発生しました。
グリッドフレームワークが見つかりませんでした。グリッドエリアのメソッドには、PageTheme クラスで定義された有効なグリッドフレームワークが必要です。

No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.

対処方法

テーマをアンインストールして再度インストールし直す（テーマを切り替えるだけではダメ）とGridフレームワークが認識されてエラーが消えた。

page_theme.phpはテーマのインストール時に保持されるっぽいかも？

まとめ

concrete5を使った制作のお役に立てれば幸いです。

Version 8が出ているのになんで5.7やねんというツッコミが来そうですが。大人の事情をお察しください。

concrete5の最新バージョン「concrete5 Version 8」はExpressと呼ばれるkintoneチックなデータベースを作れる機能が追加されるなど更に進化をしています。

興味がある方は、ぜひ最新バージョンをダウンロードして使ってみましょう！

https://concrete5-japan.org/

2017年1月25日には、8.1.0もリリースされています！

https://concrete5-japan.org/news/concrete5-810/

【concrete5】concrete5 ver5.7のフォームに自動返信機能をつける方法

concrete5のフォームブロックには、自動返信機能が無い！

concrete5のフォームブロックにはフォームを送信してくれた人に対する自動返信の機能が付いていません。

企業サイトでは自動返信をお客様に対して送信ほしい。という事をよく言われるので自動応答出来ないとちょっと困りますよね。

アドオンや外部フォームを使うなどの実現方法もありますが、わりと簡単に自動返信機能のカスタマイズは行なえますので、その方法をご紹介します。

自動返信メールの設定手順

以下の流れで自動返信機能を追加します。コピペで出来ると思うので、怖がらずにチャレンジしてみてくださいね。

フォームブロックを使ってフォームを作る
自動返信メールの雛形を作成する
フォームブロックに自動返信処理を追加する

1. フォームブロックを使ってフォームを作る

普通にフォームブロックを使ってフォームを作りますが、メールアドレスフィールドの設定を忘れないようにしましょう！

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信】にチェックを入れる

このアドレスに自動返信することになります。もちろん必須入力にすることをお忘れなく。

補足：サイト管理者へのフォーム送信通知メールの設定も忘れないように

フォームの送信があった時に、サイト管理者へメールで通知出来るように以下の設定も忘れないようにしましょうね。意外と忘れがちなので。

2. 返信メールの本文を作成する

ココからは、concrete5のapplicationフォルダに必要なファイルを追加していきます。

GitHubにサンプルファイルを置いたので、まずは以下からダウンロード下さい。

GitHubから雛形をダウンロードする

以下に自動返信処理の雛形を置いたのでダウンロードしてきて下さい。

利用するのはapplicationフォルダ配下のみです。

https://github.com/onocom/concrete5-formblock-auto-reply-skeleton

2.自動返信メールの雛形を作成する

GitHubからダウンロードしたファイルの中から以下のファイルを開きます。

/application/mail/block_form_auto_reply.php

このファイルが自動返信メールで利用されるメールテンプレートになります。
開いたら、以下部分の冒頭文・署名を好きな文言に書き換えます。

$body = t("
ホームページからのお問い合わせありがとうございます。
以下の内容で承りました。
%s
──────────────────────────────────────────
サンプル株式会社
http://example.com/
住　　所：愛知県名古屋市
電話番号：XXX-XXX-XXXX
", $submittedData);

$body = t("

ホームページからのお問い合わせありがとうございます。

以下の内容で承りました。

──────────────────────────────────────────

サンプル株式会社

http://example.com/

住　　所：愛知県名古屋市

電話番号：XXX-XXX-XXXX

", $submittedData);

3.フォームブロックに自動返信処理を追加する

次は、自動返信処理を追加していきます。

と言っても、先ほどGitHubよりダウンロードしたPHPファイルに送信処理は記述しておいたので、送信元メールアドレスや、送信者名、メールの件名等のパラメータを変更してあげるだけで良いかと思います。

GitHubからダウンロードしたファイルの中から以下のファイルを開きます。

/application/blocks/form/controller.php

580行目あたりから始まる以下の部分を書き換えていきます。

// ---------------------------------------------------------------
// 自動返信処理 Auto Reply
// ---------------------------------------------------------------
// --------- 編集が必要なのはココから
$myFromName = "山田 太郎"; // 送信者名
$myFromAddress = "myaddress@example.com"; // 送信者メールアドレス
$myMailTitle = "お問い合わせありがとうございます"; // メールの件名
$myMailTemplate = "block_form_auto_reply"; // メールのテンプレート名
// --------- 編集が必要なのはココまで

$mh = Core::make('helper/mail');
$mh->to($replyToEmailAddress);
$mh->from($myFromAddress,$myFromName);
$mh->addParameter('questionAnswerPairs', $questionAnswerPairs);
$mh->load($myMailTemplate);
$mh->setSubject($myMailTitle);
@$mh->sendMail();
// ---------------------------------------------------------------
// / 自動返信処理 Auto Reply 
// ---------------------------------------------------------------

// ---------------------------------------------------------------

// 自動返信処理 Auto Reply

// ---------------------------------------------------------------

// --------- 編集が必要なのはココから

$myFromName = "山田太郎"; // 送信者名

$myFromAddress = "myaddress@example.com"; // 送信者メールアドレス

$myMailTitle = "お問い合わせありがとうございます"; // メールの件名

$myMailTemplate = "block_form_auto_reply"; // メールのテンプレート名

// --------- 編集が必要なのはココまで

$mh = Core::make('helper/mail');

$mh->to($replyToEmailAddress);

$mh->from($myFromAddress,$myFromName);

$mh->addParameter('questionAnswerPairs', $questionAnswerPairs);

$mh->load($myMailTemplate);

$mh->setSubject($myMailTitle);

@$mh->sendMail();

// ---------------------------------------------------------------

// / 自動返信処理 Auto Reply

// ---------------------------------------------------------------

コメントにあるとおり、送信者名（$myFromName)・送信者のメールアドレス（$myFromAddress）・メールの件名（$myMailTitle）を書き換えます。

メールのテンプレート名（$myMailTemplate）は基本的にこのままで大丈夫ですが、オリジナルのメールテンプレートを利用したい場合は、ここにそのテンプレート名を設定します。

4. ファイルをアップロードしよう

編集が終わったら編集を行った以下の2ファイルをサーバ上の同じディレクトリにアップします。

mailディレクトリやblocksディレクトリ、formディレクトリが存在しない場合は、作成します。必ず、このパスになるようにファイルを配置しましょう。

/application/mail/block_form_auto_reply.php
/application/blocks/form/controller.php

※ もし上記ファイルが既に存在している場合、ファイル比較ソフトを利用するなどして慎重にマージして下さい。

これで多分おそらく、フォームに自動返信機能が付加されているはずです。

試しに送信することをお勧めします。

まとめ

まだまだ改善の余地はありますが、少しばかりの道筋は示せたかと思います。

このカスタマイズ方法がご参考になれば幸いです。

改善の余地

必要な関数のみオーバーライドしたほうがメンテナンス性高そう。

複数フォームが設置されている場合のことをもう少し考慮したほうが良い。

concrete5 Version8が出てるけど動くかは検証出来ていない。

動作確認環境

concrete5 Version – 5.7.5.13

【Adobe Photoshop CC 2017】カラーピッカーが壊れた・おかしい！いつもと違う！Windows標準のカラーピッカーだ！という時の解決方法

突然Photoshopのカラーピッカーが壊れた!?
何をやってもWindows標準のカラーピッカーが表示される!!

なぜだ！Photoshopのカラーピッカー(色を選択する画面)が突然、壊れた！

なぜかWindows標準のカラーピッカーになってる！ワークスペースを変更しても駄目で、再起動しても駄目。

検索しても出てこなかった（検索ワードが思いつかなかった）のでメモ。

環境設定をいつの間にか触っていたのが原因でした。（情けない）

表示されたWindowsのカラーピッカー

WordとかExcelでたまに見るようなやつ。いつの間にこんな設定になったんや！記憶にない（泣）

16進数のRGBが表示されないし、作業が進まぬ。

【解決策】環境設定を確認・変更しよう

この問題を解決するには、環境設定を確認します。

メニューバー＞編集＞環境設定＞一般を選択して環境設定ウィンドウを開きます。

環境設定ウィンドウの【カラーピッカー】という項目が「Windows」になっていました！いつの間に！！！

これを選択して「Adobe」に変更するだけです。

これでカラーピッカーがWindows標準の味気ないカラーピッカーから、Adobeのカラーピッカーに戻りました。

やったー！

まとめ

ワークスペースの変更やらPhotoshopの再起動など色々試して時間を浪費してしまいました。意外とすんなり解決してスッキリ。

きっと他の設定をした時に気づかずに変更してしまったのだと思います。

勉強になりました。

【Windows】hostsファイルとは、hostsファイルの場所、hostsファイルの編集・書き換え方法

hostsファイルとは

hostsファイル・・・ホスツファイルと読む。

DNSより先に参照されるIPアドレスとドメイン名の一覧のこと。

ここにIPアドレスとドメイン名を対にして記載しておくことにより、DNSが応答しないときや、Webサイトを新サーバで構築する時などに活用できる。

hostsファイルを扱うにあたって、事前にネットワークやDNSの仕組みを知っておくとよいかも。

hostsファイルの場所一覧（Windowsの場合）

WindowsのhostsファイルはOS毎に違うのかな。と思って一覧にしたけど同じっぽい。(Windows 10以外はネットで調べました)

Macユーザの方はこちらの記事をどうぞ。[2019年7月17日追記]

●Windows 10のhostsファイル

C:\Windows\System32\drivers\etc\hosts

●Windows 8 / Windows 8.1のhostsファイル

C:\Windows\System32\drivers\etc\hosts

●Windows 7のhostsファイル

C:\Windows\System32\drivers\etc\hosts

●Windows Vistaのhostsファイル

C:\Windows\System32\drivers\etc\hosts

hostsファイルの書き方

hostsファイルをメモ帳やエディタで開き、末尾や任意の行に以下の形式でIPアドレスとホスト名の対応を記述する。

記述形式

IPアドレス（スペース or タブ） ホスト名

1	IPアドレス（スペース or タブ）ホスト名

記述例

8.8.8.8     example.com

1	8.8.8.8 example.com

先頭に#を入れることでコメントも使える。

# ウェブサイト構築用の設定でやんす   ←これはコメント
8.8.8.8    example.com

1 2	# ウェブサイト構築用の設定でやんす ←これはコメント 8.8.8.8 example.com

補足・注意事項

hostsファイルを編集するには管理者権限が必要。

メモ帳を開く際に、【メモ帳アイコンを右クリック→管理者として実行】をしてからhostsファイルを開くと編集出来る。

詳しくはMicrosoftのナレッジベースに記載されている。

Windows Vista で Hosts ファイルや Lmhosts ファイルを変更できない
https://support.microsoft.com/ja-jp/kb/923947

Windows 10でも似たようなもんです。

書き換えてから再起動が必要になる場合もある。という記述をウェブ上にチラホラ見かけたけど、Windows 10では再起動の必要はなさそう(実体験)。

DNSより先に参照されることを忘れずに。

DNSよりも先に参照されるので、DNSの設定を変えたのに、古いサーバから新しいサーバに参照先が変わってくれない！ということが起きることもあるかと。

気をつけよう。

まとめ

hostsファイルは慎重に扱いましょう。

普段あまりhostsファイル弄らないんだけど、皆弄ること多いのかな？

フリーソフトを使って手軽に更新する方法も

コメントで「Hosts File Manager」というフリーソフトをご紹介いただきました。（ありがとうございます。）

以下からダウンロードいただけますので、hostsファイルを直接触るのは怖いという方は、ご活用されては。

http://softwarefactory.jp/ja/products/hostsfilemanager/

【WP】WordPressのPress This機能を応用して超個人的なブックマークサイトを作った話

どうも、小野です。個人的なブックマークサイトを作りました。

onocom.bookmark
http://onocom.net/bookmark/

私がネットサーフィンをする中で見つけたサイト、デザインの参考になりそうなサイト、Amazonの面白かった動画等をざっくばらんにブックマークし、後日私が活用するためのサイトです。

ブックマークをいかにしやすくするかといところに焦点をおいた結果、Press Thisという機能を活用するに致しました。

今回はこのサイトを作る過程で肝となった「Press This」という機能とそのカスタマイズ方法をご紹介致します。

WordPressのPress Thisという機能をご存知ですか？

WordPressにひっそりと佇むPress Thisという機能をご存じでしょうか？

この機能の画面を見たことはあるけど、使ったことがない！という人がほとんどなのではないでしょうか？かくいう私も全然使っていませんでした。

ちなみに、Press Thisには以下のようにアクセスします。
管理画面 → ツール → 利用可能なツール

Press Thisとは

PressThisとは、外部サイトの紹介記事など書く際に、引用等の負担を減らし、効率よく記事を書くためのツールのことです。

WordPressのCODEX日本語版には以下のような説明がされています。

Press This
「Press This」とは、Web ブラウザのブックマーク（お気に入り）を使って WordPress に素早く投稿・発信できる機能です。「Press This」を使うにはツール画面からブックマークレットを作成し、Web サイトを見ている間に引用したいテキスト、画像、動画などを見つけたら、そのブックマークレットを選択して起動します。

Press Thisの使い方

せっかくなのでPress Thisの使い方を動画にしてみました。

途中エラーになったりしていますが取り敢えずPress This、なんかの役にたちそうやなぁっていうのはご確認頂けるのではないでしょうか？

Press Thisを活用して簡単にブックマーク記事を投稿出来るサイトを作った

今回、このPress Thisの機能を使って個人的なブックマークサイトを作ったのでご紹介したいと思います。

onocom.bookmark
http://onocom.net/bookmark/

なぜこんなサイトを作ったかと言うと、Chromeのブックマークバーのブックマークが多くなりすぎて、同じサイトのブックマークを何個もしていることがあったから。そんな状況では、そもそもブックマークの意味が無い。

自分のブックマークを横断的に調べられたらいいなぁというのと、面白そうやなぁということで、こんなサイトを作りました。

はてなブックマーク使えば解決するのかもしれませんが、まぁ要するに自己満足です。

このサイトはウェブサービスでもなんでもなく、ただのWordPressのサイトを更新しやすくしただけなので、以下に書き記すことは、onocom.bookmarkの閲覧者には何のメリットももたらしません！

肝になるプログラム

このサイトの肝はPress Thisの本文からPress ThisしようとしてるサイトのURLを取得し、画面キャプチャを自動挿入しているところです。

そうすることで、ブックマークしたいURLにリンクする手間や画面キャプチャを取る手間を省き、一言コメントを入れつつブックマークする(投稿する)事が可能になります。

ブックマークするだけなのにいちいちURLをコピーして・・・なんてやってられないですからね。

それを可能にしたのは、【 press_this_save_post 】というフィルターフックです。

該当のフィルターフックを使ってPress Thisで投げられたコンテンツ（本文）を以下のように書き換えています。

また、自動で対象のサイトからメディアを取得するのを防ぐために【enable_press_this_media_discovery】フィルターフックをfalseに設定しています。

<?php
add_filter( 'enable_press_this_media_discovery', '__return_false' );
add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {
    
    $url = "";
    // 本文からURLを抽出する
    $content = trim($post_data['post_content']);
    $pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';
    $result = preg_match($pattern, $content, $match);
    
    if( $result !== 0 && $result !== false ) {
        // デフォルトの情報源という表示は消して、別の方法でリンクを表示
        $content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);
        $url = $linkurl = $match[0];
        $html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';
        
        // サイトのサムネイルをwordpress.comのサービスを利用して取得
        $html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';
        
        // 保存するコンテンツを組み立てる
        $post_data['post_content'] = $content . $html;
    }

    return $post_data;
}

<?php

add_filter( 'enable_press_this_media_discovery', '__return_false' );

add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {

$url = "";

// 本文からURLを抽出する

$content = trim($post_data['post_content']);

$pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';

$result = preg_match($pattern, $content, $match);

if( $result !== 0 && $result !== false ) {

// デフォルトの情報源という表示は消して、別の方法でリンクを表示

$content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);

$url = $linkurl = $match[0];

$html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';

// サイトのサムネイルをwordpress.comのサービスを利用して取得

$html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';

// 保存するコンテンツを組み立てる

$post_data['post_content'] = $content . $html;

}

return $post_data;

}

たったこれだけでPress Thisを使いやすくカスタマイズ出来ました。

めっちゃ簡単！

実際にブックマークする（投稿する）様子を動画にしました。

上記のカスタマイズのおかげで、簡単にブックマークを投稿できるサイトが出来上がりました。しかも画面キャプチャ付きだから、分かりやすい！

https://youtu.be/fabm28w6FKs

地味な機能を弄る喜び

Press This使っている人に出会ったことがないのですが、このブックマークサイトを作ってみて、これは何か他にも使えそうな予感がしました。

そして、誰もいじっていないであろう地味な機能をカスタマイズするっていうのは自己満足するにはピッタリでありました。

皆様も参考に頂ければ幸いです。

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

目次

困った：ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

サブディレクトリにconcrete5をインストールしてルート（/）で公開したい

やりたいこと

修正・作成するファイル

/.htaccess の修正内容

/concrete5/.htaccess の修正内容

/concrete5/index.php の修正内容

動作確認する

記事ブロックのWYSIWYGエディタ（Redactor）の挙動を変更したい

やりたいこと

修正・追加するファイル

/application/bootstrap/app.php を修正する

/application/src/Editor/RedactorEditor.php を追加する

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利！スイトン（SUITON）確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる！

インストール方法・使い方

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php

home.php

エラー発生内容

対処方法

まとめ

concrete5のフォームブロックには、自動返信機能が無い！

自動返信メールの設定手順

1. フォームブロックを使ってフォームを作る

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信 】にチェックを入れる

補足：サイト管理者へのフォーム送信通知メールの設定も忘れないように

2. 返信メールの本文を作成する

GitHubから雛形をダウンロードする

2.自動返信メールの雛形を作成する

3.フォームブロックに自動返信処理を追加する

4. ファイルをアップロードしよう

まとめ

改善の余地

動作確認環境

突然Photoshopのカラーピッカーが壊れた!? 何をやってもWindows標準のカラーピッカーが表示される!!

表示されたWindowsのカラーピッカー

【解決策】環境設定を確認・変更しよう

まとめ

hostsファイルとは

hostsファイルの場所一覧（Windowsの場合）

●Windows 10のhostsファイル

●Windows 8 / Windows 8.1のhostsファイル

●Windows 7のhostsファイル

●Windows Vistaのhostsファイル

hostsファイルの書き方

記述形式

記述例

補足・注意事項

hostsファイルを編集するには管理者権限が必要。

DNSより先に参照されることを忘れずに。

まとめ

フリーソフトを使って手軽に更新する方法も

WordPressのPress Thisという機能をご存知ですか？

Press Thisとは

Press This

Press Thisの使い方

Press Thisを活用して簡単にブックマーク記事を投稿出来るサイトを作った

肝になるプログラム

実際にブックマークする（投稿する）様子を動画にしました。

地味な機能を弄る喜び

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信】にチェックを入れる

突然Photoshopのカラーピッカーが壊れた!?
何をやってもWindows標準のカラーピッカーが表示される!!