【jQuery】「jquery.cookie.js」で言語切り替え機能を実装する
はじめに
どうも、NNCの石上です。
今回は、「jquery.cookie.js」を用いて言語切り替え機能を実装してみたいと思います。WordPress等では言語を切り替えるためのプラグインなども用意されていますが、このやり方は「jQuery」「jquery.cookie.js」を用いることで、静的サイトでも比較的簡単に対応できるものになっています。
言語切り替え機能の挙動
動画のように「jp / en」をクリックすることで言語が切り替わるのはもちろん、ページ遷移後も選択した言語が引き継がれている様に実装していきます。ページ遷移後の言語の引き継ぎについてはパラメータを用いる方法もありますが、今回はCookieを活用した方法で実装したいと思います。
実際のコード
冒頭で言及したように、「jQuery」及び「jquery.cookie.js」を用いますので、まずはHTMLファイルでの読み込みを忘れないようにしましょう。
<script src="assets/js/libs/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="assets/js/lang.js"></script> //このファイルにJavascriptを記述しますそれでは、実際のコードを確認しましょう。ここで重要になるのはHTMLとJavascriptになりますので、CSS(SCSS)は適宜見やすい様に調整していただいてOKです。
<div class="p-main">
<div class="p-main__para">
<p class="jp">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
<p class="en">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque saepe nesciunt dolor nisi at quam veniam debitis, quae molestiae dolore harum quis quidem inventore impedit, vero nihil autem maiores? Voluptas.</p>
</div>
<ul class="p-main__list">
<li><a href="next.html" class="jp">次のページへ</a></li>
<li><a href="next.html" class="en">Next</a></li>
</ul>
</div>
<div class="l-lang">
<a data-siteview="jp" class="l-lang__jp" href="./index.html">jp</a>
<a data-siteview="en" class="l-lang__en" href="./index.html">en</a>
</div>.p-main {
&__list {
display: inline-block;
margin-top: 32px;
}
}
.l-lang {
position: fixed;
top: 10%;
left: 10%;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
}$(function(){
// クッキーをセットする
function setSiteviewCookie() {
$('.l-lang a').bind('click', function() { //言語切り替えボタンを押下したときに発火
$.cookie('siteview', $(this).data('siteview'), { path: '/' }); //siteviewという名前でcookieに値をセット
});
}
setSiteviewCookie();
// 日本語 or 英語を選んだ場合の処理
if($.cookie('siteview') == 'en') {
//英語が選択されている場合(coockieの値にenが設定されている時)
$('.en').css('display', 'block'); //英語を表示
$('.jp').css('display', 'none'); //日本語を非表示
$('.l-lang .l-lang__en').addClass('is-active'); //言語切り替えボタンにクラスを振る処理
$('.l-lang .l-lang__jp').removeClass('is-active');
} else {
//日本語が選択されている場合
$('.jp').css('display', 'block'); //日本語を表示
$('.en').css('display', 'none'); //英語を非表示
$('.l-lang .l-lang__jp').addClass('is-active');
$('.l-lang .l-lang__en').removeClass('is-active');
}
})
解説
改めて、実装したい機能を洗い出してみたいと思います。
・ページ内に「日本語」用の文章と「英語」用の文章を設置
・言語切り替えボタン（ ja / en ）を用意し、クリックした項目によって言語を切り替え
・選択した言語はページ遷移後も引き継がれる
まずはHTMLについてです。日本語用・英語用のテキストは、いずれもHTML側で用意しておくことが必要です。その際、日本語テキストには「jp」、英語テキストには「en」というクラスを振ります （他のクラス名でも問題ありませんが、js内の記述と揃える必要があります。）加えて、言語切り替えボタンの日本語の方には「data-siteview=”jp”」を、英語の方には「data-siteview=”en”」を記述します。
続けて、Javascriptの記述について見ていきましょう。
// クッキーをセットする
function setSiteviewCookie() {
$('.l-lang a').bind('click', function() { //言語切り替えボタンを押下したときに発火
$.cookie('siteview', $(this).data('siteview'), { path: '/' }); //siteviewという名前でcookieに値をセット
});
}
setSiteviewCookie();ここでは、Cookieを用いて選択言語の引き継ぎを行えるようにしていきます。
言語切り替えボタン（.lang a）を押した際に、「$.cookie(‘siteview’, $(this).data(‘siteview’), { path: ‘/’ });」という記述で、siteviewという名前のcookieに値をセットします。この値については、html側で記述したdata-siteviewという属性を付与することで設定できます。また、末尾の「{ path: ‘/’ }」によって、サイト全体に適用されるようになります。
// 日本語 or 英語を選んだ場合の処理
if($.cookie('siteview') == 'en') {
//英語が選択されている場合(coockieの値にenが設定されている時)
$('.en').css('display', 'block'); //英語を表示
$('.jp').css('display', 'none'); //日本語を非表示
$('.l-lang .l-lang__en').addClass('is-active'); //言語切り替えボタンにクラスを振る処理
$('.l-lang .l-lang__jp').removeClass('is-active');
} else {
//日本語が選択されている場合
$('.jp').css('display', 'block'); //日本語を表示
$('.en').css('display', 'none'); //英語を非表示
$('.l-lang .l-lang__jp').addClass('is-active');
$('.l-lang .l-lang__en').removeClass('is-active');
}あとは言語切り替えの機能を記述できればOKです。
言語選択ボタンを押したとき、data-siteviewにセットされている値が$.cookie(‘siteview’)に保存されるので、その値によって処理を分岐させていきます。
siteviewという名前のcookieが「en」だった場合（＝英語が選択された時）は英語テキストを表示（display:block）し、反対に日本語テキストは非表示（display:none）にします。
siteviewという名前のcookieが「en」ではなかった場合（＝日本語が選択された場合）や、特に値がセットされていない場合などは日本語をテキストを表示（display:block）します。
ここまでの記述によって、言語切り替えの機能を実現させつつ、選択した言語が別ページでも保存されるようになりました。
当たり前ですが、遷移先のページにおいても「jQuery」「jquery.cookie.js」を読み込んだ上で、言語切り替えボタン及び日本語・英語のテキストを用意しておく様にしましょう。
以上で完成です！
