Archive for the ‘Stray Child’ Category

かなり長い間、放置状態になっていたStray Childですが、先日、Amazon S3ホスティングを試してみるで久しぶりにメンテナンスしました。

その際に、SQLiteにデータを保存できないという問題が発生していましたので、ちょっと調べてみました。

どうやら、ブラウザからSQLを使ってローカルのデータベース(SQLite)に保存するという、Web SQL Databaseの機能が、W3Cの定めるHTML5の仕様から廃止されたようです。

Web SQL Database
続きを読む »

Amazon S3はその名の通りストレージサービスですが、静的コンテンツ(html、css、js、画像、swf、などなど・・・)のみのWebサイトのホスティングができるようになりました。

これを利用しない手はありません。

そういえば、約2年前に開発した、ブラウザのGPS機能とGoogle Mapsを利用して今いる場所の住所を表示するというWebアプリケーション、Stray ChildがHTML5の機能を利用した静的コンテンツのみのWebアプリケーションなので、これを機に、S3ホスティングに移行してみました。

移行したのは、地図画面と履歴画面の2つです。
※ 案内ページを除くと、Stray Childには、この2つの画面しかありません。

移行した手順を簡単にまとめます。
※ Amazon S3へのSign upが完了していることを前提にしています。
続きを読む »

Google Japan Blog: Google Maps API でマネタイズを見て、Google Mapsに広告を載せられることを知りました。

これはいい!ということで、以前、iphone向け(現在は、Android、Firefox 3.5に対応済)に開発したWebアプリ、Stray Childの地図に載せたいと思います。

バックナンバーはこちら

Services – Google Maps API – Google Codeを参考に実装してみました、非常に簡単です。

	var adsManagerOptions = {
		maxAdsOnMap : 2,
		style: G_ADSMANAGER_STYLE_ADUNIT
	};

	adsManager = new GAdsManager(map, 'pub-XXXXXXXXXX', adsManagerOptions);
	adsManager.enable();

という数行を、初期化処理に入れればいいだけです。

ただ、これだと、
続きを読む »

flashcast:フリーで働くITエンジニア集団のブログ: Stray ChildをFirefox 3.5対応の続きです。

もともとStray Childは、

  • 拡大/縮小はiPhone、Androidの操作に任せていた。
  • 表示は極力、地図だけにしたい。

ということで、ZoomIn、ZoomOutのボタンはつけていませんでした。

ただ、PCのブラウザで見ると、拡大はダブルクリックでできるのですが、縮小ができません。これは不便。。。なので、最小限の拡大/縮小機能を実装します。

GSmallZoomControl

を使います。
続きを読む »

Firefox 3.5では位置情報通知機能が実装されています。
次世代ブラウザ Firefox – 位置情報通知機能

なので、Stray ChildをFirefox 3.5でも使えるようにしたいと思います。

Geolocation対応

まず、位置情報を取得する部分を実装します。
とはいっても、Geolocation API Specificationに準拠しているようなので、iPhone対応のロジックがそのまま利用できます。
Geolocation の利用 – MDC
続きを読む »

flashcast:フリーで働くITエンジニア集団のブログ: Stray ChildをAndroid対応(gears編)でAndroidでも現在地の住所を表示できるようにしました。今回は、Androidでも住所の保存・閲覧・削除ができるようにします。

住所の保存は、iPhone同様、SQLiteを利用します。
また、前回同様、Gears API – Google Codeを利用します。

Database2API – gears – A proposal to add native HTML5 SQL API to Gears – Project Hosting on Google Codeが利用できれば、データを処理する部分はほとんど修正する必要はなかったのですが、試してみたところ、うまくいかず、まだサポートされていないようでしたので、Database API – Gears API – Google Codeで実装しました。

データベースをオープンする処理です。
続きを読む »

Stray ChildをAndroid対応したいと思います。
まずは、現在地の住所を表示する部分です。

現在地の緯度・経度の取得には、Androidにデフォルトでインストールされている、Gears API – Google Codeを使います。

まず、ダウンロードしたgears_init.jsを読み込みます。

<script type="text/javascript" src="../js/gears_init.js"></script>

これで、以下のGPS関連のAPIが使えるようになりました。
Geolocation API – Gears API – Google Code

gps = google.gears.factory.create('beta.geolocation');

続きを読む »

flashcast:フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(完成編)を書いた後すぐに、Stray Child(ストレイ チャイルド)をとのさまと同じ様に、appleのサイトに登録申請してみました。

やり方は、半年前のflashcast:フリーで働くITエンジニア集団のブログ: iPod touch用のWeb Applicationを作成したから登録してみると全く変わってないと思います。

気がついたら、公開されてました。

Apple – Web apps – Strayed Child

特に注意するようなところはありませんでしたが、画像アップ時に1度エラーになりました。
申請時には2つの画像をアップします。
続きを読む »

flashcast:フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(履歴をMap表示編)で履歴画面から地図画面に遷移し、その住所を再表示する機能を実装し、ある程度まとまった感があるので、逆ジオコーディングのWebサービスとして公開したいと思います。

スタイルシートを当てて、見た目を整え、ロジックを少しリファクタリングしました。あわせて、いくつか機能を拡張したので、メモしておきます。

●地図画面
1)メール送信機能
パラメータで緯度・経度を取得してその住所を表示できるようにしたので、
続きを読む »

ここ最近、通勤の行き帰りはiPhoneとのにらめっこが続いてます・・・

flashcast:フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(history画面作成編)で、履歴画面を作りました。

履歴画面の住所の表示をリンクにして、地図画面に遷移できるようにします。地図画面を表示する際に、住所の吹き出しを初期表示する仕様にします。

まず、一覧に表示されている住所をリンクに変更します。

javascriptで住所一覧を作っているところを少しなおします。

  for (i = 0; i < resultSet.rows.length; i++) {
   var address = tonosamart.evalJson(resultSet.rows.item(i).dat);

   if (address) {
    html += "<div><p><a href='../map/?latlng=" +
     splitLatlng(address.name)[0] + "," +
     splitLatlng(address.name)[1] + "'>" +
     address.Placemark[0].address + "</a></p></div>";
   }
  }

地図画面にパラメータで緯度・経度を渡すようにしています。
続きを読む »