enhance(ServerFinder): 大文字小文字・半角カナのノーマライズを追加

Fix #116

assets/js/misc/index.ts

@@ -109,3 +109,35 @@ export function copyText(val: string) {
 
 	return result;
 }
+
+/**
+ * Converts half-width Katakana characters to full-width Katakana characters.
+ * @param str - The string to convert.
+ * @returns The converted string with full-width Katakana characters.
+ */
+export function kanaHalfToFull(str: string): string {
+    const kanaMap: Record<string, string> = {
+        'ｶﾞ': 'ガ', 'ｷﾞ': 'ギ', 'ｸﾞ': 'グ', 'ｹﾞ': 'ゲ', 'ｺﾞ': 'ゴ',
+        'ｻﾞ': 'ザ', 'ｼﾞ': 'ジ', 'ｽﾞ': 'ズ', 'ｾﾞ': 'ゼ', 'ｿﾞ': 'ゾ',
+        'ﾀﾞ': 'ダ', 'ﾁﾞ': 'ヂ', 'ﾂﾞ': 'ヅ', 'ﾃﾞ': 'デ', 'ﾄﾞ': 'ド',
+        'ﾊﾞ': 'バ', 'ﾋﾞ': 'ビ', 'ﾌﾞ': 'ブ', 'ﾍﾞ': 'ベ', 'ﾎﾞ': 'ボ',
+        'ﾊﾟ': 'パ', 'ﾋﾟ': 'ピ', 'ﾌﾟ': 'プ', 'ﾍﾟ': 'ペ', 'ﾎﾟ': 'ポ',
+        'ｳﾞ': 'ヴ', 'ﾜﾞ': 'ヷ', 'ｦﾞ': 'ヺ',
+        'ｱ': 'ア', 'ｲ': 'イ', 'ｳ': 'ウ', 'ｴ': 'エ', 'ｵ': 'オ',
+        'ｶ': 'カ', 'ｷ': 'キ', 'ｸ': 'ク', 'ｹ': 'ケ', 'ｺ': 'コ',
+        'ｻ': 'サ', 'ｼ': 'シ', 'ｽ': 'ス', 'ｾ': 'セ', 'ｿ': 'ソ',
+        'ﾀ': 'タ', 'ﾁ': 'チ', 'ﾂ': 'ツ', 'ﾃ': 'テ', 'ﾄ': 'ト',
+        'ﾅ': 'ナ', 'ﾆ': 'ニ', 'ﾇ': 'ヌ', 'ﾈ': 'ネ', 'ﾉ': 'ノ',
+        'ﾊ': 'ハ', 'ﾋ': 'ヒ', 'ﾌ': 'フ', 'ﾍ': 'ヘ', 'ﾎ': 'ホ',
+        'ﾏ': 'マ', 'ﾐ': 'ミ', 'ﾑ': 'ム', 'ﾒ': 'メ', 'ﾓ': 'モ',
+        'ﾔ': 'ヤ', 'ﾕ': 'ユ', 'ﾖ': 'ヨ',
+        'ﾗ': 'ラ', 'ﾘ': 'リ', 'ﾙ': 'ル', 'ﾚ': 'レ', 'ﾛ': 'ロ',
+        'ﾜ': 'ワ', 'ｦ': 'ヲ', 'ﾝ': 'ン',
+        'ｧ': 'ァ', 'ｨ': 'ィ', 'ｩ': 'ゥ', 'ｪ': 'ェ', 'ｫ': 'ォ',
+        'ｯ': 'ッ', 'ｬ': 'ャ', 'ｭ': 'ュ', 'ｮ': 'ョ',
+        '｡': '。', '､': '、', 'ｰ': 'ー', '｢': '「', '｣': '」', '･': '・'
+    };
+
+    var reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g');
+    return str.replace(reg, (m) => kanaMap[m]).replace(/ﾞ/g, '゛').replace(/ﾟ/g, '゜');
+};

components/servers/Finder.vue

@@ -18,7 +18,7 @@
                         <XIco class="w-7 h-7" />
                     </button>
                 </div>
-                <form @submit.prevent="() => { f_query = f_query_partial }">
+                <form @submit.prevent="applyQuery">
                     <label class="form-label" for="query">{{ $t('_servers._search.query') }}</label>
                     <div class="input-group">
                         <input class="form-control" type="search" autocomplete="off" id="query" v-model="f_query_partial" />
@@ -129,7 +129,7 @@
 
 <script setup lang="ts">
 import type { InstanceInfo, InstanceItem, InstancesStatsObj } from '@/types/instances-info';
-import { resolveObjPath } from '@/assets/js/misc';
+import { resolveObjPath, kanaHalfToFull } from '@/assets/js/misc';
 import langs from '@/assets/data/lang';
 
 import SearchIco from 'bi/search.svg';
@@ -232,10 +232,10 @@ const filteredInstances = computed<InstanceItem[]>(() => {
     }
 
     if (f_query.value) {
-        instances = instances.filter((instance) => instance.name.includes(f_query.value) || instance.description?.includes(f_query.value));
+        instances = instances.filter((instance) => normalizeString(instance.name).includes(f_query.value) || normalizeString(instance?.description ?? '').includes(f_query.value));
     }
     if (f_langs.value) {
-        instances = instances.filter((instance) => instance.langs.includes(f_langs.value));
+        instances = instances.filter((instance) => instance.langs.includes(f_langs.value ?? ''));
     }
     if (f_registerAcceptance.value) {
         instances = instances.filter((instance) => {
@@ -279,6 +279,16 @@ const filteredInstances = computed<InstanceItem[]>(() => {
 function switchOrder() {
     f_order.value = f_order.value === 'asc' ? 'desc' : 'asc';
 }
+
+function normalizeString(str: string) {
+    // アルファベットは小文字に、半角カタカナは全角ひらがなに、全角カタカナは全角ひらがなに変換
+    const _res = kanaHalfToFull(str.toLowerCase()).replace(/[ァ-ン]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0x60));
+    return _res;
+}
+
+function applyQuery() {
+    f_query.value = normalizeString(f_query_partial.value);
+}
 </script>
 
 <style scoped>

pages/servers/index.vue

@@ -56,7 +56,7 @@ const route = useRoute();
 
 const instancesStats = ref<InstancesStatsObj>();
 
-function setServerStats(val: InstancesStatsObj) {
+function setServerStats(val?: InstancesStatsObj) {
     instancesStats.value = val;
 }