Webアプリケーションを公開するまでのつぶやき 7

プロローグはこちら↑。

図書館検索api

今回はカーリルさんのapiを使わせてもらいます。
まずはアプリケーションキーの登録。
これはすぐに発行してもらえます。
図書館データベースのapiには緯度、経度を送るとその地点から近い順に図書館データを返してくれる機能があります。
なんて便利な。

早速、apiからデータを取得する為にaxiosを導入。

ViteでVue3+TypeScript+TailwindCSS+axiosの雛形アプリを作ってみる - Qiita

axiosの導入と使い方はこちらの記事を参考にしました。

問題発生

No Access-Control-Allow-Originということでドメインが違うので通信を許可できない的なエラーでデータが取得できない問題にぶちあたりました。

むむ、困った。

最初はフロント側にhederをつけたのですが、うまくいかず。
Access-Control-Allow-Originはサーバー側につけなくてはいけないみたいですね。
しかし、サーバーサイドは自分で作っているものではないのでこちらではどうにもできません。

どうすれば。
と、色々調べた結果、この記事に行きつきました。

「No 'Access-Control-Allow-Origin'」が出た時に疑うこと・解決策リスト - Qiita

この4番。
フロント側のproxyを使う事で解決できるかも。

という事で、

Vite（Vue3） + Laravel（XAMPP環境）でセッションが消える（Authが機能しない） - Qiita

やりかた。
これはvue.config.jsにproxyの設定をしているけど、私はviteを使っているのでvite.config.tsに設定を書きました。

Vite

viteでのやり方はここに書いてあります。

そんなこんなでproxyの設定でなんとかこの問題を回避できました。
良かった良かった。

マップにピンを表示

ol-geom-point | Vue3 OpenLayers

apiから取得した最寄りの図書館の位置情報をマップに表示したいので、↑のリンク先の通りに実装していきます。
レイアウトは使います。

    mounted() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            this.center = [position.coords.longitude, position.coords.latitude];
            const res = searchService.getLiblaries(`${this.center[0]}` + "," + `${this.center[1]}`);
            res.then((value) => {
              this.coordinate = value.flatMap((e) => {
                const str = e.geocode.split(",");
                return [Number(str[0]), Number(str[1])]
              });
              // console.log(value);
            });
            this.isLoading = false;
          },
          (error) => {
            alert("位置情報の取得に失敗しました。");
            this.isLoading = false;
          }
        );
      }
    },

mounted()で位置情報を取得後、現在地をapiに渡して最寄りの図書館データを取得します。
それをcoordinateに代入するのですか、カーリルさんのapiのgeocodeは”lon,lat”みたいな文字列で返ってくるのでsplit(",")で分解してそれをnumberに変換してあげます。
さらにそれを連続したnumberの配列にして渡してあげると複数のpointを地図上にマップできました。

今回はここまで。
もう少し、ピンのデザインを変えていきたいのと、自分の現在地も表示したいですね。
それはまた次回。

ここまで読んでいただきありがとうございました。