Zenn
Closed27

応用的な技術を用いたWebアプリを制作

ぜらちんぜらちん

ランダムで取得したURL先のカチューシャをARで表示して試着できるものを作りたい。
リンク先からリアルタイムに取得はできないだろうからどうするか・・・。

ぜらちんぜらちん

作った画像をARで表示させたい。
が、何を見ても難しいのであきらめようかな・・・

ぜらちんぜらちん

スマホの位置情報にして、取得した位置からおすすめのTDR情報を出す、とかにしてみよう。

ぜらちんぜらちん

まずは位置情報の取得と、取得した情報からどの位置かを判定するものを作る。

ぜらちんぜらちん

ボタン押しても位置情報取得できないー！とりあえず今時点のコードのせておく。

ぜらちんぜらちん

HTML

<div id="app">

  <!-- 位置情報の表示 -->
  <p>
    <h2>位置情報</h2>
    <button onclick="click()">位置情報取得</button>
  <br>
    経度: {{ longitude }}<br>
    緯度: {{ latitude }}<br>
    現在地: <a :href="maps" target="_blank">{{ mapStatus }}</a>
  </p>

  <d>
    <h2>おすすめ情報</h2>
    <div id="info">
  </d>
  
</div>
ぜらちんぜらちん

JavaScript

const app = new Vue({
  el: '#app',
  
  data: {
    latitude: '',
    longitude: '',
    maps: '',
    mapStatus: '...',
  },
  
  mounted() {
    function click() {
      navigator.geolocation.getCurrentPosition((pos) => {
        // 位置情報取得：成功時
        let lon = Math.abs(pos.coords.longitude); // 経度
        let lat = Math.abs(pos.coords.latitude);  // 緯度
        const ew = (pos.coords.longitude >= 0) ? '東経' : '西経'; // 東経・西経
        const ns = (pos.coords.latitude >= 0) ? '北緯' : '南緯'; // 北緯・南緯
        // 表示を更新する
        this.longitude = `${ew} ${lon}°`;
        this.latitude = `${ns} ${lat}°`;
        // 地図リンクURLを更新する
        this.maps = `https://google.co.jp/maps?q=${pos.coords.latitude},${pos.coords.longitude}`;
        //リンクの表示を更新する
        this.mapStatus = 'Google Mapsで確認'
      }, (err) => {
        // 位置情報取得：失敗時
        console.error(err);
        // 地図情報のところに失敗メッセージを出す
        this.mapStatus = '利用不可';
        this.maps = '#';
      });
    }
  },
  
})
ぜらちんぜらちん

いけた！やっぱり考えても分からないことはすぐに聞くべき！
そして回答待ちのあいだは見た目を整えることにしていた。
今回はBootstrapを使用する。
https://getbootstrap.jp/

ぜらちんぜらちん

取得した経度緯度は小数点含む文字数を取得して判定。
経度はXXX.XXXXX、緯度XX.XXXXX
で判定する。
小数点5桁までなら誤差はさほどない。
4桁になるとだいぶずれる。

ぜらちんぜらちん

現地に行かないと試せないことが発覚。
なのでTEST用も作成する。
https://codepen.io/kamakurakae/pen/VwzxmbG

ぜらちんぜらちん

TEST用のコード
HTML

<div class="container text-center" id="app">

  <!-- 位置情報の表示 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto"><h1>ディズニーランド位置情報</h1></div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <input class="form-control" v-model:value="inido" placeholder="緯度を入力"><br>
      <input class="form-control" v-model:value="inkeido" placeholder="経度を入力">
    </div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button class="btn btn-danger" v-on:click="click">位置情報設定</button>
      <button class="btn btn-outline-danger" v-on:click="clear">位置情報クリア</button>
    </div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      経度: {{ longitude }}<br>
      緯度: {{ latitude }}<br>
      現在地: <a :href="maps" target="_blank">{{ mapStatus }}</a>
    </div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">      
      <h2>この付近のプチ情報</h2><br>
      <h2 class="alert alert-danger" role="alert">{{ name }}</h2><br>
      <div class="alert alert-secondary" role="alert">{{ data }}</div>
    </div>
    
  </div>
ぜらちんぜらちん

JavaScript

const app = new Vue({
  el: '#app',
  
  data: {
    inido: '',
    inkeido: '',
    latitude: '',
    longitude: '',
    maps: '',
    mapStatus: '...',
    keido: '',
    ido: '',
    name: '',
    data: '',
    testkeido: '',
    testido: '',
  },
  
  methods: {
    click() {
      let lon = Number(this.inkeido); // 経度
      let lat = Number(this.inido);  // 緯度
      const ew = (lon >= 0) ? '東経' : '西経'; // 東経・西経
      const ns = (lat >= 0) ? '北緯' : '南緯'; // 北緯・南緯
      // 表示を更新する
      this.longitude = `${ew} ${lon}°`;
      this.latitude = `${ns} ${lat}°`;
      // 地図リンクURLを更新する
      this.maps = `https://google.co.jp/maps?q=${lat},${lon}`;
      //リンクの表示を更新する
      this.mapStatus = 'Google Mapsで確認'
      
      // 経度緯度文字列化＆切り出し
      let keido = String(lon); //文字列化
      keido = keido.substr(0, 9); //整数3桁+小数点+小数5桁＝9文字
      let ido = String(lat); //文字列化
      ido = ido.substr(0, 8); //整数2桁+小数点+小数5桁＝8文字
      
      // 経度緯度判定
      if (keido === '139.88086' && ido === '35.63213'){
          this.name = 'シンデレラ城';
          this.data = '高さ51m。シーにあるプロメテウス火山と同じ高さ。ウォルトディズニーが天国から東京ディズニーランドを見つけられるよう空に最も近い一番高い塔を金色にしている。';
        } else if (keido === '139.88009' && ido === '35.63215'){
          this.name = 'シンデレラ城がキレイに撮影できるスポット';
          this.data = 'シンデレラ城と橋の間に池があるため人が前に立つことがない。そのためとてもキレイにシンデレラ城を撮影することができる。';
        } else if (keido === '139.88099' && ido === '35.63201'){
          this.name = 'シンデレラのフェアリーテイル・ホール';
          this.data = 'メインホールの手前のエリアでは、シンデレラのネズミの友達ジャックとガスが顔を出すことも！';
        } else if (keido === '139.88096' && ido === '35.63189'){
          this.name = '魔法使いの弟子ミッキー像';
          this.data = '2003年の開園20周年を記念してアメリカのウォルトディズニーカンパニーから寄贈されたもの。映画「ファンタジア」に登場する魔法使いの弟子の姿をしてる。';
        } else if (keido === '139.87916' && ido === '35.63508'){
          this.name = 'ミッキー花壇';
          this.data = 'エントランスにあるミッキーの顔をかたどった花壇。季節により花の種類が変わっている。この花の植え替えは一晩で行われる。まるで魔法のように。';
        } else if (keido === '139.87903' && ido === '35.63532'){
          this.name = '東京ディズニーランド メインエントランス';
          this.data = '入園時に聞こえる「シャララン」という音はティンカーベルが魔法をかけてくれている音。退園時には聞こえない。かけられた魔法はディズニーランドを去っても解けない。';
        } else if (keido === '139.87970' && ido === '35.634482'){
          this.name = 'ワールドバザール・コンフェクショナリー';
          this.data = 'パーク最大のお菓子屋さん。会計エリアは「シュガーマン銀行」というバッググラウンドストーリーがある。レジが置かれている場所などは銀行の窓口になっている。壁に飾られている役員たちの名前もお菓子にちなんだものになっている。';
        } else if (keido === '139.87938' && ido === '35.63443'){
          this.name = 'グランドエンポーリアム';
          this.data = 'パーク最大のお土産さん。店長はミッキーマウス。店内にミッキーのオフィスが存在する。';
        } else if (keido === '139.87956' && ido === '35.63430'){
          this.name = 'ワールドバザール';
          this.data = 'ディズニーランドに入って最初に通るテーマランド。全体を覆う大きな屋根は「オールウェザーカバー」（全天候型屋根）と呼ばれており雨の多い東京ディズニーランド特有のものである。エリアの建物は一部を除き超遠近法が使われており、上にいくに従って狭くなるように作られている。これは実際よりも建物を大きく見せるためであり、ディズニーの映画セットの経験が活かされている。また、入口からシンデレラ城に向かっても道幅が段々狭くなるように作られている。建物の壁にはディズニーに貢献した人物の名前が書かれている。';
        }
    },
    clear() {
      // 経度緯度リンクをクリアする
      this.inido = '';
      this.inkeido = '';
      this.longitude = '';
      this.latitude = '';
      this.maps = '';
      this.mapStatus = '...';
      this.name = '';
      this.data = '';
    },
  },
})
ぜらちんぜらちん

昨日終了時点のコードも残しておく。
豆知識部分直書きだからその部分は省略！
どこかから情報とりたいんだけどそれも難しい・・・。

ぜらちんぜらちん

HTML

<div class="container text-center" id="app">

  <!-- 位置情報の表示 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto"><h1>ディズニーランド位置情報（テスト用）</h1></div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button class="btn btn-danger" v-on:click="click">位置情報取得</button>
      <button class="btn btn-outline-danger" v-on:click="clear">位置情報クリア</button>
    </div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      経度: {{ longitude }}<br>
      緯度: {{ latitude }}<br>
      現在地: <a :href="maps" target="_blank">{{ mapStatus }}</a>
    </div>
  </div>
  
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      
      <h2>この付近のプチ情報</h2><br>
      <h2 class="alert alert-danger" role="alert">{{ name }}</h2><br>
      <div class="alert alert-secondary" role="alert">{{ data }}</div>
    </div>
    
  </div>
ぜらちんぜらちん

JavaScript

const app = new Vue({
  el: '#app',
  
  data: {
    latitude: '',
    longitude: '',
    maps: '',
    mapStatus: '...',
    keido: '',
    ido: '',
    name: '',
    data: '',
    testkeido: '',
    testido: '',
  },
  
  methods: {
    click() {
      navigator.geolocation.getCurrentPosition((pos) => {
        // 位置情報取得：成功時
        let lon = Math.abs(pos.coords.longitude); // 経度
        let lat = Math.abs(pos.coords.latitude);  // 緯度
        const ew = (pos.coords.longitude >= 0) ? '東経' : '西経'; // 東経・西経
        const ns = (pos.coords.latitude >= 0) ? '北緯' : '南緯'; // 北緯・南緯
        // 表示を更新する
        this.longitude = `${ew} ${lon}°`;
        this.latitude = `${ns} ${lat}°`;
        // 地図リンクURLを更新する
        this.maps = `https://google.co.jp/maps?q=${pos.coords.latitude},${pos.coords.longitude}`;
        //リンクの表示を更新する
        this.mapStatus = 'Google Mapsで確認'
        
        // 経度緯度文字列化＆切り出し
        let keido = String(lon); //文字列化
        keido = keido.substr(0, 9); //整数3桁+小数点+小数5桁＝9文字
        let ido = String(lat); //文字列化
        ido = ido.substr(0, 8); //整数2桁+小数点+小数5桁＝8文字
        
        // 経度緯度判定
        if (keido === '139.88086' && ido === '35.63213'){
          this.name = 'シンデレラ城';
          this.data = '高さ51m。シーにあるプロメテウス火山と同じ高さ。ウォルトディズニーが天国から東京ディズニーランドを見つけられるよう空に最も近い一番高い塔を金色にしている。';
// ～中略～
        }
        
      }, (err) => {
        // 位置情報取得：失敗時
        console.error(err);
        // 地図情報のところに失敗メッセージを出す
        this.mapStatus = '利用不可';
        this.maps = '#';
      });
    },
    clear() {
      // 経度緯度リンクをクリアする
      this.longitude = '';
      this.latitude = '';
      this.maps = '';
      this.mapStatus = '...';
      this.name = '';
      this.data = '';
    },
  },  
})
ぜらちんぜらちん

完成！！情報が全部手書きっていうのがいただけないけどこれでよしとしよう！！
もっと位置情報の範囲を広げたいけどそういうのはどうするんだろう・・・

TEST用

本物

このスクラップは2021/11/15にクローズされました