20120516 NetCommons GoogleMap

GoogleMap 　
モジュール
の紹介
2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一

自己紹介
＠ohwada
大和田健一
横浜市戸塚区在住
ITコンサルタント
NetCommons
XOOPS / WordPress / Android

XOOPS
2011年４月
2.2 リリース

2012年４月
リンク集モジュール
ロシア語版


WordPress
2012年４月 3.3.2 リリース

ワードプレス勉強会＠横浜・関内


Android
2012年４月 SDK r19 リリース

日本Androidの会横浜支部


Android によるロボット制御


NetCommons


YN150プロジェクト

構築運営支援
無償レンタルサーバー
ネットコモンズ
インストール済
（協力：東京都市大学）
http://yn150.jp/


開発したモジュール

１．Google Map
２．Twitter / Facebook
３．ヘッダ・チェンジャー
４．Facebook風掲示板
http://ohwada.yn150.jp/


Google Map


Twitter / Facebook
１．標準のログインの代わりに
Twitter (Facebook) で
ログイン出来ます
２．ログインユーザの
Twitter (Facebook) の
タイムラインを表示する
http://ohwada.yn150.jp/


ヘッダ・チェンジャー
標準
ヘッダカラム、左カラム、右カラム
（青色）
全てのページで共通

ヘッダカラム（桃色）
左カラム（緑色）
右カラム（黄色）
ページ毎に異なるものに


Facebook風掲示板
汎用データベース・モジュールをカスタマイズ


NetCommons
モジュール開発


必要な知識

１．HTML ＋ CSS
２．PHP / Smarty
３．MySQL
４．JavaScript / prototype.js


３つのポイント

Maple ベース
1. DIコンテナ
2. フィルタチェイン
3. GＵI / WYSIWYG
http://ohwada.yn150.jp/explain/di-container/


DIコンテナ
Dependency Injection
依存性の注入

Java Spring
http://www.atmarkit.co.jp/fjava/rensai3/springdi01/springdi01_1.html


フィルタチェイン

PHP Ethna
http://ethna.jp/ethna-document-dev_guide-app-ﬁlterchain.html


GＵI / WYSIWYG
What You See Is What You Get
見たままが得られる
=> JavaScript で実現


NetCommons
GoogleMap
モジュール


お知らせ

新バージョンリリース
1. GoogleMaps API V3 対応
API Key 不要
2. 住所検索追加
http://ohwada.yn150.jp/googlemap/


マニュアル http://bit.ly/ITuwAz


モジュール開発
ベースは
ブログパーツモジュール
公式サイト拡張モジュール
機能がシンプル
初心者にお勧め
http://www.netcommons.org/mudl5vlri-167/#_167


API : JavaScript
https://developers.google.com/maps/documentation/javascript/
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), myOptions );
}
</script>
<body onload="initialize()">


実装上の工夫
理由
NetCommons の GUI と衝突

実装の例
1. 地図を表示する
2. 参照で地図を表示する
3. 地図の緯度経度を選択する


1. 地図を表示する


地図を表示する
googlemap_view_main_init.html
function googlemap_load<{$id}>() { API そのまま
var latlng = new
google.maps.LatLng( parseFloat(<{$action.parts_data.parts_latitude}>),
parseFloat(<{$action.parts_data.parts_longitude}>) );
var zoom = Math.ﬂoor( <{$action.parts_data.parts_zoom}> );
var ele = document.getElementById( "googlemap_canvas<{$id}>" );
var map_options = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
… 中略
}

googlemap_view_main_init.html

<{if $action.load_script}>
<script src="http://maps.google.com/maps/api/js"
type="text/javascript" charset="utf-8">
</script>
<{/if}>
function googlemap_load<{$id}>() {
… 中略複数表示する
}
setTimeout( 'googlemap_load<{$id}>()' , 1000):
</script>


複数表示する
チュートリアル
<body onload="initialize()">

同等
window.onload =initialize;

複数表示
setTimeout( "initialize_1() , 1000):
setTimeout( initialize_2() , 1000):


2. 参照で地図を表示する


参照で地図を表示する
「参照」の仕組み

「参照」ボタンを押すと
1. referGooglemap (JavaScript)
2. popup 形式で
3. googlemap_view_edit_preview 実行


googlemap_view_edit_preview.html

課題
API を記述しても表示しない。
対応
iframe にて、
googlemap_view_main_preview
を呼出す

googlemap_view_main_preview.html

<html><head>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript"> html フル記述
function googlemap_preview_load<{$id}>() {
省略 ...
}
</script>
</body></html>



iframe

←


3. 地図の緯度経度を選択する


地図の緯度経度を選択する

googlemap.jp

GoogleMaps API で動作を記述した
JavaScript 900行


配置場所の課題
ﬁles/default/js/ 配下
DBに格納される
対応 (トリッキー)
ﬁles/default/images/ 配下
htdocs 領域のコピー
URLとして指定できる

googlemap_view_edit_entry.html

課題
API を記述しても表示しない
対応 (参照と同じ)
iframe にて、
googlemap_view_main_preview
を呼出す

googlemap_view_main_location.html
<html><head>
<script src="http://maps.google.com/maps/api/js"
type="text/javascript" charset="utf-8"></script>
<script src="<{$smarty.const.CORE_BASE_URL}>
/images/googlemap/googlemap_location.js"
type="text/javascript"></script>
URL指定
</head>
<body> html フル記述
function googlemap_load_get_location() {
省略 ...
}
</script>
</body></html>

NetCommons
デバック
ノウハウ


デバックノウハウ
通常の画面遷移
URL2
URL1

GET/POST

ボタン → 描画


NetCommonsの画面遷移
URL1 (変わらず)
URL1

GET/POST

Java 部分的
ボタン → →
Script 再描画


遷移後の画面が表示できないだろうか？
URL1 (変わらず)
URL1

GET/POST

Java 部分的
ボタン → →
Script 再描画


index.php?action=login_view_main_init
ログイン画面表示


index.php?action=googlemap_view_main_init

何も表示しない
➡

Smarty error:
unable to read resource:
"block.html"

index.php?action=login_view_main_init

特別扱い
webapp/components/common/Main.class.php

if ($action_name == "login_view_main_init"
&& $block_id == 0)


index.php?action=googlelmap_view_main_init
&_header=0

地図が選択されてません
➡

地図が選択すれば


index.php?action=googlemap_view_main_init
&_header=0&block_id=56

http://ohwada.yn150.jp/index.php?action=googlemap_view_main_init&_header=0&block_id=56


GoogleMap
API


API V2 -> V3
1. より部品化が進んだ
バルーン (吹き出し)
V2: マーカーの１つの機能
V3: 独立した機能イベントで結びつける
2. 無くなった機能
マーカーをまとめて消す


API 住所検索
初期のころは、
期待した結果が得られなかった。
今は、ほぼ期待とおり。
こういうサービスは、
公共機関がやって欲しいな。
東京大学ジオコーディング実験
http://newspat.csis.u-tokyo.ac.jp/geocode/modules/geocode/index.php?content_id=1


API 利用許諾

1. 回数制限が厳しくなった
以前は、実質制限なし
最近は、人気サイトでは制限に該当


GoogleMap 離れ
Foursquare / Apple / Wikipedia
OpenStreetMap への移行

2012年3月
米foursquare
Google Mapsから地図版Wikipedia に移行

http://internet.watch.impress.co.jp/docs/news/20120302_516130.html


OpenStreetMap
自由な地図を作る
プロジェクト


OpenStreetMap
6月24日横浜勉強会
http://connpass.com/event/499/?disp_content=presentation

4月15日
「OpenStreetMap」
を作る人の会合で
地図編集の心得を学んできた

http://internet.watch.impress.co.jp/docs/column/chizu/20120419_527533.html


質疑応答


20120516 NetCommons GoogleMap

Recommended

Recommended

More Related Content

Similar to 20120516 NetCommons GoogleMap

Similar to 20120516 NetCommons GoogleMap (20)

More from Kenichi Ohwada

More from Kenichi Ohwada (20)

Recently uploaded

Recently uploaded (9)

20120516 NetCommons GoogleMap