Almondlab

jQueryで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

$(function() {
	$("#test").on("load", function() { //object読み込み後に実行
		var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得
		var circle = rect.find("#circle"); //SVGの中の円を取得
		circle.on({
			"mouseenter": function() {
				$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に
			},
			"mouseleave": function() {
				$(this).css({opacity:1}); //マウスアウトで透明度を1に
			}
		});
	});
});

$(function() {

$("#test").on("load", function() { //object読み込み後に実行

var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得

var circle = rect.find("#circle"); //SVGの中の円を取得

circle.on({

"mouseenter": function() {

$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に

"mouseleave": function() {

$(this).css({opacity:1}); //マウスアウトで透明度を1に

}

});

「test.svg」ファイルの中身はこちら

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="circle" fill="#333333" cx="50" cy="50" r="50"/>
</svg>

</svg>

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。

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サイトマップを自動生成してくれます。コンテンツタイプや、個別ノードごとに含めるかどうかの設定もできます。

Drupal 7でテンプレート内でのリダイレクト。

2015.04.20 / Labs

Drupal 7で「page.tpl.php」などのテンプレート内でリダイレクト処理のメモです。
カレントユーザーがログインしていない場合には、次のような記述でログインページにリダイレクトできます。

<?php
if (!$logged_in) {
	drupal_goto('user/login', array('query' => array('destination' => 'home')));
}
?>

<?php

if (!$logged_in) {

drupal_goto('user/login', array('query' => array('destination' => 'home')));

}

パラメータの「destination」にURLを入れることで、ログイン後に該当ページへ移動することもできます。

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);

});

}