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は、Drupal 7の時と同様に便利です。
Drupal 8もベータ版になり、正式版のリリースまでもう少しになりました。
コアにSymfonyのコンポーネントが組み込まれたということで、内部的には大きな変化があったと思います。
Symfony自体は使っていないのですが、同じくSymfonyをベースにしたLaravelを最近使うようになったので、興味深いところもあります。
アルファ版が長かったことを考えると、正式版が出るまでにはかなりの時間を要するかもしれませんが、今後が非常に楽しみです。
Drupal 7でブログやニュースなどの記事一覧で、月別アーカイブを設置することがあります。
Viewsではデフォルトでこの機能が搭載されていて、「contextual filter」の作成年月のフィルターをかけたブロックを作成することで実現できます。
標準の月別アーカイブブロックは、次のように表示されます。
月が始めにくる英語圏に合わせた表記なので、日本語サイトでは違和感があります。
「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> |
このテンプレートファイルをお使いのテーマディレクトリにコピーして、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); ?> |
上記の変更により、月別アーカイブの表示が次のようになります。
- 2014年 8月
- 2014年 7月
- 2014年 6月
「node.tpl.php」などのテンプレートに直接ブロックを表示する方法はいくつかあります。
「サイト構築 > ブロック」で追加したカスタムブロックでは主に下記の3つの方法があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
<?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']); ?> |
上記はViewsの場合ですが、モジュール名とブロックのデルタ名(test-block)を引数にとります。
デルタ名は「サイト構築 > ブロック」にアクセスして、該当するブロックの設定ページのアドレスから確認できます。
|
/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); ?> |
Viewsの場合であれば、この方法が最もシンプルで利便性が高いです。
近年は大容量化や同期機能など、充実したサービスを提供しているオンラインストレージ。仕事でも便利に使わせてもらっています。
そんなストレージの中で、使い勝手の良さそうなサービスを10点あげてみました。
オンラインストレージ無料会員の比較
DropboxとSugarSyncは国内でも以前からサービスを提供していて、利用されている方も多いのではないでしょうか。PC用、スホ用アプリもこなれていて、使いやすいです。
Boxは海外では老舗の会社で、Webアプリケーションは良くできているように思います。1ファイルの容量制限が250MBというのがやや残念ですが・・・。
Copyはまだ新しいサービスで、無料会員の容量も15GBと大きいです。また紹介するごとに5GB増えていくのも嬉しいです。
Bitcasaは無料会員だと10GBですが、有料会員では容量無制限という魅力的なサービスです。
自分の環境では、デバイス間のデータの同期用にDropboxを、仕事でファイルを渡す際にはSugarSyncを、バックアップ目的にBitcasaを利用しています。
無料で使えるオンラインストレージの活用方法を考えてみるもの、なかなか楽しい作業です。
jQueryを使って、ウィンドウサイズに合わせて画像を拡大縮小し、全面に表示する方法です。
画像の縦横比率は保ったままに、ウィンドウの全面を覆うように拡大縮小を行っています。ウィンドウのリサイズの際には、画像もアニメーションでリサイズします。
サンプルはこちら
HTMLファイル内では、画像全面表示のための関数の実行と、ウィンドウリサイズ時の処理を記述しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
|
<!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> |
外部JavaScriptファイル「functions.js」に、画像全面表示のための関数を記述しています。
ウィンドウを覆い尽くすように画像サイズを拡大縮小して、センター表示にしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
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; } |