ログ分析ツールを多言語化する技を習得

今朝は久しぶりに４時半から開発開始です。部屋の気温は９度でした。はじめて１０度以下になりました。
さて、昨日の夜からログ分析ツールの多言語対応をはじめました。日本語と英語の切り替えができるようにする開発です。２つの切り替えができれば、他の言語の追加は簡単にできます。
利用したパッケージは

svelte-i18n

です。いろいろ調べて、

Svelte i18n Internationalization: how to localize a Svelte app

の解説が一番参考になりました。
まずは、ようこそ画面だけ対応したものを見てください。

動画は

です。
作ったソースコードはi18n.jsは

import {
  dictionary,
  locale,
  _,
  init, 
  getLocaleFromNavigator
} from 'svelte-i18n';

let currentLocale = "en";
const initI18n = () => {
  dictionary.set({
    en: {
      "Wellcome": {
        "Title": "Wellcom to TWLogAIAN",
        "Line1": "TWLogAIAN is an AI-assisted log analysis tool.",
        "Line2": "The manual is written in the following link",
        "Line3": "The source code is available on GitHUB.",
        "Line4": "Please let us know of any bugs or requests through ’Feedback’ or the link below.",
        "Thanks": "Thank you for using TWLogAIAN.",
        "Feedback": "Feedback",
        "Start": "Start",
      },
    },
    ja: {
      "Wellcome": {
        "Title": "ようこそ TWLogAIANへ",
        "Line1": "TWLogAIANはAIアシスト付きログ分析ツールです。",
        "Line2": "マニュアルはnoteに書いています。",
        "Line3": "ソースコードはGitHUBにあります。",
        "Line4": "バグや要望は「フィードバック」か以下のリンクからお知らせください。",
        "Thanks": "TWLogAIANを利用いただきありがとうございます。",
        "Feedback": "フィードバック",
        "Start": "分析をはじめる",
      }
    },
  });
  currentLocale = getLocaleFromNavigator() || 'en';
  init({
    fallbackLocale: 'en',
    initialLocale: currentLocale,
  });  
}

const  setLocale = (_locale) => {
  currentLocale = _locale;
  locale.set(_locale);
}

const getLocale =  () => {
  return currentLocale;
}

export {
  _,
  initI18n,
  setLocale,
  getLocale
};

のような感じです。enやjaの中に各言語の翻訳を書けばよいです。deとかesとか追加すれば、他の言語にも対応できるはずです。
App.svelteで初期化します。

<script>
  import Wellcome from "./pages/Wellcome.svelte";
....
  import { initI18n,setLocale } from './js/i18n';

  let page = "wellcome";
  initI18n();

画面を表示するコンポーネント(Wellcome.svelte)で

</script>
  import { _,setLocale,getLocale } from '../js/i18n';

  let locale = getLocale();
  const _setLocale = (l) => {
    locale = l;
    setLocale(l);
  }
</script>

<div class="Box mx-auto" style="max-width: 800px;">
  <div class="Box-header">
    <h3 class="Box-title">{$_('Wellcome.Title')}
      <button class="btn float-right" type="button" on:click={toggleDark}>
        {#if dark}
          <Sun16 />
        {:else}
          <Moon16 />
       {/if}
      </button>
      <details class="details-reset details-overlay float-right">
        <summary class="btn" aria-haspopup="true">
          <ThreeBars16/>
        </summary>
        <div class="SelectMenu">
          <div class="SelectMenu-modal">
            <div class="SelectMenu-list">
              <button class="SelectMenu-item" role="menuitem" on:click={()=>_setLocale('en')} disabled={locale =='en'}>en</button>
              <button class="SelectMenu-item" role="menuitem" on:click={()=>_setLocale('ja')} disabled={locale =='ja'}>ja</button>
            </div>
          </div>
        </div>
      </details>
      </h3>
  </div>

のように使えます。

あとは、沢山ある画面のソースコードから日本語を表示する部分を
ひたすら抜き出して英語の日本語のdictionaryに追加していけば完成です。
かなりの苦行かもしれません。

明日に続く