投稿日:

PHP jsonで送られてきたデータをphpの配列として認識させる方法

PHP

PHP jsonで送られてきたデータをphpの配列として認識させる方法

APIを利用時、JSONで送られてきたデータをPHPで解釈できるようにする方法がわからなかったので、メモしておきます！

 //jsonデータの取得
 $json_data = file_get_contents( jsonデータ );
 
 //jsonデータからphpの配列に変換
 $php_data = json_decode( $json_data, true );
投稿日:

PHP mailtoリンクのタイトル文字化け対策

PHP

PHP mailtoリンクのデフォルトタイトルの文字化けを直す

HTMLのタグで、

 <a href="mailto:test@onlineconsultant.jp?subject=問い合わせ">

などと記述すると、タグにメールリンクが仕込まれ、ユーザーがリンクをクリックすると、ユーザー自身のメーラーが立ち上がり、件名に「問い合わせ」と入ります。

ただ、日本語の件名は文字化けしてしまう場合があるので、urlencodeする必要があります。
たとえば、PHPが使える環境でしたら、次のように出力しましょう。

 <a href="mailto:test@onlineconsultant.jp?subject=
 <?php 
    echo urlencode('問い合わせ');
 ?>">
 test@onlineconsultant.jp
 </a>

PHPファイルがUTF8だったりすると、SJISへ変換もする必要があります。
SJISへも変換したい場合は、次の通りです。

 //上記リンクのPHPの部分だけ抜粋
 echo urlencode(mb_convert_encoding('問い合わせ','SJIS','UTF-8'));
投稿日:

OpenLayers

OpenLayersとは

地図をWeb上にダイナミックに表示するためのオープンソースのjavascriptライブラリです。
Goole Mapなどにも使われています。

本家サイト
http://openlayers.org/

ドキュメントが整備されていて、使いやすいです。

例）OpenLayers.Mapのクラスについて
http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.setCenter

投稿日:

OpenLayers Mapのz-indexを変更する

Javascript

OpenLayers Mapのz-indexを変更する

OpenLayers]]＋[[OpenStreetMapに取り組んでいますが、困ったことに遭遇。

地図のちょうど上らへんにメニューバーがあり、プルダウンメニューがあるのですが、地図の下にプルダウンメニューが隠れてしまうんです。

z-indexを調整すればいいんだろうなーと思い、OpenLayers.LayerのsetIndexとかを使うのかと思い、ごにょごにょやっていましたが、なんか見当違いなのか治らず。
ちなみに、Mapの画像表示領域のz-indexはz-index:749となっていますね。

プルダウンメニューのz-index:1000とかにしても直らず。
地図をCSSで

 #map{
 	z-index:1;
 }

とやっても直りません。

あれー
と思っていたら、ここに答えがありました。
http://gis.stackexchange.com/questions/15033/why-would-openlayers-always-render-over-other-divs

z-indexはpositionを指定しないとダメ！

ぁっ…そんなことがあった気が…記憶の片隅に…

 #map{
 	z-index:1;
 	position:relative;
 }

これで解決です。

投稿日:

OpenLayersでOpenStreetMapを利用する

Javascript

OpenLayersでOpenStreetMapを利用する はじめの一歩

OpenStreetMap（略してOSM）がアツイ！という話を以前していて、その際はAndroidアプリにOSMおりましたが、今度はWebにOSMを埋め込んで利用してみたいと思います。

まず、超はじめの一歩で、Hello WorldならぬｍHello Map!で、地図をさくっと表示させてみたいと思います。

WebサイトにOSMを埋め込んで利用するには、下記にあるように、他の表示用のJsライブラリと連動させて表示する必要があります。
http://wiki.openstreetmap.org/wiki/Develop/Frameworks#Webmaps

一覧がありますが、最初は一番上のLeafletが軽いと自称しているのでいいかな、と思ってたんだよね。
しかし、LeafletはCloudMadeという会社が作っているようですが、CloudMadeのAPIキーを取得して、Leafletを利用する、というのがLeafletの最初のチュートリアルで書いてありますが、
http://leafletjs.com/examples/quick-start.html
CloudMadeのページでこのAPIキーの登録のページとか、見つからないんですよね。ちょっと詳しい情報を見ようとすると、連絡先を入力するように、ということになってしまいます。
なんとなく不安を覚える雲行きですし、本当にオープンなものを利用したい、というのが最近の私の方向性なので、OpenLayersを使ってみることにしました。

ということで、ほぼこのページのコピペではありますが、
http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
ちょっとした解説付きで載せておきます。

 <!DOCTYPE HTML>
 <html>
  <head>
    <title>OpenLayers Demo</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik         = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984　測地系というやつです
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection　メルカトル図法…的なやつです
        var position       = new OpenLayers.LonLat(139.632314,35.45797).transform( fromProjection, toProjection); //中心座標　みなとみらいです。
        var zoom           = 15; 
 
        map.addLayer(mapnik);
        map.setCenter(position, zoom );
      }
    </script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
  </body>
 </html>

これを実行すると、横浜のみなとみらいを中心とした、OpenStreetMapが表示されます。

  • FONTが小さくて見えない；；携帯電話。。 — FONTER {2017-04-11 (火) 17:55:12}

OpenStreetMap]]を利用するアプリやシステムの開発依頼は[[こちら！