MD（マークダウン）エディタつくろう　その２（ローカライズの実装）

というわけで、すでに出来上がってるMDエディタ
（↑の画像は実際のアプリの画像です）

simpleMD

バージョンアップすべく。。。
このアプリ、公開はしてるけどほぼ自分しか使わないんだけど、ローカライズの実装をしてみた。

ちなみにこのアプリ、Web上で動くアプリで
全ての処理はフロント側で動きます。
（なのでプログラム的な話は全てフロントの話になります）

なので、静的なものしか置けないwebサーバーでも全然大丈夫。
キャッシュAPIのお陰で通信料も節約。（オフラインでも動く）
良いこと尽くめ。

ローカライズの実装

というわけでどうローカライズしようかと考えた結果

1. メッセージ用のJsonファイルを作る

2. その内容を読み取り出力できるカスタムのタグを用意する

//jsonファイル


{
    "MESSAGE-00001" : "このメッセージが出力されます"
}

//カスタムタグを作る ts(js)ファイル


type messageJson = Record<string, any>;

const response = await fetch(jsonファイル);
const messageData:messageJson = await response.json();

export class localizMessage extends HTMLElement{
    static observedAttributes = ["message"];

    constructor() {
      super();
    }
    connectedCallback() {
        const messageID = this.getAttribute('message');
        if(messageID != null) this.innerHTML = messageData[messageID];
      }
    
    attributeChangedCallback(name:string, oldValue:string, newValue:string) {
        if(this.shadowRoot != null) this.shadowRoot.textContent = newValue;
    }  
}

customElements.define("localiz-message", localizMessage);

でthmlファイルでは

<localiz-message message="MESSAGE-00001"></localiz-message>

こんな感じすれば表示するときにメッセージがでる寸法

参考になったサイト

カスタム要素の使用 - Web API | MDN