Main Menuブログ - 最新エントリー
ぐるなび、じゃらん、JTB、ホットペッパーなど、
緯度経度を出力するさまざまなWeb APIが提供されています。
各社が収集した膨大なデータを誰でも利用することができるわけです。
たとえば、地域の紹介をするにあたって、
これらのAPIを活用することで、
観光地や見所を掲載したオリジナルマップの上に
飲食店やホテルの情報を自ら取材することなくマーカーを配置することもでき、
地域の紹介という目的の上ではかなり簡単に情報を充実させることも可能です。
現在実験的にGNAVIとマッシュアップしてみました。
じゃらん、ホットペッパーのマーカーをマッピングします。
http://xoops.iko-ze.net/modules/maps/
表示にはGmarkerManagerを使用し、
ZoomLvが 10以上のとき、マーカーを表示するようにしています。
希望があればスクリプトは配布しますが、あくまで実験的なもので、
Gnaviには今後もリリースパックとするつもりはありません。
このGoogleMapではリアルタイムに各APIからマーカーデータを取得し、地図上に配置していきます。
ホットペッパーはJSONPでAPIが提供されているため、導入がかなり楽でしたが、
じゃらんのようにXMLでしか提供されていないサービスは
クロスドメインの壁があってどの手法が最適なのか迷います。
現在はFlashを通過させて取得するという苦肉の策をとっています。
本来なら、今後のサービスはJSONPで出るべきだと思うところですが・・・。
緯度経度を出力するさまざまなWeb APIが提供されています。
各社が収集した膨大なデータを誰でも利用することができるわけです。
たとえば、地域の紹介をするにあたって、
これらのAPIを活用することで、
観光地や見所を掲載したオリジナルマップの上に
飲食店やホテルの情報を自ら取材することなくマーカーを配置することもでき、
地域の紹介という目的の上ではかなり簡単に情報を充実させることも可能です。
現在実験的にGNAVIとマッシュアップしてみました。
じゃらん、ホットペッパーのマーカーをマッピングします。
http://xoops.iko-ze.net/modules/maps/
表示にはGmarkerManagerを使用し、
ZoomLvが 10以上のとき、マーカーを表示するようにしています。
希望があればスクリプトは配布しますが、あくまで実験的なもので、
Gnaviには今後もリリースパックとするつもりはありません。
このGoogleMapではリアルタイムに各APIからマーカーデータを取得し、地図上に配置していきます。
ホットペッパーはJSONPでAPIが提供されているため、導入がかなり楽でしたが、
じゃらんのようにXMLでしか提供されていないサービスは
クロスドメインの壁があってどの手法が最適なのか迷います。
現在はFlashを通過させて取得するという苦肉の策をとっています。
本来なら、今後のサービスはJSONPで出るべきだと思うところですが・・・。
Google Static Maps APIなどでは、
地図の画像域のレンジ（緯緯度の範囲）を算出して
データベースからマーカーを抽出する必要があります。
算出は一工夫必要なので簡単に紹介しておきます。
その方法は以下の通りです。
実測したわけではないので正確さは補償できませんが、
Gnaviモバイルでは上記の方法で取得しています。
間違ってたらごめんなさい。
ZOOM値はこの計算値を単純に出せるよう設計されているということですね。
地図の画像域のレンジ（緯緯度の範囲）を算出して
データベースからマーカーを抽出する必要があります。
算出は一工夫必要なので簡単に紹介しておきます。
その方法は以下の通りです。
<PHP?>
//地図尺度
$myzoom=13;
//中心座標
$mylat=36.060923;
$mylng=136.500556;
//出力画像サイズに合わせて画像の端から端の距離を以下のように求めます。
//端から端の距離（latlng単位） = 画像幅 / ( 2^地図尺度 )
//サイズ 240x180 pow:PHPのべき算
$langex=240/pow(2,$myzoom);
$langey=180/pow(2,$myzoom);
// 以下の結果を1000000分の1で丸め処理して下さい。
// 中心点に距離を加算して表示地図のレンジを算出します。
//丸め関数を用意しましょう
$lattop = round(($mylat + $langey/2)*1000000)/1000000;
$latbtm = round(($mylat - $langey/2)*1000000)/1000000;
$lngtop = round(($mylng + $langex/2)*1000000)/1000000;
$lngbtm = round(($mylng - $langex/2)*1000000)/1000000;
//SQL発行
$mysql="SELECT * FROM mytbl WHERE lat<$lattop AND lat>$latbtm
AND lng<$lngtop AND lng>$lngbtm ";
実測したわけではないので正確さは補償できませんが、
Gnaviモバイルでは上記の方法で取得しています。
間違ってたらごめんなさい。
ZOOM値はこの計算値を単純に出せるよう設計されているということですね。
とりあえず完成しました。
バグフィックス、ランゲージ設定などを終えて
ソースをクリーンナップしてから公開します。
なお、QRコードの連携機能を追加しました。
記事を直接携帯に送る機能として、
アイテムページにQRコード表示します。
各オプションはぷリファレンスで有効にする必要があります。
携帯画面の文字数は制限を加えています。
メモ程度の報告で申し訳ありませんが、
ご意見などいただければ幸いです。
バグフィックス、ランゲージ設定などを終えて
ソースをクリーンナップしてから公開します。
なお、QRコードの連携機能を追加しました。
記事を直接携帯に送る機能として、
アイテムページにQRコード表示します。
各オプションはぷリファレンスで有効にする必要があります。
携帯画面の文字数は制限を加えています。
メモ程度の報告で申し訳ありませんが、
ご意見などいただければ幸いです。
地図画面の設計・開発完了
おおむね以下のようなイメージとなります。
画像リンクはキャッシュされずページ毎に読み込みが発生するので断念しました。
しかし、地図のナビゲーションだけはもっとわかりやすくしたいなぁ。
説明・・・
●地図部
したのナビゲーションで移動できます。
●マーカーリスト
mobile版のマーカーリストは地図の画面内に表示されているものの
一覧になります。アルファベットは連動して 最大A-Zの２６マーカーが表示されます。
●住所・地名で検索
GEOを組み込みました。番地までの詳細検索が出来ます。
検索をクリックすると該当の場所に移動します。
結果についてはGoogleGeoCorderと同じです。
移動しにくいモバイルではピンポイントの住所を検索できる機能は重宝しますね。
●カテゴリリスト
カテゴリの一覧が表示されます。
モバイルへのアクセス：過去のブログよりどうぞ
http://xoops.iko-ze.net/modules/weblogD3/details.php?blog_id=13
おおむね以下のようなイメージとなります。
画像リンクはキャッシュされずページ毎に読み込みが発生するので断念しました。
しかし、地図のナビゲーションだけはもっとわかりやすくしたいなぁ。
説明・・・
●地図部
したのナビゲーションで移動できます。
●マーカーリスト
mobile版のマーカーリストは地図の画面内に表示されているものの
一覧になります。アルファベットは連動して 最大A-Zの２６マーカーが表示されます。
●住所・地名で検索
GEOを組み込みました。番地までの詳細検索が出来ます。
検索をクリックすると該当の場所に移動します。
結果についてはGoogleGeoCorderと同じです。
移動しにくいモバイルではピンポイントの住所を検索できる機能は重宝しますね。
●カテゴリリスト
カテゴリの一覧が表示されます。
モバイルへのアクセス：過去のブログよりどうぞ
http://xoops.iko-ze.net/modules/weblogD3/details.php?blog_id=13
携帯の要望が多いので、ぼちぼち作ろうと思っています。
ちょっとだけイメージを公開します。
モバイル対応は迷った挙句、独自テンプレートを作っています。
Wizモバイルに対応するかも含めて今後判断します。
とりあえず、さわりだけですが、
GnaviMobileの地図画面を作ってみました。
本サイトのGnaviD3のモバイル版（地図のみ）です。
http://xoops.iko-ze.net/modules/gnavi/index.php?page=map
●地図は画像のリクエストですから、かなりの通信量になります。
パケット定額などで無いとありえない請求が来るかも知れませんのでご注意下さい！
●上記URLを携帯で見たばあいのみ携帯用の画面になります。
●矢印は一応以下のようにキー設定してあります。
２上、８下、４左、６右、5拡大、0縮小
●文字化けの恐れあります。
正直、地図専用の画面をつけるかどうか迷ったのですが。
記事画面やカテゴリ一覧画面はあとの課題です。
ちなみに、サイトはGoogle Static Maps API で作っています。
地図サイズ、マーカーの色はプリファレンスで設定可能です。
また、モバイルモードを使用するかどうかの設定も追加しています。
ちなみに FOMA（imode）でしかテストできないので
他の機種で不具合あれば教えて下さい・・・
ちょっとだけイメージを公開します。
モバイル対応は迷った挙句、独自テンプレートを作っています。
Wizモバイルに対応するかも含めて今後判断します。
とりあえず、さわりだけですが、
GnaviMobileの地図画面を作ってみました。
本サイトのGnaviD3のモバイル版（地図のみ）です。
http://xoops.iko-ze.net/modules/gnavi/index.php?page=map
●地図は画像のリクエストですから、かなりの通信量になります。
パケット定額などで無いとありえない請求が来るかも知れませんのでご注意下さい！
●上記URLを携帯で見たばあいのみ携帯用の画面になります。
●矢印は一応以下のようにキー設定してあります。
２上、８下、４左、６右、5拡大、0縮小
●文字化けの恐れあります。
正直、地図専用の画面をつけるかどうか迷ったのですが。
記事画面やカテゴリ一覧画面はあとの課題です。
ちなみに、サイトはGoogle Static Maps API で作っています。
地図サイズ、マーカーの色はプリファレンスで設定可能です。
また、モバイルモードを使用するかどうかの設定も追加しています。
ちなみに FOMA（imode）でしかテストできないので
他の機種で不具合あれば教えて下さい・・・
要望をまとめておきます。
・モバイル対応
方針を検討中（xmobile?,wizmobile?）
QRコードとの連携、モバイルGoogleMapでの処理
・UTF-8のファイルを用意（callback_after_stripslashes_localをカット？）
・V0.9系の標準コメントファイル
現在のファイルは8.1専用。要望があれば・・・
・デザイン
CSSバグを削除、WEB2.0ライクに
・データの一括エクスポート、インポート処理
・その多の情報エディタ
追加情報の項目を管理画面で設定
・カテゴリーの一括管理
並び順などを一括で操作できるように
・写真機能
（exif smarty plugin＋lightBox）
バグ関連
投稿の権限についてのバグ？（未確認）
http://xoops.iko-ze.net/modules/d3forum/index.php?topic_id=93
一部の環境でXML通信が出来ない
htaccessに追記
AddType "application/xml; charset=UTF-8" xml rdf
・モバイル対応
方針を検討中（xmobile?,wizmobile?）
QRコードとの連携、モバイルGoogleMapでの処理
・UTF-8のファイルを用意（callback_after_stripslashes_localをカット？）
・V0.9系の標準コメントファイル
現在のファイルは8.1専用。要望があれば・・・
・デザイン
CSSバグを削除、WEB2.0ライクに
・データの一括エクスポート、インポート処理
・その多の情報エディタ
追加情報の項目を管理画面で設定
・カテゴリーの一括管理
並び順などを一括で操作できるように
・写真機能
（exif smarty plugin＋lightBox）
バグ関連
投稿の権限についてのバグ？（未確認）
http://xoops.iko-ze.net/modules/d3forum/index.php?topic_id=93
一部の環境でXML通信が出来ない
htaccessに追記
AddType "application/xml; charset=UTF-8" xml rdf
GNAVI V0.90βを公開します。
このバージョンは開発中のもので新しい機能がいくつか追加されています。
安定版はとりあえずver0.82です
以前のバージョンとは上位互換性がありますが、
テンプレートの修正を行っていますので
バージョンアップにはご注意下さい。
モジュールアップデートが必要です。
バグなど発見されましたら、
お手数ですがご連絡いただければれしいです！
ダウンロード
http://xoops.iko-ze.net/modules/mydownloads/
このバージョンは開発中のもので新しい機能がいくつか追加されています。
安定版はとりあえずver0.82です
以前のバージョンとは上位互換性がありますが、
テンプレートの修正を行っていますので
バージョンアップにはご注意下さい。
モジュールアップデートが必要です。
バグなど発見されましたら、
お手数ですがご連絡いただければれしいです！
ダウンロード
http://xoops.iko-ze.net/modules/mydownloads/
友人と写真の勉強をしようという話になって、
GNAVIを元にブログモジュールを作りました。
こちらはサンプルサイトですが、ご覧ください。
（データは仮にいれています。そして写真はド素人ですｗ）
http://blog.885000.net/
ブログもGnaviも結局はデータベース型モジュールですので
トラックバックとカレンダー表示が無い以外はブログとして
十分機能するだろうということです。
GNAVIを元にブログモジュールを作りました。
こちらはサンプルサイトですが、ご覧ください。
（データは仮にいれています。そして写真はド素人ですｗ）
http://blog.885000.net/
ブログもGnaviも結局はデータベース型モジュールですので
トラックバックとカレンダー表示が無い以外はブログとして
十分機能するだろうということです。
本サイトのmap.jsを弄ってみました。
GoogleMapに新しい表示スタイル「Terrain」モードが追加されたみたい。
簡単にGNAVIに対応させることができました。
http://xoops.iko-ze.net/modules/gnavi/index.php?page=map
こちらの右上のボタンが「地図」「航空写真」「地形」担っています。
GoogleMapに新しい表示スタイル「Terrain」モードが追加されたみたい。
簡単にGNAVIに対応させることができました。
http://xoops.iko-ze.net/modules/gnavi/index.php?page=map
こちらの右上のボタンが「地図」「航空写真」「地形」担っています。
