２．画面構成

初めに

 Web Form と MVC との画面を示します。ほぼ同等な画面ですので、スクリーンショットは MVC の画面を使用します。 ほぼ同等というのは、 MVC 版が完成した後で、Microsoft Azure 上に公開し、何人かの知人・友人に使ってもらいました。その際に改善提案のアイデアを２ついただきました。 その分の変更は、 MVC 版にのみ行ってあります。画面が大きく変更されるようなものではありません。

 この章で説明する画面は、以下のものです。

  • 大分類画面
    大分類の参照・追加・更新・削除を１画面で行います
  • 小分類画面
    小分類の参照・追加・更新・削除を２画面構成で行います
  • 単位画面
    単位の参照・追加・更新・削除を１画面で行います
  • エリア画面
    エリアの参照・追加・更新・削除を１画面で行います
  • フィールドワーク画面
    フィールドワークデータを条件を組み合わせて検索し、一覧で参照する画面です
    この画面からさらに、追加・更新・削除の専用画面に遷移できます
    検索結果の一覧を地図に表示する別画面を出すこともできます
  • 地図関連画面
    Google Map Api を利用した４つの画面があります

大分類

 大分類を操作するための画面です。（画像をクリックすると、拡大表示します）

画面１

 個々の項目は次のものです。

  • ID
    大分類を識別するための２文字の英数字を入力します
  • 名称
    大分類の名称を２０文字以内で入力します
  • アイコン
    フィールドワークデータを地図表示する際に使用するマーカーを選択します
  • コメント
    １２８文字以内で自由に使用できるコメントを入力します
  • 大分類の一覧
    現在登録済みの大分類の一覧が表示されています
    一覧中の項目をクリックすると、選択状態になり「読出」ボタンが有効になります

 処理を開始するために、以下のボタンがあります。

  • 追加ボタン
    ボタンの上にある内容で、新規に大分類を追加します
  • 読出ボタン
    一覧の項目をマウスクリックすることで、色を変化させて選択状態にすることができます
    現在選択状態になっている項目の内容を、ボタンの上の各欄に読出します
    読み出した項目は自由に変更することができます（ID 項目は変更することができません）
    その後、「更新」と「削除」ボタンが有効になり、「追加」と「読出」ボタンは無効になります
  • 更新ボタン
    ボタンの上の欄に表示されている内容で、既存の大分類を更新します
  • 削除ボタン
    ボタンの上に読みだした大分類を削除します
  • クリアボタン
    画面の表示を最初の状態に戻します

小分類

 小分類を操作するための画面です。（画像をクリックすると、拡大表示します）

 下記図面２は、大分類が未選択の状態です。その状態から大分類を選択すると、下記図面３となります。

画面２
画面３

 大分類を選択した後の表示項目は次のものです。

  • ID
    小分類を識別するための２文字の英数字を入力します
  • 名称
    小分類の名称を２０文字以内で入力します
  • コメント
    １２８文字以内で自由に使用できるコメントを入力します
  • 小分類の一覧
    選択された大分類に含まれている小分類の一覧が表示されています
    一覧中の項目をクリックすると、選択状態になり「読出」ボタンが有効になります

 処理を開始するために、以下のボタンがあります。

  • 追加ボタン
    ボタンの上にある各欄の内容で、新規に小分類を追加します
  • 読出ボタン
    一覧の項目をマウスクリックすることで、色を変化させて選択状態にすることができます
    選択状態の内容を、ボタンの上の各欄に読出します
    その後、「更新」と「削除」ボタンが有効になり、「追加」と「読出」ボタンは無効になります
  • 更新ボタン
    ボタンの上にある内容で、既存の小分類を更新します
  • 削除ボタン
    ボタンの上に読みだした小分類を削除します
  • クリアボタン
    画面の表示を最初の状態に戻します

単位

 単位を操作するための画面です。（画像をクリックすると、拡大表示します）

画面４

 表示項目は次のものです。

  • ID
    単位を識別するための２文字の英数字を入力します
  • 名称
    単位の名称を４文字以内で入力します
  • コメント
    １２８文字以内で自由に使用できるコメントを入力します
  • 単位の一覧
    登録済みの単位の一覧が表示されています
    一覧中の項目をクリックすると、選択状態になり「読出」ボタンが有効になります

 処理を開始するために、以下のボタンがあります。

  • 追加ボタン
    ボタンの上にある内容で、新規に単位を追加します
  • 読出ボタン
    一覧中の選択状態の内容を、ボタンの上の項目に読出します
    その後、「更新」と「削除」ボタンが有効になり、「追加」と「読出」ボタンは無効になります
  • 更新ボタン
    ボタンの上にある内容で、既存の単位を更新します
  • 削除ボタン
    ボタンの上に読みだした単位を削除します
  • クリアボタン
    画面の表示を最初の状態に戻します

エリア

 エリアを操作するための画面です。（画像をクリックすると、拡大表示します）

画面５

 表示項目は次のものです。

  • ID
    エリアを識別するための２文字の英数字を入力します
  • 名称
    エリアの名称を２０文字以内で入力します
  • コメント
    １２８文字以内で自由に使用できるコメントを入力します
  • エリアの一覧
    登録済みのエリアの一覧が表示されています
    一覧中の項目をクリックすると、選択状態になり「読出」ボタンが有効になります
  • エリア
    「Map」ボタンをクリックすると、地図画面からエリアを入力できる画面が新たに開きます
    エリアを入力する画面の説明は、 こちら をご覧ください
    「Map」ボタンの隣には、エリアの頂点となる緯度経度の値が、変更できない文字列として表示されます

 処理を開始するために、以下のボタンがあります。

  • 追加ボタン
    ボタンの上にある内容で、新規にエリアを追加します
  • 読出ボタン
    一覧中の選択状態の内容を、ボタンの上の項目に読出します
    その後、「更新」と「削除」ボタンが有効になり、「追加」と「読出」ボタンは無効になります
  • 更新ボタン
    ボタンの上にある内容で、既存のエリアを更新します
  • 削除ボタン
    ボタンの上に読みだしたエリアを削除します
  • クリアボタン
    画面の表示を最初の状態に戻します

フィールドワーク

 フィールドワークデータを検索するための画面です。（画像をクリックすると、拡大表示します）

 下記図面６は、検索前の画面です。その後、検索条件を指定して「検索」ボタンをクリックすると、検索後の下記図面７となります。

画面６
画面７

 検索条件には、次の項目を AND として指定できます。何も指定しない場合は、無条件検索となります。

  • 大分類
    大分類を指定できます
  • 小分類
    小分類を指定できます
    大分類を指定した場合のみ有効です
  • 調査日
    フィールドワークの調査日を指定できます
    調査開始日だけ、調査終了日だけの指定も可能です
  • タイトル
    フィールドワークのタイトルの一部分を指定できます
  • エリア
    エリアを指定できます
  • 調査場所
    フィールドワークの調査場所の一部分を指定できます

 フィールドワークデータ検索後、一覧の項目をクリックすると、その行を選択状態にすることができます。
 次の処理を開始するために、以下のボタンがあります。

  • 検索ボタン
    フィールドワークデータの検索を行います
  • 追加ボタン
    フィールドワークデータ追加用の画面に遷移します
  • 参照ボタン
    一覧の中で、現在選択状態にあるデータを参照（変更はできません）するための画面に遷移します
  • 更新ボタン
    一覧の中で、現在選択状態にあるデータを更新するための画面に遷移します
  • 削除ボタン
    一覧の中で、現在選択状態にあるデータを削除するための画面に遷移します
  • クリアボタン
    画面の表示を検索前の状態に戻します
  • Mapボタン
    検索結果を地図上に表示する、専用の画面が新しく表示されます
    画面のサンプルは、 こちら を参照してください

追加画面

画面８

 追加できる項目は、次のものです。

  • 分類
    大分類と小分類を選択します
  • 調査日
    調査日を選択します
    初期値として当日が設定されており、マウスクリックで起動するカレンダーから変更できます
  • タイトル
    １２８文字以内で、タイトルを入力できます
  • 数量
    数量とその単位を指定することができます
  • 調査場所
    １２８文字以内で、調査場所を入力できます
  • キーワード
    １２８文字以内で、キーワードを入力できます
  • その他
    １２８文字以内で、自由に入力できます
  • 内容
    フィールドワークデータの本文を自由に入力できます
  • 緯度経度
    緯度と経度を入力できます
    「Map」ボタンから地図を表示して、マウスクリックにより入力することもできます
    緯度経度を未入力のまま、添付した写真に緯度経度情報がある場合は、その写真データから読み取ります
  • 写真
    「添付ファイル」ボタンから、添付したい写真ファイルを複数選択することができます
    一度に添付できる添付ファイルは、そのサイズ合計が32Mバイトに制限されます
    制限を超えて写真を添付したい場合は、何度かに分けて操作してください

参照画面

画面９

 この画面ではフィールドワークデータを参照することができますが、変更はできません。但し、次の特別な操作ができます。

  • 写真拡大
    表示されている小さい写真をクリックすると、拡大して確認できます
  • 路線案内
    路線の目的地は表示されているフィールドワークデータの場所になります
    出発地は、登録済みの地点から選択するか、または「地図入力」を選択後「地図指定」ボタンから好きな地点を指定します
    「ロードマップ」ボタンをクリックすると、出発地点から目的地点までの路線が地図表示されます
    路線案内の画面は、 こちら を参照してください

更新画面

画面１０

 この画面ではフィールドワークデータを変更することができます。変更できる項目は、次のものです。

  • 分類
    大分類と小分類を変更できます
  • 調査日
    調査日を変更できます
    日付の欄をクリックすると、カレンダーが表示されますから、そこから日付を選択してください
  • タイトル
    １２８文字以内で、タイトルを変更できます
  • 数量
    数量とその単位を変更ができます
  • 調査場所
    １２８文字以内で、調査場所を変更できます
  • キーワード
    １２８文字以内で、キーワードを変更できます
  • その他
    １２８文字以内で、変更できます
  • 内容
    フィールドワークデータの本文を変更できます
  • 緯度経度
    緯度と経度を変更できます
    「Map」ボタンをクリックすると、緯度経度を入力するための地図が表示されます
    その画面は、 こちら を参照してください
  • 写真
    登録済みの写真を削除することができます
  • 新規写真
    「添付ファイル」ボタンから、添付したい写真ファイルを新規に複数選択することができます
    一度に添付できる添付ファイルは、そのサイズの合計が32Mバイトに制限されます

削除画面

画面１１

 この画面ではフィールドワークデータを削除することができます。「削除」ボタンをクリックすると、削除の確認を求めてきます。

地図関連

 地図関連の画面は Google Map Api を利用しています。画面には、次の４つがあります。地図の縮尺変更や場所の変更は、どの画面でも同じです。

  • 緯度経度指定画面（下記画面１２）
    地図上でマウスをクリックすると、その位置にマーカーが設定されて、緯度経度を指定できます
  • エリア指定画面（下記画面１３）
    地図上で多角形のエリアを指定することができます
    画面右上にある、「Start」「All Clear」「Clear」「Finish」のボタンとマウスクリックによりエリアを描くことができます
  • 路線表示（下記画面１４）
    出発地点から目的地点までの路線図を地図上に表示します
  • フィールドワークデータ表示（下記画面１５）
    複数のフィールドワークデータを、その調査場所に色別のマーカーで表示します
    マーカーの近くにマウスを近づけると簡単な説明が表示されます
    マーカーをクリックすると、詳細な説明と写真が表示されます
画面１２
画面１３
画面１４
画面１５