Almondlab

CKEditorで画像サイズの指定を変更。

2015.01.12 / Notes

CKEditorの編集画面で画像を挿入すると、デフォルトでは画像のサイズをStyle属性にて指定されます。

<img src="image/jpg" style="width:100px; height:100px;">

1	<img src="image/jpg" style="width:100px; height:100px;">

通常の使用では特に影響はありませんが、レスポンシブデザインの場合、画面サイズに合わせて画像が縮小表示するように、CSSで次のように記述することがあります。

img {
	max-width: 100%;
	height: auto;
}

img {

max-width: 100%;

height: auto;

}

ですがStyle属性でサイズを指定してある場合そちらの方が優先されますので、CSSの設定では期待通りに画像を表示することができません。

CKEditorで編集の際にStyle属性ではなく、従来のwidth、height属性で画像サイズを指定するには、CKEditorの「Enhanced Image」というプラグインをインストールすることで実現することができます。
このプラグインを有効にするためには、次の依存するプラグインも併せてインストールする必要があります。

「Dialog」「Clipboard」については標準で入っていますので、残りの2つを「ckeditor/plugins」ディレクトリに入れます。
その上で設定ファイル「ckeditor/config.js」内に次の一行を追加します。

config.extraPlugins = 'widget,lineutils,image2';

1	config.extraPlugins = 'widget,lineutils,image2';

DrupalでCKEditorを利用している場合、環境設定のCKEditorの設定にある「高度なオプション」に上記を記述することもできます。

jQueryでスワイプ操作のイベントを取得。

2015.01.06 / Labs

jQueryを使ってスマートフォン、タブレットでのスワイプ操作をTouchイベントから取得する方法です。
サンプルはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Touch</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
	$("div#touch").bind("touchstart", onTouchStart);
	$("div#touch").bind("touchmove", onTouchMove);
	$("div#touch").bind("touchend", onTouchEnd);
	var direction, position;
	
	//スワイプ開始時の横方向の座標を格納
	function onTouchStart(event) {
	    position = getPosition(event);
	}
	
	//スワイプの方向（left／right）を取得
	function onTouchMove(event) {
		direction = (position > getPosition(event)) ? "left" : "right";
	}
	
	//スワイプ終了時に方向（left／right）をクラス名に指定
	function onTouchEnd(event) {
		$("div#touch").removeAttr("class").addClass(direction);
	}
	
	//横方向の座標を取得
	function getPosition(event) {
		return event.originalEvent.touches[0].pageX;
	}
});
</script>
<style type="text/css">
div#touch {
	width: 200px;
	height: 200px;
	margin: 0px auto;
	background-color: #e6e6e6;
}
div#touch.left {
	background-color: #ff0000;/* 背景を赤色に */
}
div#touch.right {
	background-color: #0000ff;/* 背景を青色に */
}
</style>
</head>
<body>

<div id="touch"></div><!-- スワイプの対象 -->

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Touch</title>

$(function() {

$("div#touch").bind("touchstart", onTouchStart);

$("div#touch").bind("touchmove", onTouchMove);

$("div#touch").bind("touchend", onTouchEnd);

var direction, position;

//スワイプ開始時の横方向の座標を格納

function onTouchStart(event) {

position = getPosition(event);

}

//スワイプの方向（left／right）を取得

function onTouchMove(event) {

direction = (position > getPosition(event)) ? "left" : "right";

}

//スワイプ終了時に方向（left／right）をクラス名に指定

function onTouchEnd(event) {

$("div#touch").removeAttr("class").addClass(direction);

}

//横方向の座標を取得

function getPosition(event) {

return event.originalEvent.touches[0].pageX;

}

});

</script>

div#touch {

width: 200px;

height: 200px;

margin: 0px auto;

background-color: #e6e6e6;

}

div#touch.left {

background-color: #ff0000;/* 背景を赤色に */

}

div#touch.right {

background-color: #0000ff;/* 背景を青色に */

}

</style>

</head>

<body>

</body>

</html>

上記はスワイプの開始（スクリーンにタッチ）からスワイプの終了（スクリーンから離れる）までの座標の距離を測定して、左右の方向を取得するだけの非常にシンプルなものです。
確認のために、方向によってスワイプ対象DIVの背景色を変えるようにしています。

Drupal 8のテンプレート内で投稿日時のフォーマットを変更する方法。

2014.10.29 / Notes

Drupal 8からテンプレートエンジンがtwigに変更になりましたので、デザインテーマの作成方法も大きく変わりました。
細かい点ですが「node.html.twig」内で投稿日時を任意のフォーマットに変更する際のメモです。

一番シンプルな方法としては、テンプレート内でフォーマットを指定することができます。

node.html.twig

<time class="created">{{ createdtime|date('Y.m.d') }}</time>

1	<time class="created">{{ createdtime\|date('Y.m.d') }}</time>

「createdtime」はタイムスタンプですので、「|」を挟んでフォーマットを指定します。

Drupalでは環境設定に日時のフォーマットを登録していて、デフォルトでは「long」「medium」「short」の3種類があります。
この登録済みのフォーマットを指定する場合には「template_preprocess_node」に変数を用意します。

THEMENAME.theme（THEMENAMEは実際のテーマ名になります）

function THEMENAME_preprocess_node(&$variables) {
	$variables['created'] = format_date($variables['node']->getCreatedTime(), 'medium');
}

function THEMENAME_preprocess_node(&$variables) {

$variables['created'] = format_date($variables['node']->getCreatedTime(), 'medium');

}

「created」という変数（名称は任意で）を設けて、その中に日時のフォーマットを指定した値をいれます。
テンプレート内では次のように記述します。

<time class="created">{{ created }}</time>

1	<time class="created">{{ created }}</time>

後者の方法で日時を指定したほうが、メンテナンス性は高いと思います。

Drupal 8のベータ版をインストール。

2014.10.10 / Labs

10月1日にDrupal 8のベータ版がリリースされましたので、早速テスト環境にインストールしてみました。
少しさわってみた範囲ですが、Drupal 7からの変更点は次のようなものがあります。

Symfonyのコンポーネントをコアに組み込み: SymfonyフレームワークのいくつかのコンポーネントがDrupalコアに組み込まれました。
サイト構築の際に直接影響が出そうなのは、デザインテーマの作成でしょうか。テンプレートエンジンが「Twig」に変更になったので既存テーマに関しては作り替えが必要です。
Viewsモジュールをコアに組み込み: Drupalでは必須と言えるViewsモジュールがコアに組み込まれました。使用感としてはDrupal 7の時のView 3とあまり変わりません。
コアに組み込まれたことにより、管理ページの一部もViewsで生成されています。
スマートフォン、タブレットへの対応: 標準でレスポンシブデザインを採用されていますので、管理メニューが画面サイズによって変化するようになりました。
デフォルトテーマの「Bartik」も、レスポンシブデザイン仕様になっています。
CKEditorをコアに組み込み: 記事作成の際のエディタにCKEditorが組み込まれました。
インストールが簡単に: 日本語を含む多言語のインストールがより簡単になりました。あらかじめ「.po」ファイルを用意する必要はなくなりました。

管理メニューを含むフロントページはDrupal 7から大きな変化はないようです。

記事作成の際に標準でCKEditorが使えるようになりました。
デザインテーマ
Drupal 7から引き続き「Bartik」が標準テーマです。レスポンシブデザイン仕様になっています。
Views
コアに組み込まれたViewsは、Drupal 7の時と同様に便利です。

Drupal 8もベータ版になり、正式版のリリースまでもう少しになりました。
コアにSymfonyのコンポーネントが組み込まれたということで、内部的には大きな変化があったと思います。
Symfony自体は使っていないのですが、同じくSymfonyをベースにしたLaravelを最近使うようになったので、興味深いところもあります。
アルファ版が長かったことを考えると、正式版が出るまでにはかなりの時間を要するかもしれませんが、今後が非常に楽しみです。

MAMP PROでPostfixにGmailを設定のメモ。

2014.09.24 / Notes

Mail
MAMP

MAMP PROのPostfixにGmailを設定して、ローカルからメールを送信する際のメモです。

「ユーザー名」「パスワード」は実際にGmailで使われているものを入力します。
Gmail以外でも一般的なSMTPでしたら問題なく送信できると思います。