フレワク

Web


Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

Nuxt3+Vuetify3で実装するも相変わらずハマる

Nuxt3Vuetify3で、情報をストックしているjsonから得て、一覧できるウェブサイトを実装中。UIフレームワークを使うことが少ないので、試行錯誤しながらやっています。そうしたら、想定通りNuxtにもVuetifyにもハマったので、今後のためにメモすることに。目標はSSG(ssr: false)でアップファイルを生成し、それらをエックスサーバーにアップします。ちなみに、VuetifyVue.js用のマテリアルデザインコンポーネントフレームワークです。フロントエンドを楽ちんにする道具だとか。

Get started with Vuetify 3 — Vuetify
Details for v3 release - faq, changes, and upgrading.

【Nuxt】jsonの取り込みにハマった

jsoncorsにひっかかって、対処の仕方に四苦八苦。下記サイトなど色々なウェブサイトを参考に前進しましたが、なかなかデータを取得できません。console errorから開発環境と静的生成ファイルで読み込む先が違うのがわかり、なんとか解決しました。nuxt.config.tsfetchするファイルに記述が必要だったみたいです。

export default defineNuxtConfig({
// もろもろ設定がある
  nitro: {
    // cors用(開発環境)
    routeRules: {
      '/api/**': {
        proxy: 'https://xxxxx.jp/xxxxxxxx.json'
      }
    }
  },
});

フェッチするファイルで、開発用と本場用のURLを切り分けました。あと、transformでjsonデータをいじれるみたいで、ここで加工してからデータを出荷することに。

import type { JsonArray } from '~/types/jsonarray';

type Fetch = (url: string) => Promise<JsonArray[]>

// 開発環境とSSG書き出し後でURLの読み込む先が違う
const devFlag = process.env.NODE_ENV === 'production';
// nuxt.config.tsのrouteRulesに関係する
const devUrl = '/api/endpoint';
const productUrl = 'https://xxxxxxx.jp/xxxxx.json';
const fetchUrl = devFlag ? productUrl : devUrl;

const $fetch: Fetch = async (url) => {
  const response = await fetch(url);
  const data: JsonArray[] = await response.json();
  return data;
};

export const useData = async () => {
  const { data } = await useAsyncData('incident', () => $fetch(fetchUrl), {
    // 以下元のjsonを整形加工しているだけ。自分向け。
    transform: (array: JsonArray[]) => {
      const processedArray = array.map((item) => {
        for (const key in item) {
          // 全角数字を半角数字に変換
          if (typeof item[key] === 'string') {
            item[key] = item[key]?.replace(/[0-9]/g, (s: string) => {
              if (s >= '0' && s <= '9') {
                return String.fromCharCode(
                  s.charCodeAt(0) - '0'.charCodeAt(0) + '0'.charCodeAt(0)
                );
              } else {
                return s;
              }
            });
          }
          // タイトルの数字と全角空白を削除
          if (key === 'title' && typeof item[key] === 'string') {
            item[key] = item[key]?.replace(/^[0-9 ]+/, '');
          }
          // 本文の改行を削除
          if (key === 'text' && typeof item[key] === 'string') {
            item[key] = item[key]?.trim();
          }
        }
        return item;
      });

      processedArray.sort((a, b) => {
        // 年数(year)でソート
        const yearDiff = Number(b.year) - Number(a.year);
        if (yearDiff !== 0) {
          return yearDiff;
        }
        // 月日を抽出してソート
        if (a.date && b.date) {
          const dateA = a.date.match(/(\d+)月(\d+)日/);
          const dateB = b.date.match(/(\d+)月(\d+)日/);
          if (dateA && dateB) {
            return (
              Number(dateB[1]) * 100 +
              Number(dateB[2]) -
              (Number(dateA[1]) * 100 + Number(dateA[2]))
            );
          }
        }
        return 0;
      });
      return processedArray;
    }
  });
  return data;
};

【Nuxt】動的ルートを生成できなくてハマった

generateしたファイルを本番にアップした時に気づいたのですが、動的リンクと動的ページが生成されていませんでした。調べると、そういうものらしく、自分で設定しなきゃいけない模様。下記サイトからnitoro設定を参考にしたところ、動的ページを認識することに成功したのです。

Extending prerender routes · Issue #13949 · nuxt/nuxt
In Nuxt 2, using nuxt generate, we could either manually pro…
export default defineNuxtConfig({
// 他の設定が諸々ある。
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/incident/0","/incident/1","/incident/2"]
    },
   }
})

【Vuetify】v-tableでハマった

北海道の事件を集め、jsonにしたデータを読み込むだけだったんですが、少し手間取りました。読み込んじゃえば、楽ちんなんですが、レイアウトがしっくりきません。というのも、詳細を掲載したことにより、他の行に比べはるかに文字量が多くて、見づらいんですよね。ここで結構悩んだんですが、chatGPTに相談すると、gridでやればいいじゃんと言うではありませんか。そこからは早かった。3段一組の列にし、ヘッダーと一覧の行を揃えてやると、ソートもいい感じで効かすことができました。

【Vuetify】classとpropが思い出せない

cssで覚えていると、とっさの時にclasspropが思い出せず、公式サイトを見に行けなければなりません。そのため、一旦vuetifyを勉強するべく、検索して探すと、絶好のタイミングで、素晴らしいウェブサイトがありました。こちらのサイトで一通り勉強し、反映させることに。でも、やっぱり公式サイトに見にいかねばなりません。覚えられないんですもん。

Vuetify3 の基本
Vuetify3 の画面のレイアウトの基本と、ボックス(領域)を確保する方法、位置合わせや寄せの方法、色やフォントの指定…

コメント