モバイルサイトを作る
モバイルプレビュー用にSafariを活用
Windows 用 Safari 5.1.7をダウンロード
メニューバー 開発→ユーザーエージェント
jQuery Mobile
http://jquerymobile.com/download/
Copy-and-Paste Snippet for CDN-hosted files (recommended):
おすすめ設定↓
参考サイト：ASCII.jp：西畑一馬のjQuery Mobileデザイン入門
- 2ページ目以降のヘッダーにバックボタンを表示させる方法
<script> $(document).bind("mobileinit",function(){ $.mobile.page.prototype.options.addBackBtn = true; }); </script>
または
data-add-back-btn="true"
を書く
DreamWeaverを使う
挿入タブ→jQuery Mobile
Google Analytics／ウェブマスター ツール／ルート検索マップ
Google analytics
コンテンツ→ページ解析
どこがクリックされているのか、動向を確認することができる
SEO対策の話
最終的には、
タイトル、、
ウェブマスター ツール
検索エンジンを呼び込むのに外部リンクが作れない場合に使えるワザ
（はてなブログでは試せず）
- 「サイトを追加」ボタンから進む
- 管理したいサイトのURLを入力
- HTML 確認ファイルが出来上がるので、設定したサイトにアップする（indexと同じ階層）
- アップロードが確認できたら「確認」ボタンをクリックして完了
Google Maps JavaScript API
ルート検索マップ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js></script> <
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js></script> <
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QRコード作成</title> <style> body { text-align: center; } </style> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcode.php" method="get"> キーワード：<input type="text" name="keyword" size="40"> <input type="submit" value="作成"> </form> </body> </html>
QRコードできた。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QRコード作成サイト</title> <style> body { text-align: center; } </style> </head> <body> <p>生成されたQRコード</p> <?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; ?>"> <form method="get" action="download.php"> <input type="hidden" name="url" value="<?php echo $url?>"> <input type="submit" value="QRコード画像をダウンロード"> </form> </body> </html>
右クリックで保存してもよし、ダウンロードもできる仕様。
<?php $file = $_GET["url"]; $fullpath = $file; $filename = 'qrcode.png'; header("Content-type:image/png"); header('Content-Disposition:attachment; filename="'.$filename.'"'); readfile($fullpath); ?>
Google Maps APIを利用する
*表示させたい場所の緯度経度を調べておく
・基本編
グーグルマップへリンク
<!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.619344,139.776671&zoom=16&size=320x480&maptype=roadmap&sensor=false">マップで見る</a> </body> </html>
・応用編
htmlページの中にマップを埋め込む
クリックするとコメント表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API</title> <!--Google Maps APIを呼び出し--> <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.619344,139.776671); //地図必須プロパティを設定 var myOptions = { //ズームレベルの指定 zoom:14, //地図の中心を指定（上記で設定の緯度経度latlng） center: latlng, //地図のタイプ設定 //ROADMAP：デフォルト、SATELLLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERAIN：物理的な起伏を示すタイル 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.626318,139.770626); 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>
