MD（マークダウン）エディタつくろう その２（ローカライズの実装）
というわけで、すでに出来上がってるMDエディタ
（↑の画像は実際のアプリの画像です）
バージョンアップすべく。。。
このアプリ、公開はしてるけどほぼ自分しか使わないんだけど、ローカライズの実装をしてみた。
ちなみにこのアプリ、Web上で動くアプリで
全ての処理はフロント側で動きます。
（なのでプログラム的な話は全てフロントの話になります）
なので、静的なものしか置けないwebサーバーでも全然大丈夫。
キャッシュAPIのお陰で通信料も節約。（オフラインでも動く）
良いこと尽くめ。
ローカライズの実装
というわけでどうローカライズしようかと考えた結果
メッセージ用のJsonファイルを作る
その内容を読み取り出力できるカスタムのタグを用意する
//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>こんな感じすれば表示するときにメッセージがでる寸法
参考になったサイト
コメント