GoogleMap	           モジュール                の紹介2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
自己紹介 @ohwada 大和田 健一 横浜市戸塚区 在住 ITコンサルタント  NetCommons  XOOPS / WordPress / Android2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
XOOPS                         2011年4月                          2.2 リリース                        2012年4月                    ...
WordPress       2012年4月 3.3.2 リリース  ワードプレス勉強会 @ 横浜・関内2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
Android           2012年4月 SDK r19 リリース         日本Androidの会 横浜支部2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
Android によるロボット制御2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
NetCommons2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
YN150プロジェクト                  構築運営支援        無償 レンタルサーバー            ネットコモンズ            インストール済          (協力:東京都市大学 )        ...
開発したモジュール 1.Google Map  2.Twitter / Facebook 3.ヘッダ・チェンジャー  4.Facebook風掲示板              http://ohwada.yn150.jp/2012年5月16日 N...
Google Map2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
Twitter / Facebook    1.標準のログインの代わりに      Twitter (Facebook) で      ログイン出来ます    2.ログインユーザの      Twitter (Facebook) の      ...
ヘッダ・チェンジャー                 標準                 ヘッダカラム、左カラム、右カラム                  (青色)                 全てのページで共通            ...
Facebook風掲示板  汎用データベース・モジュールをカスタマイズ2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
NetCommons     モジュール開発2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
必要な知識1.HTML + CSS2.PHP / Smarty3.MySQL4.JavaScript / prototype.js2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
3つのポイント      Maple ベース       1. DIコンテナ       2. フィルタチェイン       3. GUI / WYSIWYG        http://ohwada.yn150.jp/explain/di-c...
DIコンテナ             Dependency Injection                 依存性の注入Java Springhttp://www.atmarkit.co.jp/fjava/rensai3/springdi0...
フィルタチェインPHP Ethnahttp://ethna.jp/ethna-document-dev_guide-app-filterchain.html2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
GUI / WYSIWYG   What You See Is What You Get        見たままが得られる     => JavaScript で実現2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
NetCommons      GoogleMap      モジュール2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
お知らせ新バージョン リリース1. GoogleMaps API V3 対応 API Key 不要2. 住所検索 追加           http://ohwada.yn150.jp/googlemap/2012年5月16日 NetCommo...
マニュアル                   http://bit.ly/ITuwAz2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
モジュール開発                    ベースは                   ブログパーツ モジュール                   公式サイト 拡張モジュール                   機能がシンプル  ...
API : JavaScript   https://developers.google.com/maps/documentation/javascript/   <script type="text/javascript"     src="...
実装上の工夫理由 NetCommons の GUI と衝突実装の例 1. 地図を表示する 2. 参照で地図を表示する 3. 地図の緯度経度を選択する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
1. 地図を表示する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
地図を表示する            googlemap_view_main_init.html function googlemap_load<{$id}>() {            API そのまま    var latlng = ne...
地図を表示する        googlemap_view_main_init.html    <{if $action.load_script}>         <script src="http://maps.google.com/map...
地図を表示する                複数表示する       チュートリアル        <body onload="initialize()">               同等        window.onload =ini...
2. 参照で地図を表示する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
参照で地図を表示する          「参照」の仕組み「参照」ボタンを押すと1. referGooglemap (JavaScript)2. popup 形式で3. googlemap_view_edit_preview 実行2012年5月1...
参照で地図を表示する      googlemap_view_edit_preview.html 課題  API を記述しても表示しない。 対応  iframe にて、  googlemap_view_main_preview  を呼出す201...
参照で地図を表示する       googlemap_view_main_preview.html <html><head> <script src="http://maps.google.com/maps/api/js?sensor=fals...
参照で地図を表示する                  iframe                           ←2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
3. 地図の緯度経度を選択する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
地図の緯度経度を選択するgooglemap.jp     GoogleMaps API で動作を記述した     JavaScript 900行2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
地図の緯度経度を選択する    配置場所の課題     files/default/js/ 配下      DBに格納される   対応 (トリッキー)    files/default/images/ 配下      htdocs 領域のコピー  ...
地図の緯度経度を選択する       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...
NetCommons       デバック       ノウハウ2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
デバックノウハウ              通常の画面遷移                                      URL2   URL1                 GET/POST  ボタン              ...
デバックノウハウ       NetCommonsの画面遷移                                 URL1 (変わらず)   URL1                 GET/POST                ...
デバックノウハウ遷移後の画面が表示できないだろうか?                                 URL1 (変わらず)   URL1                 GET/POST                   J...
デバックノウハウ     index.php?action=login_view_main_init             ログイン画面表示2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
デバックノウハウ  index.php?action=googlemap_view_main_init              何も表示しない                       ➡           Smarty error:  ...
デバックノウハウ     index.php?action=login_view_main_init                  特別扱い  webapp/components/common/Main.class.php   if ($a...
デバックノウハウ 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=g...
GoogleMap           API2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
API V2 -> V31. より部品化が進んだ バルーン (吹き出し) V2: マーカーの1つの機能 V3: 独立した機能 イベントで結びつける2. 無くなった機能 マーカーをまとめて消す 2012年5月16日 NetCommonsアドオンモ...
API 住所検索初期のころは、期待した結果が得られなかった。今は、ほぼ期待とおり。こういうサービスは、公共機関がやって欲しいな。 東京大学 ジオコーディング実験 http://newspat.csis.u-tokyo.ac.jp/geocode...
API 利用許諾1. 回数制限が厳しくなった 以前は、実質 制限なし 最近は、人気サイトでは制限に該当2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
GoogleMap 離れ   Foursquare / Apple / Wikipedia         OpenStreetMap への移行             2012年3月             米foursquare      ...
OpenStreetMap            自由な地図を作る             プロジェクト2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
OpenStreetMap               6月24日 横浜 勉強会        http://connpass.com/event/499/?disp_content=presentation                  ...
質疑応答2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
Upcoming SlideShare
Loading in …5
×

20120516 NetCommons GoogleMap

9,536 views

Published on

GoogleMap モジュールの紹介
2012年5月16日 NetCommons アドオン・モジュール・セミナー @ 九段下 イタリア文化会館

Published in: Technology
  • Be the first to comment

20120516 NetCommons GoogleMap

  1. 1. GoogleMap   モジュール の紹介2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  2. 2. 自己紹介 @ohwada 大和田 健一 横浜市戸塚区 在住 ITコンサルタント  NetCommons  XOOPS / WordPress / Android2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  3. 3. XOOPS 2011年4月  2.2 リリース 2012年4月  リンク集モジュール  ロシア語版2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  4. 4. WordPress 2012年4月 3.3.2 リリース ワードプレス勉強会 @ 横浜・関内2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  5. 5. Android 2012年4月 SDK r19 リリース 日本Androidの会 横浜支部2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  6. 6. Android によるロボット制御2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  7. 7. NetCommons2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  8. 8. YN150プロジェクト 構築運営支援 無償 レンタルサーバー ネットコモンズ インストール済 (協力:東京都市大学 ) http://yn150.jp/2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  9. 9. 開発したモジュール 1.Google Map  2.Twitter / Facebook 3.ヘッダ・チェンジャー  4.Facebook風掲示板 http://ohwada.yn150.jp/2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  10. 10. Google Map2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  11. 11. Twitter / Facebook 1.標準のログインの代わりに   Twitter (Facebook) で   ログイン出来ます 2.ログインユーザの   Twitter (Facebook) の   タイムラインを表示する http://ohwada.yn150.jp/2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  12. 12. ヘッダ・チェンジャー 標準 ヘッダカラム、左カラム、右カラム  (青色) 全てのページで共通 ヘッダカラム(桃色) 左カラム(緑色) 右カラム(黄色) ページ毎に異なるものに2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  13. 13. Facebook風掲示板 汎用データベース・モジュールをカスタマイズ2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  14. 14. NetCommons モジュール開発2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  15. 15. 必要な知識1.HTML + CSS2.PHP / Smarty3.MySQL4.JavaScript / prototype.js2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  16. 16. 3つのポイント Maple ベース  1. DIコンテナ  2. フィルタチェイン  3. GUI / WYSIWYG http://ohwada.yn150.jp/explain/di-container/2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  17. 17. DIコンテナ Dependency Injection 依存性の注入Java Springhttp://www.atmarkit.co.jp/fjava/rensai3/springdi01/springdi01_1.html2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  18. 18. フィルタチェインPHP Ethnahttp://ethna.jp/ethna-document-dev_guide-app-filterchain.html2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  19. 19. GUI / WYSIWYG What You See Is What You Get 見たままが得られる => JavaScript で実現2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  20. 20. NetCommons GoogleMap モジュール2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  21. 21. お知らせ新バージョン リリース1. GoogleMaps API V3 対応 API Key 不要2. 住所検索 追加 http://ohwada.yn150.jp/googlemap/2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  22. 22. マニュアル http://bit.ly/ITuwAz2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  23. 23. モジュール開発 ベースは ブログパーツ モジュール 公式サイト 拡張モジュール 機能がシンプル 初心者にお勧め http://www.netcommons.org/mudl5vlri-167/#_1672012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  24. 24. 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()">2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  25. 25. 実装上の工夫理由 NetCommons の GUI と衝突実装の例 1. 地図を表示する 2. 参照で地図を表示する 3. 地図の緯度経度を選択する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  26. 26. 1. 地図を表示する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  27. 27. 地図を表示する googlemap_view_main_init.html function googlemap_load<{$id}>() { API そのまま var latlng = newgoogle.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 }; … 中略} 2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  28. 28. 地図を表示する 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}> <script type="text/javascript"> function googlemap_load<{$id}>() { … 中略 複数表示する } setTimeout( googlemap_load<{$id}>() , 1000): </script>2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  29. 29. 地図を表示する 複数表示する チュートリアル  <body onload="initialize()">   同等  window.onload =initialize;   複数表示  setTimeout( "initialize_1() , 1000):  setTimeout( initialize_2() , 1000):2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  30. 30. 2. 参照で地図を表示する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  31. 31. 参照で地図を表示する 「参照」の仕組み「参照」ボタンを押すと1. referGooglemap (JavaScript)2. popup 形式で3. googlemap_view_edit_preview 実行2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  32. 32. 参照で地図を表示する googlemap_view_edit_preview.html 課題  API を記述しても表示しない。 対応  iframe にて、  googlemap_view_main_preview  を呼出す2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  33. 33. 参照で地図を表示する 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>2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  34. 34. 参照で地図を表示する iframe ←2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  35. 35. 3. 地図の緯度経度を選択する2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  36. 36. 地図の緯度経度を選択するgooglemap.jp GoogleMaps API で動作を記述した JavaScript 900行2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  37. 37. 地図の緯度経度を選択する 配置場所の課題  files/default/js/ 配下   DBに格納される 対応 (トリッキー)  files/default/images/ 配下    htdocs 領域のコピー   URLとして指定できる2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  38. 38. 地図の緯度経度を選択する googlemap_view_edit_entry.html 課題  API を記述しても表示しない 対応 (参照と同じ)  iframe にて、  googlemap_view_main_preview  を呼出す2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  39. 39. 地図の緯度経度を選択する 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 フル記述 <script type="text/javascript"> function googlemap_load_get_location() {  省略 ... } </script> </body></html>2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  40. 40. NetCommons デバック ノウハウ2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  41. 41. デバックノウハウ 通常の画面遷移 URL2 URL1 GET/POST ボタン → 描画2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  42. 42. デバックノウハウ NetCommonsの画面遷移 URL1 (変わらず) URL1 GET/POST Java 部分的 ボタン → → Script 再描画2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  43. 43. デバックノウハウ遷移後の画面が表示できないだろうか? URL1 (変わらず) URL1 GET/POST Java 部分的 ボタン → → Script 再描画2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  44. 44. デバックノウハウ index.php?action=login_view_main_init ログイン画面表示2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  45. 45. デバックノウハウ index.php?action=googlemap_view_main_init 何も表示しない ➡ Smarty error: unable to read resource: "block.html"2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  46. 46. デバックノウハウ index.php?action=login_view_main_init 特別扱い webapp/components/common/Main.class.php if ($action_name == "login_view_main_init" && $block_id == 0)2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  47. 47. デバックノウハウ index.php?action=googlelmap_view_main_init &_header=0 地図が選択されてません ➡ 地図が選択すれば2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  48. 48. デバックノウハウ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=562012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  49. 49. GoogleMap API2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  50. 50. API V2 -> V31. より部品化が進んだ バルーン (吹き出し) V2: マーカーの1つの機能 V3: 独立した機能 イベントで結びつける2. 無くなった機能 マーカーをまとめて消す 2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  51. 51. API 住所検索初期のころは、期待した結果が得られなかった。今は、ほぼ期待とおり。こういうサービスは、公共機関がやって欲しいな。 東京大学 ジオコーディング実験 http://newspat.csis.u-tokyo.ac.jp/geocode/modules/geocode/index.php?content_id=12012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  52. 52. API 利用許諾1. 回数制限が厳しくなった 以前は、実質 制限なし 最近は、人気サイトでは制限に該当2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  53. 53. GoogleMap 離れ Foursquare / Apple / Wikipedia OpenStreetMap への移行 2012年3月 米foursquare Google Mapsから 地図版Wikipedia に移行http://internet.watch.impress.co.jp/docs/news/20120302_516130.html2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  54. 54. OpenStreetMap 自由な地図を作る プロジェクト2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  55. 55. 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 2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一
  56. 56. 質疑応答2012年5月16日 NetCommonsアドオンモジュールセミナー大和田健一

×