20120516 NetCommons GoogleMap

GoogleMap 　モジュールの紹介

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


＠ohwada

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

自己紹介


XOOPS2011年４月　2.2 リリース

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


WordPress2012年４月　3.3.2 リリース

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


Android2012年４月 SDK r19 リリース

日本Androidの会横浜支部


Android によるロボット制御


NetCommons


構築運営支援無償レンタルサーバー

ネットコモンズインストール済

（協力：東京都市大学）

YN150プロジェクト

http://yn150.jp/

http://yn150.jp/

http://yn150.jp/


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

開発したモジュール

http://ohwada.yn150.jp/




Google Map


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

Twitter / Facebook





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

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


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

依存性の注入

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

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

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


フィルタチェイン

http://ethna.jp/ethna-document-dev_guide-app-filterchain.html

PHP Ethna




GＵI / WYSIWYGWhat 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://bit.ly/ITuwAz

http://bit.ly/ITuwAz


モジュール開発

http://www.netcommons.org/mudl5vlri-167/#_167

ブログパーツモジュール公式サイト拡張モジュール機能がシンプル初心者にお勧め

ベースは




API : 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()">

https://developers.google.com/maps/documentation/javascript/

https://developers.google.com/maps/documentation/javascript/?hl=ja

https://developers.google.com/maps/documentation/javascript/?hl=ja


理由　NetCommons の GUI と衝突

実装上の工夫

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


1. 地図を表示する


地図を表示する

function googlemap_load<{$id}>() { var latlng = new google.maps.LatLng( parseFloat(<{$action.parts_data.parts_latitude}>), parseFloat(<{$action.parts_data.parts_longitude}>) ); var zoom = Math.floor( <{$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

API そのまま


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

地図を表示するgooglemap_view_main_init.html

複数表示する


地図を表示する複数表示する

チュートリアル　<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 フル記述

<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">function googlemap_preview_load<{$id}>() {　省略 ...}</script></body></html>

http://maps.google.com/maps/api/js?sensor=false



参照で地図を表示する

←iframe


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


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

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

googlemap.jp



対応 (トリッキー)　files/default/images/ 配下　　　htdocs 領域のコピー　　URLとして指定できる

配置場所の課題　files/default/js/ 配下　　DBに格納される


googlemap_view_edit_entry.html


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


googlemap_view_main_location.html

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></head><body><script type="text/javascript">function googlemap_load_get_location() {　省略 ...}</script></body></html>

URL指定




NetCommons デバックノウハウ


デバックノウハウ

描画→ボタン

通常の画面遷移URL1 URL2

GET/POST



部分的再描画ボタン

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

JavaScript

→ →

GET/POST



部分的再描画ボタン

URL1 URL1 (変わらず)

JavaScript

→ →

GET/POST

遷移後の画面が表示できないだろうか？


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

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

webapp/components/common/Main.class.php

特別扱い



デバックノウハウ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




GoogleMapAPI


1. より部品化が進んだ　バルーン (吹き出し)　V2: マーカーの１つの機能　V3: 独立した機能イベントで結びつける

API V2 -> V3

2. 無くなった機能　マーカーをまとめて消す


初期のころは、期待した結果が得られなかった。今は、ほぼ期待とおり。

API 住所検索

こういうサービスは、公共機関がやって欲しいな。

http://newspat.csis.u-tokyo.ac.jp/geocode/modules/geocode/index.php?content_id=1

東京大学ジオコーディング実験




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

API 利用許諾


GoogleMap 離れFoursquare / Apple / Wikipedia

OpenStreetMap への移行

2012年3月米foursquareGoogle Mapsから“地図版Wikipedia”に移行

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




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


OpenStreetMap6月24日横浜勉強会

http://connpass.com/event/499/?disp_content=presentation

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

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






質疑応答

Technology

20120516 NetCommons GoogleMap