ひつじのＭＡＰ とは

ひつじのＭＡＰはGoogleMapsAPIを利用して、データベース（MySQL）と連携した地図の表示・編集をするアプリケーションです。

「データベースと連携」といっても、特に詳しい知識は不要です。簡単な操作で、地図上にスポット情報を登録・編集することが出来ます。

動作環境

MySQL ： バージョン 5.0 以上

PHP ： バージョン 5.0 以上

ブラウザ ： Google Maps JavaScript API V3をサポートしている以下ブラウザ（Google Maps APIサポートページより）

　　IE 7.0 以降（Windows）
　　Firefox 3.0 以降（Windows、Mac OS X、Linux）
　　Safari 4 以降（Mac OS X、iOS）
　　Chrome（Windows、Mac OS X、Linux）
　　Android
　　BlackBerry 6
　　Dolfin 2.0 以降（Samsung Bada）

　　※動作確認はしておりませんので、上記のうち一部ブラウザでは正常動作しない可能性もあります。御了承下さい。

主な機能

・登録したスポットがGoogleMap上にマーカー表示されます。スポット検索機能もあります（スポット種別・名称・住所・郵便番号・TEL・URL）。

・以下の項目を登録することが出来ます。マーカーをダブルクリックすると開く情報ウィンドウには、これらの項目が表示されます。

　　・スポット種別（自由に設定出来ます）

　　・名称

　　・住所／郵便番号

　　・ＴＥＬ

　　・URL

　　・コメント

　　・画像

　　・備考（管理用　地図には表示されません）

・地図のズームレベルが低い時（広域表示時）には、マーカーがグループ化されます（グループ化されたスポット件数も分かります）。

・ルート探索やストリートビュー等の機能も搭載しています。

・同一地点への複数スポットを登録にも対応していますので、マーカーが重なって操作が煩雑となることを避けられます。

 

インストール方法

（１）当ページ下部より「ひつじのＭＡＰ（SheepMap1.00.zip）」をダウンロード・解凍して下さい。解凍するとフォルダ「SheepMap」が作成されます。

（２）フォルダSheepMap内のファイル「mysqlconfig.php」を、ご利用のMySQL環境に合わせて編集して下さい。

・sheep_map.php設定（例）

 

（３）当アプリケーションではJSON型式のデータを扱っていますが、PHPのバージョンが5.2未満の場合JSONは標準で組み込まれていませんので、こちらよりコードをコピーして、フォルダSheepMap内に「JSON.php」の名称で保存して下さい。
　　PHPのバージョンが5.2以上の場合はJSONは標準で組み込まれていますので追加インストール等は不要です。

（４）サーバにフォルダ「SheepMap」を丸ごとアップロードして下さい。

（５）ブラウザで http://SheepMapをアップロードしたURL/SheepMap/setup.phpを開き、管理者情報（ユーザ名・パスワード）を入力し「送信」ボタンをクリックして下さい。

・管理者情報入力画面

 

※以下のような画面が表示される場合は、sheepmap_config.phpの内容に間違いがないかご確認下さい。

 

（６）管理者情報が正常に登録されると、メニューが表示されます（インストール成功です）。

 

スポット情報の登録・編集

 ログイン

地図に表示するスポットの情報を登録・編集するには、登録されたアカウントでログインする必要があります。

ブラウザでhttp://SheepMapをアップロードしたURL/SheepMap/login.phpを開き、ユーザ名・パスワードを入力し「送信」ボタンをクリックして下さい。
※初期状態では、インストール時に入力した管理者情報（ユーザ名・パスワード）のみが登録されています。

ログイン画面

 

 メニュー画面

ログインすると、下のようなメニュー画面が開きます。

メニュー画面

 

・スポットの登録・編集
　マップ上に表示させるスポット（店舗、事業所、施設など）の新規登録、登録された情報の編集を行います 。

・スポット種別の登録・更新（管理者のみの機能）
　当機能を利用することにより、登録されたスポットを種別毎に抽出し、マップ表示することが出来るようになります。

・ユーザ管理（管理者のみの機能）
　当メニューの機能を利用出来るユーザの登録・編集を行います。

 

 スポットの登録・編集

モード（スポットの新規登録／登録済みスポット情報の参照・編集）はマップ左下の欄で切り替えます（下図の赤枠箇所）。

スポットの登録・編集（モードの切り替え）

 

・新規登録手順

（１）スポットの位置設定

新規登録したいスポットがマップ表示範囲に入るようズーム・スクロールし、対象地点をクリックして下さい。クリック箇所に赤いマーカーが配置されます（図1-a）。
マーカーの位置はマップをクリックする毎に移動しますので（ドラッグでも移動出来ます）、微調整可能です。配置したマーカーを右クリックし、「住所をセット」をクリックすると
郵便番号欄及び住所欄に該当箇所の情報※が入力されます。
※住所情報はGoogleMapsの逆ジオコーディング機能を利用して取得します。必ずしも正しい情報が得られるとは限りません。

新規スポット位置設定 住所をセット

図1-a　スポットの位置設定

 図1-b　配置マーカーの住所を取得

登録済みのスポットと同じ場所にマーカーを設置したい場合は、該当マーカー（緑色）を右クリックし、「このマーカーと同じ場所にセット」をクリックして下さい（図1-c）。
該当箇所に赤いマーカーがセットされ、登録済みのスポットの情報が郵便番号欄及び住所欄にコピーされます。

登録済みスポットと同じ場所にセット
図1-c　登録済みマーカーと同じ場所にセット

登録済みスポットの近く設置する際に、そのマーカー（緑色）が邪魔になる場合は、「登録済スポットを非表示にする」のチェックをオンにすると、既存マーカーが表示されなくなります（図1-d）。

登録済みスポットと同じ場所にセット
図1-d　登録済みスポットのマーカー表示切り替え

 

（２）スポット情報の入力

入力欄（下図）に新規登録したいスポットの情報（名称、住所、コメント等）を入力して下さい。
種別はスポット種別の登録・更新にて登録した種別のリストから選択して下さい。種別の登録をしていない場合は選択不要です。

スポットの登録・編集（入力欄のボタン）

入力欄の各ボタンについて

maru1 → 入力した郵便番号に該当する住所情報を住所欄に自動入力します。
maru2 マーカーセット GoogleMapsのジオコーディング機能を利用して住所欄入力情報から緯度・経度を取得し、ＭＡＰ上の該当箇所にマーカー設置します。
maru3 画像アップロード 画像を登録したい場合は、このボタンをクリックして下さい。「ファイルのアップロード」のダイアログが表示されますので、登録対象の画像を選択して下さい
※登録可能なファイル形式はJPG、GIF及びPNGです。
※初期設定では登録可能な画像のサイズは2MB以内、登録画像数は1スポットにつき3枚までです（環境設定ファイルの編集で変更可能です）。
選択した画像はボタンの下に表示されます（図2-a）。登録を取り消したい場合は「削除」をクリックして下さい。
登録画像
図2-a　アップロードした画像
maru4 リセット このボタンをクリックすると、入力内容が全てクリアされます。
maru5 検索 登録済みスポットのうち特定箇所のマーカーのみ表示させたい場合に使用します。
当ボタンをクリックすると、検索ウィンドウが開きますので、検索条件を入力し「検索」をクリックして下さい（図2-b）。
入力条件に一致するスポットのみがマーカー表示されます。
検索画面
図2-b　スポット検索ウィンドウ
maru6 登録 入力内容を登録します（このボタンをクリックしない限り、画像を含め入力情報は保存されません）。
maru7 メニューへ戻る 当画面を閉じて、メニューへ戻ります。

 

・登録済みスポット情報の参照・編集

「編集」モードにて、マップ上のマーカーをクリックすると、そのスポット情報が表示されます。
登録内容を変更する場合は、編集後「更新」ボタンをクリックして下さい（※画像のアップロードを含め「更新」ボタンをクリックしない限り情報はアップデートされません）。

登録済みスポット情報の参照・編集

参照・編集したいスポットのマーカーが見つけ辛い場合には、「検索」ボタンにて、対象のスポットを抽出し、表示させることも出来ます（図3-a）。

スポットの検索
図3-a　スポットの検索

【マーカーの統合】

スポットのマーカーを他スポットのマーカーと統合し、複数スポットを１つのマーカーにまとめることが出来ます。

（１）統合したいマーカーを右クリックし「他のマーカーに統合する」を選択して下さい（図3-b）。するとマーカーがオレンジ色となります（図3-c）。
※統合を中止したい場合は、再度右クリックし「他のマーカーへの統合を中止」を選択して下さい。

マーカーの統合(1) マーカーの統合(2)

図3-b　統合したいマーカーを右クリック

 図3-c　マーカーがオレンジ色となる

 

（２）統合先のマーカーを選択（緑色→赤色）してから、右クリックし「このマーカーへ統合」を選択して下さい（図3-d）。
これにより統合され、マーカーの右上に統合されたスポット数を示す数値が付加されます（図3-e）。

※「更新」ボタンをクリックしなければ、マーカー統合処理は完了しません。

マーカーの統合(3) マーカーの統合(4)

図3-d　統合先のマーカーを選択し右クリック

 図3-e　統合後のマーカーは右上に数値が付加される

 

【マーカーの分割】

複数スポットが統合されたマーカーから、指定のスポットを分離することも出来ます。

（１）複数スポットの統合マーカーの色は黄色で、右上に統合スポット数を示す数値が付加されています（図3-f）。

マーカーの分離(1)

図3-f　複数スポットが統合されたマーカー（黄色）

このマーカーはクリックする度に入力欄に表示されるスポット情報が切り替わりますので（図3-g）、分離させたいスポット情報が表示させてから、右クリックし「このスポットのマーカーを分離する」を選択して下さい（図3-h）。

マーカーの分離(2)

図3-g　分離対象スポットの切り替え
マーカーの分離(3)

図3-h　右クリック→このスポットのマーカーを分離する

 

 スポット種別の登録・更新

スポット種別を登録すると、項目別のスポット検索・表示が可能となります。

スポット種別の登録・更新

 

・新規登録

【新規登録】欄に、スポット種別名を入力し「登録」ボタンをクリックして下さい。

・登録済みスポット種別の編集・削除

更新 スポット種別名を編集したテキストに更新します。
↑↓ 登録されたスポット種別の表示順を入れ替えます。
削除 スポット種別を削除します。

 

 ユーザ管理

インストール時に登録した管理者以外のユーザを登録することが出来ます。

ユーザ管理メニュー

 

・新規登録

新規ユーザ登録をクリックすると、ユーザ新規登録フォームが表示されますので、ユーザ名、パスワード、ユーザ種別を入力し「登録」をクリックして下さい。

　・ユーザ種別

　一般 スポットの登録・編集のみ利用可能
　管理者 全メニュー（スポットの登録・編集、スポット種別の登録・更新、ユーザ管理）利用可能

新規ユーザ登録

 

・スーザ情報の変更

ユーザ管理メニュー

 

　・パスワードの変更

ユーザ管理メニューの登録済みユーザ一覧より、変更したいユーザの「パスワード」ボタンをクリックすると、 パスワード変更フォームが表示されますので、新しいパスワードを入力し「更新」をクリックして下さい。

パスワードの変更

 

　・ユーザ種別の変更

ユーザ種別（一般／管理者）の変更をしたい場合は、ユーザ管理メニューの登録済みユーザ一覧より「ユーザ種別」ボタンをクリックし、次の画面でユーザ種別を切り替えて「更新」をクリックして下さい。
※インストール時に登録したユーザ（管理者）は変更出来ません。

ユーザ種別の変更

 

　・ユーザの削除

ユーザ管理メニューの登録済みユーザ一覧より「削除」ボタンをクリックし、次の画面で「削除」をクリックして下さい。
※インストール時に登録したユーザ（管理者）は削除出来ません。

ユーザの削除

 

地図の表示

地図表示は以下のURLとなります。

http://SheepMapをアップロードしたURL/SheepMap/map.html

表示マップ

 

maru1 表示種別 「指定しない」以外を選択すると、指定した種別のスポットのみが表示されます。
maru2 検索 登録されたスポットを名称・住所・ＴＥＬで検索します。
maru3 ルート探索 このボタンを押すとルート探索フォームが表示されます（下図）。
検索画面
maru4 スポットリスト 現在のマップ表示範囲内にあるスポットリストが表示されます。マップの移動やズーム変更を行う度に更新されます。
maru5 スポットマーカー

クリックするとスポット情報が表示されます。
maru6 グループマーカー 近くに複数のスポットが存在している場合、グループ表示されます。マーカーの数値はスポット数を表します。クリックするとズームアップされます。

 

環境設定

「SheepMap/js」フォルダ内のファイル「mapconfig.php」を編集することにより、以下の設定を変更出来ます。

・マップタイトル（初期設定では「Google Maps API 活用アプリケーション　〜ひつじのＭＡＰ〜」となっています）

・起動時のマップ中心座標及びズームレベル

・マーカー画像

・スポット１件当たりに登録可能な画像数の上限、画像サイズの上限

※詳細はmapconfig.phpをご覧下さい。

 

＜サーバのメモリについて＞

ご使用のサーバによっては登録件数が多くなるとメモリ不足のため正しく動作しなくなる可能性があります。

「データ取得に失敗しました。」のエラーが出る場合、原因の１つとしてこのメモリ不足が挙げられます。
サーバのエラーログなどを確認いただき、エラー原因がメモリ不足と判断される場合はPHPのメモリ割当量を大きくしてみてください。

※PHPのメモリ割当量の変更方法は、ご使用の環境により異なります。以下はメモリ割当量を128Mに設定する例です。

（1）php.iniの変更（レンタルサーバでは変更できない場合が多いと思われます）

　php.iniに以下の記述を追加（既に記載されている場合は、メモリ数値を変更）
　　memory_limit = 128M　

（2）.htaccessの変更（.htaccessが存在しない場合は新規作成）

　以下の記述を追加
　　php_value memory_limit 128M

（3）.user.iniの変更（PHP5.3以降。存在しない場合は新規作成）

　以下の記述を追加
　　memory_limit = 128M


MySQLテーブル

当アプリケーションにて作成・使用されるMySQLテーブルは以下の３つです。

SheepMap_t_spot スポット情報を収納
SheepMap_tbl_spottype スポット種別を収納
SheepMap_tbl_user ユーザ情報を収納

管理者のユーザ名またはパスワードを忘れてしまった場合

当アプリケーションではユーザ情報はMySQLのテーブル「SheepMap_tbl_user※」）に登録されます。ユーザ名を忘れてしまった場合は、phpMyAdmin等のツールで直接このテーブルのレコードを見て確認して下さい。
しかし、パスワードにつきましては、セキュリティの関係上暗号化されたものを収録していますので、レコードを見ても確認出来ません。パスワードを忘れてしまった場合は、当アプリケーションパッケージ
に含まれている管理者情報削除スクリプト（ファイル名：deleteadminuser_base.php）を使用して、管理者情報を削除する必要があります。
使用方法等詳細は「deleteadminuser_base.php」をご覧下さい。

 

作者ホームページ

ひつじかいの雑記帳

 

サンプル

当アプリケーションの活用例（全国美術館・博物館ＭＡＰ）を以下URLでご覧いただけます。

http://www.eclip.jp/sheepmapsample/map.html

 

ひつじのＭＡＰ活用例（全国美術館・博物館ＭＡＰ）
ひつじのＭＡＰ 活用例

 

著作権、免責、再配布等

・本ソフトウェアには以下のオープンソースを同梱しています。これらのオープンソースの使用条件は、それぞれの適用ライセンスに従います。

　・ｊQuery（jquery.js）　 ＭＩＴ、GPLライセンス　※著作権など詳細はjQueryのサイトにてご確認下さい（当ファイルの冒頭にも記載されています）。
　・TableDnD（jquery.tablednd.js）　Denis Howlett作。テーブルの行をドラッグ＆ドロップで移動可能にするjQueryプラグイン。 ライセンスはjQueryに準拠。

　・Alte Haas Grotesk（font/alte_haas_grotesk内のファイル全て）　Yann Le Coroller作のフォント。 ライセンスフリー（ドキュメントAlte Haas Grotesk licence.rtfにてご確認下さい）。

・上記の同梱物を除いたプログラムの著作権は作者である田村嘉朗が保有しています。フリーウェアですので無料でご利用いただけます。改変も自由にしていただいて結構です。
　ただし、本ソフトウェアはGoogleMapsAPIを利用しておりますので、使用にあたってはGoogleMapsAPIの利用規約に適合する必要があります。詳しくはGoogleMapsAPIのページにてご確認下さい。

　参考ページ ： Google Maps API のライセンス

・本ソフトウェアの使用または使用不能により生じたいかなる障害・損害について、作者は一切の責任を負いません。各自の責任においてご使用ください。

・不具合について、作者の可能な限りにおいて改善の努力をいたしますが、その訂正及び再配布の義務は負いません。

・非営利目的での転載・再配布は自由です。報告なども特に必要ありません。ただし、転載・再配布の際、許可なく内容を改変することは禁止します。

 

 

 
　Copryright © 2011 Yoshiro Tamura All Rights Reserved.