Google Map API


○Static Maps API

緯度経度を検索する↓
クネヒト API
(日本と世界の数値が若干違う。世界の方を基準に考えた方がよさそう)

http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Map Test</title>
</head>
<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.710058,139.810718&zoom=16&size=320x480&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>



○Maps JavaScript API
こちらはJavaScriptを使って埋め込む。
マーカー表示あり。
スカイツリーのMAPを入れこんでみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【1】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.710058,139.810718);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 15,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"スカイツリー"
  });
  marker1.setMap(map);

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

                                                                                                                • -

さらにマーカー、吹き出しを追加して、ズームレベルを下げる。
吹き出しは出来たけども、吹き出しのカスタム(サイズを変えるなど)がうまくできない。。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【1】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.710058,139.810718);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 12,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"スカイツリー"
  });
  marker1.setMap(map);
	
	// ■マーカーの追加表示(緯度経度指定の場合)
  var myLatlng = new google.maps.LatLng(35.6587039,139.7454081);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"東京タワー"
  });
  marker2.setMap(map);
	
	// ■マーカーをクリックしたら、情報ウィンドウを表示
  var marker1text = 'ここは<span style="color:#f00;">東京駅</span>です'
  var infowindow1 = new google.maps.InfoWindow({
    content: marker1text,
    maxWidth:200
  });
  google.maps.event.addListener(marker1, 'click', function() {
  infowindow1.open(map,marker1);
  });
	
  var marker2text = 'ここは<span style="color:#f00;">皇居</span>です'
  var infowindow2 = new google.maps.InfoWindow({
    content: marker2text,
    maxWidth:200
  });
  google.maps.event.addListener(marker2, 'click', function() {
  infowindow2.open(map,marker2);
  });

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

楽天アフィリエイト リンクシェア

まずは楽天アフィリエイトの リンクシェア で登録し、申請し、、をいくつか繰り返しなんとか完了。
商品リンクをつけたかったけど、乗っけたい商品の写真がなかったので、まずは試しにバナーを。


次はamazonを使ってアフィリエイトできるようにします。

ブックオフオンライン ブックオフオンライン【PC・携帯共通】

QRコード作成ツールをつくる。

QRコードを手軽に作れるサイトは沢山あるみたいだけど、
ココではQRコード作成ツールを作ってしまうというもの...

作ったものを使うときは、単純に画像を貼付ければ完了。

qcode.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>検索フォーム</title>
<style>
body {
  text-align: center;
}
</style>
</head>
<body>
<p>QRコードにしたい文字を入力してください。</p>

<!--↓<form action="データの送信先" method="どの方法で">〜</form>-->

<form action="qrcode.php" method="get">
キーワード:<input type="text" name="keyword" size="40">
<input type="submit" value="検索">
</form>
</body>
</html>

qcode.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>QRコード作成サイト</title>
<style>
body {
  text-align: center;
}
</style>
</head>
<body>
<p>生成されたQRコード</p>

<!--↓URLリクエストは「$_GET」を利用-->
<?php
$keyword = $_GET["keyword"];
$keywordurl = urlencode($keyword);
$url="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=$keywordurl";
?>
<!--↓画像として出力-->
<img src="<?php echo $url; ?>">

</body>
</html>

BASIC認証 for MAC

BASIC認証をするためには下記二つのファイルを作成する必要があるようです。
WINとMACでは若干扱い方が違うのですが、ここではMACでのやり方をメモしておきます。

.htaccess 
.htpasswd

➀フルパスの確認
1,下記内容を記述したphpファイルを作り、
  フルパスを知りたい(basic認証したい)箇所にアップデートする(freewebなど)

<?php
echo __FILE__;
?>

2,ブラウザにフルパスが表示される。


➁ドットから始まるファイルを表示させる
.htaccessなどのドットから始まるファイルはMACでは見れないため.....
1,ターミナルを起動し、下記入力すると見れるようになる。

defaults write com.apple.finder AppleShowAllFiles true killall Finder

2.すべての作業が終わった後は、ファイルを再度非表示にするためターミナルに下記入力するのを忘れないように。

defaults write com.apple.finder AppleShowAllFiles false
killall Finder

.htaccessファイルの作成
1,➁で確認したフルパスを記述した下記内容のファイルを.htaccess の名前で保存。(拡張子なし)

AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile .htpasswdへのフルパス
require valid-user

➃.htpasswdの作成
1,パスワード作成ツール PHP SPOT でパスワード作成。(パスワード暗号化)
2,1で作成したパスワードを.htpasswdの名前でファイル作成。(拡張子なし)


➄アップデート
BASIC認証したいディレクトリにアップデート。


○その他、.htaccessファイルの作成サイト.htaccess Editor

Dreamweaver (mac)のパーミッションの変更方法

ファイルパレットで表示をリモートサイトにして、ファイルを右クリックまたはCTRL+クリック。
権限の設定で変更。

ローカルファイルの所からは変更できないので注意!!

PHP MEMO01

プレビュー文字化け解消するために 「php.ini」を編集
行頭の「; セミコロン」を削除し、UTF-8に変更。

777
;default_charset = "iso-8859-1"

default_charset = "UTF-8"

1774
;mbstring.language = Japanese

mbstring.language = UTF-8

1780
;mbstring.internal_encoding = EUC-JP

mbstring.language = UTF-8

CSS3 メモ01

-ベンダープレフィックス-
CSS3では「-moz-」や「-webkit-」などのベンダープレフィックスと呼ばれる文字列を付与する必要がある。

スタイルシートをコピペすると自動的に作ってくれるサイトもあるらしい。
使い方は→