iPhone | Almondlab

jQueryでスワイプ操作のイベントを取得。

2015.01.06 / Labs

jQueryを使ってスマートフォン、タブレットでのスワイプ操作をTouchイベントから取得する方法です。
サンプルはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Touch</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
	$("div#touch").bind("touchstart", onTouchStart);
	$("div#touch").bind("touchmove", onTouchMove);
	$("div#touch").bind("touchend", onTouchEnd);
	var direction, position;
	
	//スワイプ開始時の横方向の座標を格納
	function onTouchStart(event) {
	    position = getPosition(event);
	}
	
	//スワイプの方向（left／right）を取得
	function onTouchMove(event) {
		direction = (position > getPosition(event)) ? "left" : "right";
	}
	
	//スワイプ終了時に方向（left／right）をクラス名に指定
	function onTouchEnd(event) {
		$("div#touch").removeAttr("class").addClass(direction);
	}
	
	//横方向の座標を取得
	function getPosition(event) {
		return event.originalEvent.touches[0].pageX;
	}
});
</script>
<style type="text/css">
div#touch {
	width: 200px;
	height: 200px;
	margin: 0px auto;
	background-color: #e6e6e6;
}
div#touch.left {
	background-color: #ff0000;/* 背景を赤色に */
}
div#touch.right {
	background-color: #0000ff;/* 背景を青色に */
}
</style>
</head>
<body>

<div id="touch"></div><!-- スワイプの対象 -->

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Touch</title>

$(function() {

$("div#touch").bind("touchstart", onTouchStart);

$("div#touch").bind("touchmove", onTouchMove);

$("div#touch").bind("touchend", onTouchEnd);

var direction, position;

//スワイプ開始時の横方向の座標を格納

function onTouchStart(event) {

position = getPosition(event);

}

//スワイプの方向（left／right）を取得

function onTouchMove(event) {

direction = (position > getPosition(event)) ? "left" : "right";

}

//スワイプ終了時に方向（left／right）をクラス名に指定

function onTouchEnd(event) {

$("div#touch").removeAttr("class").addClass(direction);

}

//横方向の座標を取得

function getPosition(event) {

return event.originalEvent.touches[0].pageX;

}

});

</script>

div#touch {

width: 200px;

height: 200px;

margin: 0px auto;

background-color: #e6e6e6;

}

div#touch.left {

background-color: #ff0000;/* 背景を赤色に */

}

div#touch.right {

background-color: #0000ff;/* 背景を青色に */

}

</style>

</head>

<body>

</body>

</html>

上記はスワイプの開始（スクリーンにタッチ）からスワイプの終了（スクリーンから離れる）までの座標の距離を測定して、左右の方向を取得するだけの非常にシンプルなものです。
確認のために、方向によってスワイプ対象DIVの背景色を変えるようにしています。

オンラインノートの「Springpad」が終了。

2014.06.09 / Notes

iPhone

オンラインノートの「Springpad」が2014年6月24日をもって終了となりました。
この分野ではEvernoteが有力ですが、Springpadも独自性があって、使っていても楽しいツールでした。
Springpadに変わるサービスが、有料であってもいいので登場してほしいところです。

オンラインストレージ「Box」。

2014.01.16 / Notes

オンラインストレージはいくつか利用させてもらっていますが、Dropboxに次いでお気に入りなのが「Box」です。

無料プランでの容量は通常10GBですが、本日（2014年1月16日）から30日間はiOSアプリの最新バージョン登場に合わせて、iOSアプリからアカウント登録、または既存ユーザの場合、アクセスすることで50GBをもらえるキャンペーンを行っています。
アプリもiOS 7に合わせてフラットデザインになり、見た目はシンプルですが、なかなか多機能です。

Box

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

2013.11.26 / Notes

iPhone
Mac

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

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

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

Simplenote

iOSアップデートが完了しないときの対処法。

2011.03.11 / Notes

iPhone

本日iPhoneのiOS4.3が公開されて、早速アップデートを行いました。
はじめにiTunesでアップデータをダウンロードして、引き続きiPhone 4にアップロードが始まります。
しかし、iPhoneスクリーン上のインジケータが途中まで進んだところで何故か止まってしまい、そのまま1時間ほど経過しても完了しません。

やむを得ずiTunesを強制終了して、Mac本体も再起動し、再度アップデートを試してみましたが、同じくアップデートが完了しないまま止まってしまいます。

いろいろ試してみて、最後にダウンロードしたアップデータのファイルをいったん破棄し、再度ダウンロードし直してアップデートを行ってみたら、今度は問題なくアップデートが完了しました。
ちなみにアップデータのファイルは、下記に保存されます。
/Users/ユーザー名/Library/iTunes/iPhone Software Updates/iPhone3,1_4.3_8F190_Restore.ipsw

稀なケースなのかもしれませんが、同じ症状に遭遇した方の参考になれば幸いです。