Notes

jQueryのプラグイン「jScrollPane」でカスタムスクロールバーを簡単に設置。

2013.10.26 / Notes

デザインをカスタマイズできる、jQueryのプラグイン「jScrollPane」でスクロールバーを簡単に設置する際のメモです。
サンプルはこちら

設置にはjQuery本体と、jScrollPaneプラグインにマウスホイール用のプラグインをあらかじめ読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Panel</title>
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="common/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function() {
$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");
});
</script>
</head>
<body>
<div id="content" class="scroll-pane">
<p>ここにテキストなどのコンテンツを記述します。</p>
</div><!-- content -->
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Scroll Panel</title>

$(function() {

$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");

});

</script>

</head>

<body>

<p>ここにテキストなどのコンテンツを記述します。</p>

</div>

</body>

</html>

スタイルシートは最小限のみを記述しています。

div.jspContainer {
	position: relative;
	overflow: hidden;
}
div.jspPane {
	position: absolute;
}
div.jspVerticalBar {
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0px;
	right: 0px;
	background-color: #e6e6e6;
}
div.jspVerticalBar * {
	margin: 0px;
	padding: 0px;
}
div.jspCap {
	display: none;
}
div.jspTrack {
	position: relative;
}
div.jspDrag {
	position: relative;
	left: 0px;
	top: 0px;
	cursor: pointer;
	background-color: #808080;
}
div.scroll-pane {
	width: 500px;
	height: 250px;
	overflow: auto;
}

div.jspContainer {

position: relative;

overflow: hidden;

}

div.jspPane {

position: absolute;

}

div.jspVerticalBar {

position: absolute;

width: 10px;

height: 100%;

top: 0px;

right: 0px;

background-color: #e6e6e6;

}

div.jspVerticalBar * {

margin: 0px;

padding: 0px;

}

div.jspCap {

display: none;

}

div.jspTrack {

position: relative;

}

div.jspDrag {

position: relative;

left: 0px;

top: 0px;

cursor: pointer;

background-color: #808080;

}

div.scroll-pane {

width: 500px;

height: 250px;

overflow: auto;

}

jScrollPane

OS X 10.9 Mavericksにアップグレード。

2013.10.23 / Notes

本日公開されたOS X 10.9 Mavericksに早速アップグレードしてみました。
今回のアップグレードでは、うれしいことに無料でダウンロードすることができます。

自分の環境ではMac App Storeからダウンロードをしてインストールまでに、およそ1時間くらいかかりました。
一番心配だった、Adobe CCなどソフトの互換性は今のところ問題なさそうです。

システム環境設定のアクセシビリティの設定に変更があったので、TextExpandarやQuickeysの利用にはやや注意が必要です。
Quickeysに関しては2009年以降アップデートがないので、そろそろお別れかもしれません・・・。

Drupal 7でjQuery UIのCSSを変更する方法。

2013.05.02 / Notes

Drupal 7では標準でjQuery UIが搭載されていて、一部のモジュールやオリジナルのテーマに利用することができます。
ただjQuery UIのテーマが基本デザインのものなので、サイトのデザインとマッチしないこともあります。
そのような場合には、オリジナルテーマ内の「template.php」に次のように記述することで、自由に変更することができます。

function THEMENAME_css_alter(&$css) {
	if (isset($css['misc/ui/jquery.ui.theme.css'])) {
		$alter = drupal_get_path('theme', 'THEMENAME').'/ui/jquery.ui.theme.css';
		$css['misc/ui/jquery.ui.theme.css']['data'] = $alter;
	}
}

function THEMENAME_css_alter(&$css) {

if (isset($css['misc/ui/jquery.ui.theme.css'])) {

$alter = drupal_get_path('theme', 'THEMENAME').'/ui/jquery.ui.theme.css';

$css['misc/ui/jquery.ui.theme.css']['data'] = $alter;

}

上記ではオリジナルテーマのディレクトリ内に、「ui」というディレクトリを作成して、ここにjQuery UIのテーマ一式を格納しています。
オリジナルのjQuery UIのテーマの作成には「ThemeRoller」の利用がベターです。

Drupal 7で「node.tpl.php」内に画像スタイルを指定して、画像を表示する方法。

2013.04.23 / Notes

通常はコンテンツタイプの表示の管理で設定した、画像スタイルをもとに「node.tpl.php」テンプレート内で画像を表示します。

//すべての画像
<?php print render($content['field_image']); ?>

//1番目の画像
<?php print render($content['field_image'][0]); ?>

//すべての画像

<?php print render($content['field_image']); ?>

//1番目の画像

<?php print render($content['field_image'][0]); ?>

この場合では複数毎の画像があったときでも、同じ画像スタイルで表示されます。

もし1番目の画像、2番目の画像で画像スタイルを変えたい場合には、次のような方法で実現できます。

//1番目の画像
<?php print theme('image_style', array('path' => $node->field_image['und'][0]['uri'], 'style_name' => 'large')); ?>

//2番目の画像
<?php print theme('image_style', array('path' => $node->field_image['und'][1]['uri'], 'style_name' => 'medium')); ?>

//1番目の画像

<?php print theme('image_style', array('path' => $node->field_image['und'][0]['uri'], 'style_name' => 'large')); ?>

//2番目の画像

<?php print theme('image_style', array('path' => $node->field_image['und'][1]['uri'], 'style_name' => 'medium')); ?>

1番目の画像（$node->field_image[‘und’][0]）に対しては、画像スタイル「large」、2番目の画像には「medium」を、それぞれ指定しています。

たたし、この方法ではrender()関数と違い、画像が無い場合にエラーを出してしまうので、次のように画像の有無をチェックした方が安全です。

<?php
if (isset($node->field_image['und'][0])) {
	print theme('image_style', array('path' => $node->field_image['und'][0]['uri'], 'style_name' => 'large'));
}
?>

<?php

if (isset($node->field_image['und'][0])) {

print theme('image_style', array('path' => $node->field_image['und'][0]['uri'], 'style_name' => 'large'));

}

PHPでデバイスの判定。

2013.04.19 / Notes

PHPでPC、スマートフォン、携帯のデバイスの判定するためのスクリプトです。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
$pattern_mobile = '/DoCoMo|J-PHONE|Vodafone|SoftBank|UP.Browser|KDDI|WILLCOM|PDXGW|DDIPOCKET/';
$pattern_smart = '/Android|iPad|iPhone|iPod/';
if (preg_match($pattern_mobile, $ua)) {
	//mobile
} else if (preg_match($pattern_smart, $ua)) {
	//smart phone
} else {
	//pc
}
?>

<?php

$ua = $_SERVER['HTTP_USER_AGENT'];

$pattern_smart = '/Android|iPad|iPhone|iPod/';

if (preg_match($pattern_mobile, $ua)) {

//mobile

} else if (preg_match($pattern_smart, $ua)) {

//smart phone

} else {

//pc

}