Almondlab

オンラインのメモアプリ「Simplenote」。

2013.11.26 / Notes

iPhone
Mac

Macでは標準で「メモ帳」という、iCloud経由で同期ができるメモアプリが付属していて、ちょっとしたメモには重宝します。
ただこのアプリはテキストをリッチテキストで管理しているため、純粋にプレーンテキストを扱いたい場合には、やや抵抗があります。

そこで見つけたのが「Simplenote」というオンラインサービスです。
名前の通り、きわめてシンプルでプレーンテキストのみを扱うメモアプリです。
登録のみで無料で利用することができ、スマホ用、デスクトップ用のアプリが存在します。
Mac用アプリも非常に美しいです。

「Evernote」や「Springpad」など多機能なオンラインサービスも魅力ですが、
「Simplenote」の様なサービスも、また違った用途で活用できそうです。

Simplenote

Drupal 7.24、Drupal 6.29のアップデート。

2013.11.21 / Notes

Drupalで危険度の高い脆弱性のセキュリティアップデートが行われました。
通常のコアファイルのアップデートのほかに、一部ディレクトリ内の「.htaccess」の更新も必要になっています。
詳しくは「SA-CORE-2013-003 – Drupal core – Multiple vulnerabilities」で確認することができます。

OS Xのキーボードショートカットの設定。

2013.11.13 / Notes

OS Xでは標準機能としてシステム環境設定から、各アプリケーションのキーボードショートカットを割り当てることができます。
設定方法は簡単で、「システム環境設定　＞　キーボード　＞　ショートカット」の画面で、「アプリケーション」の項目に「＋」ボタンから追加して、該当アプリケーションの選択と、メニュー項目の名称を入力するのみです。
もしメニュー項目の名称が異なる階層で重複して存在する場合には、階層の上位のメニュー名称を「->」の記号で繋いでいくことで、確実に割り当てることができます。

上の画像では、テキストエディタ「Espresso」でよく使う言語のハイライトシンタックスに、キーボードショートカットを割り当てています。

jQueryでウィンドウリサイズ時にタイマー処理。

2013.11.11 / Notes

ウィンドウのリサイズ時に、少し遅れて画像を移動させたりするためのタイマー処理のメモです。
「resize」の部分を「scroll」にすれば、スクロール時のタイマー処理になります。

var timer;
var delay = 100;//遅延時間（ミリ秒）
$(window).resize(function() {
	if (timer) {
		clearTimeout(timer);
	}
	timer = setTimeout(onTimer, delay);
});

function onTimer() {
    //処理
}

var timer;

var delay = 100;//遅延時間（ミリ秒）

$(window).resize(function() {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(onTimer, delay);

});

function onTimer() {

//処理

}

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