可変レイアウト：レイアウトの設定
画面サイズごとのデザイン
htmlソースコード
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>html5 + css3</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="style-s.css"media="only screen and (max-width:599px)"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width: 600px)and(max-width: 979px)"> <link rel="stylesheet" href="style-l.css" type="text/css" media="screen.print"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400"> </head> <body> <section id="main"> <header> <section id="title"> <h1><img src="https://lh4.googleusercontent.com/-aetAvlciFMM/UE3KkDEuaNI/AAAAAAAABVE/C4wdOHo3oe4/s16/music05-007.gif" width="50" height="50" alt="PICKUP STREAM">PICKUP STREAM</h1> </section><!--#titile--> <section id="icon"><!--#icon--> <ul> <li><a href="#"><img src="https://lh4.googleusercontent.com/-c7rw4BpKaUA/UE3A5OXa40I/AAAAAAAABT0/z8n4xKNCnuY/s512/Twitter_512x512.png" width="23" height="23" alt="twitter">twitter</a></li> <li><a href="#"><img src="https://lh4.googleusercontent.com/-2MU7HnbUmfc/UE3A5ENuxBI/AAAAAAAABTs/nPZZ8ZS411Y/s512/facebook.png" width="25" height="25" alt="facebook" >facebook</a></li> <li><a href="#"><img src="https://lh4.googleusercontent.com/-rliReqTBqNk/UE3A5Pyi4bI/AAAAAAAABTw/4TEEP_NWzbk/s300/google_plus_logo.png" width="25" height="25" alt="google plus">google plus</a></li> <li><a href="#"><img src="https://lh6.googleusercontent.com/-iC2BvY4MeFE/UE3A53sx6_I/AAAAAAAABT4/4977gfLtuTI/s225/images.jpg" width="20" height="20" alt="rss">RSS</a></li> </ul> </section><!--#icon--> <caption class="headerimg"> <img src="https://lh3.googleusercontent.com/-YqEnG5TVDEw/UE2_V4hSs_I/AAAAAAAABTc/G-3EGCf4Hlg/s640/futta2861.jpg" width="960" height="180" alt=""> </caption><!--headerimg--> <nav class="menu1"><!--.menu1--> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTENT</a></li> </ul> </nav><!--.menu1--> </header><!--header--> <article id="content"><!--content--> <section class="date"> <span>1</span>AUG </section><!--.date--> <h2>文章のタイトル</h2> <section class="cat"> CATEGORY: <a href="#">海と海岸と空</a> </section><!--category--> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p><img src="https://lh3.googleusercontent.com/-iKg_mlXT7nw/UE2_WKjJnLI/AAAAAAAABTg/ZfF1TBxKEEo/s640/futta0574.jpg" width="550" height="300" alt="深海のガラスの結晶画像"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </article><!--.content--> <aside> <section class="side"> <h3>CATEGORIES</h3> <ul> <li><a href="#">山と森林</a></li> <li><a href="#">海と海岸と空</a></li> <li><a href="#">都市と建築</a></li> <li><a href="#">地下</a></li> </ul> </section><!--.side--> <section class="subside"> <h3>RECENT POSTS</h3> <ul> <li><a href="#">海岸のデコレーション</a></li> <li><a href="#">風車と海風の関係</a></li> <li><a href="#">ツルを伸ばしてどこまでも</a></li> <li><a href="#">色とりどりの絨毯</a></li> <li><a href="#">休日に買い物にいくなら</a></li> <li><a href="#">高層ビルと風の関係</a></li> </ul> </section><!--.subside--> </aside> <footer> <p>PICKUP STREAM</p> <small>copyright ©: PICKUP STREAM, all rught reserved.</small> </footer> </section><!--main--> </body> </html>
style-l.css
@charset="UTF-8"; body{ margin: 24px 10px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } @media only screen and (min-width: 600px)and(max-width: 979px){ #main{ width: 100%; } } @media only screen and (max-width: 599px){ #main{ width: 100%; } } #main{ width: 960px; margin: auto; } header{ margin: 0 0 50px; } #content{ width: 600px; float: left; margin: 0 0 50px; } aside{ width: 300px; float: left; margin: 0 0 50px; } footer{ clear: both; } #title{ float: left; } #title h1{ margin: 0; line-height: 1; } #icon{ float: right; text-align: right; } #icon ul{ margin: 0; padding: 3px 0 0; } #icon li{ display: inline; list-style-type: none; } #icon img{ border: none; } #headerimg img{ vertical-align: bottom; } nav{ font-family: Verdana, Geneva, sans-serif; font-size: 14px; overflow: hidden; border-top: solid 1px #fff; background-color: #000; } nav ul{ margin: 0; padding: 0; } nav li { list-style-type: none; float: left; } nav li a { display: block; width: 120px; padding: 6px 0; border-right: solid 1px #fff; color: #fff; text-align: center; text-decoration: none; } nav li a: hover{ background-color: #0097d8; } .date{ float: right; background-color: #0097d8; padding: 8px 22px; border-radius: 55px/48px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; } .date span{ display: block; font-size: 32px; line-height: 1.0; } #content h2{ font-size: 28px; border-bottom: solid 1px #aaa; margin: 0 0 6px; padding: 0 0 3px; } .cat{ font-size: 14px; color: #666; } .cat a{ text-decoration: none; color: #666; } #content p{ line-height: 1.6; } .subside{ margin-bottom: 50px; } .subside h3{ font-family:"Arial Black", Gadget, sans-serif; font-size: 26px; color: #66c1e8; margin: 0 0 5px; } .subside ul{ margin: 0; padding: 0; border-top: solid 1px #aaa; } .subside li{ margin-bottom: 0; list-style-type: none; border-bottom: solid 1px #aaa; } .subside li a{ display: block; font-size: 14px; text-decoration: none; color: #666; padding: 10px 0 10px 20px; backgournd-image: url(); background-repeat: no-repeat; background-position: 0 50%; } .subside li a: hover{ background-color: #b4f0ff; } footer{ font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; color: #fff; background-color: #000; padding: 10px 10px 20px; } footer p{ margin: 0; } footer{ font-size: 12px; font-weight: bold; display: block; }
位置情報を取得してgooglemapに表示 javascript
HTML ソースコード
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" > <title>i phone androidでの位置情報の取得</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <link rel="stylesheet" type="text/css" href="ccc9.css"> <script src="ddd4.js" type="text/javascript"></script> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>
ddd4.js
javascriptソースコード
// JavaScript Document //緯度経度用変数の初期化 var latitude =""; var longitude =""; //正常に緯度経度が取得できたときの関数 function successFunc(e){ //前の緯度経度と比較して変わったら地図の更新 if ((e.coords.latitude != latitude) || (e.coords.longitude != longitude) ){ // 緯度取得 latitude = e.coords.latitude; //経度取得 longitude = e.coords.longitude; //緯度経度の設定 var myLatLng = new google.maps.LatLng(latitude,longitude); //オプションを設定 var myOptions = { zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図の生成,表示 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //マーカーの表示 var marker = new google.maps.Marker({ position: myLatLng, map: map, draggable: true, title:"現在地" }); } } //i phone android端末の検出 デバイスにあわせた画面表示 function detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } } //エラー時の関数 function errorFunc(e){ switch(e.code){ case 1: alert("エラー:GPSの利用が許可されていません。GPSを使えるように設定してください。"); break; case 2: alert("エラー:位置情報が取得できませんでした。"); break; case 3: alert("エラー:タイムアウトしました。"); break; default: alert("エラー:位置情報を表示できませんでした。"); break; } } navigator.geolocation.watchPosition(successFunc, errorFunc);
@charset "utf-8"; /* CSS Document */ html,body{ margin: 0; padding: 0; height: 100%; } #map_canvas{ height: 640px; width: 640px; }
その時に調べた現在地
位置情報取得 javascript
[successFunc]
アクション成功時に行う関数
アクションは非同期で呼び出され この関数を呼び出した後に何らかの処理を行っても アクションが完了している保証はありません。 アクションが完了していることを前提とする処理は 必ずsuccessFuncで行うようにします。
successFuncには引数としてアクションの実行結果が渡される。
「latitude」
緯度（-180〜180）度
「longitude」
経度（-90〜90）度
「altitude」
高度 m
「accuracy」
緯度・経度の誤差 m
「altitudeAccuracy」
高度の誤差 m
「heading」
方角（0〜360）度
「speed」
速度 m/秒
「getCurrentPosition」
ユーザーの現在の位置情報を一度取得
「watchPosition」
ユーザーの位置情報を定期的に監視
「clearWatch」
watchPosition()による位置情報の監視をクリアする
htmlソースコード
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>i phone 4sでの位置情報の取得</title> <script src="ddd3.js"></script> <meta name="viewport" content="initial-scale=1.0,user-scalable="no"> </head> <body> <div id="gps">GPS</div> </body> </html>
// JavaScript Document function successFunc(e){ var gps = document.getElementById("gps"); gps.innerHTML = ("Lat:" + e.coords.latitude + "long:" + e.coords.longitude); } //エラーのとき function errorFunc(e){ var gps = document.getElementById("gps"); switch(e.code){ case 1: gps.innerHTML = "エラー:GPSの利用が許可されていません。GPSを使えるようにして下さい。"; break; case 2: gps.innerHTML = "エラー:位置情報が取得できませんでした。"; break; case 3: gps.innerHTML = "エラー:タイムアウトしました。"; break; default: gps.innerHTML = "エラー:位置情報を表示できませんでした。"; break; } } navigator.geolocation.watchPosition(successFunc, errorFunc);
現在の位置情報 （緯度経度）
■
「DirectionsService」
ディレクション(道案内)サービス。
リクエストの要求、計算された結果。
またDirectionsRenderer オブジェクトで直接地図に描画することができる。
「origin」
LatLng | String（必須）
ルートの計算を開始する、開始位置を指定。
「destination」
LatLng | String （必須）
ルートの計算の終了位置を指定します。
「unitSystem:DirectionsUnitSystem.METRIC,」
単位のkm表示
「optimizeWaypoints」 Boolean （省略可能）
指定された waypoints を使用するルートを最適化して、最短ルートを取得するよう指定します。true の場合、ルート サービスは並べ替えた waypoints を waypoint_order フィールドに返します 。
google map API [javascript]
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <title>google map API javascript</title> <!--メイン処理--> <script type="text/javascript"> <!--地図初期化--> function initialize(){ <!--緯度経度を指定--> var latlng = new google.maps.LatLng(51.462643882177574,-0.11486291885375977) ; <!--プロパティ設定--> var myOption = { <!--ズーム指定 0〜17--> zoom: 14, <!--地図の中心を指定--> center: latlng, <!--地図タイプ--> mapTypeId: google.maps.MapTypeId.ROADMAP }; <!--地図プロパティ設定ここまで--> <!--canvasとの結びつけ--> var map = new google.maps.Map(document.getElementById("map_canvas"), myOption); <!--中心にマーカー表示--> var marker1 = new google.maps.Marker({ position: latlng, title: "Brixton in LONDON" }); marker1 .setMap(map); <!--マーカーの追加--> var myLatlng = new google.maps.LatLng(51.458750093585785,-0.11332333087921143); var marker2 = new google.maps.Marker({ position: myLatlng, title: " a homestay" }); marker2.setMap(map); <!--マーカーをクリックしたら情報ウィンドウを表示--> var marker1text = 'ここが<span style="color: #545454;">「Brixton station」</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: #545454;">「HOMESTAY先」</span>です' var infowindow2 = new google.maps.InfoWindow({ content: marker2text, maxWidth: 200 }); google.maps.event.addListener(marker2,'click',function(){ infowindow2.open(map,marker2); }); } </script> </head> <body onload = "initialize()"> <!--地図の描画--> <div id="map_canvas" style="width: 600px; height: 450px;"></div> <h2>Brixton in LONDON</h2> <p>以前に留学していたときに住んでいた場所です。 black musicを聴くためだけに行っていたのであえて 一番black peopleの人口が多い場所をえらびここになりました。 罵倒されたこともありますが住みやすい場所でした。<br /> 最寄の駅からホームステイ先の家までのマーカーです。 </p> </body> </html>
マーカー表示２箇所
吹き出しあり
様々なAPI機能 ｐｈｐ２
単語集
「API」
(Application Program Interface)
「require_once」
require とほぼ同じ意味ですが、 ファイルがすでに読み込まれているかどうかを PHP がチェックするという点が異なります。 すでに読み込まれている場合はそのファイルを読み込みません。
「cURL」
Client for URLsからきていて
いろいろな通信プロトコルを用いてデータを転送するライブラリやコマンドを提供するプロジェクト。
WebSearchServiceの使い方
<p>「http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch」</p>
まず上記部分をYahoo! APIで提供されているWeb検索サービスでひろってくる。
上記URLの後ろに「?」をつけて、その後ろにパラメータを「&」でつなげたURLを作ることでWeb検索サービスを利用できる。
rakuten link share php1
<?php require_once("function2.php"); $url="http://www.linkshare.ne.jp/index.xml"; //echo $url; $xml=simplexml_load_file($url); $hits=$xml->channel->item; ?> <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リンクシェアサイトの最新情報一覧</title> </head> <body> <p></p> <ul> <?php foreach($hits as $hit){ ?> <li><a href="<?php echo h($hit->link); ?>"> <?php echo h($hit->title); ?></a></li> <?php }?> </ul> </body> </html>
function2.php
<?php //htmlspecialchars : 文字列中のHTMLを無効化します function h($str) { $str=htmlspecialchars($str,ENT_QUOTES); $str=str_replace("&lt;!--","<!--",$str); $str=str_replace("--&gt;","-->",$str); return $str; } ?>
