<! このページの説明は大学内ネットワークでは不可能かもしれない !>

さきほどサンプルに加えた修正で、現在地が変化するとリアルタイムに地図が更新されるようになったはずです。
ただし。。。
まだローカルコンピュータ上で実行している状態ですので、現在地の変えようがありません。
ここはひとつ、GPS機能のついたスマホで見られるようにしたいものです。

また、現在はローカルコンピュータ上にデータを参照しているだけなので、作った自分しか見られない状態です。

それではここで、実際のWebサーバーにファイル一式をアップロードして、誰でもスマホなどから見られるようにしてみましょう。

 
ファイルアップロードの方法
 
ファイルをアップロードする方法は、FTPやSFTPなどいくつかあります。

FTPでファイルをアップロードするには、FTPクライアントという種類のソフトを使います。
Windowsでは「FFFTP」、Macでは「Cyberduck」や「Fetch」が有名です。

参考)
今こそMac用FTPクライアントの定番を見直そう!
http://taichistereo.sblo.jp/article/39555899.html
Cyberduckが遅いので高速化する
http://taichistereo.sblo.jp/article/39339413.html

 

Aptanaを設定する
 
Aptana Studio 3には(Dreamweaverと同様?)FTPクライアント機能が備わっています。リアルタイムで同期するように設定することもできます。

 

プロジェクトエクスプローラー > geolocationプロジェクトを右クリック
 > Publish > Run Web Deployment Wizard

ftp1

 

FTPを選択 > 次へ

ftp2

 

図の通りすべて入力します。
・パスワードはここには書けないので講師が直接示します
・Remote Pathのところの、6ケタの数字は学籍番号です

入力チェック
1.「Test」をクリック ->「Connection to *** succeeded.」と出るか?
2.「Browse」をクリック -> 順にフォルダが開く。きちんと「geo」フォルダまで開くか?

ftp3_a

入力チェックが問題なければ「完了」をクリック。

 

手動アップロードの方法

図のようにSynchronizeを選択
ftp4

ダイアログが開くのでSynchronizeを実行
ftp5

 

サイトを確認

スマホのブラウザ(safariかchrome)で

http://tokyozokei.sakura.ne.jp/(学籍番号6ケタ)/geo

を開く

きちんと表示されましたか?

 
 

自動で同期するように設定

授業で扱うサーバーは、全員が自動同期の設定をしてしまうとアクセス集中して危険なので、この設定はしないでください。
自分で契約したサーバーを使う際に参考にしてください。

ftp3_b

こうすると、Aptanaでファイルを保存したら同時にサーバーにファイルがアップロードされます。

 

Have fun!(^ω^)

さきほど使用したgeolocation APIの「getCurrentPosition」というメソッドは、一度だけ位置情報を取得しました。

連続して位置情報を取得するメソッド「watchPosition」を使用すれば、非同期に位置情報取得処理が繰り返し行われ、常に位置情報を監視した状態を実現出来ます。

「watchPosition」を使用するには、コードをほんの少し書き換えるだけで済みます。

index.html

 
script.js

 
動作デモ
http://dev.koekatamarin.com/zokei/20130604_geolocation2/

さきほどの例では、緯度・経度の座標がすでに判明している前提で、その地点の地図を表示しました。
 
次の例では、HTML5の「Geolocation API」で現在地の座標を取得したうえで、地図を表示したいと思います。
 
動作デモ
http://dev.koekatamarin.com/zokei/20130604_geolocation1/
 
さきほどのプロジェクトのscript.jsを、以下のコードになるように修正します。
 
script.jsに追加・修正

 

記述が終わったら、ブラウザで確認します。
http://127.0.0.1:8020/geolocation/
(さきほどと同じアドレス)

まず、Google Mapを呼び出してみましょう。
Google Maps APIは、iTunesなどのようなREST APIではなく、外部スクリプトを直接呼び出してプログラムに組み込んで使います。
 
Wikipediaに記載されているフランス・パリの緯度・経度を元に、地図を表示するサンプルです。
 
動作デモ
http://dev.koekatamarin.com/zokei/20130604_geolocation0/
 
では、Aptanaでboilerplateプロジェクトを立ちあげましょう。
プロジェクト名は「geolocation」とします。
そして以下のコードを記述します。
 
index.html <head>内部の末尾に

 
index.html <body>内部に

 
script.jsに

 

style.css 215行目あたりに

 
記述が終わったら、ブラウザで確認しましょう。
なるべくChrome、あるいはFirefoxが望ましいです。
http://127.0.0.1:8020/geolocation/

WEB APIは大きく以下のタイプに分けられます。

 

(1) REST – HTTP GETでJSONやXMLを返却するAPI

iTunes API、郵便番号APIなど。これがもっとも一般的。

(2) スクリプトを読み込んで使うAPI

Google Mapsなど。

(3) HTML5(に対応したブラウザ)のAPI

Geolocation API、File API、、Clipboard API、Selectors APIなど。

厳密には「Web API」ではないとも言える

(4) OAuth認証が必要なAPI

Twitter API、Tumblr API(v2) など。

REST APIのうち、認証が必要なもの。ソーシャル系ではユーザー認証が求められるため。

(5) RESTでないAPI

SOAP、XML-RPC、AtomPPなど。

ブログのTrackback、Ping、リモート投稿などはXML-RPC

 

自分でWebサービスを作って、APIも作るぞ、などという時は、一般的にREST APIを作ることになります。

※「FuelPHP」などのMVCフレームワークを使う場合は、RESTコントローラを使って(継承して)Controllerを記述することで用意にREST APIを実装できます。