APIの活用
地図の中心となる緯度経度を指定し、地図の拡大レベルを指定します。 緯度経度情報は下記のサイトで取得することができます。 座標として提示される35.710208, 139.812734という数字が緯度経度情報です。 Geocoding 池袋駅を中心とした地図を取得してみます…
iPhoneが持っているGPS機能を活用して位置情報を取得するプログラムです。 html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>iPhone位置情報取得</title> <script> //正常に緯度経度情報が取得できた時に呼ばれる関数 function successFunc(e){ var gps = document.getElementById("…</meta></meta></head></html>
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"></meta></head></html>
東京駅から埼玉県の長瀞駅まで車を運転して行くルートマップを表示します。 APIの指定項目を詳細に指定するだけで、きめ細かいドライブルートの指示が得られます。 こんな情報が自動的に出てくるなんてすごいですね。 html <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルート検索マップGoogle Maps </title></meta></head></html>…
池袋駅からフェリカまでのルートマップを表示します。 html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>ルートマップ</title> <style> html, body { margin:0; padding:0; } div#map_canvas { width:330px; height:370px; }…</meta></meta></head></html>
TwitterのSearch APIを利用して「池袋駅から半径３km」のつぶやきを自動で連続取得・表示します。 用意するファイル index.html style.css js/modernizr.js js/geo.js ファイルの内容 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>GPS機能とTwitterの連携</title> </meta></meta></head></html>
Twitterとはてなのアプリ連携で実現 はてなダイアリー管理画面の設定から外部サービス連携を選択 Twitter連携設定で自分のTwitterアカウントを入力して有効にします Twitter側で見てみると自分のツイートにはてなの記事が表示されました。 参考はてな記事公…
RSS配信用のxmlファイルを設置しているブログの情報は自動取得して表示することができます。 自動取得できるかどうかの見分け方 このオレンジのアイコンが出ていれば可能 （これはChromeでRSSワンタッチ登録拡張機能をインストールしている場合に表示されま…
Google APIを活用します。 Google Developersのグラフ作成用API「Google Chart Tools」の中にあるInfographicsにQRコード作成機能があります。 入力フォーム qrcode.html <html> <head> <meta charset="UTF-8"> <title>QRコード入力画面</title> <style> body{ text-align:center; } </style> </head> <body> <p>QRコードにしたい文字を入力し</p></body></html>…
