「jQuery」カテゴリーアーカイブ

jQueryを使った確認アラート表示

管理ページなどで情報を削除する際など、確認のアラートボックスを表示したい時があると思います。
これはjQueryを使うと簡単に実装することができます。

» デモページ

<!DOCTYPE html>
<html>
  <head>
  	<title>【デモ】jQueryを使った確認アラート表示</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  </head>
  <body>
	  <p><a class="confirm" href="./del.php">データを削除</a></p>
	  <p style="color:#aaa;">※デモなのでリンク先ページが開くだけです</p>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
		$(".confirm").on('click', function(){
			if(window.confirm("データを削除しますがよろしいですか?")) {
				location.href = $(this).attr('href');
			} else {
				return false;
			}
		});
      });
    </script>
  </body>
</html>

解説

11行目でjQueryを読み込んでいます。今回はGoogleのCDNを使いました。

12行目から22行目がアラートボックス表示に関する部分です。
クリックイベントに対して定義してます。
クラスを指定することで複数のリンクがあった場合にも対応できるので便利です。
「データを削除しますがよろしいですか?」というメッセージを表示し、OKであればリンク先のページを開き、キャンセルであれば何もしないという指示を書いてます。

用途によってはフォームの送信前に最終確認メッセージを表示するなどいろいろな使い方ができると思います。

ちょっとした部分ですが、ユーザビリティをアップしヒューマンエラーを減らす効果があると思います。
目立つ部分ではないですがこんな気遣いがクオリティアップの一つになるので大切にしたいものですね。

jquery-1.10.2.min.mapが404 Not Found

fuelphpを使っていて謎のエラーが出ていたのを解決したので同じ問題を持った人のために記事にします。

そのエラーはjquery-1.10.2.min.mapが404 Not Foundというエラーでした。
そんなファイルを読み込んだ覚えもないし。。。と思いjsを読み込んでいる部分をのぞいてもそれっぽいのがない!

jqueryがらみなのは間違いなさそうだったので/assets/js/jquery.jsを確認すると、一番はじめに次のようなコメントが書かれていました。

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

ん〜ソースマップのURLが書かれてますね。。。

原因はこれなので、サクッと1行削除して

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
*/

とするとエラーは消えます。
もしjquery.jsの変更をしたくない場合は、jquery-1.10.2.min.mapをjquery.jsと同じフォルダに置いてあげるとOKです。

上記の例の場合は以下のリンク先のファイルを配置することでエラーが無くなりました。
» jquery-1.10.2.min.map

上記のようにソースマップを同じ場所に置くことで解消されますが、ソースマップに対応したブラウザだとソースマップのファイルを読み込むために1リクエスト余計なアクセスが増えることになります。
「1行消す」か「ソースマップを配置する」かはお好みに応じて対処してください。

補足

このソースマップのURLの記述はどうやらjQuery1.9から追加されたようです。
ソースマップについて詳しく知りたい方や、ソースマップ対応されていることでどんなメリットがあるかについては、以下のURLにわかりやすい説明があります。
» [てっく煮ブログ]jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

ちなみに、現在ソースマップに対応しているブラウザはGoogleChromeのみのようです。
Firefoxも対応してきているようですが、まだ不十分のようです。
以下の記事にそのことが書かれてました。
» [terurouメモ] Firefox 23でSource Mapsが実装されたみたいだけど、まだちゃんと動いてない?

今回の私のケースはfuelphpでしたが少し古いwordpressを使っている場合にも同様のエラーが出るケースがあったようです。
» [設定やツールとか]WordPress 3.6でjquery-1.10.2.min.mapのエラー

WordPress 3.6だと、jquery-1.10.2.min.mapのエラーが出る。原因はWordPressで使っているjquery.jsのヘッダー記述の問題。
WordPress 3.6.1でこのバグが修正された。3.6.1以降を使っていればこの問題はおきない。

とのことです。

同様のエラーが出た人の参考になれば幸いです。

現在地の情報を一覧できるページを公開ました

スマートフォンを持って外出した際に、今いる場所の情報を一覧できるページを公開しました。
» 現在地の情報表示ページ

ページを開くと現在位置取得のダイアログが表示されますので「OK」(端末によって表示は違うかもしれません)を押すと情報が表示されます。
基本的にはスマートフォンでの利用を想定して作成しております。
自分で使う用に作りましたが使える方もいるかもしれませんので、公開します。

情報一覧の中で、他ではあまり見ない(と思われる)機能として、
「熊本城付近」というように住所だけではなくランドマークを目印とした表現があるのがポイントです。
これを使うことでタクシーを呼ぶ際や、土地勘のある人への連絡の際に非常にスムーズに場所の情報を伝えることが可能になります。
今いる場所の情報を友達に教える場合などに便利な「LINEで送る」リンクも設置しております。

他には「1時間以内の降水量の予測」や「標高」などの情報を表示してます。
天気情報に関してはもっと長いスパンでの情報も欲しいので今後の課題です。

技術的には、「Geolocation API」や「Yahoo!JAPANが提供するAPI」を使って実現をしてます。
(細かいところはソースを見てもらえばわかると思います)

GoogleMapsAPIではなくYahooの地図を使いましたが、特に理由はありませんw
いつもGoogleを使っていたので試しに使ってみたという感じです。

軽く使ってみた印象としては、ラベル表示(マーカーではなく文字列をはれる)が便利かなと思いました。
GoogleMapsAPIだとマーカーしかないので、場所と名称を表示したい場合でもクリックしてポップアップさせる必要がありました。
しかし、Yahooだとラベルとして表示されるので見やすいかなと思います。
(表示する文字列が長くなると地図面が見づらくなるので、一定の文字数で切ってあげる必要はありそうです)
名称がわかればいいケースなどでは使う側としても便利ではないでしょうか。

今後はGoogleMapsAPIとYahoo地図APIの比較なども記事にしていきたいと思います。