

[以前jQueryライブラリとして公開](http://blog.sus-happy.net/201112/sp-google-maps-jquery/)していましたが、そもそもスマホサイトでjQueryを読み込むこと自体が重荷のように感じたので、ネイティブのライブラリを作ってみました。

ただ、ちょっと実機の実験がiOS6の純正ブラウザのみしか出来ていないので、他のデバイスで動くか心配です。


## 変更点

変換する時に1KB程度増加しましたが、jQueryそのものが要らなくなるので、90KB程度削減できたと考えられます。

実行時の関数が少し変わっています。詳細はGitHubをご覧ください。


## デモ

[デモページ（スマートフォンでご覧ください）](http://demo.sus-happy.net/javascript/SPGMaps2/)はこちらから

[ダウンロード（GitHub）](https://github.com/sushat4692/SPGMaps.js)




スマホ用の下からニュッとGoogleマップを表示するJavaScriptライブラリ


スマートフォンのカメラで撮影した画像をPCで表示する時に、上手く表示されないことがありますが、その画像をPCで編集を行うと、今度はスマートフォンで上手く表示されなくなることがあります。

条件が重なった時に生じる現象ですが、割と簡単に起きる内容だったので、忘れないように残しておきます。


## 原因

![比較画像](/content/images/2016/04/hikaku.jpg)

原因については写真を撮った時に、画像データ以外に一緒に保存される「Exif情報」と呼ばれるモノが影響した結果となります。

詳しい理由については[こちらの記事](http://hatomugi.sakura.ne.jp/forum/topic.php?id=84)や、[こちらの記事](http://zeromk.sakura.ne.jp/wp/?p=972)で紹介されていますので、今回の記事では割愛しておきます。

また、編集ソフトによっては「Exif情報」を書き換えることをしないので、PCとスマホの向きがチグハグのまま回転をしてしまうため、今度はスマートフォン側で上手く表示されなくなってしまいます。

その状態になったデータを置いておきます。[こちらからどうぞ](http://demo.sus-happy.net/sp/image/)。画像のようにPCとスマートフォンで見た目が違うと思います。


## 解消法

原因でお伝えしたとおり、「Exif情報」が問題となっているので、そちらを削除してしまうか、書き換えてしまえば問題ありません。

Windowsの場合は、非商用の場合のみ「[XnView](http://www.forest.impress.co.jp/lib/pic/piccam/picviewer/xnview.html)」と言うソフトで、書き換えることが出来、「[ExifEraser](http://gouka3.blog35.fc2.com/blog-entry-291.html)」で削除することが出来ます。

Macの場合はiPhotoで回転させて書き出すことで一緒に書き換えてくれるようです。


## 参考サイト

- [iPhoneやiPod touch、Android携帯などで撮った写真の方向がおかしい « できるWEBサイトにする為に何が出来るのか](http://hatomugi.sakura.ne.jp/forum/topic.php?id=84)
- [［iPhone］撮影した写真をPCで見ると左右に回転して表示されてしまう理由（”画像方向”について） – 実験場所](http://zeromk.sakura.ne.jp/wp/?p=972)
- [iPhoneカメラのバグ？Exifに関して。](http://thatstwice.blog19.fc2.com/blog-entry-35.html)
- [窓の杜 – XnView](http://www.forest.impress.co.jp/lib/pic/piccam/picviewer/xnview.html)
- [画像をドラックするだけで自動でExif情報を削除するソフト「ExifEraser」 Flame of Heavens](http://gouka3.blog35.fc2.com/blog-entry-291.html)

スマートフォンで撮った写真がPCで上手く表示されない？



スマートフォン、特にiPhoneでGoogleマップにリンクを貼ると、アプリが立ち上がってしまうため、ブラウザに戻ってこさせる一手間がかかってしまいます。

そこで、同ページでGoogleマップを表示させるためのライブラリを組んでみました。


## 特徴

Googleマップ側の仕様？なのか、マップをページ上部に表示しないと拡大時の中心点がずれてしまうので、自動的にページ上部へ移動し、Googleマップを下からニュッとアニメーションする動きを加えています。


## 動作確認

- iOS 5.0.1
- Android 2.3.3

純正ブラウザで取っています。Androidの場合はほかのブラウザの動作確認も取った方が良いのかな？


## 詳細説明・デモ

[ダウンロード（GitHub）](https://github.com/sushat4692/jquery.SPGMaps.js)




スマホ用の下からニュッとGoogleマップを表示するjQueryライブラリ


スマートフォン用のサイトを作る場合は、[jQuery Mobile](http://jquerymobile.com/)やら、[jQTouch](http://jqtouch.com/)やら、[Sencha Touch](http://www.sencha.com/products/touch/)やら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。


## スマホ特有のイベント

スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。

上記操作に必要なイベントは以下の通りです。

- touchstart
- touchmove
- touchend
- touchcancel
- gesturestart
- gesturechange
- gestureend

「touch\*\*\*」というイベントが画面に指でタッチした、している時のイベント、「gesture\*\*\*」というイベントが「二本指以上」の操作（ピンチイン、ピンチアウト、回転等）を行っている時のイベント、と考えていただければ良いかと思います。

また、「touch\*\*\*」は一本指だけでなく、二本指以上の操作でも実行されるため、今何本の指が画面上にタッチされているかを確認しながら動作する必要があります。


## イベントの実行される流れ

### 一本指での操作の場合

一本指だけのイベント進行は単純で以下のように進行していきます。

<dl><dt>1.touchstart</dt><dd>指が画面をタッチした時に実行</dd><dt>2.touchmove</dt><dd>タッチした指を画面上で動かした時に実行</dd><dt>3.touchend</dt><dd>画面上から指を離した時に実行</dd></dl>マウスイベントとほとんど変わらないと思います。

### 二本指での操作の場合

二本指が画面上にタッチされた時は少し特殊で、以下のような順番でイベントが進行します。

<dl><dt>1.touchstart</dt><dd>一本目の指が画面をタッチした時に実行</dd><dt>2.gesturestart</dt><dd>二本目の指が画面をタッチした時に実行</dd><dt>3.touchstart</dt><dd>gesturestartの後に実行</dd><dt>4.gesturechange</dt><dd>タッチした指を画面上で動かした時に実行</dd><dt>5.touchmove</dt><dd>gesturechangeの後に実行</dd><dt>6.gestureend</dt><dd>指を一本画面から離した時に実行</dd><dt>7.touchend</dt><dd>gestureendの後に実行</dd><dt>8.touchend</dt><dd>もう一本の指を画面から離した時に実行</dd></dl>何れかの指が画面にタッチした時、離した時に毎回touchイベントが実行されます。  
 また、二本タッチされている時は同時にgestureイベントも実行されるのですが、その際はgestureイベントが優先される様です。


## イベント実行時に得られる値

イベント実行時に得られる値も、「`touch***`」と「`gesture***`」で異なります。

### touchイベント

主に画面を触っている指の数や、位置を取得することが可能です。

```javascript
function touchHandler( event ) {
	// 画面を触っている指の本数だけ配列で渡されます
	var touches = event.touches;
	// 一本目の指の位置取得
	alert( "x = " + touches[0].pageX + " / y = " + touches[0].pageY );
}
```

### gestureイベント

主にピンチインなどの動作によって変化した値を取得することが可能です。

```javascript
function gestureHandler( event ) {
	// ピンチインによる拡大率
	var scale = event.scale;
	// 回転角度
	var rotate = event.rotation;
	alert( "scale = " + scale + " / rotetion = " + rotate );
}
```


## jQueryで利用する際の注意点

jQueryのbindを持ちいてイベントを実行した場合、上記値の読み方が若干変わります。

addEventListenerを用いた方法では以下のように記述しますが。

```javascript
document.getElementsById("touch").addEventListener("touchstart", touchHandler, false);
function touchHandler( event ) {
	alert( event.touches[0].pageX );
}
```

jQueryを用いた場合は、引数にtouchesが与えられておらず、さらに「originalEvent」内から取得する必要があります。  
 上のコードをjQueryで記述すると以下のようになります。

```javascript
$("#touch").bind("touchstart", touchHandler);
function touchHandler( event ) {
	alert( event.originalEvent.touches[0].pageX );
}
```

詳しくは調べていませんが、引数のeventはjQuery内で生成した変数、originalEventがaddEventListenerで渡されている値と同等なのかな？と思っています。

また、touchイベントはiPhone、Andoroidで動作確認できましたが、gestureイベントはAndroidで動作しません。  
 その他動作環境については、[こちらのページにまとめられている](http://www.lukew.com/ff/entry.asp?1071)ようなので、参考にしようかと思います。


## 参考サイト

- [GestureEvent Class Reference](http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/javascript/cl/GestureEvent)
- [iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu](http://dev.worksap.co.jp/Members/nogunogu/2010/08/17/iphonesafari%E3%81%A7jquery%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E6%B3%A8%E6%84%8F/)
- [LukeW | Touch Gesture Reference Guide](http://www.lukew.com/ff/entry.asp?1071)

jQueryを使ってスマートフォン用のイベントを扱ってみた


ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。

また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。

何か方法でもあるのかと調べてみたところ、「[メモ: iPad（iPhone）の困った仕様](http://hcondo2000.blogspot.com/2010/06/ipadiphone.html)」で、「二本指」でなぞることでスクロールする事が分かりました。

説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。

「直感的」な操作であるタッチパネルであっても、今回であればページ内の一部のコンテンツをスクロールさせるような、複雑な操作についてはどうしても特殊な操作が必要になりますね。

他のスマートフォンではどうなんでしょう？もうちょっと調べる必要がありそうです。

## 追記 2011年10月12日

地味に見られていて、解決策も投じてなかったので少し追記をしておきます。

### Androidの動作について

Andoroidは`overflow:auto;`に対応していないようで、二本指でスクロールしても動かないようです。  
[http://code.google.com/p/android/issues/detail?id=2118](http://code.google.com/p/android/issues/detail?id=2118)

### JavaScriptを使った対策

やはり二本指で操作をさせるのは、感覚的にも操作的にも分かり辛い事を考慮するとCSSのみでの対応は厳しいようで、既にJavaScriptのライブラリが公開されていました。  
その中で目に留まった二つを試しに使ってみました。

<dl><dt>[Skroll.js](http://5509.me/log/skroll)</dt><dd>方向は縦方向のみ対応しており、フリックでスクロールバーが表示されます。  
 注意書きにも記載されていますが、非力なスマホだと動作に不安定な箇所が出る可能性があるようです。</dd><dt>[jQuery.flickable](http://lagoscript.org/jquery/flickable)</dt><dd>縦横に対応していますが、スクロールバーはありません。  
 また、現バージョン（1.0b3）では、jQuery1.6.xに対応していないようです。</dd></dl>[デモはこちら](http://demo.sus-happy.net/sp/overflow/horizontal.html)

どちらにも一長一短があり甲乙付けがたいですが、長所が分かりやすいので場面場面で使い分けていくと良さそうな感じを受けました。

## さらに追記 2011年11月01日

どうもiOS5より、iPhone Safariで一本指でスクロールが出来るようになったみたいです。

参考：[iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 – くらげだらけ（くだくらげのBLOG）](http://d.hatena.ne.jp/kudakurage/20111025/1319475131)

また、「`-webkit-overflow-scrolling:touch;`」を指定すると、CSSだけで惰性スクロールが実装できるみたいで、「iPhoneだけ」ならJavaScriptを実装しなくても良さそうですね。

[デモも用意してみた](http://demo.sus-happy.net/sp/overflow/css-scroll.html)ので、試してみてください。

スマートフォン

スマホ用の下からニュッとGoogleマップを表示するJavaScriptライブラリ