Fork: 0
SKIP / 2022-ikimonogakari
Transfer to URL with SHA Find file
Newer
Older
2022-ikimonogakari / kaoka / startmakepage / start.html
@KAOKA Daisuke KAOKA Daisuke on 10 May 2022 5 KB ad
Raw Blame History 
<!DOCTYPE html>
<html lang="ja">

<head>
    <title>INFO SYSTEM #1</title>
    <link rel="stylesheet" type="text/css" href="../startmakepage/start.css">
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
    
<header>

  <nav>
    <ul class="nav-menu">
        <li><a href="https://www.yatex.org/gitbucket/SKIP/renshu-2021/pages/SKIP/index.html#">SKIPのホームページ</a></li>
        <li><a href="https://www.yatex.org/gitbucket/utaka0416/AegisforEcosystem/pages/Map/birder/atlas/map.html">MAP</a></li>
        <li><a href="https://www.koeki-u.ac.jp/">東北公益文科大学ホームページ</a></li>
        <li><a href="http://www.raptor-c.com/">イヌワシみらい館ホームページ</a></li>
    </ul>
  </nav>

</header>

<div class="tab">

    <input id="untilnow" type="radio" name="tab_item" checked>
    <label class="tab_item" for="untilnow">これまでの「探鳥マップ」は・・・</label>
    <input id="nowon" type="radio" name="tab_item">
    <label class="tab_item" for="nowon">これからの「探鳥マップ」は・・・</label>

    <div class="tab_content" id="untilnow_content">
      <div class="tab_content_description">

        <h1>国指定最上川河口鳥獣保護区を活動の軸とした探鳥マップの作成</h1>

        <div id="map">
        <div id="mapset1">
        <h2>uMap〜野鳥のポイントマップ〜</h2>
        <iframe width="80%" height="400px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/ja/map/map_660619?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false"></iframe>
        <p>鳥獣保護区域内で観察された野鳥をポイントで表示し，<br>詳細データと写真がポップアップされる．</p>
        <p>課題①<br>希少種や営巣地などの情報を晒してしまう．</p>
        <p>課題②<br>地図上で表示された場所で必ずその鳥が観察できるとは限らない．</p>
        <br>
        <p>
        </div>

        <div id="mapset2">
        <h2>Leaflet〜野鳥の好適環境マップ〜</h2>
          <iframe width="400px" height="400px" frameborder="0" allowfullscreen src="https://www.yatex.org/gitbucket/utaka0416/AegisforEcosystem/pages/Map/birder/atlas/map.html"></iframe>
        <p>JavaScriptライブラリの<strong>Leflet</strong>を用いることで，<br>Web地図をより細かく設定を変更することができる．</p>
        <p>この地図では野鳥の好適環境に焦点を当てている．<br>保護区内の土地環境を，<mark>市街地・畑・水田・海岸・河川・港湾・森林・都市公園</mark>に区分しており，<br>
          野鳥の名前を検索ボックスに入力すると，<br>その鳥の好適環境に合ったポリゴンが地図に表示される．</p>
        </div>
        </div>

        </div>

      </div>

    <div class="tab_content" id="nowon_content">
      <div class="tab_content_description">
      
      <div id="content2">

      <div id="mapgoal">
      <h1>1.　探鳥マップ(Leaflet版)の発展(目標)</h1>
      <p>①csvファイルをfetchで読み込むことで，より<mark>検索のバリエーション</mark>を増やす．</p>
      <p>②ゲーム地図，<mark>ポイントで野鳥を表示する地図</mark>をLeafletで完成させる．</p>
      <p>③観察した野鳥の情報をuMapのように簡単に書き込めるようにする．</p>
      <p>④A-Frameを使った<mark>VRコンテンツの発展</mark>（360°写真ポイントの増加＋3Dモデルの導入）．</p>
      <p>⑤観察対象地を鳥獣保護区から拡大する．</p>

      <img src="../material/photo/sonota/DSC07093.jpg" width="20%" alt="カニ">
      <img src="../material/photo/sonota/IMGP2895.jpg" width="20%" alt="ネコ">
      </div>

      <div id="newcontent">
      <h1>2.　水生生物マップ，ノラネコマップの作成</h1>
      <p>探鳥マップ作成の際に学んだことを踏まえて，<br>酒田市に生息する水生生物及びノラネコの生態を<br>記録する地図コンテンツを作成する．</p>
      <br>
      <h2>考えるべきこと</h2>
      <p>水生生物は実際にどんな生物がいるのかを記録するだけでも，
        <br>生物多様性の保全といった自然環境分野には貢献できる．
        <br>地図という形でアウトプットするのであれば，<br>「位置がわかる」という地図の特徴を活かした，<br>わかりやすくて誰かの役に立つコンテンツにする必要がある．
      </p>
      <p>
        ノラネコマップは，その地図を誰が利用することを想定して作るのかを<br>明確にしてから作成に臨んだ方が良い．
      </p>

      <br>

      <h2>手始めに・・・</h2>
      <p><strong>uMapの使い方をマスターする．</strong></p>
      <p><strong>uMapで利用できるGeoJsonファイルや，csvファイルへの理解を深める．</strong></p>
      <p><strong>Web地図で利用する写真の，位置情報を埋め込むやり方＋GIMPでの加工の習得．</strong></p>

      </div>

      </div>

    </div>

</div>

</body>

</html>