初心者からのweb勉強

2012-09-05 Google API

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>

f:id:ponkan7:20120905172400p:image



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

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


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>


<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>

f:id:ponkan7:20120905172401p:image


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

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


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>


<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>

f:id:ponkan7:20120905173152p:image

Google Maps JavaScript API

○ルート検索マップ

2点間のルート検索ができる。
ルートのみの表示で、詳細なし。

東京タワー 〜 通天閣のルート

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



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>


<script type="text/javascript">

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

  // ■地図を表示する緯度経度を指定する/地図表示するためにいれなきゃいけない。
  var latlng = new google.maps.LatLng(35.6587039,139.7454081);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 15,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  //ルート検索
  var rendererOptions = 
  {
  draggable: true,
  preserveViewport:false
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  var directionsService = new google.maps.DirectionsService();
    var request =
    {
    origin: "東京タワー",//出発点
    destination: "通天閣",//到着点
    travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード
    unitSystem: google.maps.DirectionsUnitSystem.METRIC,
    optimizeWaypoints: true,
    avoidHighways: false,
    avoidTolls: false
    };
    directionsService.route(request, function(response, status)
    {
        if (status == google.maps.DirectionsStatus.OK)
        {
        directionsDisplay.setDirections(response);
        }
    });
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // ルート検索地図に表示する
  directionsDisplay.setMap(map);
  
}//initialize() 

</script>

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


<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

f:id:ponkan7:20120905182840p:image

MEMO

DirectionsTravelMode.DRIVING 道路網を使用した標準の運転ルート。
DirectionsTravelMode.WALKING 歩行者専用道路と歩道(使用できる場合)を使用した徒歩ルート。




○ルート検索マップ(詳細)
ルートの詳細表示。

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



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>


<script type="text/javascript">

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

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.681382,139.766084);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 15,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  //ルート検索
  var rendererOptions = 
  {
  draggable: true,
  preserveViewport:false
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  var directionsService = new google.maps.DirectionsService();
    var request =
    {
    origin: "東京タワー",//出発点
    destination: "通天閣",//到着点
    travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード
    unitSystem: google.maps.DirectionsUnitSystem.METRIC,
    optimizeWaypoints: true,
    avoidHighways: false,
    avoidTolls: false
    };
    directionsService.route(request, function(response, status)
    {
        if (status == google.maps.DirectionsStatus.OK)
        {
		directionsDisplay.setDirections(response);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        }
    });
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // ルート検索地図に表示する
  directionsDisplay.setMap(map);
  
}//initialize() 

</script>

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


<div id="map_canvas" style="width: 640px; height: 480px;"></div>
<div id="directionsPanel" style="width: 640px; height: 480px;"></div>

</body>
</html>

f:id:ponkan7:20120905190604p:image



○ルート検索

海外検索できない。どうしてでしょう.....??

f:id:ponkan7:20120905204817p:image

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps ルート検索</title>
<style>
#map_canvas {
    width:700px;
    height:500px;
}
#container {
  width: 700px;
  margin: auto;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="mapdrow.js"></script>
</head>
<body onload="initialize();">
<div id="container">
<h1>Google Maps ルート検索</h1>
<p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p>
<p>
始点:<input type="text" name="start" id="start" size="12" maxlength="100">
 &nbsp;終点:<input type="text" name="end" id="end" size="12" maxlength="100">
</p>
<p>
 <input type="button" value="検索" onclick="searchRoute()" />
</p>
<div id="map_canvas"></div>
</div>
</body>
</html>


var map;
var directionsRenderer;
var directions;
var err = google.maps.DirectionsStatus;
var directionsErr = new Array();
directionsErr[err.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
directionsErr[err.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
directionsErr[err.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
directionsErr[err.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
directionsErr[err.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
directionsErr[err.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
directionsErr[err.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";

  //onload時の処理
  function initialize() {

  //Google Maps初期設定
    var opts = {
	zoom:14,
	center:new google.maps.LatLng(35.681382,139.766084),
	mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas") , opts);		    //Google Maps作成
	
  //ルートレンダラ生成
  directionsRenderer = new google.maps.DirectionsRenderer({
    polylineOptions: {
    strokeColor: '#FF0000',
    strokeWeight: 4,
    strokeOpacity: 0.7
    }
  });	
  directionsRenderer.setMap(map);	//ルートレンダラにマップを関連付け
  }

  //検索開始
  function searchRoute() {

  //textboxからの値を取得
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;

  //検索設定
  directions = new google.maps.DirectionsService();	//ルート生成

  //ルートリクエスト
  directions.route({
    origin:start,		//開始地点
    destination:end,	//終了地点
    travelMode:google.maps.DirectionsTravelMode.DRIVING,	//ルートタイプ(車)
    avoidHighways:true,		//高速道路(使わない)
    avoidTolls:true,		//有料道路(使わない)
    optimizeWaypoints: true,	//最適化された最短距離にする。
  },
  function(results, status) {	//ルート結果コールバック関数
    if (status == err.OK) {	//検索結果がtrueの場合
	directionsRenderer.setDirections(results);
    } else {	//検索結果がfalseの場合
	alert(directionsErr[status]);
    }
    });
}

2012-08-03 JQuery 横スライド

JQuery 横スライド

JQuery/ 横スライド
-SAMPLE-

・下記サイトよりダウンロードjsファイルに入っている easySlider1.7.js のみ使用。)
Easy Slider 17 Numeric Navigation jQuery Slider

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery easySlider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:1200,
	auto:true,
	continuous:true
  });
});
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</div>
</body>
</html>




JQuery NIVO_slider
-SAMPLE-

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>Nivo Slider</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen">
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/01.jpg" data-thumb="images/01.jpg" alt="">
<a href="http://dev7studios.com"><img src="images/02.jpg" data-thumb="images/02.jpg" alt="" title="This is an example of a caption"></a>
<img src="images/03.jpg" data-thumb="images/03.jpg" alt="" data-transition="slideInLeft">
<img src="images/04.jpg" data-thumb="images/04.jpg" alt="" title="#htmlcaption">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div>
</div>

</div>
<script type="text/javascript" src="demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
	$(window).load(function() {
			$('#slider').nivoSlider();
	});
</script>
</body>
</html>

○nivoslider 参考サイト○
Nivo Slider
http://webhako.net/jquery/plugin-nivo_slider/

2012-05-22 Flash まとめ01

FLASH

FLASH まとめ01

ActionScript3.0:  AIRアプリ及びAndroidアプリなどスマートフォン
ActionScript2.0:  Flashムービーのパッケージ及び組み込みUI
ActionScript Lite: 携帯電話

ワークスペース 「デザイナー」に設定
----------------------------------------------------


ボタン作成

  • アップ:マウスが外れている時
  • オーバー:マウスが乗っている時
  • ダウン:マウスが押された瞬間
  • ヒット:マウスの反応をうける面積

○文字の場合静止テキストでないと反応しない(ダイナミックテキストなどになっているとダメ!)
○文字のセンタリングする際、行揃えをセンタリングにして cut&peast



ショートカット
キーフレーム追加   [F6]
別画面でプレビュー  [Ctrl]+[Enter]


アクションボタン

ボタンを押すとスタート
on (release) {
play();
}


ボタンを押すとストップ
on (release) {
stop();
}


ボタンを押すと戻る(フレーム1に)
on (release) {
gotoAndStop(1);
}



swf書き出し

  • パブリッシュ設定でhtmlラッパーのチェックをはずす
  • Player をFlash player 9に落とす(多くのブラウザで見れるように)
  • パブリッシュボタンを押すとswfデータが書き出される

2012-05-21 CSS まとめ01

CSS まとめ01

Webページにスタイルシートを貼り付ける方法

インライン方式
実際の HTMLの要素に直接 style属性を使って設定
<body style="background-image:url('images/xxx.gif')">

エンベッド方式
head要素の中に style要素を使って埋め込み

外部リンク方式(リンキング方式)
別途スタイルシートだけを記述した文書を作成

参考サイト
http://www.scollabo.com/banban/lectur/style.html

list-style-type
リストの先頭に表示するマーカー文字の種類を指定。

list-style-type: none;マーカーなし
list-style-type: disc; 黒丸
list-style-type: circle; 白丸
list-style-type: square; 黒四角

参考サイト
http://www.htmq.com/style/list-style-type.shtm

text-decoration
テキストに下線・上線・打ち消し線を付けたり、点滅させる。
(点滅はIE・Safari・Google Chrome対応していない。)
同時に複数の値を指定する場合には、値を任意の順序でスペースで区切って記述。

none何もなし。初期値
underlineテキストに下線
overlineテキストに上線
line-throughテキストに打ち消し線
blinkテキストが点滅

text-align
文字の行揃えの位置や、均等割付を指定する
left左寄せにします。

right右寄せ
center中央揃え
justify均等割付

border-bottom
下ボーダーのスタイル・太さ・色を指定。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述。

noneボーダーなし。重なり合う場合は他の値が優先。初期値。
hiddenボーダーなし。重なり合う場合はhiddenの値が優先。
solid 1本線
double2本線
groove 立体的に窪んだ線
ridge立体的に隆起した線
inset上と左のボーダーが暗く、下と右のボーダーが明るく表示。囲まれた領域全体が立体的に窪んで表示。(上下左右の一部だけに指定しても立体感は出ない。)
outset上と左のボーダーが明るく、下と右のボーダーが暗く表示。ボーダーで囲まれた領域全体が立体的に隆起したように表示。上下左右の一部だけに指定しても立体感は出ない。
dashed 破線で表示。
dotted点線で表示。

参考サイト
http://www.htmq.com/style/border-bottom.shtml

font-family

sans-serifゴシック系のフォント
serif明朝系のフォント
cursive筆記体・草書体のフォント
fantasy装飾的なフォント
monospace等幅フォント

画像の読み込み方法

<img src=”画像ファイルまでのパス” />
・CSSでの読み込み(CSSファイル内)

background-image:url(“画像ファイルまでのパス”);
・CSSでの読み込み(CSSファイル内)

background:url(“画像ファイルまでのパス”);
・CSSでの読み込み(htmlタグ内に直接CSS指定)

overflow・・・・・はみ出た内容の表示方法を指定する
visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
入りきらない内容はスクロールして見られるようになります。
hidden
はみ出た部分は表示されません。
auto
ブラウザに依存します(一般的にはスクロールして見られるようになります)。

2012-05-20 STUDY MEMO/Dreamweaver 環境設定

Dreamweaver 環境設定


1,ウィンドウ→ワークスペースのレイアウト→コーダー に設定
2,サイト(メニューバー)→サイトの管理→新規→サイト名をつけてローカルフォルダを選ぶ

環境設定
[スタイルシート]
f:id:ponkan7:20120521185742p:image

[コードフォーマット]
f:id:ponkan7:20120521185744p:image

[コピー/ペースト]
f:id:ponkan7:20120521190113p:image

[サイト]
f:id:ponkan7:20120521190114p:image

[フォント]
f:id:ponkan7:20120521190220p:image

ショートカット
[Ctrl]+[home]  一番上に
[Ctrl]+[end]   一番下に

リンク集