システム Edit : 2021.06.15 Update : 2024.11.07

「jquery.cookie.js」を使って、言語切り替えサイトをつくる

Contents

やりたいこと
デモ
実装方法

やりたいこと

・ページ内に「日本語」用の文章と「英語」用の文章を設置
・言語切り替えボタン、例えば「jp / en」などを用意し、どちらをクリックしたかによって、ページ内の言語を出し分ける
・言語切り替えボタンにて言語を選択したのち、ページ遷移した場合も選択した言語が引き継がれる

デモ

以下は、iframe内で実装しています。1ページ目、2ページ目に遷移した際に、選択した言語を引き継いでいることを確認できます。

実装方法

①ファイルの読み込み

①jqueryを使用するので、jqueryファイル読み込み
②jquery.cookie.min.jsの読み込み(Githubからのダウンロードはこちら) いずれも、CDN経由でもファイル設置でもOKです。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

②jsの記載

$(function(){
/* クッキーをセットする
 -------------------------------------------------- */
  function setSiteviewCookie() {
    $('.btn-lang a').bind('click', function() {　//言語切り替えボタンを押下したときに発火
      $.cookie('siteview', $(this).data('siteview'), { path: '/' }); //siteviewという名前でcookieに値をセット
     });
  }
  setSiteviewCookie();

/* 日本語 or 英語を選んだ場合の処理
 -------------------------------------------------- */
  if($.cookie('siteview') == 'en') {
    //英語が選択されている場合(coockieの値にenが設定されている時)
    $('.content-en').css('display', 'block'); //英語を表示
    $('.content-jp').css('display', 'none');　//日本語を非表示
    $('.btn-lang .en').addClass('selected');　//言語切り替えボタンにクラスを振る処理
    $('.btn-lang .jp').removeClass('selected');
  } else {
    //日本語が選択されている場合
    $('.content-jp').css('display', 'block'); //日本語を表示
    $('.content-en').css('display', 'none');　//英語を非表示
    $('.btn-lang .jp').addClass('selected');
    $('.btn-lang .en').removeClass('selected');
  }
});

$(function(){

/* クッキーをセットする

-------------------------------------------------- */

function setSiteviewCookie() {

$('.btn-lang a').bind('click', function() {　//言語切り替えボタンを押下したときに発火

$.cookie('siteview', $(this).data('siteview'), { path: '/' }); //siteviewという名前でcookieに値をセット

});

}

setSiteviewCookie();

/* 日本語 or 英語を選んだ場合の処理

-------------------------------------------------- */

if($.cookie('siteview') == 'en') {

//英語が選択されている場合(coockieの値にenが設定されている時)

$('.content-en').css('display', 'block'); //英語を表示

$('.content-jp').css('display', 'none');　//日本語を非表示

$('.btn-lang .en').addClass('selected');　//言語切り替えボタンにクラスを振る処理

$('.btn-lang .jp').removeClass('selected');

} else {

//日本語が選択されている場合

$('.content-jp').css('display', 'block'); //日本語を表示

$('.content-en').css('display', 'none');　//英語を非表示

$('.btn-lang .jp').addClass('selected');

$('.btn-lang .en').removeClass('selected');

}

});

①クッキーをセットする言語切り替えボタンを押したときに、 $.cookie('siteview', $(this).data('siteview'), { path: '/' });の記述で、siteviewという名前のcookieに値をセットします。どんな値をセットするかは、html側でdata-siteviewという属性を付与することで設定できます。(後ほどhtmlの記述で説明します。)

②クッキーをセットする際のオプション今回は、 { path: '/' }の記述でサイト全体に適用するように設定を入れています。これで、ページ遷移をしても値が保たれます。その他、下記のように有効期限なども設定できます。

expires	有効期限(日数)
path	有効なパス(ドメイン全体で利用したい場合は’/’を設定)
domain	有効なドメイン
secure	HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

③日本語 or 英語を選んだ場合の処理言語選択ボタンを押したとき、data-siteviewにセットされている値が$.cookie(‘siteview’)に保存されるので、その値を判定することでそれぞれの処理を分岐することができます。
今回は、siteviewという名前のcookieに「en」がセットされているときは、html上の.content-enの内容を表示(display:block)し、反対に.content-jpの内容は非表示(display:none)にする処理をしています。
siteviewという名前のcookieに「en」がセットされていない=日本語を選択をしている場合や、特に値がセットされていないときは、日本語の内容を表示することで、デフォルトでは日本語が表示されるようにしています。

③HTMLの記載

<div class="inner">
  <h1 class="content-jp">1ページ目</h1>
  <h1 class="content-en">1page</h1>
  <p class="content-jp">
  ここでは、「jquery.cookie.js」による言語切り替えの説明をしています。現在は日本語が表示されています。
  </p>
  <p class="content-en">
  Here, the language switching by "jquery.cookie.js" is explained. Currently, Japanese is displayed.
  </p>
  <div class="btn-lang">
    <a data-siteview="jp" class="jp" href="./cookie.html">Japanese</a>
    /
    <a data-siteview="en" class="en" href="./cookie.html">English</a>
  </div>
  <a href="./cookie2.html" style="float:right;margin-top:-1em;" class="content-jp">2ページ目へ →</a>
  <a href="./cookie2.html" style="float:right;margin-top:-1em;" class="content-en">2page →</a>
</div>

ここでは、「jquery.cookie.js」による言語切り替えの説明をしています。現在は日本語が表示されています。

</p>

Here, the language switching by "jquery.cookie.js" is explained. Currently, Japanese is displayed.

</p>

<a data-siteview="jp" class="jp" href="./cookie.html">Japanese</a>

<a data-siteview="en" class="en" href="./cookie.html">English</a>

</div>

<a href="./cookie2.html" style="float:right;margin-top:-1em;" class="content-jp">2ページ目へ →</a>

</div>

①日本語表示にはclass="content-jp"を振ります。
②英語表示にはclass="content-en"を振ります。
いずれも他のクラス名でも問題ありませんが、js内の記述と揃えてください。
③言語切り替えボタンの日本語の方にはdata-siteview="jp"を記述します。
④言語切り替えボタンの英語の方にはdata-siteview="en"を記述します。
js側の記述、$('.btn-lang a').bind('click', function() {という内容にて、言語切り替えボタンをクリックしたときに、data-siteviewの値をcookieに保存するという処理を行っています。
これで一通りの設定が完了しました。

今回はcookieでの有効期限は特に設定していないので、ブラウザのキャッシュがクリアされたときにリセットされます。
またこの機能を応用すると、サイト制作の幅も広がるのではとおもいます。例えばWordpressが組み込まれたサイトなどでも、カスタムフィールドで日本語と英語の内容を出し分けて、jquery.cookie.jsにて表示を切り替える事で、比較的簡単に多言語サイトの制作が可能になります。
URLを日本語と英語で切り替えたくない場合や、ひとつの編集画面で多言語対応したいときなどに役立つのではと思います。