スマホ用の下からニュッと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* »

iPhone、iPadでのoverflow:scroll/autoの動作について

ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。 また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。 何か方法でもあるのかと調べてみたところ、「メモ: iPad(iPhone)の困った仕様」で、「二本指」でなぞることでスクロールする事が分かりました。 説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、 »