手軽にマルチ言語ページを！

Tweet

手軽にマルチ言語ページを簡単に作りたかったけど・・・

前回のページロードの遅さにつづいて第二弾。

頻繁にではないけど、たまに多言語でBlogを書くことがありますが、恐らく読む側からするとかなりストレスがあったかな・・・と思っていました。 日本語圏外の方は、英語ページを探さないといけない、けどそもそも探すページって日本語だよね・・・みたいな感じです。

そして、結論を言うと「作ったけど、現在のBlogに導入するのは失うものが多そうだから導入しないだろう・・・」という結果になってしまいましたがエントリだけは書いちゃいます。せっかく作ったのでw 「Markdownが使えるのに、このエレメントを使うとHTMLを書くことになる」ので気軽さが失われるのです。

language-selector エレメント

こんな感じで埋め込めます。

コードはこんな感じです。

言語セレクタ（「English」「日本語」と表示されてる部分）はこう書いて設置します。

<language-selector deflang="ja" langs="en:ja" switcher></language-selector>

Attribute は以下です。

• deflang : デフォルト（ページロード時）に表示される言語を指定
• langs : 用意している言語をISO 639-1(2文字のアルファベット)のフォーマットでコロン(:)区切りで指定します（現状の対応言語はen、ja。）
• switcher : これをつけると言語セレクタとなります。（つけないとコンテンツ本体と認識します）

次にコンテンツ本体です。

<language-selector>
  <span class="translation" lang="ja">
    こんな感じでマルチ言語対応ページがHTMLタグだけで実現可能です。<br>
    JavaScriptを書く必要はないんです :-) <br>
    Web ComponentsとPolymer、ホントにありがとう！！
  </span>
  <span class="translation" lang="en">
    This element enables to make multi language page something like this by HTML tag.<br>
    No JavaScript code is required :-)<br>
    Thank you very much for Polymer as well as Web Components.
  </span>
</language-selector>

language-selector のタグの中に、適当なタグを入れ（ここではspan）、その中に書いた言語をlang="xx"で指定すれば、言語セレクタとリンクされます。 言語セレクタの属性の langs で指定した言語のみ切替えの対象になります。

注意：language-selectorの直前に別のタグで囲むと認識してくれないバグがあります。

リポジトリ

https://github.com/ryoyakawai/language-selector

Live Demo

Demo: language-selector

動作の確認状況

2018年4月12日現在、macOS High Sierra(10.13.3)上でChrome 65.0.3325.181、Firefox 59.0.2、Safari 11.0.3で動作の確認をしています。