Readme.md and install.md add

yoichigmf · Mar 27, 2023 · dded0b5 · dded0b5
1 parent 9bfe7fa
commit dded0b5
Show file tree

Hide file tree

Showing 43 changed files with 490 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,159 @@
-# lhazardmap
-simple hazard map
+
+
+# 軽量ハザードマップアプリ説明
+
+
+
+１．コンセプト
+=======
+
+   サーバー費用無料でハザードマップのWEB配信を行う
+
+   プログラムのソースコードはオープンソースとする
+
+   権限を持ったユーザが地図に情報を書き込み、WEB地図で共有を行えるようにする
+
+２．実現するための技術
+===========
+
+ Google Spread Sheetのアカウントを作り、そこにWEB地図関連パラメータの定義、ポイントデータを格納する。
+
+それらのデータにアクセスするためのWEB APIと地図表示用WEBページをGoogle App Scriptとして記述を行いGoogle App Script編集画面からデプロイを行う。
+
+データ編集可能なモードのWEB地図ソフトウェアと閲覧専用地図ソフトウェアを別に用意。編集可能ソフトウェアはGoogle Spread Sheetのメニューから起動。当該Google Spread Sheetの編集権限があり、ユーザーリストにメールアドレスが登録されてあるユーザでSpread Sheetにログインしている場合のみ利用可能（Google Spread Sheetのユーザ権限でユーザ管理）。閲覧専用ソフトウェアは外部WEBサイトのHTMLからWEB API利用で地図データを取得して表示を行う（今回のプロトタイプはGithubを利用）。
+
+地図データとしては背景図に地理院ベクタタイル、地理院ラスタタイルを利用。ハザードマップデータとしては国土地理院ハザードマップポータルを利用している。またユーザが登録可能なポイントデータをGoogle Spread Sheet内に格納して利用している。
+
+Google Spread Sheet,Githubの基本機能は無料で利用できる。サーバー費用無料で運用することも可能であるため本ハザードマップは運用のための費用を低くすることが可能である。
+
+* * *
+
+３．機能説明
+======
+
+3.1  ハザードマップ閲覧モード
+-----------------
+
+### ３．１．１ 起動
+
+指定URLをWEBブラウザで開く（サンプルだと[https://akbousai.github.io/lhazardmap/](https://www.google.com/url?q=https://akbousai.github.io/lhazardmap/&sa=D&source=editors&ust=1679912953215595&usg=AOvVaw1ZcZtjX-biRQ8I1kYd8D0u) ）
+
+![](images/image6.png)
+
+### ３．１．２ ハザードマップ表示指定
+
+![](images/image16.png)
+
+右側パネルに表示されるハザードマップのリストをマウス左ボタンでクリックするとそのハザードマップの地図表示が切り替わる（非表示ー＞表示 または 表示ー＞非表示）
+
+### ３．１．３ 凡例表示
+
+![](images/image7.png)
+
+左側パネルを開くとその時点で表示指定されているハザードマップの凡例が表示される。
+
+### ３．１．4 登録情報表示
+
+![](images/image29.png)
+
+地図上に表示されているアイコンをマウス左ボタンでクリックすると当該位置に登録された情報の種別と登録したテキストがポップアップで表示される。
+
+### ３．１．5 背景図切り替え
+
+右側パネルの上部3番目のドロップボックスで背景図の切り替えを行うことができる
+
+![](images/image2.png)
+
+![](images/image22.png)
+
+* * *
+
+### ３．１．6 地図拡大・縮小・スクロール
+
+地図右下の ＋- コントロールボックスのクリックで地図の拡大・縮小を行うことができる。マウスセンターホイールの操作でも拡大・縮小を行うことができる。
+
+地図上でマウス左ボタンを押してそのままドラッグすると地図のスクロールをすることができる。
+
+![](images/image40.png)
+
+マウス右ボタンを地図上で押してドラッグすると地図を表示する角度を変えることができる。地図右下のコンパスの針のボタンをクリックすると表示が通常の角度に戻る。
+
+![](images/image3.png)
+
+### ３．１．7  地名選択による地図表示位置の移動
+
+右パネル上部の旧町名選択リストで旧町名を選択するとその下の地名リストが指定地域に属する地名のリストに切り替わる
+
+![](images/image9.png)
+
+そのリストで地名を選択すると地図が指定した地点近辺を中心とした表示になる
+
+![](images/image18.png)
+
+選択地点近辺の地図
+
+![](images/image24.png)
+
+* * *
+
+3.２  地域情報入力モード
+--------------
+
+### ３．２．１ 起動
+
+当該Google Spread Sheetのメニューに「地図機能」というものがあるのでそこから「地図を開く」を選択する。（ブラウザの設定でGoogle Spread Sheetからのポップアップを許可しておく必要がある）
+
+![](images/image19.png)
+-----------------------
+
+起動すると以下のように地図がブラウザ別タブに表示される![](images/image33.png)
+
+３．２．２ 地域情報入力
+
+ハザードマップ閲覧モードのWEB地図では地図上をマウス左ボタンでクリックするとそこに登録情報のアイコンがある場合は登録情報を表示するポップアップが表示される。
+
+地域情報入力モードの地図の場合は地図上をマウス左ボタンでクリックした場合は閲覧モードと同じ処理になるモードと、当該位置に新規にデータ登録を行う2種類の状態を切り替えることができる。
+
+![](images/image20.png)
+
+地図画面左上に「情報入力」というテキストがついたチェックボックスがある。
+
+このチェックボックスがチェックされていない状態の時は閲覧モードと同じで、マウス左ボタンで地図をクリックしたときにその位置にアイコンがあればアイコンに登録されている情報を表示するポップアップが表示される。
+
+![](images/image27.png)
+
+チェックボックスをチェックした後に地図上の情報登録したい位置をマウス左ボタンでクリックする。
+
+* * *
+
+![](images/image26.png)
+
+上図のように情報登録用ポップアップが表示される。
+
+![](images/image15.png)
+
+ドロップダウンリストから登録データの種別を選択
+
+![](images/image8.png)
+
+説明テキストを入力してから「登録」ボタンをクリックする
+
+![](images/image10.png)
+
+指定位置にアイコンが表示される
+
+### ３．２．３ 入力情報編集・削除
+
+入力した地域情報は「シート１」というシートに1行のデータとして登録される。
+
+![](images/image14.png)
+
+シート1内の登録情報のカラムを編集することでデータ内容の編集を行うことができる。
+
+また当該データ行を削除するとデータの削除を行うことができる。
+
+
+* * *
+[システム設定手順](./install.md) 
+
+--------------
diff --git a/images/image1.png b/images/image1.png
diff --git a/images/image10.png b/images/image10.png
diff --git a/images/image11.png b/images/image11.png
diff --git a/images/image12.png b/images/image12.png
diff --git a/images/image13.png b/images/image13.png
diff --git a/images/image14.png b/images/image14.png
diff --git a/images/image15.png b/images/image15.png
diff --git a/images/image16.png b/images/image16.png
diff --git a/images/image17.png b/images/image17.png
diff --git a/images/image18.png b/images/image18.png
diff --git a/images/image19.png b/images/image19.png
diff --git a/images/image2.png b/images/image2.png
diff --git a/images/image20.png b/images/image20.png
diff --git a/images/image21.png b/images/image21.png
diff --git a/images/image22.png b/images/image22.png
diff --git a/images/image23.png b/images/image23.png
diff --git a/images/image24.png b/images/image24.png
diff --git a/images/image25.png b/images/image25.png
diff --git a/images/image26.png b/images/image26.png
diff --git a/images/image27.png b/images/image27.png
diff --git a/images/image28.png b/images/image28.png
diff --git a/images/image29.png b/images/image29.png
diff --git a/images/image3.png b/images/image3.png
diff --git a/images/image30.png b/images/image30.png
diff --git a/images/image31.png b/images/image31.png
diff --git a/images/image32.png b/images/image32.png
diff --git a/images/image33.png b/images/image33.png
diff --git a/images/image34.png b/images/image34.png
diff --git a/images/image35.png b/images/image35.png
diff --git a/images/image36.png b/images/image36.png
diff --git a/images/image37.png b/images/image37.png
diff --git a/images/image38.png b/images/image38.png
diff --git a/images/image39.png b/images/image39.png
diff --git a/images/image4.png b/images/image4.png
diff --git a/images/image40.png b/images/image40.png
diff --git a/images/image41.png b/images/image41.png
diff --git a/images/image5.png b/images/image5.png
diff --git a/images/image6.png b/images/image6.png
diff --git a/images/image7.png b/images/image7.png
diff --git a/images/image8.png b/images/image8.png
diff --git a/images/image9.png b/images/image9.png