Notes

Drupal8でTwigキャッシュの無効化。

2015.11.16 / Notes

Drupal8でテーマ作成時などに、Twigのキャッシュを無効化する際のメモです。
次の2点のファイルに、それぞれ記述します。

sites/default/settings.php

$settings['container_yamls'][] = DRUPAL_ROOT.'/sites/development.services.yml';
$settings['cache']['bins']['render'] = 'cache.backend.memory';

1 2	$settings['container_yamls'][] = DRUPAL_ROOT.'/sites/development.services.yml'; $settings['cache']['bins']['render'] = 'cache.backend.memory';

sites/development.services.yml

  cache.backend.memory:
    class: Drupal\Core\Cache\MemoryBackendFactory
parameters:
  twig.config:
    debug : true
    auto_reload: true
    cache: false

cache.backend.memory:

class: Drupal\Core\Cache\MemoryBackendFactory

parameters:

twig.config:

debug : true

auto_reload: true

cache: false

上記を記述後に「管理　＞　環境設定　＞　パフォーマンス」ページで、一度だけキャッシュをクリアーする必要があります。

JavaScriptライブラリの読み込みにCDNを活用。

2015.07.17 / Notes

jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。

主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。

jQueryの最新版をそれぞれ読み込む場合、次のようになります。

<!-- Google Hosted Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Microsoft Ajax Content Delivery Network -->
<script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

<!-- jsDelivr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- cdnjs.com -->
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>

複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。

jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。

<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script>

1	<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script>

DrupalでSEO対策に便利なモジュールいくつか。

2015.05.31 / Notes

Drupalでサイトを構築する際に、SEO対策として導入すると効果のあるモジュールを紹介します。

Pathauto: コアモジュールの「Path」でノードごとにURLエイリアスを付けることができますが、「Pathauto」ではURLエイリアスの命名をパターン化して、自動で付けることができます。
Global Redirect: 各ノードにURLエイリアスを付けた際でも、もともとの「/node/1」のURLでもアクセスできてしまいますが、このモジュールでは強制的にURLエイリアスに転送してくれます。
Page title: コンテンツのタイトルとは別に、head内のタイトルを設定することができます。コンテンツタイプごとにパターンを設定することもできます。
Metatag: 各ページのDescriptionなどのMetaタグを詳細に設定することができます。SNS向けのOGPにも対応しています。
Menu attributes: サイト内のメニュー項目に対して、Nameなどの属性を追加することができます。ID、Classも付加できますので、CSSでデザインする場合にも有効です。
XML sitemap: 検索エンジンのクローラー向けに、XMLサイトマップを自動生成してくれます。コンテンツタイプや、個別ノードごとに含めるかどうかの設定もできます。

jQueryによる画像プリロード。

2015.02.02 / Notes

CSSを使ってボタンのロールオーバーで画像を差し替えなどの処理の際に、画像が読み込まれていない状態では一瞬ちらつきが発生することがあります。
ロールオーバー用の画像をあらかじめ読み込むために、jQueryを使って画像をプリロードするためのメモです。

//プリロードする画像を配列で渡します
priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]);

function preloadImages(images) {
	$.each(images, function(index, value) {
		$("<img>").attr("src", value);
	});
}

//プリロードする画像を配列で渡します

priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]);

function preloadImages(images) {

$.each(images, function(index, value) {

$("<img>").attr("src", value);

});

}

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の設定にある「高度なオプション」に上記を記述することもできます。