translate.js

どうもmrです!

以前、使い方だけ紹介したtranslate.jsの中身について簡単にお話ししようと思います。
記事はこちら
リポジトリはこちら

まあ、まずこのtranslate.js自体のソースコードは50行とめちゃくちゃ少ない量なので、
全然ハードルは高くないと思います。

まずは変数宣言の箇所です。 まず、ポイントとなるのが、data-の形をとる二つの文字列、data-enとdata-jpについてです。

これらdata-
はカスタムデータ属性と呼ばれ、
htmlとDOM表現との固有の情報をやり取りできるようになります。

このカスタムデータ属性の扱いに関してはこちらをご覧ください!

そして switchableElements変数には言語切り替えを実装する要素たちが入ってきます。

defaultLanguageはその名の通り初期状態の言語を設定します。
最初の画面が英語がよければ、これにen変数を代入してあげてください。 続いては切り替えを行う要素をとあるタイミングで全取得しています。

とあるタイミングとは’DOMContentLoaded’のことなのですが、
これはHTMLが読み込まれたけど、まだCSS、画像、サブフレームが読み込まれていない状態のことをさしています。

このtranslate.jsでは画像も日英で変換できるようになっていますが、
これは読み込み先のリンクを切り替えているので、
画像が読み込まれていなくても問題はありません。

全取得に関しては、document.getElementsByClassName(‘lang’);で行なっていますので、
利用方法である切り替えたい要素のクラス属性にlangを必ず追加してください。

そして、デフォルトの言語に切り替えます。 あとで説明するswitchLanguageTo関数をラッパーした関数たちです。
特に難しいことはしていません。 このプラグインの核となる部分です。

先ほど全取得した要素を格納している配列変数を走査して、
それぞれのタグに応じた方法で言語を切り替えています。

if文でlang属性を持っているかをチェックしていますが、
こちらは念のための処理です。
まず、このif文でfalseになることはないでしょう。

あるとすれば、このtranslate.jsでswitchableElementsに全取得した後に、
htmlを書き換えて、lang属性を外した時くらいですね。

でも後からlang属性を足した場合も、切り替えが行われないので、
再度、全取得する関数を追加した方が良さそうですね…。

要素.tagNameはタグ名が大文字で返ってくるので、
switch文のラベルは全て大文字で判断しています。
img、video、audio、embed、iframeは読み込むファイルを切り替えるのでsrcを切り替え。

inputは表示されている文を切り替えるので、valueの切り替え。

buttonやその他は内部のhtmlを書き換えるのでinnerHTMLを切り換えています。

以上がtranslate.jsの全てになります。
またtranslate.jsを更新することがありましたら、
こちらの記事も更新いたします!

mr

JavaScript

Posted by mr