Labs

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を最近使うようになったので、興味深いところもあります。
アルファ版が長かったことを考えると、正式版が出るまでにはかなりの時間を要するかもしれませんが、今後が非常に楽しみです。

Drupal 7のViewsによる月別アーカイブの表示をカスタマイズ。

2014.08.03 / Labs

Drupal 7でブログやニュースなどの記事一覧で、月別アーカイブを設置することがあります。
Viewsではデフォルトでこの機能が搭載されていて、「contextual filter」の作成年月のフィルターをかけたブロックを作成することで実現できます。
標準の月別アーカイブブロックは、次のように表示されます。

8月 2014
7月 2014
6月 2014

月が始めにくる英語圏に合わせた表記なので、日本語サイトでは違和感があります。
「2014年 8月」のように順番を逆にするには、Views内の設定画面では行えず、Views自体のモジュールを変更する必要があります。
将来的なモジュールのバージョンアップを考えると、モジュール本体に手を加えるのは避けたいところです。
他の方法としては、Viewsで作成されたブロックのテンプレートファイルを修正する方法もあります。

下記はシステムデフォルトのブロックテンプレートファイル（modules/block/block.tpl.php）です。

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php print render($title_prefix); ?>
<?php if ($block->subject): ?>
  <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
<?php endif;?>
  <?php print render($title_suffix); ?>

  <div class="content"<?php print $content_attributes; ?>>
    <?php print $content ?>
  </div>
</div>

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

<?php print render($title_prefix); ?>

<?php if ($block->subject): ?>

<h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2>

<?php endif;?>

<?php print render($title_suffix); ?>

<?php print $content ?>

</div>

このテンプレートファイルをお使いのテーマディレクトリにコピーして、Viewsの月別アーカイブブロックに合わせてファイル名を書き換えます。
例えば「news」という名称のViewsで「block-1」の場合には「block–views–news-block-1.tpl」というファイル名に変更します。
テンプレートのファイル名を変更することによって、月別アーカイブでのみ使用するブロックとなります。

この中の「<?php print $content ?>」という部分がブロックの本文になります。
今回はブロック本文を正規表現で「8月 2014」を「2014年 8月」に書き換える処理を施します。

<?php print $content ?>

//次のように変更します

<?php print preg_replace('/<a\s(.*?)>(.*?)\s(.*?)<\/a>/', '<a $1>$3年 $2</a>', $content); ?>

<?php print $content ?>

//次のように変更します

<?php print preg_replace('/<a\s(.*?)>(.*?)\s(.*?)<\/a>/', '<a $1>$3年 $2</a>', $content); ?>

上記の変更により、月別アーカイブの表示が次のようになります。

2014年 8月
2014年 7月
2014年 6月

Drupal 7でテンプレート内にブロックを表示させる方法。

2013.08.24 / Labs

「node.tpl.php」などのテンプレートに直接ブロックを表示する方法はいくつかあります。
「サイト構築　＞　ブロック」で追加したカスタムブロックでは主に下記の3つの方法があります。

<?php
//ブロックID = 1

$block = block_custom_block_get(1);
$content = $block['body'];
print $content;

//または

$block = block_load('block', 1);
$block_render = _block_render_blocks(array($block));
$block_array = _block_get_renderable_array($block_render);
$block_content = drupal_render($block_array);
print $block_content;

//または

$block = module_invoke('block', 'block_view', 1);
print render($block['content']);
?>

<?php

//ブロックID = 1

$block = block_custom_block_get(1);

$content = $block['body'];

print $content;

//または

$block = block_load('block', 1);

$block_render = _block_render_blocks(array($block));

$block_array = _block_get_renderable_array($block_render);

$block_content = drupal_render($block_array);

print $block_content;

//または

$block = module_invoke('block', 'block_view', 1);

print render($block['content']);

最初の「block_custom_block_get()」はブロックIDを引数に渡して、ブロックの情報を取得します。
2番目の「block_load()」はDrupal 7から導入された機能で、やや冗長になってしまい、あまり使いやすくはありません。
3番目の「module_invoke()」はモジュールとしてのblockとして情報を取得します。
2番目と3番目に関してはカスタムブロックのほかに、下記に記述するViewsなどのモジュールでも利用できます。

<?php
//モジュール = views
//viewsの名前 = test
//ブロックid = block

$block = block_load('views', 'test-block');
$block_render = _block_render_blocks(array($block));
$block_array = _block_get_renderable_array($block_render);
$output = drupal_render($block_array);
print $output;

//または

$block = module_invoke('views', 'block_view', 'test-block');
print render($block['content']);
?>

<?php

//モジュール = views

//viewsの名前 = test

//ブロックid = block

$block = block_load('views', 'test-block');

$block_render = _block_render_blocks(array($block));

$block_array = _block_get_renderable_array($block_render);

$output = drupal_render($block_array);

print $output;

//または

$block = module_invoke('views', 'block_view', 'test-block');

print render($block['content']);

上記はViewsの場合ですが、モジュール名とブロックのデルタ名（test-block）を引数にとります。

デルタ名は「サイト構築　＞　ブロック」にアクセスして、該当するブロックの設定ページのアドレスから確認できます。

/admin/structure/block/manage/views/test-block/configure

1	/admin/structure/block/manage/views/test-block/configure

Viewsの場合「CONTEXTUAL FILTERS」で引数を与えたい場合には、次の「views_embed_view()」で可能です。

<?php
//viewsの名前 = test
//ブロックid = block
//引数 = 1 (nidなど)

$block = views_embed_view('test', 'block', 1);
print render($block);
?>

<?php

//viewsの名前 = test

//ブロックid = block

//引数 = 1 (nidなど)

$block = views_embed_view('test', 'block', 1);

print render($block);

Viewsの場合であれば、この方法が最もシンプルで利便性が高いです。

オンラインストレージの比較

2013.07.17 / Labs

Online Storage

近年は大容量化や同期機能など、充実したサービスを提供しているオンラインストレージ。仕事でも便利に使わせてもらっています。
そんなストレージの中で、使い勝手の良さそうなサービスを10点あげてみました。

オンラインストレージ無料会員の比較

サービス名	容量	紹介リンク	ファイルサイズ制限	同期機能	備考
Dropbox	2GB	500MB	無制限（Webからは300MB）	○
SugarSync	5GB	500MB	無制限（Webからは100MB）	○
Google Drive	15GB	—	10GB	○	Gmailなどの容量との合計で
Box	5GB	—	250MB	○
Copy	15GB	5GB	無制限	○
SkyDrive	7GB	—	2GB（Webからは300MB）	○
Amazon Cloud Drive	5GB	—	2GB	○
Pogoplug	5GB	—	無制限	○
Bitcasa	10GB	—	無制限	△	デバイス間の同期機能はなし
4sync	15GB	—	2GB	△	Mac用デスクトップアプリはなし

DropboxとSugarSyncは国内でも以前からサービスを提供していて、利用されている方も多いのではないでしょうか。PC用、スホ用アプリもこなれていて、使いやすいです。
Boxは海外では老舗の会社で、Webアプリケーションは良くできているように思います。1ファイルの容量制限が250MBというのがやや残念ですが・・・。
Copyはまだ新しいサービスで、無料会員の容量も15GBと大きいです。また紹介するごとに5GB増えていくのも嬉しいです。
Bitcasaは無料会員だと10GBですが、有料会員では容量無制限という魅力的なサービスです。

自分の環境では、デバイス間のデータの同期用にDropboxを、仕事でファイルを渡す際にはSugarSyncを、バックアップ目的にBitcasaを利用しています。
無料で使えるオンラインストレージの活用方法を考えてみるもの、なかなか楽しい作業です。

ウィンドウサイズに合わせて画像を全面に表示。

2012.08.10 / Labs

jQueryを使って、ウィンドウサイズに合わせて画像を拡大縮小し、全面に表示する方法です。
画像の縦横比率は保ったままに、ウィンドウの全面を覆うように拡大縮小を行っています。ウィンドウのリサイズの際には、画像もアニメーションでリサイズします。
サンプルはこちら

HTMLファイル内では、画像全面表示のための関数の実行と、ウィンドウリサイズ時の処理を記述しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Adjust Image</title>
<link rel="stylesheet" type="text/css" href="common/css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.easing-1.3.min.js"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	var time = 1000;
	var time_resize = null;
	var image = $("div#image");
	$(window).bind("load", function() {
	adjustImage(image, 0);
		$(window).resize(function() {
			if (time_resize) {
				clearTimeout(time_resize);
			}
			time_resize = setTimeout(function() {adjustImage(image, time)}, 100);
		});
	});
});
</script>
</head>
<body>



<div id="image">
<div class="inner">
<img src="images/image.jpg" alt="" />
</div><!-- inner -->
</div><!-- image -->



</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Adjust Image</title>

$(function() {

var time = 1000;

var time_resize = null;

var image = $("div#image");

$(window).bind("load", function() {

adjustImage(image, 0);

$(window).resize(function() {

if (time_resize) {

clearTimeout(time_resize);

}

time_resize = setTimeout(function() {adjustImage(image, time)}, 100);

});

</script>

</head>

<body>

</div>

</div>

</body>

</html>

外部JavaScriptファイル「functions.js」に、画像全面表示のための関数を記述しています。
ウィンドウを覆い尽くすように画像サイズを拡大縮小して、センター表示にしています。

function adjustImage(image, time) {
	var image_width = image.find("img").width();
	var image_height = image.find("img").height();
	var width = 0;
	var height = 0;
	var margin_left = 0;
	var margin_top = 0;
	var ratio_outer = $(window).width()/$(window).height();
	var ratio_inner = image_width/image_height;
	if (ratio_outer > ratio_inner) {
		width = $(window).width();
		height = width/ratio_inner;
	} else {
		height = $(window).height();
		width = height*ratio_inner;
	}
	margin_left = Math.floor(($(window).width()-width)/2);
	margin_top = Math.floor(($(window).height()-height)/2);
	image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});
	image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});
}

function adjustImage(image, time) {

var image_width = image.find("img").width();

var image_height = image.find("img").height();

var width = 0;

var height = 0;

var margin_left = 0;

var margin_top = 0;

var ratio_outer = $(window).width()/$(window).height();

var ratio_inner = image_width/image_height;

if (ratio_outer > ratio_inner) {

width = $(window).width();

height = width/ratio_inner;

} else {

height = $(window).height();

width = height*ratio_inner;

}

margin_left = Math.floor(($(window).width()-width)/2);

margin_top = Math.floor(($(window).height()-height)/2);

image.find("img").animate({width:width, height:height}, {duration:time, easing:"easeOutQuart"});

image.animate({top:margin_top, left:margin_left}, {duration:time, easing:"easeOutQuart"});

}

画像表示のためのCSSの箇所は次のようになっています。

div#image {
	position: fixed;
	overflow: hidden;
}
div#image div.inner {
	position: relative;
}

div#image {

position: fixed;

overflow: hidden;

}

div#image div.inner {

position: relative;

}