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

以前jQueryライブラリとして公開していましたが、そもそもスマホサイトでjQueryを読み込むこと自体が重荷のように感じたので、ネイティブのライブラリを作ってみました。 ただ、ちょっと実機の実験がiOS6の純正ブラウザのみしか出来ていないので、他のデバイスで動くか心配です。 変更点 変換する時に1KB程度増加しましたが、jQueryそのものが要らなくなるので、90KB程度削減できたと考えられます。 実行時の関数が少し変わっています。詳細はGitHubをご覧ください。 デモ デモページ(スマートフォンでご覧ください)はこちらから ダウンロード(GitHub)...

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

スマートフォンのカメラで撮影した画像をPCで表示する時に、上手く表示されないことがありますが、その画像をPCで編集を行うと、今度はスマートフォンで上手く表示されなくなることがあります。 条件が重なった時に生じる現象ですが、割と簡単に起きる内容だったので、忘れないように残しておきます。 原因 原因については写真を撮った時に、画像データ以外に一緒に保存される「Exif情報」と呼ばれるモノが影響した結果となります。 詳しい理由についてはこちらの記事や、こちらの記事で紹介されていますので、今回の記事では割愛しておきます。 また、編集ソフトによっては「Exif情報」を書き換えることをしないので、PCとスマホの向きがチグハグのまま回転をしてしまうため、今度はスマートフォン側で上手く表示されなくなってしまいます。 その状態になったデータを置いておきます。こちらからどうぞ。画像のようにPCとスマートフォンで見た目が違うと思います。 解消法 原因でお伝えしたとおり、...

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

スマートフォン、特にiPhoneでGoogleマップにリンクを貼ると、アプリが立ち上がってしまうため、ブラウザに戻ってこさせる一手間がかかってしまいます。 そこで、同ページでGoogleマップを表示させるためのライブラリを組んでみました。 特徴 Googleマップ側の仕様?なのか、マップをページ上部に表示しないと拡大時の中心点がずれてしまうので、自動的にページ上部へ移動し、Googleマップを下からニュッとアニメーションする動きを加えています。 動作確認 iOS 5.0.1 Android 2.3.3 純正ブラウザで取っています。Androidの場合はほかのブラウザの動作確認も取った方が良いのかな? 詳細説明・デモ 機能説明はこちらのページをご確認ください。...

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

スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture*...