※弊社記事はたぶんにPRが含まれますので
話半分で受け取ってください。

表示する言語をボタンで切り替えるjQueryのプラグイン

 投稿の日本語表示と英語表示をボタンひとつで切り替える機能があったら良いかもしれない、と思って、jQueryのプラグインを作成しました。ブラウザの言語設定を参照してそれにあった言語を表示する機能もあります。

ダウンロード

 以下からダウンロード出来ます。exampleディレクトリにすぐに試せるサンプルファイルも入っています。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/* for buttons */
.langbuttons a {
	margin-right: 5px;
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #eee;
	cursor: pointer;
}

/* when the button is pushed */
.langbuttons a.on {
	background: #666;
	border: 1px solid #000;
	color: #fff;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!--
jquery.cookie.jsは必須ではありません。
言語設定を設定をCookieに保存して、
2回目以降のアクセス時に前回使用した言語を表示するようにします。
-->
<script src="./jquery.cookie.js"></script>

<script src="./langswitcher.js"></script>
</head>
<body>

<!-- 切替用のボタン / Buttons for lang switch -->
<div class="langbuttons">
<a id="ja">日本語</a>
<a id="en">English</a>
</div>

<!-- 本文 / contents -->
<p class="ja">こんにちは</p>
<p class="en">Hello</p>

<script>
//言語切替の設定 / Setting for lang switch
$(".langbuttons").langswitcher('ja');
</script>
</body>
</html>

切替用のボタン

 必要な要素は、言語コードがidとして付与された要素とそれをラップする要素の2種類です。言語コードはISO639で定義されている2文字のアルファベットです。

 「ラップする要素」 > 「言語コードがidとして付与された要素」 という構造になっていれば、要素に使用するタグは div でも p でも span でも何でもかまいません。ここでは日本語(ja)と英語(en)を指定しています。

 ボタンはCSSでそれっぽくしてるだけなので、自分の好みで適当に変更してください。あと、選択中のボタンには on クラスが付与されるようになっています。

本文

 切替用ボタンのidに対応するクラスを付与しておきます。

言語切替の設定

 切り替えボタンをラップしている要素(上の例ではclass=”langbuttons”)に langswitcher(‘デフォルトの言語’) を設定します。

処理内容

 ブラウザの言語設定を取得して、その言語設定に合う言語を表示します。もし、ブラウザの言語設定と合致する言語(id名)がなかった場合は、デフォルトに設定した言語が表示されます。

 jquery.cookie.jsを読み込んでいる場合は、最後に表示した言語をCookieに保持するようになっています。Cookieの有効期限は7日になっています。このあたりは自分の用途や環境に応じて適宜変更してください。25行目と53行目で使用しています。

良かったら使ってね

 作ったは良いのですが、「SEO的に微妙かな……」と思って結局icoroでは使っていません。

 どうせならタイトルも日本語と英語切り替えられるようにするじゃないですか。でも、検索エンジンってJavascriptとか関係ないので、検索結果に表示されるタイトルがやたら長くなるじゃないですか。「こんにちは世界! Hello World!」みたいな感じで。しかも、長すぎると後半切られちゃって、複数言語書いても表示されなかったりするじゃないですかやだー。

 それだったら日本語と英語で別の投稿にしてしまった方が分かりやすくて良いのかなという感じです。でもまあ、用途によっては使い出があるかもと思うので、良かったら使ってね。

参考

jQuery標準デザイン講座

  • メーカー:翔泳社
  • カテゴリ:Kindle版
  • 発売日:2015/12/15

関連する記事