フレワク
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で実装するも相変わらずハマる
Nuxt3にVuetify3で、情報をストックしているjsonから得て、一覧できるウェブサイトを実装中。UIフレームワークを使うことが少ないので、試行錯誤しながらやっています。そうしたら、想定通りNuxtにもVuetifyにもハマったので、今後のためにメモすることに。目標はSSG(ssr: false)でアップファイルを生成し、それらをエックスサーバーにアップします。ちなみに、VuetifyはVue.js用のマテリアルデザインコンポーネントフレームワークです。フロントエンドを楽ちんにする道具だとか。
【Nuxt】jsonの取り込みにハマった
jsonでcorsにひっかかって、対処の仕方に四苦八苦。下記サイトなど色々なウェブサイトを参考に前進しましたが、なかなかデータを取得できません。console errorから開発環境と静的生成ファイルで読み込む先が違うのがわかり、なんとか解決しました。nuxt.config.tsとfetchするファイルに記述が必要だったみたいです。
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設定を参考にしたところ、動的ページを認識することに成功したのです。
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で覚えていると、とっさの時にclassとpropが思い出せず、公式サイトを見に行けなければなりません。そのため、一旦vuetifyを勉強するべく、検索して探すと、絶好のタイミングで、素晴らしいウェブサイトがありました。こちらのサイトで一通り勉強し、反映させることに。でも、やっぱり公式サイトに見にいかねばなりません。覚えられないんですもん。