自前サイトを３ヵ国語対応させたい話

僕は、将来スペイン語圏に移住したいという夢を持っています。

若いうちに稼げるだけ稼いで、早くリタイアして、その国で多くを求めず幸せに暮らす。

今から興味津々なので、スペイン語も勉強しています。

なので、自前の創作サイトも勉強がてらスペイン語に対応させることにしました。

サイト自体はすでに英語に標準対応しているので、あとは適切な表現に変えていくだけなのですが、

まだ始めたてなのでそれがわからず…

それでも、とりあえず入口ページだけでもスペイン語を追加しようと思い立ったのでした。

そのコードがこちらです。

<div class="entry-to-top">
<p id="displayText"><span style="font-size: 20px;">
  <b>Select language:</b>
</span></p>
<button onclick="switchLanguage('english')"><img src="img/f-GB.png">
</button>
<button onclick="switchLanguage('japanese')"><img src="img/f-JP.png">
</button>
<button onclick="switchLanguage('spanish')"><img src="img/f-ES.png">
</button>
<div class="english-content" lang="en">
    <!-- English content -->
    <h2>Attention!!!</h2>
    <p>
      This site is the creative activities site by Noboru Suzusame.<br>
      Please enter the top page only if you understand Japanese creative and fan activities.
    </p>
    <a href="top.html">Entre</a>
    <p>
      Q. Why is not the USA's flag but the UK's?<br>
      A. This site's English is written base on British. <br>
      However, this is not a strict rule and expressions from the USA and other countries may be included.
    </p>
</div>
<div class="japanese-content" lang="ja" style="display: none;">
  <!-- 日本語のコンテンツ -->
  <h2>あてんしょん！！！</h2>
  <p>
    このサイトはNoboru Suzusameによる創作サイトです。<br>
    日本のクリエイティブ活動やファン活動を理解される方のみ、トップページにお進みください。
  </p>
  <a href="top-ja.html">入口</a>
</div>
<div class="spanish-content" lang="es" style="display: none;">
  <!-- Spanish contents -->
  <h2>ATENCIÓN!!!</h2>
  <p>
    Este sitio es el de la actividad creativa de Noboru.<br>
    Por favor, entre en la página superior sólo si entiende las actividades creativas y de aficionados japoneses.
  </p>
  <br>
  <p>La página en español no está lista. Disculpe las molestias.</p>
</div>
</div>

function switchLanguage(language) {
    var entryToTop = document.querySelector('.entry-to-top');
    var englishContent = entryToTop.querySelector('.english-content');
    var japaneseContent = entryToTop.querySelector('.japanese-content');
    var spanishContent = entryToTop.querySelector('.spanish-content');

    if (language === 'english') {
        englishContent.style.display = 'block';
        japaneseContent.style.display = 'none';
        spanishContent.style.display = 'none';
    } else if (language === 'japanese') {
        englishContent.style.display = 'none';
        japaneseContent.style.display = 'block';
        spanishContent.style.display = 'none';
    } else if (language === 'spanish') {
        englishContent.style.display = 'none';
        japaneseContent.style.display = 'none';
        spanishContent.style.display = 'block';
    }
}

window.onload = function() {
    var browserLanguage = navigator.language.toLowerCase();

    if (browserLanguage.includes('ja')) {
        switchLanguage('japanese');
    } else if (browserLanguage.includes('es')) {
        switchLanguage('spanish');
    } else {
        switchLanguage('english');
    }
};

JSの方はif文を使って判定するだけという
とても簡単なコードだったのでした。

特に、あとから加えたのが下段で、

ブラウザの言語を取得し、それに沿った言語を優先表示する
というものを実装しました。

もっといろいろなものを作ってみたいですね。

JSじゃないですが、せっかくイラストサイトなので、
PHPでログインボーナス作ってみようかなーーとか思ってたりします。

プログラミングは趣味でやるのが一番気楽。僕にとってはそうです。

そう、それこそ外国で空と海を眺めながら。