PHP,MySQL,Flexな日々＋イラストとか

2013-06-19

2013年06月18日のつぶやき

Twitter | 02:00 |

@php_flex_mysql: [sass] / “SassというCSSコーディングを身につけよう!in Coda2!!超簡単な僕のSass覚書。” URL

2013-06-18 09:00:33 via Hatena

コメントを書く

トラックバック - http://d.hatena.ne.jp/haru-komugi/20130619

2013-06-18

2013年06月17日のつぶやき

Twitter | 02:01 |

@php_flex_mysql: Googleマップの中心の緯度経度を表示する URL

2013-06-17 21:40:20 via Hatena

@php_flex_mysql: Googleマップの中心の緯度経度を表示する URL

2013-06-17 21:38:02 via Hatena

@php_flex_mysql: Googleマップの中心の緯度経度を表示する URL

2013-06-17 21:23:16 via Hatena

コメントを書く

トラックバック - http://d.hatena.ne.jp/haru-komugi/20130618

2013-06-17

Googleマップの中心の緯度経度を表示する

21:40 |

ちょっと、古めの内容ですが、Googleマップの中心の緯度経度を表示してみました。

こんな感じで、ドラッグしても、センターの場所を教えてくれます。

ソースコードはこちらっ

<html xmlns="http//www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY&sensor=false" type="text/javascript"></script>
  <script type="text/javascript">
  function initialize() {

    if (GBrowserIsCompatible()) {

      //マップの初期化
      var map = new GMap2( document.getElementById("map") );
      var point = new GLatLng( 35 , 139 );
      console.log( point );
      map.setCenter( point , 18);
      map.addControl(  new GLargeMapControl(),
                       new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5,30))
                     );
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());


      //十字アイコン作成
      var icon        = new GIcon();
      icon.image      = "/image/top/gmap_cursor.gif";
      icon.iconSize   = new GSize(100, 100);
      icon.iconAnchor = new GPoint(50, 50);
      var marker      = new GMarker( point , icon );
      map.addOverlay(marker);

      //マップ移動イベント
      GEvent.addListener( map , "move" , function(){

        //現在の緯度経度を表示する
        showLatLon();

      });

      //十字アイコンが示す座標を表示
      showLatLon= function (){

        //マップの中央を取得
        var point = map.getCenter();

        //マーカーをセンターに配置する
        marker.setPoint( point );

        document.getElementById("latlon").innerHTML ="緯度：" + point.lng() + "<br />経度：" + point.lat();

      };

      showLatLon();
    }
  }
  </script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="latlon" style="padding:10px;">
  緯度：読み込み中・・・<br>
  経度：読み込み中・・・
</div>
<div id="map" style="width:480px;height:480px;"></div>
</body>
</html>

参考リンク

Google Maps JavaScript API V2 Basics - Google Maps JavaScript API v2（サポート終了）

コメントを書く

トラックバック - http://d.hatena.ne.jp/haru-komugi/20130617

2013-06-16

2013年06月15日のつぶやき

Twitter | 02:00 |

@php_flex_mysql: 画像選択後に自動でサーバーに画像をアップ URL

2013-06-15 20:25:35 via Hatena

@php_flex_mysql: 画像選択後に自動でサーバーに画像をアップ URL

2013-06-15 20:24:09 via Hatena

コメントを書く

トラックバック - http://d.hatena.ne.jp/haru-komugi/20130616

2013-06-15

画像選択後に自動でサーバーに画像をアップ

20:25 |

フォームにて、画像選択後に自動でサーバーに画像をアップすることができます。

ちなみにAndroidではカメラ画像でも撮影→サーバーアップが可能となっています。

ファイル送信側ソース

<html>
<head>
<script>
window.addEventListener("load", function(){
  if (!window.File){
    result.innerHTML = "File API 使用不可";
    return;
  }
  result.innerHTML = "画像を選択してください";
  document.getElementById("imageFile").addEventListener("change", function(){
    var reader = new FileReader();
    var file = document.getElementById("imageFile").files[0];
    result.innerHTML = "画像の設定を設定しています・・・";
    reader.onload = function(event){
      document.getElementById("img").src = reader.result;
      var file = document.getElementById("imageFile").files[0];
      var fileName = file.name;
      var fileSize = file.size;
      result.innerHTML = '【画像情報】<br/>ファイル名:' + file.name + '<br />' + '種類: ' + file.type + '<br />' + 'サイズ: ' + file.size + '<br />';
      $.ajax({
        type: 'POST',
        url: 'upload.php',
        data: {photo{$id}: event.target.result},
        success: function(){
          result.innerHTML = "画像の設定が完了しました！";
        },
        error: function(a, b, c){
          result.innerHTML = 'ファイルのアップロードに失敗しました。';
          console.log(a, b, c);
        }
      });
    }
  reader.readAsDataURL(file);
  } , true );
} , true );
</script>
</head>
<body>
<h2>画像ファイルで更新</h2>
<form>
  <input type="file" accept="image/*;capture=camera" id="imageFile"/>
</form>
<div id="result"></div>
<img id="img"width="100%">
</body>
</html>

受け取るPHP側ソース

<?php

//POSTデーターの中にbase64で送られるのでPHPがデコードできるように修正
$from_arr = array( " " , "data:image/png;base64," , "data:image/jpg;base64," , "data:image/jpeg;base64," , "data:image/gif;base64," );
$to_arr   = array( "+" , "" , "" , "" , "" );

//base64からバイナリ画像に変換
$photo    = base64_decode( str_replace( $from_arr , $to_arr , $_POST[ $photoname ] ) );

//先頭８文字からファイルの拡張子を判定する
$head = substr( $photo , 0 , 8 );
if (strncmp("\x89PNG\x0d\x0a\x1a\x0a", $head, 8) == 0) {
  $ext = ".png";
} else if (strncmp('BM', $head, 2) == 0) {
  $ext = ".bmp";
} else if (strncmp('GIF87a', $head, 6) == 0 || strncmp('GIF89a', $head, 6) == 0) {
  $ext = ".gif";
} else if (strncmp("\xff\xd8", $head, 2) == 0) {
  $ext = ".jpg";
} else {
  echo "拡張子が見つかりません";
  exit;
}

//ファイル出力
file_put_contents( "uploadedimage{$ext}" , $photo );

?>

2013年06月14日のつぶやき

Twitter | 02:00 |

@php_flex_mysql: [svg][css] / “SVGをCSSを使ってHTMLで表現「svg2css」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ” URL

2013-06-14 09:02:49 via Hatena

コメントを書く

トラックバック - http://d.hatena.ne.jp/haru-komugi/20130615

		2013/06
日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30