Geolocation APIで現在地が取得できない

geolocationで現在地が取得できずに困っていました。

大きな原因からいって「SSLの環境下でないと現在地を使わせないOSが増えてきた」「なぜかgeolocationが定義されてないっぽい」でした。

1.GooglechromeやiOSのブラウザ、Macのsafariでhttp接続のページから現在地を取得を禁止する仕様に変わってきた

今までは「位置情報取得をon」や「ブラウザが位置情報取得を許可しているか」などを確認してもらっていたけど、そういうの関係なく「禁止」になっている。

Webブラウザで現在地情報を正しく取得できない場合の原因と対策 (参考記事)

iOSはバージョン10以降(iPhone7はプリインストール)

2.geolocationが定義されていないっぽい?

alertとかを加えて、javascriptが動いているか、どこで動かなくなるかを検証していたところ、どうもgeolocation自体が動いてないっぽい。

navigator.geolocation.getCurrentPosition から navigator.geolocation.watchPositionに変えてみたりしたけど動かない。

Android で現在地を Geolocation API で取得できないとき (参考記事)

を参考に{enableHighAccuracy: true}をオプションにいれてみたけど、動かない。

最終的には

第3回 位置情報を取得してみよう(後編)(参考記事)

を読んで、try catchを入れて、geolocationが定義されてなかったら「使えません」と謝る機能を追加した。

なぜ「geolocation」が使えないかは謎です。

 

あとやはり基本的な知識が足りないなぁ……反省。

Geolocation の利用

javascriptの関数で変数にデフォルト値を入れていたらIEで動かなくなった件

PHPのノリで、javascriptのfunctionの変数にデフォルト値を以下のように入れていたのですが。

function example(aaa,bbb,ccc=600){

これで、IEの表示だけまったく動かなくて、3時間近く奮闘してた。
GoogleもFirefoxも動くんだもん。

いや、もしかしたら、他のいろんな要素が邪魔をしてと思ったんだけど……。

なんでか絶対、私の見落とした、アホみたいな理由があると思うんだけど……。

とりあえず、追跡はまた今度にして、ひとまず今日はここまでにしておく。

いや、動いてよかったんだけど。「なんでー!!!!」ってなりました。


jqueryのバージョンは、1.10.2でも3.1.0でも動作は同じだった。
IEのバージョンは11

参考になりそうな記事を発見。この時は、Googlechromeだと動かないと書いてある。

JavaScript関数で引数で=を使ってのデフォルト引数

古いIEだったら動くのかなとテスターとかつかってみるけど、動かない。とりあえずまたじっくり時間が取れたら少し追ってみようと思う。

レスポンシブサイトでの電話番号タグの埋め込み

wordpressを利用しているので、電話番号であるものを自動的に<a href=”tel:”>タグ入れて対応しようかなと思っていたら、電話掛けれるようにするかは、チョイスしたいということでした。

<a href=”tel:”>わざわざチョイスして入れればいいのだけども、PC版で見た場合は、電話掛けられないのにリンク貼られてて変ですね。

ということで、「掛けれる掛けられないは、わざわざタグを入れるかいれないかで、任意に選べる。 そして、PCのときはtelのリンクは貼られない」という方法、いろいろあるのですね。

一番意図的に埋め込めるかなと思ったのが以下の記事

電話番号の自動リンク機能を無効化する これを使わせていただきました。

 

あと、シンプルだなーと思ったのが

レスポンシブのサイトでスマホの時だけtelリンクを有効にする 

ただし、<span>と</span>の間に数字と‐以外のものが入った場合はどうなるかな。まぁ、スマートフォン側で数字以外をはじくか。

「tel」を指定したaタグをPCだけ削除する[jquery]

<a href=”tel:”>という形をそのまま使えるので。ただ、<span>とかもわざわざ入れるので、HTMLタグを普段理解されないお客様には、ちょっとしたミスが上のソースよりも起こりそうかなと。

たとえば<a href=”tel:”><span>電話番号</span>(代)</a>とかにしちゃうとか。

 

考え方もプログラムの書き方もいろいろあって、興味深いです。時間があれば自分なりの方法を見つけたいな。

htmlだけどGETパラメータ使いたい

php使えないデータベースも使えないサーバなんですけど、id値を外部のphpには渡したい場合……。

【jQuery】 画面表示時にGETパラメータを取得する方法

が非常に参考になりました。

上記の方法だと、function内で指定したパラメータでないと取れないため、以下のように少し変更

 
function getParam(key) {
  var url = location.href;
  parameters = url.split("?");
  params = parameters[1].split("&");
  var paramsArray = [];
  for ( i = 0; i < params.length; i++ ) {
    neet = params[i].split("=");
    paramsArray.push(neet[0]);
    paramsArray[neet[0]] = neet[1];
  }
  var categoryKey = paramsArray[key];
  return categoryKey;
 }

呼び出すときは

 
$(function() { $("#news").load("http://PHPとデータベースが動くサーバー/page.php?id="+ getParam('id')); }); 

としました。

Jqueryで外部からのデータを表示する

一番わかりやすく簡単だったので、

jQuery で外部 HTML を読み込む方法

を参考に使用。しかし、外部からのデータが別ドメインの場合は、クロスドメインの関係でうまく動かない。

そして下記を参考

続 クロスドメインで使う XMLHttpRequest と CORS の話

これ、例えば、お客様のサーバがデータベース使えなくて、サーバが借りれるけど、ドメインの移行も難しそうな場合。
データベースとPHPの使えるサーバで更新プログラムを動かして、ソースを作成し、
使えないサーバでjquery使って使えるサーバで生成したソースを読み込ませる。ということをしたい。

使えないサーバ
データを埋め込みたいHTMLのヘッダーに

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		$("#sample01").load("http://データベースとphpが動くサーバー/list.php");
	});
</script>

データを埋め込みたい部分に

 <div id="sample01"></div>

クロスドメインなので、データを取ってきてhtmlソースを生成する、読み込まれるphpに

 header('Access-Control-Allow-Origin: *'); 

すごく簡単に作りましたが、たぶん、ソースが読めこめなかったときの処理とか、そういうのもちゃんと書かなくてはならないと思います。

 

以下、2014.06.19追記

この方法は、IE9以下のブラウザでは表示しないです。
load自体は動いていますので、クロスドメインが原因かと思います。
えらい簡単だなぁ、ラッキーとか思ってたけど、簡単に考えてはいけなかったのね……。

jQueryでクロスドメインAjaxを実現する方法(jquery.xdomainajax.js)

を参考に読ませていただきました。

また、

jQuery.ajax()のまとめ

を読ませていただきまして、次のようなスクリプトに

 <script src="common/js/jquery.xdomainajax.js" type="text/javascript"></script>
<script>$(document).ready(function(){
        $.ajax({   
        	url: 'http://データベースとphpが動くサーバー/list.php’,   
        	type: 'GET',   cache: false, // キャッシュOFF   
        	dataType: 'html',   
        	crossDomain: true,   // データのロード完了時の処理    
        	success: function(res) {
        	     content = $(res.responseText);
        	     $("#sample01").html(content);
        	}
        });
    });
</script>

一応うまくいったっぽいんですが、なぜか、<dt>が<dd>に変換されてしまいます。なんでだろう……。

jQueryのAjaxを使用して外部htmlを読み込む

<script>
  $(document).ready(function(){
   $.ajax({
      url: 'http://データベースとphpが動くサーバー/list.php’,
      type: 'GET',
      cache: false, // キャッシュOFF
      dataType: 'html',
      crossDomain: true,
 
// データのロード完了時の処理
      success: function(res) {

            $("#sample01").append(res);
      }
    });
   }); 
</script>

これだと、jquery.xdomainajax.jsなくてもうごくけど、IEだと動かない。

jQueryUIでhelper:cloneを使用すると、スクロール時にずれる。

jQueryUIを使って、左の選択したポイントリストに羅列されたポイントを、右のリスト作成エリアにドラッグ&ドロップで移動させて、オリジナルのリストを作るというものを作成中。左から選択したポイントは、コピーして(clone)何度でもリストに追加することができる。

文字ではうまく書けないので、下図参照です。

pict1

この動きはなんとかできたのだけど、ページ表示後、スクロールとかをするとスクロールした分だけ移動させるポイントの枠がずれる。

つまり、ドラッグするときに対象のポイントの枠がマウスにくっつくように動かなくちゃならないのに、スクロールした分だけ下に表示されて動くというなんだか、気持ち悪い動き。うまく説明できないので下図参照です。

pict2

動かす対象は、position:absoluteじゃないといけないとかいう記事を見て、訂正してみたけど、出来なかった。

むしろ、動かす対象がいる場所。つまり、図では灰色のエリアのstyleにpositon:relativeを入れてやると、治りました。

これで結構悩みましたので、メモメモです。

javascriptのクッキーがGoogleChromeで保存されない?

ちょっとjavascriptでクッキーを作成して、それを読み込んでという動きを作っていました。
javascriptのクッキーに関しては、いろんな方が記事で残しておいてくださって、理解はそう難しくなかったのですが……。

なんどテストしても、クッキーに保存されない。

なんでだろうと思いながら、firefoxにブラウザを変えてみたら保存された!

どうやら、作成時に面倒くさがって、ローカルのテストサーバに置かず、直接HTMLファイルをブラウザで開いてテストしていたことが、だめだったようです。

GoogleChromeでjavascriptのクッキーをテストするときは(まぁ、phpだったらローカルのサーバでテストするから……)、直接開かずに面倒でもローカルサーバを経由してしましょうってことです。

はぁ。2時間もさまよってしまったですよ。

display:noneのGoogleMapが表示したらズレる

管理画面で、地点を登録するときにGoogleMap上を直接たたいて緯度と経度を取得する仕組みを作成。
登録しなくてはならない地点が1点と2点のときがあって、1つの地図でその2つを登録できたらいいんだけど、よくわからないので1点目用と2点目用の地図を用意。
2点目まで登録するのはまれなので、普段は「display:none」でしまっておき、必要な時だけ「display:block;」で表示できるようにしていた。

このとき、「display:block」で表示したmapが左上にずれる。
……まぁ、わからないでもない。

調べていて参考にさせていただきましたー。

display:noneの要素にGoogle Mapsを貼り付ける

私の場合は、こんな感じかな

function HideCBox( boxid ) {
	   var target = document.getElementById(boxid);
	   if( target.style.display != "block" ) {
	      target.style.display = "block";
	      google.maps.event.trigger(map2, 'resize');
	      map2.setCenter(latlng2);
	      document.hidebutton.src = "files/close.gif";
	   }
	   else {
	      target.style.display = "none";
	      document.hidebutton.src = "files/open.gif";
	   }
	}

この

	      google.maps.event.trigger(map2, 'resize');
	      map2.setCenter(latlng2);

という部分です。
target.style.display = “block”;
の後です。前だと同じようにずれるー。
表示してから、位置の修正ってことですかね。

document.getElementByIdでエラーが出るように

IE6までは動作確認ができていたjavascriptで、document.getElementByIdでエラーがでるようになった。

調べてみると、IE8からはdocument.getElementByIdでは、nameの検索を行わないそうです。参照: IE8での変化点一覧 + 備忘録(@latest log

なので、getElementsByNameを使うように。

このときに、注意しなくちゃならないのは、配列形式で返すということ。
だから、document.getElementById(”test”).valueでとれていた値は、getElementsByName(”test”)[0].valueとなる。

そして、私がはまったのは・・・・・・

getElementsByName

複数形だってところ・・・・・・。ご注意を!